StoryBook

リポジトリは、UIコンポーネントをデータとして管理するライブラリです.

これにより、UIコンポーネントをフォルダ別に管理したり、最下位の制御部でコンポーネントに渡されたpropsを変更したりして、UIに対するデータの変更をすぐに表示することができます.

コード構造

// in Box.stories.js
import React from 'react'
import  Box  from '../components/Box'

export default {
  title: 'Example/Box', 
  component : Box,
  argTypes : {
    backgroundColor: {
      control : {
        type : 'color'
      } 
    }
  }
};

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

export const Default = Template.bind({})

export const royalBlue = Template.bind({})
royalBlue.args = {
  backgroundColor : 'royalBlue'
}

export const yellow = Template.bind({})
yellow.args = {
  backgroundColor : 'yellow'
}

export default

使用する構成部品を取得します.
export defaultを使用してオブジェクトを返します.プロパティにはtitle、componentなど多くのオプションがあります.
ここでtitleのエントリはフォルダ名と構造を表します.
Example/Boxに設定すると、ExampleフォルダにはBoxフォルダが含まれます.
ボックスのみに設定すると、Exampleフォルダと同じ深さにボックスというカテゴリが作成されます.

Template

Templateという名前のJSXを返す関数を作成します.このときargsをパラメータで受信し,素子のpropsに渡す.
これでTemplateを作成するとサンプルが作成されます.この場合Templatebindを使用して空のオブジェクト{}として指定し、関数を返します.
サンプルの名義でサンプルを受信し、構築します.
サンプルが構成されている場合.args伝達を利用してpropsのパラメータとして使用します.

しかしなぜbindロビンオブジェクトをthisに設定したのでしょうか?

storybookの内部ロジックのため、bindオブジェクトを渡さず、bindを使用しなくても正常に動作します.

export const royalBlue = Template
royalBlue.args = {
  backgroundColor : 'royalBlue'
}

export const yellow = Template.bind()
yellow.args = {
  backgroundColor : 'yellow'
}

2番目のプロパティでパラメータを渡すための例が作成されたためかもしれません.

control

argTypes : {
    backgroundColor: {
      control : {
        type : 'color'
      } 
    }
  }

EXport defaultとしてエクスポートされたオブジェクトには、StoryBookのフィーチャーの1つであるデータを操作することで、ユーザーがUIを直ちに変更できるオプションが含まれています.
argTypeの内部にpropsで渡された値を入れ、controlプロパティを使用して値を調整し、typeにnumber、color、stringなどの異なる値を入れます.

値を変更するにはコントロール属性が必要ですか?

答えではありません.
.argsでpropsを設定して様々な例を作成する構成部品の場合、デフォルトではこれらの値を検出して制御して値を変更できるように設定されています.

n/a.結論

物語をどこに書くかは不明ですが、データ中心のUIを構築するのに役立つかもしれませんが、正確にはプロジェクトで直接使うべきだと感じています.