refactor(storybook): storybook enhancement and cleanup

refactored the storybook codebase for all components

re #381

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>
+  `;
+};