Guides/SeriesNav

Guide series navigation — the compact top-of-article console bar (SeriesNavConsole) and the bottom prev/next cards + ±2-collapsed episode list (SeriesNavBottom).

Navigation

Console middle

Console first

Console last

Console EN

Bottom middle

Bottom first

Bottom last

Bottom short series

Bottom EN sparse

Bottom unlabelled

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { SeriesNavConsole, SeriesNavBottom } from './series-nav'; import { buildSeriesNavModel, type SeriesNavArticleInput } from './series-nav-model'; /** * Guide series-nav — the "series console" redesign (#1630). * * Two SSR surfaces, both grayscale-minimal (no accent tokens): * - `SeriesNavConsole` — the compact top-of-article bar. * - `SeriesNavBottom` — prev/next cards + the ±2-collapsed episode list * (native `<details>`, no client JS). * * The live components self-fetch from `{ currentSlug, locale }`; these stories * render the presentational sub-components with a model built from fixtures via * the pure `buildSeriesNavModel`. */ const meta: StoryMeta = { title: 'Guides/SeriesNav', category: 'Navigation', description: 'Guide series navigation — the compact top-of-article console bar (SeriesNavConsole) and the bottom prev/next cards + ±2-collapsed episode list (SeriesNavBottom).', usage: `import { SeriesNavConsole, SeriesNavBottom } from '@/src/components/guides/series-nav';\n\n<SeriesNavConsole model={model} locale="ja" />\n<SeriesNavBottom model={model} locale="ja" />`, }; export default meta; // ── Fixtures ──────────────────────────────────────────────────────────────── /** OXI-like 12-episode series (EP.N titles + dates). */ const oxiEpisodes: SeriesNavArticleInput[] = [ { slug: 'oxi-ep1', title: 'OXI ONE MKII 解説 EP.1: 全体像を把握する', date: '2026-02-14' }, { slug: 'oxi-ep2', title: 'OXI ONE MKII 解説 EP.2: Mono Mode を使いこなす', date: '2026-02-21' }, { slug: 'oxi-ep3', title: 'OXI ONE MKII 解説 EP.3: Grooveで生命を吹き込む', date: '2026-02-28' }, { slug: 'oxi-ep4', title: 'OXI ONE MKII 解説 EP.4: Accumulatorを深掘りする', date: '2026-03-07' }, { slug: 'oxi-ep5', title: 'OXI ONE MKII 解説 EP.5: Poly Modeで和音とパフォーマンス', date: '2026-03-14', }, { slug: 'oxi-ep6', title: 'OXI ONE MKII 解説 EP.6: Random Generatorで種をまく', date: '2026-03-21', }, { slug: 'oxi-ep7', title: 'OXI ONE MKII 解説 EP.7: パターンワークフロー', date: '2026-04-01' }, { slug: 'oxi-ep8', title: 'OXI ONE MKII 解説 EP.8: Matricealモード', date: '2026-04-08' }, { slug: 'oxi-ep9', title: 'OXI ONE MKII 解説 EP.9: Multitrackモード（リズム編）', date: '2026-04-15', }, { slug: 'oxi-ep10', title: 'OXI ONE MKII 解説 EP.10: Multitrackモード（メロディー編）', date: '2026-04-22', }, { slug: 'oxi-ep11', title: 'OXI ONE MKII 解説 EP.11: Modulation Lanes', date: '2026-05-13' }, { slug: 'oxi-ep12', title: 'OXI ONE MKII 解説 EP.12: Domino Mode', date: '2026-07-04' }, ]; // Fixed reference date so the NEW badge is deterministic across story renders. const NOW = new Date('2026-07-11T00:00:00Z'); function model(articles: SeriesNavArticleInput[], currentSlug: string, locale: 'ja' | 'en' = 'ja') { return buildSeriesNavModel({ articles, currentSlug, seriesSlug: 'oxi-one-mkii-guide', seriesName: locale === 'en' ? 'OXI ONE MKII Guide' : 'OXI ONE MKIIガイド', locale, now: NOW, })!; } // ── Top bar ───────────────────────────────────────────────────────────────── export const ConsoleMiddle = defineStory({ name: 'Console middle', render: () => <SeriesNavConsole model={model(oxiEpisodes, 'oxi-ep7')} locale="ja" />, }); export const ConsoleFirst = defineStory({ name: 'Console first', render: () => <SeriesNavConsole model={model(oxiEpisodes, 'oxi-ep1')} locale="ja" />, }); export const ConsoleLast = defineStory({ name: 'Console last', render: () => <SeriesNavConsole model={model(oxiEpisodes, 'oxi-ep12')} locale="ja" />, }); export const ConsoleEn = defineStory({ name: 'Console EN', render: () => <SeriesNavConsole model={model(oxiEpisodes, 'oxi-ep7', 'en')} locale="en" />, }); // ── Bottom block ──────────────────────────────────────────────────────────── /** 12-episode series, viewing EP.7 — gaps on both sides, both collapsed. */ export const BottomMiddle = defineStory({ name: 'Bottom middle', render: () => <SeriesNavBottom model={model(oxiEpisodes, 'oxi-ep7')} locale="ja" />, }); /** Viewing EP.1 — only a "later episodes" disclosure, no prev card. */ export const BottomFirst = defineStory({ name: 'Bottom first', render: () => <SeriesNavBottom model={model(oxiEpisodes, 'oxi-ep1')} locale="ja" />, }); /** Viewing EP.12 — only an "earlier episodes" disclosure, no next card. */ export const BottomLast = defineStory({ name: 'Bottom last', render: () => <SeriesNavBottom model={model(oxiEpisodes, 'oxi-ep12')} locale="ja" />, }); /** Short 4-episode series — window covers everything, no disclosures. */ export const BottomShortSeries = defineStory({ name: 'Bottom short series', render: () => <SeriesNavBottom model={model(oxiEpisodes.slice(0, 4), 'oxi-ep2')} locale="ja" />, }); /** EN sparse collection — untranslated episodes are simply absent. */ export const BottomEnSparse = defineStory({ name: 'Bottom EN sparse', render: () => ( <SeriesNavBottom model={model( [oxiEpisodes[0]!, oxiEpisodes[3]!, oxiEpisodes[6]!, oxiEpisodes[8]!, oxiEpisodes[11]!], 'oxi-ep7', 'en', )} locale="en" /> ), }); /** Titles without an EP label — badges and position degrade gracefully. */ export const BottomUnlabelled = defineStory({ name: 'Bottom unlabelled', render: () => ( <SeriesNavBottom model={model( [ { slug: 'diy-a', title: '組み立てガイド導入編', date: '2026-01-10' }, { slug: 'diy-b', title: 'はんだ付けの基本', date: '2026-01-17' }, { slug: 'diy-c', title: '電源の配線', date: '2026-01-24' }, ], 'diy-b', )} locale="ja" /> ), });