ストーリーライブラリを使用してコンポーネントライブラリを作成し、反応アプリを作成します

このポストでは、我々はどのように我々はCreate Reactionアプリ(CRA)を使用してコンポーネントライブラリを作成するストーリーブックを使用する方法を見ていきます.最後に、いくつかのバリエーションを持つシンプルなボタンを作成します.

セットアップ

まずcraを使用してプロジェクトを作成します.このポストでは、我々は糸を使用していますが、NPMを使用する場合は、すべてのコマンドは同様に動作しなければならないので、自由に感じてください.以下のCRAコマンドでは、フラグを追加してください--use-npm NPMプロジェクトとして初期化する.

npx create-react-app component-lib

次のステップは、私たちのプロジェクトにストーリーブックを追加することです.

npx -p @storybook/cli sb init

あなたはこれらの新しい糸のスクリプトをpackage.json :

"scripts": {
  ...
  "storybook": "start-storybook -p 9009 -s public",
  "build-storybook": "build-storybook -s public"
}

注意:使用する絵本のバージョンを書くときは5.3です.
デフォルトでは、ストーリーブックはあなたのすべてのファイルを読むsrc/ 次のディレクトリ.stories.js サフィックス.storybook/main.js )

stories: ['../src/**/*.stories.js'],

このポストの目的のために、我々はそれを簡単にして、我々のすべての物語を配置しますsrc/stories フォルダ.
ストーリーブックを実行するには、次のダッシュボードが表示されます.

yarn storybook

StoryBookは、デモのプロジェクトからボックスのボックスから出てくるが、我々は次のステップで自分自身を作成されます.

独自のコンポーネントの作成

ここでは、いくつかのバリエーションを持つ単純なボタンコンポーネントを作成します.

// src/components/Button.js
import React from 'react';
import './button.css';

const colors = {
  default: 'default',
  primary: 'primary',
  secondary: 'secondary',
};

const Button = ({ children, onClick, color, disabled }) => {
  const className = colors[color] ? `button ${colors[color]}` : 'button';
  return (
    <button className={className} onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
};

export default Button;

コンポーネントのスタイルを以下に定義します.お使いのコンポーネントのスタイリングのあなたの好みの方法を使用して自由に感じる.この場合、単純なCSSを使用するだけです.

/* src/components/button.css */
.button {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  padding: 6px 16px;
  font-size: 12px;
  min-width: 64px;
  box-sizing: border-box;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.button[disabled] {
  cursor: default;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.26);
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0.12);
}

.primary {
  color: #fff;
  background-color: #1976d2;
}

.secondary {
  color: #fff;
  background-color: #dc004e;
}

私たちは私たちのボタンのコンポーネントの各バリエーションの次の記事を作成します.

// src/stories/Button.stories.js
export const Primary = () => (
  <Button color="primary" onClick={action('clicked')}>
    Primary Button
  </Button>
);

export const Secondary = () => (
  <Button color="secondary" onClick={action('clicked')}>
    Secondary Button
  </Button>
);

export const Disabled = () => (
  <Button color="secondary" onClick={action('clicked')} disabled={true}>
    Disabled Button
  </Button>
);

export const WithEmojis = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      With Emojis 😀 😎 👍 💯
    </span>
  </Button>
);

ストーリーブックでは次のようになります.

建築と輸出の静的アプリとして

ここで、単一のボタンコンポーネントから構成されるコンポーネントライブラリを作成しました.我々は今、それを構築し、エクスポートしようと考えます.他の糸スクリプトを実行しなければなりません.

"build-storybook": "build-storybook -s public"

以下を実行すると、静的なストーリーブックファイルがstorybook-static ディレクトリ.

yarn build-storybook

静的Webアプリケーションとして展開することができます.フォローアップポストでは、この方法を指示します.
NPMライブラリを使ってこれを展開することができますhttp-server 次のコマンドを使用します.

npx http-server storybook-static

クロージングノート

我々は、ストーリーブックとCRAを使用して簡単な反応コンポーネントライブラリを作成することを行ってきました.StoryBook私たちはそれを達成するために簡単にするためのツールを提供します.我々はちょうど表面に触れているとストーリーブックはもっとアドオン、テストとより多くを提供します.詳しく見るhere . フォローアップポストでは、私たちは他の反応アプリでそれを使用することができますので、静的サイトを展開し、公開のNPMレジストリにライブラリとしてボタンのコンポーネントを公開を介して行くので、チューニングを維持します.
次の読書と感謝.✌🏼