ストーリーブック、テールウィンド、およびタイプスクリプトを使用してコンポーネントライブラリを起動します.

あなたの反応プロジェクトの高速コンポーネントをビルドします.
最後を見るresult

物語は何ですか。

StoryBookは分離のUIコンポーネントを開発するためのツールです、これは我々が我々の主なアプリの外でこれらを持っている必要があることを意味し、必要な変更を行い、それらがどのように見えるかを知る我々のアプリでそれらをインポートします.
デザインシステムはあらゆる製品開発プロセスの重要な部分になりました、そして、可能性はあなたがすでに1で働くということです.このシステムは、デザイナーと開発者のためのスタイルガイドを提供します.さまざまなパターンやバリエーションを持つUIコンポーネントがたくさんあります.これは、ストーリーブックを使用するのに最適なシナリオです.

尾風の利点

Cookieは非常にカスタマイズ可能な、低レベルのCSSフレームワークです.それは多くの他のフレームワークのようなUIキットではありません、あなたのウェブサイトがどのように見えるかを完全に制御します.

セットアップの反応アプリとインストール風をインストールします。

プロジェクトからスタートしますcreate-react-appp .

npx create-react-app storybook-ts --template typescript

依存関係をインストールしましょう.

npm install tailwindcss postcss-cli autoprefixer

新しいファイルを作成するpostcss.config.js 下のコードでアプリケーションのルートで.

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

私たちはプロセスtailwind with postcss , and autoprefixer CSSをパースし、ブラウザサポートのためのベンダープレフィックスを追加します.
では、このスクリプトをpackage.json ファイル.

{
    "scripts": {
        ...
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss"
  },
  ...
}

新規作成scss フォルダ内src . 私が使用するので、私はsassファイルを使用しますbase.scss より多くのクラスを書くにはcss .
あなたがsassを使うと決めるならば、インストールするのを忘れないでくださいnode-sass .
クリエイトアbase.scss ファイルの内部scss このコンテンツを持つフォルダ.

@tailwind base;
@tailwind components;
@tailwind utilities;

このコマンドをコンソールで実行し、テール風ファイルを生成します.

npm run build:tailwind

生成されたTruwindファイルをアプリケーションコンポーネントに配置します.

// App.tsx

import './scss/tailwind.scss';

このチュートリアルでは、Tailwindの既定の設定で動作するようにして、お客様のニーズに合わせて調整してください.このコマンドを実行するnpx tailwind init そして、風の設定ファイルが生成されると、あなたのために働く価値を追加することができます.これはTailwindのデフォルトですconfiguration , 参考にしてください.
新規作成components フォルダインサイダーsrc を追加し、button.tsx ファイル.

import React, { FC } from 'react';

type ButtonTypes = {
  /**
   * Label of the button
  */
  label: string;
  /**
   * Boolean value to define the button style 
  */
  outlined?: boolean;
  /**
   * Button click action
  */
  onClick(): void;
}

const BASE_BUTTON = 'rounded outline-none shadow py-3 px-12 font-normal uppercase tracking-wider text-lg'
const CONTAINED_BUTTON = `${BASE_BUTTON} bg-teal-400 border border-teal-400 text-white`
const OUTLINED_BUTTON = `${BASE_BUTTON} border border-teal-400 text-teal-400`

export const Button:FC<ButtonTypes> = ({ onClick, label = "Some label", outlined }) => {
  return (
    <button
      onClick={onClick}
      className={outlined ? OUTLINED_BUTTON : CONTAINED_BUTTON}
    >
      <span>{label}</span>
    </button>
  )
};

物語に飛び込みましょう

StoryBookでtypescriptファイルを処理するには、WebPackの設定を拡張する必要があります.プロジェクトの根元に新しいフォルダを作りましょう.storybook を作成し、main.js ファイル内部.
まずは、必要な依存関係をインストールしましょう.

