Move Knobs documentation to CSF (#8737)

Move Knobs documentation to CSF

addons/knobs/README.md

@@ -3,17 +3,17 @@
 Storybook Addon Knobs allow you to edit props dynamically using the Storybook UI.
 You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).
 
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
+[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md).
 
-This is how Knobs look like:
+This is what Knobs looks like:
 
 [![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs)
 
 > Checkout the above [Live Storybook](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs) or [watch this video](https://www.youtube.com/watch?v=kopW6vzs9dg&feature=youtu.be).
 
 ## Getting Started
 
-First of all, you need to install knobs into your project as a dev dependency.
+First of all, you need to install Knobs into your project as a dev dependency.
 
 ```sh
 yarn add @storybook/addon-knobs --dev
@@ -25,34 +25,35 @@ Then, configure it as an addon by adding it to your `addons.js` file (located in
 import '@storybook/addon-knobs/register';
 ```
 
-Now, write your stories with knobs.
+Now, write your stories with Knobs.
 
 ### With React
 ```js
-import { storiesOf } from '@storybook/react';
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
-
-const stories = storiesOf('Storybook Knobs', module);
+import React from "react";
+import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
 
+export default {
+  title: "Storybook Knobs",
+  decorators: [withKnobs]
+};
 // Add the `withKnobs` decorator to add knobs support to your stories.
 // You can also configure `withKnobs` as a global decorator.
-stories.addDecorator(withKnobs);
 
 // Knobs for React props
-stories.add('with a button', () => (
-  <button disabled={boolean('Disabled', false)} >
-    {text('Label', 'Hello Storybook')}
+export const withAButton = () => (
+  <button disabled={boolean("Disabled", false)}>
+    {text("Label", "Hello Storybook")}
   </button>
-));
+);
 
 // Knobs as dynamic variables.
-stories.add('as dynamic variables', () => {
-  const name = text('Name', 'Arunoda Susiripala');
-  const age = number('Age', 89);
+export const asDynamicVariables = () => {
+  const name = text("Name", "Arunoda Susiripala");
+  const age = number("Age", 89);
 
   const content = `I am ${name} and I'm ${age} years old.`;
-  return (<div>{content}</div>);
-});
+  return <div>{content}</div>;
+};
 ```
 
 ### With Vue.js
@@ -130,7 +131,7 @@ stories.add('with a button', () => ({
 
 ```
 
-Categorize your knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
+Categorize your Knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the Knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
 ```js
 // Knob assigned a groupId.
 stories.add('as dynamic variables', () => {
@@ -148,7 +149,7 @@ You can see your Knobs in a Storybook panel as shown below.
 
 ## Available Knobs
 
-These are the knobs available for you to use. You can import these Knobs from the `@storybook/addon-knobs` module.
+These are the Knobs available for you to use. You can import these Knobs from the `@storybook/addon-knobs` module.
 Here's how to import the **text** Knob.
 
 ```js
@@ -198,7 +199,7 @@ const groupId = 'GROUP-ID1';
 const value = number(label, defaultValue);
 ```
 
-For use with `groupId`, pass the default `options` as the third argument
+For use with `groupId`, pass the default `options` as the third argument.
 ```
 const value = number(label, defaultValue, {}, groupId);
 ```
@@ -269,7 +270,7 @@ const value = array(label, defaultValue);
 ```
 
 > While editing values inside the knob, you will need to use a separator.
-> By default it's a comma, but this can be override by passing a separator variable.
+> By default it is a comma, but this can be overridden by passing a separator variable.
 >
 > ```js
 > import { array } from '@storybook/addon-knobs';
@@ -287,7 +288,7 @@ const value = array(label, defaultValue, ',', groupId);
 
 ### select
 
-Allows you to get a value from a select box from the user.
+It allows you to get a value from a select box from the user.
 
 ```js
 import { select } from '@storybook/addon-knobs';
@@ -306,12 +307,12 @@ const groupId = 'GROUP-ID1';
 const value = select(label, options, defaultValue, groupId);
 ```
 
-> You can also provide options as an array like this: `['red', 'blue', 'yellow']`
+> You can also provide options as an array like this: `['red', 'blue', 'yellow']`.
 
 
 ### radio buttons
 
-Allows you to get a value from a list of radio buttons from the user.
+It allows you to get a value from a list of radio buttons from the user.
 
 ```js
 import { radios } from '@storybook/addon-knobs';
@@ -359,7 +360,7 @@ const value = options(label, valuesObj, defaultValue, optionsObj, groupId);
 
 ### files
 
-Allows you to get a value from a file input from the user.
+It allows you to get a value from a file input from the user.
 
 ```js
 import { files } from '@storybook/addon-knobs';
@@ -377,7 +378,7 @@ const value = files(label, accept, defaultValue, groupId);
 
 ### date
 
-Allow you to get date (and time) from the user.
+Allows you to get date (and time) from the user.
 
 ```js
 import { date } from '@storybook/addon-knobs';
@@ -389,7 +390,7 @@ const groupId = 'GROUP-ID1';
 const value = date(label, defaultValue, groupId);
 ```
 
-> Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`
+> Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`.
 
 The `date` knob returns the selected date as stringified Unix timestamp (e.g. `"1510913096516"`).
 If your component needs the date in a different form you can wrap the `date` function:
@@ -403,7 +404,7 @@ function myDateKnob(name, defaultValue) {
 
 ### button
 
-Allows you to include a button and associated handler.
+It allows you to include a button and associated handler.
 
 ```js
 import { button } from '@storybook/addon-knobs';
@@ -415,8 +416,8 @@ const groupId = 'GROUP-ID1';
 button(label, handler, groupId);
 ```
 
-Button knobs cause the story to re-render after the handler fires, you can prevent
-this by having the handler return false.
+Button knobs cause the story to re-render after the handler fires.
+You can prevent this by having the handler return `false`.
 
 ### withKnobs options
 
@@ -441,7 +442,7 @@ stories.add('story name', () => ..., {
 
 ## Typescript
 
-If you are using typescript, make sure you have the type definitions installed for the following libs:
+If you are using Typescript, make sure you have the type definitions installed for the following libs:
 
 -   node
 -   react