Initial commit: HMDesignSystem baseline
This commit is contained in:
shkim4 committed
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,156 @@
|
||||
import { useState, type ReactNode } from "react"
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import { Combobox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type ComboboxOption } from "@hm-design/ui"
|
||||
import { StateBoard } from "@/components/story-board"
|
||||
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
||||
|
||||
// Combobox is a Popover + Command composition (search + single choice); Select stays for short lists without search.
|
||||
// The representative Story shows real comboboxes; the same specimens also exist as Stories tagged `verification` (hidden from the
|
||||
// sidebar). The Label is Story composition.
|
||||
|
||||
const frameworks: ComboboxOption[] = [
|
||||
{ value: "next", label: "Next.js" },
|
||||
{ value: "sveltekit", label: "SvelteKit" },
|
||||
{ value: "nuxt", label: "Nuxt" },
|
||||
{ value: "remix", label: "Remix", disabled: true },
|
||||
{ value: "astro", label: "Astro" },
|
||||
]
|
||||
|
||||
const longOptions: ComboboxOption[] = [
|
||||
{ value: "a", label: "긴 옵션 이름은 한 줄에서 말줄임으로 잘리고 trigger 폭을 넘지 않습니다. 끝까지 읽을 수 있어야 하면 폭을 넓히세요" },
|
||||
{ value: "b", label: "짧은 옵션" },
|
||||
]
|
||||
|
||||
function Field({ label, id, children }: { label: string; id: string; 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}
|
||||
</label>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Empty() {
|
||||
return (
|
||||
<Field label="프레임워크" id="cb-empty">
|
||||
<Combobox id="cb-empty" options={frameworks} placeholder="프레임워크 선택" searchPlaceholder="프레임워크 검색..." />
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
function Controlled() {
|
||||
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>
|
||||
<span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${value}`}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Medium() {
|
||||
return (
|
||||
<Field label="Medium" id="cb-medium">
|
||||
<Combobox id="cb-medium" size="medium" options={frameworks} defaultValue="astro" />
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
function LongLabel() {
|
||||
return (
|
||||
<Field label="긴 옵션" id="cb-long">
|
||||
<Combobox id="cb-long" options={longOptions} defaultValue="a" />
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
function Disabled() {
|
||||
return (
|
||||
<Field label="비활성" id="cb-disabled">
|
||||
<Combobox id="cb-disabled" options={frameworks} defaultValue="next" disabled />
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectComparison() {
|
||||
return (
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
{(["medium", "large"] as const).map((size) => (
|
||||
<div key={size} className="grid content-start gap-3" data-comparison-size={size}>
|
||||
<Field label={`Select · ${size}`} id={`compare-select-${size}`}>
|
||||
<Select defaultValue="nuxt">
|
||||
<SelectTrigger id={`compare-select-${size}`} size={size} className="w-full"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{frameworks.map((option) => <SelectItem key={option.value} value={option.value} disabled={option.disabled}>{option.label}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label={`Combobox · ${size}`} id={`compare-combobox-${size}`}>
|
||||
<Combobox id={`compare-combobox-${size}`} size={size} options={frameworks} defaultValue="nuxt" />
|
||||
</Field>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const sections = [
|
||||
{ id: "empty", label: "Empty placeholder + search (Remix is a disabled option)", node: <Empty /> },
|
||||
{ id: "controlled", label: "Selected, controlled", node: <Controlled /> },
|
||||
{ id: "medium", label: "Medium size", node: <Medium /> },
|
||||
{ id: "long", label: "Long option", node: <LongLabel /> },
|
||||
{ id: "disabled", label: "Disabled", node: <Disabled /> },
|
||||
]
|
||||
|
||||
// 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",
|
||||
parameters: { layout: "fullscreen", controls: { disable: true } },
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader
|
||||
kicker={STORY_KICKER.components}
|
||||
title="Combobox"
|
||||
description="검색해서 하나를 고르는 Popover + Command 조합입니다. 검색이 필요 없는 짧은 목록은 Select를 씁니다."
|
||||
/>
|
||||
<StorySection title="Overview">{board("empty")}</StorySection>
|
||||
<StorySection title="Sizes" description="size를 생략하면 Large입니다. 같은 size의 Select와 나란히 비교합니다.">
|
||||
<StateBoard
|
||||
min={320}
|
||||
states={[
|
||||
...sections.filter((s) => s.id === "medium").map((s) => ({ id: s.id, label: s.label, children: s.node })),
|
||||
{ id: "select-comparison", label: "Select / Combobox visual comparison", wide: true, children: <SelectComparison /> },
|
||||
]}
|
||||
/>
|
||||
</StorySection>
|
||||
<StorySection title="States">{board("controlled", "disabled")}</StorySection>
|
||||
<StorySection title="Usage">{board("long")}</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
export const EmptyCombobox: Story = { tags: ["verification"], name: "Empty", render: () => <Empty /> }
|
||||
export const ControlledCombobox: Story = { tags: ["verification"], name: "Controlled", render: () => <Controlled /> }
|
||||
export const LongOption: Story = { tags: ["verification"], name: "Long Option", render: () => <LongLabel /> }
|
||||
|
||||
export const OpenBottom: Story = {
|
||||
tags: ["verification"],
|
||||
render: () => <div style={{ width: 280, maxWidth: "100%", minHeight: "calc(100dvh - 32px)" }}><Controlled /></div>,
|
||||
}
|
||||
export const OpenTop: Story = {
|
||||
tags: ["verification"],
|
||||
render: () => <div style={{ width: 280, maxWidth: "100%", minHeight: "calc(100dvh - 32px)", display: "grid", alignItems: "end" }}><Controlled /></div>,
|
||||
}
|
||||
Reference in new issue
Block a user