PhotoDialog

Stateful photos lightbox island: prev/next navigation, panel toggle, history sync.

Media & Icons

Default (multi-photo, prev + next enabled)

No caption content (first photo)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for PhotoDialog — the stateful island wrapper around PhotoDialogContent // (epic #1647, wave 6, gap batch #1661). See photo-dialog-content.stories.tsx // for the presentational markup states (caption panel, boundary nav, etc.); // this file exercises the real prev/next + history-sync behaviour. // // `syncUrl={false}` disables every `window.history` mutation (pushState / // popstate) so mounting the dialog in the styleguide preview iframe doesn't // rewrite the catalog's own URL — showModal() and the body-scroll lock still // run unconditionally (see use-photo-dialog-history.ts), so the dialog still // opens for real. Mock photo `variants` point at the real /photos/variants/* // namespace — see the photo-dialog-content story for why (the styleguide's // image-placeholder plugin covers it, #2084). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PhotoDialog, type PhotoDialogProps } from './photo-dialog'; import type { PhotoDialogPhoto } from './photo-dialog-content'; const meta: StoryMeta = { title: 'PhotoDialog', category: 'Media & Icons', description: 'Stateful photos lightbox island: prev/next navigation, panel toggle, history sync.', usage: `import { PhotoDialog } from '@/src/components/photos/photo-dialog';\n\n<PhotoDialog photos={photos} initialSlug={photos[0].slug} locale="ja" />`, }; export default meta; function makePhoto(index: number, overrides: Partial<PhotoDialogPhoto> = {}): PhotoDialogPhoto { const slug = `sg-photo-dialog-island-demo-${index}`; return { slug, takenAt: '2025-06-01T09:00:00Z', uploadedAt: '2025-06-01T10:00:00Z', variants: { '400w': `/photos/variants/${slug}/400w.webp`, '800w': `/photos/variants/${slug}/800w.webp`, '1600w': `/photos/variants/${slug}/1600w.webp`, }, dimensions: { w: 4000, h: 3000 }, aspectRatio: 1.3333, orientation: 'landscape', ...overrides, }; } const captionedPhotos: PhotoDialogPhoto[] = [ makePhoto(1, { description: '1枚目: フロントパネル全体', hashtags: ['modular'] }), makePhoto(2, { description: '2枚目: ノブのクローズアップ', hashtags: ['modular', 'closeup'] }), makePhoto(3, { description: '3枚目: 背面パネル' }), ]; const barePhotos: PhotoDialogPhoto[] = [makePhoto(4), makePhoto(5)]; export const Default = defineStory<PhotoDialogProps>({ name: 'Default (multi-photo, prev + next enabled)', render: () => ( <PhotoDialog photos={captionedPhotos} initialSlug={captionedPhotos[1]!.slug} locale="ja" syncUrl={false} /> ), }); export const NoCaptionContent = defineStory<PhotoDialogProps>({ name: 'No caption content (first photo)', render: () => ( <PhotoDialog photos={barePhotos} initialSlug={barePhotos[0]!.slug} locale="ja" syncUrl={false} /> ), });