124 lines
4.5 KiB
TypeScript
124 lines
4.5 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
// Usage: preserved native label fixtures do not define a new-screen exception. Use public Label
|
|
// for supported fields (docs/components/label.md §5); copy only actions requested by the screen.
|
|
import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Input } from "@hm-design/ui"
|
|
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Drawer is a modal vaul overlay (Portal). The representative Story opens the real Drawer from its triggers; drag the handle or
|
|
// the panel down to dismiss. The same cases start open in the verification Stories. vaul owns the drag, Radix the focus and ARIA.
|
|
|
|
const longText = "긴 내용은 Body 영역만 세로로 scroll 하고 Header와 Footer는 그대로 보입니다. "
|
|
|
|
function Frame({
|
|
trigger,
|
|
defaultOpen,
|
|
title,
|
|
description,
|
|
children,
|
|
actions,
|
|
}: {
|
|
trigger: string
|
|
defaultOpen?: boolean
|
|
title: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
actions?: React.ReactNode
|
|
}) {
|
|
return (
|
|
<Drawer defaultOpen={defaultOpen}>
|
|
<DrawerTrigger asChild>
|
|
<Button variant="primary" appearance="outline">
|
|
{trigger}
|
|
</Button>
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>{title}</DrawerTitle>
|
|
{description ? <DrawerDescription>{description}</DrawerDescription> : null}
|
|
</DrawerHeader>
|
|
<DrawerBody>{children}</DrawerBody>
|
|
<DrawerFooter>{actions}</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
const actions = (
|
|
<>
|
|
<DrawerClose asChild>
|
|
<Button variant="cancel" appearance="solid">
|
|
취소
|
|
</Button>
|
|
</DrawerClose>
|
|
<DrawerClose asChild>
|
|
<Button variant="primary" appearance="solid">
|
|
실행
|
|
</Button>
|
|
</DrawerClose>
|
|
</>
|
|
)
|
|
|
|
function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="기본" defaultOpen={defaultOpen} title="작업 선택" description="아래에서 올라오는 패널입니다. 핸들을 아래로 끌어 닫을 수 있습니다." actions={actions}>
|
|
<p>짧은 내용은 내용 높이만큼만 차지합니다.</p>
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={actions}>
|
|
<div className="grid gap-2">
|
|
<label htmlFor="drawer-form-name" className="text-sm font-medium text-muted-foreground">
|
|
프로젝트명
|
|
</label>
|
|
<Input id="drawer-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
|
|
</div>
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
function LongCase({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 scroll 합니다." actions={actions}>
|
|
{Array.from({ length: 30 }, (_, i) => (
|
|
<p key={i} className="mb-3">
|
|
{longText}
|
|
</p>
|
|
))}
|
|
</Frame>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Components/Overlay/Drawer", component: Drawer, parameters: { layout: "centered" } } satisfies Meta<typeof Drawer>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Drawer",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
kicker={STORY_KICKER.components}
|
|
title="Drawer"
|
|
description="화면 아래에서 올라오는 모달 패널입니다. 핸들이나 패널을 아래로 끌어 닫습니다."
|
|
/>
|
|
<StorySection title="Overview" description="데스크톱: 하단 우측 가로 취소 → 실행. 모바일(640px 이하): 전체 폭 세로 실행 위 / 취소 아래. 같은 Drawer를 화면 폭에 맞춰 확인합니다.">
|
|
<Basic />
|
|
</StorySection>
|
|
<StorySection title="Usage" description="폼 입력 조합과, 내용이 길 때 Body만 scroll 하는 경우입니다.">
|
|
<div className="flex flex-wrap gap-3">
|
|
<FormCase />
|
|
<LongCase />
|
|
</div>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Open: Story = { tags: ["verification"], render: () => <Basic defaultOpen /> }
|
|
export const Form: Story = { tags: ["verification"], render: () => <FormCase defaultOpen /> }
|
|
export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongCase defaultOpen /> }
|