Slide 4
Slide 4 text
4
▪ Storybook の規約に則って、”ストーリー” と呼ばれるオ
ブジェクトをエクスポートする JavaScript コードを実装
▪ TypeScript で書けます
▪ ストーリー内では、同居してる Web アプリ本体で実装さ
れている UI コンポーネントをインポートして参照
▪ そのコンポーネントに備わっているパラメータなどのメタ
情報を付加
▪ それらストーリーが Storybook の画面上に表示される
構造
Storybook とは
UI コンポーネントカタログ
// Button.stories.ts|tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta = {
/* The title prop is optional.
* See https://storybook.js.org/docs/react/configure
* /overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export default meta;
type Story = StoryObj;
/*
* Render functions are a framework specific feature
* to allow you control on how the component renders.
* See https://storybook.js.org/docs/react/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ,
};