有条件地启用 Storybook 控件

Posted 2023-02-19

【中文标题】有条件地启用 Storybook 控件

【英文标题】：Enable a Storybook control conditionally

【发布时间】：2021-05-21 08:09:44

【问题描述】：

我在故事中使用控件来查看组件的不同状态。 有些道具只有在启用了其他道具时才有意义。

例如，我有 3 个道具：

isEmployee - 布尔值 isActive - 布尔值 canContactInTheWeekend - 布尔值

这里，canContactInTheWeekend 仅在 isActive 为 true 时适用。 为了让开发人员更清楚，我想在isActive 为false 时禁用canContactInTheWeekend 切换。

如何使用标准 Storybook 设置或通过一些插件来实现它？

【参考方案1】：

这个问题正是 Flare 的动机，Flare 是 Storybook Knobs 和 Storybook Controls 的原则性替代方案。以下是我将如何使用 Flare 实现您的示例：

pipe(
  of((isEmployee: boolean) => (otherProps:  isActive: boolean, canContactInTheWeekend: boolean ) => (<Contact ... isEmployee, ...otherProps  />)),
  ap(checkbox( label: "Employee", initial: false )),
  ap(
    pipe(
      switch_( label: "Active", initial: false ),
      chain(ifElse(
        pipe(
          checkbox( label: "Weekend OK", initial: false ),
          map(canContactInTheWeekend => ( isActive: true, canContactInTheWeekend ))
        ),
        of( isActive: false, canContactInTheWeekend: false )
      ))
    )
  )
)

这是一个完整的工作演示：https://codesandbox.io/s/gifted-paper-ulqrg?file=/src/main.tsx:719-1276

有关 Flare 的更多信息，请查看https://flare.js.org/

请注意，我是作者。

【参考方案2】：

我假设您已经在使用 addon-knobs https://storybook.js.org/addons/@storybook/addon-knobs。

你应该能够像这样实现你想要的：

export const Default = () => 
    const isActive = boolean('isActive ', false);
    const canContactInTheWeekend = isActive ?  boolean('canContactInTheWeekend ', false) : false;

return (<.../>)

更详尽的例子：https://stephencharlesweiss.com/conditional-storybook-knobs/

【讨论】：

旋钮已替换为Controls。我相信 OP 正在使用控件。

@jorisw 这个问题是在他们正式弃用旋钮之前的几个月被问到的。我邀请您添加一个带有控件的示例，因为我还没有机会尝试它们。

我想，不幸的是控件不支持它，因此与旋钮相比有点回归。