GuideArticleList

Grid container of GuideArticleListItem cards for a list of guide articles.

Lists & Cards

Default

Count6

Single item

Two items

Empty

import { computed } from '@takazudo/zfb/zudo-react'; /** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Story for GuideArticleList — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave 3a batch C). // // `GuideArticleListProps` isn't exported from `./guide-article-list`, so // `Default`'s control is typed against a local scene-args interface // (`GuideArticleListArgs`) covering just the arg the control drives (`count`, // which slices the mock article 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 { GuideArticleList } from './guide-article-list'; import { createMockArticleSummary } from '@/components/__test-utils__/mock-article'; import type { ArticleSummary } from '@/lib/articles/get-all-articles'; const meta: StoryMeta = { title: 'GuideArticleList', category: 'Lists & Cards', description: 'Grid container of GuideArticleListItem cards for a list of guide articles.', usage: `import { GuideArticleList } from '@/components/list/guide-article-list';\n\n<GuideArticleList articles={articles} />`, }; export default meta; const mockArticles: ArticleSummary[] = [ createMockArticleSummary({ slug: 'col005-power', title: 'モジュラーシンセ電源入門その1: 電源の基礎知識', description: 'モジュラーシンセの電源について基礎から解説します。', createdAt: '2024-06-01', imageSlug: 'https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp', tags: ['guide'], contentType: 'guides', }), createMockArticleSummary({ slug: 'col001-diy-kits', title: 'DIYキット入門その1: DIYキットとは', description: 'シンセDIYとDIYキットについて解説します。', createdAt: '2024-03-10', updatedAt: '2024-05-20', imageSlug: 'https://takazudomodular.com/images/p/column-001-cover/1200w.webp', tags: ['guide'], contentType: 'guides', }), createMockArticleSummary({ slug: 'how-to-build-zudo-block', title: 'ZUDO BLOCKの組み立て方', description: 'ZUDO BLOCKの組み立て手順を解説します。', createdAt: '2025-02-01', imageSlug: 'https://takazudomodular.com/images/p/zudo-block-build__og/1200w.webp', tags: ['guide'], contentType: 'guides', }), createMockArticleSummary({ slug: 'oxi-one-guide1', title: 'OXI ONE 解説その1: 全体の設定とMono modeの操作', description: 'OXI ONEシーケンサーの基本操作を解説します。', createdAt: '2023-10-24', imageSlug: 'https://takazudomodular.com/images/p/oxi-front/1200w.webp', tags: ['guide'], contentType: 'guides', }), createMockArticleSummary({ slug: 'col006-power-vol2', title: 'モジュラーシンセ電源入門その2: 電源モジュールの選び方', description: '電源モジュールの選び方について解説します。', createdAt: '2024-07-15', updatedAt: '2024-12-01', imageSlug: 'https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp', tags: ['guide'], contentType: 'guides', }), createMockArticleSummary({ slug: 'col002-diy-tools', title: 'DIYキット入門その2: 必要な道具', description: 'DIYキットの組み立てに必要な道具を解説します。', createdAt: '2024-04-20', imageSlug: 'https://takazudomodular.com/images/p/column-001-cover/1200w.webp', tags: ['guide'], contentType: 'guides', }), ]; /** Scene args for the interactive Default variant — `count` slices the mock article list. */ interface GuideArticleListArgs { count: number; } export const Default = defineStory<GuideArticleListArgs>({ name: 'Default', renderLive: (args) => ( <GuideArticleList articles={computed(() => mockArticles.slice(0, args.value.count ?? 6))} /> ), controls: [{ type: 'number', prop: 'count', label: 'Count', defaultValue: 6, min: 0, max: 6 }], render: ({ count = 6 } = {}) => <GuideArticleList articles={mockArticles.slice(0, count)} />, }); export const SingleItem = defineStory({ name: 'Single item', render: () => <GuideArticleList articles={[mockArticles[0]!]} />, }); export const TwoItems = defineStory({ name: 'Two items', render: () => <GuideArticleList articles={mockArticles.slice(0, 2)} />, }); export const Empty = defineStory({ name: 'Empty', render: () => <GuideArticleList articles={[]} />, });