Merge pull request #385 from HiKaylum/storybook_enhancement_1

refactor(storybook): storybook enhancement and cleanup

package-lock.json

@@ -6362,6 +6362,12 @@
         }
       }
     },
+    "file-type": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-11.1.0.tgz",
+      "integrity": "sha512-rM0UO7Qm9K7TWTtA6AShI/t7H5BPjDeGVDaNyg9BjHAj3PysKy7+8C8D137R88jnR3rFJZQB/tFgydl5sN5m7g==",
+      "dev": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -6651,7 +6657,8 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6675,13 +6682,15 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6698,19 +6707,22 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6841,7 +6853,8 @@
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6855,6 +6868,7 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6871,6 +6885,7 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6879,13 +6894,15 @@
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -6906,6 +6923,7 @@
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6994,7 +7012,8 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7008,6 +7027,7 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7103,7 +7123,8 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7145,6 +7166,7 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7166,6 +7188,7 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7214,13 +7237,15 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

package.json

@@ -57,6 +57,7 @@
     "@storybook/html": "^5.0.0",
     "autoprefixer": "^9.1.5",
     "babel-loader": "^8.0.4",
+    "classnames": "^2.2.6",
     "clean-css-cli": "^4.2.1",
     "commitizen": "^3.1.1",
     "css-loader": "^2.0.0",
