[3/n][Storybook] Radio

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

@@ -1,2 +1,3 @@
 export * from './Radio';
 export * from './RadioItem';
+export * from './Radio.theme';

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

@@ -0,0 +1,75 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Radio, RadioTheme } from 'components/shared/Radio';
+
+const radioOrientation: RadioTheme['orientation'][] = [
+  'horizontal',
+  'vertical',
+];
+
+const meta: Meta<typeof Radio> = {
+  title: 'Components/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+    },
+    orientation: {
+      control: 'radio',
+      options: radioOrientation,
+    },
+    value: {
+      control: 'text',
+    },
+    onValueChange: {
+      action: 'onValueChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  render: ({ options, orientation, value, onValueChange }) => (
+    <Radio
+      options={options}
+      orientation={orientation}
+      value={value}
+      onValueChange={onValueChange}
+    />
+  ),
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    orientation: 'horizontal',
+    value: 'option1',
+    onValueChange: (value: string) => console.log(value),
+  },
+};
+
+export const Vertical: Story = {
+  render: ({ options, orientation, value, onValueChange }) => (
+    <Radio
+      options={options}
+      orientation={orientation}
+      value={value}
+      onValueChange={onValueChange}
+    />
+  ),
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    orientation: 'vertical',
+    value: 'option1',
+    onValueChange: (value: string) => console.log(value),
+  },
+};