import { HomeArticleItem, articleSummaryToHomeArticleItemProps } from './home-article-item';
import { createMockArticleSummary } from '@/components/__test-utils__/mock-article';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';
export const meta = {
title: 'Home/HomeArticleItem',
};
export const controls: ControlsMap = {
title: { type: 'text', default: 'Mutable Instruments Plaits 商品詳細' },
description: {
type: 'text',
default:
'Plaitsはマクロオシレーターの後継モジュールで、16種類のシンセシスモデルを搭載しています。',
},
};
/**
* Default - article with image, description, tags, and dates
*/
export const Default = {
args: {
title: 'Mutable Instruments Plaits 商品詳細',
description:
'Plaitsはマクロオシレーターの後継モジュールで、16種類のシンセシスモデルを搭載しています。',
},
render: ({ title, description }: { title: string; description: string }) => (
<HomeArticleItem
title={title}
imageSlug="1-front"
date="2024-06-15"
updatedAt="2024-08-20"
description={description}
tags={['product-intro', 'oscillator']}
href="/products/plaits-intro"
locale="ja"
/>
),
};
/**
* With adapter function
*/
export const WithAdapter = () => (
<HomeArticleItem
{...articleSummaryToHomeArticleItemProps(
createMockArticleSummary({
slug: 'plaits-intro',
title: 'Mutable Instruments Plaits 商品詳細',
description:
'Plaitsはマクロオシレーターの後継モジュールで、16種類のシンセシスモデルを搭載しています。',
createdAt: '2024-06-15',
updatedAt: '2024-08-20',
imageSlug: '1-front',
tags: ['product-intro', 'oscillator'],
}),
)}
/>
);
/**
* With image - article showing a product thumbnail
*/
export const WithImage = () => (
<HomeArticleItem
{...articleSummaryToHomeArticleItemProps(
createMockArticleSummary({
slug: 'addac207-intro',
title: 'ADDAC207 Intuitive Quantizer 商品詳細',
description: '直感的なクオンタイザーモジュール。ノブとCVでスケールを自在にコントロール。',
createdAt: '2024-04-10',
imageSlug: 'addac207-0-front',
tags: ['product-intro'],
}),
)}
/>
);
/**
* News article - uses NewsThumb instead of image
*/
export const NewsArticle = () => (
<HomeArticleItem
{...articleSummaryToHomeArticleItemProps(
createMockArticleSummary({
slug: 'news-vol-5',
title: 'Takazudo Modular News Vol.5',
description: '最新の入荷情報とイベントのお知らせ。',
createdAt: '2024-01-20',
news_no: 5,
}),
)}
/>
);
/**
* Guide article - with content type prefix
*/
export const GuideArticle = () => (
<HomeArticleItem
{...articleSummaryToHomeArticleItemProps(
createMockArticleSummary({
slug: 'power-guide-vol1',
title: 'モジュラーシンセ電源入門 その1: 電源の基礎知識',
description: 'モジュラーシンセの電源について基礎から解説します。',
createdAt: '2024-06-01',
imageSlug: 'addac104-0-front',
tags: ['guide', 'power'],
contentType: 'guides',
}),
)}
/>
);
/**
* English locale
*/
export const EnglishLocale = () => (
<HomeArticleItem
{...articleSummaryToHomeArticleItemProps(
createMockArticleSummary({
slug: 'acids-intro',
title: 'ACIDS Operator Product Details',
description: 'The ACIDS Operator module delivers innovative FM synthesis.',
createdAt: '2024-07-20',
updatedAt: '2024-09-01',
imageSlug: 'acids-0-front',
tags: ['product-intro', 'oscillator'],
}),
'en',
)}
/>
);
/**
* Flat props directly - no adapter
*/
export const FlatProps = () => (
<HomeArticleItem
title="Direct Flat Props Example"
imageSlug="1-front"
date="2024-06-15"
updatedAt="2024-08-20"
description="This story uses flat props directly without the adapter function."
tags={['example', 'flat-props']}
href="/notes/example"
locale="ja"
/>
);