chore: Upgrade all dependencies and switch to react-testing-library

Also fix issues with website and remove ga and codefund

Author: danez

.babelrc.js

@@ -7,8 +7,6 @@ const modules = output == null ? false : output;
 const options = {
   presets: [['@babel/env', { loose: true, modules }], '@babel/react'],
   plugins: [
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/proposal-object-rest-spread',
     ['@babel/proposal-class-properties', { loose: true }],
   ],
 };

.eslintrc

@@ -1,22 +1,22 @@
 {
-  "extends": ["airbnb", "prettier"],
-  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "env": {
     "browser": true,
     "node": true
   },
-  "plugins": ["prettier"],
   "rules": {
-    "no-plusplus": "off",
-    "prettier/prettier": "error",
-    "react/require-default-props": "off",
-    "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
-    "react/jsx-props-no-spreading": "off",
-    "react/forbid-prop-types": "off",
-    "react/prefer-stateless-function": "off",
-    "react/sort-comp": "off",
-    "react/static-property-placement": "off",
-    "react/state-in-constructor": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "import/no-extraneous-dependencies": [
       "error",
@@ -25,10 +25,12 @@
           "**/__tests__/**/*",
           "examples/src/**/*.js",
           "rollup.config.js",
-          "webpack-new.config.js"
+          "webpack.config.js"
         ],
         "optionalDependencies": false
       }
-    ]
+    ],
+    "no-unused-vars": ["error", { "ignoreRestSiblings": true }],
+    "no-console": "error"
   }
 }

.travis.yml

@@ -1,9 +1,6 @@
 language: node_js
 node_js:
   - 'lts/*'
-before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - export PATH="$HOME/.yarn/bin:$PATH"
 cache:
   yarn: true
 script:

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2015-2019 by Matt Zabriskie
+Copyright (c) Matt Zabriskie and Daniel Tschinder
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

examples/src/app.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import 'react-live/react-live.css';
 import './example.less';
 import SuperMario from './components/examples/SuperMario';
 import MattGroening from './components/examples/MattGroening';

examples/src/components/ExampleItem.js

@@ -3,6 +3,7 @@ import T from 'prop-types';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; // eslint-disable-line
 import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live';
 import classNames from 'clsx';
+import dracula from 'prism-react-renderer/themes/dracula';
 
 const scope = { Tabs, Tab, TabList, TabPanel };
 
