PhotoDialogContent

Presentational lightbox markup for the photos dialog: image, caption panel, nav.

Media & Icons

With caption panel

Caption panel hidden

No caption content

Boundary navigation (single photo)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for PhotoDialogContent — the pure-presentation half of the photos // lightbox (epic #1647, wave 6, gap batch #1661). Behaviour (showModal/close, // keyboard nav, history sync) lives in the stateful island wrapper, PhotoDialog // (see photo-dialog.stories.tsx) — this file exercises the markup only. // // PhotoDialogContent renders a native <dialog>, which browsers hide until // `.showModal()` is called — there is no `open` prop to force it. OpenDialog // mirrors the base-dialog.stories.tsx wrapper pattern: a small nested // component that calls showModal() in a mount effect, so every variant below // renders already-open. This is safe under the story contract because // Story.render only needs to construct the vnode tree synchronously — the // nested component's hooks run later, when the browser preview actually // mounts it (see contract.test.ts, which calls render() but never mounts it). // // Mock photo `variants` point at the real /photos/variants/* namespace — the // styleguide's image-placeholder plugin's PLACEHOLDER_PREFIXES list covers it // (#2084, sub-packages/styleguide/plugins/placeholder-svg.mjs), so they // resolve to the placeholder SVG instead of 404ing. import { useEffect, useRef } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PhotoDialogContent, type PhotoDialogContentProps, type PhotoDialogPhoto, } from './photo-dialog-content'; const meta: StoryMeta = { title: 'PhotoDialogContent', category: 'Media & Icons', description: 'Presentational lightbox markup for the photos dialog: image, caption panel, nav.', usage: `import { PhotoDialogContent } from '@/src/components/photos/photo-dialog-content';\n\n<PhotoDialogContent photo={photo} photos={photos} locale="ja" panelHidden={false} dialogRef={ref} onClose={close} onTogglePanel={toggle} onPrev={prev} onNext={next} hasPrev hasNext />`, }; export default meta; function makePhoto(overrides: Partial<PhotoDialogPhoto> = {}): PhotoDialogPhoto { const slug = overrides.slug ?? 'sg-photo-dialog-demo'; return { slug, takenAt: '2025-06-01T09:00:00Z', uploadedAt: '2025-06-01T10:00:00Z', variants: overrides.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 noop = () => {}; /** Opens the wrapped dialog on mount so the story previews it already-visible. */ function OpenDialog(props: Omit<PhotoDialogContentProps, 'dialogRef'>) { const dialogRef = useRef<HTMLDialogElement>(null); useEffect(() => { dialogRef.current?.showModal(); }, []); return <PhotoDialogContent {...props} dialogRef={dialogRef} />; } export const WithCaptionPanel = defineStory({ name: 'With caption panel', render: () => ( <OpenDialog photo={makePhoto({ description: 'OXI ONE MKII のフロントパネル。ノブとボタンのレイアウトが一目でわかります。', hashtags: ['modular', 'oxi'], })} photos={[]} locale="ja" panelHidden={false} onClose={noop} onTogglePanel={noop} onPrev={noop} onNext={noop} hasPrev={true} hasNext={true} /> ), }); export const CaptionHidden = defineStory({ name: 'Caption panel hidden', render: () => ( <OpenDialog photo={makePhoto({ description: 'キャプションは存在するが非表示', hashtags: ['eurorack'] })} photos={[]} locale="ja" panelHidden={true} onClose={noop} onTogglePanel={noop} onPrev={noop} onNext={noop} hasPrev={true} hasNext={true} /> ), }); export const NoCaptionContent = defineStory({ name: 'No caption content', render: () => ( <OpenDialog photo={makePhoto({ description: undefined, hashtags: undefined })} photos={[]} locale="ja" panelHidden={false} onClose={noop} onTogglePanel={noop} onPrev={noop} onNext={noop} hasPrev={true} hasNext={true} /> ), }); export const BoundaryNavigation = defineStory({ name: 'Boundary navigation (single photo)', render: () => ( <OpenDialog photo={makePhoto({ description: '最初かつ最後の一枚 — 両方の矢印が無効化されます' })} photos={[]} locale="ja" panelHidden={false} onClose={noop} onTogglePanel={noop} onPrev={noop} onNext={noop} hasPrev={false} hasNext={false} /> ), });