絵本` args `と` parameter `を使ったグローバルなデコレータの制御

Storybook decorators (反応で)複数のストーリー間でコンポーネント環境を再利用する強力な方法を提供します.しかし、個々の物語からグローバルデコレータを操作するための任意のオフ棚レバーがありません.
仕事中we're hiring! ) 私は最近、多くのコンテキストプロバイダを1つにクリーンアップしましたBase デコレータ.簡単な例を示します.

// .storybook/decorators/base.tsx
export const Base: DecoratorFn = (Story, options) => {
  return (
    <TestReactRoot {...options.args}>
      <Story {...options} />
    </TestReactRoot>
  );
};

// .storybook/preview.js
import { Base } from './decorators/base';

export const decorators = [Base];

TestReactRoot カプセルを含むいくつかのプロバイダreact-redux プロバイダ.だから今では簡単に話を書くことができますuseSelector そして、最小限のボイラー板で他のreduxフック.しかし、どのように言うか、最初のredux状態を話から設定しますBase デコレータ?具体的には、絵本を使いたいですcontrols を動的に設定する.
私はStorybookコミュニティでこれのためにどんな既存の戦略も見つけることができませんでしたinversion of control : 個々の物語は、機能をargs グローバルなデコレータが起動する設定.

// ./storybook/decorators/base.tsx
export const Base: DecoratorFn = (Story, options) => {
  const { args, parameters } = options;

  if (parameters.modifyArgs) {
    Object.assign(args, parameters.modifyArgs(args));
  }

  return (
    <TestReactRoot {...args}>
      <Story {...options} />
    </TestReactRoot>
  );
};

// src/components/user-avatar.stories.tsx
export default {
  title: "User Avatar",
  args: {
    admin: false,
  },
  parameters: {
    modifyArgs: (args) => {
      return {
        reduxState: generateReduxState({ admin: args.admin })
      }
    }
  }
}

ブーム!ストーリーの設定だけでは、純粋な機能を渡すことができます知っているmodifyArgs , とBase デコレータは、戻り値をどうするかを決定します.
したがって、ストーリーブックコントロールを介してグローバルなデコレータ/プロバイダの状態に影響を与えたい場合は以下のようにします.

良いol '純粋なコールバック関数を使用してくださいargs を使う設定args を返します.args オブジェクト.

グローバルデコレータのコールバック関数をチェックする

コールバックがあれば、それを起動し、結果をargs オブジェクト(またはどんな部分も突然変異を必要とします).

それに応じて更新データをパスします.

楽しむ!