npm install --save-dev @storybook/react @storybook/preset-create-react-app babel-loader react-docgen-typescript-loader @storybook/addon-actions @storybook/addon-info @storybook/addon-knobs @storybook/addon-notes @storybook/addons

我々はアドオンを使用して我々の物語に高度な機能を有効にします.
でmain.js 次のコードを追加します.

module.exports = {
  stories: ['../src/stories/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-notes/register',
  ],
  webpackFinal: async config => {
    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [require.resolve("babel-preset-react-app")]
            }
          },
          require.resolve("react-docgen-typescript-loader")
        ]
      }
    ],
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

私たちの最初の物語を作成しましょう.
クリエイトアstories フォルダ内src , と呼ばれるファイルbutton.stories.tsx . 我々はいくつかのアドオンを追加する予定ですが、直接の絵本からボタンの小道具を変更します.

import React from "react";
import { Button } from '../components/button';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean } from "@storybook/addon-knobs";

export default {
  title: "Button",
  decorators: [withKnobs]
};

export const primary = () => {
  const label = text("Label", "See now");
  const outlined = boolean("Oultined", false);
  return (
    <Button onClick={action('clicked')} outlined={outlined} label={label} />
  )
};

スクリプトを追加しましょうpackage.json ファイルを実行するファイル.

{
    "scripts": {
        ...
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss",
    "storybook": "start-storybook -p 5000"
  },
  ...
}

我々が走るならばnpm run storybook 我々は、このようなものを見ます.

それは私たちのボタンです!しかし、スタイルなしで.新しいものを作ることによってLayout コンポーネント.私たちが今作成しているすべてのファイルは、内側になります.storybook フォルダ.

import React from 'react';
import '../src/scss/tailwind.scss';

const Layout = ({ children }) => {
  return (
    <div className="px-20 py-10">
      {children}
    </div>
  )
}

export default Layout;

クリエイトアpreview.js ファイル.

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Layout from './Layout';

addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
addDecorator(withInfo({
  inline: true,
  propTablesExclude: [Layout]
}));

あなたが再びStoryBookを走らせるならば、我々の話は現在このように見えます.Infoアドオンは、ソースコードとPropTypeテーブルを生成します.

注意:

あなたがTailwindファイルを輸入している問題に直面するならば、あなたはAを加える必要がありますsass-loader Webpackの設定にmain.js .

プロンプトが表示できない場合は、コンポーネントファイルを確認してください.このような反応をインポートしたりインポートしたりするようにしてください.または使用しないようにしますexport default コンポーネントです.

  import * as React from 'react'; 

  import React, { FC } from 'react';

  export const Button = () => {} //don't use export default.

ダークモード。

我々のアプリは素晴らしいが、どのように我々はそれが良く見えるように知っていますか?はい、暗いモードで.
まず、作成manager.js ファイルを追加し、次のコードを追加します.

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

これはあなたの童話アプリに暗いテーマを追加します.
前にpreview.js ファイルを追加し、情報のスタイルを変更します.

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Layout from './Layout';

addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
addDecorator(withInfo({
  inline: true,
  styles: (base) => ({
    ...base,
    infoBody: {
      ...base.infoBody,
      backgroundColor: '#303030',
      color: 'white',
    },
    source: {
      h1: {
        margin: '20px 0',
        padding: '0 0 5px 0',
        fontSize: '25px',
        borderBottom: '1px solid #EEE',
      },
    },
  }),
  propTablesExclude: [Layout]
}));

私たちはほとんどそれを持っている.しかし、PropTypeテーブルのテキストはよく見えません.

クリエイトアpreview-body.html このコードを追加します.

<style>
  .info-table, .info-table td, .info-table th{ 
    color: #fff;
  }
</style>

再びストーリーブックを実行します.
今あなたがそれを持っている、StoryBookはあなたのTailwindのコンポーネントとTypeScriptのサポートとダークモードで実行している.
コードをチェックrepo .