docs: setup storybook, add stories for range

.storybook/addons.js

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

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@storybook/polymer';
+
+function loadStories() {
+  const req = require.context('../packages/storybook', true, /\.stories\.js$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const { rules } = require('../scripts/webpack/webpack.common.js');
+
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: [/\.stories\.js$/, /index\.js$/],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    include: [path.resolve(__dirname, '../packages/storybook')],
+    enforce: 'pre'
+  });
+
+  // tweak babel-loader to transpile dependencies
+  config.module.rules.push(...rules);
+
+  return config;
+};

package.json

@@ -8,6 +8,7 @@
     "build": "yarn build-styling",
     "build-styling": "./scripts/build-styling.sh",
     "lint": "eslint *.js packages",
+    "storybook": "start-storybook -p 6006",
     "test": "karma start",
     "watch": "node scripts/watcher.js"
   },
@@ -19,6 +20,10 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/runtime": "^7.3.1",
+    "@storybook/addon-knobs": "^5.0.0-beta.1",
+    "@storybook/addons": "^5.0.0-beta.1",
+    "@storybook/core": "^5.0.0-beta.1",
+    "@storybook/polymer": "^5.0.0-beta.1",
     "@webcomponents/webcomponentsjs": "^2.2.4",
     "babel-eslint": "^10.0.0",
     "babel-loader": "^8.0.5",
@@ -46,7 +51,10 @@
     "mocha": "^5.2.0",
     "node-sass-import": "^2.0.1",
     "node-watch": "^0.6.0",
+    "polymer-webpack-loader": "^2.0.3",
     "prettier": "^1.16.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "sass": "^1.16.1",
     "sinon": "^7.2.3",
     "sinon-chai": "^3.3.0",

packages/storybook/abm-range.stories.js

@@ -0,0 +1,13 @@
+import '@aybolit/material/range/abm-range.js';
+import { storiesOf } from '@storybook/polymer';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { html } from 'lit-html';
+
+storiesOf('abm-range', module)
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    const disabled = boolean('Disabled', false);
+    return html`
+      <abm-range .disabled="${disabled}"></abm-range>
+    `;
+  });

packages/storybook/abs-range.stories.js

@@ -0,0 +1,13 @@
+import '@aybolit/bootstrap/range/abs-range.js';
+import { storiesOf } from '@storybook/polymer';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { html } from 'lit-html';
+
+storiesOf('abs-range', module)
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    const disabled = boolean('Disabled', false);
+    return html`
+      <abs-range .disabled="${disabled}"></abs-range>
+    `;
+  });

packages/storybook/abu-range.stories.js

@@ -0,0 +1,35 @@
+import '@aybolit/bulma/range/abu-range.js';
+import { storiesOf } from '@storybook/polymer';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
+import { html } from 'lit-html';
+
+const COLORS = {
+  primary: 'primary',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  none: ''
+};
+
+const SIZES = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  normal: ''
+};
+
+storiesOf('abu-range', module)
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    const circle = boolean('Circle', false);
+    const size = select('Type', SIZES, SIZES.normal);
+    const color = select('Color', COLORS, COLORS.none);
+    const disabled = boolean('Disabled', false);
+    return html`
+      <abu-range
+        theme="${size} ${color} ${circle ? 'circle' : ''}"
+        .disabled="${disabled}"
+      ></abu-range>
+    `;
+  });

packages/storybook/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@aybolit/storybook",
+  "private": true,
+  "version": "0.1.0",
+  "author": "Serhii Kulykov <[email protected]>",
+  "license": "MIT",
+  "main": "index.stories.js",
+  "dependencies": {
+    "@aybolit/bootstrap": "^0.0.0",
+    "@aybolit/bulma": "^0.0.0",
+    "@aybolit/material": "^0.0.0",
+    "@storybook/addon-knobs": "^5.0.0-beta.1",
+    "@storybook/addons": "^5.0.0-beta.1",
+    "@storybook/polymer": "^5.0.0-beta.1",
+    "lit-html": "^1.0.0-rc.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

scripts/webpack/webpack.common.js

@@ -0,0 +1,12 @@
+module.exports = {
+  rules: [
+    {
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: /node_modules\/(?!(@webcomponents\/shadycss|lit-element|lit-html|@aybolit)\/).*/,
+      options: {
+        cacheDirectory: true
+      }
+    }
+  ]
+};