反応プロジェクトへのストーリーブックの追加

StoryBookは、開発者が見て、テストとドキュメントのコンポーネントを分離するのに役立ちますオープンソースのツールです.それは、コンポーネント化に有名な原子設計アプローチを使用する人々のための非常に重要なツールであることができます.そして、私たちが見るように、それは使用し、設定する非常に簡単なツールです.
ここで、我々は反応プロジェクトでそれを使用します、あなたが使用しているフレームワークから独立したどんなフロントエンドプロジェクトでもそれをセットすることができます.

ストーリーブックのインストール

最初のステップは、NPXを使用する任意のプロジェクトにストーリーブックをインストールすることです.

npx sb init

このコマンドは、コードブックにCLIを初期化し、最適な構成をインストールし、ツールを初期化するためにnpm run storybookを実行します.

反応成分

インストール後、それはhttp://localhost:6006で童話アプリを開きます.CLIは既にいくつかの例をインストールしています.しかし、あなたはすでに持っているものを使用することができます.私のケースでは、材料の- S - UIテキストフィールドから拡張したコンポーネントを使用しました.

import React from 'react';

import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
import MuiTextField, { StandardTextFieldProps } from '@material-ui/core/TextField';
import classnames from 'classnames';

const styles = () =>
  createStyles({
    inputSmall: {
      height: '35px !important',
    },
  });

export interface TextFieldProps extends Omit<StandardTextFieldProps, 'classes'>, WithStyles<typeof styles> {
  size?: 'default' | 'small';
}

const TextField: React.FC<TextFieldProps> = ({ classes, size = 'default', InputProps, ...rest }) => (
  <MuiTextField
    InputProps={{
      classes: {
        input: classnames({
          [classes.inputSmall]: size === 'small',
        }),
      },
      ...InputProps,
    }}
    {...rest}
  />
);

export default withStyles(styles)(TextField);

このコンポーネントで重要なことは、サイズの小道具を持っていて、inputpropsを持つUIのテキストフィールドのプロップを公開することです.これは、私たちが物語の上でダイナミックなドキュメンテーションと異なる物語をつくるのを許します.

ストーリーの作成

物語を作成しているファイルのメタデータのエクスポートで簡単なストーリーファイルの開始

import React from 'react';

import { Story, Meta } from '@storybook/react/types-6-0';

import { TextField, TextFieldProps } from '../atoms';

export default {
  title: 'Atoms/Text Field',
  component: TextField,
  argTypes: {
    label: {
      name: 'Label',
      type: { name: 'string', required: false },
      defaultValue: 'Fake Label',
    },
    size: {
      name: 'Size',
      control: {
        type: 'select',
        options: ['default', 'small'],
      },
      defaultValue: 'default',
    },
  },
} as Meta;

ご覧のように、我々は反応成分を使用しているので、我々は反応をインポートを開始します.その後、ストーリーブックの種類とライブラリをインポートし、コンポーネントとその型宣言をインポートします.
コンポーネントのメタデータです.その上で、フォルダー構造とコンポーネント名を通知できる最初のフィールド、タイトルを見ることができます.私の場合、コンポーネントを「atom」フォルダに「テキストフィールド」として入れます.コンポーネントフィールドでコンポーネントの宣言を参照してください.Bellow、あなたが見て、高度なストーリーの設定を使用すると、イメージの中で見ることができるように、ドキュメント内のいくつかのダイナミックフィールドを宣言させることができます

通常、StoryBookはあなたのコンポーネントからそれらを宣言する必要なしにこれらのフィールドを取得します.ただし、このコンポーネントの場合は宣言しなければなりませんでした.彼らの宣言は簡単です.メタデータオブジェクト内でArgTypeプロパティを作成し、その中にコンポーネントによって受信された小道具の名前(この場合、ラベルとサイズ)を宣言し、それらの名前を、ブックマークのドキュメント(名前:' Name There ')、既定値、および型オブジェクトに持つ名前を、フィールドの型(文字列、数値または選択)の順に指定します.プロパティが必須である場合、オプションの配列が指定された場合、そのフィールドが意味を持つ場合.
メタデータの後に、テンプレートと異なるコンポーネントを宣言できます.

const Template = (args) => <TextField {...args} />;

export const SizeDefault = Template.bind({});
SizeDefault.args = {
  size: 'default',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
};

ここでは、テンプレートはArgsオブジェクトの受信およびスプレッドのテキストフィールドです.それぞれの異なるストーリーについては、テンプレートにバインドし、別の引数を追加してエクスポートします.私たちのケースでは、それぞれの話は、ラベルを受け取ります.そして、値が「偽のラベル」がargtypesの上でデフォルト値として宣言されて、Templatenameで宣言されるサイズで受け取ります.argsオブジェクト.

上の画像では、左側に別のテキストフィールドの物語を見ることができますし、中央のデフォルトストーリー.
絵本のライブラリには、多くの重要な用途があります.これにより、コンポーネントの実際のコードを使用してドキュメントを作成することができます.これにより、プロジェクトで更新された古いドキュメントを維持する問題が解決されます.しかし、今、私たちの現在のアプリケーションでは、我々はどのようにリレーフラグメントを使用してGraphSQLのクエリを行うコンポーネントにストーリーブックを使用する方法に問題があります.
あなたがポストが好きならば、どんな考えか、絵本についてのどんな考えでも、ここでコメントするか、私に連絡すること自由に感じてください.