From 60a66e94bd025ce7612bdead71f89d925ac3f1ed Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 13:41:37 -0400
Subject: [PATCH] [3/n][Storybook] Radio

---
 .../src/components/shared/Radio/index.ts      |  1 +
 .../src/stories/Components/Radio.stories.tsx  | 75 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 packages/frontend/src/stories/Components/Radio.stories.tsx

diff --git a/packages/frontend/src/components/shared/Radio/index.ts b/packages/frontend/src/components/shared/Radio/index.ts
index 6d49f1a8..ec3b5175 100644
--- a/packages/frontend/src/components/shared/Radio/index.ts
+++ b/packages/frontend/src/components/shared/Radio/index.ts
@@ -1,2 +1,3 @@
 export * from './Radio';
 export * from './RadioItem';
+export * from './Radio.theme';
diff --git a/packages/frontend/src/stories/Components/Radio.stories.tsx b/packages/frontend/src/stories/Components/Radio.stories.tsx
new file mode 100644
index 00000000..d8dba202
--- /dev/null
+++ b/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),
+  },
+};