229 lines
9.3 KiB
TypeScript
229 lines
9.3 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 { StateBoard, type BoardState } from "@/components/story-board"
|
|
import { 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-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.
|
|
// 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: the common Story page. Overview is merged into Variants (Basic is its first item).
|
|
export const All: Story = {
|
|
name: "Dialog",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Dialog" />
|
|
<StorySection title="Variants">
|
|
<SpecimenGrid
|
|
states={[
|
|
{ id: "basic", label: "Basic", children: <Basic /> },
|
|
{ id: "long-content", label: "Long Content", children: <LongContent /> },
|
|
{ id: "wide-content", label: "Wide Content", children: <WideContent /> },
|
|
{ id: "body-scroll", label: "Body Scroll", children: <BodyScroll /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Usage">
|
|
<SpecimenGrid
|
|
states={[
|
|
{ id: "delete-confirmation", label: "Delete Confirmation", children: <DeleteConfirmation /> },
|
|
{ id: "form", label: "Form", children: <FormContent /> },
|
|
]}
|
|
/>
|
|
</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 /> }
|