HMDesign/src/components/progress.stories.tsx

import { useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button, Progress } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Progress follows `value` (0..max). The representative Story shows fixed values plus one interactive value; the same specimens
// also exist as Stories tagged `verification` (hidden from the sidebar). No status colors are defined, so there is one look.

// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
function Interactive({ showValue = true }: { showValue?: boolean }) {
  const [value, setValue] = useState(30)
  return (
    <div className="grid gap-3">
      <Progress value={value} aria-label="진행률" />
      {showValue ? <p className="text-sm text-muted-foreground" data-testid="value">{`value = ${value}`}</p> : null}
      <div className="flex gap-2">
        <Button variant="cancel" appearance="solid" size="sm" onClick={() => setValue((v) => Math.max(0, v - 25))}>
          -25
        </Button>
        <Button variant="primary" appearance="solid" size="sm" onClick={() => setValue((v) => Math.min(100, v + 25))}>
          +25
        </Button>
      </div>
    </div>
  )
}

function CustomMaximum() {
  return (
    <div className="grid gap-3">
      <Progress value={0} max={200} aria-label="0 of 200" />
      <Progress value={50} max={200} aria-label="50 of 200" />
      <Progress value={200} max={200} aria-label="200 of 200" />
      <Progress max={200} aria-label="Indeterminate" />
    </div>
  )
}

const sections = [
  { id: "zero", label: "0%", node: <Progress value={0} aria-label="0%" /> },
  { id: "middle", label: "50%", node: <Progress value={50} aria-label="50%" /> },
  { id: "full", label: "100%", node: <Progress value={100} aria-label="100%" /> },
  { id: "custom-maximum", label: "max = 200", node: <CustomMaximum /> },
  { id: "interactive", label: "Interactive", node: <Interactive showValue={false} /> },
]

const meta = { title: "Components/Data & Display/Progress", component: Progress, parameters: { layout: "padded" } } satisfies Meta<typeof Progress>
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
// (240px 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.
const specimenColumns = {
  2: "min-[1000px]:grid-cols-2",
  3: "min-[1000px]:grid-cols-3",
  4: "min-[1000px]:grid-cols-4",
} as const

function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
  return (
    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
      {ids.map((id) => {
        const s = sections.find((section) => section.id === id)!
        return (
          <div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
            <StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
          </div>
        )
      })}
    </div>
  )
}

// Representative Story: the common Story page; the sections group the same specimens.
// Representative Story: Overview (50%) is merged into States (0%, 50%, 100%); max = 200 and Interactive stay under Usage. 3 columns on PC.
export const All: Story = {
  name: "Progress",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Progress" />
      <StorySection title="States">
        <SpecimenGrid ids={["zero", "middle", "full"]} columns={3} />
      </StorySection>
      <StorySection title="Usage">
        <SpecimenGrid ids={["custom-maximum", "interactive"]} columns={3} />
      </StorySection>
    </StoryPage>
  ),
}

export const Zero: Story = { tags: ["verification"], render: () => <Progress value={0} aria-label="0%" /> }
export const Middle: Story = { tags: ["verification"], render: () => <Progress value={50} aria-label="50%" /> }
export const Full: Story = { tags: ["verification"], render: () => <Progress value={100} aria-label="100%" /> }

export const NonDefaultMax: Story = {
  tags: ["verification"],
  render: () => <CustomMaximum />,
  play: async ({ canvasElement }) => {
    const bars = canvasElement.querySelectorAll('[role="progressbar"]')
    const expected = ["translateX(-100%)", "translateX(-75%)", "translateX(0%)", "translateX(-100%)"]
    bars.forEach((bar, index) => {
      const indicator = bar.querySelector<HTMLElement>('[data-slot="progress-indicator"]')
      if (bar.getAttribute("aria-valuemax") !== "200" || indicator?.style.transform !== expected[index]) {
        throw new Error(`Progress max=200: ARIA/fill mismatch in specimen ${index}`)
      }
    })
    if (bars.length !== 4 || bars[1]?.getAttribute("aria-valuenow") !== "50" || bars[3]?.hasAttribute("aria-valuenow")) {
      throw new Error("Progress max=200: incorrect determinate/indeterminate ARIA state")
    }
  },
}