Switch to storybook (#367)

* Update config and deps

* Add config stuff

* Move components into src and add stories

* Update readme

* Remove old stories stuff

* Update intro

* Add logo

* Try to fix tests

* Fix linting update some stuff

* Fix tests

* Fix tests

* Fix more linting problems

* Fix stories and add content

* Update more stories

* Fix readme example

* Add remaining storys

* Add final components

* Update scripts

* Add cdn logo

* Remove public dir since we aren't serving anything

* Remove old docs and add storybook build

* Upate paginator test

* Clean up storys

* Fix linting

* Update snapshots

* Remove app stuff

* Update storybook to latest version

* Update title tag

* Serve static files from static folder

* Update docs with new favicon and title

* Undo unknown functionality

* Fix imports for comps

* Fix linting

* Fix

* Fix

* Adjust babel import for aliases

* Fix for tests

* Update package version

* Fix linting

.babelrc

@@ -1,10 +1,40 @@
 {
-  "presets": ["react", "env", "stage-0"],
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties", { "loose": false }],
+    "@babel/plugin-proposal-export-default-from",
+  ],
   "env": {
     "dist": {
       "plugins": [
-        ["transform-rename-import", { "original": "./index.scss", "replacement": "./index.css" }],
-        ["transform-rename-import", { "original": "../index.scss", "replacement": "../index.css" }]
+        ["transform-rename-import", {
+          "replacements": [
+            {
+              "original": "utils/executionEnvironment",
+              "replacement": "../../utils/executionEnvironment",
+            },
+            {
+              "original": "utils/mobileDetection",
+              "replacement": "../../utils/mobileDetection",
+            },
+            {
+              "original": "utils/elementPosition",
+              "replacement": "../../utils/elementPosition",
+            },
+            {
+              "original": "utils/params",
+              "replacement": "../../utils/params",
+            },
+            {
+              "original": "./index.scss",
+              "replacement": "./index.css"
+            },
+            {
+              "original": "../index.scss",
+              "replacement": "../index.css"
+            }
+          ],
+        }],
       ]
     }
   }

.eslintrc.js

@@ -40,18 +40,24 @@ module.exports = {
     'react/sort-prop-types': 'error',
     'react/forbid-prop-types': 'off',
     'react/no-array-index-key': 0,
+    "react/jsx-filename-extension": 'off',
 
     // Plugins
     'babel/object-curly-spacing': 'error',
     'import/order': ['error', {'newlines-between': 'always', groups: ['builtin', 'external', 'internal', 'sibling', 'parent', 'index']}],
     'import/no-extraneous-dependencies': [
       'error', {
         'devDependencies': [
+          '.storybook/**',
+          'src/components/**',
+          'stories/**',
           'jestSetup.js',
           '**/*.test.jsx'
         ]
       }
     ],
+    "import/extensions": 'off',
+    "import/no-unresolved": 'off',
     'sorting/sort-object-props': 'error'
   }
 };