@@ -158,7 +159,18 @@
     ]
   },
   "eslintConfig": {
-    "extends": "airbnb-base"
+    "extends": "airbnb-base",
+    "rules": {
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          "devDependencies": [
+            "**/*.stories.js",
+            "**/*.template.js"
+          ]
+        }
+      ]
+    }
   },
   "eslintIgnore": [
     "docs/*"

story/_helpers/icons.js

@@ -0,0 +1,38 @@
+export const Icons = {
+  twitter: 'twitter',
+  facebook: 'facebook',
+  github: 'github',
+  google: 'google',
+  youtube: 'youtube',
+  whatsapp: 'whatsapp',
+  gmail: 'gmail',
+  linkedin: 'linkedin',
+  instagram: 'instagram',
+  close: 'close',
+  coin: 'coin',
+  trophy: 'trophy',
+};
+
+export const Sprites = {
+  'nes-pokeball': 'nes-pokeball',
+  'nes-bulbasaur': 'nes-bulbasaur',
+  'nes-charmander': 'nes-charmander',
+  'nes-squirtle': 'nes-squirtle',
+  'nes-smartphone': 'nes-smartphone',
+  'nes-kirby': 'nes-kirby',
+  'nes-phone': 'nes-phone',
+  'nes-octocat animate': 'nes-octocat animate',
+  'nes-ash': 'nes-ash',
+  'nes-mario': 'nes-mario',
+  'nes-logo': 'nes-logo',
+  'nes-jp-logo': 'nes-jp-logo',
+  'snes-logo': 'snes-logo',
+  'snes-jp-logo': 'snes-jp-logo',
+};
+
+export const Size = {
+  default: '',
+  'is-small': 'is-small',
+  'is-medium': 'is-medium',
+  'is-large': 'is-large',
+};

story/_helpers/shared.js

@@ -0,0 +1,5 @@
+export default {
+  'is-success': 'is-success',
+  'is-warning': 'is-warning',
+  'is-error': 'is-error',
+};

story/avatars.stories.js

@@ -1,22 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Avatars', module);
-stories.addDecorator(withKnobs);
-
-stories.add('avatars', () => {
-  const options = radios('class', {
-    'is-small': 'is-small',
-    default: '',
-    'is-medium': 'is-medium',
-    'is-large': 'is-large',
-  }, '');
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const selectedClasses = [isRounded, options].join(' ');
-
-  return `<img src="http://www.gravatar.com/avatar?s=15" class="nes-avatar ${selectedClasses}"
-    alt="Gravatar Image Example"
-    style="image-rendering: pixelated;">`;
-});

story/avatars/avatars.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Avatars from './avatars.template';
+
+storiesOf('Avatars', module)
+  .addDecorator(withKnobs)
+  .add('Avatar', () => Avatars());

story/avatars/avatars.template.js

@@ -0,0 +1,26 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isRounded = boolean('is-rounded', false);
+  const avatarSize = select('Avatar Classes', {
+    default: '',
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+
+  const avatarClasses = classNames(
+    'nes-avatar',
+    avatarSize,
+    {
+      'is-rounded': isRounded,
+    },
+  );
+
+  return `
+    <img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}"
+      alt="Gravatar Image Example"
+      style="image-rendering: pixelated;">
+  `;
+};

story/badge.stories.js

@@ -1,43 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios, number,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Badges', module);
-stories.addDecorator(withKnobs);
-
-stories.add('badges', () => {
-  const optionsLeft = radios('left/only', {
-    'is-dark': 'is-dark',
-    'is-success': 'is-success',
-    'is-primary': 'is-primary',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-  }, 'is-dark');
-
-  const optionsRight = radios('right', {
-    'is-dark': 'is-dark',
-    'is-success': 'is-success',
-    'is-primary': 'is-primary',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-  }, 'is-success');
-
-  const isSplitedIsIconOrDefault = radios('default/splited/icon', {
-    default: '',
-    'is-splited': 'is-splited',
-    'is-icon': 'is-icon',
-  }, 'is-splited');
-
-  const fontSize = number('font-size', 1, {
-    range: true,
-    min: 0,
-    max: 100,
-    step: 0.01,
-  });
-
-  return `<a href="#" class="nes-badge ${isSplitedIsIconOrDefault}" style="font-size:${fontSize}em">
-              <span class="${optionsLeft}">npm</span>
-              <span class="${optionsRight}">1.0.0</span>
-          </a>`;
-});

story/badge/badge.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Badge from './badge.template';
+
+storiesOf('Badges', module)
+  .addDecorator(withKnobs)
+  .add('Badge', () => Badge());

story/badge/badge.template.js

@@ -0,0 +1,38 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const sharedComponentOptions = {
+    'is-dark': 'is-dark',
+    'is-primary': 'is-primary',
+    ...sharedOptions,
+  };
+
+  const iconStyle = select('Badge Display', {
+    default: '',
+    'is-splited': 'is-splited',
+    'is-icon': 'is-icon',
+  }, 'is-splited');
+
+  const leftOptions = select('Left Style', {
+    ...sharedComponentOptions,
+  }, 'is-dark');
+
+  const rightOptions = select('Right Style', {
+    ...sharedComponentOptions,
+  }, 'is-success');
+
+  const badgeClasses = classNames(
+    'nes-badge',
+    iconStyle,
+  );
+
+  return `
+    <a href="#" class="${badgeClasses}">
+      <span class="${leftOptions}">npm</span>
+      <span class="${rightOptions}">1.0.0</span>
+    </a>
+  `;
+};

story/balloons.stories.js

@@ -1,18 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Ballons', module);
-stories.addDecorator(withKnobs);
-
-stories.add('balloon', () => {
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-  const alignment = radios('direction', {
-    default: '',
-    'from-left': 'from-left',
-    'from-right': 'from-right',
-  }, '');
-  const selectedClasses = [isDark, alignment];
-  return `<div class="nes-balloon ${selectedClasses.join(' ')}"> <p>Hello NES.css</p> </div>`;
-});

story/balloons/balloons.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Ballons from './balloons.template';
+
+storiesOf('Balloons', module)
+  .addDecorator(withKnobs)
+  .add('Balloon', () => Ballons());

story/balloons/balloons.template.js

@@ -0,0 +1,25 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+  const balloonDirection = select('Direction', {
+    default: '',
+    'from-left': 'from-left',
+    'from-right': 'from-right',
+  }, '');
+
+  const balloonClasses = classNames(
+    'nes-balloon',
+    balloonDirection,
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div class="${balloonClasses}">
+      <p>Hello NES.css</p>
+    </div>
+  `;
+};

story/buttons.stories.js

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

story/buttons/buttons.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Buttons from './buttons.template';
+
+storiesOf('Buttons', module)
+  .addDecorator(withKnobs)
+  .add('Buttons', () => Buttons());

story/buttons/buttons.template.js

@@ -0,0 +1,26 @@
+import { select } from '@storybook/addon-knobs';
+
+import sharedOption from '../_helpers/shared';
+
+export default () => {
+  const buttonType = select('Button Type', {
+    button: 'button',
+    file: 'file',
+  }, 'button');
+
+  const buttonClasses = select('Button Classes', {
+    default: '',
+    'is-primary': 'is-primary',
+    ...sharedOption,
+    'is-disabled': 'is-disabled',
+  }, '');
+
+  return buttonType === 'button' ? `
+    <button type="button" class="nes-btn ${buttonClasses}">Normal</button>
+  ` : `
+    <label class="nes-btn ${buttonClasses}">
+      <span>Select your file</span>
+      <input type="file">
+    </label>
+  `;
+};

story/containers.stories.js

@@ -1,24 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Containers', module);
-stories.addDecorator(withKnobs);
-
-stories.add('container', () => {
-  const withTitle = boolean('with-title', false) ? 'with-title' : '';
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const alignment = radios('alignment', {
-    default: '',
-    'is-centered': 'is-centered',
-    'is-right': 'is-right',
-  }, '');
-  const selectedClasses = [withTitle, isDark, isRounded, alignment];
-
-  return `<div class="nes-container ${selectedClasses.join(' ')}">
-      <p class="title">Container</p>
-      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-  </div>`;
-});

story/containers/containers.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Containers from './containers.template';
+
+storiesOf('Containers', module)
+  .addDecorator(withKnobs)
+  .add('Container', () => Containers());

story/containers/containers.template.js

@@ -0,0 +1,31 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+  const isRounded = boolean('is-rounded', false);
+  const withTitle = boolean('with-title', false);
+
+  const containerAlignment = select('Alignment', {
+    default: '',
+    'is-centered': 'is-centered',
+    'is-right': 'is-right',
+  }, '');
+
+  const containerClasses = classNames(
+    'nes-container',
+    containerAlignment,
+    {
+      'is-dark': isDark,
+      'is-rounded': isRounded,
+      'with-title': withTitle,
+    },
+  );
+
+  return `
+    <div class="${containerClasses}">
+      ${withTitle ? '<p class="title">Container</p>' : ''}
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+    </div>
+  `;
+};

story/dialogs.stories.js

@@ -1,19 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Dialogs', module);
-stories.addDecorator(withKnobs);
-
-stories.add('dialog', () => {
-  const open = boolean('open', true) ? 'open' : '';
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-  const selectedClasses = [isRounded, isDark];
-
-  return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
-      <p class="title">Dialog</p>
-      <p>Alert: this is a dialog.</p>
-  </div>`;
-});

