Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.

NextJS 13 upgrade #229

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -227,3 +227,4 @@ tags

# include wordpress tags function
!src/lib/wordpress/tags
.yarn/*
1 change: 1 addition & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
nodeLinker: node-modules
19 changes: 18 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
@@ -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({
112 changes: 57 additions & 55 deletions package.json
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@
"author": "Code for Africa <[email protected]> (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": "[email protected]"
}
2 changes: 1 addition & 1 deletion src/components/AboutHero/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Grid } from "@material-ui/core";
import { Grid } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";

4 changes: 3 additions & 1 deletion src/components/AboutHero/index.stories.js
Original file line number Diff line number Diff line change
@@ -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({});

2 changes: 1 addition & 1 deletion src/components/AboutHero/useStyles.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles(({ breakpoints, typography }) => ({
root: {
2 changes: 1 addition & 1 deletion src/components/AboutProject/index.js
Original file line number Diff line number Diff line change
@@ -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";

4 changes: 3 additions & 1 deletion src/components/AboutProject/index.stories.js
Original file line number Diff line number Diff line change
@@ -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({});

2 changes: 1 addition & 1 deletion src/components/AboutProject/useStyles.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
root: {
4 changes: 2 additions & 2 deletions src/components/AboutTeam/index.js
Original file line number Diff line number Diff line change
@@ -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";
4 changes: 3 additions & 1 deletion src/components/AboutTeam/index.stories.js
Original file line number Diff line number Diff line change
@@ -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({});

2 changes: 1 addition & 1 deletion src/components/AboutTeam/useStyles.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({
root: {
6 changes: 4 additions & 2 deletions src/components/Button/index.stories.js
Original file line number Diff line number Diff line change
@@ -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({});

4 changes: 2 additions & 2 deletions src/components/Card/ActionArea.js
Original file line number Diff line number Diff line change
@@ -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";

10 changes: 5 additions & 5 deletions src/components/Card/Content.js
Original file line number Diff line number Diff line change
@@ -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,
10 changes: 2 additions & 8 deletions src/components/Card/Media.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 4 additions & 4 deletions src/components/Card/index.js
Original file line number Diff line number Diff line change
@@ -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,
Loading