Merge pull request #1344 from Availity/docs/phone-storybook-csf3

docs: fixing storybook for phone component
Availity · Oct 30, 2023 · 65ef07f · 65ef07f
2 parents c67210f + f088378
commit 65ef07f
Showing 1 changed file with 63 additions and 52 deletions.
diff --git a/packages/phone/src/Phone.stories.tsx b/packages/phone/src/Phone.stories.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 import { Button } from 'reactstrap';
 import * as yup from 'yup';
+import '@availity/yup';
 import { Phone } from '..';
 
 import './validatePhone';
@@ -19,56 +20,66 @@ export default {
       },
     },
   },
-} as Meta;
-
-export const Default: Story = ({
-  country,
-  required,
-  strict,
-  showExtension,
-  enablePhoneColProps,
-  phoneColProps,
-  enableExtColProps,
-  extColProps,
-}) => (
-  <FormikResults
-    onSubmit={() => {
-      console.log('submitted');
-    }}
-    initialValues={{
-      phone: '',
-      ext: '',
-    }}
-    validationSchema={yup.object().shape({
-      phone: yup.string().validatePhone(undefined, strict, country).isRequired(required, 'This field is required.'),
-      ext: yup.string().isRequired(required),
-    })}
-  >
-    <Phone
-      name="phone"
-      label="Phone"
-      country={country}
-      showExtension={showExtension}
-      phoneColProps={enablePhoneColProps ? phoneColProps : undefined}
-      extProps={{
-        name: 'ext',
-        label: 'Ext.',
-        extColProps: enableExtColProps ? extColProps : undefined,
+};
+type PhoneStoryProps = {
+  country: string;
+  required: boolean;
+  strict: boolean;
+  showExtension: boolean;
+  enablePhoneColProps: boolean;
+  phoneColProps: object;
+  enableExtColProps: boolean;
+  extColProps: object;
+};
+export const Default: StoryObj<PhoneStoryProps> = {
+  render: ({
+    country,
+    required,
+    strict,
+    showExtension,
+    enablePhoneColProps,
+    phoneColProps,
+    enableExtColProps,
+    extColProps,
+  }) => (
+    <FormikResults
+      onSubmit={() => {
+        console.log('submitted');
       }}
-    />
-    <Button type="submit" color="primary">
-      Submit
-    </Button>
-  </FormikResults>
-);
-Default.args = {
-  country: 'US',
-  required: false,
-  strict: false,
-  showExtension: false,
-  enablePhoneColProps: false,
-  phoneColProps: { xs: { size: 9 } },
-  enableExtColProps: false,
-  extColProps: { xs: { size: 3 } },
+      initialValues={{
+        phone: '',
+        ext: '',
+      }}
+      validationSchema={yup.object().shape({
+        phone: yup.string().validatePhone(undefined, strict, country).isRequired(required, 'This field is required.'),
+        ext: yup.string().isRequired(required),
+      })}
+    >
+      <Phone
+        name="phone"
+        label="Phone"
+        country={country}
+        showExtension={showExtension}
+        phoneColProps={enablePhoneColProps ? phoneColProps : undefined}
+        extProps={{
+          name: 'ext',
+          label: 'Ext.',
+          extColProps: enableExtColProps ? extColProps : undefined,
+        }}
+      />
+      <Button type="submit" color="primary">
+        Submit
+      </Button>
+    </FormikResults>
+  ),
+  args: {
+    country: 'US',
+    required: false,
+    strict: false,
+    showExtension: false,
+    enablePhoneColProps: false,
+    phoneColProps: { xs: { size: 9 } },
+    enableExtColProps: false,
+    extColProps: { xs: { size: 3 } },
+  },
 };
-Default.storyName = 'default';