story/dialogs/dialogs.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Dialogs from './dialogs.template';
+
+storiesOf('Dialogs', module)
+  .addDecorator(withKnobs)
+  .add('Dialog', () => Dialogs());

story/dialogs/dialogs.template.js

@@ -0,0 +1,23 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isOpen = boolean('Open', true) ? 'open' : '';
+  const isRounded = boolean('is-rounded', false);
+  const isDark = boolean('is-dark', false);
+
+  const dialogClasses = classNames(
+    'nes-dialog',
+    {
+      'is-rounded': isRounded,
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <dialog class="${dialogClasses}" ${isOpen}>
+      <p class="title">Dialog</p>
+      <p>Alert: this is a dialog.</p>
+    </dialog>
+  `;
+};

story/icons.stories.js

@@ -1,46 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, select, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Icons', module);
-stories.addDecorator(withKnobs);
-
-stories.add('icon', () => {
-  const selectedClass = select('class', {
-    'nes-icon twitter': 'nes-icon twitter',
-    'nes-icon facebook': 'nes-icon facebook',
-    'nes-icon github': 'nes-icon github',
-    'nes-icon google': 'nes-icon google',
-    'nes-icon youtube': 'nes-icon youtube',
-    'nes-icon whatsapp': 'nes-icon whatsapp',
-    'nes-icon gmail': 'nes-icon gmail',
-    'nes-icon linkedin': 'nes-icon linkedin',
-    'nes-icon instagram': 'nes-icon instagram',
-    'nes-icon close': 'nes-icon close',
-    'nes-icon coin': 'nes-icon coin',
-    'nes-pokeball': 'nes-pokeball',
-    'nes-bulbasaur': 'nes-bulbasaur',
-    'nes-charmander': 'nes-charmander',
-    'nes-squirtle': 'nes-squirtle',
-    'nes-smartphone': 'nes-smartphone',
-    'nes-kirby': 'nes-kirby',
-    'nes-phone': 'nes-phone',
-    'nes-octocat animate': 'nes-octocat animate',
-    'nes-ash': 'nes-ash',
-    'nes-icon trophy': 'nes-icon trophy',
-    'nes-mario': 'nes-mario',
-    'nes-logo': 'nes-logo',
-    'nes-jp-logo': 'nes-jp-logo',
-    'snes-logo': 'snes-logo',
-    'snes-jp-logo': 'snes-jp-logo',
-  }, 'nes-icon twitter');
-  const selectedSize = radios('size', {
-    default: '',
-    'is-small': 'is-small',
-    'is-medium': 'is-medium',
-    'is-large': 'is-large',
-  }, '');
-
-  return `<i class="${selectedClass} ${selectedSize}"></i>`;
-});

story/icons/icons.stories.js

@@ -0,0 +1,10 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Icons from './icons.template';
+import Sprites from './sprites.template';
+
+storiesOf('Icons', module)
+  .addDecorator(withKnobs)
+  .add('Icons', () => Icons())
+  .add('Sprites', () => Sprites());

story/icons/icons.template.js

@@ -0,0 +1,23 @@
+import { radios, select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Icons, Size } from '../_helpers/icons';
+
+export default () => {
+  const selectedIcon = select('class', {
+    ...Icons,
+  }, 'twitter');
+
+  const iconSize = radios('Icon Size', {
+    ...Size,
+  }, '');
+
+  const iconClasses = classNames(
+    'nes-icon',
+    selectedIcon,
+    iconSize,
+  );
+  return `
+    <i class="${iconClasses}"></i>
+  `;
+};

story/icons/sprites.template.js

@@ -0,0 +1,13 @@
+import { select } from '@storybook/addon-knobs';
+
+import { Sprites } from '../_helpers/icons';
+
+export default () => {
+  const selectedSprite = select('class', {
+    ...Sprites,
+  }, 'nes-pokeball');
+
+  return `
+    <i class="${selectedSprite}"></i>
+  `;
+};

story/inputs.stories.js

@@ -1,43 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Inputs', module);
-stories.addDecorator(withKnobs);
-
-stories.add('input.radio', () => {
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-
-  return (
-    `<label>
-      <input type="radio" class="nes-radio ${isDark}" name="answer" checked />
-      <span>Yes</span>
-    </label>
-    <label>
-      <input type="radio" class="nes-radio ${isDark}" name="answer" />
-      <span>No</span>
-    </label>`
-  );
-})
-  .add('input.checkbox', () => {
-    const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-
-    return (
-      `<label>
-        <input type="checkbox" class="nes-checkbox ${isDark}" checked />
-        <span>Enable</span>
-      </label>`
-    );
-  })
-  .add('input', () => {
-    const selectedClass = radios('class', {
-      default: '',
-      'is-success': 'is-success',
-      'is-warning': 'is-warning',
-      'is-error': 'is-error',
-      'is-dark': 'is-dark',
-    }, '');
-
-    return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
-  });

story/inputs/checkboxes.template.js

@@ -0,0 +1,22 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+
+  const checkBoxClasses = classNames(
+    'nes-checkbox',
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div style="${isDark ? 'background-color: black;' : ''}">
+      <label>
+        <input type="checkbox" class="${checkBoxClasses}" checked />
+        <span>Enable</span>
+      </label>
+    </div>
+  `;
+};

story/inputs/input.template.js

@@ -0,0 +1,20 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const inputOptions = select('Input Classes', {
+    default: '',
+    ...sharedOptions,
+  }, '');
+
+  const inputClasses = classNames(
+    'nes-input',
+    inputOptions,
+  );
+
+  return `
+    <input type="text" id="name_field" class="${inputClasses}" placeholder="NES.css">
+  `;
+};

