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 -12
View File
@@ -1,7 +1,7 @@
import { useMemo, useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import {
Card, CardContent, PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription,
Card, CardContent, CardHeader, CardTitle,
Badge,
Button,
Combobox,
@@ -118,9 +118,10 @@ function WithFilterBar({ extended = true }: { extended?: boolean }) {
setSearch(""); setStatus("all"); setDate(undefined); setDepartment(undefined)
table.resetGlobalFilter(true); table.resetColumnFilters(true)
}
return <div className="grid min-w-0 gap-4">
<PageHeader><PageHeaderContent><PageHeaderTitle>사용자 목록</PageHeaderTitle><PageHeaderDescription>조건을 입력한 뒤 조회합니다.</PageHeaderDescription></PageHeaderContent></PageHeader>
<Card className="min-w-0"><CardContent>
// The list title belongs to the list: Card title → search → table inside the one white Card.
return <Card className="min-w-0">
<CardHeader><CardTitle>사용자 목록</CardTitle></CardHeader>
<CardContent>
<div className="grid min-w-0 gap-4">
<div className="hm-data-table-tools">
<form className="hm-data-table-search" onSubmit={event => { event.preventDefault(); apply() }}>
@@ -139,8 +140,8 @@ function WithFilterBar({ extended = true }: { extended?: boolean }) {
</div>
<DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
</div>
</CardContent></Card>
</div>
</CardContent>
</Card>
}
const meta = { title: "Patterns/Data/Data Table", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
@@ -153,15 +154,12 @@ export const All: Story = {
parameters: { layout: "fullscreen" },
render: () => (
<StoryPage>
<StoryPageHeader
title="Data Table"
description="선택 · 정렬 · 열 표시 · 페이지 이동"
/>
<StoryPageHeader title="Data Table" />
<StorySection title="Overview">
<Basic />
</StorySection>
<StorySection title="기본 목록 검색" description="8px 간격 가운데 정렬 · 열 버튼은 공간 부족 시만 다음 행 · 제목은 Card 밖"><WithFilterBar extended={false} /></StorySection>
<StorySection title="추가 조건 목록 검색" description="부서·등록일 구성은 왼쪽 정렬 · 모바일 버튼 행은 우측 정렬"><WithFilterBar /></StorySection>
<StorySection title="기본 목록 검색"><WithFilterBar extended={false} /></StorySection>
<StorySection title="추가 조건 목록 검색"><WithFilterBar /></StorySection>
</StoryPage>
),
}