113 lines
4.4 KiB
TypeScript
113 lines
4.4 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Input, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Label has no standalone ui_viz spec. Its typography and color are the Field Label role owned by Input / Textarea
|
|
// (14/20/500, color.fg.secondary). Required star and messages are composed here as a consumer would (not part of Label).
|
|
|
|
const meta = {
|
|
title: "Components/Form/Label",
|
|
component: Label,
|
|
parameters: {
|
|
layout: "padded",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"Field Label 14/20/500, 색 color.fg.secondary (ui_viz input.md §9, §10). Radix Label의 htmlFor·클릭 시 컨트롤 focus 동작을 유지합니다. Required 별표·문구는 Label이 아닌 소비 조합입니다.",
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Label>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Label",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
kicker={STORY_KICKER.components}
|
|
title="Label"
|
|
description="Label은 항목명이고 Input은 입력칸입니다. Field Label 14/20/500을 쓰며, htmlFor로 연결하면 라벨 클릭 시 해당 Input이나 Select로 초점이 이동합니다."
|
|
/>
|
|
<StorySection title="Overview">
|
|
<StateBoard
|
|
states={[
|
|
{
|
|
id: "default",
|
|
label: "Default · htmlFor",
|
|
noteAfter: true,
|
|
note: "라벨을 클릭하면 연결된 입력으로 focus가 이동합니다.",
|
|
children: (
|
|
<div className="grid max-w-sm gap-2">
|
|
<Label htmlFor="label-default">Project name</Label>
|
|
<Input id="label-default" size="medium" placeholder="Enter a project name" />
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="States">
|
|
<StateBoard
|
|
states={[
|
|
{
|
|
id: "disabled",
|
|
label: "Disabled (peer-disabled, shadcn 기본)",
|
|
noteAfter: true,
|
|
note: "Disabled 연동은 ui_viz Label에 정의가 없어 shadcn 기본(peer-disabled)을 유지합니다.",
|
|
children: (
|
|
<div className="grid max-w-sm gap-2">
|
|
<Input id="label-disabled" size="medium" disabled defaultValue="Unavailable" className="peer order-2" />
|
|
<Label htmlFor="label-disabled" className="order-1">
|
|
Project name
|
|
</Label>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Usage" description="Required 별표는 Label이 아닌 소비 조합입니다. 긴 라벨은 줄바꿈됩니다.">
|
|
<div className="mb-4 grid max-w-sm gap-2">
|
|
<Label htmlFor="label-select">부서 선택</Label>
|
|
<Select><SelectTrigger id="label-select" size="medium"><SelectValue placeholder="부서를 선택하세요" /></SelectTrigger>
|
|
<SelectContent><SelectItem value="design">디자인</SelectItem><SelectItem value="engineering">개발</SelectItem></SelectContent>
|
|
</Select>
|
|
</div>
|
|
<StateBoard
|
|
states={[
|
|
{
|
|
id: "required",
|
|
label: "Required (소비 조합)",
|
|
children: (
|
|
<div className="grid max-w-sm gap-2">
|
|
<Label htmlFor="label-required">
|
|
Project name
|
|
<span aria-hidden="true" className="text-destructive">
|
|
*
|
|
</span>
|
|
</Label>
|
|
<Input id="label-required" size="medium" required />
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "long",
|
|
label: "Long Label",
|
|
children: (
|
|
<div className="grid max-w-[220px] gap-2">
|
|
<Label htmlFor="label-long">A very long label text that wraps to multiple lines</Label>
|
|
<Input id="label-long" size="medium" />
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|