shkim4
4c29894e56
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.
100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
import type { ReactNode } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { ScrollArea, ScrollBar } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Scroll Area is Radix scrolling with a styled scrollbar (type "hover": the bar shows while hovering or scrolling). Sizes below
|
|
// are Story layout. The representative Story shows vertical, horizontal, both axes and a table-like content.
|
|
|
|
const items = Array.from({ length: 30 }, (_, i) => `항목 ${i + 1}`)
|
|
|
|
function Vertical() {
|
|
return (
|
|
<ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
|
|
<div className="p-3 text-sm">
|
|
{items.map((t) => (
|
|
<div key={t} className="py-1.5">
|
|
{t}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
}
|
|
|
|
function Horizontal() {
|
|
return (
|
|
<ScrollArea style={{ width: 280 }} className="rounded-md border whitespace-nowrap">
|
|
<div className="flex w-max gap-3 p-3">
|
|
{Array.from({ length: 12 }, (_, i) => (
|
|
<div key={i} className="grid h-16 w-24 place-items-center rounded-md bg-muted text-sm">{`카드 ${i + 1}`}</div>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
)
|
|
}
|
|
|
|
function Both() {
|
|
return (
|
|
<ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
|
|
<div className="p-3 text-sm" style={{ width: 600 }}>
|
|
{items.map((t) => (
|
|
<div key={t} className="py-1.5">{`${t} — 가로로도 길어지는 내용입니다. 가로 scroll로 끝까지 볼 수 있습니다.`}</div>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
)
|
|
}
|
|
|
|
function TableLike() {
|
|
return (
|
|
<ScrollArea style={{ height: 180, width: 300 }} className="rounded-md border">
|
|
<div className="grid text-sm" style={{ width: 520 }}>
|
|
{Array.from({ length: 12 }, (_, r) => (
|
|
<div key={r} className="grid grid-cols-4 border-b p-2">
|
|
{["번호", "이름", "상태", "금액"].map((c) => (
|
|
<span key={c}>{`${c} ${r + 1}`}</span>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
)
|
|
}
|
|
|
|
const sections: { id: string; label: string; node: ReactNode }[] = [
|
|
{ id: "vertical", label: "Vertical", node: <Vertical /> },
|
|
{ id: "horizontal", label: "Horizontal", node: <Horizontal /> },
|
|
{ id: "both", label: "Both axes", node: <Both /> },
|
|
{ id: "table-like", label: "Table-like content", node: <TableLike /> },
|
|
]
|
|
|
|
const meta = { title: "Components/Data & Display/Scroll Area", component: ScrollArea, parameters: { layout: "padded" } } satisfies Meta<typeof ScrollArea>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const board = (...ids: string[]) => (
|
|
<StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
|
|
)
|
|
|
|
// Representative Story: the common Story page; the sections group the same specimens.
|
|
export const All: Story = {
|
|
name: "Scroll Area",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Scroll Area" />
|
|
<StorySection title="Overview">{board("vertical")}</StorySection>
|
|
<StorySection title="Variants">{board("horizontal", "both")}</StorySection>
|
|
<StorySection title="Usage">{board("table-like")}</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const VerticalScroll: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
|
|
export const HorizontalScroll: Story = { tags: ["verification"], name: "Horizontal", render: () => <Horizontal /> }
|