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 = { + 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; + +export const Default: Story = { + render: ({ options, orientation, value, 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 }) => ( + + ), + 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), + }, +};