feature(storybook): storybook added (#50)

40818419 · Sep 8, 2018 · 5fdb6e8 · 5fdb6e8
1 parent 0add227
commit 5fdb6e8
Show file tree

Hide file tree

Showing 34 changed files with 15,455 additions and 118,294 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,6 @@ styles/*.map
 coverage
 .nyc_output
 .tmp
-componentsIndex.js
 .idea
-.DS_Store
+.DS_Store
+dist
diff --git a/.npmignore b/.npmignore
@@ -1,2 +1,2 @@
 node_modules
-example/dist
+docs
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -0,0 +1,2 @@
+require('@storybook/addon-knobs/register');
+require('@storybook/addon-actions/register');
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -0,0 +1,15 @@
+import { configure } from '@storybook/react';
+import { setDefaults } from '@storybook/addon-info';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);
+
+// addon-info
+setDefaults({
+              header: false, // Toggles display of header with component name and description
+            });
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,19 @@
+<style>
+    .react-code-input input[type="number"]::-webkit-outer-spin-button,
+    .react-code-input input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0; }
+    .react-code-input input[type="number"] {
+        -moz-appearance: textfield; }
+</style>
+<!-- Hotjar Tracking Code for https://40818419.github.io/react-code-input/ -->
+<script>
+  (function(h,o,t,j,a,r){
+    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+    h._hjSettings={hjid:381601,hjsv:5};
+    a=o.getElementsByTagName('head')[0];
+    r=o.createElement('script');r.async=1;
+    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+    a.appendChild(r);
+  })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
+</script>
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -0,0 +1,53 @@
+// 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 = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    rules: [
+      {
+        test:    /\.js$/,
+        use:     ['babel-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.json$/,
+        use:  'json-loader',
+      },
+      {
+        test: /\.css$/,
+        use:  ['css', 'sass'],
+      },
+    ],
+  },
+  externals: {
+    react: 'react',
+  },
+};
+*/
+
+const path = require("path");
+
+// Export a function. Accept the base config as the only param.
+module.exports = (storybookBaseConfig) => {
+  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  // Make whatever fine-grained changes you need
+  storybookBaseConfig.module.rules.push({
+                                          test: /\.scss$/,
+                                          loaders: ["style-loader", "css-loader", "sass-loader"],
+                                          include: path.resolve(__dirname, "../")
+                                        });
+
+  // Return the altered config
+  return storybookBaseConfig;
+};
diff --git a/Gulpfile.js b/Gulpfile.js
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <title>Storybook</title>
+    <link rel="shortcut icon" href="favicon.ico?v=1" />
+
+
+
+
+      <base target="_parent">
+
+<style>
+  :not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+      display: none;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .sb-heading {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    background-color: rgb(187, 49, 49);
+    color: #FFF;
+  }
+
+  .sb-errordisplay_code {
+    font-size: 14px;
+    width: 100vw;
+    overflow: auto;
+  }
+</style>
+
+<script>
+  if (window.parent !== window) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+  }
+</script>
+<style>
+    .react-code-input input[type="number"]::-webkit-outer-spin-button,
+    .react-code-input input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0; }
+    .react-code-input input[type="number"] {
+        -moz-appearance: textfield; }
+</style>
+<!-- Hotjar Tracking Code for https://40818419.github.io/react-code-input/ -->
+<script>
+  (function(h,o,t,j,a,r){
+    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+    h._hjSettings={hjid:381601,hjsv:5};
+    a=o.getElementsByTagName('head')[0];
+    r=o.createElement('script');r.async=1;
+    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+    a.appendChild(r);
+  })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
+</script>
+
+
+</head>
+<body>
+
+
+
+
+      <div class="sb-nopreview sb-wrapper">
+  <div class="sb-nopreview_main">
+    <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
+    <p>Sorry, but you either have no stories or none are selected somehow.</p>
+    <ul>
+      <li>Please check the storybook config.</li>
+      <li>Try reloading the page.</li>
+    </ul>
+  </div>
+</div>
+
+<div class="sb-errordisplay sb-wrapper">
+  <div id="error-message" class="sb-heading"></div>
+  <pre class="sb-errordisplay_code">
+    <code id="error-stack"></code>
+  </pre>
+</div>
+
+
+
+    <div id="root"></div>
+
+
+
+
+
+
+
+        <script src="static/runtime~iframe.7161ffe0bb3d969a0dda.bundle.js" defer></script>
+
+
+
+        <script src="static/vendors~iframe.8ac8520cdf6c79fe9904.bundle.js" defer></script>
+
+
+
+        <script src="static/iframe.cda573a83cb7f0b2fed4.bundle.js" defer></script>
+
+
+
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <title>Storybook</title>
+    <link rel="shortcut icon" href="favicon.ico?v=1" />
+
+
+
+
+      <style>
+  html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+</style>
+
+<script>
+  if (window.parent !== window) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+  }
+</script>
+
+
+
+</head>
+<body>
+
+
+
+
+
+    <div id="root"></div>
+
+
+
+
+
+
+
+        <script src="static/runtime~manager.4df74dbc3c7ba7bb0154.bundle.js" defer></script>
+
+
+
+        <script src="static/manager.d872ebc215dccbe9ca25.bundle.js" defer></script>
+
+
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		require('@storybook/addon-knobs/register');
		require('@storybook/addon-actions/register');