Merge pull request #2 from jaebradley/storybook-setup

build(storybook): add storybook

Author: jaebradley

.babelrc

@@ -1,14 +1,14 @@
 {
   "presets": [
     [
-      "@babel/preset-env",
+      "babel-preset-env",
       {
         "modules": false
       }
     ],
-    "@babel/preset-react"
+    "babel-preset-react"
   ],
   "ignore": [
-    "node_modules"
+    "node_modules/**"
   ]
 }

.eslintignore

@@ -1,3 +1,4 @@
 coverage/*
 build
 node_modules
+*.stories.jsx

.npmignore

@@ -8,4 +8,9 @@ test/
 *.test.js
 coverage/
 *.stories.js
-*.stores.jsx
+*.stories.jsx
+rollup.config.js
+.babelrc
+.eslintignore
+.eslintric
+.gitignore

.storybook/addons.js

@@ -0,0 +1,4 @@
+
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-a11y/register';

.storybook/config.js

@@ -0,0 +1,28 @@
+import { configure, addDecorator } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import { setDefaults } from '@storybook/addon-info';
+import centered from '@storybook/addon-centered';
+import { checkA11y } from '@storybook/addon-a11y';
+
+addDecorator(centered);
+addDecorator(checkA11y);
+
+setDefaults({
+  inline: false,
+  header: true,
+  source: true,
+});
+
+setTimeout(() => setOptions({
+  name: 'EXAMPLE REACT PACKAGE',
+  url: 'https://github.com/jaebradley/example-react-component-npm-package',
+  showAddonPanel: true,
+  addonPanelInRight: true,
+}), 1000);
+
+function loadStories() {
+  require('../src/AnExample/AnExample.stories.jsx');
+  require('../src/AnotherExample/AnotherExample.stories.jsx');
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
+
+module.exports = {
+  plugins: [
+    new WebpackBuildNotifierPlugin({
+      title: 'React Example Storybook Build',
+      warningSound: true,
+      failureSound: true,
+    }),
+  ],
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules)/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['env', 'react'],
+            },
+          },
+          { loader: 'source-map-loader' },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' }
+        ],
+      }
+    ],
+  }
+};