94 lines
4.4 KiB
TypeScript
94 lines
4.4 KiB
TypeScript
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 { STORY_KICKER, 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.
|
|
|
|
function Interactive() {
|
|
const [value, setValue] = useState(30)
|
|
return (
|
|
<div className="grid gap-3">
|
|
<Progress value={value} aria-label="진행률" />
|
|
<p className="text-sm text-muted-foreground" data-testid="value">{`value = ${value}`}</p>
|
|
<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", note: "0 / 50 / 200과 값 없음: ARIA 범위와 실제 채움 비율 확인", node: <CustomMaximum /> },
|
|
{ id: "interactive", label: "Interactive value", note: "버튼으로 value를 바꾸면 indicator 폭과 aria-valuenow가 함께 변합니다", node: <Interactive /> },
|
|
]
|
|
|
|
const meta = { title: "Components/Data & Display/Progress", component: Progress, parameters: { layout: "padded" } } satisfies Meta<typeof Progress>
|
|
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, note: s.note, noteAfter: true, children: s.node }))} />
|
|
)
|
|
|
|
// Representative Story: the common Story page; the sections group the same specimens.
|
|
export const All: Story = {
|
|
name: "Progress",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
kicker={STORY_KICKER.components}
|
|
title="Progress"
|
|
description="작업 진행률을 막대로 표시합니다. value(0..max)를 따라 채워집니다."
|
|
/>
|
|
<StorySection title="Overview">{board("middle")}</StorySection>
|
|
<StorySection title="States" description="value 0과 100입니다.">{board("zero", "full")}</StorySection>
|
|
<StorySection title="Usage" description="max를 바꾼 범위와, value를 바꾸는 실제 조작입니다.">{board("custom-maximum", "interactive")}</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")
|
|
}
|
|
},
|
|
}
|