Add Storybook Knobs

.storybook/addons.js

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

docs/balloons.stories.js

@@ -1,5 +1,15 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Balloons', module)
+const stories = storiesOf('Ballons', module);
-  .add('.balloon.from-left', () => '<div class="balloon from-left"> <p>Hello NES.css</p> </div>')
+stories.addDecorator(withKnobs);
-  .add('.balloon.from-right', () => '<div class="balloon from-right"> <p>Hello NES.css</p> </div>');
+
+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>`;
+});

docs/buttons.stories.js

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

docs/containers.stories.js

@@ -1,35 +1,26 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Containers', module)
+const stories = storiesOf('Containers', module);
-  .add('.container.with-title', () => `<div class="container with-title">
+stories.addDecorator(withKnobs);
-          <p class="title">Container</p>
+
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+stories.add('container', () => {
-      </div>`)
+  const selectedClass = select('class', {
-  .add('.container.with-title.is-center', () => `<div class="container with-title is-center">
+    container: 'container',
-          <p class="title">Container.is-center</p>
+    'container with-title': 'container with-title',
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+    'container with-title is-center': 'container with-title is-center',
-      </div>`)
+    'container with-title is-right': 'container with-title is-right',
-  .add('.container.with-title.is-right', () => `<div class="container with-title is-right">
+    'container with-title is-dark': 'container with-title is-dark',
-          <p class="title">Container.is-right</p>
+    'container with-title is-center is-dark': 'container with-title is-center is-dark',
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+    'container with-title is-right is-dark': 'container with-title is-right is-dark',
-        </div>`)
+    'container is-rounded': 'container is-rounded',
-  .add('.container.with-title.is_dark', () => `<div class="container with-title is-dark">
+    'container is-rounded is-dark': 'container is-rounded is-dark',
-          <p class="title">Container</p>
+  }, 'container');
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+
-      </div>`)
+  return `<div class="${selectedClass}">
-  .add('.container.with-title.is-center.is-dark', () => `<div class="container with-title is-center is-dark">
+      <p class="title">Container</p>
-          <p class="title">Container.is-center</p>
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+  </div>`;
-      </div>`)
+});
-  .add('.container.with-title.is-right.is-dark', () => `<div class="container with-title is-right is-dark">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`)
-  .add('.container.is-rounded', () => `<div class="container is-rounded">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`)
-  .add('.container.is-rounded.is-dark', () => `<div class="container is-rounded is-dark">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`);

docs/icons.stories.js

@@ -1,26 +1,36 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Icons', module)
+const stories = storiesOf('Icons', module);
-  .add('icon.twitter', () => '<i class="icon twitter"></i>')
+stories.addDecorator(withKnobs);
-  .add('icon.twitter.is-medium', () => '<i class="icon twitter is-medium"></i>')
+
-  .add('icon.twitter.is-large', () => '<i class="icon twitter is-large"></i>')
+stories.add('icon', () => {
-  .add('icon.facebook', () => '<i class="icon facebook"></i>')
+  const selectedClass = select('class', {
-  .add('icon.facebook.is-medium', () => '<i class="icon facebook is-medium"></i>')
+    'icon twitter': 'icon twitter',
-  .add('icon.facebook.is-large', () => '<i class="icon facebook is-large"></i>')
+    'icon twitter is-medium': 'icon twitter is-medium',
-  .add('icon.github', () => '<i class="icon github"></i>')
+    'icon twitter is-large': 'icon twitter is-large',
-  .add('icon.github.is-medium', () => '<i class="icon github is-medium"></i>')
+    'icon facebook': 'icon facebook',
-  .add('icon.github.is-large', () => '<i class="icon github is-large"></i>')
+    'icon facebook is-medium': 'icon facebook is-medium',
-  .add('icon.youtube', () => '<i class="icon youtube"></i>')
+    'icon facebook is-large': 'icon facebook is-large',
-  .add('icon.youtube.is-medium', () => '<i class="icon youtube is-medium"></i>')
+    'icon github': 'icon github',
-  .add('icon.youtube.is-large', () => '<i class="icon youtube is-large"></i>')
+    'icon github is-medium': 'icon github is-medium',
-  .add('icon.close', () => '<i class="icon close"></i>')
+    'icon github is-large': 'icon github is-large',
-  .add('icon.close.is-medium', () => '<i class="icon close is-medium"></i>')
+    'icon youtube': 'icon youtube',
-  .add('icon.close.is-large', () => '<i class="icon close is-large"></i>')
+    'icon youtube is-medium': 'icon youtube is-medium',
-  .add('octocat animate', () => '<i class="octocat animate"></i>')
+    'icon youtube is-large': 'icon youtube is-large',
-  .add('icon.trophy', () => '<i class="icon trophy"></i>')
+    'icon close': 'icon close',
-  .add('icon.trophy is-medium', () => '<i class="icon trophy is-medium"></i>')
+    'icon close is-medium': 'icon close is-medium',
-  .add('icon.trophy is-large', () => '<i class="icon trophy is-large"></i>')
+    'icon close is-large': 'icon close is-large',
-  .add('nes-logo', () => '<i class="nes-logo"></i>')
+    'octocat animate': 'octocat animate',
-  .add('nes-jp-logo', () => '<i class="nes-jp-logo"></i>')
+    'icon trophy': 'icon trophy',
-  .add('snes-logo', () => '<i class="snes-logo"></i>')
+    'icon trophy is-medium': 'icon trophy is-medium',
-  .add('snes-jp-logo', () => '<i class="snes-jp-logo"></i>');
+    '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>`;
+});

