Nice Philanthropist Metalhead

    storybook-addon-deps
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    storybook-addon-deps

    A storybook addon to add a dependencies tree exporer tab.

    Quick start

    1. Install

    npm i -D storybook-addon-deps

    2. Add preset: .storybook/main.js

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

    3. Configure DocsPage .storybook/preview.js (was .storybook/config.js)

    import { DocsPage } from 'storybook-addon-deps/blocks';
    
    addParameters({
      docs: { page: DocsPage },
      dependencies: { withStoriesOnly: true, hideEmpty: true }
    });
    

    Advanced setup and usage

    DocsPage demo

    grommet-controls

    Usage

    In your storybook preview.js(or config.js), define some global parameters to exchange the data collected by the 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. Add a documentation block to your DocsPage (optional)

    DocsPage is the zero-config default documentation that all stories get out of the box. You can add a Dependencies block to any level to your storybook

    Globally (preview.js/config.js)

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

    Component-level (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-level (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. Add dependencies and dependents doc blocks to mdx stories (optional)

    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

    You can exclude specific modules from the dependencies tables by setting

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

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

    C. Add a dependencies explorer tab to storybookjs (optional)

    Use the preset-explorer preset

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

    Project analysis

    The charts used are Google Charts and all their properties are applicable. Detailed information on configuration options is available from Google documentation, for example Pie Chart options.

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

    Stories per component

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

    Components by usage

    Displays how many times each component is used by other components.

    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',
      }}
    />
    

    Other frameworks

    web-components

    web components

    angular

    angular

    vue

    vue

    Options

    a set of options can be passed down to the storybook-dep-webpack-plugin

    filter - a RegExp or function to select the stories.
    example:

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

    exclude - a RegExp for the modules to exclude.
    example:

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

    maxLevels - How many levels deep to follow the dependencies.
    example:

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

    pickProperties - An array of the props to pick from the module webpack data.
    example:

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

    pickModuleProperties - An array of the props to pick from the module.module webpack data.
    example:

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

    Install

    npm i storybook-addon-deps

    DownloadsWeekly Downloads

    3,191

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    92 kB

    Total Files

    53

    Last publish

    Collaborators

    • atanasster