Initial commit: HMDesignSystem baseline
This commit is contained in:
shkim4 committed
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,212 @@
|
||||
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.
|
||||
|
||||
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="outline">
|
||||
취소
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<DialogClose asChild>
|
||||
<Button variant="destructive" appearance="outline">
|
||||
삭제
|
||||
</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>선택한 항목을 삭제합니다. 취소와 삭제 실행은 같은 크기의 Outline 세트입니다.</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="일반 확인은 Solid 세트, 삭제 확인은 취소·삭제 모두 Outline 세트입니다.">
|
||||
<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 /> }
|
||||
Reference in new issue
Block a user