docs/inputs.stories.js

@@ -1,7 +1,12 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Inputs', module)
+const stories = storiesOf('Inputs', module);
-  .add('input.radio', () => `
+stories.addDecorator(withKnobs);
+
+stories.add('input.radio', () => `
       <label>
         <input type="radio" class="radio" name="answer" checked />
         <span>Yes</span>
@@ -14,11 +19,13 @@ storiesOf('Inputs', module)
         <input type="checkbox" class="checkbox" checked />
         <span>Enable</span>
       </label>`)
-  .add('input.input', () => `
+  .add('input', () => {
-        <input type="text" id="name_field" class="input">`)
+    const selectedClass = select('class', {
-  .add('input.input.is-success', () => `
+      input: 'input',
-        <input type="text" class="input is-success" placeholder="NES.css">`)
+      'input is-success': 'input is-success',
-  .add('input.input.is-warning', () => `
+      'input is-warning': 'input is-warning',
-        <input type="text" class="input is-warning" placeholder="8bit.css">`)
+      'input is-error': 'input is-error',
-  .add('input.input.is-error', () => `
+    }, 'input');
-        <input type="text" class="input is-error" placeholder="awesome.css">`);
+
+    return `<input type="text" id="name_field" class="${selectedClass}" placeholder="NES.css">`;
+  });

docs/table.stories.js

@@ -1,8 +1,18 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select,
+} from '@storybook/addon-knobs';
 
-storiesOf('Tables', module)
+const stories = storiesOf('Tables', module);
-  .add('table.table', () => `
+stories.addDecorator(withKnobs);
-      <table class="table" style="margin:15px 4px 5px 4px">
+
+stories.add('table', () => {
+  const selectedClass = select('class', {
+    'table is-bordered': 'table is-bordered',
+    'table is-bordered is-centered': 'table is-bordered is-centered',
+  }, 'table is-bordered');
+
+  return `<table class="${selectedClass}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
             <th>Table</th>
@@ -22,49 +32,5 @@ storiesOf('Tables', module)
             <td>Thou hast had a good night</td>
           </tr>
         </tbody>
-      </table>`)
+      </table>`;
-  .add('table.table.is-bordered', () => `
+});
-      <table class="table is-bordered" style="margin:15px 4px 5px 4px">
-        <thead>
-          <tr>
-            <th>Table</th>
-            <th>Table.is-bordered</th>
-            <th>Table.is-centered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-        </tbody>
-      </table>`)
-  .add('table.table.is-bordered.is-centered', () => `
-      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
-        <thead>
-          <tr>
-            <th>Table</th>
-            <th>Table.is-bordered</th>
-            <th>Table.is-centered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
-          </tr>
-        </tbody>
-      </table>
-  `);

package.json

@@ -32,9 +32,10 @@
   },
   "homepage": "https://github.com/BcRikko/NES.css#readme",
   "devDependencies": {
+    "@storybook/addon-knobs": "^4.0.11",
     "@storybook/html": "^4.0.11",
-    "babel-loader": "^8.0.4",
     "autoprefixer": "^9.1.5",
+    "babel-loader": "^8.0.4",
     "clean-css-cli": "^4.2.1",
     "eslint": "^5.9.0",
     "eslint-config-airbnb-base": "^13.1.0",
@@ -66,7 +67,10 @@
       "git add ./css",
       "git add"
     ],
-    "*.js": ["eslint .", "git add"]
+    "*.js": [
+      "eslint .",
+      "git add"
+    ]
   },
   "prettier": {
     "printWidth": 100