refactor: use consistent pattern to write stories

Author: samshara

packages/go-ui-storybook/src/stories/Progressbar.stories.ts

@@ -18,7 +18,6 @@ const meta = {
         },
     },
     tags: ['autodocs'],
-    argTypes: {},
 } satisfies Meta<typeof ProgressBar>;
 
 export default meta;

packages/go-ui-storybook/src/stories/RadioInput.stories.tsx

@@ -58,7 +58,6 @@ function Template(args:Args) {
 
     // NOTE: We are casting args as props because of discriminated union
     // used in RadionInputProps
-
     const handleChange = (val: string | undefined, name: string) => {
         setArgs({ value: val });
         // eslint-disable-next-line react/destructuring-assignment

packages/go-ui-storybook/src/stories/RadioInput.tsx

@@ -1,11 +1,11 @@
 import {
     RadioInput as PureRadioInput,
-    RadioInputProps as PureRadioInputProps,
+    RadioInputProps,
     RadioProps,
 } from '@ifrc-go/ui';
 
 // eslint-disable-next-line max-len
-function RadioInput<const N, O extends object, V extends string | number | boolean, RRP extends RadioProps<V, N>>(props: PureRadioInputProps<N, O, V, RRP, never>) {
+function RadioInput<const N, O extends object, V extends string | number | boolean, RRP extends RadioProps<V, N>>(props: RadioInputProps<N, O, V, RRP, never>) {
     return (
         <PureRadioInput {...props} /> // eslint-disable-line react/jsx-props-no-spreading
     );

packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx

@@ -11,7 +11,7 @@ type RawFileInputSpecificProps = RawFileInputProps<string>;
 
 type Story = StoryObj<RawFileInputSpecificProps>;
 
-const meta: Meta<RawFileInputSpecificProps> = {
+const meta: Meta<typeof RawFileInput> = {
     title: 'Components/RawFileInput',
     component: RawFileInput,
     parameters: {
@@ -55,22 +55,22 @@ export const WithAccept: Story = {
     },
 };
 
-export const ReadOnly: Story = {
+export const Disabled: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Export',
-        readOnly: true,
         multiple: false,
         onChange: fn(),
+        disabled: true,
     },
 };
 
-export const Disabled: Story = {
+export const ReadOnly: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Export',
+        readOnly: true,
         multiple: false,
         onChange: fn(),
-        disabled: true,
     },
 };

packages/go-ui-storybook/src/stories/RawFileInput.tsx

@@ -1,10 +1,8 @@
 import {
     RawFileInput as PureRawFileInput,
-    RawFileInputProps as PureRawFileInputProps,
+    RawFileInputProps,
 } from '@ifrc-go/ui';
 
-type RawFileInputProps<N> = PureRawFileInputProps<N>;
-
 function RawFileInput< const N>(props: RawFileInputProps<N>) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return (

packages/go-ui-storybook/src/stories/RawList.stories.tsx

@@ -2,7 +2,6 @@ import {
     ListKey,
     RawListProps,
 } from '@ifrc-go/ui';
-import { useArgs } from '@storybook/preview-api';
 import type {
     Meta,
     StoryObj,
@@ -16,29 +15,30 @@ type Story = StoryObj<RawListSpecificProps>;
 
 interface Option {
     id: string;
-    key: string;
+    label: string;
 }
 
 const options: Option[] = [
-    { id: '1', key: 'Nepal' },
-    { id: '4', key: 'France' },
-    { id: '2', key: 'India' },
-    { id: '5', key: 'Spain' },
+    { id: '1', label: 'Nepal' },
+    { id: '4', label: 'France' },
+    { id: '2', label: 'India' },
+    { id: '5', label: 'Spain' },
 ];
 
 type RendererProps = {
-    children: React.ReactNode
+    label: React.ReactNode
 };
-function Option({ children }: RendererProps) {
+
+function Option({ label }: RendererProps) {
     return (
         <div>
-            { children }
+            { label }
         </div>
     );
 }
 
-const keySelector = (d: Option) => d.key;
-const rendererParams = (_key: string, datum: Option) => ({ children: datum.key });
+const keySelector = (d: Option) => d.label;
+const rendererParams = (_: string, datum: Option) => ({ label: datum.label });
 
 const meta: Meta<typeof RawList> = {
     title: 'Components/RawList',
@@ -52,22 +52,6 @@ const meta: Meta<typeof RawList> = {
         },
     },
     tags: ['autodocs'],
-    decorators: [
-        function Component(_, ctx) {
-            const componentArgs = ctx.args as RawListSpecificProps;
-            const [args] = useArgs();
-            const { data } = args;
-            return (
-                <RawList
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...componentArgs}
-                    data={data}
-                    keySelector={keySelector}
-
-                />
-            );
-        },
-    ],
 };
 
 export default meta;
@@ -81,13 +65,3 @@ export const Default: Story = {
 
     },
 };
-
-export const NoValue: Story = {
-    args: {
-        data: undefined,
-        keySelector,
-        renderer: Option,
-        rendererParams,
-
-    },
-};

packages/go-ui-storybook/src/stories/RawList.tsx

@@ -1,12 +1,9 @@
 import {
     ListKey,
     RawList as PureRawList,
-    RawListProps as PureRawListProps,
+    RawListProps,
 } from '@ifrc-go/ui';
 
-interface RawListProps< DATUM, KEY extends ListKey, RENDERER_PROPS>
-extends PureRawListProps< DATUM, KEY, RENDERER_PROPS> {}
-
 function RawList
 // eslint-disable-next-line max-len
 <DATUM, KEY extends ListKey, RENDERER_PROPS>(props: RawListProps<DATUM, KEY, RENDERER_PROPS>) {

packages/go-ui-storybook/src/stories/ReducedListDisplay.stories.tsx

@@ -19,7 +19,7 @@ const options: Option[] = [
 ];
 
 type RendererProps = {
-    children: React.ReactNode
+    value: React.ReactNode
 };
 
 type ReducedListDisplaySpecificProps = ReducedListDisplayProps<Option, RendererProps>;
@@ -41,21 +41,21 @@ const meta: Meta<typeof ReducedListDisplay> = {
 
 export default meta;
 
-function Option({ children }: RendererProps) {
+function Option({ value }: RendererProps) {
     return (
         <div>
-            { children }
+            { value }
         </div>
     );
 }
 
 const keySelector = (d: Option) => d.label;
 
-const rendererParams = (option: Option) => ({ children: option.label });
+const rendererParams = (option: Option) => ({ value: option.label });
 
 export const Default: Story = {
     args: {
-        title: 'Test',
+        title: 'Colors',
         list: options,
         keySelector,
         renderer: Option,
@@ -64,26 +64,16 @@ export const Default: Story = {
     },
 };
 
-export const MaxItems: Story = {
+export const WithMaxItems: Story = {
     args: {
-        title: 'Test',
-        list: options,
-        keySelector,
-        renderer: Option,
-        rendererParams,
-        maxItems: 2,
-        separator: ' ',
+        ...Default.args,
+        maxItems: 3,
     },
 };
 
-export const MinItems: Story = {
+export const WithMinItems: Story = {
     args: {
-        title: 'Test',
-        list: options,
-        keySelector,
-        renderer: Option,
-        rendererParams,
-        minItems: 1,
-        separator: ' ',
+        ...Default.args,
+        minItems: 3,
     },
 };

packages/go-ui-storybook/src/stories/SearchMultiSelectInput.stories.tsx

@@ -119,6 +119,12 @@ export const Default: Story = {
     },
 };
 
+export const WithPlaceholder: Story = {
+    render: Template,
+    args: {
+        placeholder: 'Select an appeal type',
+    },
+};
 export const Disabled: Story = {
     render: Template,
     args: {

packages/go-ui-storybook/src/stories/SearchSelectInput.stories.tsx

@@ -1,3 +1,7 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
 import {
     OptionKey,
     SearchSelectInputProps,
@@ -8,9 +12,10 @@ import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { isDefined } from '@togglecorp/fujs';
 
-import SearchSelectInput from './ SearchSelectInput';
+import SearchSelectInput from './SearchSelectInput';
 
 interface Option {
     key: string;
@@ -58,75 +63,84 @@ const meta: Meta<typeof SearchSelectInput> = {
             allowFullscreen: true,
         },
     },
+    args: {
+        onChange: fn(),
+    },
+    tags: ['autodocs'],
 };
 
 export default meta;
 
 function Template(args:Args) {
     const [
-        { value },
+        {
+            value,
+            onChange,
+        },
         setArgs,
-    ] = useArgs<{ value: OptionKey | null | undefined}>();
-
-    // NOTE: We are casting args as props because of discriminated union
-    // used in SearchSelectInputProps
+    ] = useArgs();
+    const [filteredOptions, setFilteredOptions] = useState(options);
 
-    const onChange = (
+    const handleChange = useCallback((
         newValue: OptionKey | undefined,
         name: string,
         val: Option | undefined,
     ) => {
+        onChange(newValue, name, val);
         setArgs({ value: newValue });
-        // eslint-disable-next-line react/destructuring-assignment
-        if (args.nonClearable && isDefined(newValue) && isDefined(val)) {
-            // eslint-disable-next-line react/destructuring-assignment
-            args.onChange(newValue, name, val);
-        } else if (isDefined(newValue) && isDefined(val)) {
-            // eslint-disable-next-line react/destructuring-assignment
-            args.onChange(newValue, name, val);
+    }, [onChange, setArgs]);
+
+    const handleSearchValueChange = useCallback((searchText: string | undefined) => {
+        if (isDefined(searchText)) {
+            const newOptions = options.filter(
+                (v) => v.label.toLowerCase().includes(searchText.toLowerCase()),
+            );
+            setFilteredOptions(newOptions);
+        } else {
+            setFilteredOptions(options);
         }
-    };
+    }, []);
 
     return (
         <SearchSelectInput
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...args}
             keySelector={keySelector}
             labelSelector={labelSelector}
-            onChange={onChange}
+            onChange={handleChange}
             value={value}
-            name="SearchSelectInput"
+            name="searchselectinput"
             options={options}
+            onSearchValueChange={handleSearchValueChange}
+            searchOptions={filteredOptions}
             selectedOnTop
         />
     );
 }
+
 export const Default: Story = {
     render: Template,
 };
 
 export const WithPlaceholder: Story = {
     render: Template,
     args: {
-        placeholder: 'Search',
+        placeholder: 'Select a fruit',
     },
 };
+
 export const Disabled: Story = {
     render: Template,
     args: {
+        value: 1,
         disabled: true,
     },
 };
 
-export const Error: Story = {
-    render: Template,
-    args: {
-        error: 'This is required ',
-    },
-};
 export const ReadOnly: Story = {
     render: Template,
     args: {
+        value: 2,
         readOnly: true,
     },
 };