docs: upgrade storybook, update doc structure and order

.storybook/main.js

@@ -0,0 +1,54 @@
+const path = require('path');
+
+module.exports = {
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-viewport',
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+    {
+      name: '@storybook/preset-typescript',
+      options: {
+        tsDocgenLoaderOptions: {
+          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+          propFilter: prop => {
+            // Filter out props from styled-components
+            if (
+              prop.name === 'as' ||
+              prop.name === 'ref' ||
+              prop.name === 'theme'
+            ) {
+              return false;
+            }
+
+            if (prop.parent == null) {
+              return true;
+            }
+
+            // Filter outs props from react types
+            return (
+              prop.parent.fileName.indexOf('node_modules/@types/react') < 0
+            );
+          },
+        },
+        include: [
+          path.resolve(__dirname, '../src'),
+          path.resolve(__dirname, '../example'),
+          path.resolve(__dirname, '../docs'),
+        ],
+      },
+    },
+  ],
+  stories: [
+    '../docs/docs/Intro.story.mdx',
+    '../docs/docs/**/*.story.(mdx|tsx)',
+    '../docs/demos/**/*.story.(mdx|tsx)',
+  ],
+};

.storybook/manager.js

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+  showAddonsPanel: true,
+  panelPosition: 'bottom',
+  theme: create({
+    base: 'dark',
+    brandTitle: 'React Compare Slider',
+    brandUrl: 'https://github.com/nerdyman/react-compare-slider',
+    gridCellSize: 12,
+  }),
+});

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style type="text/css">
+  body {
+    margin: 0;
+    padding: 0;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,38 @@
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { withKnobs } from '@storybook/addon-knobs';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { addDecorator, addParameters } from '@storybook/react';
+import { themes } from '@storybook/theming';
+
+addDecorator(withKnobs);
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+  options: {
+    showRoots: true,
+    storySort: (a, b) => {
+      if (a[0].includes('docs-')) {
+        if (a[0].includes('intro-')) {
+          return -1;
+        }
+
+        return 0;
+      }
+
+      return 1;
+    },
+    theme: {
+      ...themes.dark,
+      appBorderRadius: 3,
+      colorSecondary: '#b464fa',
+      barSelectedColor: '#b464fa',
+    },
+  },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    // defaultViewport: 'Initial',
+  },
+});

docs/blocks/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const StoryContainer: React.FC<any> = ({ style, ...props }) => (
+  <div
+    style={{
+      minHeight: '100vh',
+      ...style,
+    }}
+    {...props}
+  ></div>
+);
+
+export const StoryNote: React.FC<any> = ({ style, ...props }) => (
+  <p
+    style={{
+      fontFamily: 'sans-serif',
+      padding: '0.5rem',
+      borderRadius: '0.25rem',
+      backgroundColor: 'rgba(0, 0, 0, 0.85)',
+      color: 'white',
+      ...style,
+    }}
+    {...props}
+  />
+);