Merge pull request #86 from gthomas-appfolio/addKnobs

gt - Add knobs add-on and stories
appfolio · Dec 15, 2016 · 4ac8436 · 4ac8436
2 parents cfea94f + 8833d1a
commit 4ac8436
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 6 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -0,0 +1,3 @@
+import '@kadira/storybook/addons';
+import '@kadira/storybook-addon-options/register';
+import '@kadira/storybook-addon-knobs/register';
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,7 +1,19 @@
 import React from 'react';
 import infoAddon from '@kadira/react-storybook-addon-info';
-import { Button,ButtonGroup, Container } from '../src';
+import { Button, ButtonGroup, Container } from '../src';
 import { configure, setAddon, addDecorator } from '@kadira/storybook';
+import { setOptions } from '@kadira/storybook-addon-options';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
+
+import './addons.js';
+
+setOptions({
+  name: 'react-gears',
+  url: 'https://github.com/gthomas-appfolio/xanthous',
+  showDownPanel: true,
+  downPanelInRight: true,
+  downPanel: 'kadirahq%2Fstorybook-addon-knobs'
+});
 
 const ThemeLink = props => {
   const changeTheme = url => {
@@ -20,6 +32,8 @@ const THEMES = [
   { name: 'Superhero', url: 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css' },
 ];
 
+addDecorator(withKnobs);
+
 addDecorator((story, info) => (
 <div>
   <ButtonGroup size="sm">
@@ -30,7 +44,7 @@ addDecorator((story, info) => (
       <h1 className="display-4 mb-3">{info.kind}</h1>
       <h2 className="lead">{info.story}</h2>
     </header>
-    <section style={{ maxWidth: '700px' }}>
+    <section>
       {story()}
     </section>
   </Container>

diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "start": "start-storybook -p 6006",
     "test": "nyc --reporter text --reporter lcov mocha --recursive --timeout 10000 --compilers js:babel-register --require ignore-styles",
     "prepublish": "npm run dist",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook -o docs"
   },
   "dependencies": {
     "babel-polyfill": "~6.13.0",
@@ -30,7 +30,9 @@
   },
   "devDependencies": {
     "@kadira/react-storybook-addon-info": "^3.3.0",
-    "@kadira/storybook": "^2.5.2",
+    "@kadira/storybook": "^2.34.0",
+    "@kadira/storybook-addon-knobs": "^1.7.1",
+    "@kadira/storybook-addon-options": "^1.0.1",
     "assert": "~1.4.1",
     "autoprefixer": "~6.4.0",
     "babel-core": "~6.14.0",

diff --git a/stories/Alerts.js b/stories/Alerts.js
@@ -1,10 +1,24 @@
 import React from 'react';
 import { Button, Container } from 'reactstrap';
 import { storiesOf } from '@kadira/storybook';
+import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs';
 
 import { Alert } from '../src/index';
 
 storiesOf('Alerts', module)
+  .addWithInfo('Live example', () => (
+    <Alert
+      color={select('color', ['info', 'success', 'warning', 'danger'], 'info')}
+      icon={boolean('icon', false)}
+      dismissible={boolean('dismissible', false)}
+    >
+      <p>{text('content', `Lorem ipsum dolor sit amet, consectetur adipiscing
+elit, sed do eiusmod tempor incididunt ut labore
+et dolore magna aliqua.  Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut
+aliquip ex ea commodo consequat.`)}</p>
+    </Alert>
+  ))
   .addWithInfo('Colors', () => (
     <div>
       <Alert>

diff --git a/stories/Buttons.js b/stories/Buttons.js
@@ -2,8 +2,21 @@ import React from 'react';
 import { Button, ButtonGroup, ButtonToolbar, ButtonDropdown,
          DropdownToggle, DropdownMenu, DropdownItem, Row } from 'reactstrap';
 import { storiesOf } from '@kadira/storybook';
+import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs';
+import Todo from './Todo.js';
+
 
 storiesOf('Buttons', module)
+  .addWithInfo('Live example', () => (
+    <Button
+      color={select('color', ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'], 'primary')}
+      disabled={boolean('disabled', false)}
+      outline={boolean('outline', false)}
+      size={select('size', ['', 'sm', 'lg'])}
+    >
+      {text('Label', 'Click Me')}
+    </Button>
+  ))
   .addWithInfo('Colors', () => (
     <ButtonToolbar>
       <Button>Default</Button>

diff --git a/stories/Forms.js b/stories/Forms.js
@@ -3,8 +3,23 @@ import { Container, Input } from 'reactstrap';
 import { storiesOf } from '@kadira/storybook';
 
 import { FormRow, FormChoice, CurrencyInput } from '../src';
+import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs';
 
 storiesOf('Forms', module)
+  .addWithInfo('Live example', () => (
+    <div>
+      <FormRow
+        type={select('type', ['select', 'checkbox', 'radio'], 'select')}
+        label={text('label', 'Select a Movie')}
+        color={select('color', ['', 'success', 'warning', 'danger'], '')}
+        feedback={text('feedback', 'You must select a movie')}
+      >
+        <FormChoice value="override">A New Hope</FormChoice>
+        <FormChoice>The Empire Strikes Back</FormChoice>
+        <FormChoice>The Force Awakens</FormChoice>
+      </FormRow>
+    </div>
+  ))
   .addWithInfo('Inputs', () => (
     <div>
       <h2 className="my-3">Default (Text) Input</h2>

diff --git a/stories/Icon.js b/stories/Icon.js
@@ -2,8 +2,20 @@ import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 
 import { Button, Icon } from '../src';
+import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs';
 
 storiesOf('Icon', module)
+  .addWithInfo('Live example', () => (
+    <Icon
+      name={text('name', 'motorcycle')}
+      size={select('size', ['', 'lg', '2x', '3x', '4x', '5x'], '4x')}
+      spin={boolean('spin', false)}
+      pulse={boolean('pulse', false)}
+      rotate={select('rotate', ['', '90', '180', '270'], '')}
+      flip={select('flip', ['', 'horizontal', 'vertical'], '')}
+      border={boolean('border', false)}
+    />
+  ))
   .addWithInfo('Examples', () => (
     <h1>
       <Icon name="plus-circle" />

diff --git a/stories/Table.js b/stories/Table.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 
 import { Table } from '../src';
+import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs';
 
 const DATA = [
   {
@@ -21,9 +22,15 @@ const DATA = [
     email: 'jon@walker.com'
   }
 ];
+
 storiesOf('Table', module)
-  .addWithInfo('Examples', () => (
-    <Table>
+  .addWithInfo('Live example', () => (
+    <Table bordered
+      bordered={boolean('bordered', true)}
+      striped={boolean('striped', true)}
+      hover={boolean('hover', true)}
+      size={select('size', ['', 'sm', 'lg'], 'sm')}
+    >
       <thead>
         <tr>
           <th>Name</th>