import {
GuideArticleListItem,
articleSummaryToGuideListItemProps,
} from './guide-article-list-item';
import { createMockArticleSummary } from '@/components/__test-utils__/mock-article';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';
export const meta = {
title: 'List/GuideArticleListItem',
};
export const controls: ControlsMap = {
title: { type: 'text', default: 'モジュラーシンセ電源入門 その1: 電源の基礎知識' },
description: { type: 'text', default: 'モジュラーシンセの電源について基礎から解説します。' },
};
/**
* Default - Japanese locale
*/
export const Default = {
args: {
title: 'モジュラーシンセ電源入門 その1: 電源の基礎知識',
description: 'モジュラーシンセの電源について基礎から解説します。',
},
render: ({ title, description }: { title: string; description: string }) => (
<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"
/>
),
};
/**
* With adapter function
*/
export const WithAdapter = () => (
<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',
}),
)}
/>
);
/**
* English locale
*/
export const EnglishLocale = () => (
<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',
}),
)}
/>
);
/**
* Flat props directly - no adapter
*/
export const FlatProps = () => (
<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"
/>
);