Merge pull request #71 from evexoio/58-add-story-book

Add Storybook

.storybook/addons.js

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

.storybook/config.js

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/html';
+
+import '../css/nes.min.css'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../docs', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

README.md

@@ -78,6 +78,11 @@ npm run watch
 npm run build
 ```
 
+#### Run Storybook
+```
+npm run storybook
+```
+
 Linting, formatting and building runs automatically in the pre-commit hook.
 TODO: ビルドはCIでするように変更したい
 
@@ -87,6 +92,7 @@ TODO: ビルドはCIでするように変更したい
 ├── index.html: Demo page
 ├── style.css: Demo page style
 ├── css: Distribution files
+├── docs: Storybook stories
 └── scss: Source
     ├── base
     │   ├── reboot.scss: Don't change! (Bootstrap Reboot)

docs/balloons.stories.js

@@ -0,0 +1,16 @@
+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('Ballons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('balloon', () => {
+  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

@@ -0,0 +1,18 @@
+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('Buttons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('button', () => {
+  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

@@ -0,0 +1,24 @@
+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-center': 'is-center',
+    'is-right': 'is-right',
+  }, '');
+  const selectedClasses = [withTitle, isDark, isRounded, alignment];
+
+  return `<div class="container ${selectedClasses.join(' ')}">
+      <p class="title">Container</p>
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+  </div>`;
+});

docs/icons.stories.js

@@ -0,0 +1,30 @@
+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', {
+    'icon twitter': 'icon twitter',
+    'icon facebook': 'icon facebook',
+    'icon github': 'icon github',
+    'icon youtube': 'icon youtube',
+    'icon close': 'icon close',
+    'octocat animate': 'octocat animate',
+    'icon trophy': 'icon trophy',
+    'nes-logo': 'nes-logo',
+    'nes-jp-logo': 'nes-jp-logo',
+    'snes-logo': 'snes-logo',
+    'snes-jp-logo': 'snes-jp-logo',
+  }, 'icon twitter');
+  const selectedSize = radios('size', {
+    default: '',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+
+  return `<i class="${selectedClass} ${selectedSize}"></i>`;
+});

docs/inputs.stories.js

@@ -0,0 +1,31 @@
+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('Inputs', module);
+stories.addDecorator(withKnobs);
+
+stories.add('input.radio', () => `
+      <label>
+        <input type="radio" class="radio" name="answer" checked />
+        <span>Yes</span>
+      </label> <label>
+        <input type="radio" class="radio" name="answer" />
+        <span>No</span>
+      </label>`)
+  .add('input.checkbox', () => `
+      <label>
+        <input type="checkbox" class="checkbox" checked />
+        <span>Enable</span>
+      </label>`)
+  .add('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="input ${selectedClass}" placeholder="NES.css">`;
+  });

docs/table.stories.js

@@ -0,0 +1,36 @@
+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 selectedClasses = [isBordered, isCentered];
+
+  return `<table class="table ${selectedClasses.join(' ')}" 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

@@ -4,14 +4,16 @@
   "description": "NES.css is NES-style CSS Framework.",
   "scripts": {
     "watch": "npm run build:sass -- --watch",
-    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss",
+    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build-storybook",
     "stylelint": "stylelint scss/**/*.scss",
     "build:stylelint": "npm run stylelint -- --fix",
     "build:clean": "rimraf css",
     "build:sass": "node-sass --output-style expanded --source-map true scss/nes.scss css/nes.css",
     "build:autoprefix": "postcss --use autoprefixer --map false --output css/nes.css css/nes.css",
     "build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
-    "deploy": "npm run build"
+    "deploy": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "build:storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -30,8 +32,14 @@
   },
   "homepage": "https://github.com/BcRikko/NES.css#readme",
   "devDependencies": {
+    "@storybook/addon-knobs": "^4.0.11",
+    "@storybook/html": "^4.0.11",
     "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",
+    "eslint-plugin-import": "^2.14.0",
     "husky": "^1.0.0",
     "lint-staged": "^7.3.0",
     "node-sass": "^4.9.3",
@@ -58,6 +66,10 @@
       "npm run build",
       "git add ./css",
       "git add"
+    ],
+    "*.js": [
+      "eslint .",
+      "git add"
     ]
   },
   "prettier": {
@@ -79,5 +91,8 @@
       "at-rule-no-unknown": null,
       "scss/at-rule-no-unknown": true
     }
+  },
+  "eslintConfig": {
+    "extends": "airbnb-base"
   }
 }