Initial commit: HMDesignSystem baseline

src/components/scroll-area.stories.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ScrollArea, ScrollBar } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Scroll Area is Radix scrolling with a styled scrollbar (type "hover": the bar shows while hovering or scrolling). Sizes below
+// are Story layout. The representative Story shows vertical, horizontal, both axes and a table-like content.
+
+const items = Array.from({ length: 30 }, (_, i) => `항목 ${i + 1}`)
+
+function Vertical() {
+  return (
+    <ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
+      <div className="p-3 text-sm">
+        {items.map((t) => (
+          <div key={t} className="py-1.5">
+            {t}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
+
+function Horizontal() {
+  return (
+    <ScrollArea style={{ width: 280 }} className="rounded-md border whitespace-nowrap">
+      <div className="flex w-max gap-3 p-3">
+        {Array.from({ length: 12 }, (_, i) => (
+          <div key={i} className="grid h-16 w-24 place-items-center rounded-md bg-muted text-sm">{`카드 ${i + 1}`}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
+
+function Both() {
+  return (
+    <ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
+      <div className="p-3 text-sm" style={{ width: 600 }}>
+        {items.map((t) => (
+          <div key={t} className="py-1.5">{`${t} — 가로로도 길어지는 내용입니다. 가로 scroll로 끝까지 볼 수 있습니다.`}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
+
+function TableLike() {
+  return (
+    <ScrollArea style={{ height: 180, width: 300 }} className="rounded-md border">
+      <div className="grid text-sm" style={{ width: 520 }}>
+        {Array.from({ length: 12 }, (_, r) => (
+          <div key={r} className="grid grid-cols-4 border-b p-2">
+            {["번호", "이름", "상태", "금액"].map((c) => (
+              <span key={c}>{`${c} ${r + 1}`}</span>
+            ))}
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
+
+const sections: { id: string; label: string; node: ReactNode }[] = [
+  { id: "vertical", label: "Vertical", node: <Vertical /> },
+  { id: "horizontal", label: "Horizontal", node: <Horizontal /> },
+  { id: "both", label: "Both axes", node: <Both /> },
+  { id: "table-like", label: "Table-like content", node: <TableLike /> },
+]
+
+const meta = { title: "Components/Data & Display/Scroll Area", component: ScrollArea, parameters: { layout: "padded" } } satisfies Meta<typeof ScrollArea>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Scroll Area",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Scroll Area"
+        description="정해진 크기 안에서 내용을 스크롤하는 영역입니다. 스크롤바는 포인터를 올리거나 스크롤할 때 나타납니다."
+      />
+      <StorySection title="Overview">{board("vertical")}</StorySection>
+      <StorySection title="Variants" description="가로와 양방향 스크롤입니다.">{board("horizontal", "both")}</StorySection>
+      <StorySection title="Usage">{board("table-like")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const VerticalScroll: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
+export const HorizontalScroll: Story = { tags: ["verification"], name: "Horizontal", render: () => <Horizontal /> }