Reactにstorybookをインストールする

$ create-react-app app
$ cd app 
$ yarn -p @storybook/cli sb init
$ yarn storybook

http://localhost:6006/にアクセス

便利なアドオンの紹介

https://github.com/storybookjs/storybook/tree/next/addons

@storybook/addon-info
Markdownでコンポーネントに対する説明ができるようになります。
これと似たもので@storybook/addon-notesも存在します。

@storybook/addon-viewport
デバイスごとのUIを確認することができるようになります。

$ yarn add @storybook/addon-info @storybook/addon-viewport -D

.storybook/preview.js

import { addDecorator } from ‘@storybook/react’;
import { withInfo } from ‘@storybook/addon-info’;
import ‘@storybook/addon-viewport/register’;

addDecorator(withInfo);

export const parameters = {
actions: { argTypesRegex: “^on[A-Z].*” },
}

これでアドオンを読み込めます。

実際にstoriesを書いてみる

import React from ‘react’;
import { Story, Meta } from ‘@storybook/react/types-6-0’;
import { Button, ButtonProps } from ‘../components/atoms/Button’;

export default {
title: ‘Atoms/Button’,
component: Button,
argTypes: {
buttonColor: {
control: ‘color’
},
},
parameters: {
info: {
text: 基本的なボタンコンポーネントになります
},
},
} as Meta;

const Template: Story = (args) =>

関連記事