HMDesign/src/components/label.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite"
import { Input, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { 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).

// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility like
// `text-foreground` loses to it; overriding the Label's own token on the element works. The Disabled example keeps the
// shared secondary color (at 0.5 through `peer-disabled`). State titles are untouched.
const fieldLabel = "[--hm-label-text:var(--foreground)]"

// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking to
// fit below that (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so
// StateBoard's auto-fill grid cannot leave an empty or stretched track. A section with fewer than 3 specimens keeps the
// same column width and leaves the remaining tracks empty.
function SpecimenGrid({ states }: { states: BoardState[] }) {
  return (
    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
      {states.map((state) => (
        <StateBoard key={state.id} min={10000} states={[state]} />
      ))}
    </div>
  )
}

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 title="Label" />
      <StorySection title="States">
        <SpecimenGrid
          states={[
            {
              id: "default",
              label: "Default",
              children: (
                <div className="grid max-w-sm gap-2">
                  <Label htmlFor="label-default" className={fieldLabel}>Project name</Label>
                  <Input id="label-default" size="medium" placeholder="Enter a project name" />
                </div>
              ),
            },
            {
              id: "disabled",
              label: "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">
        <SpecimenGrid
          states={[
            {
              id: "select",
              label: "Select",
              children: (
                <div className="grid max-w-sm gap-2">
                  <Label htmlFor="label-select" className={fieldLabel}>부서 선택</Label>
                  <Select><SelectTrigger id="label-select" size="medium"><SelectValue placeholder="부서를 선택하세요" /></SelectTrigger>
                    <SelectContent><SelectItem value="design">디자인</SelectItem><SelectItem value="engineering">개발</SelectItem></SelectContent>
                  </Select>
                </div>
              ),
            },
            {
              id: "required",
              label: "Required",
              children: (
                <div className="grid max-w-sm gap-2">
                  <Label htmlFor="label-required" className={fieldLabel}>
                    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" className={fieldLabel}>A very long label text that wraps to multiple lines</Label>
                  <Input id="label-long" size="medium" />
                </div>
              ),
            },
          ]}
        />
      </StorySection>
    </StoryPage>
  ),
}