Merge pull request #789 from CodeForAfrica/feat/hurumap_core_map

Introduce @hurumap/next/Map

apps/charterafrica/package.json

@@ -36,30 +36,30 @@
     "db-rollback": "migrate-mongo down"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.614.0",
-    "@aws-sdk/lib-storage": "^3.614.0",
+    "@aws-sdk/client-s3": "^3.621.0",
+    "@aws-sdk/lib-storage": "^3.621.0",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.4",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "^11.13.0",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.16.1",
-    "@mui/utils": "^5.16.1",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.6",
+    "@mui/utils": "^5.16.6",
     "@next/env": "^14.2.5",
     "@nivo/core": "^0.84.0",
     "@nivo/pie": "^0.84.0",
     "@nivo/tooltip": "^0.84.0",
     "@nivo/waffle": "^0.84.0",
     "@payloadcms/bundler-webpack": "^1.0.7",
-    "@payloadcms/db-mongodb": "^1.5.2",
+    "@payloadcms/db-mongodb": "^1.7.1",
     "@payloadcms/plugin-cloud-storage": "^1.1.3",
     "@payloadcms/plugin-nested-docs": "^1.0.12",
     "@payloadcms/plugin-sentry": "^0.0.6",
     "@payloadcms/plugin-seo": "^2.3.2",
     "@payloadcms/richtext-slate": "^1.5.2",
-    "@react-spring/web": "^9.7.3",
-    "@sentry/nextjs": "^8.17.0",
+    "@react-spring/web": "^9.7.4",
+    "@sentry/nextjs": "^8.22.0",
     "airtable": "^0.12.2",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
@@ -69,7 +69,7 @@
     "next": "^14.2.5",
     "next-seo": "^6.5.0",
     "nodemailer-sendgrid": "^1.0.3",
-    "payload": "^2.23.1",
+    "payload": "^2.25.0",
     "prop-types": "^15.8.1",
     "qs": "^6.12.3",
     "react": "^18.3.1",
@@ -81,20 +81,20 @@
     "sharp": "^0.33.4",
     "slate": "^0.103.0",
     "swr": "^2.2.5",
-    "video.js": "^8.16.1",
+    "video.js": "^8.17.1",
     "videojs-youtube": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.8",
+    "@babel/core": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
     "@babel/register": "^7.24.6",
-    "@babel/runtime": "^7.24.8",
+    "@babel/runtime": "^7.25.0",
     "@commons-ui/testing-library": "workspace:*",
-    "@playwright/test": "^1.45.1",
+    "@playwright/test": "^1.45.3",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "^1.6.13",
+    "@swc/core": "^1.7.4",
     "@types/express": "^4.17.21",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.13",
     "@types/react": "^18.3.3",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
@@ -105,10 +105,10 @@
     "jest": "^29.7.0",
     "jest-config-commons-ui": "workspace:*",
     "playwright-config-commons-ui": "workspace:*",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "webpack": "^5.93.0"
   },
   "engines": {

apps/climatemappedafrica/package.json

@@ -31,19 +31,19 @@
     "clean": "rm -rf .next .turbo node_modules"
   },
   "dependencies": {
-    "@apollo/client": "^3.10.8",
+    "@apollo/client": "^3.11.2",
     "@commons-ui/core": "^0.1.0",
     "@commons-ui/next": "workspace:*",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
     "@mui/lab": "5.0.0-alpha.155",
-    "@mui/material": "^5.16.1",
-    "@mui/styles": "^5.16.1",
-    "@mui/utils": "^5.16.1",
+    "@mui/material": "^5.16.6",
+    "@mui/styles": "^5.16.6",
+    "@mui/utils": "^5.16.6",
     "@reactour/tour": "^3.7.0",
-    "aws-sdk": "^2.1658.0",
+    "aws-sdk": "^2.1665.0",
     "clsx": "^2.1.1",
     "d3-format": "^3.1.0",
     "deepmerge": "^4.3.1",
@@ -67,20 +67,20 @@
     "swr": "^2.2.5",
     "vega": "^5.30.0",
     "vega-embed": "^6.26.0",
-    "vega-lite": "^5.19.0",
+    "vega-lite": "^5.20.1",
     "vega-tooltip": "^0.33.0",
-    "video.js": "^8.16.1",
+    "video.js": "^8.17.1",
     "videojs-youtube": "^3.0.1",
     "webpack": "^5.93.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.8",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@commons-ui/testing-library": "workspace:*",
     "@material-ui/codemod": "^4.5.1",
-    "@playwright/test": "^1.45.1",
+    "@playwright/test": "^1.45.3",
     "@storybook/addon-actions": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -91,7 +91,7 @@
     "@storybook/react": "^7.6.20",
     "@storybook/theming": "^7.6.20",
     "@svgr/webpack": "^8.1.0",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.13",
     "@types/react": "^18.3.3",
     "apollo-link-rest": "^0.9.0",
     "babel-jest": "^29.7.0",
@@ -110,10 +110,10 @@
     "jscodeshift": "^0.15.2",
     "next-sitemap": "^1.9.12",
     "playwright-config-commons-ui": "workspace:*",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
     "svg-url-loader": "^8.0.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "engines": {
     "node": "20.x"

apps/climatemappedafrica/src/components/ExplorePage/index.js

@@ -1,24 +1,16 @@
 import { Location } from "@hurumap/core";
+import { Map } from "@hurumap/next";
 import { Box, useTheme } from "@mui/material";
-import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
 import useExplore from "./useExplore";
-import { primaryGeoStyles, secondaryGeoStyles } from "./useLayerStyles";
 import useProfileGeography from "./useProfileGeography";
 import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-const Map = dynamic(
-  () => import("@/climatemappedafrica/components/HURUmap/Map"),
-  {
-    ssr: false,
-  },
-);
-
 function initialState(profiles, onClick) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
@@ -136,10 +128,7 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) {
             onClick={handleClickMap}
             onClickUnpin={handleClickUnpin}
             zoom={7}
-            primaryGeoStyles={primaryGeoStyles}
-            secondaryGeoStyles={secondaryGeoStyles}
             {...props}
-            className={classes.map}
           />
           <Location
             highlights={highlights}

apps/climatemappedafrica/src/components/ExplorePage/useStyles.js

@@ -41,12 +41,6 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
       },
     },
   },
-  map: {
-    display: "none",
-    [breakpoints.up("md")]: {
-      display: "block",
-    },
-  },
 }));
 
 export default useStyles;