story/inputs/inputs.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Input from './input.template';
+import CheckBox from './checkboxes.template';
+import Radio from './radio.template';
+
+storiesOf('Inputs', module)
+  .addDecorator(withKnobs)
+  .add('Input', () => Input())
+  .add('Checkbox', () => CheckBox())
+  .add('Radio', () => Radio());

story/inputs/radio.template.js

@@ -0,0 +1,27 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+
+export default () => {
+  const isDark = boolean('is-dark', false);
+
+  const radioClasses = classNames(
+    'nes-radio',
+    {
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <div style="${isDark ? 'background-color: black;' : ''}">
+      <label>
+        <input type="radio" class="${radioClasses}" name="answer" checked />
+        <span>Yes</span>
+      </label>
+      <label>
+        <input type="radio" class="${radioClasses}" name="answer" />
+        <span>No</span>
+      </label>
+    </div>
+  `;
+};

story/lists.stories.js

@@ -1,20 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Lists', module);
-stories.addDecorator(withKnobs);
-
-stories.add('list', () => {
-  const selectedClass = radios('type', {
-    default: 'is-disc',
-    'is-circle': 'is-circle',
-  }, 'is-disc');
-  return `<ul class="nes-list ${selectedClass}">
-            <li>Good morning.</li>
-            <li>Thou hast had a good night's sleep, I hope.</li>
-            <li>Thou hast had a good afternoon</li>
-            <li>Good night.</li>
-          </ul>`;
-});

story/lists/lists.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Lists from './lists.template';
+
+storiesOf('Lists', module)
+  .addDecorator(withKnobs)
+  .add('List', () => Lists());

story/lists/lists.template.js

@@ -0,0 +1,23 @@
+import { radios } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const listOptions = radios('List Type', {
+    'is-disc': 'is-disc',
+    'is-circle': 'is-circle',
+  }, 'is-disc');
+
+  const listClasses = classNames(
+    'nes-list',
+    listOptions,
+  );
+
+  return `
+    <ul class="${listClasses}">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  `;
+};

story/progress.stories.js

@@ -1,28 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, number, radios, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Progress', module);
-stories.addDecorator(withKnobs);
-
-// prettier-ignore
-stories.add('progress', () => {
-  const percentage = number('percentage', 30, {
-    range: true,
-    min: 0,
-    max: 100,
-    step: 1,
-  });
-  const extraClass = radios('class', {
-    default: '',
-    'is-primary': 'is-primary',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-    'is-pattern': 'is-pattern',
-  }, '');
-  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const selectedClasses = [extraClass, isRounded];
-  return `<progress class="nes-progress ${selectedClasses.join(' ')}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
-});

story/progress/progress.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Progress from './progress.template';
+
+storiesOf('Progress', module)
+  .addDecorator(withKnobs)
+  .add('Progress', () => Progress());

story/progress/progress.template.js

@@ -0,0 +1,32 @@
+import { select, boolean, number } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOption from '../_helpers/shared';
+
+export default () => {
+  const isRounded = boolean('is-rounded', false);
+  const progressTypes = select('Progress Style', {
+    default: '',
+    'is-dark': 'is-dark',
+    ...sharedOption,
+  }, '');
+
+  const percentage = number('Percentage', 30, {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1,
+  });
+
+  const progessClasses = classNames(
+    'nes-progress',
+    progressTypes,
+    {
+      'is-rounded': isRounded,
+    },
+  );
+
+  return `
+    <progress class="nes-progress ${progessClasses}" value="${percentage}" max="100" style="width: 100%;"></progress>
+  `;
+};

story/select.stories.js

@@ -1,27 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Selects', module);
-stories.addDecorator(withKnobs);
-
-stories.add('select', () => {
-  const selectedClass = radios('class', {
-    default: '',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-    'is-dark': 'is-dark',
-  }, '');
-
-  return `
-    <div class="nes-select ${selectedClass}">
-      <select required>
-        <option value="" disabled selected hidden>Select...</option>
-        <option value="0">To be</option>
-        <option value="1">Not to be</option>
-      </select>
-    </div>
-  `;
-});

story/select/select.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Select from './select.template';
+
+storiesOf('Selects', module)
+  .addDecorator(withKnobs)
+  .add('Select', () => Select());

story/select/select.template.js

@@ -0,0 +1,21 @@
+import { select } from '@storybook/addon-knobs';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const selectedClass = select('class', {
+    default: '',
+    ...sharedOptions,
+    'is-dark': 'is-dark',
+  }, '');
+
+  return `
+    <div class="nes-select ${selectedClass}">
+      <select required>
+        <option value="" disabled selected hidden>Select...</option>
+        <option value="0">To be</option>
+        <option value="1">Not to be</option>
+      </select>
+    </div>
+  `;
+};

