Refactor(web-react): Use correct values for Storybook controls based …

…on type
lmc-eu · Jun 20, 2024 · a39bf9d · a39bf9d
1 parent 4cd90d9
commit a39bf9d
Show file tree

Hide file tree

Showing 41 changed files with 111 additions and 123 deletions.
diff --git a/packages/web-react/src/components/Accordion/demo/AccordionUncontrolled.tsx b/packages/web-react/src/components/Accordion/demo/AccordionUncontrolled.tsx
@@ -1,6 +1,6 @@
 // Because there is no `dist` directory during the CI run
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import { ComponentStory } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import { Link } from '../../Link';
 import { Pill } from '../../Pill';
@@ -10,7 +10,7 @@ import AccordionItem from '../AccordionItem';
 import UncontrolledAccordion from '../UncontrolledAccordion';
 import { content } from './Accordion';
 
-const Story: ComponentStory<typeof UncontrolledAccordion> = () => (
+const Story: StoryFn<typeof UncontrolledAccordion> = () => (
   <UncontrolledAccordion id="accordion-example" defaultOpen="accordion-item-example-1">
     <AccordionItem id="accordion-item-example-0">
       <AccordionHeader

diff --git a/packages/web-react/src/components/Accordion/stories/UncontrolledAccordion.stories.tsx b/packages/web-react/src/components/Accordion/stories/UncontrolledAccordion.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof UncontrolledAccordion> = {
   component: UncontrolledAccordion,
   argTypes: {
     defaultOpen: {
-      control: 'array',
+      control: 'object',
     },
     elementType: {
       control: 'text',

diff --git a/packages/web-react/src/components/Alert/stories/Alert.stories.tsx b/packages/web-react/src/components/Alert/stories/Alert.stories.tsx
@@ -37,7 +37,7 @@ const meta: Meta<typeof Alert> = {
     isCentered: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
   },

diff --git a/packages/web-react/src/components/Breadcrumbs/stories/BreadcrumbsItem.stories.tsx b/packages/web-react/src/components/Breadcrumbs/stories/BreadcrumbsItem.stories.tsx
@@ -21,13 +21,13 @@ const meta: Meta<typeof BreadcrumbsItem> = {
     isCurrent: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'true' },
       },
     },
     isGoBackOnly: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
   },

diff --git a/packages/web-react/src/components/Checkbox/stories/Checkbox.stories.tsx b/packages/web-react/src/components/Checkbox/stories/Checkbox.stories.tsx
@@ -26,31 +26,31 @@ const meta: Meta<typeof Checkbox> = {
     isDisabled: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isChecked: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'true' },
       },
     },
     isItem: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isLabelHidden: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isRequired: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     label: {

diff --git a/packages/web-react/src/components/Collapse/demo/Collapse.tsx b/packages/web-react/src/components/Collapse/demo/Collapse.tsx
@@ -1,9 +1,9 @@
 // Because there is no `dist` directory during the CI run
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import { ComponentStory } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import { Button } from '../../Button';
-import { useCollapse, Collapse } from '../index';
+import { Collapse, useCollapse } from '../index';
 
 export const content = (
   <>
@@ -32,7 +32,7 @@ export const CollapseTrigger = ({ isOpen, ...rest }: any) => {
   return <Button {...rest}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>;
 };
 
-const Story: ComponentStory<typeof Collapse> = () => {
+const Story: StoryFn<typeof Collapse> = () => {
   const { isOpen, toggleHandler } = useCollapse(false);
 
   return (

diff --git a/packages/web-react/src/components/Collapse/demo/CollapseUncontrolled.tsx b/packages/web-react/src/components/Collapse/demo/CollapseUncontrolled.tsx
@@ -1,11 +1,11 @@
 // Because there is no `dist` directory during the CI run
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import { ComponentStory } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import UncontrolledCollapse from '../UncontrolledCollapse';
-import { content, CollapseTrigger } from './Collapse';
+import { CollapseTrigger, content } from './Collapse';
 
-const Story: ComponentStory<typeof UncontrolledCollapse> = () => {
+const Story: StoryFn<typeof UncontrolledCollapse> = () => {
   return (
     <div>
       {content}

diff --git a/packages/web-react/src/components/Collapse/stories/Collapse.stories.tsx b/packages/web-react/src/components/Collapse/stories/Collapse.stories.tsx
@@ -38,7 +38,7 @@ const meta: Meta<typeof Collapse> = {
     transitionDuration: {
       control: 'number',
       table: {
-        defaultValue: { summary: 250 },
+        defaultValue: { summary: '250' },
       },
     },
   },

diff --git a/packages/web-react/src/components/Collapse/stories/UncontrolledCollapse.stories.tsx b/packages/web-react/src/components/Collapse/stories/UncontrolledCollapse.stories.tsx
@@ -33,7 +33,7 @@ const meta: Meta<typeof UncontrolledCollapse> = {
     transitionDuration: {
       control: 'number',
       table: {
-        defaultValue: { summary: 250 },
+        defaultValue: { summary: '250' },
       },
     },
   },

diff --git a/packages/web-react/src/components/Dropdown/stories/Dropdown.stories.tsx b/packages/web-react/src/components/Dropdown/stories/Dropdown.stories.tsx
@@ -23,14 +23,14 @@ const meta: Meta<typeof Dropdown> = {
     enableAutoClose: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'true' },
       },
     },
     fullWidthMode: {
       control: 'select',
       options: [...Object.values(DropdownFullWidthModes), undefined],
       table: {
-        defaultValue: { summary: undefined },
+        defaultValue: { summary: 'undefined' },
       },
     },
     id: {

diff --git a/packages/web-react/src/components/Dropdown/stories/DropdownTrigger.stories.tsx b/packages/web-react/src/components/Dropdown/stories/DropdownTrigger.stories.tsx
@@ -22,7 +22,7 @@ const meta: Meta<typeof DropdownTrigger> = {
     elementType: {
       control: 'object',
       table: {
-        defaultValue: { summary: Button },
+        defaultValue: { summary: 'Button' },
       },
     },
   },

diff --git a/packages/web-react/src/components/Dropdown/stories/UncontolledDropdown.stories.tsx b/packages/web-react/src/components/Dropdown/stories/UncontolledDropdown.stories.tsx
@@ -23,14 +23,14 @@ const meta: Meta<typeof UncontrolledDropdown> = {
     enableAutoClose: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'true' },
       },
     },
     fullWidthMode: {
       control: 'select',
       options: [...Object.values(DropdownFullWidthModes), undefined],
       table: {
-        defaultValue: { summary: undefined },
+        defaultValue: { summary: 'undefined' },
       },
     },
     id: {

diff --git a/packages/web-react/src/components/FieldGroup/stories/FieldGroup.stories.tsx b/packages/web-react/src/components/FieldGroup/stories/FieldGroup.stories.tsx
@@ -58,19 +58,19 @@ const meta: Meta<typeof FieldGroup> = {
     isDisabled: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isLabelHidden: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isRequired: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     label: {
@@ -80,7 +80,7 @@ const meta: Meta<typeof FieldGroup> = {
       control: 'text',
     },
     validationState: {
-      control: 'FieldGroup',
+      control: 'select',
       options: [...Object.values(ValidationStates), undefined],
       table: {
         defaultValue: { summary: undefined },

diff --git a/packages/web-react/src/components/FileUploader/stories/FileUploader.stories.tsx b/packages/web-react/src/components/FileUploader/stories/FileUploader.stories.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { SpiritFileUploaderAttachmentProps, SpiritFileUploaderProps } from '../../../types';
 import ReadMe from '../README.md';
 import { FileUploader, FileUploaderAttachment, FileUploaderInput, FileUploaderList, useFileQueue } from '..';
+import { fn } from '@storybook/test';
 
 const meta: Meta<typeof FileUploader> = {
   title: 'Components/FileUploader',
@@ -14,43 +15,33 @@ const meta: Meta<typeof FileUploader> = {
     },
   },
   argTypes: {
-    addToQueue: {
-      control: 'function',
-    },
     children: {
       control: 'text',
     },
-    clearQueue: {
-      control: 'function',
-    },
     errorMessages: {
       control: 'object',
     },
     fileQueue: {
       control: 'object',
     },
-    findInQueue: {
-      control: 'function',
-    },
     id: {
       control: 'text',
     },
     isFluid: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
-    onDismiss: {
-      control: 'function',
-    },
-    updateQueue: {
-      control: 'function',
-    },
   },
   args: {
     id: 'file-uploader',
     isFluid: false,
+    fileInQueue: fn(),
+    onDismiss: fn(),
+    updateQueue: fn(),
+    clearQueue: fn(),
+    addToQueue: fn(),
   },
 };
 

diff --git a/packages/web-react/src/components/FileUploader/stories/FileUploaderAttachment.stories.tsx b/packages/web-react/src/components/FileUploader/stories/FileUploaderAttachment.stories.tsx
@@ -20,7 +20,7 @@ const meta: Meta<typeof FileUploaderAttachment> = {
     hasImagePreview: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     iconName: {

diff --git a/packages/web-react/src/components/FileUploader/stories/FileUploaderInput.stories.tsx b/packages/web-react/src/components/FileUploader/stories/FileUploaderInput.stories.tsx
@@ -26,25 +26,25 @@ const meta: Meta<typeof FileUploaderInput> = {
     isDisabled: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isLabelHidden: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isMultiple: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isRequired: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     label: {
@@ -59,13 +59,13 @@ const meta: Meta<typeof FileUploaderInput> = {
     maxFileSize: {
       control: 'number',
       table: {
-        defaultValue: { summary: 1000000 },
+        defaultValue: { summary: '1000000' },
       },
     },
     maxUploadedFiles: {
       control: 'number',
       table: {
-        defaultValue: { summary: 10 },
+        defaultValue: { summary: '10' },
       },
     },
     name: {

diff --git a/packages/web-react/src/components/FileUploader/stories/FileUploaderList.stories.tsx b/packages/web-react/src/components/FileUploader/stories/FileUploaderList.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof FileUploaderList> = {
     hasImagePreview: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     id: {

diff --git a/packages/web-react/src/components/FileUploader/stories/UncontrolledFileUploader.stories.tsx b/packages/web-react/src/components/FileUploader/stories/UncontrolledFileUploader.stories.tsx
@@ -38,31 +38,31 @@ const meta: Meta<typeof UncontrolledFileUploader> = {
     isDisabled: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isFluid: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isLabelHidden: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isMultiple: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     isRequired: {
       control: 'boolean',
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     labelText: {
@@ -77,13 +77,13 @@ const meta: Meta<typeof UncontrolledFileUploader> = {
     maxFileSize: {
       control: 'number',
       table: {
-        defaultValue: { summary: 1000000 },
+        defaultValue: { summary: '1000000' },
       },
     },
     maxUploadedFiles: {
       control: 'number',
       table: {
-        defaultValue: { summary: 10 },
+        defaultValue: { summary: '10' },
       },
     },
     queueLimitBehavior: {