SeriesList

Grid container of series cards linking to each guide-article series.

Lists & Cards

Default

Count4

Single item

Empty

import { computed } from '@takazudo/zfb/zudo-react'; /** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Story for SeriesList — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave 3a batch C). // // `SeriesListProps` isn't exported from `./series-list`, so `Default`'s // control is typed against a local scene-args interface (`SeriesListArgs`) // covering just the arg the control drives (`count`, which slices the mock // series list) — the same pattern as the wave-2 `ActionButtonArgs` pilot. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { SeriesList } from './series-list'; const meta: StoryMeta = { title: 'SeriesList', category: 'Lists & Cards', description: 'Grid container of series cards linking to each guide-article series.', usage: `import { SeriesList } from '@/components/list/series-list';\n\n<SeriesList seriesList={seriesList} />`, }; export default meta; const mockSeriesList = [ { slug: 'power', kind: 'topic' as const, name: 'モジュラーシンセ電源入門', description: 'モジュラーシンセの電源について、基礎から実践までを解説するシリーズです。', thumbSlug: 'col-power-denkyu', createdDate: '2024-06-01', updatedDate: '2025-01-15', }, { slug: 'diy', kind: 'topic' as const, name: 'DIYキット入門', description: 'シンセDIYとDIYキットについて、必要な道具や基礎知識を解説するシリーズです。', thumbSlug: 'column-001-cover', createdDate: '2024-03-10', updatedDate: null, }, { slug: 'how-to-build', kind: 'product' as const, name: '組み立てガイド', description: 'Takazudo Modular製品の組み立て方法を詳しく解説するシリーズです。', thumbSlug: 'zudo-block-build', createdDate: '2025-02-01', updatedDate: '2025-12-20', }, { slug: 'oxi-one-guide', kind: 'product' as const, name: 'OXI ONEガイド', description: 'OXI ONEシーケンサーの使い方を日本語で解説するシリーズです。', thumbSlug: 'oxi-front', createdDate: '2023-10-24', updatedDate: '2024-03-15', }, ]; /** Scene args for the interactive Default variant — `count` slices the mock series list. */ interface SeriesListArgs { count: number; } export const Default = defineStory<SeriesListArgs>({ name: 'Default', renderLive: (args) => ( <SeriesList seriesList={computed(() => mockSeriesList.slice(0, args.value.count ?? 4))} /> ), controls: [{ type: 'number', prop: 'count', label: 'Count', defaultValue: 4, min: 0, max: 4 }], render: ({ count = 4 } = {}) => <SeriesList seriesList={mockSeriesList.slice(0, count)} />, }); export const SingleItem = defineStory({ name: 'Single item', render: () => <SeriesList seriesList={[mockSeriesList[0]!]} />, }); export const Empty = defineStory({ name: 'Empty', render: () => <SeriesList seriesList={[]} />, });