Merge pull request #228 from CodeForAfrica/revert-215-ft/check-common…

…s-ui

Revert "Upgrade to MUI 5"

.gitignore

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

package.json

@@ -5,6 +5,7 @@
   "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,14 +24,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.21",
-    "@commons-ui/core": "^0.1.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/lab": "^5.0.0-alpha.99",
-    "@mui/material": "^5.10.5",
-    "@mui/styles": "^5.10.3",
-    "@mui/utils": "^5.10.3",
-    "@reactour/tour": "^3.4.0",
+    "@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",
     "aws-sdk": "^2.1005.0",
     "clsx": "^1.1.1",
@@ -112,6 +110,8 @@
   ],
   "lint-staged": {
     "*.js": [
+      "yarn codemod-staged-optimal-imports",
+      "yarn codemod-staged-top-level-imports",
       "yarn lint-staged"
     ],
     "*.{json,md}": [
@@ -123,7 +123,6 @@
     ]
   },
   "engines": {
-    "node": ">=18.0.0"
-  },
-  "packageManager": "yarn@1.22.19"
+    "node": ">=16.0.0 <17.0.0"
+  }
 }

src/components/AboutHero/index.js

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

src/components/AboutHero/useStyles.js

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

src/components/AboutProject/index.js

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

src/components/AboutProject/useStyles.js

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

src/components/AboutTeam/index.js

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

src/components/AboutTeam/useStyles.js

@@ -1,4 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "@material-ui/core/styles";
 
 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 "@mui/material";
+import { Button } from "@material-ui/core";
 import React from "react";
 
 export default {

src/components/Card/ActionArea.js

@@ -1,5 +1,5 @@
-import { CardActionArea } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { CardActionArea } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 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 "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { CardContent } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";

src/components/Card/Media.js

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

src/components/Card/index.js

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

src/components/Card/useStyles.js

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

src/components/Carousel/index.js

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

src/components/Carousel/useStyles.js

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

src/components/DataIndicators/Icon.js

@@ -1,4 +1,4 @@
-import { ButtonBase, Typography } from "@mui/material";
+import { ButtonBase, Typography } from "@material-ui/core";
 import Image from "next/image";
 import PropTypes from "prop-types";
 import React from "react";

src/components/DataIndicators/IndicatorPanel.js

@@ -1,6 +1,6 @@
 import { RichTypography } from "@commons-ui/core";
-import { ButtonBase, Slide } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { ButtonBase, Slide } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 import PropTypes from "prop-types";
 import React from "react";
 

src/components/DataIndicators/index.js

@@ -4,8 +4,8 @@ import {
   Dialog,
   Slide,
   useMediaQuery,
-} from "@mui/material";
-import { useTheme } from "@mui/material/styles";
+} from "@material-ui/core";
+import { useTheme } from "@material-ui/core/styles";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useState } from "react";

src/components/DataIndicators/useStyles.js

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

src/components/DataSources/index.js

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

src/components/DataSources/useStyles.js

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

src/components/DataVisualisationGuide/index.js

@@ -1,6 +1,6 @@
 import { RichTypography } from "@commons-ui/core";
-import { Box, Grid, useMediaQuery } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
+import { Grid, Hidden, useMediaQuery } from "@material-ui/core";
+import { useTheme } from "@material-ui/core/styles";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -24,14 +24,7 @@ function DataVisualisationGuide({ title, items, ...props }) {
         <RichTypography component="h4" variant="h4" className={classes.title}>
           {title}
         </RichTypography>
-        <Box
-          sx={{
-            display: {
-              xs: "none",
-              md: "block",
-            },
-          }}
-        >
+        <Hidden smDown implementation="css">
           <Carousel showDots={!isDesktop}>
             {items.map(({ imageProps, ...item }) => (
               <Card
@@ -45,15 +38,9 @@ function DataVisualisationGuide({ title, items, ...props }) {
               />
             ))}
           </Carousel>
-        </Box>
-        <Box
-          sx={{
-            display: {
-              xs: "block",
-              md: "none",
-            },
-          }}
-        >
+        </Hidden>
+
+        <Hidden mdUp implementation="css">
           <Grid container className={classes.container}>
             {items.map(({ imageProps, ...item }) => (
               <Grid item xs={12} key={item.image}>
@@ -68,7 +55,7 @@ function DataVisualisationGuide({ title, items, ...props }) {
               </Grid>
             ))}
           </Grid>
-        </Box>
+        </Hidden>
       </Section>
     </div>
   );

src/components/DataVisualisationGuide/useStyles.js

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

src/components/DatasetsAndDocuments/useStyles.js

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

src/components/DropdownSearch/index.js

@@ -4,8 +4,8 @@ import {
   Typography,
   List,
   ListItem,
-} from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";

src/components/ExploreOtherTools/index.js

@@ -1,4 +1,4 @@
-import { Box, Grid, Typography } from "@mui/material";
+import { Grid, Hidden, Typography } from "@material-ui/core";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -20,14 +20,7 @@ const ExploreOtherTools = ({ title, items, ...props }) => {
         <Typography variant="h4" className={classes.title}>
           {title}
         </Typography>
-        <Box
-          sx={{
-            display: {
-              xs: "block",
-              lg: "none",
-            },
-          }}
-        >
+        <Hidden lgUp implementation="css">
           <Carousel>
             {items.map(({ imageProps, ...item }) => (
               <Card
@@ -44,15 +37,8 @@ const ExploreOtherTools = ({ title, items, ...props }) => {
               />
             ))}
           </Carousel>
-        </Box>
-        <Box
-          sx={{
-            display: {
-              xs: "none",
-              lg: "block",
-            },
-          }}
-        >
+        </Hidden>
+        <Hidden mdDown implementation="css">
           <Grid container className={classes.list}>
             {items.slice(0, 4).map(({ imageProps, ...item }) => (
               <Grid item lg={3} key={item.href}>
@@ -71,7 +57,7 @@ const ExploreOtherTools = ({ title, items, ...props }) => {
               </Grid>
             ))}
           </Grid>
-        </Box>
+        </Hidden>
       </Section>
     </div>
   );

src/components/ExploreOtherTools/useStyles.js

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

src/components/ExplorePage/index.js

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Hidden } from "@material-ui/core";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
@@ -112,14 +112,7 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) {
   }
   return (
     <>
-      <Box
-        sx={{
-          display: {
-            xs: "none",
-            lg: "block",
-          },
-        }}
-      >
+      <Hidden mdDown implementation="css">
         <div className={classes.root}>
           <Map
             center={[0.3051933453207569, 37.908818734483155]}
@@ -141,7 +134,7 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) {
             className={classes.location}
           />
         </div>
-      </Box>
+      </Hidden>
       <Panel
         {...props}
         isCompare={state.isCompare}

src/components/ExplorePage/useStyles.js

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

src/components/FeaturedStoryCard/index.js

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

src/components/FeaturedStoryCard/useStyles.js

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

src/components/Footer/index.js

@@ -7,7 +7,7 @@ import {
   LogoButton,
   Copyright,
 } from "@commons-ui/core";
-import { Grid } from "@mui/material";
+import { Grid } from "@material-ui/core";
 import PropTypes from "prop-types";
 import React from "react";
 

src/components/Footer/useStyles.js

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

src/components/HURUmap/CategoryHeader/index.js

@@ -1,5 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
-import { Typography } from "@mui/material";
+import { Typography } from "@material-ui/core";
 import PropTypes from "prop-types";
 import React from "react";
 

src/components/HURUmap/CategoryHeader/useStyles.js

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