storybook-fixtures

通过使用本地数据（JSON 文件或硬编码）甚至 URL 从中获取数据来为组件添加数据夹具。

安装

npm install -D storybook-fixtures

在 .storybook/main.js 中的插件列表中添加 storybook-fixtures。

module.exports = {
  addons: ['storybook-fixtures'],
};

将出现一个新的“夹具”面板，其中包含作为子选项卡的夹具部分。夹具部分包含夹具变体，可以通过单击或键盘快捷键进行切换 - 键 1 到 9 对应于前 9 个变体。

也可以使用 Vim 风格的导航键按顺序切换变体：j 和 k 用于在变体列表中上下移动。

可以使用 h 和 l 分别切换到左侧和右侧选项卡来切换部分选项卡。

用法

夹具定义必须包含夹具部分名称作为键，以及变体作为其属性。

import { withFixtures } from 'storybook-fixtures';
import pantheraData from '../__fixtures__/panthera.json';

// Global fixtures available in all stories for a given module
export default {
  title: 'storybook-fixtures',
  decorators: [
    withFixtures({
      // override the default setting and show single fixture tab
      __singleTab: true,
      // fixture sections
      collection: pantheraData,
    }),
  ],
};

// Currently selected fixture is injected in story context
export const myLocalFixture = ({ fixture }) => {
  return <MyComponent data={fixture} />;
};

// Fixtures that have strings as values are assumed remote URL and will be fetched
// when the story is selected.
export const myRemoteFixture = ({ fixture }) => {
  return <MyComponent data={fixture} />;
};
// Fixtures can be added per story via story parameters
myRemoteFixture.parameters = {
  fixtures: {
    // fixture sections (key is a tab label for multiple variant sets)
    variantTypes: {
      // variants (key is label)
      'Text fixture': 'Lorem ipsum',
      'Array fixture': ['One', 'Two'],
      'Object fixture': {
        title: 'Tiger',
        description: 'Largest species of the cat family',
      },
      'My remote fixture': 'https://example.com/data.json',
    },
  },
};

变体可以分组到集合中并独立控制。当仅定义一个集合时，集合选项卡将被隐藏。

所有选择都存储在本地存储中，任何夹具选择都可以以隔离状态（没有 Storybook UI）在新选项卡中打开。选择被编码在查询字符串中。

每个变体值都可以是一个 URL，在这种情况下，它将被获取，并将结果作为其值返回。

在 Storybook v6 中，插件会自动在全局范围内包含夹具装饰器。只需在 main.js 中的 addons 数组中添加 storybook-fixtures，任何故事都可以使用 parameters 静态属性接收夹具对象（见上文）。

夹具设置

withFixtures 装饰器具有以双下划线为前缀的特殊属性。这些属性可以更改夹具显示方式的某些行为。

• __singleTab（默认为 false）- 夹具分组到多个选项卡中。夹具对象中的每个键都映射到选项卡。当夹具对象中只有一个属性时，默认情况下不会显示单个选项卡。

导入

withFixtures

与 Storybook 夹具面板通信并显示选定夹具变体的装饰器。

keyBy

Lodash 实用程序的导出，用于将集合（对象数组）转换为对象，以按选定键分组。