feat: update to CRA4 and React 17

Update to use latest versions from create-react-app and react. It also contains a refactor, cleaning unneeded React references. Also, as a small addition, I have removed the numeric zoom label from ZoomControl in skeleton template (as in sample-app)

Co-authored-by: VictorVelarde <[email protected]>

.gitignore

@@ -6,13 +6,15 @@ template-skeleton/README.md
 /template-skeleton/template/yarn.lock
 /template-skeleton/template/node_modules
 /template-skeleton/template/_templates
+/template-skeleton/template/.eslintcache
 
 template-sample-app/README.md
 /template-sample-app/yarn.lock
 /template-sample-app/template/package.json
 /template-sample-app/template/yarn.lock
 /template-sample-app/template/node_modules
 /template-sample-app/template/_templates
+/template-sample-app/template/.eslintcache
 
 # dependencies
 node_modules

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Refactor source structure for simplification [#164](https://github.com/CartoDB/carto-react-template/issues/164)
 - Add basic e2e tests to both sample-app and skeleton with cypress [#169](https://github.com/CartoDB/carto-react-template/pull/169)
 - Update deck.gl version to 8.4 [#184](https://github.com/CartoDB/carto-react-template/pull/184)
+- Update to CRA4 and React 17 [#186](https://github.com/CartoDB/carto-react-template/pull/186)
 
 ## 1.0.0-beta10 (2021-01-16)
 - Fix missing babel dependencies when using CRA for both templates [#160](https://github.com/CartoDB/carto-react-template/issues/160)

template-sample-app/template.json

@@ -1,60 +1,53 @@
 {
   "package": {
     "dependencies": {
-      "@babel/helper-builder-react-jsx": "^7.10.4",
-      "@babel/plugin-transform-react-jsx": "^7.12.12",
-      "@carto/react": "^1.0.0-beta12",
-      "@formatjs/intl-getcanonicallocales": "^1.5.2",
-      "@formatjs/intl-locale": "^2.4.8",
-      "@formatjs/intl-numberformat": "^6.0.0",
-      "@formatjs/intl-pluralrules": "^4.0.0",
-      "@material-ui/core": "^4.11.0",
-      "@material-ui/icons": "^4.9.1",
-      "@material-ui/lab": "^4.0.0-alpha.56",
+      "@carto/react": "1.0.0-beta12",
+      "@formatjs/intl-getcanonicallocales": "^1.5.3",
+      "@formatjs/intl-locale": "^2.4.14",
+      "@formatjs/intl-numberformat": "^6.1.4",
+      "@formatjs/intl-pluralrules": "^4.0.6",
+      "@material-ui/core": "^4.11.3",
+      "@material-ui/icons": "^4.11.2",
+      "@material-ui/lab": "4.0.0-alpha.57",
       "@reduxjs/toolkit": "^1.5.0",
       "@testing-library/cypress": "^7.0.3",
-      "@testing-library/jest-dom": "^4.2.4",
-      "@testing-library/react": "^9.3.2",
-      "@testing-library/user-event": "^7.1.2",
+      "@testing-library/jest-dom": "^5.11.9",
+      "@testing-library/react": "^11.2.3",
+      "@testing-library/user-event": "^12.6.2",
       "cypress": "^6.3.0",
       "deck.gl": "^8.4.0",
       "echarts": "^4.9.0",
       "echarts-for-react": "^2.0.16",
+      "eslint-config-prettier": "^7.2.0",
+      "eslint-plugin-prettier": "^3.3.1",
+      "firebase-tools": "^9.2.2",
       "history": "^5.0.0",
-      "react": "^16.13.1",
+      "husky": "^4.3.8",
+      "hygen": "^6.0.4",
+      "lint-staged": "^10.5.3",
+      "prettier": "^2.2.1",
+      "react": "^17.0.1",
       "react-app-polyfill": "^2.0.0",
-      "react-dom": "^16.13.1",
-      "react-map-gl": "^5.2.8",
-      "react-redux": "^7.1.3",
+      "react-app-rewired": "^2.1.8",
+      "react-dom": "^17.0.1",
+      "react-is": "^17.0.1",
+      "react-map-gl": "^5.3.0",
+      "react-redux": "^7.2.2",
       "react-router-dom": "^6.0.0-beta.0",
-      "react-scripts": "3.4.3",
-      "eslint-config-prettier": "^6.12.0",
-      "eslint-loader": "^4.0.2",
-      "eslint-plugin-prettier": "^3.1.4",
-      "eslint-plugin-react": "^7.21.2",
-      "husky": "^4.3.0",
-      "lint-staged": "^10.4.0",
-      "prettier": "^2.1.2",
-      "react-app-rewired": "^2.1.6",
-      "hygen": "^6.0.4"
+      "react-scripts": "4.0.1"
     },
     "scripts": {
       "lint": "eslint './src/**/*.{js,jsx}'",
       "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
-      "format": "npx prettier --write \"**/*.+(js|jsx|json|css|md)\"",
+      "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\" --ignore-path .gitignore",
       "hygen": "hygen",
       "updateSupportedBrowsers": "echo \"var browserRegex = $(npx browserslist-useragent-regexp --allowHigherVersions);\" > public/supportedBrowsers.js"
     },
     "eslintConfig": {
-      "extends": "react-app"
+      "extends": ["react-app", "prettier", "prettier/react"]
     },
     "browserslist": {
-      "production": [
-        ">0.2%",
-        "not dead",
-        "not op_mini all",
-        "not explorer 11"
-      ],
+      "production": [">0.2%", "not dead", "not op_mini all", "not explorer 11"],
       "development": [
         "last 1 chrome version",
         "last 1 firefox version",
@@ -67,14 +60,8 @@
       }
     },
     "lint-staged": {
-      "*.+(js|jsx)": [
-        "yarn lint:fix",
-        "git add"
-      ],
-      "*.+(js|jsx|json|css|md)": [
-        "prettier --write",
-        "git add"
-      ]
+      "*.+(js|jsx)": ["yarn lint:fix", "git add"],
+      "*.+(js|jsx|json|css|md)": ["prettier --write", "git add"]
     }
   }
-}
+}

template-sample-app/template/gitignore

@@ -3,6 +3,7 @@
 package.dev.json
 config-overrides.js
 storybook-static
+.eslintcache
 
 # dependencies
 /node_modules

template-sample-app/template/package.dev.json

@@ -3,45 +3,41 @@
   "version": "1.0.0-beta12",
   "private": true,
   "dependencies": {
-    "@carto/react": "^1.0.0-beta12",
-    "@formatjs/intl-getcanonicallocales": "^1.5.2",
-    "@formatjs/intl-locale": "^2.4.8",
-    "@formatjs/intl-numberformat": "^6.0.0",
-    "@formatjs/intl-pluralrules": "^4.0.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@carto/react": "1.0.0-beta12",
+    "@formatjs/intl-getcanonicallocales": "^1.5.3",
+    "@formatjs/intl-locale": "^2.4.14",
+    "@formatjs/intl-numberformat": "^6.1.4",
+    "@formatjs/intl-pluralrules": "^4.0.6",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.57",
     "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/cypress": "^7.0.3",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^12.6.2",
     "cypress": "^6.3.0",
     "deck.gl": "^8.4.0",
     "echarts": "^4.9.0",
     "echarts-for-react": "^2.0.16",
     "history": "^5.0.0",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-app-polyfill": "^2.0.0",
-    "react-dom": "^16.13.1",
-    "react-map-gl": "^5.2.8",
-    "react-redux": "^7.1.3",
+    "react-dom": "^17.0.1",
+    "react-map-gl": "^5.3.0",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^6.0.0-beta.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "babel-loader": "8.1.0",
-    "eslint-config-prettier": "^6.12.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.2",
-    "firebase-tools": "^8.16.2",
-    "husky": "^4.3.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "firebase-tools": "^9.2.2",
+    "husky": "^4.3.8",
     "hygen": "^6.0.4",
-    "lint-staged": "^10.4.0",
-    "prettier": "^2.1.2",
-    "react-app-rewired": "^2.1.6",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
+    "react-app-rewired": "^2.1.8",
     "react-is": "^17.0.1"
   },
   "scripts": {
@@ -52,12 +48,12 @@
     "eject": "react-scripts eject",
     "lint": "eslint './src/**/*.{js,jsx}'",
     "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
-    "format": "npx prettier --write \"**/*.+(js|jsx|json|css|md)\"",
+    "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\" --ignore-path .gitignore",
     "hygen": "hygen",
     "updateSupportedBrowsers": "echo \"var browserRegex = $(npx browserslist-useragent-regexp --allowHigherVersions);\" > public/supportedBrowsers.js"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": ["react-app", "prettier", "prettier/react"]
   },
   "browserslist": {
     "production": [">0.2%", "not dead", "not op_mini all", "not explorer 11"],

template-sample-app/template/public/robots.txt

@@ -1,2 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

template-sample-app/template/src/App.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { useRoutes } from 'react-router-dom';
 

template-sample-app/template/src/components/common/Header.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   AppBar,
   Drawer,
@@ -61,7 +61,7 @@ const NavigationMenu = (props) => {
   const classes = useStyles();
 
   return (
-    <React.Fragment>
+    <>
       <Grid
         container
         direction={vertical ? 'column' : 'row'}
@@ -79,7 +79,7 @@ const NavigationMenu = (props) => {
           {/* Auto import links */}
         </Tabs>
       </Grid>
-    </React.Fragment>
+    </>
   );
 };
 

template-sample-app/template/src/components/common/Isochrone.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import {
   Button,

template-sample-app/template/src/components/common/Map.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import DeckGL from '@deck.gl/react';
 import 'mapbox-gl/dist/mapbox-gl.css';

template-sample-app/template/src/components/common/ZoomControl.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, ButtonGroup, makeStyles } from '@material-ui/core';
 import AddOutlinedIcon from '@material-ui/icons/AddOutlined';

template-sample-app/template/src/components/legends/KpiLegend.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { Grid, Typography, makeStyles } from '@material-ui/core';
 import rgbToHex from '../../utils/rgbToHex';
@@ -32,7 +31,7 @@ export default function KpiLegend() {
   if (!kpiLayer) return null;
 
   return (
-    <React.Fragment>
+    <>
       <Typography className={classes.title} variant='caption'>
         Total revenue
       </Typography>
@@ -54,6 +53,6 @@ export default function KpiLegend() {
           {LABELS[i]}
         </Grid>
       ))}
-    </React.Fragment>
+    </>
   );
 }

template-sample-app/template/src/components/legends/Legend.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import KpiLegend from './KpiLegend';
 import StoresLegend from './StoresLegend';
 import { Paper, makeStyles, useMediaQuery, useTheme } from '@material-ui/core';

template-sample-app/template/src/components/legends/StoresLegend.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { Grid, Typography, makeStyles } from '@material-ui/core';
@@ -34,7 +33,7 @@ export default function StoresLegend() {
   if (!storesLayer) return null;
 
   return (
-    <React.Fragment>
+    <>
       <Typography className={classes.title} variant='caption'>
         Store types
       </Typography>
@@ -55,6 +54,6 @@ export default function StoresLegend() {
           {elem[0]}
         </Grid>
       ))}
-    </React.Fragment>
+    </>
   );
 }

template-sample-app/template/src/components/views/Kpi.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { setBottomSheetOpen, setError } from 'config/appSlice';
 

template-sample-app/template/src/components/views/Main.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -185,10 +185,8 @@ export default function Main() {
   const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
-  const mobileContainer = React.useRef(null);
-  const desktopContainer = React.useRef(null);
-
-  // Auto import useEffect
+  const mobileContainer = useRef(null);
+  const desktopContainer = useRef(null);
 
   // Auto import useEffect
 

template-sample-app/template/src/components/views/NotFound.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Button, Container, Grid, Link, Typography } from '@material-ui/core';
 import { NavLink } from 'react-router-dom';

template-sample-app/template/src/components/views/login/Login.js

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-
+import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   Button,

template-sample-app/template/src/components/views/login/UserMenu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -68,7 +68,7 @@ function UserMenu() {
 
   // Display User menu, with name, avatar + an attached menu for user-related options
   return (
-    <React.Fragment>
+    <>
       <Link
         edge='end'
         aria-label='account of current user'
@@ -105,7 +105,7 @@ function UserMenu() {
         <MenuItem onClick={handleLogout}>Logout</MenuItem>
         <MenuItem onClick={goToCarto}>Go to CARTO</MenuItem>
       </Menu>
-    </React.Fragment>
+    </>
   );
 }
 

template-sample-app/template/src/components/views/login/UserMenuLogin.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Button, Hidden, IconButton } from '@material-ui/core';
 import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';