Docs: upgrade to Create React App 4 (#1276)

Author: christianvuerings

.eslintrc.json

@@ -38,6 +38,7 @@
       }
     ],
     "import/extensions": ["error", "always", { "ignorePackages": true }],
+    "import/no-anonymous-default-export": "error",
     "import/no-extraneous-dependencies": "off",
     "import/no-namespace": "error",
     "import/no-relative-parent-imports": "error",

docs/.env

@@ -24,7 +24,7 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
-    "react-scripts": "3.4.0"
+    "react-scripts": "4.0.0"
   },
   "browserslist": [
     "last 2 versions",

docs/package.json

@@ -0,0 +1,35 @@
+// @flow strict
+import React, { type Node } from 'react';
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
+import App from './components/App.js';
+import CardPage from './components/CardPage.js';
+import routes from './components/routes.js';
+import sidebarIndex from './components/sidebarIndex.js';
+
+import './docs.css';
+import 'gestalt/dist/gestalt.css';
+import 'gestalt-datepicker/dist/gestalt-datepicker.css';
+
+const mapRoutes = (pages) =>
+  pages.map((page, i) => (
+    <Route
+      path={`/${page}`}
+      key={i}
+      render={() => <CardPage cards={routes[page]} page={page} />}
+    />
+  ));
+
+function AppWrapper(): Node {
+  return (
+    <BrowserRouter>
+      <App>
+        <Switch>
+          <Route exact path="/" render={() => <Redirect to="/What's New" />} />
+          {sidebarIndex.map((section) => mapRoutes(section.pages))}
+        </Switch>
+      </App>
+    </BrowserRouter>
+  );
+}
+
+export default AppWrapper;

docs/src/AppWrapper.js

@@ -1,5 +1,5 @@
 // @flow strict
-export default {
+const atomDark = {
   plain: {
     color: '#c5c8c6',
     backgroundColor: '#111',
@@ -91,3 +91,5 @@ export default {
     },
   ],
 };
+
+export default atomDark;

docs/src/components/atomDark.js

@@ -1,40 +1,14 @@
 // @flow strict
 import React from 'react';
-import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 import { render } from 'react-dom';
-import 'gestalt/dist/gestalt.css';
-import 'gestalt-datepicker/dist/gestalt-datepicker.css';
-import App from './components/App.js';
-import CardPage from './components/CardPage.js';
-import routes from './components/routes.js';
-import './docs.css';
-import sidebarIndex from './components/sidebarIndex.js';
+import AppWrapper from './AppWrapper.js';
 
 const container = document.getElementById('root');
-const mapRoutes = (pages) =>
-  pages.map((page, i) => (
-    <Route
-      path={`/${page}`}
-      key={i}
-      render={() => <CardPage cards={routes[page]} page={page} />}
-    />
-  ));
 
 if (container instanceof Element) {
   render(
     <React.StrictMode>
-      <BrowserRouter>
-        <App>
-          <Switch>
-            <Route
-              exact
-              path="/"
-              render={() => <Redirect to="/What's New" />}
-            />
-            {sidebarIndex.map((section) => mapRoutes(section.pages))}
-          </Switch>
-        </App>
-      </BrowserRouter>
+      <AppWrapper />
     </React.StrictMode>,
     container
   );

docs/src/index.js

@@ -26,7 +26,7 @@
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "^3.4.2",
     "babel-eslint": "10.1.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.0",
     "blueimp-md5": "^2.18.0",
     "caniuse-lite": "^1.0.30001146",
     "chalk": "^4.1.0",
@@ -35,7 +35,7 @@
     "cssnano": "^4.1.10",
     "cypress": "^5.3.0",
     "danger": "10.5.0",
-    "eslint": "7.10.0",
+    "eslint": "7.11.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -50,7 +50,7 @@
     "flow-bin": "^0.135.0",
     "husky": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.5.2",
+    "jest": "26.6.0",
     "jscodeshift": "^0.11.0",
     "lint-staged": "^10.4.0",
     "netlify-cli": "^2.65.1",

package.json

@@ -1,7 +1,7 @@
 // eslint-disable-next-line flowtype/require-valid-file-annotation
 import plugins from '../gestalt-core/build.js'; // eslint-disable-line import/no-relative-parent-imports
 
-export default {
+const rollupConfig = {
   input: 'src/index.js',
   output: [
     {
@@ -45,3 +45,5 @@ export default {
   ],
   plugins: plugins('gestalt-datepicker'),
 };
+
+export default rollupConfig;

packages/gestalt-datepicker/rollup.config.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line flowtype/require-valid-file-annotation
 import plugins from '../gestalt-core/build.js'; // eslint-disable-line import/no-relative-parent-imports
 
-export default {
+const rollupConfig = {
   input: 'src/index.js',
   output: [
     {
@@ -42,3 +42,5 @@ export default {
   ],
   plugins: plugins('gestalt'),
 };
+
+export default rollupConfig;

packages/gestalt/rollup.config.js

@@ -55,8 +55,8 @@ describe('Button', () => {
     render(<Button text="test" disabled ref={ref} />);
     expect(ref.current instanceof HTMLButtonElement).toEqual(true);
     expect(
-      ref.current instanceof HTMLButtonElement && ref.current?.tabIndex
-    ).toEqual(-1);
+      ref.current instanceof HTMLButtonElement && ref.current?.disabled
+    ).toEqual(true);
   });
 
   it('renders a disabled link button', () => {
@@ -75,9 +75,6 @@ describe('Button', () => {
     expect(
       ref.current instanceof HTMLAnchorElement && ref.current?.href
     ).toEqual('');
-    expect(
-      ref.current instanceof HTMLAnchorElement && ref.current?.tabIndex
-    ).toEqual(-1);
   });
 
   it('renders a button removed from sequential keyboard navigation via tabIndex', () => {

packages/gestalt/src/Button.jsdom.test.js

@@ -60,9 +60,6 @@ describe('IconButton', () => {
     expect(
       ref.current instanceof HTMLAnchorElement && ref.current?.href
     ).toEqual('');
-    expect(
-      ref.current instanceof HTMLAnchorElement && ref.current?.tabIndex
-    ).toEqual(-1);
   });
 
   it('renders a disabled button', () => {
@@ -72,8 +69,8 @@ describe('IconButton', () => {
     );
     expect(ref.current instanceof HTMLButtonElement).toEqual(true);
     expect(
-      ref.current instanceof HTMLButtonElement && ref.current?.tabIndex
-    ).toEqual(-1);
+      ref.current instanceof HTMLButtonElement && ref.current?.disabled
+    ).toEqual(true);
   });
 
   it('renders an IconButton removed from sequential keyboard navigation via tabIndex', () => {

packages/gestalt/src/IconButton.jsdom.test.js

@@ -108,9 +108,6 @@ describe('TapArea', () => {
     expect(
       ref.current instanceof HTMLAnchorElement && ref.current?.href
     ).toEqual('');
-    expect(
-      ref.current instanceof HTMLAnchorElement && ref.current?.tabIndex
-    ).toEqual(-1);
   });
 
   it('renders a TapArea removed from sequential keyboard navigation via tabIndex', () => {

packages/gestalt/src/TapArea.jsdom.test.js

@@ -25,7 +25,7 @@ const offscreen = (width, height = Infinity) => ({
   height,
 });
 
-export default <T>({
+const defaultLayout = <T>({
   cache,
   columnWidth = 236,
   gutter = 14,
@@ -87,3 +87,5 @@ export default <T>({
     return positions;
   }, []);
 };
+
+export default defaultLayout;

packages/gestalt/src/defaultLayout.js

@@ -13,7 +13,7 @@ const mindex = (arr) => {
   return idx;
 };
 
-export default <T>({
+const fullWidthLayout = <T>({
   gutter = 0,
   cache,
   minCols = 2,
@@ -90,3 +90,5 @@ export default <T>({
     }, []);
   };
 };
+
+export default fullWidthLayout;

packages/gestalt/src/fullWidthLayout.js

@@ -170,7 +170,7 @@ import workflowStatusProblem from './workflow-status-problem.svg';
 import workflowStatusUnstarted from './workflow-status-unstarted.svg';
 import workflowStatusWarning from './workflow-status-warning.svg';
 
-export default {
+const icons = {
   ad,
   'ad-group': adGroup,
   add,
@@ -342,3 +342,5 @@ export default {
   'workflow-status-unstarted': workflowStatusUnstarted,
   'workflow-status-warning': workflowStatusWarning,
 };
+
+export default icons;

packages/gestalt/src/icons/index.js

@@ -10,7 +10,7 @@ const offscreen = (width, height = Infinity) => ({
   height,
 });
 
-export default <T>({
+const uniformRowLayout = <T>({
   cache,
   columnWidth = 236,
   gutter = 14,
@@ -68,3 +68,5 @@ export default <T>({
   }
   return positions;
 };
+
+export default uniformRowLayout;