story/table.stories.js

@@ -1,37 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, boolean,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Tables', module);
-stories.addDecorator(withKnobs);
-
-stories.add('table', () => {
-  const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
-  const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
-  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
-
-  const selectedClasses = [isBordered, isCentered, isDark];
-
-  return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
-        <thead>
-          <tr>
-            <th>Table.is-dark</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>`;
-});

story/table/table.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Table from './table.template';
+
+storiesOf('Tables', module)
+  .addDecorator(withKnobs)
+  .add('Table', () => Table());

story/table/table.template.js

@@ -0,0 +1,41 @@
+import { boolean } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+export default () => {
+  const isBorderd = boolean('is-bordered', true);
+  const isCentered = boolean('is-centered', false);
+  const isDark = boolean('is-dark', false);
+
+  const tableClasses = classNames(
+    'nes-table',
+    {
+      'is-bordered': isBorderd,
+      'is-centered': isCentered,
+      'is-dark': isDark,
+    },
+  );
+
+  return `
+    <table class="nes-table ${tableClasses}" style="margin:15px 4px 5px 4px">
+      <thead>
+        <tr>
+          <th>Table.is-dark</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>
+  `;
+};

story/text.stories.js

@@ -1,19 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Texts', module);
-stories.addDecorator(withKnobs);
-
-stories.add('text', () => {
-  const extraClass = radios('class', {
-    default: '',
-    'is-primary': 'is-primary',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-    'is-disabled': 'is-disabled',
-  }, '');
-  return `<span class="nes-text ${extraClass}">NES.css</span>`;
-});

story/text/text.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Text from './text.template';
+
+storiesOf('Text', module)
+  .addDecorator(withKnobs)
+  .add('Text', () => Text());

story/text/text.template.js

@@ -0,0 +1,22 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const textOptions = select('Radio Classes', {
+    default: '',
+    'is-primary': 'is-primary',
+    ...sharedOptions,
+    'is-disabled': 'is-disabled',
+  }, '');
+
+  const textClasses = classNames(
+    'nes-text',
+    textOptions,
+  );
+
+  return `
+    <span class="nes-text ${textClasses}">NES.css</span>
+  `;
+};

story/textarea.stories.js

@@ -1,18 +0,0 @@
-import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
-import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
-} from '@storybook/addon-knobs';
-
-const stories = storiesOf('Textareas', module);
-stories.addDecorator(withKnobs);
-
-stories.add('textarea', () => {
-  const selectedClass = radios('class', {
-    default: '',
-    'is-success': 'is-success',
-    'is-warning': 'is-warning',
-    'is-error': 'is-error',
-  }, '');
-
-  return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
-});

story/textarea/textarea.stories.js

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Textarea from './textarea.template';
+
+storiesOf('Textareas', module)
+  .addDecorator(withKnobs)
+  .add('Textarea', () => Textarea());

story/textarea/textarea.template.js

@@ -0,0 +1,20 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import sharedOptions from '../_helpers/shared';
+
+export default () => {
+  const textareaOption = select('Textarea Classes', {
+    default: '',
+    ...sharedOptions,
+  }, '');
+
+  const textareaClasses = classNames(
+    'nes-textarea',
+    textareaOption,
+  );
+
+  return `
+    <textarea id="textarea_field" class="${textareaClasses}" placeholder="NES.css"></textarea>
+  `;
+};