ReactとStorybookを使用してUIコンポーネントを構築する方法

投稿日: 2022-04-20 2022-10-15
タグ: javascript, React

序章

Storybook は、コンポーネントのドキュメント化に使用できるユーザーインターフェイス（UI）ライブラリです。

注：この記事は、ストーリーブックの概要に基づいており、JavaScriptコンポーネントの整理と構築に使用する方法について説明しています。

この記事では、ReactとStorybookを使用してインタラクティブなUIコンポーネントを構築します。

チュートリアルの最後に、ストーリーブックをスタンドアロンアプリケーションとして展開し、スタイルガイドとして機能させます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、Nodev14.4.0で検証されました。 npm v6.14.5、 react v16.13.1、および @storybook/react v5.3.19。

ステップ1—プロジェクトの設定

開始するには、新しいReactプロジェクトを作成する必要があります。このために、Reactアプリケーションのスキャフォールディングに最適なツールであるcreate-react-appを使用します。

npx create-react-app storybook-app

次に、新しく作成されたプロジェクトディレクトリに移動します。

cd storybook-app

そして次のステップはインストールすることです storybook 私たちのプロジェクトにパッケージ化：

npx -p @storybook/cli sb init

このコマンドは、使用しているフレームワークを自動的に検出できます。 package.json そのフレームワークのストーリーブックバージョンをファイルしてインストールします。

両方のコマンドを実行した後、次のことを確認できます @storybook/react を開くことによってインストールされた依存関係 package.json ファイルがインストールされているかどうかを確認してから、アプリケーションを実行したり、Storybookを実行したりできます。

npm start

npm run storybook

両方のコマンドを実行すると、ReactアプリとStorybookアプリの両方が異なるポートで実行されます。

手動で構成を追加する

上記の手順に従った場合は、すでに事前構成されています。インストールした場合 @storybook/react 既存のReactプロジェクトにパッケージ化する場合は、次の手順に従ってストーリーブックを設定する必要があります。

まず、フォルダを作成します .storybook Reactプロジェクトのルートディレクトリにあり、フォルダ内にファイルを作成します。 config.js 次のコード行を追加します。

.storybook / config.js

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

上記のコードのブロックはStorybookの構成であり、Storybookにストーリーを検索するように指示します。 src/stories ディレクトリ。まだ設定されていない場合は、そのフォルダを作成します。以内 src フォルダと呼ばれるフォルダを作成します stories. これは、ストーリーを作成するすべてのコンポーネントが最終的に配置される場所です。

注：ストーリーブック5.3.0以降の紹介 main.js 何を処理します config.js 過去にやった。変更は、公式移行ドキュメントに記載されています。

Storybook 5.3.0以降を使用している場合は、 config.js ファイルし、このステップを無視することができます。

公式ドキュメントは、配置場所に関するさまざまなアプローチも提案しています。 stories.

この時点で、ストーリーブックが使用できるように設定されています。

ステップ2—Reactアプリにストーリーを追加する

セットアップが完了したので、Storybookを使用してコンポーネントを作成できます。

このチュートリアルでは、 <Button> コンポーネントとこのコンポーネントについては、 stories フォルダ。先に進み、作成します <Button> 内のコンポーネント component 次のコード行を含むディレクトリ：

src / components / Button.js

import React from 'react';
import './Button.css';

const Button = props => (
  <button onClick={props.onClick} style={props.style}>
    {props.label && <span>{props.label}</span>}
  </button>
);

export default Button;

そして、コンポーネントのスタイルを追加します。

src / components / Button.css

button {
  padding: 20px;
  width: 20em;
  margin: 10px;
  color: white;
  font-size: 19px;
  cursor: pointer;
  border: 2px solid #fecd43;
  background: #fecd43;
}

今、私たちはのための物語を追加することができます <Button> コンポーネントが作成されました。以内 stories ディレクトリはファイルを作成し、それを呼び出します buttonStories.js 次に、次のコード行をファイルに追加します。

src / stories / buttonStories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';

storiesOf('Button', module)
  .add('with primary', () => <Button label="Primary Button" />)
  .add('with outline', () => <Button
    label="Ouline Button"
    style={{ background: 'transparent', border: '3px solid #fecd43' }}
  />)
  .add('with rounder corners', () => <Button
    label="Rounded Button"
    style={{ borderRadius: '15px' }}
  />)
  .add('disabled', () => <Button disabled
    label="Disabled Button"
    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
  />);

次に、を作成します index.js ファイル。をインポートします buttonStories.js ファイル：

src / stories / index.js

import './buttonStories';

これはすべてのストーリーを含むベースファイルとして機能し、すべてをこのファイルにインポートできます。

注： Storybook 5.3.0以降では、次のファイル名パターンが採用されています。 *.stories.js. この規則に合わせるために、 buttonStories.js 名前を変更する必要があります button.stories.js.

また、生成されたに遭遇する可能性があります 1-Button.stories.js 同じものを使用するデモストーリーのファイル Button 題名。混乱を避けるために、そのファイルの内容をコメントアウトすることができます。

次に、の下で作成されたすべての新しいファイルに対して stories ディレクトリ、これらをこのファイルにインポートします。

ステップ3—アドオンの統合

Storybookを備えたアドオンは、追加機能を実装して、それらをより便利でインタラクティブにするのに役立ちます。 Storybookで利用可能なすべてのアドオンの完全なリストは、公式サイトにあります。

