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:
1 parent
48977e7823
commit
4c29894e56
81 files changed
+520
-671
No files matched your search
@@ -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>
|
||||
),
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user