Improve Story knobs usability; put eslint config in package.json;

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-    "extends": "airbnb-base"
-}

docs/balloons.stories.js

@@ -1,15 +1,16 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select,
+  withKnobs, radios,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Ballons', module);
 stories.addDecorator(withKnobs);
 
 stories.add('balloon', () => {
-  const selectedClass = select('class', {
-    'balloon from-left': 'balloon from-left',
-    'balloon from-right': 'balloon from-right',
-  }, 'balloon from-left');
-  return `<div class="${selectedClass}"> <p>Hello NES.css</p> </div>`;
+  const selectedClass = radios('direction', {
+    default: '',
+    'from-left': 'from-left',
+    'from-right': 'from-right',
+  }, '');
+  return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
 });

docs/buttons.stories.js

@@ -1,18 +1,18 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select,
+  withKnobs, radios,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Buttons', module);
 stories.addDecorator(withKnobs);
 
 stories.add('button', () => {
-  const extraClass = select('class', {
-    btn: 'btn',
-    'btn is-primary': 'btn is-primary',
-    'btn is-success': 'btn is-success',
-    'btn is-warning': 'btn is-warning',
-    'btn is-error': 'btn is-error',
-  }, 'btn');
+  const extraClass = radios('class', {
+    default: '',
+    'is-primary': 'is-primary',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+  }, '');
   return `<button type="button" class="btn ${extraClass}">Normal</button>`;
 });

docs/containers.stories.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean,
+  withKnobs, boolean, radios,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Containers', module);
@@ -8,11 +8,14 @@ stories.addDecorator(withKnobs);
 
 stories.add('container', () => {
   const withTitle = boolean('with-title', false) ? 'with-title' : '';
-  const isCenter = boolean('is-center', false) ? 'is-center' : '';
-  const isRight = boolean('is-right', false) ? 'is-right' : '';
   const isDark = boolean('is-dark', false) ? 'is-dark' : '';
   const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const selectedClasses = [withTitle, isCenter, isRight, isDark, isRounded];
+  const alignment = radios('alignment', {
+    default: '',
+    'is-center': 'is-center',
+    'is-right': 'is-right',
+  }, '');
+  const selectedClasses = [withTitle, isDark, isRounded, alignment];
 
   return `<div class="container ${selectedClasses.join(' ')}">
       <p class="title">Container</p>

docs/icons.stories.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select,
+  withKnobs, select, radios,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Icons', module);
@@ -9,28 +9,22 @@ stories.addDecorator(withKnobs);
 stories.add('icon', () => {
   const selectedClass = select('class', {
     'icon twitter': 'icon twitter',
-    'icon twitter is-medium': 'icon twitter is-medium',
-    'icon twitter is-large': 'icon twitter is-large',
     'icon facebook': 'icon facebook',
-    'icon facebook is-medium': 'icon facebook is-medium',
-    'icon facebook is-large': 'icon facebook is-large',
     'icon github': 'icon github',
-    'icon github is-medium': 'icon github is-medium',
-    'icon github is-large': 'icon github is-large',
     'icon youtube': 'icon youtube',
-    'icon youtube is-medium': 'icon youtube is-medium',
-    'icon youtube is-large': 'icon youtube is-large',
     'icon close': 'icon close',
-    'icon close is-medium': 'icon close is-medium',
-    'icon close is-large': 'icon close is-large',
     'octocat animate': 'octocat animate',
     'icon trophy': 'icon trophy',
-    'icon trophy is-medium': 'icon trophy is-medium',
-    'icon trophy is-large': 'icon trophy is-large',
     'nes-logo': 'nes-logo',
     'nes-jp-logo': 'nes-jp-logo',
     'snes-logo': 'snes-logo',
     'snes-jp-logo': 'snes-jp-logo',
   }, 'icon twitter');
-  return `<i class="${selectedClass}"></i>`;
+  const selectedSize = radios('size', {
+    default: '',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+
+  return `<i class="${selectedClass} ${selectedSize}"></i>`;
 });

docs/inputs.stories.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select,
+  withKnobs, radios,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Inputs', module);
@@ -20,12 +20,12 @@ stories.add('input.radio', () => `
         <span>Enable</span>
       </label>`)
   .add('input', () => {
-    const selectedClass = select('class', {
-      input: 'input',
-      'input is-success': 'input is-success',
-      'input is-warning': 'input is-warning',
-      'input is-error': 'input is-error',
-    }, 'input');
+    const selectedClass = radios('class', {
+      default: '',
+      'is-success': 'is-success',
+      'is-warning': 'is-warning',
+      'is-error': 'is-error',
+    }, '');
 
-    return `<input type="text" id="name_field" class="${selectedClass}" placeholder="NES.css">`;
+    return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`;
   });

package.json

@@ -13,7 +13,7 @@
     "build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
     "deploy": "npm run build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build:storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -91,5 +91,8 @@
       "at-rule-no-unknown": null,
       "scss/at-rule-no-unknown": true
     }
+  },
+  "eslintConfig": {
+    "extends": "airbnb-base"
   }
 }