Initial commit: HMDesignSystem baseline

src/components/story-page.tsx

@@ -0,0 +1,56 @@
+import { createContext, type ReactNode } from "react"
+import "./story-page.css"
+
+// Storybook presentation only (not part of @hm-design/ui): the common frame of a representative Story page.
+// Page → Header (title, description) → Sections (title, description, specimen). It never styles the component being reviewed.
+// Inner and title follow Foundation / Color; the section header → content split follows Center Graphic / 교량.
+// A Story using it sets `parameters.layout: "fullscreen"` so the page owns its inner padding.
+
+// Lets StateBoard render its specimen labels one level below the section heading.
+export const StorySectionContext = createContext(false)
+
+export function StoryPage({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={className ? `sb-page ${className}` : "sb-page"}><div className="sb-page-inner">{children}</div></div>
+}
+
+export function StoryPageHeader({ kicker, title, description }: { kicker: string; title: string; description?: ReactNode }) {
+  return (
+    <header className="sb-page-header">
+      <p className="sb-page-kicker">{kicker}</p>
+      <h1 className="sb-page-title">{title}</h1>
+      {description ? <p className="sb-page-description">{description}</p> : null}
+    </header>
+  )
+}
+
+// Headings and specimens share StoryPage's single Inner. Wide specimens own their local scroll frame.
+export function StorySection({
+  title,
+  description,
+  id,
+  children,
+}: {
+  title: string
+  description?: ReactNode
+  id?: string
+  children: ReactNode
+}) {
+  return (
+    <section className="sb-page-section" id={id} aria-label={title}>
+      <header className="sb-page-section-header">
+        <h2 className="sb-page-section-title">{title}</h2>
+        {description ? <p className="sb-page-section-description">{description}</p> : null}
+      </header>
+      <StorySectionContext.Provider value>
+        <div className="sb-page-section-body">{children}</div>
+      </StorySectionContext.Provider>
+    </section>
+  )
+}
+
+export const STORY_KICKER = {
+  foundation: "HM DESIGN SYSTEM / FOUNDATION",
+  components: "HM DESIGN SYSTEM / COMPONENTS",
+  patterns: "HM DESIGN SYSTEM / PATTERNS",
+  center: "HM DESIGN SYSTEM / CENTER GRAPHIC",
+} as const