Initial commit: HMDesignSystem baseline

src/components/badge.stories.tsx

@@ -0,0 +1,106 @@
+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 { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const variants = ["default", "secondary", "destructive", "outline"] as const
+
+const meta = {
+  title: "Components/Data & Display/Badge",
+  component: Badge,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 12/18/500, padding 2/8, radius 4, border 1px. variant는 현재 HM Theme에 의미가 있는 default(primary), secondary(neutral), destructive, outline만 둡니다. success·warning·information은 상태 색이 정해지지 않아 만들지 않았습니다. Button variant를 재사용하지 않는 별도 컴포넌트입니다.",
+      },
+    },
+  },
+  argTypes: { variant: { control: "inline-radio", options: variants } },
+} satisfies Meta<typeof Badge>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Badge",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Badge"
+        description="상태나 분류를 짧게 표시하는 라벨입니다. Button variant를 재사용하지 않는 별도 컴포넌트입니다."
+      />
+      <StorySection title="Overview" description="variant를 생략한 기본 Badge(primary)입니다.">
+        <Badge>Badge</Badge>
+      </StorySection>
+      <StorySection title="Variants" description="default(primary) / secondary(neutral) / destructive / outline.">
+        <StateBoard
+          min={280}
+          states={[
+            {
+              id: "variants",
+              label: "Text",
+              children: (
+                <div className="flex flex-wrap items-center gap-3">
+                  {variants.map((v) => (
+                    <Badge key={v} variant={v}>
+                      {v}
+                    </Badge>
+                  ))}
+                </div>
+              ),
+            },
+            {
+              id: "icon",
+              label: "With icon",
+              children: (
+                <div className="flex flex-wrap items-center gap-3">
+                  {variants.map((v) => (
+                    <Badge key={v} variant={v}>
+                      <CheckIcon aria-hidden="true" />
+                      {v}
+                    </Badge>
+                  ))}
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="긴 텍스트와 링크(asChild)입니다.">
+        <StateBoard
+          min={280}
+          states={[
+            { id: "long", label: "Long text", children: <div className="max-w-[160px]"><Badge>A very long badge label</Badge></div> },
+            {
+              id: "link",
+              label: "asChild (link)",
+              children: (
+                <Badge asChild variant="outline">
+                  <a href="#badge">Link badge</a>
+                </Badge>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Variants: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      {variants.map((v) => (
+        <Badge key={v} variant={v}>
+          {v}
+        </Badge>
+      ))}
+    </div>
+  ),
+}
+export const Playground: Story = { tags: ["verification"], args: { variant: "default", children: "Badge" } }