NextJS 13 upgrade

.gitignore

@@ -227,3 +227,4 @@ tags
 
 # include wordpress tags function
 !src/lib/wordpress/tags
+.yarn/*

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

next.config.js

@@ -1,12 +1,29 @@
+const path = require("path");
+
+const PROJECT_ROOT = process.env.PROJECT_ROOT?.trim();
+const outputFileTracingRoot = PROJECT_ROOT
+  ? path.resolve(__dirname, PROJECT_ROOT)
+  : undefined;
+
 module.exports = {
   experimental: {
-    outputStandalone: true,
+    outputFileTracingRoot,
   },
   images: {
     domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
       ?.map((d) => d.trim())
       ?.filter((d) => d),
+    unoptimized:
+      process.env.NEXT_PUBLIC_IMAGE_UNOPTIMIZED?.trim()?.toLowerCase() ===
+      "true",
   },
+  modularizeImports: {
+    // NOTE: only transform @mui/material and not any of sub-modules e.g. @mui/material/styles.
+    "@mui/material^": {
+      transform: "@mui/material/{{member}}",
+    },
+  },
+  output: "standalone",
   reactStrictMode: false,
   webpack(config) {
     config.module.rules.push({

package.json

@@ -5,7 +5,6 @@
   "author": "Code for Africa <hello@codeforafrica.org> (https://codeforafrica.org)",
   "license": "GPL-3.0-or-later",
   "homepage": "https://dev.pesayetu.pesacheck.org",
-  "private": false,
   "scripts": {
     "dev": "next dev",
     "format": "yarn prettier --write --ignore-path './.gitignore' '**/*.+(json|md|yml)' '.'",
@@ -23,95 +22,97 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.21",
-    "@commons-ui/core": "^0.1.0-alpha.6",
-    "@material-ui/core": "^4.12.1",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/utils": "^4.11.2",
-    "@reactour/tour": "^2.0.0",
-    "@svgr/webpack": "^5.5.0",
+    "@apollo/client": "^3.7.17",
+    "@commons-ui/core": "^0.1.0",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
+    "@mui/lab": "5.0.0-alpha.123",
+    "@mui/material": "^5.12.3",
+    "@mui/styles": "^5.12.3",
+    "@mui/utils": "^5.12.3",
+    "@reactour/tour": "^3.4.0",
     "aws-sdk": "^2.1005.0",
-    "clsx": "^1.1.1",
+    "clsx": "^1.2.1",
     "d3-format": "^3.0.1",
     "deepmerge": "^4.2.2",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.3",
     "lodash": "^4.17.21",
-    "next": "^12.1.0",
+    "next": "~13.3.4",
     "next-images": "^1.8.1",
-    "next-seo": "^4.26.0",
-    "papaparse": "^5.3.1",
+    "next-seo": "^5.15.0",
+    "papaparse": "^5.4.1",
     "plaiceholder": "^2.0.1",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-dom": "^17.0.2",
-    "react-leaflet": "^3.2.0",
+    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-multi-carousel": "^2.6.3",
-    "react-share": "^4.4.0",
+    "react-share": "^4.4.1",
     "react-vega": "^7.4.4",
-    "sharp": "^0.30.5",
-    "simplebar-react": "^2.1.0",
-    "swr": "^1.0.0",
+    "sharp": "^0.31.3",
+    "simplebar-react": "^2.4.3",
+    "swr": "^1.3.0",
     "vega": "^5.23.0",
     "vega-embed": "^6.18.2",
     "vega-lite": "^5.1.1",
     "vega-tooltip": "^0.27.0",
-    "video.js": "^7.14.3",
-    "videojs-youtube": "^2.6.1",
-    "webpack": "^5.76.0",
+    "video.js": "^8.3.0",
+    "videojs-youtube": "^3.0.1",
+    "webpack": "^5.82.0",
     "xlsx": "^0.17.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/eslint-parser": "^7.14.7",
+    "@babel/core": "^7.21.8",
+    "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-env": "^7.21.5",
     "@material-ui/codemod": "^4.5.0",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/client-api": "^6.3.6",
-    "@storybook/components": "^6.3.6",
-    "@storybook/core-events": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@storybook/theming": "^6.3.6",
+    "@storybook/addon-actions": "7.0.8",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-links": "^7.0.8",
+    "@storybook/addons": "^7.0.8",
+    "@storybook/client-api": "^7.0.8",
+    "@storybook/components": "7.0.8",
+    "@storybook/core-events": "7.0.8",
+    "@storybook/react": "7.0.8",
+    "@storybook/theming": "7.0.8",
+    "@svgr/webpack": "^6.5.1",
     "apollo-link-rest": "^0.8.0-beta.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
-    "eslint": "^7.30.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint": "^8.39.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-next": "^11.0.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-babel-module": "^5.3.1",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-json": "^3.0.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.2.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-module-resolver": "^1.4.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "graphql": "^15.5.1",
     "graphql-anywhere": "^4.2.7",
-    "husky": "^7.0.1",
+    "husky": "^8.0.3",
     "jscodeshift": "^0.13.0",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^13.2.0",
     "next-sitemap": "^1.6.192",
