From 6b2f52b2d49df2e61a230c8eca67fd8e9657c832 Mon Sep 17 00:00:00 2001
From: Ben Ilegbodu <ben.ilegbodu@stitchfix.com>
Date: Fri, 10 Jan 2020 15:52:45 -0800
Subject: [PATCH 1/2] Add CSF examples

---
 README.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6b4fa1c..e70568b 100644
--- a/README.md
+++ b/README.md
@@ -5,11 +5,54 @@ This Storybook plugin uses `@storybook/addon-knobs` but creates the knobs automa
 ## Installation:
 
 ```
-npm i storybook-addon-smart-knobs --save-dev
+npm i @storybook/addon-knobs storybook-addon-smart-knobs --save-dev
 ```
 
 ## Usage:
 
+### 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 onClick={ onClick }>{ children }</button>
+)
+
+Button.propTypes = {
+  children: PropTypes.node,
+  onClick: PropTypes.func
+}
+
+export default {
+  title: 'Button',
+  component: Button,
+  decorators: [[withKnobs, withSmartKnobs(options)]]
+};
+
+export const simple = () => <Button>Smart knobed button</Button>)
+```
+
+To apply the smart knobs to a specific story:
+
+```js
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const simple = () => <Button>Smart knobed button</Button>)
+simple.story = {
+  decorators: [[withKnobs, withSmartKnobs(options)]]
+}
+```
+
+### `storiesOf` API
+
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
@@ -30,7 +73,15 @@ storiesOf('Button')
   .addDecorator(withSmartKnobs(options))
   .addDecorator(withKnobs)
   .add('simple', () => <Button>Smart knobed button</Button>)
+```
 
+To apply the smart knobs to a specific story:
+
+```js
+storiesOf('Button')
+  .add('simple', () => <Button>Smart knobed button</Button>, {
+    decorators: [[withKnobs, withSmartKnobs(options)]]
+  })
 ```
 
 ## Options
@@ -41,7 +92,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', () => <div numberProp={date('date', date)} />) 
   ```
 

From 9917820b75db94b72912856578110ba642de566e Mon Sep 17 00:00:00 2001
From: Ben Ilegbodu <ben@benmvp.com>
Date: Wed, 15 Jan 2020 15:22:41 -0800
Subject: [PATCH 2/2] Fix double brackets in decorators example

---
 README.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e70568b..f9d496e 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,25 @@
 # 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
 ```
 
+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
@@ -31,7 +41,7 @@ Button.propTypes = {
 export default {
   title: 'Button',
   component: Button,
-  decorators: [[withKnobs, withSmartKnobs(options)]]
+  decorators: [withKnobs, withSmartKnobs(options)]
 };
 
 export const simple = () => <Button>Smart knobed button</Button>)