192 lines
7.5 KiB
TypeScript
192 lines
7.5 KiB
TypeScript
import { useEffect, useState, type ReactNode } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { AspectRatio, Card, CardContent, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// The representative Story shows real, draggable carousels; the same specimens also exist as Stories tagged `verification`
|
|
// (hidden from the sidebar). Slide widths (`basis-*`) are the consumer's `className` on CarouselItem; Card and AspectRatio are
|
|
// Story composition (Carousel imports neither). `setApi` feeds the "slide n / total" readout.
|
|
|
|
const frame = (node: ReactNode) => <div style={{ width: "100%", maxWidth: 420, minWidth: 0 }}>{node}</div>
|
|
|
|
const svg = (n: number) =>
|
|
"data:image/svg+xml;utf8," +
|
|
encodeURIComponent(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" width="480" height="270"><rect width="480" height="270" fill="${["#266651", "#3e3523", "#205241", "#604f32", "#123328"][n % 5]}"/><text x="24" y="52" font-family="sans-serif" font-size="34" fill="#ffffff">Slide ${n + 1}</text></svg>`
|
|
)
|
|
|
|
function SlideCard({ n }: { n: number }) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="grid h-24 place-items-center text-2xl font-bold">{n + 1}</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function useReadout() {
|
|
const [api, setApi] = useState<CarouselApi>()
|
|
const [current, setCurrent] = useState(0)
|
|
const [count, setCount] = useState(0)
|
|
useEffect(() => {
|
|
if (!api) return
|
|
setCount(api.scrollSnapList().length)
|
|
setCurrent(api.selectedScrollSnap() + 1)
|
|
api.on("select", () => setCurrent(api.selectedScrollSnap() + 1))
|
|
}, [api])
|
|
return { setApi, current, count }
|
|
}
|
|
|
|
// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
|
|
function Basic({ showValue = true }: { showValue?: boolean }) {
|
|
const { setApi, current, count } = useReadout()
|
|
return frame(
|
|
<div className="grid gap-2">
|
|
<Carousel setApi={setApi} aria-label="기본 carousel">
|
|
<CarouselContent>
|
|
{Array.from({ length: 5 }, (_, i) => (
|
|
<CarouselItem key={i}>
|
|
<SlideCard n={i} />
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
{showValue ? <span className="text-center text-sm text-muted-foreground" data-testid="readout">{`slide ${current} / ${count}`}</span> : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Multiple() {
|
|
return frame(
|
|
<Carousel opts={{ align: "start" }} aria-label="여러 항목 carousel">
|
|
<CarouselContent>
|
|
{Array.from({ length: 8 }, (_, i) => (
|
|
<CarouselItem key={i} className="basis-1/2">
|
|
<SlideCard n={i} />
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
)
|
|
}
|
|
|
|
function Loop({ showValue = true }: { showValue?: boolean }) {
|
|
const { setApi, current, count } = useReadout()
|
|
return frame(
|
|
<div className="grid gap-2">
|
|
<Carousel opts={{ loop: true }} setApi={setApi} aria-label="loop carousel">
|
|
<CarouselContent>
|
|
{Array.from({ length: 3 }, (_, i) => (
|
|
<CarouselItem key={i}>
|
|
<SlideCard n={i} />
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
{showValue ? <span className="text-center text-sm text-muted-foreground" data-testid="loop-readout">{`slide ${current} / ${count}`}</span> : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Vertical() {
|
|
return (
|
|
<div style={{ width: 220, height: 260 }}>
|
|
<Carousel orientation="vertical" opts={{ align: "start" }} aria-label="세로 carousel" className="h-full">
|
|
<CarouselContent style={{ height: 260 }}>
|
|
{Array.from({ length: 4 }, (_, i) => (
|
|
<CarouselItem key={i} className="basis-1/2">
|
|
<SlideCard n={i} />
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Media() {
|
|
return frame(
|
|
<Carousel aria-label="미디어 carousel">
|
|
<CarouselContent>
|
|
{Array.from({ length: 4 }, (_, i) => (
|
|
<CarouselItem key={i}>
|
|
<AspectRatio ratio={16 / 9}>
|
|
<img src={svg(i)} alt={`슬라이드 ${i + 1}`} className="size-full rounded-md object-cover" />
|
|
</AspectRatio>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
)
|
|
}
|
|
|
|
const sections = [
|
|
{ id: "basic", label: "Basic", node: <Basic showValue={false} /> },
|
|
{ id: "multiple", label: "Multiple items", node: <Multiple /> },
|
|
{ id: "loop", label: "Loop", node: <Loop showValue={false} /> },
|
|
{ id: "vertical", label: "Vertical", node: <Vertical /> },
|
|
{ id: "media", label: "Media", node: <Media /> },
|
|
]
|
|
|
|
const meta = { title: "Components/Data & Display/Carousel", component: Carousel, parameters: { layout: "padded" } } satisfies Meta<typeof Carousel>
|
|
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 Media example spans two columns; carousels fill their column by design.
|
|
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%,200px),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 (Basic) is merged into Variants (Basic, Multiple items, Loop, Vertical), 4 columns on PC; Media stays under Usage.
|
|
export const All: Story = {
|
|
name: "Carousel",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Carousel" />
|
|
<StorySection title="Variants">
|
|
<SpecimenGrid ids={["basic", "multiple", "loop", "vertical"]} columns={4} />
|
|
</StorySection>
|
|
<StorySection title="Usage">
|
|
<SpecimenGrid ids={["media"]} columns={4} spans={{ media: 2 }} />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const BasicCarousel: Story = { tags: ["verification"], name: "Basic", render: () => <Basic /> }
|
|
export const MultipleItems: Story = { tags: ["verification"], name: "Multiple Items", render: () => <Multiple /> }
|
|
export const LoopCarousel: Story = { tags: ["verification"], name: "Loop", render: () => <Loop /> }
|
|
export const VerticalCarousel: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
|