Initial commit: HMDesignSystem baseline
This commit is contained in:
shkim4 committed
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,169 @@
|
||||
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 { STORY_KICKER, 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-semibold">{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 }
|
||||
}
|
||||
|
||||
function Basic() {
|
||||
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>
|
||||
<span className="text-center text-sm text-muted-foreground" data-testid="readout">{`slide ${current} / ${count}`}</span>
|
||||
</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() {
|
||||
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>
|
||||
<span className="text-center text-sm text-muted-foreground" data-testid="loop-readout">{`slide ${current} / ${count}`}</span>
|
||||
</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 (single item) + setApi readout", node: <Basic /> },
|
||||
{ id: "multiple", label: "Multiple items (basis-1/2)", node: <Multiple /> },
|
||||
{ id: "loop", label: "Loop (controls never disable)", node: <Loop /> },
|
||||
{ id: "vertical", label: "Vertical", node: <Vertical /> },
|
||||
{ id: "media", label: "Media (AspectRatio composition)", 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>
|
||||
|
||||
const board = (...ids: string[]) => (
|
||||
<StateBoard min={460} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
|
||||
)
|
||||
|
||||
// Representative Story: the common Story page; the sections group the same specimens.
|
||||
export const All: Story = {
|
||||
name: "Carousel",
|
||||
parameters: { layout: "fullscreen", controls: { disable: true } },
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader
|
||||
kicker={STORY_KICKER.components}
|
||||
title="Carousel"
|
||||
description="여러 슬라이드를 끌기·버튼으로 넘겨 보는 영역입니다. 슬라이드 폭(basis-*)은 CarouselItem의 className으로 정합니다."
|
||||
/>
|
||||
<StorySection title="Overview">{board("basic")}</StorySection>
|
||||
<StorySection title="Variants" description="여러 항목 표시, 반복(loop), 세로 방향입니다.">{board("multiple", "loop", "vertical")}</StorySection>
|
||||
<StorySection title="Usage" description="AspectRatio와 조합한 이미지 슬라이드입니다.">{board("media")}</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 /> }
|
||||
Reference in new issue
Block a user