133 lines
3.0 KiB
TypeScript
133 lines
3.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Switch } from './Switch'
|
|
|
|
const meta = {
|
|
title: 'Components/Switch',
|
|
component: Switch,
|
|
argTypes: {
|
|
isDisabled: {
|
|
control: 'boolean',
|
|
},
|
|
isReadOnly: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Switch>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
children: '알림 설정',
|
|
},
|
|
}
|
|
|
|
export const Selected: Story = {
|
|
render: function Render() {
|
|
const [isSelected, setIsSelected] = useState(true)
|
|
return (
|
|
<Switch isSelected={isSelected} onChange={setIsSelected}>
|
|
활성화됨
|
|
</Switch>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const Unselected: Story = {
|
|
render: function Render() {
|
|
const [isSelected, setIsSelected] = useState(false)
|
|
return (
|
|
<Switch isSelected={isSelected} onChange={setIsSelected}>
|
|
비활성화됨
|
|
</Switch>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
isDisabled: true,
|
|
children: '비활성화된 스위치',
|
|
},
|
|
}
|
|
|
|
export const DisabledSelected: Story = {
|
|
args: {
|
|
isDisabled: true,
|
|
isSelected: true,
|
|
children: '비활성화됨 (켜짐)',
|
|
},
|
|
}
|
|
|
|
export const ReadOnly: Story = {
|
|
args: {
|
|
isReadOnly: true,
|
|
isSelected: true,
|
|
children: '읽기 전용',
|
|
},
|
|
}
|
|
|
|
export const WithoutLabel: Story = {
|
|
args: {},
|
|
}
|
|
|
|
export const Controlled: Story = {
|
|
render: function Render() {
|
|
const [isSelected, setIsSelected] = useState(false)
|
|
return (
|
|
<div className="space-y-4">
|
|
<Switch isSelected={isSelected} onChange={setIsSelected}>
|
|
알림 받기
|
|
</Switch>
|
|
<p className="text-sm text-gray-600">상태: {isSelected ? '켜짐' : '꺼짐'}</p>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const MultipleSettings: Story = {
|
|
render: function Render() {
|
|
const [settings, setSettings] = useState({
|
|
notifications: true,
|
|
darkMode: false,
|
|
autoSave: true,
|
|
})
|
|
|
|
const handleChange = (key: keyof typeof settings) => (isSelected: boolean) => {
|
|
setSettings((prev) => ({ ...prev, [key]: isSelected }))
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Switch isSelected={settings.notifications} onChange={handleChange('notifications')}>
|
|
알림 설정
|
|
</Switch>
|
|
<Switch isSelected={settings.darkMode} onChange={handleChange('darkMode')}>
|
|
다크 모드
|
|
</Switch>
|
|
<Switch isSelected={settings.autoSave} onChange={handleChange('autoSave')}>
|
|
자동 저장
|
|
</Switch>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const AllStates: Story = {
|
|
render: () => (
|
|
<div className="space-y-4">
|
|
<Switch>기본 (꺼짐)</Switch>
|
|
<Switch isSelected>기본 (켜짐)</Switch>
|
|
<Switch isDisabled>비활성화 (꺼짐)</Switch>
|
|
<Switch isDisabled isSelected>
|
|
비활성화 (켜짐)
|
|
</Switch>
|
|
<Switch isReadOnly isSelected>
|
|
읽기 전용
|
|
</Switch>
|
|
</div>
|
|
),
|
|
}
|