Initial commit: HMDesignSystem baseline

src/center/center-title.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { CenterTitle, CENTER_TITLE_COMPOSITIONS, type CenterTitleComposition } from "@hm-design/center-graphic"
+import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, withRepresentation } from "./center-shared"
+
+// Owner: ui-viz docs/components/center-title.md. Title Resolution B numeric output is TBD; the per-Type palette is SCOPED_DESIGN_APPROVAL.
+const meta = {
+  title: "Center Graphic/Title",
+  component: CenterTitle,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof CenterTitle>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the four title types. Named after the area so Storybook shows it as a single sidebar item.
+// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
+export const Compositions: Story = {
+  name: "Title",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title="Title"
+        description="CENTER 제목 그래픽의 네 가지 Type Reference입니다. Resolution B 수치는 TBD, Type별 palette는 SCOPED_DESIGN_APPROVAL입니다."
+      />
+      <StorySection title="Overview" description={CENTER_BOUNDARY}>
+        {withRepresentation(() => <CenterTitleReferenceDemo />)}
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Playground: Story = {
+  tags: ["verification"],
+  decorators: [withRepresentation],
+  args: { composition: "routeProjectNameRoute", context: "서산영덕선", projectName: "대산~당진 건설공사", routeClassification: "고속국도 제30호", projectRoute: "L=25.36km" },
+  argTypes: {
+    composition: {
+      control: { type: "select", labels: Object.fromEntries(Object.entries(CENTER_TITLE_COMPOSITIONS).map(([key, { type, label }]) => [key, `${type} · ${label}`])) },
+      options: Object.keys(CENTER_TITLE_COMPOSITIONS) as CenterTitleComposition[],
+    },
+  },
+  render: (args) => <CenterTitle {...args} />,
+}