-    "prettier": "^2.3.2",
+    "prettier": "^2.8.8",
+    "react-test-renderer": "^18.2.0",
     "storybook-addon-material-ui": "^0.9.0-alpha.24",
     "storybook-addon-next-router": "^3.0.5",
     "svg-url-loader": "^7.1.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.9.5"
   },
   "browserslist": [
     "defaults"
   ],
   "lint-staged": {
     "*.js": [
-      "yarn codemod-staged-optimal-imports",
-      "yarn codemod-staged-top-level-imports",
       "yarn lint-staged"
     ],
     "*.{json,md}": [
@@ -123,6 +124,7 @@
     ]
   },
   "engines": {
-    "node": ">=16.0.0 <17.0.0"
-  }
+    "node": ">=18.0.0"
+  },
+  "packageManager": "yarn@1.22.19"
 }

src/components/AboutHero/index.js

@@ -1,4 +1,4 @@
-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 

src/components/AboutHero/index.stories.js

@@ -6,7 +6,9 @@ export default {
   title: "Sections/AboutHero",
 };
 
-const Template = ({ ...args }) => <AboutHero {...args} />;
+function Template({ ...args }) {
+  return <AboutHero {...args} />;
+}
 
 export const Default = Template.bind({});
 

src/components/AboutHero/useStyles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = makeStyles(({ breakpoints, typography }) => ({
   root: {

src/components/AboutProject/index.js

@@ -1,4 +1,4 @@
-import { Grid, Typography, Button } from "@material-ui/core";
+import { Grid, Typography, Button } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 

src/components/AboutProject/index.stories.js

@@ -6,7 +6,9 @@ export default {
   title: "Sections/AboutProject",
 };
 
-const Template = ({ ...args }) => <AboutProject {...args} />;
+function Template({ ...args }) {
+  return <AboutProject {...args} />;
+}
 
 export const Default = Template.bind({});
 

src/components/AboutProject/useStyles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
   root: {

src/components/AboutTeam/index.js

@@ -1,5 +1,5 @@
-import { Grid, Typography, useMediaQuery } from "@material-ui/core";
-import { useTheme } from "@material-ui/core/styles";
+import { Grid, Typography, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { chunk, uniqueId } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";

src/components/AboutTeam/index.stories.js

@@ -8,7 +8,9 @@ export default {
   title: "Sections/AboutTeam",
 };
 
-const Template = ({ ...args }) => <AboutTeam {...args} />;
+function Template({ ...args }) {
+  return <AboutTeam {...args} />;
+}
 
 export const Default = Template.bind({});
 

src/components/AboutTeam/useStyles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles";
+import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({
   root: {

src/components/Button/index.stories.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import React from "react";
 
 export default {
@@ -36,7 +36,9 @@ export default {
   },
 };
 
-const Template = ({ label, ...args }) => <Button {...args}>{label}</Button>;
+function Template({ label, ...args }) {
+  return <Button {...args}>{label}</Button>;
+}
 
 export const Default = Template.bind({});
 

src/components/Card/ActionArea.js

@@ -1,5 +1,5 @@
-import { CardActionArea } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { CardActionArea } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";
 

src/components/Card/Content.js

@@ -1,6 +1,6 @@
 import { RichTypography } from "@commons-ui/core";
-import { CardContent } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { CardContent } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
@@ -25,7 +25,7 @@ const useStyles = makeStyles(({ typography }) => ({
   },
 }));
 
-const Content = ({
+function Content({
   className,
   description,
   descriptionProps,
@@ -35,7 +35,7 @@ const Content = ({
   ctaText,
   linkProps,
   ...props
-}) => {
+}) {
   const classes = useStyles(props);
   if (!(title || description || href)) {
     return null;
@@ -66,7 +66,7 @@ const Content = ({
       )}
     </CardContent>
   );
-};
+}
 
 Content.propTypes = {
   className: PropTypes.string,

src/components/Card/Media.js

@@ -1,5 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -71,13 +71,7 @@ function Media({
   }
   return (
     <div className={classes.root}>
-      <Image
-        layout="fill"
-        src={media}
-        unoptimized
-        {...imageProps}
-        className={classes.image}
-      />
+      <Image layout="fill" src={media} unoptimized className={classes.image} />
     </div>
   );
 }

src/components/Card/index.js

@@ -1,4 +1,4 @@
-import { Card as MuiCard } from "@material-ui/core";
+import { Card as MuiCard } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
@@ -8,7 +8,7 @@ import CardContent from "./Content";
 import CardMedia from "./Media";
 import useStyles from "./useStyles";
 
-const Card = ({
+function Card({
   chart,
   children,
   className,
@@ -27,7 +27,7 @@ const Card = ({
   titleProps,
   variant,
   ...props
-}) => {
+}) {
   const squareMedia = mediaProps?.square;
   const classes = useStyles({ ...props, squareMedia });
   const actionAreaProps = { href, onClick };
@@ -73,7 +73,7 @@ const Card = ({
       </CardActionArea>
     </MuiCard>
   );
-};
+}
 
 Card.propTypes = {
   chart: PropTypes.string,