HMDesign/src/components/accordion.stories.tsx

import type { ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import {
  ClosedSpecimen as CollapsibleClosed,
  ControlledSpecimen as CollapsibleControlled,
  DisabledSpecimen as CollapsibleDisabled,
  LongSpecimen as CollapsibleLong,
  OpenSpecimen as CollapsibleOpen,
} from "./collapsible-examples"
import "./accordion-story.css"

// The representative "Accordion" Story puts each Radix mode on one page with real, clickable items. The same sections also exist
// as Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts). Modes use the Radix API
// (type, collapsible, defaultValue, disabled); there are no HM variant props.

const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(6)

const narrow = (children: ReactNode) => <div className="w-full max-w-md">{children}</div>

function SingleSpecimen() {
  return narrow(
    <Accordion type="single" defaultValue="a">
      <AccordionItem value="a">
        <AccordionTrigger>배송은 얼마나 걸리나요?</AccordionTrigger>
        <AccordionContent>주문 후 2~3일 안에 도착합니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="b">
        <AccordionTrigger>반품은 어떻게 하나요?</AccordionTrigger>
        <AccordionContent>수령 후 7일 이내에 마이페이지에서 신청합니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="c">
        <AccordionTrigger>결제 수단은 무엇이 있나요?</AccordionTrigger>
        <AccordionContent>카드와 계좌이체를 지원합니다.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

function CollapsibleSingleSpecimen() {
  return narrow(
    <Accordion type="single" collapsible>
      <AccordionItem value="a">
        <AccordionTrigger>열린 항목을 다시 눌러 닫을 수 있습니다</AccordionTrigger>
        <AccordionContent>collapsible 속성이 있어 모두 닫힌 상태가 가능합니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="b">
        <AccordionTrigger>다른 항목</AccordionTrigger>
        <AccordionContent>한 번에 하나만 열립니다.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

function MultipleSpecimen() {
  return narrow(
    <Accordion type="multiple" defaultValue={["a", "b"]}>
      <AccordionItem value="a">
        <AccordionTrigger>기본 정보</AccordionTrigger>
        <AccordionContent>여러 항목을 동시에 열 수 있습니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="b">
        <AccordionTrigger>상세 정보</AccordionTrigger>
        <AccordionContent>처음부터 열린 항목입니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="c">
        <AccordionTrigger>기타</AccordionTrigger>
        <AccordionContent>접힌 항목입니다.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

function DisabledSpecimen() {
  return narrow(
    <Accordion type="single" collapsible>
      <AccordionItem value="a">
        <AccordionTrigger>사용 가능한 항목</AccordionTrigger>
        <AccordionContent>키보드 이동은 비활성 항목을 건너뜁니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="b" disabled>
        <AccordionTrigger>비활성 항목</AccordionTrigger>
        <AccordionContent>열 수 없습니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="c">
        <AccordionTrigger>다음 항목</AccordionTrigger>
        <AccordionContent>비활성 항목 다음입니다.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

function LongSpecimen() {
  return narrow(
    <Accordion type="single" defaultValue="a">
      <AccordionItem value="a">
        <AccordionTrigger>{`여러 줄로 이어지는 긴 Trigger 문구입니다. ${longText.slice(0, 60)}`}</AccordionTrigger>
        <AccordionContent>
          <p>{longText}</p>
          <p className="mt-2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="b">
        <AccordionTrigger>두 번째 항목</AccordionTrigger>
        <AccordionContent>짧은 내용</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

// No `component` here: Accordion props are a union (single | multiple), so Stories without args would not type-check.
const meta = { title: "Components/Disclosure/Accordion", parameters: { layout: "padded" } } satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

// The combined disclosure page uses the same specimens as the separate verification Stories.
export const All: Story = {
  name: "Accordion",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage className="sb-accordion-story">
      <StoryPageHeader title="Accordion" />
      <StorySection title="Variants">
        <StateBoard states={[
          { id: "single", label: "Single", children: <SingleSpecimen /> },
          { id: "collapsible-single", label: "Collapsible Single", children: <CollapsibleSingleSpecimen /> },
          { id: "multiple", label: "Multiple", children: <MultipleSpecimen /> },
        ]} />
      </StorySection>
      <StorySection title="States">
        <StateBoard states={[
          { id: "disabled", label: "Disabled Item", children: <DisabledSpecimen /> },
        ]} />
      </StorySection>
      <StorySection title="Collapsible · States">
        <StateBoard states={[
          { id: "collapsible-closed", label: "Closed", children: <CollapsibleClosed /> },
          { id: "collapsible-open", label: "Open", children: <CollapsibleOpen /> },
          { id: "collapsible-disabled", label: "Disabled", children: <CollapsibleDisabled /> },
        ]} />
      </StorySection>
      <StorySection title="Content · Usage">
        <StateBoard states={[
          { id: "long", label: "Accordion · Long Content", children: <LongSpecimen /> },
          { id: "collapsible-long", label: "Collapsible · Long Content", children: <CollapsibleLong /> },
          { id: "collapsible-controlled", label: "Button trigger", children: <CollapsibleControlled /> },
        ]} />
      </StorySection>
    </StoryPage>
  ),
}

// Verification Stories: the same specimens, hidden from the sidebar (tag `verification`).
export const Single: Story = { tags: ["verification"], render: () => <SingleSpecimen /> }
export const Multiple: Story = { tags: ["verification"], render: () => <MultipleSpecimen /> }
export const Disabled: Story = { tags: ["verification"], render: () => <DisabledSpecimen /> }
export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongSpecimen /> }