139 lines
4.1 KiB
TypeScript
139 lines
4.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Tab } from './Tab'
|
|
|
|
const meta = {
|
|
title: 'Components/Tab',
|
|
component: Tab,
|
|
args: {
|
|
items: [],
|
|
},
|
|
} satisfies Meta<typeof Tab>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const defaultItems = [
|
|
{ key: 'tab1', label: '탭 1', children: <div className="p-4">탭 1의 내용입니다.</div> },
|
|
{ key: 'tab2', label: '탭 2', children: <div className="p-4">탭 2의 내용입니다.</div> },
|
|
{ key: 'tab3', label: '탭 3', children: <div className="p-4">탭 3의 내용입니다.</div> },
|
|
]
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
},
|
|
}
|
|
|
|
export const WithDefaultSelected: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
defaultSelectedKey: 'tab2',
|
|
},
|
|
}
|
|
|
|
export const Controlled: Story = {
|
|
render: function Render() {
|
|
const [selectedKey, setSelectedKey] = useState('tab1')
|
|
return (
|
|
<Tab
|
|
items={defaultItems}
|
|
selectedKey={selectedKey}
|
|
onSelectionChange={(key) => setSelectedKey(key as string)}
|
|
/>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const WithDisabledTab: Story = {
|
|
args: {
|
|
items: [
|
|
{ key: 'tab1', label: '탭 1', children: <div className="p-4">탭 1의 내용입니다.</div> },
|
|
{ key: 'tab2', label: '탭 2 (비활성화)', children: <div className="p-4">탭 2의 내용입니다.</div>, disabled: true },
|
|
{ key: 'tab3', label: '탭 3', children: <div className="p-4">탭 3의 내용입니다.</div> },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const WithRichContent: Story = {
|
|
args: {
|
|
items: [
|
|
{
|
|
key: 'overview',
|
|
label: '개요',
|
|
children: (
|
|
<div className="p-4 space-y-2">
|
|
<h3 className="text-lg font-bold">프로젝트 개요</h3>
|
|
<p>이 프로젝트는 항공영상 탐지 시스템입니다.</p>
|
|
<ul className="list-disc list-inside">
|
|
<li>항공영상 업로드</li>
|
|
<li>AI 기반 객체 탐지</li>
|
|
<li>결과 분석 및 리포트</li>
|
|
</ul>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'details',
|
|
label: '상세 정보',
|
|
children: (
|
|
<div className="p-4 space-y-2">
|
|
<h3 className="text-lg font-bold">상세 정보</h3>
|
|
<table className="w-full border-collapse">
|
|
<tbody>
|
|
<tr className="border-b">
|
|
<td className="py-2 font-medium">버전</td>
|
|
<td className="py-2">1.0.0</td>
|
|
</tr>
|
|
<tr className="border-b">
|
|
<td className="py-2 font-medium">최종 수정일</td>
|
|
<td className="py-2">2024-01-15</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'settings',
|
|
label: '설정',
|
|
children: (
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-bold mb-4">설정</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">알림 설정</label>
|
|
<select className="border border-gray-300 rounded px-3 py-2 w-full">
|
|
<option>모든 알림</option>
|
|
<option>중요 알림만</option>
|
|
<option>알림 끄기</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
export const ManyTabs: Story = {
|
|
args: {
|
|
items: [
|
|
{ key: 'tab1', label: '첫 번째', children: <div className="p-4">첫 번째 탭</div> },
|
|
{ key: 'tab2', label: '두 번째', children: <div className="p-4">두 번째 탭</div> },
|
|
{ key: 'tab3', label: '세 번째', children: <div className="p-4">세 번째 탭</div> },
|
|
{ key: 'tab4', label: '네 번째', children: <div className="p-4">네 번째 탭</div> },
|
|
{ key: 'tab5', label: '다섯 번째', children: <div className="p-4">다섯 번째 탭</div> },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const WithCustomClassName: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
className: 'bg-gray-50 p-4 rounded-lg',
|
|
tabPanelClassName: 'bg-white rounded border',
|
|
},
|
|
}
|