BaseDialog

Foundational modal dialog: portal, focus trap, fade/scale animation, Escape to close.

Forms & Dialogs

Default

Title

With form content

Long content

Wide (size lg)

Always open

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for BaseDialog — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) in wave 3 (epic #1647, #1656). // // BaseDialog is the foundational modal used by NotifyMeDialog / ReservationDialog: // portal rendering (here into a local `DialogStoryContainer` so the modal stays // inside the preview frame), focus trap, fade/scale animation, Escape-to-close. // No network — this story needs no MSW. import { useState } from 'preact/hooks'; import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { DialogStoryContainer } from '@lib/styleguide/dialog-story-container'; import { BaseDialog } from './base-dialog'; import { ActionButton } from '@takazudo-modular/ui-preact/action-button'; const meta: StoryMeta = { title: 'BaseDialog', category: 'Forms & Dialogs', description: 'Foundational modal dialog: portal, focus trap, fade/scale animation, Escape to close.', usage: `import { BaseDialog } from '@/components/notify-dialog/base-dialog';\n\n<BaseDialog isOpen={isOpen} onClose={close} title="基本ダイアログ">\n <p>…</p>\n</BaseDialog>`, }; export default meta; /** Interactive wrapper: a trigger button that opens the dialog into the local portal. */ const DialogWrapper = ({ title, children, buttonLabel = 'ダイアログを開く', }: { title: string; children: ComponentChildren; buttonLabel?: string; }) => { const [isOpen, setIsOpen] = useState(false); return ( <DialogStoryContainer> {(portalContainer) => ( <div className="p-hgap-sm"> <ActionButton onClick={() => setIsOpen(true)}>{buttonLabel}</ActionButton> <BaseDialog isOpen={isOpen} onClose={() => setIsOpen(false)} title={title} portalContainer={portalContainer} > {children} </BaseDialog> </div> )} </DialogStoryContainer> ); }; interface BaseDialogArgs { title: string; } export const Default = defineStory<BaseDialogArgs>({ name: 'Default', controls: [{ type: 'text', prop: 'title', label: 'Title', defaultValue: '基本ダイアログ' }], render: ({ title = '基本ダイアログ' } = {}) => ( <DialogWrapper title={title}> <p className="text-zd-white"> これはベースダイアログコンポーネントのデモです。 <br /> ボタンをクリックしてダイアログを開閉できます。 </p> </DialogWrapper> ), }); export const WithFormContent = defineStory({ name: 'With form content', render: () => ( <DialogWrapper title="フォーム付きダイアログ" buttonLabel="フォームダイアログを開く"> <form className="flex flex-col gap-vgap-sm"> <div> <label htmlFor="demo-email" className="block text-zd-white pb-vgap-2xs"> メールアドレス </label> <input id="demo-email" type="email" className="w-full px-hgap-xs py-vgap-xs text-zd-black bg-zd-white" placeholder="example@example.com" /> </div> <button type="submit" className="px-hgap-md py-vgap-xs bg-zd-link text-zd-white rounded" onClick={(e) => e.preventDefault()} > 送信 </button> </form> </DialogWrapper> ), }); export const LongContent = defineStory({ name: 'Long content', render: () => ( <DialogWrapper title="長いコンテンツ" buttonLabel="長いコンテンツダイアログを開く"> {/* No max-h/overflow wrapper — BaseDialog caps the panel at 80% height and scrolls its own content area (scrollbar at the panel edge). */} <div className="text-zd-white"> <p className="pb-vgap-sm"> これは長いコンテンツを含むダイアログのデモです。コンテンツが長い場合、スクロールが可能です。 </p> {Array.from({ length: 10 }).map((_, i) => ( <p key={i} className="pb-vgap-sm"> 段落 {i + 1}: モジュラーシンセサイザーは、独立したモジュールを組み合わせて音を作り出す電子楽器です。 </p> ))} </div> </DialogWrapper> ), }); export const WideSize = defineStory({ name: 'Wide (size lg)', render: () => ( <DialogStoryContainer> {(portalContainer) => ( <BaseDialog isOpen={true} onClose={() => {}} title="ワイドダイアログ（size lg）" portalContainer={portalContainer} size="lg" > <p className="text-zd-white"> size="lg" は幅80%・最大 max-w-3xl（768px）のワイドプリセットです。 BrandDocsDialogなどコンテンツ量の多いダイアログで使用します。 </p> </BaseDialog> )} </DialogStoryContainer> ), }); export const AlwaysOpen = defineStory({ name: 'Always open', render: () => ( <DialogStoryContainer> {(portalContainer) => ( <BaseDialog isOpen={true} onClose={() => {}} title="常に開いたダイアログ" portalContainer={portalContainer} > <p className="text-zd-white"> このダイアログはスクリーンショットテスト用に常に開いた状態で表示されます。 </p> </BaseDialog> )} </DialogStoryContainer> ), });