107 lines
4.6 KiB
TypeScript
107 lines
4.6 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
Button,
|
|
} from "@hm-design/ui"
|
|
import { StateBoard, type BoardState } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Alert Dialog is a modal Radix overlay (Portal) for a decision that must be confirmed or cancelled: no Close (X), no outside
|
|
// dismiss. The representative Story opens the real dialogs; the same cases start open in the verification Stories.
|
|
// Action / Cancel are the HM Button: ordinary confirmation uses a Solid pair; deletion uses an Outline pair.
|
|
|
|
function Confirmation({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<AlertDialog defaultOpen={defaultOpen}>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="primary" appearance="outline">
|
|
로그아웃
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>로그아웃하시겠습니까?</AlertDialogTitle>
|
|
<AlertDialogDescription>저장하지 않은 변경 사항은 사라집니다.</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel appearance="solid">취소</AlertDialogCancel>
|
|
<AlertDialogAction variant="primary" appearance="solid">로그아웃</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
function Destructive({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<AlertDialog defaultOpen={defaultOpen}>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="destructive" appearance="outline">
|
|
삭제
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>프로젝트를 삭제하시겠습니까?</AlertDialogTitle>
|
|
<AlertDialogDescription>삭제하면 되돌릴 수 없습니다. 프로젝트의 모든 데이터가 함께 삭제됩니다.</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel appearance="solid">취소</AlertDialogCancel>
|
|
<AlertDialogAction variant="destructive" appearance="solid">
|
|
삭제
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Components/Overlay/Alert Dialog", component: AlertDialog, parameters: { layout: "centered" } } satisfies Meta<typeof AlertDialog>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// Representative Story: the common Story page; each trigger opens the real dialog.
|
|
// 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 trigger keeps its
|
|
// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
|
|
function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
|
|
return (
|
|
<div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
|
|
{states.map((state) => (
|
|
<StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Representative Story: Overview and Variants are merged into one Variants section.
|
|
export const All: Story = {
|
|
name: "Alert Dialog",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Alert Dialog" />
|
|
<StorySection title="Variants">
|
|
<SpecimenGrid
|
|
states={[
|
|
{ id: "confirmation", label: "Confirmation", children: <Confirmation /> },
|
|
{ id: "destructive", label: "Destructive", children: <Destructive /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const ConfirmationOpen: Story = { tags: ["verification"], name: "Confirmation", render: () => <Confirmation defaultOpen /> }
|
|
export const DestructiveOpen: Story = { tags: ["verification"], name: "Destructive", render: () => <Destructive defaultOpen /> }
|