feat(Storybook): extend storybook for developer focused demo - #315

.storybook/main.js

@@ -1,10 +1,24 @@
-module.exports = {
-    stories: ["../src/**/*.stories.[tj]s"],
-    addons: [
-      // '@storybook/addon-actions',
-      '@storybook/addon-knobs/register',
-      '@storybook/addon-notes/register',
-      '@storybook/addon-a11y/register',
-      // '@storybook/addon-storyshots'
-    ]
-  };
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ["style-loader", "css-loader", "sass-loader"],
+      include: path.resolve(__dirname, "../")
+    });
+    config.plugins.push(new webpack.IgnorePlugin(/jsdom$/));
+    config = { ...config, node: { fs: "empty", net: "empty", tls: "empty" } };
+    // Return the altered config
+    return config;
+  },
+  stories: ["../src/**/*.stories.[tj]s"],
+  addons: [
+    // '@storybook/addon-actions',
+    "@storybook/addon-knobs/register",
+    "@storybook/addon-notes/register",
+    "@storybook/addon-a11y/register"
+    // '@storybook/addon-storyshots'
+  ]
+};

demo/src/index.js

@@ -202,4 +202,4 @@ function Demo() {
   );
 }
 
-render(<Demo/>, document.querySelector('#root'));
+render(<Demo/>, document.querySelector('#root'));

netlify.toml

@@ -0,0 +1,43 @@
+# Settings in the [build] context are global and are applied to all contexts
+# unless otherwise overridden by more specific contexts.
+[build]
+  # Directory to change to before starting a build.
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = "/"
+
+  # Directory (relative to root of your repo) that contains the deploy-ready
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "storybook-static/"
+
+  # Default build command.
+  command = "echo 'default context'"
+
+# Production context: all deploys from the Production branch set in your site's
+# deploy contexts will inherit these settings.
+[context.production]
+  publish = "storybook-static/"
+  command = "npm run storybook:build"
+
+# Deploy Preview context: all deploys generated from a pull/merge request will
+# inherit these settings.
+[context.deploy-preview]
+  publish = "storybook-static/"
+  command = "npm run storybook:build"
+
+# Branch Deploy context: all deploys that are not from a pull/merge request or
+# from the Production branch will inherit these settings.
+[context.branch-deploy]
+  command = "echo branch"
+[context.branch-deploy.environment]
+  NODE_ENV = "development"
+
+# Redirects and headers are GLOBAL for all builds – they do not get scoped to
+# contexts no matter where you define them in the file.
+# For context-specific rules, use _headers or _redirects files, which are
+# PER-DEPLOY.
+
+# A basic redirect rule
+[[redirects]]
+  from = "/*"
+  to = "/"