@@ -53,17 +54,18 @@ export default class ExampleItem extends Component {
         </h3>
         {this.renderHint()}
         <LiveProvider
-          mountStylesheet={false}
           scope={scope}
           code={this.props.code}
+          theme={dracula}
           noInline
         >
           <LiveError />
           <div className="live-preview">
             <div className={editorClassNames}>
-              <LiveEditor ignoreTabKey />
+              <LiveEditor />
             </div>
             <LivePreview
+              className="react-live-preview"
               style={{ dir: this.props.direction === 'rtl' ? 'rtl' : 'ltr' }}
             />
           </div>

examples/src/components/examples/MattGroening.js

@@ -62,7 +62,6 @@ const code = `const Component = (
         </TabPanel>
         <TabPanel>
           <p>Chinese-Martian intern at Planet Express. Fonfon Ru of Kif Kroker.</p>
-          <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fd/FuturamaAmyWong.png/140px-FuturamaAmyWong.png" alt="Amy Wong" />
         </TabPanel>
         <TabPanel>
           <p>Many times great-nephew of Fry. CEO and owner of Planet Express delivery company. Tenured professor of Mars University.</p>

examples/src/example.less

@@ -153,7 +153,7 @@ h1, h2, h3 {
 		color: @link-color;
 		text-decoration: none;
 		font-size: .7em;
-	}
+    }
 
 	.react-live-preview {
 		padding: 2em;

examples/src/index.html

@@ -1,13 +1,5 @@
 <!doctype html>
 <head>
-	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117743005-1"></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag(){dataLayer.push(arguments);}
-		gtag('js', new Date());
-
-		gtag('config', 'UA-117743005-1');
-	</script>
 	<meta charset="utf-8">
 	<title>React-Tabs</title>
 	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
@@ -26,7 +18,6 @@
 			<h1 class="page-header__title">React Tabs</h1>
 			<h2 class="page-header__subtitle">An accessible and easy tab component for <a href="https://reactjs.org/" target="_blank" class="page-header__link" rel="noopener noreferrer">ReactJS</a>.</h2>
 			<a href="https://github.com/reactjs/react-tabs" class="page-header__button" target="_blank" rel="noopener noreferrer">View on GitHub</a>
-			<div id="codefund"></div>
 		</div>
 	</header>
 	<div class="page-body">
@@ -41,9 +32,7 @@ <h2 class="page-header__subtitle">An accessible and easy tab component for <a hr
 		<div class="container">
 			<div>Supported by</div>
 			<div><a href="https://www.browserstack.com"><img src="images/Browserstack-logo.svg" alt="Browserstack" class="browserstack"></a></div>
-			<div>Copyright &copy; <a href="https://twitter.com/TschinderDaniel" target="_blank" rel="noopener noreferrer">Daniel Tschinder</a> 2017-2018. MIT Licensed.</div>
-			<div>This website uses google analytics. <a href="https://tools.google.com/dlpage/gaoptout" target="_blank" rel="noopener noreferrer">Opt-out here</a>.</div>
+			<div>Copyright &copy; <a href="https://github.com/danez" target="_blank" rel="noopener noreferrer">Daniel Tschinder</a> 2017-2020. MIT Licensed.</div>
 		</div>
 	</footer>
-	<script src="https://codefund.app/properties/113/funder.js" async></script>
 </body>

package.json

@@ -7,7 +7,6 @@
   "scripts": {
     "clean:commonjs": "rimraf lib",
     "clean:umd": "rimraf dist",
-    "create-github-release": "conventional-github-releaser -p angular",
     "build:commonjs": "cross-env BABEL_OUTPUT=commonjs babel src/ --out-dir lib/ --ignore **/__tests__,**/__mocks__",
     "build:esm": "babel src/ --out-dir esm/ --ignore **/__tests__,**/__mocks__",
     "build:umd": "rollup -c",
@@ -18,7 +17,7 @@
     "prepublishOnly": "yarn run build",
     "release": "semantic-release",
     "test": "cross-env BABEL_OUTPUT=commonjs jest",
-    "start": "webpack-dev-server --inline --content-base examples/",
+    "start": "webpack serve --inline --content-base examples/ --port 8000",
     "website": "run-s website:clean website:build website:redirect",
     "website:clean": "rimraf examples/dist",
     "website:build": "cross-env BABEL_TARGET=examples NODE_ENV=production webpack",
@@ -53,57 +52,58 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
+    "@babel/eslint-parser": "^7.12.1",
     "@babel/plugin-external-helpers": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-0",
-    "babel-eslint": "^10.0.1",
+    "@testing-library/dom": "^7.29.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.5.0",
     "babel-jest": "^26.0.1",
-    "babel-loader": "^8.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
-    "conventional-github-releaser": "^3.1.2",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.3.2",
-    "enzyme": "^3.5.0",
-    "enzyme-adapter-react-16": "^1.3.0",
+    "css-loader": "^5.0.1",
+    "enzyme": "^3.11.0",
     "eslint": "^7.1.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^6.0.0",
-    "hoist-non-react-statics": "^3.0.1",
-    "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^4.3.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-react": "^7.21.5",
+    "file-loader": "^6.2.0",
+    "hoist-non-react-statics": "^3.3.2",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^4.5.0",
     "husky": "^4.2.5",
-    "jest": "^26.0.1",
-    "less-loader": "^6.1.0",
+    "jest": "^26.6.3",
+    "less": "^3.13.0",
+    "less-loader": "^7.1.0",
     "lint-staged": "^10.2.6",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.3.3",
     "npm-run-all": "^4.1.3",
-    "prettier": "^2.0.5",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "react-live": "^1.11.0",
-    "react-modal": "^3.5.1",
-    "react-test-renderer": "^16.4.2",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-live": "^2.2.3",
+    "react-modal": "^3.12.1",
+    "react-test-renderer": "^17.0.1",
     "rimraf": "^3.0.0",
-    "rollup": "^2.10.8",
-    "rollup-plugin-babel": "^4.0.2",
+    "rollup": "^2.34.2",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-ignore": "^1.0.3",
+    "rollup-plugin-ignore": "^1.0.9",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-terser": "^6.0.1",
-    "semantic-release": "^17.0.7",
-    "webpack": "^4.17.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.7"
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "semantic-release": "^17.3.0",
+    "webpack": "^5.10.1",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "clsx": "^1.1.0",