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

style(storybook): unify form element story layouts

Browse Source 
- Button: Sizes | Variants side by side, States as Brand / Standard Solid /
  Standard Outline matrices (3 / 2 / 1 columns), 8px button gap; the
  Interact row stays only in the verification "Brand States" Story
- Input / Textarea / Select: state name in the field Label slot, repeated
  field Label and group titles removed, aria-label keeps field meaning
  with the visible state name; Select uses the Input field grid
- Combobox / Date Picker: Sizes / States use the same state-name Label
  and Input grid; Usage unchanged
- Toggle: top Variants / States in 2 columns, 8px toggle gap, 단독 toggle
  keeps its own width
- Component code, props, tokens and verification Stories unchanged;
  component docs updated to match
This commit is contained in:
shkim4 committed 2026-11-12 17:11:56 +09:00
1 parent e8c16f5292
commit a7b56ff23e
14 files changed
+351 -187
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/button.stories.tsx
+121 -62
View File
@@ -1,9 +1,8 @@
import { useState } from "react"
import { useState, type ReactNode } from "react"
import { DownloadIcon } from "lucide-react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button, type ButtonAppearance } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Story structure follows ui_viz (implementations/web/storybook/Button.stories.jsx):
// one representative "Button" Story shows kinds, sizes and states on a single screen; the same sections also exist
@@ -126,8 +125,8 @@ function SizesBoard() {
)
}
// `showNote={false}` keeps the representative page UI-only; the verification Story keeps the note and the Activated readout.
function BrandStates({ showNote = true }: { showNote?: boolean }) {
// Verification "Brand States" (note and Activated readout). The representative page shows Brand states in StateMatrix.
function BrandStates() {
const [count, setCount] = useState(0)
return (
<div className={stack}>
@@ -140,12 +139,10 @@ function BrandStates({ showNote = true }: { showNote?: boolean }) {
Disabled
</Button>
</div>
{showNote ? <output aria-live="polite">Activated: {count}</output> : null}
{showNote ? (
<p className={note}>
Hover와 Pressed는 Storybook이 고정한 상태입니다. Interact 위에서 실제 Hover·Pressed·포인터 이탈을 확인합니다. Disabled는 실행되지 않습니다.
</p>
) : null}
<output aria-live="polite">Activated: {count}</output>
<p className={note}>
Hover와 Pressed는 Storybook이 고정한 상태입니다. Interact 위에서 실제 Hover·Pressed·포인터 이탈을 확인합니다. Disabled는 실행되지 않습니다.
</p>
</div>
)
}
@@ -157,15 +154,13 @@ const standardStates = [
["Disabled", { disabled: true }],
] as const
// Without `title` the table sits under a StateBoard label (representative page) and drops the Role column:
// every button already shows its role name, so the row header would repeat it.
// `compact` (representative page only) tightens the cell padding so a 5x4 / 4x4 matrix stays short; buttons are untouched.
function StandardStateTable({ appearance, title, compact = false }: { appearance: "solid" | "outline"; title?: string; compact?: boolean }) {
// Verification "Standard States" table (rows = roles). The representative page uses StateMatrix (rows = states) instead.
function StandardStateTable({ appearance, title }: { appearance: "solid" | "outline"; title?: string }) {
return (
<section className="min-w-0">
{title ? <h3 className={heading}>{title}</h3> : null}
<div className={`${title ? "mt-3 " : ""}min-w-0 max-w-full overflow-x-auto`}>
<table className={`w-full border-collapse [&_th]:text-left ${compact ? "[&_td]:px-2 [&_td]:py-1 [&_th]:px-2 [&_th]:py-1" : "[&_td]:p-3 [&_th]:p-3"}`}>
<table className="w-full border-collapse [&_th]:text-left [&_td]:p-3 [&_th]:p-3">
<thead>
<tr>
{title ? <th scope="col">Role</th> : null}
@@ -231,43 +226,92 @@ function DestructiveBoard() {
)
}
// Page and section spacing come from the common compact Story page (story-page.css); this Story keeps no override.
// 8px gap so the three Brand sizes stay on one line in the narrowest (Brand) column, same as the Variants rows.
const compactRow = "flex flex-wrap items-center gap-2"
// Equal two columns over the whole content width. StateBoard's own auto-fill grid left an empty third column
// (2 items in a grid that fits 3), so the pairs are laid out here and each StateBoard holds one specimen.
const twoColumns = "grid gap-6 min-[900px]:grid-cols-[repeat(2,minmax(0,1fr))]"
// StateBoard lays its states out in an auto-fill grid. A board that holds one specimen inside a wide column would put it
// in the first of several inner columns (about half width at 1920px), so `min` is set larger than any column to force one.
const SingleColumnBoard = ({ states }: { states: BoardState[] }) => <StateBoard min={10000} states={states} />
const columnsAuto = (min: number) => `[grid-template-columns:repeat(auto-fit,minmax(min(100%,${min}px),1fr))]`
// Representative-page layout (2026-11-12 compact comparison). Page and section spacing come from the common Story page
// (story-page.css); only the arrangement below is local. Buttons are rendered with their public API and never restyled.
// Group label: the StateBoard H3 style (14/20/500, secondary). `data-sb-board` gives the block the common one-step section indent.
const groupLabel = "m-0 text-sm font-medium text-muted-foreground"
// 8px gap keeps all three Variants groups on one line at the 1280px PC width (Brand 3 + Solid 5 + Outline 4 buttons in a 3-column grid); narrower widths wrap.
function CompactRoleRow({ appearance }: { appearance: (typeof appearances)[number][0] }) {
// Sizes / Variants (top, side by side): one row per group, label on a fixed 128px left column so every group title and first
// button line up. At 640px and below the label moves above its buttons. Buttons keep the page-wide 8px gap, across and between
// rows (same as the States matrices), and wrap only when too narrow.
function GroupRows({ groups }: { groups: { id: string; label: string; children: ReactNode }[] }) {
return (
<div className="flex flex-wrap items-center gap-2">
{rolesFor(appearance).map(([variant, label]) => (
<Button key={variant} variant={variant} appearance={appearance}>
{label}
</Button>
<div data-sb-board="" className="grid gap-2 max-sm:gap-5">
{groups.map(({ id, label, children }) => (
<section key={id} data-overview-state={id} aria-label={label} className="flex min-w-0 items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-2">
<h3 className={`${groupLabel} w-32 shrink-0 max-sm:w-auto`}>{label}</h3>
<div className="flex min-w-0 flex-wrap items-center gap-2">{children}</div>
</section>
))}
</div>
)
}
function CompactSizeRow({ appearance }: { appearance: "brand" | "solid" }) {
// States (bottom): Brand | Standard Solid | Standard Outline columns, title on top, all tops aligned. The columns use the
// whole width, shared in proportion to their matrices (about 301 / 420 / 338px, never narrower than the matrix); each matrix
// keeps its 8px button gap and sits at the start of its column. 3 columns from a 1250px preview (the three need about 1106px
// of content plus the page margins), 2 columns (Brand + Solid, then Outline) from 890px, 1 column below; a 1-column matrix
// wider than the screen scrolls in its own box only (the page never scrolls sideways).
function GroupColumns({ groups }: { groups: { id: string; label: string; children: ReactNode }[] }) {
return (
<div className={compactRow}>
{sizes.map(([size, label]) => (
<Button key={size} appearance={appearance} size={size}>
{label}
</Button>
<div
data-sb-board=""
className="grid grid-cols-[minmax(0,1fr)] items-start gap-6 min-[890px]:grid-cols-[minmax(max-content,301fr)_minmax(max-content,420fr)] min-[1250px]:grid-cols-[minmax(max-content,301fr)_minmax(max-content,420fr)_minmax(max-content,338fr)]"
>
{groups.map(({ id, label, children }) => (
<section key={id} data-overview-state={id} aria-label={label} className="grid min-w-0 content-start gap-2">
<h3 className={groupLabel}>{label}</h3>
{children}
</section>
))}
</div>
)
}
// Representative Story: the common Story page (Sizes → Variants → States) with the ui_viz Button "All" boards.
// States: one matrix per treatment, rows = Default / Hover / Pressed / Disabled (standardStates, the same 4 rows for Brand;
// the live Interact button stays on the verification "Brand States"), columns = that treatment's colors in the Variants order.
// Columns follow their buttons (auto table layout). 4px cell padding gives the same 8px gap as Sizes / Variants between
// buttons, rows, the state label and the color header; the outer edge keeps none (pl-0 / last:pr-0) so the three matrices
// fit one row at 1440px. Buttons sit centered under their color and are never resized.
function StateMatrix({ appearance, states }: { appearance: ButtonAppearance; states: readonly (readonly [string, Record<string, unknown>])[] }) {
const colors = rolesFor(appearance)
return (
<div className="min-w-0 max-w-full overflow-x-auto">
<table className="border-collapse">
<thead>
<tr>
<th scope="col" className={`${groupLabel} pb-1 pl-0 pr-1 text-left`}>
<span className="sr-only">State</span>
</th>
{colors.map(([variant, color]) => (
<th scope="col" key={variant} className={`${groupLabel} px-1 pb-1 text-center last:pr-0`}>
{color}
</th>
))}
</tr>
</thead>
<tbody>
{states.map(([state, props]) => (
<tr key={state}>
<th scope="row" className={`${groupLabel} py-1 pl-0 pr-1 text-left whitespace-nowrap`}>
{state}
</th>
{colors.map(([variant, color]) => (
<td key={variant} className="p-1 text-center last:pr-0">
<Button variant={variant} appearance={appearance} {...props}>
{color}
</Button>
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
)
}
// Representative Story: the common Story page (Sizes → Variants → States).
// The former Overview button was the default Brand Medium button already shown under Sizes, so Overview is merged into Sizes.
// Named after the component, as in ui_viz. It is the only Button entry in the default sidebar, so Storybook shows Button as a single 1-depth item.
export const All: Story = {
@@ -276,29 +320,44 @@ export const All: Story = {
render: () => (
<StoryPage>
<StoryPageHeader title="Button" />
<StorySection title="Sizes">
{/* Same columns as Variants below (Brand / Standard Solid / Standard Outline): Brand and Standard Solid sizes line up with
their Variants columns and the third column stays empty. */}
<div className={`grid gap-6 ${columnsAuto(260)} min-[960px]:[grid-template-columns:minmax(0,234fr)_minmax(0,353fr)_minmax(0,271fr)]`}>
<SingleColumnBoard states={[{ id: "sizes-brand", label: "Brand", children: <CompactSizeRow appearance="brand" /> }]} />
<SingleColumnBoard states={[{ id: "sizes-solid", label: "Standard Solid", children: <CompactSizeRow appearance="solid" /> }]} />
</div>
</StorySection>
<StorySection title="Variants">
<div className={`grid gap-6 ${columnsAuto(260)} min-[960px]:[grid-template-columns:minmax(0,234fr)_minmax(0,353fr)_minmax(0,271fr)]`}>
{appearances.map(([appearance, label]) => (
<SingleColumnBoard key={appearance} states={[{ id: `roles-${appearance}`, label, children: <CompactRoleRow appearance={appearance} /> }]} />
))}
</div>
</StorySection>
{/* Sizes | Variants on one row from a 1080px preview (1280px screen with the 180px LNB), sharing the whole width in two
equal halves (never narrower than their rows). Narrower previews stack the two sections. */}
<StorySectionGrid className="grid-cols-1 items-start min-[1080px]:grid-cols-[minmax(max-content,1fr)_minmax(max-content,1fr)]">
<StorySection title="Sizes">
<GroupRows
groups={appearances.slice(0, 2).map(([appearance, label]) => ({
id: `sizes-${appearance}`,
label,
children: sizes.map(([size, sizeLabel]) => (
<Button key={size} appearance={appearance} size={size}>
{sizeLabel}
</Button>
)),
}))}
/>
</StorySection>
<StorySection title="Variants">
<GroupRows
groups={appearances.map(([appearance, label]) => ({
id: `roles-${appearance}`,
label,
children: rolesFor(appearance).map(([variant, color]) => (
<Button key={variant} variant={variant} appearance={appearance}>
{color}
</Button>
)),
}))}
/>
</StorySection>
</StorySectionGrid>
<StorySection title="States">
<div className="grid gap-6">
<SingleColumnBoard states={[{ id: "brand-states", label: "Brand", wide: true, children: <BrandStates showNote={false} /> }]} />
<div className={twoColumns}>
<SingleColumnBoard states={[{ id: "standard-solid-states", label: "Standard Solid", children: <StandardStateTable appearance="solid" compact /> }]} />
<SingleColumnBoard states={[{ id: "standard-outline-states", label: "Standard Outline", children: <StandardStateTable appearance="outline" compact /> }]} />
</div>
</div>
<GroupColumns
groups={appearances.map(([appearance, label]) => ({
id: `${appearance}-states`,
label,
children: <StateMatrix appearance={appearance} states={standardStates} />,
}))}
/>
</StorySection>
</StoryPage>
),
src/components/combobox.stories.tsx
+51 -22
View File
@@ -22,9 +22,10 @@ const longOptions: ComboboxOption[] = [
]
// 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 }) {
// `fill` lets the field take its grid column (representative page); the verification Stories keep the 320px field.
function Field({ label, id, disabled, fill, children }: { label: string; id: string; disabled?: boolean; fill?: boolean; children: ReactNode }) {
return (
<div className="grid max-w-xs gap-2">
<div className={fill ? "grid gap-2" : "grid max-w-xs gap-2"}>
<label htmlFor={id} className={`justify-self-start text-sm font-medium ${disabled ? "text-muted-foreground opacity-60" : "text-foreground"}`}>
{label}
</label>
@@ -33,31 +34,36 @@ function Field({ label, id, disabled, children }: { label: string; id: string; d
)
}
function Empty() {
// Representative page (2026-11-12, same rule as Input / Select): with `state`, the state name takes the field Label slot (no
// repeated field Label under a separate group title) and the trigger keeps the field meaning in its accessible name, which also
// contains the visible state name (Label in Name), e.g. "프레임워크 (Selected)". Without `state` the verification Stories are unchanged.
const stateName = (state: string | undefined, field: string) => (state ? `${field} (${state})` : undefined)
function Empty({ state }: { state?: string }) {
return (
<Field label="프레임워크" id="cb-empty">
<Combobox id="cb-empty" options={frameworks} placeholder="프레임워크 선택" searchPlaceholder="프레임워크 검색..." />
<Field label={state ?? "프레임워크"} id="cb-empty" fill={state !== undefined}>
<Combobox id="cb-empty" aria-label={stateName(state, "프레임워크")} options={frameworks} placeholder="프레임워크 선택" searchPlaceholder="프레임워크 검색..." />
</Field>
)
}
// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
function Controlled({ showValue = true }: { showValue?: boolean }) {
function Controlled({ showValue = true, state }: { showValue?: boolean; state?: string }) {
const [value, setValue] = useState("nuxt")
return (
<div className="grid gap-2">
<Field label="선택됨 (controlled)" id="cb-controlled">
<Combobox id="cb-controlled" controlled options={frameworks} value={value} onValueChange={setValue} />
<Field label={state ?? "선택됨 (controlled)"} id="cb-controlled" fill={state !== undefined}>
<Combobox id="cb-controlled" aria-label={stateName(state, "프레임워크")} controlled options={frameworks} value={value} onValueChange={setValue} />
</Field>
{showValue ? <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${value}`}</span> : null}
</div>
)
}
function Medium() {
function Medium({ state }: { state?: string }) {
return (
<Field label="Medium" id="cb-medium">
<Combobox id="cb-medium" size="medium" options={frameworks} defaultValue="astro" />
<Field label={state ?? "Medium"} id="cb-medium" fill={state !== undefined}>
<Combobox id="cb-medium" aria-label={stateName(state, "프레임워크")} size="medium" options={frameworks} defaultValue="astro" />
</Field>
)
}
@@ -70,10 +76,10 @@ function LongLabel() {
)
}
function Disabled() {
function Disabled({ state }: { state?: string }) {
return (
<Field label="비활성" id="cb-disabled" disabled>
<Combobox id="cb-disabled" options={frameworks} defaultValue="next" disabled />
<Field label={state ?? "비활성"} id="cb-disabled" disabled fill={state !== undefined}>
<Combobox id="cb-disabled" aria-label={stateName(state, "프레임워크")} options={frameworks} defaultValue="next" disabled />
</Field>
)
}
@@ -111,6 +117,25 @@ const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?:
</div>
)
// Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px
// within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name.
const fieldColumns =
"grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]"
function FieldRow({ fields }: { fields: { id: string; render: ReactNode }[] }) {
return (
<div className="sb-page-indent">
<div className={fieldColumns}>
{fields.map(({ id, render }) => (
<div key={id} className="min-w-0" data-overview-state={id}>
{render}
</div>
))}
</div>
</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
@@ -124,16 +149,20 @@ export const All: Story = {
<StoryPage>
<StoryPageHeader title="Combobox" />
<StorySection title="Sizes">
<Grid>
<Cell id="empty" label="Default"><Empty /></Cell>
<Cell id="medium" label="Medium"><Medium /></Cell>
</Grid>
<FieldRow
fields={[
{ id: "empty", render: <Empty state="Default" /> },
{ id: "medium", render: <Medium state="Medium" /> },
]}
/>
</StorySection>
<StorySection title="States">
<Grid>
<Cell id="controlled" label="Selected"><Controlled showValue={false} /></Cell>
<Cell id="disabled" label="Disabled"><Disabled /></Cell>
</Grid>
<FieldRow
fields={[
{ id: "controlled", render: <Controlled showValue={false} state="Selected" /> },
{ id: "disabled", render: <Disabled state="Disabled" /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<Grid>
src/components/date-picker.stories.tsx
+69 -29
View File
@@ -13,9 +13,10 @@ const today = new Date(2026, 9, 2)
const calendarProps = { today, startMonth: new Date(2026, 0), endMonth: new Date(2027, 11) }
// 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 }) {
// `fill` lets the field take its grid column (representative page); the verification Stories keep the 320px field.
function Field({ label, id, disabled, fill, children }: { label: string; id: string; disabled?: boolean; fill?: boolean; children: ReactNode }) {
return (
<div className="grid max-w-xs gap-2">
<div className={fill ? "grid gap-2" : "grid max-w-xs gap-2"}>
<label htmlFor={id} className={`justify-self-start text-sm font-medium ${disabled ? "text-muted-foreground opacity-60" : "text-foreground"}`}>
{label}
</label>
@@ -24,18 +25,23 @@ function Field({ label, id, disabled, children }: { label: string; id: string; d
)
}
function Empty() {
// Representative page (2026-11-12, same rule as Input / Select): with `state`, the state name takes the field Label slot (no
// repeated field Label under a separate group title) and the trigger keeps the field meaning in its accessible name, which also
// contains the visible state name (Label in Name), e.g. "시작일 (Selected)". Without `state` the verification Stories are unchanged.
const stateName = (state: string | undefined, field: string) => (state ? `${field} (${state})` : undefined)
function Empty({ state }: { state?: string }) {
return (
<Field label="시작일" id="dp-empty">
<DatePicker id="dp-empty" calendarProps={calendarProps} />
<Field label={state ?? "시작일"} id="dp-empty" fill={state !== undefined}>
<DatePicker id="dp-empty" aria-label={stateName(state, "시작일")} calendarProps={calendarProps} />
</Field>
)
}
function Selected() {
function Selected({ state }: { state?: string }) {
return (
<Field label="시작일" id="dp-selected">
<DatePicker id="dp-selected" defaultValue={new Date(2026, 9, 6)} calendarProps={calendarProps} />
<Field label={state ?? "시작일"} id="dp-selected" fill={state !== undefined}>
<DatePicker id="dp-selected" aria-label={stateName(state, "시작일")} defaultValue={new Date(2026, 9, 6)} calendarProps={calendarProps} />
</Field>
)
}
@@ -57,41 +63,52 @@ function CustomFormat() {
}
// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
function Controlled({ showValue = true }: { showValue?: boolean }) {
function Controlled({ showValue = true, state }: { showValue?: boolean; state?: string }) {
const [date, setDate] = useState<Date | undefined>()
return (
<div className="grid gap-2">
<Field label="마감일 (controlled)" id="dp-controlled">
<DatePicker id="dp-controlled" controlled value={date} onValueChange={setDate} calendarProps={calendarProps} />
<Field label={state ?? "마감일 (controlled)"} id="dp-controlled" fill={state !== undefined}>
<DatePicker id="dp-controlled" aria-label={stateName(state, "마감일")} controlled value={date} onValueChange={setDate} calendarProps={calendarProps} />
</Field>
{showValue ? <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${date ? date.toLocaleDateString("ko-KR") : "undefined"}`}</span> : null}
</div>
)
}
function Medium() {
function Medium({ state }: { state?: string }) {
return (
<Field label="Medium" id="dp-medium">
<DatePicker id="dp-medium" size="medium" defaultValue={new Date(2026, 9, 15)} calendarProps={calendarProps} />
<Field label={state ?? "Medium"} id="dp-medium" fill={state !== undefined}>
<DatePicker id="dp-medium" aria-label={stateName(state, "날짜")} size="medium" defaultValue={new Date(2026, 9, 15)} calendarProps={calendarProps} />
</Field>
)
}
function DisabledDates() {
// With `state`, the rule that was the Label stays as helper text (12/18/400 secondary, 8px below the trigger, as Input's Helper)
// and is linked to the trigger with aria-describedby.
const disabledDatesNote = "5일 이전과 일요일은 선택 불가"
function DisabledDates({ state }: { state?: string }) {
return (
<Field label="5일 이전과 일요일은 선택 불가" id="dp-disabled-dates">
<Field label={state ?? disabledDatesNote} id="dp-disabled-dates" fill={state !== undefined}>
<DatePicker
id="dp-disabled-dates"
aria-label={stateName(state, "날짜")}
aria-describedby={state ? "dp-disabled-dates-message" : undefined}
calendarProps={{ ...calendarProps, disabled: [{ before: new Date(2026, 9, 5) }, { dayOfWeek: [0] }] }}
/>
{state ? (
<p id="dp-disabled-dates-message" className="m-0 text-xs leading-[18px] text-muted-foreground">
{disabledDatesNote}
</p>
) : null}
</Field>
)
}
function Disabled() {
function Disabled({ state }: { state?: string }) {
return (
<Field label="비활성" id="dp-disabled" disabled>
<DatePicker id="dp-disabled" disabled defaultValue={new Date(2026, 9, 15)} />
<Field label={state ?? "비활성"} id="dp-disabled" disabled fill={state !== undefined}>
<DatePicker id="dp-disabled" aria-label={stateName(state, "날짜")} disabled defaultValue={new Date(2026, 9, 15)} />
</Field>
)
}
@@ -107,6 +124,25 @@ const Cell = ({ id, label, children }: { id: string; label: string; children: Re
</div>
)
// Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px
// within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name.
const fieldColumns =
"grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]"
function FieldRow({ fields }: { fields: { id: string; render: ReactNode }[] }) {
return (
<div className="sb-page-indent">
<div className={fieldColumns}>
{fields.map(({ id, render }) => (
<div key={id} className="min-w-0" data-overview-state={id}>
{render}
</div>
))}
</div>
</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>
@@ -119,18 +155,22 @@ export const All: Story = {
<StoryPage>
<StoryPageHeader title="Date Picker" />
<StorySection title="Sizes">
<Grid>
<Cell id="empty" label="Default"><Empty /></Cell>
<Cell id="medium" label="Medium"><Medium /></Cell>
</Grid>
<FieldRow
fields={[
{ id: "empty", render: <Empty state="Default" /> },
{ id: "medium", render: <Medium state="Medium" /> },
]}
/>
</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>
<FieldRow
fields={[
{ id: "selected", render: <Selected state="Selected" /> },
{ id: "controlled", render: <Controlled showValue={false} state="Controlled" /> },
{ id: "disabled-dates", render: <DisabledDates state="Disabled dates" /> },
{ id: "disabled", render: <Disabled state="Disabled" /> },
]}
/>
</StorySection>
<StorySection title="Usage">
<Grid>
src/components/input.stories.tsx
+30 -10
View File
@@ -1,7 +1,6 @@
import { useId, type ComponentProps, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Input, type InputSize } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Story structure follows ui_viz (implementations/web/storybook/Input.stories.jsx and InputSizes.stories.jsx):
@@ -99,6 +98,27 @@ function SizeComparison({ showSpec = true }: { showSpec?: boolean }) {
)
}
// Representative page (2026-11-12): States and Validation use the Sizes layout. The state name sits in the field Label slot
// (no repeated "Project name" and no separate group title); the input keeps a meaningful accessible name through aria-label,
// which also contains the visible state name (Label in Name). Same columns as SizeComparison: up to 3 tracks of at least
// 240px within 1120px, so Validation's 2 fields line up with the first 2 States fields and narrower widths drop to 2 / 1.
const fieldColumns =
"grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]"
function FieldRow({ fields }: { fields: { id: string; label: string; props: ComponentProps<typeof Specimen> }[] }) {
return (
<div className="sb-page-indent">
<div className={fieldColumns}>
{fields.map(({ id, label, props }) => (
<div key={id} className="min-w-0" data-overview-state={id}>
<Specimen label={label} aria-label={`Project name (${label})`} {...props} />
</div>
))}
</div>
</div>
)
}
const readonlyNote =
"Readonly는 입력 상자 없이 확정된 텍스트만 표시합니다. size와 무관하게 Large 기준 typography와 42px 정렬 높이를 유지하며, Disabled처럼 흐리게 표시하지 않습니다."
@@ -140,19 +160,19 @@ export const All: Story = {
</div>
</StorySection>
<StorySection title="States">
<StateBoard
states={[
{ id: "focus", label: "Focus", children: <Specimen size="medium" placeholder={placeholder} /> },
{ id: "disabled", label: "Disabled", children: <Specimen disabled defaultValue="Unavailable project" /> },
{ id: "readonly", label: "Readonly", children: <Specimen readOnly value="Confirmed project" /> },
<FieldRow
fields={[
{ id: "focus", label: "Focus", props: { size: "medium", placeholder } },
{ id: "disabled", label: "Disabled", props: { disabled: true, defaultValue: "Unavailable project" } },
{ id: "readonly", label: "Readonly", props: { readOnly: true, value: "Confirmed project" } },
]}
/>
</StorySection>
<StorySection title="Validation">
<StateBoard
states={[
{ id: "error", label: "Error", children: <Specimen size="medium" error defaultValue="Invalid value" /> },
{ id: "error-message", label: "Error Message", children: <Specimen size="medium" placeholder={placeholder} error message="프로젝트명을 입력하세요." /> },
<FieldRow
fields={[
{ id: "error", label: "Error", props: { size: "medium", error: true, defaultValue: "Invalid value" } },
{ id: "error-message", label: "Error Message", props: { size: "medium", placeholder, error: true, message: "프로젝트명을 입력하세요." } },
]}
/>
</StorySection>
src/components/select.stories.tsx
+37 -28
View File
@@ -1,7 +1,6 @@
import { useId, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type SelectSize } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Story structure follows ui_viz (implementations/web/storybook/Select.stories.jsx and SelectSizes.stories.jsx):
@@ -37,10 +36,11 @@ type SpecimenProps = {
defaultOpen?: boolean
disabled?: boolean
"aria-invalid"?: boolean
"aria-label"?: string
options?: ReadonlyArray<{ value: string; label: string }>
}
function SelectSpecimen({ listSize, label = "Select", placeholder = "Choose a status", size, defaultValue, defaultOpen, disabled, "aria-invalid": ariaInvalid, options = statusOptions }: SpecimenProps) {
function SelectSpecimen({ listSize, label = "Select", placeholder = "Choose a status", size, defaultValue, defaultOpen, disabled, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, options = statusOptions }: SpecimenProps) {
const id = useId()
// A Label next to an enabled Select uses the default text color; disabled keeps the secondary color at 0.6.
const labelTone = disabled ? "text-muted-foreground opacity-60" : "text-foreground"
@@ -50,7 +50,7 @@ function SelectSpecimen({ listSize, label = "Select", placeholder = "Choose a st
{label}
</label>
<Select defaultValue={defaultValue} defaultOpen={defaultOpen} disabled={disabled}>
<SelectTrigger id={id} size={size} aria-invalid={ariaInvalid} className="w-full">
<SelectTrigger id={id} size={size} aria-invalid={ariaInvalid} aria-label={ariaLabel} className="w-full">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent {...(listSize ? { "data-size": listSize } : {})}>
@@ -111,23 +111,34 @@ function SizeComparison({ showSpec = true }: { showSpec?: boolean }) {
)
}
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), shrinking to
// fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's
// auto-fill grid cannot leave an empty track. Full class names are listed so Tailwind can see them.
const specimenColumns = {
3: "min-[1000px]:grid-cols-3",
} as const
// Representative-page layout (Storybook presentation only). 2026-11-12, same rule and columns as Input: the state name sits in
// the field Label slot (no repeated "Status" under a separate group title); the trigger keeps a meaningful accessible name
// through aria-label, which also contains the visible state name (Label in Name). Sizes, States and Validation share up to 3
// tracks of at least 240px within 1120px, so every Select has the Input field width and narrower widths drop to 2 / 1 columns.
// The grid takes the common section indent (.sb-page-indent).
const fieldColumns =
"grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]"
function SpecimenGrid({ states, columns }: { states: BoardState[]; columns: keyof typeof specimenColumns }) {
function FieldGrid({ children }: { children: ReactNode }) {
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 className="sb-page-indent">
<div className={fieldColumns}>{children}</div>
</div>
)
}
function FieldRow({ fields }: { fields: { id: string; label: string; props: SpecimenProps }[] }) {
return (
<FieldGrid>
{fields.map(({ id, label, props }) => (
<div key={id} className="min-w-0" data-overview-state={id}>
<SelectSpecimen size="medium" label={label} aria-label={`Status (${label})`} {...props} />
</div>
))}
</FieldGrid>
)
}
function DisabledStates() {
return (
<div className="grid max-w-[480px] gap-6">
@@ -177,30 +188,28 @@ export const All: Story = {
<StoryPageHeader title="Select" />
<StorySection title="Sizes">
{/* Same 3-column track as States / Validation: Medium and Large take the first two columns, the third stays empty.
The grid takes the same common indent as the group boards (.sb-page-indent); Medium / Large stay field Labels. */}
<div className="grid items-start gap-6 sb-page-indent [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
Medium / Large stay field Labels. */}
<FieldGrid>
{sizes.map((spec) => (
<SizeCard key={spec.size} spec={spec} showSpec={false} />
))}
</div>
</FieldGrid>
</StorySection>
<StorySection title="States">
<SpecimenGrid
columns={3}
states={[
{ id: "selected", label: "Selected", children: <SelectSpecimen size="medium" label="Status" defaultValue="active" /> },
{ id: "disabled", label: "Disabled", children: <SelectSpecimen size="medium" label="Status" defaultValue="active" disabled /> },
{ id: "disabled-placeholder", label: "Disabled · Placeholder", children: <SelectSpecimen size="medium" label="Status" disabled /> },
<FieldRow
fields={[
{ id: "selected", label: "Selected", props: { defaultValue: "active" } },
{ id: "disabled", label: "Disabled", props: { defaultValue: "active", disabled: true } },
{ id: "disabled-placeholder", label: "Disabled · Placeholder", props: { disabled: true } },
]}
/>
</StorySection>
<StorySection title="Validation">
{/* Same 3-column track as States: the two specimens take the first two columns (same Select width) and the third stays empty. */}
<SpecimenGrid
columns={3}
states={[
{ id: "invalid", label: "Invalid", children: <SelectSpecimen size="medium" aria-invalid label="Status" defaultValue="active" /> },
{ id: "invalid-disabled", label: "Invalid · Disabled", children: <SelectSpecimen size="medium" aria-invalid disabled label="Status" /> },
<FieldRow
fields={[
{ id: "invalid", label: "Invalid", props: { "aria-invalid": true, defaultValue: "active" } },
{ id: "invalid-disabled", label: "Invalid · Disabled", props: { "aria-invalid": true, disabled: true } },
]}
/>
</StorySection>
src/components/textarea.stories.tsx
+24 -26
View File
@@ -1,7 +1,6 @@
import { useId, type ComponentProps, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Textarea } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Story structure follows Input: one representative "Textarea" Story shows every state on one page; the same specimens
@@ -49,19 +48,20 @@ function Specimen({
)
}
// Representative-page layout (Storybook presentation only). StateBoard's own auto-fill grid cannot give equal columns that
// fill a cell, so each specimen sits in its own single-column StateBoard (min larger than any column) inside this grid.
// Full class names are listed so Tailwind can see them.
const specimenColumns = {
4: "min-[1000px]:grid-cols-4",
} as const
function SpecimenGrid({ states, columns }: { states: BoardState[]; columns: keyof typeof specimenColumns }) {
// Representative-page layout (Storybook presentation only). 2026-11-12, same rule as Input: the state name sits in the field
// Label slot (no repeated "Description" under a separate group title); the textarea keeps a meaningful accessible name through
// aria-label, which also contains the visible state name (Label in Name). PC (iframe width 1000px and up): 4 equal columns;
// below that the columns shrink to fit (220px minimum, down to 1). The grid takes the common section indent (.sb-page-indent).
function FieldGrid({ fields }: { fields: { id: string; label: string; props: ComponentProps<typeof Specimen> }[] }) {
return (
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))] ${specimenColumns[columns]}`}>
{states.map((state) => (
<StateBoard key={state.id} min={10000} states={[state]} />
))}
<div className="sb-page-indent">
<div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))] min-[1000px]:grid-cols-4">
{fields.map(({ id, label, props }) => (
<div key={id} className="min-w-0" data-overview-state={id}>
<Specimen label={label} aria-label={`Description (${label})`} {...props} />
</div>
))}
</div>
</div>
)
}
@@ -106,23 +106,21 @@ export const All: Story = {
{/* PC (iframe width 1000px and up): States in 4 equal columns, Validation's 2 specimens on the same column width.
Below that the columns shrink to fit (220px minimum, down to 1). Multiline and Resize live in their own hidden Stories. */}
<StorySection title="States">
<SpecimenGrid
columns={4}
states={[
{ id: "default", label: "Default", children: <Specimen placeholder={placeholder} /> },
{ id: "focus", label: "Focus", children: <Specimen placeholder={placeholder} /> },
{ id: "readonly", label: "Readonly", children: <Specimen readOnly defaultValue="Confirmed description" /> },
{ id: "disabled", label: "Disabled", children: <Specimen disabled defaultValue="Unavailable description" /> },
<FieldGrid
fields={[
{ id: "default", label: "Default", props: { placeholder } },
{ id: "focus", label: "Focus", props: { placeholder } },
{ id: "readonly", label: "Readonly", props: { readOnly: true, defaultValue: "Confirmed description" } },
{ id: "disabled", label: "Disabled", props: { disabled: true, defaultValue: "Unavailable description" } },
]}
/>
</StorySection>
<StorySection title="Validation">
{/* Same 4-column track as States, so the two specimens keep the States width instead of stretching across the page. */}
<SpecimenGrid
columns={4}
states={[
{ id: "error", label: "Error", children: <Specimen error defaultValue="Invalid value" /> },
{ id: "error-message", label: "Error Message", children: <Specimen error message="설명을 입력하세요." /> },
{/* Same 4-column track as States, so the two fields keep the States width instead of stretching across the page. */}
<FieldGrid
fields={[
{ id: "error", label: "Error", props: { error: true, defaultValue: "Invalid value" } },
{ id: "error-message", label: "Error Message", props: { error: true, message: "설명을 입력하세요." } },
]}
/>
</StorySection>
src/components/toggle.stories.tsx
+12 -8
View File
@@ -6,10 +6,11 @@ import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/co
// Toggle is a persistent pressed-state control. The representative Story shows each state with real, clickable toggles; the same
// specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`.
// 2026-11-12: toggles side by side keep the Button Story's 8px gap (was 12px).
function OffOn() {
return (
<div className="flex flex-wrap items-center gap-3">
<div className="flex flex-wrap items-center gap-2">
<Toggle>Off</Toggle>
<Toggle defaultPressed>On</Toggle>
<Toggle variant="outline">Outline off</Toggle>
@@ -22,7 +23,7 @@ function OffOn() {
function WithIcon() {
return (
<div className="flex flex-wrap items-center gap-3">
<div className="flex flex-wrap items-center gap-2">
<Toggle aria-label="굵게">
<BoldIcon />
</Toggle>
@@ -43,7 +44,7 @@ function Sizes() {
// Same common indent as the group boards of the page (.sb-page-indent).
<div className="grid items-start gap-6 sb-page-indent [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
{(["sm", "default", "lg"] as const).map((size) => (
<div key={size} data-toggle-size={size} className="flex flex-wrap items-center gap-3">
<div key={size} data-toggle-size={size} className="flex flex-wrap items-center gap-2">
<Toggle size={size} variant="outline" aria-label={`${size} icon-only`}><StarIcon /></Toggle>
<Toggle size={size} variant="outline"><StarIcon />즐겨찾기</Toggle>
<Toggle size={size} variant="outline">{size}</Toggle>
@@ -55,7 +56,7 @@ function Sizes() {
function Disabled() {
return (
<div className="flex flex-wrap items-center gap-3">
<div className="flex flex-wrap items-center gap-2">
<Toggle disabled>Disabled off</Toggle>
<Toggle disabled defaultPressed>
Disabled on
@@ -90,15 +91,17 @@ function SpecimenGrid({ states }: { states: BoardState[] }) {
}
// Representative Story: the common Story page; the sections group the same specimens.
// Overview is renamed Variants. On PC (iframe width 1000px and up) Variants and States use the first two of the same 3 equal
// columns as the rows below, and the third column stays empty; below that they stack.
// Overview is renamed Variants. On PC (iframe width 1000px and up) Variants and States share the whole width in 2 columns,
// in proportion to the width their one-line row needs (324 / 234px incl. the 16px indent), never narrower than that row
// (max-content), so the 4 Variants toggles stay on one line (2026-11-12; they wrapped in the former 3 equal columns at a
// 1100px preview). Below that the sections stack and the toggle rows wrap naturally.
export const All: Story = {
name: "Toggle",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Toggle" />
<StorySectionGrid className="grid-cols-1 min-[1000px]:grid-cols-3">
<StorySectionGrid className="grid-cols-1 min-[1000px]:grid-cols-[minmax(max-content,324fr)_minmax(max-content,234fr)]">
<StorySection title="Variants">
<StateBoard min={10000} states={[specimen("offon")]} />
</StorySection>
@@ -109,7 +112,8 @@ export const All: Story = {
<StorySection title="단독 · 연결 그룹">
<SpecimenGrid
states={[
{ id: "single-toggle", label: "단독", children: <Toggle variant="outline">알림</Toggle> },
// The flex wrapper keeps the Toggle at its own width; as a direct grid child of the board it stretched to the column.
{ id: "single-toggle", label: "단독", children: <div className="flex"><Toggle variant="outline">알림</Toggle></div> },
{ id: "group-single", label: "연결 그룹 · 단일 선택", children: <ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="정렬"><ToggleGroupItem value="left">왼쪽</ToggleGroupItem><ToggleGroupItem value="center">가운데</ToggleGroupItem><ToggleGroupItem value="right">오른쪽</ToggleGroupItem></ToggleGroup> },
{ id: "group-multiple", label: "연결 그룹 · 다중 선택", children: <ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="글자 스타일"><ToggleGroupItem value="bold">굵게</ToggleGroupItem><ToggleGroupItem value="italic">기울임</ToggleGroupItem></ToggleGroup> },
]}