https://github.com/storybook-eol/addon-smart-knobs

🧠 This Storybook plugin uses @storybook/addon-knobs but creates the knobs automatically based on PropTypes.
https://github.com/storybook-eol/addon-smart-knobs

addon development-tools knobs proptypes react storybook

Last synced: about 1 month ago
JSON representation

🧠 This Storybook plugin uses @storybook/addon-knobs but creates the knobs automatically based on PropTypes.

• Host: GitHub
• URL: https://github.com/storybook-eol/addon-smart-knobs
• Owner: storybook-eol
• Archived: true
• Created: 2016-10-19T20:02:15.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-01-22T12:40:15.000Z (almost 3 years ago)
• Last Synced: 2024-05-17T00:08:43.187Z (6 months ago)
• Topics: addon, development-tools, knobs, proptypes, react, storybook
• Language: JavaScript
• Homepage: https://storybooks.js.org
• Size: 4.11 MB
• Stars: 217
• Watchers: 56
• Forks: 38
• Open Issues: 33
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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:

```js

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 }) => (

  { children }

)

Button.propTypes = {

  children: PropTypes.node,

  onClick: PropTypes.func

}

storiesOf('Button')

  .addDecorator(withSmartKnobs(options))

  .addDecorator(withKnobs)

  .add('simple', () => Smart knobed button)

```

## Options

- **ignoreProps**

  

  Type: `Array`

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

  ```js

    .withSmartKnobs({ ignoreProps: ['numberProp'] })

    .add('example', () => 
) 

  ```


## Configuration:

This plugin has a peer dependency on [babel-plugin-react-docgen

](https://github.com/storybooks/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](https://github.com/storybooks/babel-plugin-react-docgen/blob/master/README.md)

  - [Custom Babel Config | Storybook](https://storybook.js.org/configurations/custom-babel-config/).

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](https://github.com/strothj/react-docgen-typescript-loader) to generate docgen info from Typescript types. This docgen info will be used to automatically create knobs.