Merge branch 'main' into chore/build-arm-image

apps/climatemappedafrica/eslint.webpack.config.js

@@ -19,7 +19,6 @@ module.exports = {
   resolve: {
     alias: {
       "@/climatemappedafrica": path.resolve(__dirname, "src/"),
-      content: path.resolve(__dirname, "content/"),
     },
     extensions: [".js"],
   },

apps/climatemappedafrica/jest.config.js

@@ -11,6 +11,8 @@ module.exports = {
       "<rootDir>/../../packages/commons-ui-core/src/$1",
     "^@/commons-ui/next/(.*)$":
       "<rootDir>/../../packages/commons-ui-next/src/$1",
+    "^@/commons-ui/payload/(.*)$":
+      "<rootDir>/../../packages/commons-ui-payload/src/$1",
   },
   transformIgnorePatterns: ["<rootDir>/node_modules/(?!camelcase-keys)"],
 };

apps/climatemappedafrica/jsconfig.json

@@ -5,6 +5,7 @@
       "@/climatemappedafrica/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
       "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"],
       "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
       "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
     }

apps/climatemappedafrica/next.config.js

@@ -28,6 +28,7 @@ module.exports = {
   transpilePackages: [
     "@commons-ui/core",
     "@commons-ui/next",
+    "@commons-ui/payload",
     "@hurumap/core",
     "@hurumap/next",
   ],

apps/climatemappedafrica/package.json

@@ -41,10 +41,10 @@
     "@emotion/styled": "catalog:",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
-    "@mui/lab": "catalog:mui-styles",
     "@mui/material": "catalog:mui-styles",
     "@mui/styles": "catalog:mui-styles",
     "@mui/utils": "catalog:mui-styles",
+    "@mui/x-tree-view": "catalog:",
     "@next/env": "catalog:",
     "@payloadcms/bundler-webpack": "catalog:",
     "@payloadcms/db-mongodb": "catalog:",
@@ -78,6 +78,7 @@
     "react-vega": "catalog:",
     "sharp": "catalog:",
     "simplebar-react": "catalog:",
+    "slate": "catalog:",
     "swr": "catalog:",
     "vega": "catalog:",
     "vega-embed": "catalog:",

apps/climatemappedafrica/payload.config.ts

@@ -16,6 +16,7 @@ import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
 import Users from "./src/payload/collections/Users";
 
+import HURUMap from "./src/payload/globals/HURUMap";
 import Site from "./src/payload/globals/site";
 
 const projectDir = process.cwd();
@@ -65,7 +66,7 @@ export default buildConfig({
     // Settings
     Users,
   ] as CollectionConfig[],
-  globals: [Site] as GlobalConfig[],
+  globals: [HURUMap, Site] as GlobalConfig[],
   ...(locales?.length
     ? {
         localization: {

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js

@@ -76,7 +76,7 @@ function AboutTeam({ title, members: membersProp, ...props }) {
               key={uniqueId("team-chunk-")}
             >
               {membersChunks.map((member) => (
-                <Grid item key={title}>
+                <Grid item key={member.title}>
                   <Card {...member} mediaProps={{ square: true }} />
                 </Grid>
               ))}

apps/climatemappedafrica/src/components/Card/ActionArea.js

@@ -43,10 +43,4 @@ ActionArea.propTypes = {
   onClick: PropTypes.func,
 };
 
-ActionArea.defaultProps = {
-  children: undefined,
-  href: undefined,
-  onClick: undefined,
-};
-
 export default ActionArea;

apps/climatemappedafrica/src/components/Card/Card.js

@@ -1,6 +1,5 @@
 import { Link } from "@commons-ui/next";
 import { Card as MuiCard } from "@mui/material";
-import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -28,6 +27,7 @@ function Card({
   title,
   titleProps,
   variant,
+  sx,
   ...props
 }) {
   const squareMedia = mediaProps?.square;
@@ -43,7 +43,29 @@ function Card({
   };
 
   return (
-    <MuiCard elevation={0} square className={clsx(classes.root, className)}>
+    <MuiCard
+      elevation={0}
+      square
+      sx={(theme) => ({
+        backgroundColor: "inherit",
+        boxShadow: "none",
+        borderRadius: 0,
+        padding: {
+          xs: squareMedia ? `0 ${theme.typography.pxToRem(36)}` : 0,
+          md: 0,
+        },
+        minWidth: {
+          xs: theme.typography.pxToRem(350),
+          md: "unset",
+        },
+        width: {
+          xs: "100%",
+          md: theme.typography.pxToRem(squareMedia ? 278 : 296),
+          lg: theme.typography.pxToRem(squareMedia ? 278 : 376),
+        },
+        ...sx,
+      })}
+    >
       <CardActionArea
         {...actionAreaProps}
         classes={{

apps/climatemappedafrica/src/components/Card/Card.snap.js

@@ -3,7 +3,7 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root makeStyles-root-1 makeStyles-root-11 css-1rw30ef-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;

apps/climatemappedafrica/src/components/Card/Content.js

@@ -1,4 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
+import { RichText } from "@commons-ui/payload";
 import { CardContent } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import clsx from "clsx";
@@ -44,13 +45,22 @@ function Content({
       <RichTypography variant="h5" {...titleProps} className={classes.title}>
         {title}
       </RichTypography>
-      <RichTypography
-        variant="subtitle2"
-        {...descriptionProps}
-        className={classes.description}
-      >
-        {description}
-      </RichTypography>
+      {/* Support for rich text while keeping backwards compatibility */}
+      {Array.isArray(description) ? (
+        <RichText
+          {...descriptionProps}
+          className={classes.description}
+          elements={description}
+        />
+      ) : (
+        <RichTypography
+          variant="subtitle2"
+          {...descriptionProps}
+          className={classes.description}
+        >
+          {description}
+        </RichTypography>
+      )}
     </CardContent>
   );
 }

apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js

@@ -0,0 +1,164 @@
+import { Box, ClickAwayListener, Grid, Slide } from "@mui/material";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+
+import Icon from "./Icon";
+import IndicatorPanel from "./IndicatorPanel";
+
+import bg from "@/climatemappedafrica/assets/images/Mask Group 8.png";
+import Image from "@/climatemappedafrica/components/Image";
+import RichHeader from "@/climatemappedafrica/components/RichHeader";
+
+function DataIndicators({ indicators, title }) {
+  const [checked, setChecked] = useState(false);
+  const [currentItemIndex, setCurrentItemIndex] = useState(null);
+
+  if (!indicators?.length) {
+    return null;
+  }
+  const handleIconClick = (index) => {
+    setCurrentItemIndex(index);
+    setChecked(true);
+  };
+  const resetItemClick = () => {
+    setChecked(false);
+    setCurrentItemIndex(null);
+  };
+  const currentItem = indicators[currentItemIndex];
+  const panelProps = {
+    in: checked,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    component: Slide,
+    direction: "left",
+    timeout: 300,
+    sx: ({ palette, typography }) => ({
+      position: "absolute",
+      right: 0,
+      top: { lg: 0, xs: typography.pxToRem(124) },
+      backgroundColor: palette.primary.main,
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+      flexDirection: "column",
+      color: palette.text.secondary,
+      margin: { xs: "auto 0" },
+      width: { lg: typography.pxToRem(480), xs: typography.pxToRem(390) },
+      height: {
+        xs: typography.pxToRem(528),
+        lg: typography.pxToRem(600),
+      },
+      padding: {
+        xs: typography.pxToRem(15),
+        md: `${typography.pxToRem(50)} ${typography.pxToRem(36)}`,
+        lg: `${typography.pxToRem(76)} ${typography.pxToRem(84)}`,
+      },
+    }),
+  };
+
+  return (
+    <Box
+      sx={({ typography }) => ({
+        backgroundColor: "#F0F0F0",
+        height: { xs: typography.pxToRem(672), lg: typography.pxToRem(600) },
+        position: "relative",
+      })}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Image objectFit="cover" src={bg} layout="fill" />
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          overflow: "hidden",
+          position: { lg: "relative" },
+        }}
+      >
+        <Box
+          sx={({ typography }) => ({
+            width: "100%",
+            height: {
+              xs: typography.pxToRem(672),
+              lg: typography.pxToRem(600),
+            },
+            transition: "width 0.3s ease-out",
+            ...(checked && {
+              width: { md: "calc(100% - 355px)", lg: "calc(100% - 480px)" },
+            }),
+          })}
+        >
+          <RichHeader
+            TitleProps={{
+              sx: {
+                width: "100%",
+                textAlign: "center",
+                padding: `40px 0`,
+              },
+            }}
+          >
+            {title}
+          </RichHeader>
+          <ClickAwayListener onClickAway={resetItemClick}>
+            <Grid container alignItems="center" justifyContent="center">
+              {indicators.map((item, index) => (
+                <Grid
+                  item
+                  key={item.title}
+                  sx={({ typography }) => ({
+                    marginBottom: typography.pxToRem(16),
+                    justifyContent: "center",
+                    transition: "margin-right 0.3s ease-out",
+                    display: { xs: "flex", lg: "initial" },
+                    width: { xs: "100%", lg: "auto" },
+                    mr: { lg: 7.5 },
+                    "&:last-of-type": {
+                      marginRight: 0,
+                    },
+
+                    ...(checked && {
+                      mr: { lg: 2.5 },
+                      "&:last-of-type": {
+                        marginRight: 0,
+                      },
+                    }),
+                  })}
+                >
+                  <Icon
+                    handleIconClick={() => handleIconClick(index)}
+                    item={item}
+                    index={index}
+                    currentItemIndex={currentItemIndex}
+                    handleClickAway={resetItemClick}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </ClickAwayListener>
+        </Box>
+        <IndicatorPanel
+          {...panelProps}
+          onClick={resetItemClick}
+          currentItem={currentItem}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+DataIndicators.propTypes = {
+  title: PropTypes.arrayOf(PropTypes.shape({})),
+  indicators: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.arrayOf(PropTypes.shape({})),
+    }),
+  ),
+};
+
+export default DataIndicators;