refactor(storybook): simplify component and preview examples

Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.

Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.
This commit is contained in:
shkim4 committed 2026-10-23 00:28:05 +09:00
1 parent 48977e7823
commit 4c29894e56
81 files changed
+520 -671

No files matched your search

+10 -11
View File
@@ -15,9 +15,11 @@ const projects = [
]
const won = (n: number) => n.toLocaleString("ko-KR")
function BasicTable() {
// `showCaption={false}` drops the visible caption on the representative page; the caption text becomes the table's
// accessible name. The verification Story keeps the TableCaption.
function BasicTable({ showCaption = true }: { showCaption?: boolean }) {
return (
<Table>
<Table aria-label={showCaption ? undefined : "프로젝트별 계약 금액(원)"}>
<TableHeader>
<TableRow>
<TableHead>번호</TableHead>
@@ -44,7 +46,7 @@ function BasicTable() {
<TableCell className="text-right">{won(projects.reduce((s, p) => s + p.amount, 0))}</TableCell>
</TableRow>
</TableFooter>
<TableCaption>프로젝트별 계약 금액(원)</TableCaption>
{showCaption ? <TableCaption>프로젝트별 계약 금액(원)</TableCaption> : null}
</Table>
)
}
@@ -132,10 +134,10 @@ function WideTable() {
const box = (node: ReactNode) => <div style={{ width: "100%", maxWidth: 720, minWidth: 0 }}>{node}</div>
const sections = [
{ id: "basic", label: "Basic + Badge + numeric + footer + caption", node: <BasicTable /> },
{ id: "selected", label: "Selected row", note: "Checkbox와 data-state=\"selected\"는 Story가 조합합니다(Table에는 선택 로직이 없음)", node: <SelectableTable /> },
{ id: "basic", label: "Basic", node: <BasicTable showCaption={false} /> },
{ id: "selected", label: "Selected row", node: <SelectableTable /> },
{ id: "long", label: "Long text", node: <LongTextTable /> },
{ id: "wide", label: "Horizontal overflow", note: "container가 가로로 scroll 하고 페이지는 밀리지 않습니다", node: <WideTable /> },
{ id: "wide", label: "Horizontal overflow", node: <WideTable /> },
]
const meta = { title: "Components/Data & Display/Table", component: Table, parameters: { layout: "padded" } } satisfies Meta<typeof Table>
@@ -143,7 +145,7 @@ export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={460} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, wide: true, children: box(s.node) }))} />
<StateBoard min={460} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, wide: true, children: box(s.node) }))} />
)
// Representative Story: the common Story page; the sections group the same specimens.
@@ -152,10 +154,7 @@ export const All: Story = {
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader
title="Table"
description="정적 표시 · 정렬·선택·페이지는 Data Table Pattern"
/>
<StoryPageHeader title="Table" />
<StorySection title="Overview">{board("basic")}</StorySection>
<StorySection title="States">{board("selected")}</StorySection>
<StorySection title="Usage">{board("long", "wide")}</StorySection>