Reusable HURUMap Components

apps/climatemappedafrica/jest.config.js

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

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

@@ -1,3 +1,4 @@
+import { Image, RichHeader } from "@hurumap/next";
 import { Box, ClickAwayListener, Grid, Slide } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
@@ -6,8 +7,6 @@ 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);

apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js

@@ -1,3 +1,4 @@
+import { Link } from "@commons-ui/next";
 import {
   IconButton,
   InputBase,
@@ -12,7 +13,6 @@ import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
 import SearchIcon from "@/climatemappedafrica/assets/icons/search.svg";
-import Link from "@/climatemappedafrica/components/Link";
 
 function DropdownSearch({
   IconButtonProps,

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

@@ -1,7 +1,6 @@
+import { Link } from "@commons-ui/next";
 import { useReducer } from "react";
 
-import Link from "@/climatemappedafrica/components/Link";
-
 function extendProfileTags(profile, options, explorePagePath) {
   const { tags: originalTags, ...other } = profile || {};
   if (!originalTags) {

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

@@ -1,11 +1,9 @@
 import { Copyright, QuickLinks, StayInTouch, Section } from "@commons-ui/core";
-import { Link } from "@commons-ui/next";
+import { Link, NextImageButton } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
 import { Box, Grid } from "@mui/material";
 import React from "react";
 
-import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
-
 function Footer(props) {
   const {
     title,

apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js

@@ -1,3 +1,4 @@
+import { Image } from "@hurumap/next";
 import {
   Box,
   Button,
@@ -10,7 +11,6 @@ import PropTypes from "prop-types";
 import React from "react";
 
 import CloseIcon from "@/climatemappedafrica/assets/icons/closeBlack.svg";
-import Image from "@/climatemappedafrica/components/Image";
 import slugify from "@/climatemappedafrica/utils/slugify";
 
 function SvgIcon(props) {

apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js

@@ -1,4 +1,5 @@
 import { Section } from "@commons-ui/core";
+import { Tabs } from "@hurumap/next";
 import { Button, Typography, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
@@ -9,7 +10,6 @@ import printIcon from "@/climatemappedafrica/assets/icons/print.svg?url";
 import TopIcon from "@/climatemappedafrica/assets/icons/top.svg";
 import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader";
 import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare";
-import Tabs from "@/climatemappedafrica/components/Tabs";
 import { hurumapArgs } from "@/climatemappedafrica/config";
 
 // being last is necessary for style override to work

apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js

@@ -1,10 +1,10 @@
 /* eslint-env browser */
+import { Link } from "@commons-ui/next";
 import { Box, Button, Popover } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
 import Caret from "@/climatemappedafrica/assets/icons/caret.svg";
-import Link from "@/climatemappedafrica/components/Link";
 import slugify from "@/climatemappedafrica/utils/slugify";
 
 function SubcategoryList({ items }) {

apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js

@@ -1,3 +1,4 @@
+import { Loading } from "@hurumap/core";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { forwardRef } from "react";
@@ -7,7 +8,6 @@ import ProfileItems from "./ProfileItems";
 import printIcon from "@/climatemappedafrica/assets/icons/print.svg?url";
 import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader";
 import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare";
-import Loading from "@/climatemappedafrica/components/Loading";
 import { hurumapArgs } from "@/climatemappedafrica/config";
 
 const Profile = forwardRef(function Profile(

apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js

@@ -1,3 +1,4 @@
+import { Loading } from "@hurumap/core";
 import { Grid } from "@mui/material";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
@@ -6,7 +7,6 @@ import React, { Fragment, memo } from "react";
 import CategoryHeader from "@/climatemappedafrica/components/HURUmap/CategoryHeader";
 import KeyMetric from "@/climatemappedafrica/components/HURUmap/KeyMetric";
 import SubcategoryHeader from "@/climatemappedafrica/components/HURUmap/SubcategoryHeader";
-import Loading from "@/climatemappedafrica/components/Loading";
 import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalValue";
 import slugify from "@/climatemappedafrica/utils/slugify";
 

apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js

@@ -1,11 +1,11 @@
 import { RichText } from "@commons-ui/payload";
+import { Image } from "@hurumap/next";
 import { Grid, Typography, IconButton, Avatar, Box } from "@mui/material";
 import { useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
 import React from "react";
 
 import CloseIcon from "@/climatemappedafrica/assets/icons/close.svg";
-import Image from "@/climatemappedafrica/components/Image";
 
 function TutorialStep({ description, title, image }) {
   const { setIsOpen, currentStep } = useTour();

apps/climatemappedafrica/src/components/Hero/Hero.js

@@ -1,14 +1,13 @@
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
+import { Image, RichHeader } from "@hurumap/next";
 import { Box, Grid, useMediaQuery } from "@mui/material";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
 import React from "react";
 
 import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg";
 import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
-import Image from "@/climatemappedafrica/components/Image";
-import RichHeader from "@/climatemappedafrica/components/RichHeader";
 
 const Map = dynamic(() => import("./Map"), { ssr: false });
 

apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js

@@ -1,10 +1,9 @@
+import { NextImageButton } from "@commons-ui/next";
+import { Menu } from "@hurumap/next";
 import { Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import Menu from "@/climatemappedafrica/components/Menu";
-import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
-
 function DesktopNavigation({ explorePagePath, logo, menus, socialLinks, sx }) {
   return (
     <Grid container alignItems="center" sx={sx}>

apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js

@@ -1,11 +1,11 @@
+import { NextImageButton } from "@commons-ui/next";
 import { Grid, Button } from "@mui/material";
 import { useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
 import React from "react";
 
 import SearchIcon from "@/climatemappedafrica/assets/icons/search-explore.svg";
 import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
-import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 
 function ExploreNavigation({
   explorePagePath,

apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js

@@ -1,4 +1,6 @@
 import { Section } from "@commons-ui/core";
+import { NextImageButton } from "@commons-ui/next";
+import { Menu } from "@hurumap/next";
 import {
   Grid,
   Slide,
@@ -17,8 +19,6 @@ import SearchIcon from "@/climatemappedafrica/assets/icons/search-open.svg";
 import MenuCloseIcon from "@/climatemappedafrica/assets/menu_close.svg";
 import MenuOpenIcon from "@/climatemappedafrica/assets/menu_open.svg";
 import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
-import Menu from "@/climatemappedafrica/components/Menu";
-import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="left" timeout={1000} ref={ref} {...props} />;