diff --git a/README.md b/README.md index 6b4fa1c..f9d496e 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,68 @@ # Smart knobs addon for Storybook -This Storybook plugin uses `@storybook/addon-knobs` but creates the knobs automatically based on PropTypes, Flow and Typescript. +This Storybook plugin uses [`@storybook/addon-knobs`](https://github.com/storybookjs/storybook/tree/next/addons/knobs) but creates the knobs automatically based on PropTypes, Flow and Typescript. ## Installation: +Via npm: + +```sh +npm i @storybook/addon-knobs storybook-addon-smart-knobs --save-dev ``` -npm i storybook-addon-smart-knobs --save-dev + +or with Yarn: + +```sh +yarn add @storybook/addon-knobs storybook-addon-smart-knobs --dev ``` ## Usage: +Follow the `@storybook/addon-knobs` [Getting started steps](https://github.com/storybookjs/storybook/tree/master/addons/knobs), and then: + +### Component Story Format (CSF) + +```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 }) => ( + +) + +Button.propTypes = { + children: PropTypes.node, + onClick: PropTypes.func +} + +export default { + title: 'Button', + component: Button, + decorators: [withKnobs, withSmartKnobs(options)] +}; + +export const simple = () => ) +``` + +To apply the smart knobs to a specific story: + +```js +export default { + title: 'Button', + component: Button, +}; + +export const simple = () => ) +simple.story = { + decorators: [[withKnobs, withSmartKnobs(options)]] +} +``` + +### `storiesOf` API + ```js import React from 'react' import PropTypes from 'prop-types' @@ -30,7 +83,15 @@ storiesOf('Button') .addDecorator(withSmartKnobs(options)) .addDecorator(withKnobs) .add('simple', () => ) +``` + +To apply the smart knobs to a specific story: +```js +storiesOf('Button') + .add('simple', () => , { + decorators: [[withKnobs, withSmartKnobs(options)]] + }) ``` ## Options @@ -41,7 +102,7 @@ storiesOf('Button') Will not automatically create knobs for props whose name is in this array. Example: ```js - .withSmartKnobs({ ignoreProps: ['numberProp'] }) + .addDecorator(withSmartKnobs({ ignoreProps: ['numberProp'] })) .add('example', () =>
) ```