この記事では、 Action 作成されたストーリーへのアドオン。アクションアドオンを使用して、ストーリーブックのイベントハンドラーが受信したデータを表示できます。

アドオンを手動で追加する

アドオンがデフォルトでまだ設定されていない場合は、次の手順に従う必要があります。

注： Storybook 5.3.0以降を使用している場合、このチュートリアルでは、 addons.js ファイルし、このステップを無視することができます。

次のコマンドでアドオンパッケージをインストールします。

npm install --save-dev @storybook/addon-actions

次に、次のコンテンツをに追加します .storybook/addons.js:

.storybook / addons.js

import '@storybook/addon-actions/register';

これで、ストーリーブックはアドオンをサポートします。

ステップ4—アドオンアクションの使用

ButtonストーリーをStorybookとインタラクティブにするために、次のコードを追加できます。 buttonStories.js:

src / stories / buttonStories.js

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

import Button from '../components/Button';

storiesOf('Button', module)
  .add('with primary', () => <Button
    onClick={action('click')}
    label="Primary Button"
  />)
  .add('with outline', () => <Button
    label="Ouline Button"
    onClick={action('click')}
    style={{ background: 'transparent', border: '3px solid #fecd43' }}
  />)
  .add('with rounder corners', () => <Button
    label="Rounded Button"
    onClick={action('click')}
    style={{ borderRadius: '15px' }}
  />)
  .add('disabled', () => <Button disabled
    label="Disabled Button"
    onClick={action('click')}
    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
  />);

次に、ストーリーブックを実行します。

下のタブでは、 Actions tab ボタンを操作するたびにアクションがログに記録されます。

ステップ5—テーマのカスタマイズ

Storybookでは、使用されるデフォルトのテーマをカスタマイズすることができ、Storybookにはデフォルトのライトテーマがバンドルされています。それでは、これを別の何かにカスタマイズする方法を見てみましょう。ダークテーマかもしれませんし、まったく違うものかもしれません。開始するには、設定した構成を変更する必要があります config.js 次のコード行を追加してファイルを作成します。

.storybook / config.js

import { addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

addParameters({
  options: {
    theme: themes.dark
  }
});

注：ストーリーブック5.3.0以降の紹介 manager.js. この新しい規則でテーマを設定する手順は、公式のテーマ作成ドキュメントで説明されています。

ダークテーマを設定すると、ストーリーブックのテーマ全体がダークテーマに切り替わったことがわかります。いつでも、好みに応じて、これを明るいテーマまたは暗いテーマに戻すことができます。

まったく別のテーマが必要な場合は、すぐに動的なテーマを定義することもできます。最初のステップは、テーマのファイルを作成することです。 .storybook フォルダと呼ばれる新しいファイルを作成します yourTheme.js. 次のステップは、を使用して新しいテーマを生成することです create() からの機能 storybook/theming.

これが例です pink.js テーマ：

.storybook / pink.js

import { create } from '@storybook/theming';

export default create ({
  base: 'light',
  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',
  // UI
  appBg: 'rgb(234, 0, 133)',
  appContentBg: 'white',
  appBorderColor: 'white',
  appBorderRadius: 4,
  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',
  // Text colors
  textColor: 'rgb(255, 250, 250)',
  textInverseColor: 'white',
  // Toolbar default and active colors
  barTextColor: 'white',
  barSelectedColor: 'white',
  barBg: 'rgb(246, 153, 190)',
  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,
  brandTitle: 'Pink Storybook'
});

次に、先に進んでインポートできます pink.js Storybook構成ファイルにあります。

.storybook / config.js

import pink from './pink';

addParameters({
  options: {
    theme: pink
  }
});

これにより、前の画像とはまったく異なるテーマが得られます。

ステップ6—ストーリーブックの展開

Storybookにバンドルされている機能の1つは、Storybookを静的サイトとして展開し、選択した任意のホスティングオプションに展開できることです。これを構成するには、を追加する必要があります build-storybook 私たちへのスクリプト package.json:

package.json

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

このスクリプトが行うことは、ストーリーブックディレクトリを静的なWebアプリに構築し、それを .out ディレクトリ。このスクリプトを実行して、 .out ビルドが完了したときのディレクトリ。先に進み、コマンドを実行します。

npm run build-storybook

ビルドが完了すると、任意のホスティングを使用してディレクトリのコンテンツをデプロイできるようになります。

これがローカルで機能することをテストするには、次のコマンドを実行できます。

npx http-server .out

：注：あなたの package.json 特徴があるかもしれません build-storybook 次のようなスクリプト： build-storybook -s public. 指定されたものではなく .out ディレクトリ、これは静的サイトファイルをに出力します storybook-static ディレクトリ。

これにより、フォルダのコンテンツが静的サイトとして提供されます。

結論

この記事では、StorybookとReactを使用してインタラクティブなコンポーネントを構築する方法を学びました。これで、Storybookで何が可能かを探り、StorybookをコンポーネントライブラリとしてReactプロジェクトに統合する方法についてのガイドもあります。 Storybookを使用した開発は、チームで作業する開発者と設計者の両方にとって信頼できる唯一の情報源として機能し、他のフロントエンドフレームワークと統合できます。

この投稿では、Reactでの使用方法についてのみ概説しています。他のフレームワークのガイドをお探しの場合は、Storybookの公式ドキュメントをお気軽に確認してください。

この記事のコードはGitHubにもあります。

getdocs

13036