adding stories for react-hook-form usage

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 <Controller>
 export const ReactHookForm: Story = {
     args: {
         label: 'Dollar Amount',
     },
+    parameters: {
+        docs: {
+            source: {
+                type: 'code',
+            },
+        },
+    },
+    render: ({ ...rest }) => (
+        <ReactHookFormDemo>
+            {({ control, errors }) => (
+                <Controller
+                    control={control}
+                    name="currencyRtl"
+                    render={({ field }) => <MaskedCurrencyInput error={!!errors.currencyRtl} {...rest} {...field} />}
+                    rules={{ required: true }}
+                />
+            )}
+        </ReactHookFormDemo>
+    ),
 };

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 <Controller>
 export const ReactHookForm: Story = {
     args: {
         label: 'Dollar Amount (RTL)',
     },
+    parameters: {
+        docs: {
+            source: {
+                type: 'code',
+            },
+        },
+    },
+    render: ({ ...rest }) => (
+        <ReactHookFormDemo>
+            {({ control, errors }) => (
+                <Controller
+                    control={control}
+                    name="currency"
+                    render={({ field }) => <MaskedCurrencyInputRTL error={!!errors.currency} {...rest} {...field} />}
+                    rules={{ required: true }}
+                />
+            )}
+        </ReactHookFormDemo>
+    ),
 };

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<typeof MaskedPatternInput>;
 

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<FormValues, any>; errors: FieldErrors<FormValues> }) => ReactNode;
+}) {
+    const {
+        control,
+        formState: { errors },
+        handleSubmit,
+    } = useForm<FormValues>({ defaultValues: { currency: '', currencyRtl: '0', phone: '' } });
+
+    const onSubmit: SubmitHandler<FormValues> = (data) => console.log('submitted', data);
+
+    return (
+        <form noValidate onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={2}>
+                {children({ control, errors })}
+                <Button type="submit" variant="outlined">
+                    Submit
+                </Button>
+            </Stack>
+        </form>
+    );
+}