Feature/react peer dependency (#3)

* close

* linting after upgrade to react 17

* update docs

Author: Ryan Sites

.eslintignore

@@ -0,0 +1 @@
+**/*.js

.eslintrc

@@ -0,0 +1,17 @@
+{
+	"root": true,
+	"parser": "@typescript-eslint/parser",
+	"plugins": [
+	  "@typescript-eslint"
+	],
+	"extends": [
+	  "eslint:recommended",
+	  "plugin:@typescript-eslint/eslint-recommended",
+	  "plugin:@typescript-eslint/recommended"
+	],
+	"rules": {
+		"@typescript-eslint/consistent-type-assertions": 0,
+		"@typescript-eslint/no-explicit-any": 0,
+		"no-mixed-spaces-and-tabs": 0
+	}
+  }

.gitignore

@@ -48,9 +48,6 @@ typings/
 # dotenv environment variables file
 .env
 
-# VS Code
-.vscode
-
 # OSX
 .DS_Store
 

.storybook/main.js

@@ -1,21 +1,18 @@
 module.exports = {
-	stories: ['../stories/**/*.(tsx|mdx)'],
-	addons: ['@storybook/addon-actions', '@storybook/addon-links',  '@storybook/addon-docs'],
-	webpackFinal: async config => {
-		config.module.rules.push({
-			test: /\.(ts|tsx)$/,
-			use: [
-				{
-					loader: require.resolve('ts-loader'),
-				},
-				// Optional
-				{
-					loader: require.resolve('react-docgen-typescript-loader'),
-				},
-			],
-		});
-		config.resolve.extensions.push('.ts', '.tsx');
-		return config;
-	},
-	};
-
+  "stories": [
+    "../src/stories/*.@(tsx|mdx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ],
+	typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  }
+}

.storybook/preview.js

@@ -4,6 +4,10 @@ import { CSSReset, ThemeProvider } from "@chakra-ui/core";
 import '@storybook/addon-console';
 
 
+export const parameters = {
+  controls: { expanded: false },
+};
+
 const AppProvider = ({ children }) => {
   return (
     <ThemeProvider>

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+	"recommendations": [
+	  "samverschueren.linter-xo",
+	  "esbenp.prettier-vscode"
+	]
+  }

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+	"xo.enable": true,
+	"xo.format.enable": true,
+	"javascript.format.enable": false,
+	"javascript.validate.enable": false,
+	"prettier.tabWidth": 4,
+	"prettier.singleQuote": true,
+	"[json]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "samverschueren.linter-xo"
+	},
+	"[typescript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "samverschueren.linter-xo"
+	},
+	"[typescriptreact]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "samverschueren.linter-xo"
+	}
+}

docs-wrapper.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import {ThemeProvider} from '@chakra-ui/core'
 
 const DocsWrapper = (props: any): JSX.Element => {
-    return <ThemeProvider>{props.children}</ThemeProvider>
+	return <ThemeProvider>{props.children}</ThemeProvider>
 }
 
 export default DocsWrapper

docs/_config.yml

@@ -0,0 +1,17 @@
+{
+  "files": {
+    "main.js": "./main.1566dacf1a4a4329815e.bundle.js",
+    "main.js.map": "./main.1566dacf1a4a4329815e.bundle.js.map",
+    "runtime~main.js": "./runtime~main.1566dacf1a4a4329815e.bundle.js",
+    "runtime~main.js.map": "./runtime~main.1566dacf1a4a4329815e.bundle.js.map",
+    "vendors~main.js": "./vendors~main.1566dacf1a4a4329815e.bundle.js",
+    "vendors~main.js.map": "./vendors~main.1566dacf1a4a4329815e.bundle.js.map",
+    "iframe.html": "./iframe.html",
+    "vendors~main.1566dacf1a4a4329815e.bundle.js.LICENSE.txt": "./vendors~main.1566dacf1a4a4329815e.bundle.js.LICENSE.txt"
+  },
+  "entrypoints": [
+    "runtime~main.1566dacf1a4a4329815e.bundle.js",
+    "vendors~main.1566dacf1a4a4329815e.bundle.js",
+    "main.1566dacf1a4a4329815e.bundle.js"
+  ]
+}

docs/asset-manifest.json

@@ -4,6 +4,41 @@
     display: none;
   }
 
+  .sb-show-main.sb-main-centered {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .sb-show-main.sb-main-centered #root {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 1rem;
+    max-height: 100%; /* Hack for centering correctly in IE11 */
+  }
+
+  /* Vertical centering fix for IE11 */
+  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sb-show-main.sb-main-centered:after {
+      content: '';
+      min-height: inherit;
+      font-size: 0;
+    }
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .sb-show-main.sb-main-padded {
+    margin: 0;
+    padding: 1rem;
+    display: block;
+  }
+
   .sb-wrapper {
     position: fixed;
     top: 0;
@@ -68,7 +103,31 @@
   } catch (e) {
     // eslint-disable-next-line no-console
     console.warn('unable to connect to top frame for connecting dev tools');
-  }</script><style>#root[hidden],
+  }
+
+  window.onerror = function onerror(message, source, line, column, err) {
+    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
+    // eslint-disable-next-line no-var, vars-on-top
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'preview',
+        /* eslint-enable object-shorthand */
+      })
+    );
+  };</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></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><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.a0d100945b4ae350a012.bundle.js"></script><script src="vendors~main.a0d100945b4ae350a012.bundle.js"></script><script src="main.a0d100945b4ae350a012.bundle.js"></script></body></html>
+      }</style></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><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";
+            
+        
+            
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.1566dacf1a4a4329815e.bundle.js"></script><script src="vendors~main.1566dacf1a4a4329815e.bundle.js"></script><script src="main.1566dacf1a4a4329815e.bundle.js"></script></body></html>

docs/iframe.html

@@ -4,6 +4,10 @@
     width: 100%;
     margin: 0;
     padding: 0;
+  }
+
+  * {
+    box-sizing: border-box;
   }</style><script>/* globals window */
   /* eslint-disable no-underscore-dangle */
   try {
@@ -13,7 +17,39 @@
   } catch (e) {
     // eslint-disable-next-line no-console
     console.warn('unable to connect to top frame for connecting dev tools');
-  }</script><style>#root[hidden],
+  }
+
+  window.onerror = function onerror(message, source, line, column, err) {
+    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
+    // eslint-disable-next-line no-var, vars-on-top
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'manager',
+        /* eslint-enable object-shorthand */
+      })
+    );
+  };</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = true;</script><script src="runtime~main.286b69a873d49f2f199c.bundle.js"></script><script src="vendors~main.67234067e261292dfce3.bundle.js"></script><script src="main.0cc2659f2ebb68b3fe59.bundle.js"></script></body></html>
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+            
+        
+            
+              window['LOGLEVEL'] = "info";
+            
+        
+            
+        
+            
+        
+            
+              window['DOCS_MODE'] = true;</script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.0219844671cc5f2e559c.bundle.js"></script><script src="main.809e7be6a501880262a3.bundle.js"></script></body></html>