storybook-addon-recoil-flow

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

设置

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

只需通过 npm / yarn 安装此插件，然后将其添加到 `./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）

已知问题

• 如果此插件面板位于某些其他插件（例如 "Interactions"）之后，Storybook 的 CSS 中存在一个 bug，会导致此插件渲染不正常。