storybook-addon-deps

一个用于添加依赖关系树资源管理器选项卡的 Storybook 附加组件。

快速入门

1. 安装

npm i -D storybook-addon-deps

2. 添加预设：.storybook/main.js

module.exports = {
  presets: ['storybook-addon-deps/preset', ...]
...
}  

3. 配置 DocsPage .storybook/preview.js (以前是 .storybook/config.js)

import { DocsPage } from 'storybook-addon-deps/blocks';

addParameters({
  docs: { page: DocsPage },
  dependencies: { withStoriesOnly: true, hideEmpty: true }
});

高级设置和用法

DocsPage 演示

grommet-controls

用法

在您的 Storybook preview.js（或 config.js）中，定义一些全局参数以交换由 storybook-dep-webpack-plugin 收集的数据

import { addParameters } from '@storybook/{yourframework}';

addParameters({
 dependencies: {
    //display only dependencies/dependents that have a story in storybook
    //by default this is false
    withStoriesOnly: true,

    //completely hide a dependency/dependents block if it has no elements
    //by default this is false
    hideEmpty: true,

    //custom match function to find matching component in case duplicate 
    //component names. chooses first match if not configured
    match: (matchingComponents, storyFilename) => matchingComponents?.[0][0]
  }
});

A. 在您的 DocsPage 中添加一个文档块（可选）

DocsPage 是所有故事开箱即用的零配置默认文档。您可以将一个 **依赖关系** 块添加到任何级别的 Storybook 中

全局（preview.js/config.js）

import { DocsPage } from 'storybook-addon-deps/blocks/DocsPage';
addParameters({ docs: { page: DocsPage } });

组件级别（Button.stories.js）

import { Button } from './Button';
import { DocsPage } from 'storybook-addon-deps/blocks/DocsPage';
export default {
  title: 'Demo/Button',
  component: Button,
  parameters: { docs: { page: DocsPage } },
};

故事级别（Button.stories.js）

import { Button } from './Button';
import { DocsPage } from 'storybook-addon-deps/blocks/DocsPage';
// export default { ... }
export const basic => () => <Button>Basic</Button>
basic.story = {
  parameters: { docs: { page: DocsPage } }
}

B. 向 mdx 故事添加依赖关系和被依赖关系的文档块（可选）

Button.stories.mdx

import {
  Story,
  Canvas,
  ArgsTable,
  Description,
  Meta,
} from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/design-system/dist/components/Button';
import { DependenciesTable, Dependencies, Dependents } from 'storybook-addon-deps/blocks';

<Meta
  title="Design System|Button"
  component={Button}
/>

# Two ways to display blocks - combined into a single table, or separated into two tables

## 1. DependenciesTable - combined dependencies and dependents into one
<DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' of={Button} />

## 2. Dependencies and Dependents tables

<Dependencies of={Button} />

<Dependents of={Button} />

excludeFn

您可以通过设置以下内容来从依赖关系表中排除特定模块：

excludeFn: (module: IDependency) => boolean;;

  <Dependencies of={Button} excludeFn={module => module.name === 'babel'} />

C. 向 storybookjs 添加一个依赖关系资源管理器选项卡（可选）

使用 preset-explorer 预设

module.exports = {
  presets: ['storybook-addon-deps/preset-explorer', ...]
...
}  

项目分析

使用的图表是 Google Charts，所有属性都适用。有关配置选项的详细信息，请参见 Google 文档，例如 饼图 选项。

import { Meta } from '@storybook/addon-docs/blocks';
import { ChartComponentUsage, ChartStoriesPerComponent } from 'storybook-addon-deps/blocks';
  
<Meta title="About|Dashboard" />
<ChartStoriesPerComponent />
<ChartComponentUsage />

每个组件的故事

import { Heading } from '@storybook/addon-docs/blocks';
import { ChartStoriesPerComponent } from 'storybook-addon-deps/blocks';
<Heading>Stories per component</Heading>
<ChartStoriesPerComponent
  height='500px'
  options={{
    sliceVisibilityThreshold: 0.04,
    pieSliceText: 'value',
    s3D: true,
    pieHole: 0.7,
  }}
/>

按使用量分类的组件

显示每个组件被其他组件使用多少次。

import { Heading } from '@storybook/addon-docs/blocks';
import { ChartStoriesPerComponent } from 'storybook-addon-deps/blocks';
<Heading>Components usage</Heading>
<ChartComponentUsage
  height='500px'
  options={{
    minColor: '#009688',
    midColor: '#f7f7f7',
    maxColor: '#ee8100',
  }}
/>

其他框架

web-components

angular

vue

选项

可以将一组选项传递给 storybook-dep-webpack-plugin

filter - 用于选择故事的 RegExp 或函数。示例

module.exports = {
  presets: [
    { 
      name: 'storybook-addon-deps/preset-explorer', 
      options: {
        filter: (resource) => {
          return /\.(stories|story)\.[tj]sx?$/.test(resource) && resource.indexOf("Avatar") > -1;
        }
      }
    }
  ]

exclude - 用于排除模块的 RegExp。示例

module.exports = {
  presets: [
    { 
      name: 'storybook-addon-deps/preset-explorer', 
      options: {
        //by default @storybook modules are also excluded
        exclude: /^@babel/,
      }
    }
  ]

maxLevels - 跟踪依赖关系的深度级别。示例

module.exports = {
  presets: [
    { 
      name: 'storybook-addon-deps/preset-explorer', 
      options: {
        maxLevels: 10,
      }
    }
  ]

pickProperties - 从模块 webpack 数据中选择的属性数组。示例

module.exports = {
  presets: [
    { 
      name: 'storybook-addon-deps/preset-explorer', 
      options: {
        pickProperties: ['id', 'name', 'request'],
      }
    }
  ]

pickModuleProperties - 从模块.module webpack 数据中选择的属性数组。示例

module.exports = {
  presets: [
    { 
      name: 'storybook-addon-deps/preset-explorer', 
      options: {
        pickModuleProperties: [],
      }
    }
  ]