import type { ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { Button } from "@hm-design/ui"
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardSurface } from "@hm-design/ui"
import { Input } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Story structure follows Button / Input / Select: one representative "Card" Story shows the ui_viz cases on one page,
// the same specimens also exist as separate Stories tagged `verification` (hidden from the sidebar, see .storybook/main.ts).
// ui_viz (content-container.md Type B Content Card) defines only the Default state, two surfaces, a Title with an optional
// Meta / Action, and a body. Hover / Selected / Clickable, Footer and media are not defined, so they are not shown here
// except in the Compatibility Story.
function Body({ children }: { children?: ReactNode }) {
return
{children ?? "본문은 카드 안쪽 여백 24px 안에 놓입니다. 내용물의 모양은 각 컴포넌트가 정합니다."}
}
function Specimen({ surface = "surface", action, title = "프로젝트 정보", children }: { surface?: CardSurface; action?: boolean; title?: string; children?: ReactNode }) {
return (
{title}
{action ? (
) : null}
{children ?? }
)
}
function FormSpecimen() {
return (
입력 폼
)
}
const meta = {
title: "Components/Data & Display/Card",
component: Card,
parameters: { layout: "padded" },
argTypes: {
surface: { control: "inline-radio", options: ["surface", "content"], description: "ui_viz surface 축: White(기본) / Beige." },
},
} satisfies Meta
export default meta
type Story = StoryObj
// Representative Story: the common Story page (Overview → Variants → Usage) with every ui_viz case. Named after the component, as in ui_viz.
// It is the only Card entry in the default sidebar, so Storybook shows Card as a single 1-depth item.
export const All: Story = {
name: "Card",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
}]} />
},
{ id: "action", label: "Title + Action", noteAfter: true, note: "Action은 Title 반대쪽 끝, 교차축 중앙 정렬. Title과 20px 이상 간격.", children: },
]}
/>
}]} />
),
}
// Verification Stories: the same specimens as separate Stories, hidden from the sidebar (tag `verification`).
export const Surfaces: Story = {
tags: ["verification"],
render: () => (
}
// HM only: not part of the ui_viz Card spec. Footer, Description and size="sm" are shadcn defaults that ui_viz does not define.
export const Compatibility: Story = {
tags: ["verification"],
render: () => (
shadcn 호환ui_viz에 없는 Description 입니다. shadcn 기본 스타일을 씁니다.
Footer도 ui_viz 규격이 없어 shadcn 기본 표면을 씁니다.
size="sm"
shadcn 작은 크기(여백 12px)입니다. ui_viz에 없습니다.