NotifyMeDialog

Restock-notification signup dialog (email field, loading/success/error states).

Forms & Dialogs

Default

Product nameProduct slug

Without product name

Success state

Error state (mocked)

Duplicate email error

Loading state

Always open

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for NotifyMeDialog — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) in wave 3 (epic #1647, #1656). // // This dialog POSTs to `/api/notify-signup`, so its variants OPT INTO MSW via // the `Story.msw` scenario string. The scenario → handler mapping lives in the // preview island's browser-only mock feature // (`sub-packages/styleguide/src/styleguide/preview/mocks/notify-api-handlers.ts`): // this story file itself imports NO `msw` (that would drag msw's module-level // browser globals into zfb's static route eval and break the build). Scenarios: // - `notify` → happy path (type `duplicate@example.com` for the 409 branch) // - `notify-error` → forced 500 // - `notify-loading` → 5s delay, to observe the loading spinner import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { DialogStoryContainer } from '@lib/styleguide/dialog-story-container'; import { NotifyMeDialog } from './notify-me-dialog'; import { ActionButton } from '@takazudo-modular/ui-preact/action-button'; const meta: StoryMeta = { title: 'NotifyMeDialog', category: 'Forms & Dialogs', description: 'Restock-notification signup dialog (email field, loading/success/error states).', usage: `import { NotifyMeDialog } from '@/components/notify-dialog/notify-me-dialog';\n\n<NotifyMeDialog isOpen={isOpen} onClose={close} productSlug="mock-incoming" productName="Incoming Product" />`, }; export default meta; /** Interactive wrapper: a trigger button that opens the dialog into the local portal. */ const DialogWrapper = ({ productSlug, productName, buttonLabel = '入荷通知を受け取る', }: { productSlug: string; productName?: string; buttonLabel?: string; }) => { const [isOpen, setIsOpen] = useState(false); return ( <DialogStoryContainer> {(portalContainer) => ( <div className="p-hgap-sm"> <ActionButton onClick={() => setIsOpen(true)}>{buttonLabel}</ActionButton> <NotifyMeDialog isOpen={isOpen} onClose={() => setIsOpen(false)} productSlug={productSlug} productName={productName} portalContainer={portalContainer} /> </div> )} </DialogStoryContainer> ); }; interface NotifyMeDialogArgs { productName: string; productSlug: string; } export const Default = defineStory<NotifyMeDialogArgs>({ name: 'Default', msw: 'notify', controls: [ { type: 'text', prop: 'productName', label: 'Product name', defaultValue: 'Incoming Product' }, { type: 'text', prop: 'productSlug', label: 'Product slug', defaultValue: 'mock-incoming' }, ], render: ({ productName = 'Incoming Product', productSlug = 'mock-incoming' } = {}) => ( <DialogWrapper productSlug={productSlug} productName={productName || undefined} /> ), }); export const WithoutProductName = defineStory({ name: 'Without product name', msw: 'notify', render: () => <DialogWrapper productSlug="mock-product" />, }); /** Success-state scene — dialog starts OPEN so a real submit shows the success UI. */ const SuccessStateScene = () => { const [isOpen, setIsOpen] = useState(true); return ( <DialogStoryContainer> {(portalContainer) => ( <div className="p-hgap-sm"> <p className="text-zd-white pb-vgap-sm"> このストーリーは成功状態をテストするためのものです。 <br /> 実際にメールを入力して送信すると、成功メッセージが表示されます。 </p> <ActionButton onClick={() => setIsOpen(true)}>ダイアログを開く</ActionButton> <NotifyMeDialog isOpen={isOpen} onClose={() => setIsOpen(false)} productSlug="mock-incoming" productName="Sample Product" portalContainer={portalContainer} /> </div> )} </DialogStoryContainer> ); }; export const SuccessState = defineStory({ name: 'Success state', msw: 'notify', render: () => <SuccessStateScene />, }); export const ErrorState = defineStory({ name: 'Error state (mocked)', msw: 'notify-error', render: () => <DialogWrapper productSlug="mock-incoming" productName="Error Test Product" />, }); export const DuplicateEmailError = defineStory({ name: 'Duplicate email error', msw: 'notify', render: () => ( <div> <p className="text-zd-white pb-vgap-sm"> duplicate@example.com を入力すると重複エラーが表示されます。 </p> <DialogWrapper productSlug="mock-incoming" productName="Duplicate Test" /> </div> ), }); export const LoadingState = defineStory({ name: 'Loading state', msw: 'notify-loading', render: () => <DialogWrapper productSlug="mock-incoming" productName="Loading Test Product" />, }); export const AlwaysOpen = defineStory({ name: 'Always open', msw: 'notify', render: () => ( <DialogStoryContainer> {(portalContainer) => ( <NotifyMeDialog isOpen={true} onClose={() => {}} productSlug="mock-incoming" productName="Visual Test Product" portalContainer={portalContainer} /> )} </DialogStoryContainer> ), });