99 lines
2.0 KiB
TypeScript
99 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Select, type SelectOption } from './Select'
|
|
|
|
const meta = {
|
|
title: 'Components/Select',
|
|
component: Select,
|
|
argTypes: {
|
|
isDisabled: { control: 'boolean' },
|
|
isReadOnly: { control: 'boolean' },
|
|
placement: {
|
|
control: 'select',
|
|
options: ['bottom', 'top'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Select>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const sampleItems: SelectOption[] = [
|
|
{ label: '옵션 1', value: '1' },
|
|
{ label: '옵션 2', value: '2' },
|
|
{ label: '옵션 3', value: '3' },
|
|
{ label: '비활성화 옵션', value: '4', isDisabled: true },
|
|
]
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
items: sampleItems,
|
|
placeholder: '선택해주세요',
|
|
},
|
|
}
|
|
|
|
export const WithSelectedValue: Story = {
|
|
args: {
|
|
items: sampleItems,
|
|
defaultSelectedKey: '2',
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
items: sampleItems,
|
|
defaultSelectedKey: '1',
|
|
isDisabled: true,
|
|
},
|
|
}
|
|
|
|
export const ReadOnly: Story = {
|
|
args: {
|
|
items: sampleItems,
|
|
defaultSelectedKey: '1',
|
|
isReadOnly: true,
|
|
},
|
|
}
|
|
|
|
export const PlacementTop: Story = {
|
|
args: {
|
|
items: sampleItems,
|
|
placeholder: '위로 열림',
|
|
placement: 'top',
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="pt-40">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
}
|
|
|
|
export const Controlled: Story = {
|
|
render: function Render() {
|
|
const [value, setValue] = useState<string | number>('1')
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<Select
|
|
items={sampleItems}
|
|
selectedKey={value}
|
|
onChange={setValue}
|
|
/>
|
|
<p className="text-sm">선택된 값: {value}</p>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const ManyOptions: Story = {
|
|
args: {
|
|
items: Array.from({ length: 20 }, (_, i) => ({
|
|
label: `옵션 ${i + 1}`,
|
|
value: String(i + 1),
|
|
})),
|
|
placeholder: '많은 옵션',
|
|
maxHeight: 200,
|
|
},
|
|
}
|