HMDesign/src/components/sheet.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite"
// 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, Input, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@hm-design/ui"
import { StateBoard, type BoardState } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Sheet is a modal Radix overlay (Portal), so the representative Story is a row of triggers that open the real Sheet for each
// side and content case. The same cases start open in the verification Stories. Radix owns focus trap, Escape and focus return.

type Side = "top" | "right" | "bottom" | "left"

const longText = "긴 내용은 Body 영역만 세로로 scroll 하고 Header와 Footer는 그대로 보입니다. "

function Frame({
  trigger,
  side,
  defaultOpen,
  title,
  description,
  children,
}: {
  trigger: string
  side?: Side
  defaultOpen?: boolean
  title: string
  description?: string
  children: React.ReactNode
}) {
  return (
    <Sheet defaultOpen={defaultOpen}>
      <SheetTrigger asChild>
        <Button variant="primary" appearance="outline">
          {trigger}
        </Button>
      </SheetTrigger>
      <SheetContent side={side}>
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
          {description ? <SheetDescription>{description}</SheetDescription> : null}
        </SheetHeader>
        <SheetBody>{children}</SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="cancel" appearance="solid">
              취소
            </Button>
          </SheetClose>
          <SheetClose asChild>
            <Button variant="primary" appearance="solid">
              저장
            </Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

function SideCase({ side, defaultOpen }: { side: Side; defaultOpen?: boolean }) {
  return (
    <Frame trigger={side} side={side} defaultOpen={defaultOpen} title="설정" description="화면 가장자리에서 열리는 보조 패널입니다.">
      <p>{`side="${side}"`}</p>
    </Frame>
  )
}

function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
  return (
    <Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보">
      <div className="grid gap-2">
        <label htmlFor="sheet-form-name" className="text-sm font-medium text-foreground">
          프로젝트명
        </label>
        <Input id="sheet-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
      </div>
    </Frame>
  )
}

function LongCase({ defaultOpen }: { defaultOpen?: boolean }) {
  return (
    <Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 scroll 합니다.">
      {Array.from({ length: 30 }, (_, i) => (
        <p key={i} className="mb-3">
          {longText}
        </p>
      ))}
    </Frame>
  )
}

const meta = { title: "Components/Overlay/Sheet", component: Sheet, parameters: { layout: "centered" } } satisfies Meta<typeof Sheet>
export default meta
type Story = StoryObj<typeof meta>

// 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 and divider
// 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, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
  return (
    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
      {states.map((state) => (
        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
      ))}
    </div>
  )
}

// Representative Story: the common Story page. Overview is merged into Variants (Right is its first item).
export const All: Story = {
  name: "Sheet",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Sheet" />
      <StorySection title="Variants">
        <SpecimenGrid
          states={[
            { id: "right", label: "Right", children: <SideCase side="right" /> },
            { id: "left", label: "Left", children: <SideCase side="left" /> },
            { id: "top", label: "Top", children: <SideCase side="top" /> },
            { id: "bottom", label: "Bottom", children: <SideCase side="bottom" /> },
          ]}
        />
      </StorySection>
      <StorySection title="Usage">
        <SpecimenGrid
          states={[
            { id: "form", label: "Form", children: <FormCase /> },
            { id: "long-content", label: "Long Content", children: <LongCase /> },
          ]}
        />
      </StorySection>
    </StoryPage>
  ),
}

// Verification Stories: the same cases starting open, hidden from the sidebar (tag `verification`).
export const Right: Story = { tags: ["verification"], render: () => <SideCase side="right" defaultOpen /> }
export const Left: Story = { tags: ["verification"], render: () => <SideCase side="left" defaultOpen /> }
export const Top: Story = { tags: ["verification"], render: () => <SideCase side="top" defaultOpen /> }
export const Bottom: Story = { tags: ["verification"], render: () => <SideCase side="bottom" defaultOpen /> }
export const Form: Story = { tags: ["verification"], render: () => <FormCase defaultOpen /> }
export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongCase defaultOpen /> }