diff --git a/.gitignore b/.gitignore index 7568f69cb..05c6817d3 100644 --- a/.gitignore +++ b/.gitignore @@ -227,3 +227,4 @@ tags # include wordpress tags function !src/lib/wordpress/tags +.yarn/* \ No newline at end of file diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 000000000..3186f3f07 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/next.config.js b/next.config.js index f865fc776..13c68dcb1 100644 --- a/next.config.js +++ b/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({ diff --git a/package.json b/package.json index 3023bf25b..705bc8593 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "author": "Code for Africa (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" } diff --git a/src/components/AboutHero/index.js b/src/components/AboutHero/index.js index d880c3eb7..428d2205d 100644 --- a/src/components/AboutHero/index.js +++ b/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"; diff --git a/src/components/AboutHero/index.stories.js b/src/components/AboutHero/index.stories.js index b68dad9ec..c2a40e98a 100644 --- a/src/components/AboutHero/index.stories.js +++ b/src/components/AboutHero/index.stories.js @@ -6,7 +6,9 @@ export default { title: "Sections/AboutHero", }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/AboutHero/useStyles.js b/src/components/AboutHero/useStyles.js index 5e5a13b96..5d5800010 100644 --- a/src/components/AboutHero/useStyles.js +++ b/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: { diff --git a/src/components/AboutProject/index.js b/src/components/AboutProject/index.js index c8cd93d2c..29344b57a 100644 --- a/src/components/AboutProject/index.js +++ b/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"; diff --git a/src/components/AboutProject/index.stories.js b/src/components/AboutProject/index.stories.js index 71906fdba..f7eddec1f 100644 --- a/src/components/AboutProject/index.stories.js +++ b/src/components/AboutProject/index.stories.js @@ -6,7 +6,9 @@ export default { title: "Sections/AboutProject", }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/AboutProject/useStyles.js b/src/components/AboutProject/useStyles.js index d7f200c81..3a8bc6d73 100644 --- a/src/components/AboutProject/useStyles.js +++ b/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: { diff --git a/src/components/AboutTeam/index.js b/src/components/AboutTeam/index.js index ef9ee5753..456fce63e 100644 --- a/src/components/AboutTeam/index.js +++ b/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"; diff --git a/src/components/AboutTeam/index.stories.js b/src/components/AboutTeam/index.stories.js index b0a3e4236..5ceb71a26 100644 --- a/src/components/AboutTeam/index.stories.js +++ b/src/components/AboutTeam/index.stories.js @@ -8,7 +8,9 @@ export default { title: "Sections/AboutTeam", }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/AboutTeam/useStyles.js b/src/components/AboutTeam/useStyles.js index 77a779f27..c5b361ba5 100644 --- a/src/components/AboutTeam/useStyles.js +++ b/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: { diff --git a/src/components/Button/index.stories.js b/src/components/Button/index.stories.js index 95818c29c..99fb75f6e 100644 --- a/src/components/Button/index.stories.js +++ b/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 }) => ; +function Template({ label, ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/Card/ActionArea.js b/src/components/Card/ActionArea.js index a7e720616..32b588a06 100644 --- a/src/components/Card/ActionArea.js +++ b/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"; diff --git a/src/components/Card/Content.js b/src/components/Card/Content.js index 10939802d..0b277f119 100644 --- a/src/components/Card/Content.js +++ b/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 = ({ )} ); -}; +} Content.propTypes = { className: PropTypes.string, diff --git a/src/components/Card/Media.js b/src/components/Card/Media.js index fd8fd7114..0e367f0b3 100644 --- a/src/components/Card/Media.js +++ b/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 (
- +
); } diff --git a/src/components/Card/index.js b/src/components/Card/index.js index d293d180b..73fac0eb4 100644 --- a/src/components/Card/index.js +++ b/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 = ({ ); -}; +} Card.propTypes = { chart: PropTypes.string, diff --git a/src/components/Card/index.stories.js b/src/components/Card/index.stories.js index c9e981f56..704590bd0 100644 --- a/src/components/Card/index.stories.js +++ b/src/components/Card/index.stories.js @@ -19,12 +19,12 @@ export default { }, }; -const Template = ({ card }) => { +function Template({ card }) { const args = card === "insight" ? insightItem : teamItem; const mediaProps = card === "insight" ? undefined : { square: true }; return ; -}; +} export const Default = Template.bind({}); diff --git a/src/components/Card/useStyles.js b/src/components/Card/useStyles.js index 8d3a556e5..0910736eb 100644 --- a/src/components/Card/useStyles.js +++ b/src/components/Card/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: ({ squareMedia }) => ({ diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js index 2b500f852..285b355e7 100644 --- a/src/components/Carousel/index.js +++ b/src/components/Carousel/index.js @@ -1,4 +1,4 @@ -import { deepmerge } from "@material-ui/utils"; +import { deepmerge } from "@mui/utils"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Carousel/useStyles.js b/src/components/Carousel/useStyles.js index 0701bf54f..1a22978d4 100644 --- a/src/components/Carousel/useStyles.js +++ b/src/components/Carousel/useStyles.js @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from "@mui/styles/makeStyles"; const useStyles = makeStyles(({ palette, typography }) => ({ root: {}, diff --git a/src/components/DataIndicators/Icon.js b/src/components/DataIndicators/Icon.js index 47c522d00..7091a82de 100644 --- a/src/components/DataIndicators/Icon.js +++ b/src/components/DataIndicators/Icon.js @@ -1,11 +1,11 @@ -import { ButtonBase, Typography } from "@material-ui/core"; +import { ButtonBase, Typography } from "@mui/material"; import Image from "next/image"; import PropTypes from "prop-types"; import React from "react"; import useStyles from "./useStyles"; -const Icon = ({ item, handleIconClick, currentItemIndex, index, ...props }) => { +function Icon({ item, handleIconClick, currentItemIndex, index, ...props }) { const classes = useStyles(props); const { title, image, hover } = item; @@ -17,7 +17,7 @@ const Icon = ({ item, handleIconClick, currentItemIndex, index, ...props }) => { {title} ); -}; +} Icon.propTypes = { handleIconClick: PropTypes.func, diff --git a/src/components/DataIndicators/IndicatorPanel.js b/src/components/DataIndicators/IndicatorPanel.js index 2b9207564..e6e93855c 100644 --- a/src/components/DataIndicators/IndicatorPanel.js +++ b/src/components/DataIndicators/IndicatorPanel.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { ButtonBase, Slide } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +import { ButtonBase, Slide } from "@mui/material"; +import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/DataIndicators/index.js b/src/components/DataIndicators/index.js index 5c4a5c59f..7218986f3 100644 --- a/src/components/DataIndicators/index.js +++ b/src/components/DataIndicators/index.js @@ -4,8 +4,8 @@ import { Dialog, Slide, useMediaQuery, -} from "@material-ui/core"; -import { useTheme } from "@material-ui/core/styles"; +} from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import clsx from "clsx"; import PropTypes from "prop-types"; import React, { useState } from "react"; diff --git a/src/components/DataIndicators/index.stories.js b/src/components/DataIndicators/index.stories.js index 71dd6052a..57b1af532 100644 --- a/src/components/DataIndicators/index.stories.js +++ b/src/components/DataIndicators/index.stories.js @@ -9,7 +9,9 @@ export default { title: "Sections/DataIndicators", }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/DataIndicators/useStyles.js b/src/components/DataIndicators/useStyles.js index e55928e58..eb2deb203 100644 --- a/src/components/DataIndicators/useStyles.js +++ b/src/components/DataIndicators/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: { diff --git a/src/components/DataSources/index.js b/src/components/DataSources/index.js index 641973d6a..10c200358 100644 --- a/src/components/DataSources/index.js +++ b/src/components/DataSources/index.js @@ -1,4 +1,4 @@ -import { Grid, Typography } from "@material-ui/core"; +import { Grid, Typography } from "@mui/material"; import Image from "next/image"; import PropTypes from "prop-types"; import React from "react"; @@ -9,7 +9,7 @@ import Header from "@/pesayetu/components/Header"; import Link from "@/pesayetu/components/Link"; import Section from "@/pesayetu/components/Section"; -const DataSources = ({ items, title, subtitle, image, ...props }) => { +function DataSources({ items, title, subtitle, image, ...props }) { const classes = useStyles(props); if (!items || !items.length) { @@ -45,7 +45,7 @@ const DataSources = ({ items, title, subtitle, image, ...props }) => { ); -}; +} DataSources.propTypes = { items: PropTypes.arrayOf( diff --git a/src/components/DataSources/index.stories.js b/src/components/DataSources/index.stories.js index f37171dfb..5537b8927 100644 --- a/src/components/DataSources/index.stories.js +++ b/src/components/DataSources/index.stories.js @@ -6,7 +6,9 @@ export default { title: "Sections/DataSources", }; -const Template = (args) => ; +function Template(args) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/DataSources/useStyles.js b/src/components/DataSources/useStyles.js index eeab555fb..d7412b00f 100644 --- a/src/components/DataSources/useStyles.js +++ b/src/components/DataSources/useStyles.js @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from "@mui/styles/makeStyles"; const useStyles = makeStyles(({ typography, palette }) => ({ root: { diff --git a/src/components/DataVisualisationGuide/index.js b/src/components/DataVisualisationGuide/index.js index dbdc77eee..248983f7a 100644 --- a/src/components/DataVisualisationGuide/index.js +++ b/src/components/DataVisualisationGuide/index.js @@ -1,6 +1,6 @@ import { RichTypography } from "@commons-ui/core"; -import { Grid, Hidden, useMediaQuery } from "@material-ui/core"; -import { useTheme } from "@material-ui/core/styles"; +import { Box, Grid, useMediaQuery } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import React from "react"; @@ -24,7 +24,14 @@ function DataVisualisationGuide({ title, items, ...props }) { {title} - + {items.map(({ imageProps, ...item }) => ( ))} - - - + + {items.map(({ imageProps, ...item }) => ( @@ -55,7 +68,7 @@ function DataVisualisationGuide({ title, items, ...props }) { ))} - + ); diff --git a/src/components/DataVisualisationGuide/index.stories.js b/src/components/DataVisualisationGuide/index.stories.js index e9b7a75d8..b0380b071 100644 --- a/src/components/DataVisualisationGuide/index.stories.js +++ b/src/components/DataVisualisationGuide/index.stories.js @@ -9,7 +9,9 @@ export default { title: "Sections/DataVisualisationGuide", }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/DataVisualisationGuide/useStyles.js b/src/components/DataVisualisationGuide/useStyles.js index abb0db386..3233946cc 100644 --- a/src/components/DataVisualisationGuide/useStyles.js +++ b/src/components/DataVisualisationGuide/useStyles.js @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from "@mui/styles/makeStyles"; const useStyles = makeStyles(({ typography, breakpoints }) => ({ root: { diff --git a/src/components/DatasetsAndDocuments/index.stories.js b/src/components/DatasetsAndDocuments/index.stories.js index d95f0f2df..a2f29c554 100644 --- a/src/components/DatasetsAndDocuments/index.stories.js +++ b/src/components/DatasetsAndDocuments/index.stories.js @@ -16,7 +16,9 @@ export default { }, }; -const Template = (args) => ; +function Template(args) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/DatasetsAndDocuments/useStyles.js b/src/components/DatasetsAndDocuments/useStyles.js index 3c2e39d21..402611c07 100644 --- a/src/components/DatasetsAndDocuments/useStyles.js +++ b/src/components/DatasetsAndDocuments/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: { diff --git a/src/components/DropdownSearch/index.js b/src/components/DropdownSearch/index.js index da6f1783d..c2a973ccd 100644 --- a/src/components/DropdownSearch/index.js +++ b/src/components/DropdownSearch/index.js @@ -4,8 +4,8 @@ import { Typography, List, ListItem, -} from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +} from "@mui/material"; +import makeStyles from "@mui/styles/makeStyles"; import Image from "next/image"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; diff --git a/src/components/DropdownSearch/index.stories.js b/src/components/DropdownSearch/index.stories.js index c563e81bd..c749b98af 100644 --- a/src/components/DropdownSearch/index.stories.js +++ b/src/components/DropdownSearch/index.stories.js @@ -20,7 +20,9 @@ export default { }, }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/ExploreOtherTools/index.js b/src/components/ExploreOtherTools/index.js index 72cd99054..6363c1870 100644 --- a/src/components/ExploreOtherTools/index.js +++ b/src/components/ExploreOtherTools/index.js @@ -1,4 +1,4 @@ -import { Grid, Hidden, Typography } from "@material-ui/core"; +import { Box, Grid, Typography } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; @@ -8,7 +8,7 @@ import Card from "@/pesayetu/components/Card"; import Carousel from "@/pesayetu/components/Carousel"; import Section from "@/pesayetu/components/Section"; -const ExploreOtherTools = ({ title, items, ...props }) => { +function ExploreOtherTools({ title, items, ...props }) { const classes = useStyles(props); if (!items?.length) { @@ -20,7 +20,14 @@ const ExploreOtherTools = ({ title, items, ...props }) => { {title} - + {items.map(({ imageProps, ...item }) => ( { /> ))} - - + + {items.slice(0, 4).map(({ imageProps, ...item }) => ( @@ -57,11 +71,11 @@ const ExploreOtherTools = ({ title, items, ...props }) => { ))} - + ); -}; +} ExploreOtherTools.propTypes = { items: PropTypes.arrayOf(PropTypes.shape({})), diff --git a/src/components/ExploreOtherTools/index.stories.js b/src/components/ExploreOtherTools/index.stories.js index 1d2b39821..cfa695663 100644 --- a/src/components/ExploreOtherTools/index.stories.js +++ b/src/components/ExploreOtherTools/index.stories.js @@ -9,7 +9,9 @@ export default { title: "Sections/ExploreOtherTools", }; -const Template = ({ ...args }) => ; +function Template({ ...args }) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/ExploreOtherTools/useStyles.js b/src/components/ExploreOtherTools/useStyles.js index f9a435419..15319e15d 100644 --- a/src/components/ExploreOtherTools/useStyles.js +++ b/src/components/ExploreOtherTools/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: { diff --git a/src/components/ExplorePage/index.js b/src/components/ExplorePage/index.js index c4f4067eb..07eb9cf16 100644 --- a/src/components/ExplorePage/index.js +++ b/src/components/ExplorePage/index.js @@ -1,4 +1,4 @@ -import { Hidden } from "@material-ui/core"; +import { Box } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -112,7 +112,14 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { } return ( <> - +
- + ({ diff --git a/src/components/FeaturedStoryCard/index.js b/src/components/FeaturedStoryCard/index.js index 72eb22d35..3f4100e91 100644 --- a/src/components/FeaturedStoryCard/index.js +++ b/src/components/FeaturedStoryCard/index.js @@ -1,4 +1,4 @@ -import { Grid } from "@material-ui/core"; +import { Grid } from "@mui/material"; import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/FeaturedStoryCard/index.stories.js b/src/components/FeaturedStoryCard/index.stories.js index 05fd7991f..bd6be43d6 100644 --- a/src/components/FeaturedStoryCard/index.stories.js +++ b/src/components/FeaturedStoryCard/index.stories.js @@ -41,7 +41,9 @@ export default { }, }; -const Template = (args) => ; +function Template(args) { + return ; +} export const Default = Template.bind({}); diff --git a/src/components/FeaturedStoryCard/useStyles.js b/src/components/FeaturedStoryCard/useStyles.js index 3688ff11c..d8425ec6b 100644 --- a/src/components/FeaturedStoryCard/useStyles.js +++ b/src/components/FeaturedStoryCard/useStyles.js @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles"; +import makeStyles from "@mui/styles/makeStyles"; const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({ root: { diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index e7ce5f66b..bed142932 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -7,7 +7,7 @@ import { LogoButton, Copyright, } from "@commons-ui/core"; -import { Grid } from "@material-ui/core"; +import { Grid } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; diff --git a/src/components/Footer/index.stories.js b/src/components/Footer/index.stories.js index 506a2f2e7..c36aadd30 100644 --- a/src/components/Footer/index.stories.js +++ b/src/components/Footer/index.stories.js @@ -47,7 +47,9 @@ export default { }, }; -const Template = ({ ...args }) =>