storybook-addon-recoil-flow

为您的故事添加一个面板来监控 Recoil 的整个状态。

设置

方法 1：Recoil Root 由另一个装饰器插件提供

可以通过 npm/yarn 安装插件，然后将 "storybook-addon-recoil-flow" 添加到 ./storybook/main.js 中的 addons 数组中。确保此插件和提供 RecoilRoot 的任何插件都按正确的顺序排列。

方法 2：Recoil Root 由故事中的装饰器提供

• 通过 npm/yarn 安装
• 将 storybook-addon-recoil-flow/dist/register 添加到 addons 数组中
• 在您的故事中从 storybook-addon-recoil-flow/dist/decorator 导入 withRecoilFlow 并将其放入 decorators 数组中（按正确的顺序）

方法 3：直接使用装饰器提供的 RecoilRoot

• 通过 npm/yarn 安装
• 装饰器提供了一个 RecoilRoot，其 overrides 设置为 false，因此方法 1 将在没有其他装饰器的情况下工作（但您将无法设置自定义初始化器）

参数

recoilFlow 参数具有以下可选选项

  recoilFlow: {
    filter: {
      keys: ["AtomOne"],
      showConnected: true,
    },
  },

keys 数组用于 .startsWith 来过滤节点，以便可以使用手动输入的部分来匹配生成的较长的 SelectorFamilyKeys。

showConnected 将显示与 keys 数组中的节点连接的节点（默认为 true）

已知问题

• 如果插件面板位于某些其他插件（例如“交互”）之后，Storybook 的 css 中存在一个错误，会导致此插件渲染不正确。