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 是所有 Stories 開箱即用的零配置預設文件。您可以將「依賴項」區塊新增至 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 } },
};

Story 層級 (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 stories（選用）

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 />

每個組件的 Stories

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 - 用於選取 Stories 的 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.module Webpack 資料中選取的屬性陣列。範例

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