113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Button, Input, Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@hm-design/ui"
|
|
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Popover is a non-modal Radix overlay (Portal). The representative Story opens the real panels from their triggers;
|
|
// the verification Story starts one open. Radix owns outside click / Escape close and focus return.
|
|
|
|
function Info({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<Popover defaultOpen={defaultOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="primary" appearance="outline">
|
|
정보 보기
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent aria-label="프로젝트 안내">
|
|
<div className="grid gap-1">
|
|
<p className="font-bold">프로젝트 안내</p>
|
|
<p>일정과 담당자 정보를 현재 화면 위에서 확인합니다. 바깥을 누르거나 Esc를 누르면 닫힙니다.</p>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
function FormPanel() {
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="primary" appearance="outline">
|
|
이름 변경
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="start" aria-label="프로젝트 이름 변경">
|
|
<div className="grid gap-3">
|
|
<label htmlFor="popover-name" className="text-sm font-medium text-muted-foreground">
|
|
프로젝트명
|
|
</label>
|
|
<Input id="popover-name" size="medium" placeholder="프로젝트명을 입력하세요" />
|
|
<div className="flex justify-end gap-2">
|
|
<PopoverClose asChild>
|
|
<Button variant="cancel" appearance="solid" size="sm">
|
|
취소
|
|
</Button>
|
|
</PopoverClose>
|
|
<PopoverClose asChild>
|
|
<Button variant="primary" appearance="solid" size="sm">
|
|
저장
|
|
</Button>
|
|
</PopoverClose>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
function Aligned() {
|
|
return (
|
|
<div className="flex w-full max-w-md justify-between gap-3">
|
|
{(["start", "center", "end"] as const).map((align) => (
|
|
<Popover key={align}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="primary" appearance="outline" size="sm">
|
|
{`align ${align}`}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align={align} side="bottom" aria-label={`정렬 예제: ${align}`}>
|
|
<p>{`align="${align}"`}</p>
|
|
</PopoverContent>
|
|
</Popover>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Components/Overlay/Popover", component: Popover, parameters: { layout: "centered" } } satisfies Meta<typeof Popover>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Popover",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
kicker={STORY_KICKER.components}
|
|
title="Popover"
|
|
description="Trigger 옆에 상호작용 가능한 패널을 띄우는 비모달 overlay입니다. 바깥 클릭이나 Esc로 닫힙니다."
|
|
/>
|
|
<StorySection title="Overview" description="버튼을 눌러 안내 패널을 엽니다.">
|
|
<Info />
|
|
</StorySection>
|
|
<StorySection title="Variants" description="align: start / center / end.">
|
|
<Aligned />
|
|
</StorySection>
|
|
<StorySection title="Usage" description="패널 안의 입력 폼 조합입니다. 취소·저장은 PopoverClose로 닫습니다.">
|
|
<FormPanel />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Open: Story = {
|
|
tags: ["verification"],
|
|
parameters: { layout: "fullscreen" },
|
|
render: () => (
|
|
<div className="flex min-h-[320px] justify-center p-8">
|
|
<Info defaultOpen />
|
|
</div>
|
|
),
|
|
}
|