Use Template to write SegementInput story ,change error message and o…

…ptions

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

@@ -1,6 +1,7 @@
 import { SegmentInputProps } from '@ifrc-go/ui';
 import { useArgs } from '@storybook/preview-api';
 import type {
+    Args,
     Meta,
     StoryObj,
 } from '@storybook/react';
@@ -12,6 +13,15 @@ interface Option {
     key: string;
     label: string;
 }
+const options: Option[] = [
+    { key: '1', label: 'Global summary' },
+    { key: '2', label: 'Global performance' },
+    { key: '3', label: 'Opertional learning' },
+    { key: '4', label: 'Catalogue of Resources' },
+];
+
+const keySelector = (o: Option) => o.key;
+const labelSelector = (o: Option) => o.label;
 
 type SegmentInputSpecificProps = SegmentInputProps<string, Option, string, never>;
 type Story = StoryObj<SegmentInputSpecificProps>;
@@ -30,82 +40,60 @@ const meta: Meta<typeof SegmentInput> = {
         onChange: fn(),
     },
     tags: ['autodocs'],
-    decorators: [
-        function Component(_, ctx) {
-            const [
-                { value },
-                setArgs,
-            ] = useArgs<{ value: string | undefined }>();
-            // NOTE: We are casting args as props because of discriminated union
-            // used in SegmentInput
-            const componentArgs = ctx.args as SegmentInputSpecificProps;
-            const onChange = (val: string, name: string) => {
-                setArgs({ value: val });
-                componentArgs.onChange(val, name);
-            };
-
-            return (
-                <SegmentInput
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...componentArgs}
-                    onChange={(val: string | undefined, name: string) => onChange(val || '', name)}
-                    value={value}
-                    name="SegementInput"
-                />
-            );
-        },
-    ],
 };
 
 export default meta;
 
-const options: Option[] = [
-    { key: 'option1', label: 'Option 1' },
-    { key: 'option2', label: 'Option 2' },
-    { key: 'option3', label: 'Option 3' },
-    { key: 'option4', label: 'Option 4' },
-    { key: 'option5', label: 'Option 5' },
-    { key: 'option6', label: 'Option 6' },
-];
+function Template(args:Args) {
+    const [
+        { value },
+        setArgs,
+    ] = useArgs<{ value: string | undefined }>();
+    // NOTE: We are casting args as props because of discriminated union
+    // used in SegmentInput
+    const onChange = (val: string, name: string) => {
+        setArgs({ value: val });
+        // eslint-disable-next-line react/destructuring-assignment
+        args.onChange(val, name);
+    };
 
-const keySelector = (o: Option) => o.key;
-const labelSelector = (o: Option) => o.label;
+    return (
+        <SegmentInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+            name="segementinput"
+            value={value}
+            options={options}
+            onChange={onChange}
+            keySelector={keySelector}
+            labelSelector={labelSelector}
+        />
+    );
+}
 
 export const Default: Story = {
-    args: {
-        name: 'SegmentInput',
-        options,
-        keySelector,
-        labelSelector,
-    },
+    render: Template,
 };
-export const Disable: Story = {
+
+export const Disabled: Story = {
+    render: Template,
     args: {
-        name: 'SegmentInput',
-        options,
-        value: 'option1',
-        keySelector,
-        labelSelector,
+        value: '1',
         disabled: true,
     },
 };
+
 export const Readonly: Story = {
+    render: Template,
     args: {
-        name: 'SegmentInput',
-        value: 'option1',
-        options,
-        keySelector,
-        labelSelector,
+        value: '2',
         readOnly: true,
     },
 };
+
 export const Error: Story = {
+    render: Template,
     args: {
-        name: 'SegmentInput',
-        options,
-        value: 'option1',
-        keySelector,
-        labelSelector,
-        error: 'This is an  error',
+        error: 'Please select. This field is required.',
     },
 };