GuideArticleListItem

Card-style list item for a guide article, with image, tags, and dates.

Lists & Cards

Default

TitleDescription

With adapter

English locale

Flat props

import { readInput } from '@/src/components/shared/native-value'; import { computed } from '@takazudo/zfb/zudo-react'; /** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Story for GuideArticleListItem — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave 3a batch C). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { GuideArticleListItem, articleSummaryToGuideListItemProps, type GuideArticleListItemProps, } from './guide-article-list-item'; import { createMockArticleSummary } from '@/components/__test-utils__/mock-article'; const meta: StoryMeta = { title: 'GuideArticleListItem', category: 'Lists & Cards', description: 'Card-style list item for a guide article, with image, tags, and dates.', usage: `import { GuideArticleListItem } from '@/components/list/guide-article-list-item';\n\n<GuideArticleListItem title="..." imageSlug="..." date="..." updatedAt="..." description="..." tags={[]} href="..." />`, }; export default meta; export const Default = defineStory<GuideArticleListItemProps>({ name: 'Default', renderLive: (args) => ( <GuideArticleListItem title={computed(() => readInput(args.value.title ?? 'モジュラーシンセ電源入門その1: 電源の基礎知識'), )} description={computed(() => readInput(args.value.description ?? 'モジュラーシンセの電源について基礎から解説します。'), )} imageSlug="https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp" date="2024-06-01" updatedAt="2024-08-20" tags={['guide', 'power']} href="/guides/col005-power/" locale="ja" /> ), controls: [ { type: 'text', prop: 'title', label: 'Title', defaultValue: 'モジュラーシンセ電源入門その1: 電源の基礎知識', }, { type: 'text', prop: 'description', label: 'Description', defaultValue: 'モジュラーシンセの電源について基礎から解説します。', }, ], render: ({ title = 'モジュラーシンセ電源入門その1: 電源の基礎知識', description = 'モジュラーシンセの電源について基礎から解説します。', } = {}) => ( <GuideArticleListItem title={title} imageSlug="https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp" date="2024-06-01" updatedAt="2024-08-20" description={description} tags={['guide', 'power']} href="/guides/col005-power/" locale="ja" /> ), }); export const WithAdapter = defineStory({ name: 'With adapter', render: () => ( <GuideArticleListItem {...articleSummaryToGuideListItemProps( createMockArticleSummary({ slug: 'col005-power', title: 'モジュラーシンセ電源入門その1: 電源の基礎知識', description: 'モジュラーシンセの電源について基礎から解説します。', createdAt: '2024-06-01', updatedAt: '2024-08-20', imageSlug: 'https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp', tags: ['guide', 'power'], contentType: 'guides', }), )} /> ), }); export const EnglishLocale = defineStory({ name: 'English locale', render: () => ( <GuideArticleListItem {...articleSummaryToGuideListItemProps( createMockArticleSummary({ slug: 'power-guide-vol1', title: 'Modular Synth Power Guide Vol.1: Power Basics', description: 'Learn the basics of modular synthesizer power supply.', createdAt: '2024-06-01', updatedAt: '2024-08-20', imageSlug: 'https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp', tags: ['guide', 'power'], contentType: 'guides', urlPrefix: '/en/guides', }), )} /> ), }); export const FlatProps = defineStory({ name: 'Flat props', render: () => ( <GuideArticleListItem title="Direct Flat Props Example" imageSlug="https://takazudomodular.com/images/p/col-power-denkyu/1200w.webp" date="2024-06-01" updatedAt="2024-08-20" description="This story uses flat props directly without the adapter function." tags={['guide']} href="/guides/example/" locale="ja" /> ), });