refactor(storybook): storybook enhancement and cleanup

refactored the storybook codebase for all components

re nostalgic-css#381

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/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/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());