Merge pull request #981 from CodeForAfrica/fix/ui_packages_and_build

Fix/UI packages and build
CodeForAfrica · Oct 29, 2024 · 2d673b6 · 2d673b6
2 parents 90a1ca9 + fd93d14
commit 2d673b6
Show file tree

Hide file tree

Showing 31 changed files with 4,591 additions and 4,715 deletions.
diff --git a/Dockerfile b/Dockerfile
diff --git a/apps/climatemappedafrica/.env b/apps/climatemappedafrica/.env
@@ -1,3 +1,3 @@
 SENTRY_ENVIRONMENT=local
 SENTRY_ORG=code-for-africa
-SENTRY_PROJECT=hurumapclimate
+SENTRY_PROJECT=climatemapafrica
diff --git a/apps/climatemappedafrica/next.config.js b/apps/climatemappedafrica/next.config.js
@@ -25,7 +25,6 @@ module.exports = {
       transform: "@mui/material/{{member}}",
     },
   },
-  output: "standalone",
   reactStrictMode: false,
   transpilePackages: [
     "@commons-ui/core",

diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
@@ -34,7 +34,8 @@
   },
   "dependencies": {
     "@apollo/client": "catalog:",
-    "@commons-ui/core": "catalog:",
+    "@commons-ui/core": "workspace:*",
+    "@commons-ui/legacy": "catalog:",
     "@commons-ui/next": "workspace:*",
     "@commons-ui/payload": "workspace:*",
     "@emotion/react": "catalog:",

diff --git a/apps/climatemappedafrica/payload.image.loader.js b/apps/climatemappedafrica/payload.image.loader.js
@@ -3,9 +3,10 @@
 import site from "@/climatemappedafrica/utils/site";
 
 export default function payloadImageLoader({ src }) {
-  // Handle relative paths (/media) only
+  // Handle relative paths (i.e. `/media`) only
   if (src?.startsWith("/media")) {
-    return `${site.url}${src}`;
+    // site.url has a trailing `/`
+    return `${site.url}${src.substring(1)}`;
   }
   return src;
 }
diff --git a/apps/climatemappedafrica/src/components/Card/Card.js b/apps/climatemappedafrica/src/components/Card/Card.js
@@ -124,7 +124,7 @@ Card.propTypes = {
   descriptionProps: PropTypes.shape({}),
   embed: PropTypes.string,
   href: PropTypes.string,
-  image: PropTypes.string,
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
   imageProps: PropTypes.shape({}),
   linkProps: PropTypes.shape({}),
   media: PropTypes.string,

diff --git a/apps/climatemappedafrica/src/components/Card/Content.js b/apps/climatemappedafrica/src/components/Card/Content.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { RichText } from "@commons-ui/payload";
 import { CardContent } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";

diff --git a/apps/climatemappedafrica/src/components/Card/Media.js b/apps/climatemappedafrica/src/components/Card/Media.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";

diff --git a/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js b/apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { RichText } from "@commons-ui/payload";
 import { ButtonBase, Slide } from "@mui/material";
 import PropTypes from "prop-types";

diff --git a/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js b/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { useMediaQuery, Box, Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
@@ -83,7 +83,7 @@ DataVisualisationGuide.propTypes = {
   title: PropTypes.string,
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      description: PropTypes.string || PropTypes.array,
+      description: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
       image: PropTypes.string,
     }),
   ),

diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -1,4 +1,4 @@
-import { QuickLinks, Copyright } from "@commons-ui/core";
+import { QuickLinks, Copyright } from "@commons-ui/legacy";
 import { Link, StayInTouch } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
 import { Box, Grid } from "@mui/material";

diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core";
 import { Source } from "@hurumap/next";
 import { useMediaQuery, useTheme } from "@mui/material";

diff --git a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";

diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -8,14 +8,15 @@ exports[`<TreeView /> renders unchanged 1`] = `
     <ul
       aria-multiselectable="false"
       class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
-      id=":r0:"
+      id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
     >
       <li
         aria-expanded="false"
+        aria-selected="false"
         class="css-1uhp40g-MuiTreeItem2-root"
-        id=":r0:-annual-temperature"
+        id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
@@ -40,8 +41,9 @@ exports[`<TreeView /> renders unchanged 1`] = `
       </li>
       <li
         aria-expanded="false"
+        aria-selected="false"
         class="css-1uhp40g-MuiTreeItem2-root"
-        id=":r0:-temperature-variation"
+        id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
@@ -1,4 +1,4 @@
-import RichTypography from "@commons-ui/core/RichTypography";
+import RichTypography from "@commons-ui/legacy/RichTypography";
 import { Grid, Typography, IconButton, Avatar } from "@mui/material";
 import { useTour } from "@reactour/tour";
 import Image from "next/image";

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.stories.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import React from "react";
 
 import Tutorial from "@/climatemappedafrica/components/HURUmap/Tutorial";

diff --git a/apps/climatemappedafrica/src/components/Header/Header.js b/apps/climatemappedafrica/src/components/Header/Header.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { Box, Grid, useMediaQuery } from "@mui/material";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
@@ -147,7 +147,7 @@ Hero.propTypes = {
   comment: PropTypes.string,
   subtitle: PropTypes.arrayOf(PropTypes.shape({})),
   searchLabel: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes.arrayOf(PropTypes.shape({})),
   featuredLocations: PropTypes.arrayOf(PropTypes.shape({})),
   properties: PropTypes.shape({}),
   level: PropTypes.string,

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.test.js b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
@@ -1,7 +1,7 @@
 import { createRender } from "@commons-ui/testing-library";
 import React from "react";
 
-import Hero from "./Hero";
+import Hero from ".";
 
 import theme from "@/climatemappedafrica/theme";
 

diff --git a/apps/climatemappedafrica/src/components/HowItWorks/index.js b/apps/climatemappedafrica/src/components/HowItWorks/index.js
@@ -187,7 +187,7 @@ function HowItWorks({
 
 HowItWorks.propTypes = {
   ctaText: PropTypes.string,
-  description: PropTypes.string,
+  description: PropTypes.arrayOf(PropTypes.shape({})),
   href: PropTypes.string,
   title: PropTypes.string,
 };

diff --git a/apps/climatemappedafrica/src/components/Link/index.js b/apps/climatemappedafrica/src/components/Link/index.js
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import { A } from "@commons-ui/core";
+import { A } from "@commons-ui/legacy";
 import { Link as MuiLink } from "@mui/material";
 import clsx from "clsx";
 import NextLink from "next/link";

diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { RichText } from "@commons-ui/payload";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";

diff --git a/apps/climatemappedafrica/src/components/Section/index.js b/apps/climatemappedafrica/src/components/Section/index.js
@@ -1,4 +1,4 @@
-import { Section as CuiSection } from "@commons-ui/core";
+import { Section as CuiSection } from "@commons-ui/legacy";
 import makeStyles from "@mui/styles/makeStyles";
 import clsx from "clsx";
 import PropTypes from "prop-types";

diff --git a/apps/climatemappedafrica/src/components/Section/index.stories.js b/apps/climatemappedafrica/src/components/Section/index.stories.js
@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import React from "react";
 
 import Section from ".";
@@ -23,8 +23,8 @@ function Template(args) {
           <h1>Lorem Ipsum</h1>
           <h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
           <h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
-          
-          
+
+
           <hr />
           <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in lectus ut lectus sagittis aliquet. Phasellus felis metus, suscipit eu ligula vitae, dapibus pretium sapien. Integer feugiat luctus metus, vitae aliquam magna euismod et. Quisque massa augue, hendrerit id pharetra ut, dictum vel elit. Morbi id velit pretium, vestibulum sapien eget, suscipit ex. Quisque varius consequat cursus. Duis vitae nunc vel lacus ullamcorper finibus. Sed lobortis a velit in ultricies. Phasellus eleifend est vel auctor cursus. Ut dapibus posuere aliquam. Mauris scelerisque libero sit amet felis faucibus, vel faucibus dolor suscipit. Maecenas venenatis turpis ut vulputate viverra.

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -90,12 +90,12 @@ services:
         - SENTRY_PROJECT
     environment:
       HURUMAP_API_URL: ${HURUMAP_API_URL}
-      S3_UPLOAD_KEY: ${S3_UPLOAD_KEY}
-      S3_UPLOAD_SECRET: ${S3_UPLOAD_SECRET}
-      S3_UPLOAD_BUCKET: ${S3_UPLOAD_BUCKET}
-      S3_UPLOAD_REGION: ${S3_UPLOAD_REGION}
       MONGO_URL: mongodb://${MONGO_INITDB_ROOT_USERNAME:-root}:${MONGO_INITDB_ROOT_PASSWORD:-rootpassword}@host.docker.internal:${MONGODB_PORT:-27017}/climatemappedafrica?authSource=admin&directConnection=true
       PAYLOAD_SECRET: ${PAYLOAD_SECRET}
+      S3_ACCESS_KEY_ID: ${S3_ACCESS_KEY_ID}
+      S3_SECRET_ACCESS_KEY: ${S3_SECRET_ACCESS_KEY}
+      S3_BUCKET: ${S3_BUCKET}
+      S3_REGION: ${S3_REGION}
       SENTRY_ORG: ${SENTRY_ORG}
       SENTRY_ENVIRONMENT: ${SENTRY_ENVIRONMENT}
       SENTRY_PROJECT: ${SENTRY_PROJECT}

diff --git a/packages/commons-ui-next/package.json b/packages/commons-ui-next/package.json
@@ -34,7 +34,10 @@
     "@babel/preset-react": "catalog:",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/testing-library": "workspace:*",
+    "@emotion/react": "catalog:",
+    "@emotion/styled": "catalog:",
     "@mui/material": "catalog:",
+    "@types/react": "catalog:",
     "babel-loader": "catalog:",
     "eslint": "catalog:",
     "eslint-config-commons-ui": "workspace:*",
@@ -51,13 +54,14 @@
   "peerDependencies": {
     "@babel/core": "catalog:",
     "@commons-ui/core": "workspace:*",
+    "@emotion/react": "catalog:",
+    "@emotion/styled": "catalog:",
     "@mui/material": "catalog:",
     "clsx": "catalog:",
     "next": "catalog:",
     "prop-types": "catalog:",
     "react": "catalog:",
-    "react-dom": "catalog:",
-    "slate": "catalog:"
+    "react-dom": "catalog:"
   },
   "dependencies": {
     "clsx": "catalog:"

diff --git a/packages/commons-ui-payload/package.json b/packages/commons-ui-payload/package.json
@@ -4,7 +4,7 @@
   "private": false,
   "author": "Code for Africa <[email protected]>",
   "description": "",
-  "main": "src/index.js",
+  "main": "./src/index.js",
   "keywords": [
     "react",
     "react-component",
@@ -15,7 +15,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/codeforafrica/ui.git",
-    "directory": "packages/commons-ui-core"
+    "directory": "packages/commons-ui-payload"
   },
   "license": "MIT",
   "bugs": {
@@ -30,30 +30,35 @@
   "devDependencies": {
     "@babel/core": "catalog:",
     "@babel/preset-react": "catalog:",
+    "@commons-ui/core": "workspace:*",
+    "@commons-ui/next": "workspace:*",
     "@commons-ui/testing-library": "workspace:*",
     "@emotion/react": "catalog:",
     "@emotion/styled": "catalog:",
     "@mui/material": "catalog:",
-    "@mui/utils": "catalog:",
     "@types/react": "catalog:",
     "babel-loader": "catalog:",
     "eslint": "catalog:",
     "eslint-config-commons-ui": "workspace:*",
     "identity-obj-proxy": "catalog:",
     "jest": "catalog:",
     "jest-config-commons-ui": "workspace:*",
+    "next": "catalog:",
     "prettier": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-test-renderer": "catalog:",
     "require-from-string": "catalog:",
+    "slate": "catalog:",
     "typescript": "catalog:",
     "webpack": "catalog:"
   },
   "peerDependencies": {
     "@babel/core": "catalog:",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
+    "@emotion/react": "catalog:",
+    "@emotion/styled": "catalog:",
     "@mui/material": "catalog:",
     "clsx": "catalog:",
     "next": "catalog:",

diff --git a/packages/hurumap-core/package.json b/packages/hurumap-core/package.json
@@ -33,11 +33,12 @@
   "devDependencies": {
     "@babel/core": "catalog:",
     "@babel/preset-react": "catalog:",
+    "@commons-ui/core": "workspace:*",
     "@commons-ui/testing-library": "workspace:*",
     "@emotion/react": "catalog:",
     "@emotion/styled": "catalog:",
+    "@mui/icons-material": "catalog:",
     "@mui/material": "catalog:",
-    "@mui/utils": "catalog:",
     "@types/react": "catalog:",
     "babel-loader": "catalog:",
     "deepmerge": "catalog:",
@@ -58,27 +59,20 @@
   },
   "peerDependencies": {
     "@babel/core": "catalog:",
+    "@commons-ui/core": "workspace:*",
     "@emotion/react": "catalog:",
     "@emotion/styled": "catalog:",
+    "@mui/icons-material": "catalog:",
     "@mui/material": "catalog:",
-    "@mui/utils": "catalog:",
+    "clsx": "catalog:",
     "deepmerge": "catalog:",
     "papaparse": "catalog:",
     "react": "catalog:",
     "react-copy-to-clipboard": "catalog:",
     "react-dom": "catalog:",
     "react-share": "catalog:",
-    "xlsx": "catalog:"
-  },
-  "dependencies": {
-    "@commons-ui/core": "workspace:*",
-    "@mui/icons-material": "catalog:",
-    "clsx": "catalog:",
-    "papaparse": "catalog:",
-    "prop-types": "catalog:",
-    "react-copy-to-clipboard": "catalog:",
-    "react-share": "catalog:",
     "vega": "catalog:",
     "xlsx": "catalog:"
-  }
+  },
+  "dependencies": {}
 }