[14/n][Storybook] SegmentedControls update argTypes and use typed themes (#51)

packages/frontend/src/components/shared/SegmentedControls/index.ts

@@ -1,2 +1,3 @@
 export * from './SegmentedControlItem';
 export * from './SegmentedControls';
+export * from './SegmentedControls.theme';

packages/frontend/src/stories/Components/SegmentedControls.stories.tsx

@@ -1,6 +1,24 @@
 import { StoryObj, Meta } from '@storybook/react';
 
-import { SegmentedControls } from 'components/shared/SegmentedControls';
+import {
+  SegmentedControls,
+  SegmentedControlsVariants,
+  SegmentedControlsOption,
+} from 'components/shared/SegmentedControls';
+
+const segmentedControlsTypes: SegmentedControlsVariants['type'][] = [
+  'fixed-width',
+  'full-width',
+];
+const segmentedControlsSizes: SegmentedControlsVariants['size'][] = [
+  'sm',
+  'md',
+];
+const segmentedControlsOptions: SegmentedControlsOption[] = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+];
 
 const meta: Meta<typeof SegmentedControls> = {
   title: 'Components/SegmentedControls',
@@ -14,8 +32,21 @@ const meta: Meta<typeof SegmentedControls> = {
       control: 'text',
     },
     onChange: {
-      action: 'onChange',
+      action: 'change',
     },
+    type: {
+      control: 'select',
+      options: segmentedControlsTypes,
+    },
+    size: {
+      control: 'select',
+      options: segmentedControlsSizes,
+    },
+  },
+  args: {
+    options: segmentedControlsOptions,
+    value: '1',
+    size: 'md',
   },
 };
 
@@ -24,15 +55,16 @@ export default meta;
 type Story = StoryObj<typeof SegmentedControls>;
 
 export const Default: Story = {
-  render: ({ options, value, onChange }) => (
-    <SegmentedControls options={options} value={value} onChange={onChange} />
+  render: ({ options, value, onChange, ...args }) => (
+    <SegmentedControls
+      options={options}
+      value={value}
+      onChange={onChange}
+      {...args}
+    />
   ),
   args: {
-    options: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
-    ],
+    options: segmentedControlsOptions,
     value: '1',
   },
 };