Help us understand the problem. What is going on with this article?

StoryBook(React)最初の1歩

More than 1 year has passed since last update.

storybookのセットアップがnpxを使う方法に代わってたのでメモ

wrote: 2019.1.9

install

以下、reactベースで進めるのでcreate-react-app を入れておく

npm i -g create-react-app 

入った事を以下コマンドで確かめる。バージョン番号が表示されればOK

> create-react-app --version
2.1.3

プロジェクト作成

Reactプロジェクト作成

まずはベースとなるReactプロジェクトを作成する。
storybook2という名称で作成する。

create-react-app storybook2

Storybookを入れる

cd storybook2
npx -p @storybook/cli sb init

Storybook実行

yarn storybook

以下のような画面が出ればOK。

image

Story設定ファイル

表示されたStory画面の設定はsrc/stories/index.jsにあります。
以下、便宜上、①と②表記を追加しました。

index.js
import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

// ①
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

//②
storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

解説

①部分

index.js
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

Storybook画面で表示される左サイドメニュー・Welcomeタブにto Storybook項目を追加する。
追加内容は、@storybook/react/src/demo/Welcome.jsで定義されたWelcomeコンポーネントを使う。
WelcomeコンポーネントにはshowAppという引数が設定されているので、showAppに対してlinkTo('Button')を渡す。

②部分

index.js
storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)

Storybook画面で表示される左サイドメニュー・Buttonタブに'with text項目を追加する。

追加内容は、@storybook/react/src/demo/Button.jsで定義されたButtonコンポーネントを使う。
Buttonコンポーネントには children onClick 引数が設定されている。
onClickに対して@storybook/addon-actionsaction('clicked')を渡す。
childrenに対して Hello Button を渡す。

index.js
  .add('with some emoji', () => (

も同様である。

コンポーネントのStorybookへの追加

Custom Button を作成する

./src/components/の下に ButtonCustom.jsを作成し、
./node_modules/@storybook/react/src/demo/Button.jsの内容をコピーします。

ついでに属性もちょっと変えてみます。
以下の例では背景色を青に、文字色を白に変えました。

ButtonCustom.js
import React from "react";
import PropTypes from "prop-types";

const styles = {
  border: "1px solid #eee",
  borderRadius: 3,
  backgroundColor: "#3498db",
  cursor: "pointer",
  fontSize: 15,
  padding: "3px 10px",
  color: "#fff",
  margin: 10
};

const Button = ({ children, onClick }) => (
  <button onClick={onClick} style={styles} type="button">
    {children}
  </button>
);

Button.displayName = "ButtonCustom";
Button.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func
};
Button.defaultProps = {
  onClick: () => {}
};

export default Button;

ButtonCustomを使う

src/stories/index.js を編集します。

importを追加。

src/stories/index.js
import ButtonCustom from '../components/ButtonCustom';

storiesOfを追加します。

src/stories/index.js
storiesOf("ButtonCustom", module).add("blue back", () => (
  <ButtonCustom onClick={action("clicked")}>Hello Button</ButtonCustom>
));

保存してブラウザをリロードします。
以下のようにButtonCustomコンポーネントが表示されればOK

image

ButtonCustomの色を変更可能にする

CSSを変更できるボタンコンポーネントを作成します。

ButtonCustomBackgroundColor.js
import React from "react";
import PropTypes from "prop-types";

const styles = backgroundColor => ({
  border: "1px solid #eee",
  borderRadius: 3,
  backgroundColor: backgroundColor ? backgroundColor : "#3498db",
  cursor: "pointer",
  fontSize: 15,
  padding: "3px 10px",
  color: "#fff",
  margin: 10
});

const Button = ({ children, onClick, backgroundColor }) => (
  <button onClick={onClick} style={styles(backgroundColor)} type="button">
    {children}
  </button>
);

Button.displayName = "ButtonCustom";
Button.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func
};
Button.defaultProps = {
  onClick: () => {}
};

export default Button;

以下のようにbackgroundColorを指定したタグをストーリーに追加します。

    <ButtonCustomBackgroundColor
      onClick={action("clicked")}
      backgroundColor="#ff0000"
    >

以下のようになります。

src/stories/index.js
storiesOf("ButtonCustom", module)
  .add("blue back", () => (
    <ButtonCustom onClick={action("clicked")}>Hello Button</ButtonCustom>
  ))
  .add("red back", () => (
    <ButtonCustomBackgroundColor
      onClick={action("clicked")}
      backgroundColor="#ff0000"
    >
      Button1
    </ButtonCustomBackgroundColor>
  ))
  .add("green back", () => (
    <ButtonCustomBackgroundColor
      onClick={action("clicked")}
      backgroundColor="#00ff00"
    >
      Button2
    </ButtonCustomBackgroundColor>
  ));

結果

3種類のボタンが出るようになりました。

image
image
image

ソース

今回のソースは以下に保管しました。

sugasaki/storybook-react-firststep1

おまけ

IE11対応

@babel/polyfillを入れる

yarn add @babel/polyfill

.storybook/addons.jsの先頭に以下を追記

.storybook/addons.js
import "@babel/polyfill";

参考

Storybook not working in IE11 · Issue #4099 · storybooks/storybook

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした