shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

Merge pull request 'Feat/storybook ui refinement' (#17) from feat/storybook-ui-refinement into main
Deploy Storybook / deploy (push) Successful in 56s

Browse Source 
Reviewed-on: #17
This commit was merged in pull request #17.
This commit is contained in:
shkim4 committed 2026-11-09 16:21:03 +09:00
2 parents 4088b2c120 3bebe8a660
commit 2755f4f17c
28 files changed
+675 -274
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/accordion.stories.tsx
+18 -9
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// The representative "Accordion" Story puts each Radix mode on one page with real, clickable items. The same sections also exist
@@ -115,8 +115,21 @@ const meta = { title: "Components/Disclosure/Accordion", parameters: { layout: "
export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
// specimen start line up, unused columns stay empty and `items-start` lets an opened item grow without touching its neighbors.
function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
return (
<div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[state]} />
))}
</div>
)
}
const board = (cols: 2 | 3, ...ids: string[]) => (
<StateGrid cols={cols} 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.
@@ -126,12 +139,8 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Accordion" />
<StorySection title="Overview">{board("single")}</StorySection>
<StorySection title="Variants">
{board("collapsible-single", "multiple")}
</StorySection>
<StorySection title="States">{board("disabled")}</StorySection>
<StorySection title="Usage">{board("long")}</StorySection>
<StorySection title="Variants">{board(3, "single", "collapsible-single", "multiple")}</StorySection>
<StorySection title="States">{board(3, "disabled", "long")}</StorySection>
</StoryPage>
),
}
src/components/alert-dialog.stories.tsx
+22 -4
View File
@@ -11,6 +11,7 @@ import {
AlertDialogTrigger,
Button,
} from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Alert Dialog is a modal Radix overlay (Portal) for a decision that must be confirmed or cancelled: no Close (X), no outside
@@ -68,17 +69,34 @@ export default meta
type Story = StoryObj<typeof meta>
// Representative Story: the common Story page; each trigger opens the real dialog.
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: Overview and Variants are merged into one Variants section.
export const All: Story = {
name: "Alert Dialog",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Alert Dialog" />
<StorySection title="Overview">
<Confirmation />
</StorySection>
<StorySection title="Variants">
<Destructive />
<SpecimenGrid
states={[
{ id: "confirmation", label: "Confirmation", children: <Confirmation /> },
{ id: "destructive", label: "Destructive", children: <Destructive /> },
]}
/>
</StorySection>
</StoryPage>
),
src/components/alert.stories.tsx
+3 -10
View File
@@ -27,9 +27,9 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Alert" />
<StorySection title="Overview">
<StorySection title="Variants">
<StateBoard
min={320}
min={360}
states={[
{
id: "default",
@@ -42,13 +42,6 @@ export const All: Story = {
</Alert>
),
},
]}
/>
</StorySection>
<StorySection title="Variants">
<StateBoard
min={320}
states={[
{
id: "destructive",
label: "Destructive",
@@ -65,7 +58,7 @@ export const All: Story = {
</StorySection>
<StorySection title="Usage">
<StateBoard
min={320}
min={360}
states={[
{
id: "no-icon",
src/components/aspect-ratio.stories.tsx
+31 -6
View File
@@ -57,20 +57,45 @@ const meta = { title: "Components/Data & Display/Aspect Ratio", component: Aspec
export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={340} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
)
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
// The Card example spans two columns (about its previous width); the ratio boxes fill their column by design.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview (16:9) is merged into Variants (16:9, 4:3, 1:1, Video), 4 columns on PC; Card stays under Usage.
export const All: Story = {
name: "Aspect Ratio",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Aspect Ratio" />
<StorySection title="Overview">{board("r169")}</StorySection>
<StorySection title="Variants">{board("r43", "r11", "video")}</StorySection>
<StorySection title="Usage">{board("card")}</StorySection>
<StorySection title="Variants">
<SpecimenGrid ids={["r169", "r43", "r11", "video"]} columns={4} />
</StorySection>
<StorySection title="Usage">
<SpecimenGrid ids={["card"]} columns={4} spans={{ card: 2 }} />
</StorySection>
</StoryPage>
),
}
src/components/avatar.stories.tsx
+30 -6
View File
@@ -76,20 +76,44 @@ const meta = { title: "Components/Data & Display/Avatar", component: Avatar, par
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-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview / States are merged into Variants (Image, Fallback); Composition stays under Usage. 3 columns on PC.
export const All: Story = {
name: "Avatar",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Avatar" />
<StorySection title="Overview">{board("image")}</StorySection>
<StorySection title="States">{board("fallback")}</StorySection>
<StorySection title="Usage">{board("composition")}</StorySection>
<StorySection title="Variants">
<SpecimenGrid ids={["image", "fallback"]} columns={3} />
</StorySection>
<StorySection title="Usage">
<SpecimenGrid ids={["composition"]} columns={3} />
</StorySection>
</StoryPage>
),
}
src/components/badge.stories.tsx
+25 -8
View File
@@ -1,7 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { CheckIcon } from "lucide-react"
import { Badge } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
const variants = ["default", "secondary", "destructive", "outline"] as const
@@ -23,18 +23,35 @@ const meta = {
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (280px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ states, columns }: { states: BoardState[]; columns: 2 | 3 | 4 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))] ${specimenColumns[columns]}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[state]} />
))}
</div>
)
}
// Representative Story: Overview (a plain Badge, already the default item of Variants / Text) is removed. 2 columns on PC.
export const All: Story = {
name: "Badge",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Badge" />
<StorySection title="Overview">
<Badge>Badge</Badge>
</StorySection>
<StorySection title="Variants">
<StateBoard
min={280}
<SpecimenGrid
columns={2}
states={[
{
id: "variants",
@@ -67,8 +84,8 @@ export const All: Story = {
/>
</StorySection>
<StorySection title="Usage">
<StateBoard
min={280}
<SpecimenGrid
columns={2}
states={[
{ id: "long", label: "Long text", children: <div className="max-w-[160px]"><Badge>A very long badge label</Badge></div> },
{
src/components/calendar.stories.tsx
+22 -13
View File
@@ -48,22 +48,22 @@ function TwoMonths() {
return box(<Calendar mode="single" numberOfMonths={2} defaultMonth={month} today={today} />)
}
const sections = [
{ id: "single", label: "Single", node: <Single showValue={false} /> },
{ id: "disabled", label: "Disabled dates", node: <DisabledDates /> },
{ id: "range", label: "Range", node: <Range /> },
{ id: "months", label: "Two months", node: <TwoMonths /> },
]
// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
// specimen tops line up; the wide Two months specimen takes two tracks (the full row on narrow screens).
const Grid = ({ children }: { children: ReactNode }) => (
<div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
)
const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => (
<div className={wide ? "col-span-full min-w-0 min-[1000px]:col-span-2" : "min-w-0"}>
<StateBoard min={10000} states={[{ id, label, children }]} />
</div>
)
// No `component`: Calendar props are a union of selection modes, so Stories without args would not type-check.
const meta = { title: "Components/Search & Date/Calendar", parameters: { layout: "padded" } } satisfies Meta
export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={300} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, wide: s.id === "months", children: s.node }))} />
)
// Representative Story: the common Story page; the sections group the same specimens.
export const All: Story = {
name: "Calendar",
@@ -71,9 +71,18 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Calendar" />
<StorySection title="Overview">{board("single")}</StorySection>
<StorySection title="Variants">{board("range", "months")}</StorySection>
<StorySection title="States">{board("disabled")}</StorySection>
<StorySection title="Variants">
<Grid>
<Cell id="single" label="Single"><Single showValue={false} /></Cell>
<Cell id="range" label="Range"><Range /></Cell>
<Cell id="months" label="Two months" wide><TwoMonths /></Cell>
</Grid>
</StorySection>
<StorySection title="States">
<Grid>
<Cell id="disabled" label="Disabled dates"><DisabledDates /></Cell>
</Grid>
</StorySection>
</StoryPage>
),
}
src/components/card.stories.tsx
+23 -9
View File
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button } from "@hm-design/ui"
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardSurface } from "@hm-design/ui"
import { Input } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import type { BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Story structure follows Button / Input / Select: one representative "Card" Story shows the ui_viz cases on one page,
@@ -34,6 +34,23 @@ function Specimen({ surface = "surface", action, title = "프로젝트 정보",
)
}
// Story-only equal-column board for this page: 3 columns on PC, 2 / 1 on narrower widths. Variants and Usage share it,
// so a Usage cell has the same width as one Variants cell. Label markup/colors match StateBoard (shared component untouched).
function CardBoard({ states }: { states: BoardState[] }) {
return (
<div className="grid grid-cols-1 items-start gap-x-6 gap-y-8 min-[640px]:grid-cols-2 min-[900px]:grid-cols-3">
{states.map(({ id, label, children }) => (
<section className="grid min-w-0 content-start gap-3" key={id} data-overview-state={id} aria-label={label}>
<header className="grid gap-2 border-b border-black/10 pb-2">
<h3 className="text-sm font-medium text-muted-foreground">{label}</h3>
</header>
{children}
</section>
))}
</div>
)
}
function FormSpecimen() {
return (
<Card>
@@ -42,7 +59,7 @@ function FormSpecimen() {
</CardHeader>
<CardContent>
<div className="grid gap-2">
<label htmlFor="card-form-name" className="text-sm font-medium text-muted-foreground">
<label htmlFor="card-form-name" className="text-sm font-medium text-foreground">
프로젝트명
</label>
<Input id="card-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -63,7 +80,7 @@ const meta = {
export default meta
type Story = StoryObj<typeof meta>
// Representative Story: the common Story page (Overview → Variants → Usage) with every ui_viz case. Named after the component, as in ui_viz.
// Representative Story: the common Story page (Variants → Usage) with every ui_viz case. Named after the component, as in ui_viz.
// It is the only Card entry in the default sidebar, so Storybook shows Card as a single 1-depth item.
export const All: Story = {
name: "Card",
@@ -71,20 +88,17 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Card" />
<StorySection title="Overview">
<StateBoard min={360} states={[{ id: "surface", label: "White", children: <Specimen /> }]} />
</StorySection>
<StorySection title="Variants">
<StateBoard
min={360}
<CardBoard
states={[
{ id: "surface", label: "White", children: <Specimen /> },
{ id: "content", label: "Content (Beige)", children: <Specimen surface="content" /> },
{ id: "action", label: "Title + Action", children: <Specimen action /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<StateBoard min={360} states={[{ id: "form", label: "본문 조합 · Input", children: <FormSpecimen /> }]} />
<CardBoard states={[{ id: "form", label: "본문 조합 · Input", children: <FormSpecimen /> }]} />
</StorySection>
</StoryPage>
),
src/components/carousel.stories.tsx
+31 -6
View File
@@ -142,20 +142,45 @@ const meta = { title: "Components/Data & Display/Carousel", component: Carousel,
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, children: s.node }))} />
)
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
// The Media example spans two columns; carousels fill their column by design.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview (Basic) is merged into Variants (Basic, Multiple items, Loop, Vertical), 4 columns on PC; Media stays under Usage.
export const All: Story = {
name: "Carousel",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Carousel" />
<StorySection title="Overview">{board("basic")}</StorySection>
<StorySection title="Variants">{board("multiple", "loop", "vertical")}</StorySection>
<StorySection title="Usage">{board("media")}</StorySection>
<StorySection title="Variants">
<SpecimenGrid ids={["basic", "multiple", "loop", "vertical"]} columns={4} />
</StorySection>
<StorySection title="Usage">
<SpecimenGrid ids={["media"]} columns={4} spans={{ media: 2 }} />
</StorySection>
</StoryPage>
),
}
src/components/collapsible.stories.tsx
+18 -6
View File
@@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { ChevronDownIcon } from "lucide-react"
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// The representative "Collapsible" Story shows one independent disclosure per state with real, clickable triggers. The same
@@ -70,8 +70,21 @@ const meta = { title: "Components/Disclosure/Collapsible", component: Collapsibl
export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
// specimen start line up, unused columns stay empty and `items-start` lets an opened item grow without touching its neighbors.
function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
return (
<div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[state]} />
))}
</div>
)
}
const board = (cols: 2 | 3, ...ids: string[]) => (
<StateGrid cols={cols} 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.
@@ -81,9 +94,8 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Collapsible" />
<StorySection title="Overview">{board("closed")}</StorySection>
<StorySection title="States">{board("open", "disabled")}</StorySection>
<StorySection title="Usage">{board("long", "controlled")}</StorySection>
<StorySection title="States">{board(3, "closed", "open", "disabled")}</StorySection>
<StorySection title="Usage">{board(3, "long", "controlled")}</StorySection>
</StoryPage>
),
}
src/components/combobox.stories.tsx
+30 -23
View File
@@ -21,10 +21,11 @@ const longOptions: ComboboxOption[] = [
{ value: "b", label: "짧은 옵션" },
]
function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) {
// Label 14/20/500 in the default text color; a Disabled field keeps the secondary color at 0.6 (same as the Form pages).
function Field({ label, id, disabled, children }: { label: string; id: string; disabled?: boolean; children: ReactNode }) {
return (
<div className="grid max-w-xs gap-2">
<label htmlFor={id} className="justify-self-start text-sm font-medium text-muted-foreground">
<label htmlFor={id} className={`justify-self-start text-sm font-medium ${disabled ? "text-muted-foreground opacity-60" : "text-foreground"}`}>
{label}
</label>
{children}
@@ -71,7 +72,7 @@ function LongLabel() {
function Disabled() {
return (
<Field label="비활성" id="cb-disabled">
<Field label="비활성" id="cb-disabled" disabled>
<Combobox id="cb-disabled" options={frameworks} defaultValue="next" disabled />
</Field>
)
@@ -99,22 +100,22 @@ function SelectComparison() {
)
}
const sections = [
{ id: "empty", label: "Placeholder", node: <Empty /> },
{ id: "controlled", label: "Selected", node: <Controlled showValue={false} /> },
{ id: "long", label: "Long option", node: <LongLabel /> },
{ id: "disabled", label: "Disabled", node: <Disabled /> },
]
// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
// fields line up; sections with fewer specimens leave the remaining tracks empty. A wide cell takes two tracks (the full row on narrow screens).
const Grid = ({ children }: { children: ReactNode }) => (
<div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
)
const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => (
<div className={wide ? "col-span-full min-w-0 min-[1000px]:col-span-2" : "min-w-0"}>
<StateBoard min={10000} states={[{ id, label, children }]} />
</div>
)
// No `component`: Combobox has a required `options` prop, so Stories without args would not type-check.
const meta = { title: "Components/Search & Date/Combobox", parameters: { layout: "padded" } } satisfies Meta
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: "Combobox",
@@ -122,18 +123,24 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Combobox" />
<StorySection title="Overview">{board("empty")}</StorySection>
<StorySection title="Sizes">
{/* The field label already names the size, so the Medium specimen has no separate example title. */}
<div className="grid gap-10">
<div className="max-w-sm">
<Medium />
</div>
<StateBoard min={320} states={[{ id: "select-comparison", label: "Select / Combobox", wide: true, children: <SelectComparison /> }]} />
</div>
<Grid>
<Cell id="empty" label="Default"><Empty /></Cell>
<Cell id="medium" label="Medium"><Medium /></Cell>
</Grid>
</StorySection>
<StorySection title="States">
<Grid>
<Cell id="controlled" label="Selected"><Controlled showValue={false} /></Cell>
<Cell id="disabled" label="Disabled"><Disabled /></Cell>
</Grid>
</StorySection>
<StorySection title="Usage">
<Grid>
<Cell id="long" label="Long option"><LongLabel /></Cell>
<Cell id="select-comparison" label="Select / Combobox" wide><SelectComparison /></Cell>
</Grid>
</StorySection>
<StorySection title="States">{board("controlled", "disabled")}</StorySection>
<StorySection title="Usage">{board("long")}</StorySection>
</StoryPage>
),
}
src/components/command.stories.tsx
+21 -12
View File
@@ -80,20 +80,21 @@ function Long() {
)
}
const sections = [
{ id: "basic", label: "Search", node: <Basic showValue={false} /> },
{ id: "grouped", label: "Groups", node: <Grouped /> },
{ id: "long", label: "Long list", node: <Long /> },
]
// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
// command boxes line up; sections with fewer specimens leave the remaining tracks empty.
const Grid = ({ children }: { children: ReactNode }) => (
<div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
)
const Cell = ({ id, label, children }: { id: string; label: string; children: ReactNode }) => (
<div className="min-w-0">
<StateBoard min={10000} states={[{ id, label, children }]} />
</div>
)
const meta = { title: "Components/Search & Date/Command", component: Command, parameters: { layout: "padded" } } satisfies Meta<typeof Command>
export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={360} 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: "Command",
@@ -101,9 +102,17 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Command" />
<StorySection title="Overview">{board("basic")}</StorySection>
<StorySection title="Variants">{board("grouped")}</StorySection>
<StorySection title="Usage">{board("long")}</StorySection>
<StorySection title="Variants">
<Grid>
<Cell id="basic" label="Search"><Basic showValue={false} /></Cell>
<Cell id="grouped" label="Groups"><Grouped /></Cell>
</Grid>
</StorySection>
<StorySection title="Usage">
<Grid>
<Cell id="long" label="Long list"><Long /></Cell>
</Grid>
</StorySection>
</StoryPage>
),
}
src/components/context-menu.stories.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Context Menu" />
<StorySection title="Overview">
<StorySection title="Basic">
<Full />
</StorySection>
</StoryPage>
src/components/date-picker.stories.tsx
+44 -31
View File
@@ -12,10 +12,11 @@ import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-pag
const today = new Date(2026, 9, 2)
const calendarProps = { today, startMonth: new Date(2026, 0), endMonth: new Date(2027, 11) }
function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) {
// Label 14/20/500 in the default text color; a Disabled field keeps the secondary color at 0.6 (same as the Form pages).
function Field({ label, id, disabled, children }: { label: string; id: string; disabled?: boolean; children: ReactNode }) {
return (
<div className="grid max-w-xs gap-2">
<label htmlFor={id} className="justify-self-start text-sm font-medium text-muted-foreground">
<label htmlFor={id} className={`justify-self-start text-sm font-medium ${disabled ? "text-muted-foreground opacity-60" : "text-foreground"}`}>
{label}
</label>
{children}
@@ -39,16 +40,19 @@ function Selected() {
)
}
function FormatExamples() {
function DefaultFormat() {
return (
<div className="grid gap-3">
<Field label="기본 형식 · YYYY.MM.DD" id="dp-padded">
<DatePicker id="dp-padded" defaultValue={new Date(2026, 0, 9)} calendarProps={calendarProps} />
</Field>
<Field label="Custom format override" id="dp-custom">
<DatePicker id="dp-custom" defaultValue={new Date(2026, 9, 6)} format={(date) => date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} />
</Field>
</div>
<Field label="기본 형식 · YYYY.MM.DD" id="dp-padded">
<DatePicker id="dp-padded" defaultValue={new Date(2026, 0, 9)} calendarProps={calendarProps} />
</Field>
)
}
function CustomFormat() {
return (
<Field label="Custom format override" id="dp-custom">
<DatePicker id="dp-custom" defaultValue={new Date(2026, 9, 6)} format={(date) => date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} />
</Field>
)
}
@@ -86,29 +90,27 @@ function DisabledDates() {
function Disabled() {
return (
<Field label="비활성" id="dp-disabled">
<Field label="비활성" id="dp-disabled" disabled>
<DatePicker id="dp-disabled" disabled defaultValue={new Date(2026, 9, 15)} />
</Field>
)
}
const sections = [
{ id: "empty", label: "Empty", node: <Empty /> },
{ id: "selected", label: "Selected", node: <Selected /> },
{ id: "format", label: "Format", node: <FormatExamples /> },
{ id: "controlled", label: "Controlled", node: <Controlled showValue={false} /> },
{ id: "disabled-dates", label: "Disabled dates", node: <DisabledDates /> },
{ id: "disabled", label: "Disabled", node: <Disabled /> },
]
// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and
// fields line up; sections with fewer specimens leave the remaining tracks empty.
const Grid = ({ children }: { children: ReactNode }) => (
<div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
)
const Cell = ({ id, label, children }: { id: string; label: string; children: ReactNode }) => (
<div className="min-w-0">
<StateBoard min={10000} states={[{ id, label, children }]} />
</div>
)
const meta = { title: "Components/Search & Date/Date Picker", component: DatePicker, parameters: { layout: "padded" } } satisfies Meta<typeof DatePicker>
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: "Date Picker",
@@ -116,15 +118,26 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Date Picker" />
<StorySection title="Overview">{board("empty")}</StorySection>
{/* The field label already names the size, so the Medium specimen has no separate example title. */}
<StorySection title="Sizes">
<div className="max-w-sm">
<Medium />
</div>
<Grid>
<Cell id="empty" label="Default"><Empty /></Cell>
<Cell id="medium" label="Medium"><Medium /></Cell>
</Grid>
</StorySection>
<StorySection title="States">
<Grid>
<Cell id="selected" label="Selected"><Selected /></Cell>
<Cell id="controlled" label="Controlled"><Controlled showValue={false} /></Cell>
<Cell id="disabled-dates" label="Disabled dates"><DisabledDates /></Cell>
<Cell id="disabled" label="Disabled"><Disabled /></Cell>
</Grid>
</StorySection>
<StorySection title="Usage">
<Grid>
<Cell id="format-default" label="Default format"><DefaultFormat /></Cell>
<Cell id="format-custom" label="Custom format"><CustomFormat /></Cell>
</Grid>
</StorySection>
<StorySection title="States">{board("selected", "controlled", "disabled-dates", "disabled")}</StorySection>
<StorySection title="Usage">{board("format")}</StorySection>
</StoryPage>
),
}
src/components/dialog.stories.tsx
+32 -16
View File
@@ -4,6 +4,7 @@ import { Button } from "@hm-design/ui"
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@hm-design/ui"
import { Input } from "@hm-design/ui"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Dialog is an overlay (Radix Portal), so it does not fit the StateBoard. The representative Story is a row of triggers that open
@@ -161,7 +162,7 @@ function FormContent({ defaultOpen }: { defaultOpen?: boolean }) {
return (
<Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={confirmActions}>
<div className="grid gap-2">
<label htmlFor="dialog-form-name" className="text-sm font-medium text-muted-foreground">
<label htmlFor="dialog-form-name" className="text-sm font-medium text-foreground">
프로젝트명
</label>
<Input id="dialog-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -176,29 +177,44 @@ type Story = StoryObj<typeof meta>
// Representative Story: the common Story page; every case opens from its trigger. Named after the component, as in ui_viz.
// It is the only Dialog entry in the default sidebar, so Storybook shows Dialog as a single 1-depth item.
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: the common Story page. Overview is merged into Variants (Basic is its first item).
export const All: Story = {
name: "Dialog",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader
title="Dialog"
/>
<StorySection title="Overview">
<Basic />
</StorySection>
<StoryPageHeader title="Dialog" />
<StorySection title="Variants">
<div className="flex flex-wrap gap-3">
<LongContent />
<WideContent />
<BodyScroll />
</div>
<SpecimenGrid
states={[
{ id: "basic", label: "Basic", children: <Basic /> },
{ id: "long-content", label: "Long Content", children: <LongContent /> },
{ id: "wide-content", label: "Wide Content", children: <WideContent /> },
{ id: "body-scroll", label: "Body Scroll", children: <BodyScroll /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<div className="flex flex-wrap gap-3">
<DeleteConfirmation />
<FormContent />
</div>
<SpecimenGrid
states={[
{ id: "delete-confirmation", label: "Delete Confirmation", children: <DeleteConfirmation /> },
{ id: "form", label: "Form", children: <FormContent /> },
]}
/>
</StorySection>
</StoryPage>
),
src/components/drawer.stories.tsx
+24 -8
View File
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
// Usage: preserved native label fixtures do not define a new-screen exception. Use public Label
// for supported fields (docs/components/label.md §5); copy only actions requested by the screen.
import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Input } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Drawer is a modal vaul overlay (Portal). The representative Story opens the real Drawer from its triggers; drag the handle or
@@ -70,7 +71,7 @@ function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
return (
<Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={actions}>
<div className="grid gap-2">
<label htmlFor="drawer-form-name" className="text-sm font-medium text-muted-foreground">
<label htmlFor="drawer-form-name" className="text-sm font-medium text-foreground">
프로젝트명
</label>
<Input id="drawer-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -95,20 +96,35 @@ const meta = { title: "Components/Overlay/Drawer", component: Drawer, parameters
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: Overview and Usage are merged into one Usage section (Basic, Form, Long Content).
export const All: Story = {
name: "Drawer",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Drawer" />
<StorySection title="Overview">
<Basic />
</StorySection>
<StorySection title="Usage">
<div className="flex flex-wrap gap-3">
<FormCase />
<LongCase />
</div>
<SpecimenGrid
states={[
{ id: "basic", label: "Basic", children: <Basic /> },
{ id: "form", label: "Form", children: <FormCase /> },
{ id: "long-content", label: "Long Content", children: <LongCase /> },
]}
/>
</StorySection>
</StoryPage>
),
src/components/dropdown-menu.stories.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export const All: Story = {
<StoryPageHeader
title="Dropdown Menu"
/>
<StorySection title="Overview">
<StorySection title="Basic">
<Full />
</StorySection>
</StoryPage>
src/components/hover-card.stories.tsx
+23 -5
View File
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Hover Card is a Radix overlay (Portal) for a richer preview than Tooltip. The representative Story shows real triggers
@@ -48,17 +49,34 @@ const meta = { title: "Components/Overlay/Hover Card", component: HoverCard, par
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: Overview and Usage are merged into one Variants section (Basic, Long Content).
export const All: Story = {
name: "Hover Card",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Hover Card" />
<StorySection title="Overview">
<Preview />
</StorySection>
<StorySection title="Usage">
<LongContent />
<StorySection title="Variants">
<SpecimenGrid
states={[
{ id: "basic", label: "Basic", children: <Preview /> },
{ id: "long-content", label: "Long Content", children: <LongContent /> },
]}
/>
</StorySection>
</StoryPage>
),
src/components/popover.stories.tsx
+37 -21
View File
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button, Input, Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Popover is a non-modal Radix overlay (Portal). The representative Story opens the real panels from their triggers;
@@ -33,7 +34,7 @@ function FormPanel() {
</PopoverTrigger>
<PopoverContent align="start" aria-label="프로젝트 이름 변경">
<div className="grid gap-3">
<label htmlFor="popover-name" className="text-sm font-medium text-muted-foreground">
<label htmlFor="popover-name" className="text-sm font-medium text-foreground">
프로젝트명
</label>
<Input id="popover-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -55,22 +56,18 @@ function FormPanel() {
)
}
function Aligned() {
function Aligned({ align }: { align: "start" | "center" | "end" }) {
return (
<div className="flex w-full max-w-md justify-between gap-3">
{(["start", "center", "end"] as const).map((align) => (
<Popover key={align}>
<PopoverTrigger asChild>
<Button variant="primary" appearance="outline" size="sm">
{`align ${align}`}
</Button>
</PopoverTrigger>
<PopoverContent align={align} side="bottom" aria-label={`정렬 예제: ${align}`}>
<p>{`align="${align}"`}</p>
</PopoverContent>
</Popover>
))}
</div>
<Popover>
<PopoverTrigger asChild>
<Button variant="primary" appearance="outline" size="sm">
{`align ${align}`}
</Button>
</PopoverTrigger>
<PopoverContent align={align} side="bottom" aria-label={`정렬 예제: ${align}`}>
<p>{`align="${align}"`}</p>
</PopoverContent>
</Popover>
)
}
@@ -78,20 +75,39 @@ const meta = { title: "Components/Overlay/Popover", component: Popover, paramete
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: Overview is merged into Variants (Basic is its first item); each align trigger sits in its own column.
export const All: Story = {
name: "Popover",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Popover" />
<StorySection title="Overview">
<Info />
</StorySection>
<StorySection title="Variants">
<Aligned />
<SpecimenGrid
states={[
{ id: "basic", label: "Basic", children: <Info /> },
{ id: "align-start", label: "Align Start", children: <Aligned align="start" /> },
{ id: "align-center", label: "Align Center", children: <Aligned align="center" /> },
{ id: "align-end", label: "Align End", children: <Aligned align="end" /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<FormPanel />
<SpecimenGrid states={[{ id: "form", label: "Form", children: <FormPanel /> }]} />
</StorySection>
</StoryPage>
),
src/components/progress.stories.tsx
+30 -6
View File
@@ -49,20 +49,44 @@ const meta = { title: "Components/Data & Display/Progress", component: Progress,
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-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview (50%) is merged into States (0%, 50%, 100%); max = 200 and Interactive stay under Usage. 3 columns on PC.
export const All: Story = {
name: "Progress",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Progress" />
<StorySection title="Overview">{board("middle")}</StorySection>
<StorySection title="States">{board("zero", "full")}</StorySection>
<StorySection title="Usage">{board("custom-maximum", "interactive")}</StorySection>
<StorySection title="States">
<SpecimenGrid ids={["zero", "middle", "full"]} columns={3} />
</StorySection>
<StorySection title="Usage">
<SpecimenGrid ids={["custom-maximum", "interactive"]} columns={3} />
</StorySection>
</StoryPage>
),
}
src/components/resizable.stories.tsx
+18 -6
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// The representative Story shows real, draggable layouts; the same specimens also exist as Stories tagged `verification` (hidden
@@ -99,8 +99,21 @@ const meta = { title: "Components/Disclosure/Resizable", component: ResizablePan
export default meta
type Story = StoryObj<typeof meta>
const board = (...ids: string[]) => (
<StateBoard min={580} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
// specimen start line up and unused columns stay empty. The frames keep their own size (max 560px wide).
function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
return (
<div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[state]} />
))}
</div>
)
}
const board = (cols: 2 | 3, ...ids: string[]) => (
<StateGrid cols={cols} 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.
@@ -112,9 +125,8 @@ export const All: Story = {
<StoryPageHeader
title="Resizable"
/>
<StorySection title="Overview">{board("horizontal")}</StorySection>
<StorySection title="Variants">{board("vertical", "handle")}</StorySection>
<StorySection title="Usage">{board("minmax", "collapsible")}</StorySection>
<StorySection title="Variants">{board(3, "horizontal", "handle", "vertical")}</StorySection>
<StorySection title="Usage">{board(3, "minmax", "collapsible")}</StorySection>
</StoryPage>
),
}
src/components/scroll-area.stories.tsx
+30 -6
View File
@@ -77,20 +77,44 @@ const meta = { title: "Components/Data & Display/Scroll Area", component: Scroll
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-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (300px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview (Vertical) is merged into Variants (Vertical, Horizontal, Both axes); Table-like stays under Usage. 3 columns on PC.
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>
<StorySection title="Variants">
<SpecimenGrid ids={["vertical", "horizontal", "both"]} columns={3} />
</StorySection>
<StorySection title="Usage">
<SpecimenGrid ids={["table-like"]} columns={3} />
</StorySection>
</StoryPage>
),
}
src/components/separator.stories.tsx
+24 -11
View File
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Separator } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
const meta = {
@@ -20,15 +20,35 @@ const meta = {
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ states, columns }: { states: BoardState[]; columns: 2 | 3 | 4 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[state]} />
))}
</div>
)
}
// Representative Story: Overview (Horizontal) and Variants (Vertical, Semantic) are merged into one Variants section. 3 columns on PC.
export const All: Story = {
name: "Separator",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Separator" />
<StorySection title="Overview">
<StateBoard
min={280}
<StorySection title="Variants">
<SpecimenGrid
columns={3}
states={[
{
id: "horizontal",
@@ -41,13 +61,6 @@ export const All: Story = {
</div>
),
},
]}
/>
</StorySection>
<StorySection title="Variants">
<StateBoard
min={280}
states={[
{
id: "vertical",
label: "Vertical",
src/components/sheet.stories.tsx
+32 -16
View File
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
// Usage: preserved native label fixtures do not define a new-screen exception. Use public Label
// for supported fields (docs/components/label.md §5); copy only actions requested by the screen.
import { Button, Input, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Sheet is a modal Radix overlay (Portal), so the representative Story is a row of triggers that open the real Sheet for each
@@ -68,7 +69,7 @@ function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
return (
<Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보">
<div className="grid gap-2">
<label htmlFor="sheet-form-name" className="text-sm font-medium text-muted-foreground">
<label htmlFor="sheet-form-name" className="text-sm font-medium text-foreground">
프로젝트명
</label>
<Input id="sheet-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -93,29 +94,44 @@ const meta = { title: "Components/Overlay/Sheet", component: Sheet, parameters:
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: the common Story page. Overview is merged into Variants (Right is its first item).
export const All: Story = {
name: "Sheet",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader
title="Sheet"
/>
<StorySection title="Overview">
<SideCase side="right" />
</StorySection>
<StoryPageHeader title="Sheet" />
<StorySection title="Variants">
<div className="flex flex-wrap gap-3">
<SideCase side="left" />
<SideCase side="top" />
<SideCase side="bottom" />
</div>
<SpecimenGrid
states={[
{ id: "right", label: "Right", children: <SideCase side="right" /> },
{ id: "left", label: "Left", children: <SideCase side="left" /> },
{ id: "top", label: "Top", children: <SideCase side="top" /> },
{ id: "bottom", label: "Bottom", children: <SideCase side="bottom" /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<div className="flex flex-wrap gap-3">
<FormCase />
<LongCase />
</div>
<SpecimenGrid
states={[
{ id: "form", label: "Form", children: <FormCase /> },
{ id: "long-content", label: "Long Content", children: <LongCase /> },
]}
/>
</StorySection>
</StoryPage>
),
src/components/skeleton.stories.tsx
+27 -5
View File
@@ -53,19 +53,41 @@ const meta = { title: "Components/Data & Display/Skeleton", component: Skeleton,
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-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview / Usage are merged into one Variants section (Text, Avatar + text, Card / list loading). 3 columns on PC.
export const All: Story = {
name: "Skeleton",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Skeleton" />
<StorySection title="Overview">{board("text")}</StorySection>
<StorySection title="Usage">{board("avatar", "card")}</StorySection>
<StorySection title="Variants">
<SpecimenGrid ids={["text", "avatar", "card"]} columns={3} />
</StorySection>
</StoryPage>
),
}
src/components/sonner.stories.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ function Trigger({ onClick, children }: { onClick: () => void; children: ReactNo
function Board({ ids }: { ids: string[] }) {
return (
<StateBoard
min={220}
min={360}
states={[
{
id: "types",
src/components/table.stories.tsx
+35 -7
View File
@@ -1,4 +1,4 @@
import { useState, type ReactNode } from "react"
import { useState, type CSSProperties, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Badge, Checkbox, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
@@ -144,20 +144,48 @@ const meta = { title: "Components/Data & Display/Table", component: Table, param
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, wide: true, children: box(s.node) }))} />
)
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (400px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
// The default 520px Table minimum would make the 445px columns scroll sideways, so Basic, Selected row and Long text reset the
// documented `--hm-table-min-width` token for their own cell (same as the Tabs usage panel): the table then follows its column
// and long text wraps there. Horizontal overflow keeps its inline `minWidth: 1100`, so it still overflows and scrolls inside its box.
const specimenColumns = {
2: "min-[1000px]:grid-cols-2",
3: "min-[1000px]:grid-cols-3",
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))] ${specimenColumns[columns]}`}>
{ids.map((id) => {
const s = sections.find((section) => section.id === id)!
return (
<div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
<StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.id === "wide" ? box(s.node) : <div style={{ "--hm-table-min-width": "0px" } as CSSProperties}>{box(s.node)}</div> }]} />
</div>
)
})}
</div>
)
}
// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview / States / Usage are regrouped into Variants (Basic, Selected row) and Usage (Long text,
// Horizontal overflow), two equal columns each on PC.
export const All: Story = {
name: "Table",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Table" />
<StorySection title="Overview">{board("basic")}</StorySection>
<StorySection title="States">{board("selected")}</StorySection>
<StorySection title="Usage">{board("long", "wide")}</StorySection>
<StorySection title="Variants">
<SpecimenGrid ids={["basic", "selected"]} columns={2} />
</StorySection>
<StorySection title="Usage">
<SpecimenGrid ids={["long", "wide"]} columns={2} />
</StorySection>
</StoryPage>
),
}
src/components/tooltip.stories.tsx
+42 -21
View File
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Tooltip is a Radix overlay (Portal) with short, non-interactive text. The representative Story shows real triggers
@@ -20,20 +21,16 @@ function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
)
}
function Placements() {
function Placement({ side }: { side: "top" | "right" | "bottom" | "left" }) {
return (
<div className="flex flex-wrap gap-3">
{(["top", "right", "bottom", "left"] as const).map((side) => (
<Tooltip key={side}>
<TooltipTrigger asChild>
<Button variant="primary" appearance="outline" size="sm">
{side}
</Button>
</TooltipTrigger>
<TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
</Tooltip>
))}
</div>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="primary" appearance="outline" size="sm">
{side}
</Button>
</TooltipTrigger>
<TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
</Tooltip>
)
}
@@ -70,6 +67,21 @@ const meta = { title: "Components/Overlay/Tooltip", component: Tooltip, paramete
export default meta
type Story = StoryObj<typeof meta>
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
))}
</div>
)
}
// Representative Story: Overview is merged into Variants (Basic is its first item, then the four sides): 5 columns on PC.
export const All: Story = {
name: "Tooltip",
parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -77,17 +89,26 @@ export const All: Story = {
<TooltipProvider>
<StoryPage>
<StoryPageHeader title="Tooltip" />
<StorySection title="Overview">
<Basic />
</StorySection>
<StorySection title="Variants">
<Placements />
<SpecimenGrid
columns={5}
states={[
{ id: "basic", label: "Basic", children: <Basic /> },
{ id: "top", label: "Top", children: <Placement side="top" /> },
{ id: "right", label: "Right", children: <Placement side="right" /> },
{ id: "bottom", label: "Bottom", children: <Placement side="bottom" /> },
{ id: "left", label: "Left", children: <Placement side="left" /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<div className="flex flex-wrap gap-3">
<LongText />
<Disabled />
</div>
<SpecimenGrid
columns={5}
states={[
{ id: "long-text", label: "Long Text", children: <LongText /> },
{ id: "disabled", label: "Disabled", children: <Disabled /> },
]}
/>
</StorySection>
</StoryPage>
</TooltipProvider>