116 lines
2.6 KiB
TypeScript
116 lines
2.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Checkbox } from './Checkbox'
|
|
|
|
const meta = {
|
|
title: 'Components/Checkbox',
|
|
component: Checkbox,
|
|
argTypes: {
|
|
isDisabled: {
|
|
control: 'boolean',
|
|
},
|
|
isIndeterminate: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Checkbox>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
children: '동의합니다',
|
|
},
|
|
}
|
|
|
|
export const Checked: Story = {
|
|
render: function Render() {
|
|
const [isSelected, setIsSelected] = useState(true)
|
|
return (
|
|
<Checkbox isSelected={isSelected} onChange={setIsSelected}>
|
|
선택됨
|
|
</Checkbox>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const Unchecked: Story = {
|
|
render: function Render() {
|
|
const [isSelected, setIsSelected] = useState(false)
|
|
return (
|
|
<Checkbox isSelected={isSelected} onChange={setIsSelected}>
|
|
선택 안됨
|
|
</Checkbox>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const Indeterminate: Story = {
|
|
args: {
|
|
isIndeterminate: true,
|
|
children: '일부 선택됨',
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
isDisabled: true,
|
|
children: '비활성화',
|
|
},
|
|
}
|
|
|
|
export const DisabledChecked: Story = {
|
|
args: {
|
|
isDisabled: true,
|
|
isSelected: true,
|
|
children: '비활성화 (선택됨)',
|
|
},
|
|
}
|
|
|
|
export const WithoutLabel: Story = {
|
|
args: {},
|
|
}
|
|
|
|
export const MultipleCheckboxes: Story = {
|
|
render: function Render() {
|
|
const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>({
|
|
option1: false,
|
|
option2: true,
|
|
option3: false,
|
|
})
|
|
|
|
const handleChange = (key: string) => (isSelected: boolean) => {
|
|
setCheckedItems((prev) => ({ ...prev, [key]: isSelected }))
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Checkbox isSelected={checkedItems.option1} onChange={handleChange('option1')}>
|
|
옵션 1
|
|
</Checkbox>
|
|
<Checkbox isSelected={checkedItems.option2} onChange={handleChange('option2')}>
|
|
옵션 2
|
|
</Checkbox>
|
|
<Checkbox isSelected={checkedItems.option3} onChange={handleChange('option3')}>
|
|
옵션 3
|
|
</Checkbox>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const AllStates: Story = {
|
|
render: () => (
|
|
<div className="flex flex-col gap-2">
|
|
<Checkbox>기본</Checkbox>
|
|
<Checkbox isSelected>선택됨</Checkbox>
|
|
<Checkbox isIndeterminate>일부 선택</Checkbox>
|
|
<Checkbox isDisabled>비활성화</Checkbox>
|
|
<Checkbox isDisabled isSelected>
|
|
비활성화 (선택됨)
|
|
</Checkbox>
|
|
</div>
|
|
),
|
|
}
|