From 7e06bb0fdb4d9fd78db04df49186d69f56efe9e1 Mon Sep 17 00:00:00 2001 From: Christian Vuerings Date: Sat, 31 Oct 2020 07:49:57 -0700 Subject: [PATCH] Docs: upgrade to Create React App 4 --- .eslintrc.json | 1 + docs/.env | 1 - docs/package.json | 2 +- docs/src/AppWrapper.js | 35 + docs/src/components/atomDark.js | 4 +- docs/src/index.js | 30 +- package.json | 6 +- packages/gestalt-datepicker/rollup.config.js | 4 +- packages/gestalt/rollup.config.js | 4 +- packages/gestalt/src/Button.jsdom.test.js | 7 +- packages/gestalt/src/IconButton.jsdom.test.js | 7 +- packages/gestalt/src/TapArea.jsdom.test.js | 3 - packages/gestalt/src/defaultLayout.js | 4 +- packages/gestalt/src/fullWidthLayout.js | 4 +- packages/gestalt/src/icons/index.js | 4 +- packages/gestalt/src/uniformRowLayout.js | 4 +- yarn.lock | 5347 ++++++++--------- 17 files changed, 2471 insertions(+), 2996 deletions(-) delete mode 100644 docs/.env create mode 100644 docs/src/AppWrapper.js diff --git a/.eslintrc.json b/.eslintrc.json index 0b2c57f21a..81a80c65e1 100644 --- a/.eslintrc.json +++ b/.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", diff --git a/docs/.env b/docs/.env deleted file mode 100644 index 6f809cc254..0000000000 --- a/docs/.env +++ /dev/null @@ -1 +0,0 @@ -SKIP_PREFLIGHT_CHECK=true diff --git a/docs/package.json b/docs/package.json index 550dbf5930..7276df86f3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/src/AppWrapper.js b/docs/src/AppWrapper.js new file mode 100644 index 0000000000..e1a496a4a7 --- /dev/null +++ b/docs/src/AppWrapper.js @@ -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) => ( + } + /> + )); + +function AppWrapper(): Node { + return ( + + + + } /> + {sidebarIndex.map((section) => mapRoutes(section.pages))} + + + + ); +} + +export default AppWrapper; diff --git a/docs/src/components/atomDark.js b/docs/src/components/atomDark.js index 7d4ccd82c0..5806c5a9d4 100644 --- a/docs/src/components/atomDark.js +++ b/docs/src/components/atomDark.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; diff --git a/docs/src/index.js b/docs/src/index.js index 1dc32bd2df..915cb1f057 100644 --- a/docs/src/index.js +++ b/docs/src/index.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) => ( - } - /> - )); if (container instanceof Element) { render( - - - - } - /> - {sidebarIndex.map((section) => mapRoutes(section.pages))} - - - + , container ); diff --git a/package.json b/package.json index 31a46129be..ab915a1616 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/gestalt-datepicker/rollup.config.js b/packages/gestalt-datepicker/rollup.config.js index 34c695e5b3..5712e4f2cf 100644 --- a/packages/gestalt-datepicker/rollup.config.js +++ b/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: [ { @@ -45,3 +45,5 @@ export default { ], plugins: plugins('gestalt-datepicker'), }; + +export default rollupConfig; diff --git a/packages/gestalt/rollup.config.js b/packages/gestalt/rollup.config.js index b8a0fd0966..37b6bd7d21 100644 --- a/packages/gestalt/rollup.config.js +++ b/packages/gestalt/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; diff --git a/packages/gestalt/src/Button.jsdom.test.js b/packages/gestalt/src/Button.jsdom.test.js index 4fb16caa5b..ad082c2a5f 100644 --- a/packages/gestalt/src/Button.jsdom.test.js +++ b/packages/gestalt/src/Button.jsdom.test.js @@ -55,8 +55,8 @@ describe('Button', () => { render(