Initial commit: HMDesignSystem baseline

src/components/alert.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { InfoIcon, TriangleAlertIcon } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const meta = {
+  title: "Components/Feedback/Alert",
+  component: Alert,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 인라인 메시지(Toast 아님). padding 12/16, radius 4, border 1px, Title 14/20/500, Description 14/20/400. variant는 default(neutral)와 destructive만 둡니다. success·warning·information은 HM 상태 색이 정해지지 않아 만들지 않았습니다. 닫기 동작은 없습니다.",
+      },
+    },
+  },
+  argTypes: { variant: { control: "inline-radio", options: ["default", "destructive"] } },
+} satisfies Meta<typeof Alert>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Alert",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Alert"
+        description="화면 안에 놓이는 인라인 메시지입니다(Toast 아님). variant는 default(neutral)와 destructive만 두며 닫기 동작은 없습니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={320}
+          states={[
+            {
+              id: "default",
+              label: "Default",
+              children: (
+                <Alert>
+                  <InfoIcon aria-hidden="true" />
+                  <AlertTitle>Heads up</AlertTitle>
+                  <AlertDescription>You can update your project settings at any time.</AlertDescription>
+                </Alert>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard
+          min={320}
+          states={[
+            {
+              id: "destructive",
+              label: "Destructive",
+              children: (
+                <Alert variant="destructive">
+                  <TriangleAlertIcon aria-hidden="true" />
+                  <AlertTitle>Unable to save</AlertTitle>
+                  <AlertDescription>Check the project name and try again.</AlertDescription>
+                </Alert>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="아이콘 없음, 제목만, 긴 내용 구성입니다.">
+        <StateBoard
+          min={320}
+          states={[
+            {
+              id: "no-icon",
+              label: "No icon",
+              children: (
+                <Alert>
+                  <AlertTitle>Title only layout</AlertTitle>
+                  <AlertDescription>Without an icon the text starts at the left edge.</AlertDescription>
+                </Alert>
+              ),
+            },
+            {
+              id: "title-only",
+              label: "Title only",
+              children: (
+                <Alert>
+                  <InfoIcon aria-hidden="true" />
+                  <AlertTitle>Saved</AlertTitle>
+                </Alert>
+              ),
+            },
+            {
+              id: "long",
+              label: "Long content",
+              children: (
+                <div className="max-w-xs">
+                  <Alert>
+                    <InfoIcon aria-hidden="true" />
+                    <AlertTitle>Scheduled maintenance</AlertTitle>
+                    <AlertDescription>The service will be unavailable for a short time during the maintenance window. Please save your work before it starts.</AlertDescription>
+                  </Alert>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Default: Story = {
+  tags: ["verification"],
+  render: () => (
+    <Alert>
+      <InfoIcon aria-hidden="true" />
+      <AlertTitle>Heads up</AlertTitle>
+      <AlertDescription>You can update your project settings at any time.</AlertDescription>
+    </Alert>
+  ),
+}
+export const Destructive: Story = {
+  tags: ["verification"],
+  render: () => (
+    <Alert variant="destructive">
+      <TriangleAlertIcon aria-hidden="true" />
+      <AlertTitle>Unable to save</AlertTitle>
+      <AlertDescription>Check the project name and try again.</AlertDescription>
+    </Alert>
+  ),
+}