.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
+
+import '../main.scss';
+
+function loadStories() {
+  require('./defaultStory');
+
+  const req = require.context('../src/components', true, /story$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/defaultOptions.js

@@ -0,0 +1,6 @@
+export const defaultOptions = {
+  enableShortcuts: false,
+  name: 'nukleus components',
+  showSearchBox: false,
+  url: 'https://github.com/kununu/nukleus'
+}

.storybook/defaultOptions/index.js

@@ -0,0 +1,6 @@
+export const defaultOptions = {
+  enableShortcuts: false,
+  name: 'nukleus components',
+  showSearchBox: false,
+  url: 'https://github.com/kununu/nukleus'
+}

.storybook/defaultStory.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {withOptions} from '@storybook/addon-options';
+import {defaultOptions} from './defaultOptions';
+import ReactMarkdown from 'react-markdown';
+import Readme from '../README.md';
+
+import styles from './defaultStoryStyles.scss';
+
+storiesOf('Introduction', module)
+  .addDecorator(
+    withOptions({
+      ...defaultOptions,
+      showAddonPanel: false,
+    })
+  )
+  .add('welcome', () => (
+    <div>
+      <div className={styles.logoContainer}>
+        <img src="https://assets.kununu.com/nukleus/logo.svg" className={styles.logo} />
+      </div>
+      <div className={styles.contentWrapper}>
+        <ReactMarkdown escapeHtml={false} source={Readme} />
+      </div>
+    </div>
+  ));

.storybook/defaultStoryStyles.scss

@@ -0,0 +1,14 @@
+.logoContainer {
+  width: 100%;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.logo {
+  width: 150px;
+  display: inline-block;
+}
+
+.contentWrapper {
+  margin-bottom: 200px;
+}

.storybook/manager-head.html

@@ -0,0 +1,86 @@
+<style>
+  #root:after {
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzQ0LjQsMzIyLjNjLTEuMiw4LjctMi44LDE4LjEtNC44LDI4Yy0yLDEwLTQuNSwyMC41LTcuNiwzMS40Yy0zLjEsMTAuOS02LjksMjIuMi0xMS42LDMzLjcNCgljLTIuNCw1LjctNSwxMS41LTcuOSwxNy4yYy0yLjksNS43LTYuMSwxMS40LTkuOCwxNi45Yy0zLjYsNS41LTcuNywxMC43LTEyLjMsMTUuNWMtNC42LDQuNy05LjgsOC45LTE1LjUsMTEuOA0KCWMtMi44LDEuNS01LjgsMi41LTguOCwzLjFjLTAuOCwwLjEtMS41LDAuMi0yLjMsMC4zYy0wLjgsMC4xLTEuNSwwLjItMi4zLDAuMmMtMC44LDAuMS0xLjUsMC0yLjMsMGMwLDAsMCwwLDAsMGMwLDAsMCwwLTAuMSwwaDANCgloLTAuM2wtMC43LTAuMWMtMC40LDAtMSwwLTEuMy0wLjFsLTEtMC4ybC0wLjUtMC4xbC0wLjYtMC4xYy0wLjctMC4yLTEuNS0wLjQtMi4yLTAuNmMtMS40LTAuNC0yLjktMS00LjMtMS42DQoJYy0yLjktMS4zLTUuNi0zLTguMi01LjFjLTUuMi00LjEtOS44LTkuNC0xMy44LTE1LjNjLTQuMS01LjktNy42LTEyLjQtMTAuOC0xOS4xYy0zLjItNi44LTYtMTMuOS04LjUtMjEuMXMtNC43LTE0LjYtNi43LTIyLjINCgljLTItNy41LTMuOC0xNS4yLTUuMy0yM2MtMC43LTMuOC0xLjQtNy44LTIuMS0xMS43Yy0wLjctNC0xLjMtNy45LTEuOS0xMS45Yy00LjYtMzEuOC02LjYtNjQuNi02LjItOTcuMw0KCWMwLjItMzIuNywyLjktNjUuNCw4LjEtOTcuMWMxLjMtNy45LDIuOC0xNS43LDQuNS0yMy41YzEuNy03LjcsMy42LTE1LjQsNS43LTIyLjljMi4xLTcuNSw0LjQtMTQuOSw3LjEtMjIuMXM1LjYtMTQuMiw4LjktMjAuOQ0KCWMzLjMtNi43LDYuOS0xMy4xLDExLjEtMTguOXM4LjgtMTEuMSwxNC4xLTE1LjFjMi43LTIsNS40LTMuNyw4LjMtNWMyLjktMS4yLDUuOS0yLjEsOC45LTIuNGMwLjMtMC4xLDAuNy0wLjEsMS4xLTAuMWwxLTAuMWgxLjQNCgloMC43aDAuNWwxLDAuMWMwLjMsMCwwLjcsMC4xLDEuMSwwLjFjMC44LDAuMSwxLjUsMC4yLDIuMywwLjRjMywwLjcsNiwxLjgsOC44LDMuM2M1LjcsMi45LDEwLjgsNy4zLDE1LjMsMTIuMQ0KCWM0LjUsNC45LDguNSwxMC4zLDEyLDE1LjhjMy42LDUuNiw2LjcsMTEuMyw5LjUsMTcuMXM1LjMsMTEuNiw3LjUsMTcuNGM0LjUsMTEuNiw4LDIzLDEwLjksMzRjMi45LDExLDUuMiwyMS41LDcsMzEuNWMwLDAsMCwwLDAsMA0KCWMwLjYtMC4xLDEuMy0wLjEsMS45LTAuMmMwLTAuMSwwLTAuMSwwLTAuMmMtMy0yMC4yLTcuMy00Mi45LTE1LTY2LjljLTMuOS0xMi04LjYtMjQuNC0xNS4zLTM2LjVjLTMuMy02LjEtNy4xLTEyLjEtMTEuNy0xNy44DQoJYy00LjYtNS43LTEwLTExLjEtMTYuOC0xNS4zYy0zLjMtMi4xLTcuMS0zLjgtMTEuMS01Yy0xLTAuMy0yLjEtMC42LTMuMS0wLjhjLTAuNi0wLjEtMS0wLjItMS42LTAuM2wtMS43LTAuMmwtMC45LTAuMWwtMC43LTAuMQ0KCWwtMS40LTAuMWMwLDAtMC41LDAtMC42LDBoLTAuNGgtMC44Yy0wLjUsMC0xLjEsMC0xLjYsMGMtNC4zLDAuMi04LjYsMS4xLTEyLjcsMi41Yy00LjEsMS40LTcuOSwzLjQtMTEuNCw1LjcNCgljLTcuMSw0LjYtMTMsMTAuNS0xOC4zLDE2LjhzLTkuOCwxMy4xLTEzLjksMjAuMmMtOC4yLDE0LjItMTQuNiwyOS40LTE5LjksNDUuMWMtMi43LDcuOS01LDE1LjgtNy4yLDIzLjljLTIuMSw4LTQuMSwxNi4yLTUuNywyNC40DQoJYy0xLjcsOC4zLTMuMSwxNi42LTQuNCwyNC45Yy0xLjIsOC40LTIuMiwxNi44LTMuMSwyNS4yYy0wLjUsNC4zLTAuOSw4LjUtMS4yLDEyLjdjLTAuMyw0LjItMC42LDguNS0wLjgsMTIuNw0KCWMtMC4zLDQuMi0wLjUsOC41LTAuNiwxMi43bC0wLjIsNi40bC0wLjEsNi4zYy0wLjIsMzMuOSwyLjIsNjgsOC4zLDEwMWMwLjcsNC4xLDEuNiw4LjIsMi40LDEyLjNjMC45LDQuMSwxLjgsOC4yLDIuOCwxMi4yDQoJYzIsOC4xLDQuMiwxNi4xLDYuNywyNGM1LDE1LjgsMTEuMSwzMS4xLDE5LDQ1LjVjMiwzLjUsNC4xLDcuMSw2LjMsMTAuNWMyLjIsMy40LDQuNiw2LjgsNy4yLDEwYzUuMiw2LjQsMTEsMTIuNCwxOCwxNy4yDQoJYzMuNSwyLjQsNy4zLDQuNSwxMS4zLDZjMiwwLjcsNC4xLDEuNCw2LjIsMS44YzEuMSwwLjMsMi4xLDAuNSwzLjIsMC42bDAuOCwwLjFsMC45LDAuMWwxLjcsMC4xYzAuNSwwLDAuOSwwLDEuNCwwaDAuN2gwLjMNCgljMC4xLDAsMC42LDAsMC42LDBjMS4xLDAsMi4xLDAsMy4yLTAuMmMxLjEtMC4xLDIuMi0wLjMsMy4yLTAuNWMxLjEtMC4yLDIuMS0wLjQsMy4xLTAuN2M0LTEuMSw3LjgtMi44LDExLjItNC44DQoJYzYuOS00LjEsMTIuNC05LjQsMTcuMS0xNWM0LjYtNS42LDguNi0xMS41LDEyLTE3LjVjNi45LTEyLDExLjktMjQuMywxNi4xLTM2LjJjOC4yLTIzLjksMTIuOS00Ni41LDE2LjMtNjYuNg0KCWMzLjMtMjAuMSw1LjEtMzcuNyw2LjItNTIuM2MwLjMtNC4xLDAuNS04LDAuNy0xMS42Yy0wLjIsMy42LTAuNSw3LjQtMC45LDExLjZDMzQ2LjUsMzA1LjYsMzQ1LjYsMzEzLjYsMzQ0LjQsMzIyLjN6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzQ5LjMsMjQ5LjRjMCwyLjEsMCwzLjEsMCwzLjFzMC0xLDAuNC0zYzAtMS4xLDAtMi41LDAtNC4xYy0wLjEsMC0wLjMsMC0wLjQsMA0KCUMzNDkuMywyNDcsMzQ5LjMsMjQ4LjMsMzQ5LjMsMjQ5LjR6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzQ5LjEsMjY0LjVjLTAuMSw1LjYtMC40LDEzLjEtMSwyMi4yYzAuMi0yLjgsMC4zLTUuNCwwLjUtNy44QzM0OC45LDI3My4yLDM0OS4xLDI2OC40LDM0OS4xLDI2NC41DQoJYzAuMi0zLjksMC4zLTYuOSwwLjMtOC45Yy0wLjEtMi0wLjEtMy4xLTAuMS0zLjFzMCwxLDAsMy4xQzM0OS4zLDI1Ny42LDM0OS4yLDI2MC42LDM0OS4xLDI2NC41eiIvPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ1My42LDMyOC41Yy0xLjctNi44LTQtMTMuMS02LjgtMTkuMWMtNS41LTEyLTEyLjUtMjIuNS0xOS43LTMycy0xNC45LTE4LTIyLjUtMjUuOA0KCWMtNy41LTcuOC0xNS4xLTE0LjctMjIuNC0yMS4xYy0xLjItMS0yLjMtMi0zLjUtM2MtMC41LDAuNy0wLjksMS4zLTEuNCwyYzEsMC45LDIsMS45LDMuMSwyLjhjMTQsMTMuMSwyOC45LDI4LjksNDIuMSw0OC4yDQoJYzYuNiw5LjYsMTIuNywyMC4xLDE3LjQsMzEuNmMyLjMsNS43LDQuMiwxMS43LDUuNCwxNy44YzEuMiw2LjEsMS43LDEyLjQsMC45LDE4LjVjLTAuNCwzLjEtMS4xLDYuMS0yLjIsOC45DQoJYy0wLjUsMS41LTEuMSwyLjgtMS44LDQuMmMtMC4zLDAuNy0wLjcsMS4zLTEuMSwyYy0wLjEsMC4yLDAsMC0wLjEsMC4xbC0wLjIsMC4zbC0wLjQsMC41bC0wLjcsMS4xbC0xLjMsMS43DQoJYy0wLjUsMC42LTEsMS4yLTEuNSwxLjhjLTEsMS4xLTIuMSwyLjItMy4zLDMuMmMtMi4zLDIuMS01LDMuOS03LjgsNS40Yy01LjcsMy4xLTEyLjEsNS4yLTE4LjgsNi41Yy02LjcsMS40LTEzLjcsMi0yMC44LDIuMQ0KCWMtMTQuMiwwLjItMjguOS0xLjctNDMuNC00LjdjLTE0LjYtMy4xLTI5LjEtNy4zLTQzLjUtMTIuNGMtMjguNy0xMC4yLTU2LjgtMjMuOS04My40LTQwYy0yNi41LTE2LjEtNTEuNi0zNC43LTczLjctNTUuNQ0KCWMtMTEtMTAuNC0yMS4zLTIxLjMtMzAuNi0zMi43Yy05LjItMTEuNC0xNy41LTIzLjItMjMuOC0zNS41Yy0zLjItNi4xLTUuOC0xMi4zLTcuNy0xOC41Yy0xLjgtNi4yLTMtMTIuNC0zLTE4LjINCgljLTAuMS01LjgsMS4xLTExLjIsMy40LTE1LjlsMC41LTAuOWwwLjItMC40bDAuMS0wLjFjMCwwLTAuMSwwLjEsMC0wLjFsMC43LTEuMWMwLjItMC40LDAuNS0wLjgsMC42LTFsMC41LTAuN2wwLjItMC4zbDAuMy0wLjQNCgljMC40LTAuNSwwLjctMSwxLjItMS41YzEuNy0yLDMuNy0zLjgsNS45LTUuNGM0LjMtMy4zLDkuNi01LjcsMTUuMS03LjZjNS42LTEuOSwxMS40LTMuMSwxNy4zLTMuOWMxMS44LTEuNiwyMy44LTEuNiwzNS4yLTAuNw0KCWMxMS41LDAuOSwyMi41LDIuNSwzMi45LDQuNmMxMC40LDIuMSwyMC4zLDQuNiwyOS40LDcuM2M5LjIsMi43LDE3LjYsNS42LDI1LjQsOC41YzcuOCwzLDE0LjgsNS45LDIxLjEsOC43DQoJYzYuMywyLjgsMTEuOCw1LjUsMTYuNiw3LjljNC43LDIuNCw4LjgsNC41LDEyLDYuM2MzLjMsMS44LDUuNywzLjIsNy40LDQuMWMxLjYsMC45LDIuNSwxLjQsMi41LDEuNHMwLjgsMC41LDIuNSwxLjMNCgljMC4yLDAuMSwwLjMsMC4yLDAuNSwwLjNjMC4zLTAuNSwwLjUtMS4xLDAuOC0xLjZjLTAuMS0wLjEtMC4yLTAuMS0wLjMtMC4yYy0xLjctMS0yLjUtMS41LTIuNS0xLjVzLTAuOC0wLjYtMi40LTEuMQ0KCWMtMS43LTEtNC4xLTIuNC03LjMtNC4zYy02LjQtMy43LTE1LjktOS4xLTI4LjItMTUuNGMtNi4yLTMuMi0xMy4xLTYuNi0yMC43LTEwLjFjLTcuNi0zLjYtMTUuOS03LjItMjQuOS0xMC44DQoJYy05LjEtMy41LTE4LjgtNy4xLTI5LjMtMTAuM2MtMTAuNS0zLjItMjEuOC02LjEtMzMuOC04LjJjLTYtMS0xMi4yLTEuOC0xOC42LTIuM2MtNi40LTAuNS0xMy0wLjYtMTkuOC0wLjINCgljLTMuNCwwLjItNi44LDAuNS0xMC4zLDEuMXMtNy4xLDEuMi0xMC42LDIuMmMtNy4xLDEuOS0xNC4zLDQuOC0yMSw5LjNjLTMuMywyLjMtNi41LDUtOS40LDguMWMtMC44LDAuNy0xLjQsMS42LTIuMSwyLjRsLTAuNSwwLjYNCglsLTAuNSwwLjdsLTEsMS40Yy0wLjQsMC41LTAuNiwwLjgtMC44LDEuMmwtMC43LDEuMWMwLjEtMC4yLTAuMywwLjQtMC4zLDAuNWwtMC4yLDAuNGwtMC40LDAuN2wtMC44LDEuNGMtNC4xLDcuNy02LDE2LjQtNi4xLDI0LjgNCgljLTAuMiw4LjQsMS4zLDE2LjYsMy42LDI0LjNzNS41LDE1LjEsOS4xLDIyLjFjNy40LDE0LDE2LjUsMjYuOCwyNi44LDM4LjhjMTAuMiwxMiwyMS42LDIzLjEsMzMuNSwzMy42DQoJYzIzLjksMjEsNTAuNCwzOS40LDc4LjEsNTUuNGMyNy44LDE2LDU3LDI5LjUsODcsMzkuNWMxNSw0LjksMzAuMiw5LDQ1LjUsMTEuOGMxNS4zLDIuOCwzMC43LDQuNCw0Ni4xLDMuOA0KCWM3LjYtMC4zLDE1LjMtMS4yLDIyLjgtMi45czE0LjgtNC4zLDIxLjYtOC4yYzMuNC0yLDYuNi00LjMsOS41LTYuOWMxLjUtMS4zLDIuOC0yLjcsNC4xLTQuMmMwLjYtMC43LDEuMi0xLjUsMS44LTIuMw0KCWMwLjYtMC44LDEuMi0xLjcsMS44LTIuNWwwLjctMS4xbDAuMy0wLjZsMC4yLTAuM2wwLjItMC40YzAuNC0wLjksMC45LTEuNywxLjMtMi42YzAuOS0xLjgsMS42LTMuNiwyLjItNS40YzEuMi0zLjcsMi03LjQsMi4zLTExLjENCglDNDU2LDM0Mi40LDQ1NS4yLDMzNS4yLDQ1My42LDMyOC41eiIvPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxLjIsMTUxLjNMODEuMiwxNTEuM0M4MS4yLDE1MS4zLDgxLjIsMTUxLjIsODEuMiwxNTEuM3oiLz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMDMuNiwzMzguMWMwLDAtMC45LDAuNS0yLjUsMS40Yy0xLjcsMC45LTQuMiwyLjMtNy41LDRjLTYuNiwzLjQtMTYuMiw4LjQtMjguOCwxNC4yYy02LjMsMi45LTEzLjMsNi0yMSw5LjENCgkJYy03LjcsMy4yLTE2LjEsNi40LTI1LjMsOS41Yy05LjEsMy4xLTE4LjksNi4yLTI5LjUsOC45Yy0xMC41LDIuNy0yMS43LDUuMS0zMy42LDYuNnMtMjQuNSwyLjMtMzcuNiwxLjENCgkJYy02LjUtMC42LTEzLjItMS43LTE5LjktMy43Yy02LjYtMi0xMy4zLTQuOS0xOS4zLTkuMmMtMy0yLjEtNS45LTQuNy04LjQtNy41Yy0xLjMtMS40LTIuNS0zLTMuNi00LjZjLTAuNi0wLjgtMS0xLjYtMS42LTIuNQ0KCQljMCwwLTAuMi0wLjQtMC4zLTAuNGwtMC4yLTAuM2wtMC4zLTAuNmwtMC42LTEuMWMtMC40LTAuOS0wLjktMS45LTEuMy0yLjhjLTAuNC0wLjktMC43LTEuOC0xLjEtMi43Yy0wLjYtMS45LTEuMi0zLjctMS42LTUuNw0KCQljLTAuOC0zLjgtMS4yLTcuOC0xLjItMTEuNmMwLTcuOCwxLjUtMTUuNSwzLjctMjIuOGMyLjMtNy40LDUuNC0xNC40LDguOS0yMS4yYzcuMi0xMy42LDE2LjMtMjYuMiwyNi4zLTM4LjENCgkJYzEwLjEtMTEuOSwyMS4yLTIzLDMzLTMzLjVjMjMuNi0yMSw1MC0zOS41LDc3LjctNTUuNmMyNy43LTE2LDU2LjktMjkuNyw4Ny00MGMxNS4xLTUuMSwzMC40LTkuMyw0NS45LTEyLjINCgkJYzE1LjUtMi45LDMxLjItNC40LDQ3LTMuOGM3LjksMC40LDE1LjgsMS4zLDIzLjcsMy4yYzcuOCwxLjgsMTUuNiw0LjcsMjIuOCw5YzcuMiw0LjMsMTMuOCwxMC4zLDE4LjUsMTcuN2wwLjgsMS40bDAuNCwwLjcNCgkJbDAuMiwwLjNjMCwwLjEsMC40LDAuNywwLjMsMC42bDAuNiwxLjJjMC4yLDAuNCwwLjQsMC43LDAuNiwxLjNsMC43LDEuNmwwLjMsMC44bDAuMywwLjhjMC40LDEsMC44LDIsMSwzYzEuMyw0LDIsOC4yLDIuMywxMi4yDQoJCWMwLjUsOC4xLTAuNSwxNS44LTIuNCwyMi45Yy0wLjksMy41LTIuMSw2LjktMy40LDEwLjJzLTIuNyw2LjQtNC4yLDkuNWMtMyw2LjEtNi41LDExLjgtMTAuMSwxNy4xcy03LjQsMTAuMy0xMS4zLDE1DQoJCWMtNy44LDkuNC0xNS45LDE3LjctMjMuOSwyNS4ycy0xNiwxNC4xLTIzLjYsMjAuMmMtNy42LDYtMTQuOSwxMS40LTIxLjgsMTYuMmMtNi44LDQuOC0xMy4yLDkuMS0xOS4xLDEyLjgNCgkJYy0xMS43LDcuNS0yMSwxMy0yNy41LDE2LjdjLTMuMiwxLjgtNS43LDMuMi03LjQsNC4yQzMwNC41LDMzNy43LDMwMy42LDMzOC4xLDMwMy42LDMzOC4xTDMwMy42LDMzOC4xeiBNMzAyLjcsMzM2LjQNCgkJYzAsMCwwLjgtMC41LDIuNS0xLjVjMS42LTEsNC4xLTIuNCw3LjItNC4zczctNC4zLDExLjUtNy4zYzQuNS0yLjksOS42LTYuNCwxNS4xLTEwLjVjNS42LTQsMTEuNi04LjcsMTgtMTMuOQ0KCQljNi40LTUuMywxMy4xLTExLjIsMjAtMTcuN2M2LjktNi42LDE0LTEzLjgsMjEtMjEuOHMxMy45LTE2LjcsMjAuNC0yNi4yczEyLjQtMTkuOCwxNy0zMC44YzIuMy01LjUsNC4xLTExLjIsNS4zLTE2LjkNCgkJYzEuMi01LjcsMS42LTExLjUsMS0xNi45Yy0wLjMtMi43LTAuOS01LjMtMS44LTcuOGMtMC4yLTAuNi0wLjUtMS4yLTAuNy0xLjhsLTAuMi0wLjVsLTAuMi0wLjRsLTAuNC0wLjdjLTAuMS0wLjItMC4zLTAuNi0wLjUtMQ0KCQlsLTAuNi0xLjFjLTAuMi0wLjMsMC4xLDAuMSwwLDBsLTAuMS0wLjJsLTAuMy0wLjRsLTAuNS0wLjhjLTIuOS00LjQtNy04LTEyLjEtMTAuOXMtMTEtNS0xNy4zLTYuNXMtMTMtMi4zLTE5LjktMi42DQoJCWMtMTMuOC0wLjctMjguMiwwLjYtNDIuNywyLjhjLTE0LjUsMi40LTI5LjEsNS44LTQzLjYsMTAuMmMtMjksOC44LTU3LjcsMjEuMi04NC45LDM2LjFjLTI3LjIsMTUtNTMuMSwzMi40LTc2LjQsNTIuMg0KCQljLTExLjYsOS45LTIyLjUsMjAuNC0zMi40LDMxLjVjLTkuOSwxMS4xLTE4LjgsMjIuOC0yNS44LDM1LjJjLTMuNSw2LjItNi41LDEyLjYtOC42LDE5LjFjLTIuMiw2LjUtMy42LDEzLjEtMy44LDE5LjUNCgkJYy0wLjEsMy4yLDAuMiw2LjQsMC43LDkuNWMwLjMsMS41LDAuNywzLDEuMSw0LjVjMC4yLDAuNywwLjUsMS40LDAuOCwyLjJsMC44LDJsMC42LDEuMmwwLjMsMC42bDAuMSwwLjNjMC4xLDAuMSwwLTAuMSwwLjEsMC4xDQoJCWMwLjQsMC43LDAuNywxLjMsMS4yLDJjMC44LDEuMywxLjcsMi41LDIuNywzLjdjMS45LDIuMyw0LjIsNC41LDYuNiw2LjNjNC45LDMuNywxMC42LDYuNSwxNi41LDguNXMxMiwzLjQsMTguMiw0LjINCgkJYzEyLjMsMS43LDI0LjUsMS42LDM2LjEsMC43YzIzLjMtMS44LDQ0LjUtNi44LDYyLjgtMTIuM2MxOC4zLTUuNiwzMy45LTExLjgsNDYuNC0xNy41YzYuMy0yLjgsMTEuOC01LjUsMTYuNi03LjkNCgkJYzQuOC0yLjQsOC44LTQuNiwxMi02LjNjMy4yLTEuOCw1LjctMy4xLDcuNC00LjFDMzAxLjgsMzM2LjksMzAyLjcsMzM2LjQsMzAyLjcsMzM2LjRMMzAyLjcsMzM2LjR6Ii8+DQo8L2c+DQo8cGF0aCBkPSJNMzIxLjEsMjA0LjYiLz4NCjxwYXRoIGQ9Ik0zMjEuMSwxOTUuMyIvPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTIyNC4xLDMwMy43YzAsMS44LDEuNSwzLjMsMy40LDMuM2gyMC4yYzEuOSwwLDMuNC0xLjUsMy40LTMuM3YtNDkuNGMwLTcuMiw2LjEtMTMsMTMuNS0xM2g3LjENCgkJYzcuNCwwLDEzLjMsNS44LDEzLjMsMTNsMC4xLDQ5LjRjMCwxLjgsMS41LDMuMywzLjQsMy4zaDIwLjJjMS45LDAsMy40LTEuNSwzLjQtMy4zdi00OS40YzAtMjEuOS0xOC0zOS43LTQwLjQtMzkuN2gtNy4xDQoJCWMtMjIuNCwwLTQwLjUsMTcuOC00MC41LDM5LjdMMjI0LjEsMzAzLjd6Ii8+DQoJPGc+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMzAsMTc4LjFjLTEuNC0xLjMtMy42LTEuMy01LDBsLTEuMywxLjNjLTEuNCwxLjMtMS40LDMuNiwwLDQuOWw4LjEsNy45YzEuMSwxLjEsMSwyLjgtMC4xLDMuOWwtMSwxDQoJCQljLTEuMSwxLjEtMi45LDEuMS0zLjksMGwtOC4yLTcuOWMtNC4yLTQuMS00LjItMTAuNywwLTE0LjhsMS4zLTEuM2M0LjItNC4xLDExLTQsMTUuMiwwLjFsNy42LDcuNGwwLjUsMC41YzEuMSwxLjEsMS4xLDIuOCwwLDMuOQ0KCQkJbC0xLDFjLTEuMSwxLjEtMi45LDEuMi00LDAuMUwzMzAsMTc4LjF6Ii8+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNjcsMTg0LjNjMS40LTEuMywxLjQtMy41LDAtNC44bC0xLjMtMS4zYy0xLjQtMS4zLTMuNi0xLjQtNSwwbC04LjEsNy45Yy0xLjEsMS4xLTIuOSwxLTQsMGwtMS0xDQoJCQljLTEuMS0xLjEtMS4xLTIuOCwwLTMuOGw4LjEtOGM0LjItNC4xLDExLTQuMSwxNS4yLDBsMS4zLDEuM2M0LjIsNC4xLDQuMiwxMC43LDAsMTQuOGwtNy42LDcuNGwtMC41LDAuNWMtMS4xLDEuMS0yLjksMS4xLTQsMA0KCQkJbC0xLTFjLTEuMS0xLjEtMS4yLTIuOC0wLjEtMy45TDM2NywxODQuM3oiLz4NCgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMyMy42LDIxNC4zYy0xLjQsMS4zLTEuNCwzLjUsMCw0LjlsMS4zLDEuM2MxLjQsMS4zLDMuNiwxLjQsNSwwbDguMS03LjljMS4xLTEuMSwyLjktMSw0LDBsMSwxDQoJCQljMS4xLDEuMSwxLjEsMi44LDAsMy44bC04LjIsOGMtNC4yLDQuMS0xMSw0LjItMTUuMiwwbC0xLjMtMS4zYy00LjItNC4xLTQuMS0xMC43LDAuMS0xNC44bDcuNi03LjRsMC41LTAuNWMxLjEtMS4xLDIuOS0xLjEsNCwwDQoJCQlsMSwxYzEuMSwxLjEsMS4yLDIuOCwwLjEsMy45TDMyMy42LDIxNC4zeiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzYwLjYsMjIwLjVjMS40LDEuMywzLjYsMS4zLDUsMGwxLjMtMS4zYzEuNC0xLjQsMS40LTMuNiwwLTQuOWwtOC4xLTcuOWMtMS4xLTEuMS0xLTIuOCwwLjEtMy45bDEtMQ0KCQkJYzEuMS0xLjEsMi44LTEuMSwzLjksMGw4LjEsOGM0LjIsNC4xLDQuMiwxMC43LDAuMSwxNC44bC0xLjMsMS4zYy00LjIsNC4xLTExLDQuMS0xNS4yLDBMMzQ4LDIxOGwtMC41LTAuNQ0KCQkJYy0xLjEtMS4xLTEuMS0yLjgsMC0zLjlsMS0xYzEuMS0xLjEsMi45LTEuMiw0LTAuMUwzNjAuNiwyMjAuNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);
+    width: 50px;
+    height: 50px;
+    margin: 8px 16px;
+    background-position: center center;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    z-index: 900;
+  }
+
+  #root:before {
+    height: 40px;
+    background: #18242b;
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: 0;
+    content: '';
+    z-index: 900;
+    content: "nukleus component library";
+    padding: 25px 0 0 80px;
+    color: white;
+  }
+
+  .SplitPane.vertical {
+    margin-top: 65px;
+  }
+
+  input[placeholder="Filter"] {
+    display: none;
+  }
+
+  #github-link {
+    width: 65px;
+    height: 65px;
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+    z-index: 900;
+    opacity: 1;
+    transition: opacity .3s;
+  }
+
+  #github-link:hover {
+    opacity: 0.6;
+  }
+
+  #github-link .github-link-path {
+    fill:#99C613;
+  }
+
+
+  body {
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+    font-weight: 400;
+    font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    font-size: 14px;
+    font-weight: 200;
+  }
+</style>
+
+<a href="https://github.com/kununu/nukleus" id="github-link" style="position: absolute; top: 0; border: 0; right: 0; z-index: 9999;">
+  <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="-215 217 80 80" style="enable-background:new -215 217 80 80;" xml:space="preserve">
+
+  <g>
+    <path class="github-link-path" d="M-215,217l36.8,36.8h1.7l2.2-2.2c-4.1-2.9-2.6-5.9-2.6-5.9c1-2.2,0.5-3.5,0.5-3.5c-0.4-2.1,0.9-0.7,0.9-0.7
+      c1.2,1.5,0.7,3.5,0.7,3.5c-0.7,2.9,1,4.3,2.3,4.9l0.3-0.3c1-0.8,2-1,2.7-1c-2.7-3.4-4.7-7.7,0.5-13c1.5-1.5,3.3-2.2,5.1-2.2
+      c0.2-0.5,1.1-2.4,3.7-3.5c0,0,1.5,0.8,2.4,5.2c1.4,0.8,2.7,1.8,3.9,2.9c1.2,1.2,2.2,2.5,2.9,3.9c4.4,0.8,5.2,2.3,5.2,2.3
+      c-1.2,2.6-3,3.6-3.5,3.7c-0.1,1.9-0.8,3.6-2.3,5.1c-5.2,5.2-9.6,3.2-13,0.5c0.1,0.9-0.3,2.2-1.6,3.5l-3.7,3.7
+      c-0.2,0.2-0.1,0.5-0.1,0.9l0.4,0.9L-135,297v-80H-215z"/>
+  </g>
+  </svg>
+</a>
+
+<script>
+    document.title = 'Nukleus';
+</script>

.storybook/stories/index.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {defaultOptions} from 'defaultOptions';
+import {withOptions} from '@storybook/addon-options';