style(storybook): group overlay, disclosure and navigation story pages

- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible, Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each (specimens moved to *-examples.tsx; absorbed Stories keep their IDs) - Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied - Component docs updated to the new representative pages
2026-11-13 17:57:53 +09:00
1 parent 71d504407d
commit bad2acfc49
@@ -0,0 +1,127 @@
+import type { ReactNode } from "react"
+// Usage: preserved native label fixtures do not define a new-screen exception. Use public Label
+// for supported fields (docs/components/label.md §5); copy only actions requested by the screen.
+import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Input } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
+import { StorySection } from "@/components/story-page"
+
+// Shared Drawer specimens (Storybook only). Used by the Drawer Stories (verification) and by the Sheet representative page,
+// which shows Sheet and Drawer under one sidebar item ("시트·드로어").
+// Drawer is a modal vaul overlay (Portal). The sections open the real Drawer from its triggers; drag the handle or the panel
+// down to dismiss. The same cases start open in the verification Stories. vaul owns the drag, Radix the focus and ARIA.
+
+const longText = "긴 내용은 Body 영역만 세로로 scroll 하고 Header와 Footer는 그대로 보입니다. "
+
+function Frame({
+  trigger,
+  defaultOpen,
+  title,
+  description,
+  children,
+  actions,
+}: {
+  trigger: string
+  defaultOpen?: boolean
+  title: string
+  description?: string
+  children: ReactNode
+  actions?: ReactNode
+}) {
+  return (
+    <Drawer defaultOpen={defaultOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          {trigger}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+        </DrawerHeader>
+        <DrawerBody>{children}</DrawerBody>
+        <DrawerFooter>{actions}</DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+const actions = (
+  <>
+    <DrawerClose asChild>
+      <Button variant="cancel" appearance="solid">
+        취소
+      </Button>
+    </DrawerClose>
+    <DrawerClose asChild>
+      <Button variant="primary" appearance="solid">
+        실행
+      </Button>
+    </DrawerClose>
+  </>
+)
+
+export function DrawerBasic({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="기본" defaultOpen={defaultOpen} title="작업 선택" description="아래에서 올라오는 패널입니다. 핸들을 아래로 끌어 닫을 수 있습니다." actions={actions}>
+      <p>짧은 내용은 내용 높이만큼만 차지합니다.</p>
+    </Frame>
+  )
+}
+
+export function DrawerForm({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={actions}>
+      <div className="grid gap-2">
+        <label htmlFor="drawer-form-name" className="text-sm font-medium text-foreground">
+          프로젝트명
+        </label>
+        <Input id="drawer-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
+      </div>
+    </Frame>
+  )
+}
+
+export function DrawerLong({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 scroll 합니다." actions={actions}>
+      {Array.from({ length: 30 }, (_, i) => (
+        <p key={i} className="mb-3">
+          {longText}
+        </p>
+      ))}
+    </Frame>
+  )
+}
+
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
+// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
+// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
+// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
+function SpecimenGrid({ states, hideSpecimenLabels }: { states: BoardState[]; hideSpecimenLabels: boolean }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] min-[1000px]:grid-cols-4${hideSpecimenLabels ? " [&_[data-overview-state]>header]:sr-only" : ""}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div className={hideSpecimenLabels ? "flex items-start" : undefined}>{state.children}</div> }]} />
+      ))}
+    </div>
+  )
+}
+
+// The Drawer section of a representative page: Overview and Usage merged into one Usage section (Basic, Form, Long Content).
+// On a shared page `title` names the section after the component (as "Alert Dialog" on the Dialog page) and `idPrefix`
+// keeps the specimen ids (data-overview-state) unique.
+export function DrawerSections({ title = "Usage", idPrefix = "", hideSpecimenLabels = false }: { title?: string; idPrefix?: string; hideSpecimenLabels?: boolean }) {
+  return (
+    <StorySection title={title}>
+      <SpecimenGrid
+        hideSpecimenLabels={hideSpecimenLabels}
+        states={[
+          { id: `${idPrefix}basic`, label: "Basic", children: <DrawerBasic /> },
+          { id: `${idPrefix}form`, label: "Form", children: <DrawerForm /> },
+          { id: `${idPrefix}long-content`, label: "Long Content", children: <DrawerLong /> },
+        ]}
+      />
+    </StorySection>
+  )
+}