如何获取故事书插件选项

Question

当我们加载故事书插件时，我们可以传递一些选项：

// .storybook/main.js

module.exports = {
  addons: [
    'a-storybook-addon-without-options',
    {
      name: 'a-storybook-addon-with-options',
      options: {
        mainColor: 'hotpink',
      },
    },
  ],
};

为了编写我的插件，我使用 addon API:

// /a-storybook-addon-with-options/src/register.js

import React from 'react';
import { addons, types } from '@storybook/addons';
import MyComponent from './myComponent.js';

const ADDON_ID = 'myaddon';
const PANEL_ID = `${ADDON_ID}/panel`;

addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: MyComponent,
  });
});

我不知道如何从插件代码中获取开发人员选项。有官方的方法吗？我没有从文档中得到明确的帮助。

Answer 1

我认为这里你应该在配置中使用参数而不是这个选项。

这种配置（选项字段）更适合改变 webpack 或 babel 配置的预设。

如果您使用注册文件中指定的密钥在预览中添加参数，那么您可以在插件代码中轻松访问该参数。

在 Preview.js 中

export const parameters = {
  myAddon: {
    mainColor: 'red'
  },
};

在插件代码中

import { useParameter } from '@storybook/api';

const PARAM_KEY = 'myAddon';

const MyPanel = () => {
  const value = useParameter(PARAM_KEY, null);
  const mainColor = value ? value.mainColor : 'No mainColor defined';
  return <div>{mainColor}</div>;
};

Answer 2

每个插件都有自己的选项方法，尽管有两种通常推荐的将选项传递给插件的方法：

• 故事参数（因此，在

  preview.ts

  中，您添加

  parameters: { myAddonKey: { ... } }

  （Storybook插件中的许多示例）
• 用于参数不起作用的用例的配置单例，通过

  addons.setConfig

  中的

  manager.ts

  （example）

在某些情况下，

initialGlobals

中的

preview.ts

可用于传递选项，尽管我相信这不是目前SB7和SB8维护者推荐的做法（示例）。

SB9 可能会引入新的插件配置方法（特别是针对管理器用例）。 https://storybook.js.org/docs/addons/writing-addons 是查看最新信息的地方。

Answer 3

当他们没有在参数上设置任何值时，您可以通过设置一个值来设置一些默认值，例如：

const mainColor = value ? value.mainColor : 'red';