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:

importReactfrom'react'importPropTypesfrom'prop-types'import{storiesOf}from'@storybook/react'import{withKnobs}from'@storybook/addon-knobs'import{withSmartKnobs}from'storybook-addon-smart-knobs'constButton=({ children, onClick })=>(<buttononClick={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',()=><divnumberProp={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.

• README | babel-plugin-react-docgen
• Custom Babel Config | Storybook.

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.