有条件地启用 Storybook 控件答案

【问题标题】：Enable a Storybook control conditionally有条件地启用 Storybook 控件
【发布时间】：2021-05-21 08:09:44
【问题描述】：

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

例如，我有 3 个道具：

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

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

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

【问题讨论】：

标签： javascript reactjs components 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 这个问题是在他们正式弃用旋钮之前的几个月被问到的。我邀请您添加一个带有控件的示例，因为我还没有机会尝试它们。
我想，不幸的是控件不支持它，因此与旋钮相比有点回归。