215 lines
8.5 KiB
TypeScript
215 lines
8.5 KiB
TypeScript
import type { CSSProperties, ReactNode } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Button } from "@hm-design/ui"
|
|
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@hm-design/ui"
|
|
import { Input } from "@hm-design/ui"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@hm-design/ui"
|
|
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Dialog is an overlay (Radix Portal), so it does not fit the StateBoard. The representative Story is a row of triggers that open
|
|
// the real Dialog for each ui_viz case (dialog.md §9 Reference Viewer examples); the same cases also exist as separate Stories tagged
|
|
// `verification` that start open. Pseudo-state helpers are not used to fake an open Dialog.
|
|
// Usage: native label below is a preserved Reference fixture. New HM React fields use public Label
|
|
// with the actual control id (docs/components/label.md §5); fixture actions are not screen requirements.
|
|
|
|
const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 Dialog 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(8)
|
|
|
|
function Frame({
|
|
trigger,
|
|
defaultOpen,
|
|
title,
|
|
description,
|
|
children,
|
|
actions,
|
|
contentStyle,
|
|
}: {
|
|
trigger: string
|
|
defaultOpen?: boolean
|
|
title: string
|
|
description?: string
|
|
children: ReactNode
|
|
actions?: ReactNode
|
|
contentStyle?: CSSProperties
|
|
}) {
|
|
return (
|
|
<Dialog defaultOpen={defaultOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="primary" appearance="outline">
|
|
{trigger}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent style={contentStyle}>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
{description ? <DialogDescription>{description}</DialogDescription> : null}
|
|
</DialogHeader>
|
|
<DialogBody>{children}</DialogBody>
|
|
<DialogFooter>{actions}</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
const confirmActions = (
|
|
<>
|
|
<DialogClose asChild>
|
|
<Button variant="cancel" appearance="solid">
|
|
취소
|
|
</Button>
|
|
</DialogClose>
|
|
<DialogClose asChild>
|
|
<Button variant="primary" appearance="solid">
|
|
확인
|
|
</Button>
|
|
</DialogClose>
|
|
</>
|
|
)
|
|
|
|
const deleteActions = (
|
|
<>
|
|
<DialogClose asChild>
|
|
<Button variant="cancel" appearance="solid">
|
|
취소
|
|
</Button>
|
|
</DialogClose>
|
|
<DialogClose asChild>
|
|
<Button variant="destructive" appearance="solid">
|
|
삭제
|
|
</Button>
|
|
</DialogClose>
|
|
</>
|
|
)
|
|
|
|
function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="기본" defaultOpen={defaultOpen} title="작업 확인" description="현재 작업을 계속 진행하시겠습니까?" actions={confirmActions}>
|
|
<p>짧은 내용의 Dialog는 내용 기준 크기입니다.</p>
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
function LongContent({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 세로로 scroll 합니다." actions={confirmActions}>
|
|
{Array.from({ length: 6 }, (_, i) => (
|
|
<p key={i} className="mb-4">
|
|
{longText}
|
|
</p>
|
|
))}
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
// ui_viz "세로 스크롤 · 본문만": the max height also leaves out the app common Header 70px / Footer 48px. The Dialog renders in a Portal,
|
|
// so the app heights are passed on DialogContent as Dialog Tokens, not on a wrapper around the trigger.
|
|
const appBars = { "--hm-dialog-app-header-height": "70px", "--hm-dialog-app-footer-height": "48px" } as CSSProperties
|
|
|
|
function BodyScroll({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame
|
|
trigger="본문 스크롤"
|
|
defaultOpen={defaultOpen}
|
|
title="본문 스크롤"
|
|
description="공통 Header 70px / Footer 48px를 뺀 높이 안에서 Body만 세로로 scroll 합니다."
|
|
actions={confirmActions}
|
|
contentStyle={appBars}
|
|
>
|
|
{Array.from({ length: 60 }, (_, i) => (
|
|
<p key={i}>검토 기록 {i + 1}. 현장 조사와 부재별 검토 내용을 확인하고 후속 조치를 기록합니다.</p>
|
|
))}
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
// The wide case composes the HM Table primitive (same as the Table Story), so it carries the Table look inside the Dialog Portal.
|
|
const wideColumns = Array.from({ length: 10 }, (_, i) => `컬럼 ${i + 1}`)
|
|
|
|
function WideContent({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="넓은 표" defaultOpen={defaultOpen} title="넓은 내용" description="표처럼 줄이기 어려운 내용은 Body 안에서 가로 scroll 합니다." actions={confirmActions}>
|
|
<Table style={{ minWidth: 1600 }}>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{wideColumns.map((c) => (
|
|
<TableHead key={c}>{c}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{Array.from({ length: 4 }, (_, r) => (
|
|
<TableRow key={r}>
|
|
{wideColumns.map((_, c) => (
|
|
<TableCell key={c}>{`행 ${r + 1} · 열 ${c + 1}`}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
function DeleteConfirmation({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="삭제 확인" defaultOpen={defaultOpen} title="항목 삭제" description="삭제하면 되돌릴 수 없습니다." actions={deleteActions}>
|
|
<p>선택한 항목을 삭제합니다. 취소와 삭제 실행은 같은 크기의 Standard Solid 세트입니다.</p>
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
function FormContent({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={confirmActions}>
|
|
<div className="grid gap-2">
|
|
<label htmlFor="dialog-form-name" className="text-sm font-medium text-muted-foreground">
|
|
프로젝트명
|
|
</label>
|
|
<Input id="dialog-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
|
|
</div>
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Components/Overlay/Dialog", component: Dialog, parameters: { layout: "centered" } } satisfies Meta<typeof Dialog>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// Representative Story: the common Story page; every case opens from its trigger. Named after the component, as in ui_viz.
|
|
// It is the only Dialog entry in the default sidebar, so Storybook shows Dialog as a single 1-depth item.
|
|
export const All: Story = {
|
|
name: "Dialog",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
kicker={STORY_KICKER.components}
|
|
title="Dialog"
|
|
description="현재 화면 위에 내용을 띄워 확인·입력을 받는 모달입니다. 각 버튼을 눌러 실제 Dialog를 엽니다."
|
|
/>
|
|
<StorySection title="Overview" description="짧은 내용의 Dialog는 내용 기준 크기입니다.">
|
|
<Basic />
|
|
</StorySection>
|
|
<StorySection title="Variants" description="내용이 길거나 넓으면 Body 안에서만 scroll 합니다. 본문 스크롤은 공통 Header 70px / Footer 48px를 뺀 높이를 씁니다.">
|
|
<div className="flex flex-wrap gap-3">
|
|
<LongContent />
|
|
<WideContent />
|
|
<BodyScroll />
|
|
</div>
|
|
</StorySection>
|
|
<StorySection title="Usage" description="일반 확인과 삭제 확인 모두 취소·실행을 Standard Solid 세트로 구성합니다.">
|
|
<div className="flex flex-wrap gap-3">
|
|
<DeleteConfirmation />
|
|
<FormContent />
|
|
</div>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
// Verification Stories: the same cases starting open, hidden from the sidebar (tag `verification`).
|
|
export const Open: Story = { tags: ["verification"], render: () => <Basic defaultOpen /> }
|
|
export const LongContentOpen: Story = { tags: ["verification"], name: "Long Content", render: () => <LongContent defaultOpen /> }
|
|
export const WideContentOpen: Story = { tags: ["verification"], name: "Wide Content", render: () => <WideContent defaultOpen /> }
|
|
export const BodyScrollOpen: Story = { tags: ["verification"], name: "Body Scroll", render: () => <BodyScroll defaultOpen /> }
|
|
export const DeleteConfirmationOpen: Story = { tags: ["verification"], name: "Delete Confirmation", render: () => <DeleteConfirmation defaultOpen /> }
|