From 41e650e9618d761966e97127466b34d114144704 Mon Sep 17 00:00:00 2001 From: Bill Dami Date: Mon, 18 Mar 2024 15:28:39 -0400 Subject: [PATCH] adding stories for react-hook-form usage --- src/assets/react.svg | 1 - .../MaskedCurrencyInput.stories.tsx | 22 +++++++++- .../MaskedCurrencyInputRTL.stories.tsx | 22 +++++++++- .../MaskedPatternInput.stories.tsx | 2 +- src/utils/storybook.tsx | 41 +++++++++++++++++++ 5 files changed, 84 insertions(+), 4 deletions(-) delete mode 100644 src/assets/react.svg create mode 100644 src/utils/storybook.tsx diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/MaskedCurrencyInput/MaskedCurrencyInput.stories.tsx b/src/components/MaskedCurrencyInput/MaskedCurrencyInput.stories.tsx index 4a6057f..d93250f 100644 --- a/src/components/MaskedCurrencyInput/MaskedCurrencyInput.stories.tsx +++ b/src/components/MaskedCurrencyInput/MaskedCurrencyInput.stories.tsx @@ -1,7 +1,9 @@ import type { Meta, StoryObj } from '@storybook/react'; import { fn } from '@storybook/test'; +import { Controller } from 'react-hook-form'; import MaskedCurrencyInput from './MaskedCurrencyInput'; +import { ReactHookFormDemo } from '../../utils/storybook'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -33,9 +35,27 @@ export const Basic: Story = { }, }; -// TODO Story for integration w/react-hook-form and export const ReactHookForm: Story = { args: { label: 'Dollar Amount', }, + parameters: { + docs: { + source: { + type: 'code', + }, + }, + }, + render: ({ ...rest }) => ( + + {({ control, errors }) => ( + } + rules={{ required: true }} + /> + )} + + ), }; diff --git a/src/components/MaskedCurrencyInputRTL/MaskedCurrencyInputRTL.stories.tsx b/src/components/MaskedCurrencyInputRTL/MaskedCurrencyInputRTL.stories.tsx index cefd040..79628cb 100644 --- a/src/components/MaskedCurrencyInputRTL/MaskedCurrencyInputRTL.stories.tsx +++ b/src/components/MaskedCurrencyInputRTL/MaskedCurrencyInputRTL.stories.tsx @@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { fn } from '@storybook/test'; import MaskedCurrencyInputRTL from './MaskedCurrencyInputRTL'; +import { ReactHookFormDemo } from '../../utils/storybook'; +import { Controller } from 'react-hook-form'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -33,9 +35,27 @@ export const Basic: Story = { }, }; -// TODO Story for integration w/react-hook-form and export const ReactHookForm: Story = { args: { label: 'Dollar Amount (RTL)', }, + parameters: { + docs: { + source: { + type: 'code', + }, + }, + }, + render: ({ ...rest }) => ( + + {({ control, errors }) => ( + } + rules={{ required: true }} + /> + )} + + ), }; diff --git a/src/components/MaskedPatternInput/MaskedPatternInput.stories.tsx b/src/components/MaskedPatternInput/MaskedPatternInput.stories.tsx index 44b1188..64fe717 100644 --- a/src/components/MaskedPatternInput/MaskedPatternInput.stories.tsx +++ b/src/components/MaskedPatternInput/MaskedPatternInput.stories.tsx @@ -19,7 +19,7 @@ const meta = { // backgroundColor: { control: 'color' }, // label: { control: '' } }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + // Use `fn` to spy on the onChange arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onChange: fn() }, } satisfies Meta; diff --git a/src/utils/storybook.tsx b/src/utils/storybook.tsx new file mode 100644 index 0000000..4ace967 --- /dev/null +++ b/src/utils/storybook.tsx @@ -0,0 +1,41 @@ +import { Button, Stack } from '@mui/material'; +import { ReactNode } from 'react'; +import { Control, FieldErrors, SubmitHandler, useForm } from 'react-hook-form'; + +interface FormValues { + basic: string; + ccExpire: string; + ccNum: string; + currency: string; + currencyRtl: string; + pct: string; + phone: string; + ssn: string; + zip: string; +} + +export function ReactHookFormDemo({ + children, +}: { + // eslint-disable-next-line + children: (vals: { control: Control; errors: FieldErrors }) => ReactNode; +}) { + const { + control, + formState: { errors }, + handleSubmit, + } = useForm({ defaultValues: { currency: '', currencyRtl: '0', phone: '' } }); + + const onSubmit: SubmitHandler = (data) => console.log('submitted', data); + + return ( +
+ + {children({ control, errors })} + + +
+ ); +}