introduce Storybook Knobs

Author: rwieruch

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -1,10 +1,13 @@
-import { configure } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
 
 // pick all stories.js files within the src/ folder
 const req = require.context('../src', true, /stories\.js$/);
 
+addDecorator(withKnobs);
+
 function loadStories() {
   req.keys().forEach(filename => req(filename));
 }
 
-configure(loadStories, module);
+configure(loadStories, module);

package-lock.json

@@ -18,6 +18,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@storybook/addon-knobs": "^4.0.0-alpha.6",
     "@storybook/react": "^4.0.0-alpha.6",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",

package.json

@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { text, boolean } from '@storybook/addon-knobs';
 import Checkbox from './';
 
 class CheckboxStateful extends React.Component {
@@ -28,7 +29,7 @@ class CheckboxStateful extends React.Component {
 storiesOf('Checkbox', module)
   .add('with checked', () => {
     const value = true;
-    const children = 'My Checkbox Label';
+    const children = text('label', 'My Checkbox Label');
     const onCheckboxChange = () => {};
 
     return (
@@ -39,7 +40,7 @@ storiesOf('Checkbox', module)
   })
   .add('with unchecked', () => {
     const value = false;
-    const children = 'My Checkbox Label';
+    const children = text('label', 'My Checkbox Label');
     const onCheckboxChange = () => {};
 
     return (