Nachos Preventing Motivation
    Wondering what’s next for npm?Check out our public roadmap! »

    storybook-addon-smart-knobs

    6.0.2 • Public • Published

    Smart knobs addon for Storybook

    This Storybook plugin uses @storybook/addon-knobs but creates the knobs automatically based on PropTypes, Flow and Typescript.

    Installation:

    npm i storybook-addon-smart-knobs --save-dev
    

    Usage:

    import React from 'react'
    import PropTypes from 'prop-types'
    import { storiesOf } from '@storybook/react'
    import { withKnobs } from '@storybook/addon-knobs'
    import { withSmartKnobs } from 'storybook-addon-smart-knobs'
     
    const Button = ({ children, onClick }) => (
      <button onClick={ onClick }>{ children }</button>
    )
     
    Button.propTypes = {
      children: PropTypes.node,
      onClick: PropTypes.func
    }
     
    storiesOf('Button')
      .addDecorator(withSmartKnobs(options))
      .addDecorator(withKnobs)
      .add('simple', () => <Button>Smart knobed button</Button>)
     

    Options

    • ignoreProps

      Type: Array

      Will not automatically create knobs for props whose name is in this array. Example:

        .withSmartKnobs({ ignoreProps: ['numberProp'] })
        .add('example', () => <div numberProp={date('date', date)} />) 

    Configuration:

    This plugin has a peer dependency on babel-plugin-react-docgen . As a result, babel-plugin-react-docgen needs to be added to your Storybook Babel configuration.

    For a standard Storybook configuration, add react-docgen to your plugins in an appropriate .babelrc file.

    If you have created a webpack.config.js file for Storybook, you may need to configure the plugin in there.

    module.exports = (baseConfig, env, defaultConfig) => {
      defaultConfig.module.rules[0].use[0].options.plugins = [
        require.resolve('babel-plugin-react-docgen'),
      ]
    
      return defaultConfig
    }
    

    Typescript:

    Use react-docgen-typescript-loader to generate docgen info from Typescript types. This docgen info will be used to automatically create knobs.

    Keywords

    none

    Install

    npm i storybook-addon-smart-knobs

    DownloadsWeekly Downloads

    8,963

    Version

    6.0.2

    License

    MIT

    Unpacked Size

    33.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar