Feature/storybook poc

.gitignore

@@ -1,5 +1,5 @@
-lib/**/*.js
-lib/**/*.d.ts
+lib/
 dist/
 node_modules/
-static/
+static/
+storybook-static/

.npmignore

@@ -1,5 +1,7 @@
 dist/
 docs/
+src/
+storybook-static/
 method-design/
 .sass-lint.yml
 karma.conf.js

.storybook/addons.js

@@ -0,0 +1,5 @@
+import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/register';
+import '@dump247/storybook-state/register';
+

.storybook/config.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { configure, addDecorator, setAddon } from '@storybook/react';
+import infoAddon from '@storybook/addon-info'
+import { withKnobs, boolean, select } from '@storybook/addon-knobs/react';
+import { Shell } from '../src/components/Shell';
+import { setOptions } from '@storybook/addon-options';
+
+// automatically import all files ending in *.stories.(ts|tsx)
+const req = require.context('../src/components', true, /.stories.tsx$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+setOptions({
+  name: 'Fluent Controls',
+  url: 'https://github.com/Azure/iot-ux-fluent-controls',
+
+});
+
+setAddon(infoAddon);
+// addDecorator((story, context) => withInfo({ inline: true })(story)(context));
+addDecorator((story) => {
+  const content = story();
+  return (
+    <Shell isRtl={boolean('RTL', false)} theme={select('Theme', ['light', 'dark'], 'light')}>
+        {content}
+    </Shell>
+  );
+});
+addDecorator(withKnobs);
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,67 @@
+const path = require('path');
+const webpack = require('webpack');
+
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+module.exports = (baseConfig, env, defaultConfig) => {
+  defaultConfig.resolve.extensions.push('.ts', '.tsx');
+  defaultConfig.plugins.push(
+    new webpack.NamedModulesPlugin()
+  );
+  // the wrong file get's resolved if you have output from tsc
+  // webpack should ignore those files when building storybook
+  defaultConfig.module.rules.forEach(rule => {
+    if (rule.test.toString() === /\.jsx?$/.toString()) {
+      rule.exclude.push(path.resolve(__dirname, '../lib'))
+    }
+  });
+  defaultConfig.module.rules.push({
+    test: /\.tsx?$/,
+    use: [
+      'ts-loader',
+      'react-docgen-typescript-loader'
+    ],
+    // loaders: 'ts-loader',
+    exclude: [path.resolve(__dirname, '../node_modules')]
+  },
+  {
+    test: /\.css$/,
+    loaders: [
+      'style-loader',
+      'css-loader?modules&importLoaders=1&localIdentName=[local]',
+    ],
+    exclude: [path.resolve(__dirname, '../lib')]
+  },
+  {
+    test: /\.scss$/,
+    loaders: [
+      {
+        loader: 'style-loader',
+      },
+      {
+        loader:
+          'css-loader?modules&importLoaders=1&localIdentName=[path]_[name]_[local]',
+      },
+      {
+        loader: 'sass-loader',
+        options: {
+          includePaths: [
+            path.resolve(__dirname, '../lib'),
+            path.resolve(
+              __dirname,
+              '../node_modules/@microsoft/azure-iot-ux-fluent-css/src/'
+            ),
+          ],
+        },
+      }
+    ]
+  });
+
+  return defaultConfig;
+};