storybook-addon-smart-knobs
Automatically created knobs for storybook.
Last updated 7 months ago by nekitk .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install storybook-addon-smart-knobs 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 6.0.2                                ...           latest (7 months ago)

16 Versions

  • 6.0.2                                ...           7 months ago
  • 6.0.1                                ...           10 months ago
  • 6.0.0                                ...           a year ago
  • 5.0.0                                ...           a year ago
  • 4.1.2                                ...           2 years ago
  • 4.1.0                                ...           2 years ago
  • 4.0.0                                ...           2 years ago
  • 3.3.1                                ...           3 years ago
  • 3.3.0                                ...           3 years ago
  • 3.2.10                                ...           3 years ago
  • 3.0.1                                ...           3 years ago
  • 0.3.0                                ...           4 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.0                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |