shkim4
4c29894e56
Drop page / section descriptions, state notes and repeated captions from the representative Stories of 44 components, the Patterns, Center Graphic and OrgChart pages. Value readouts, spec lists and captions hide only on the representative page; hidden verification Stories keep them. Tabs Default API and the Filter Bar draft / applied counts move to the hidden DefaultApi and DraftApplied Stories; Center Overview is hidden with its direct URL kept. Story IDs are unchanged. Align the component, pattern and OrgChart docs with the pages, point the quality reference check at the DraftApplied Story, and make the P8 styles check expect no section header on the preview-only Expanded page.
89 lines
3.4 KiB
TypeScript
89 lines
3.4 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 { 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.
|
|
export const All: Story = {
|
|
name: "Alert Dialog",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Alert Dialog" />
|
|
<StorySection title="Overview">
|
|
<Confirmation />
|
|
</StorySection>
|
|
<StorySection title="Variants">
|
|
<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 /> }
|