Merge pull request #664 from CodeForAfrica/chore/charterafrica_nivo

Upgrade @/charterafrica nivo
CodeForAfrica · Dec 7, 2023 · 5f31074 · 5f31074
2 parents 4f151f9 + 1659184
commit 5f31074
Show file tree

Hide file tree

Showing 16 changed files with 1,619 additions and 1,409 deletions.
diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json
@@ -36,24 +36,25 @@
     "db-rollback": "migrate-mongo down"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.465.0",
-    "@aws-sdk/lib-storage": "^3.465.0",
+    "@aws-sdk/client-s3": "^3.468.0",
+    "@aws-sdk/lib-storage": "^3.468.0",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.14.20",
     "@mui/utils": "^5.14.20",
     "@next/env": "^14.0.3",
-    "@nivo/core": "^0.80.0",
+    "@nivo/core": "^0.84.0",
     "@nivo/pie": "^0.84.0",
-    "@nivo/tooltip": "^0.80.0",
-    "@nivo/waffle": "^0.80.0",
+    "@nivo/tooltip": "^0.84.0",
+    "@nivo/waffle": "^0.84.0",
     "@payloadcms/plugin-cloud-storage": "^1.1.1",
     "@payloadcms/plugin-nested-docs": "^1.0.9",
     "@payloadcms/plugin-seo": "^1.0.15",
+    "@react-spring/web": "^9.7.3",
     "@sentry/nextjs": "^7.85.0",
     "airtable": "^0.12.2",
     "dotenv": "^16.3.1",
@@ -90,7 +91,7 @@
     "@swc/core": "^1.3.100",
     "@types/express": "^4.17.21",
     "@types/node": "^18.19.2",
-    "@types/react": "^18.2.41",
+    "@types/react": "^18.2.42",
     "babel-jest": "^29.7.0",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
@@ -103,7 +104,7 @@
     "prettier": "^3.1.0",
     "react-test-renderer": "^18.2.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "engines": {

diff --git a/apps/charterafrica/src/components/Charts/Pie.js b/apps/charterafrica/src/components/Charts/Pie.js
@@ -5,8 +5,8 @@ import Tooltip from "./Tooltip";
 
 import { neutral } from "@/charterafrica/colors";
 
-function PieTooltip({ datum: { id, label, value } }) {
-  return <Tooltip label={label || id} value={value} />;
+function PieTooltip({ datum }) {
+  return <Tooltip {...datum} />;
 }
 
 function Pie({ data, height, width }) {

diff --git a/apps/charterafrica/src/components/Charts/Tooltip.js b/apps/charterafrica/src/components/Charts/Tooltip.js
@@ -3,31 +3,32 @@ import React from "react";
 
 import LineClampedRichTypography from "@/charterafrica/components/LineClampedRichTypography";
 
-function Tooltip({ label, value }) {
+function Tooltip({ color, formattedValue, label }) {
   return (
     <Box
       bgcolor="common.white"
-      borderRadius="10px"
+      borderRadius={1.25}
+      border={1}
       gap="5px"
       px={2.5}
       py="29.77px"
       width={221}
+      sx={{
+        borderColor: color,
+      }}
     >
       <LineClampedRichTypography
         color="neutral.dark"
         lineClamp={1}
         variant="numberSmall"
       >
-        {value}
+        {formattedValue}
       </LineClampedRichTypography>
-      <LineClampedRichTypography
-        color="neutral.dark"
-        lineClamp={1}
-        variant="captionCap"
-      >
+      <LineClampedRichTypography color="neutral.dark" variant="captionCap">
         {label}
       </LineClampedRichTypography>
     </Box>
   );
 }
+
 export default Tooltip;
diff --git a/apps/charterafrica/src/components/Charts/Waffle.js b/apps/charterafrica/src/components/Charts/Waffle.js
@@ -1,44 +1,37 @@
 import { ResponsiveWaffle } from "@nivo/waffle";
+import { animated } from "@react-spring/web";
 import React from "react";
 
 import Tooltip from "./Tooltip";
 
 function WaffleCell({
-  position,
-  size,
-  x,
-  y,
-  color,
-  fill,
+  cell,
+  animatedProps,
+  borderRadius,
   borderWidth,
-  borderColor,
-  data,
-  onHover,
-  onLeave,
-  onClick,
+  testIdPrefix,
 }) {
   return (
-    <rect
-      width={size}
-      height={size}
-      x={x}
-      y={y}
-      fill={fill || color}
-      strokeWidth={borderWidth}
-      stroke={borderColor}
+    <animated.rect
+      x={animatedProps.x}
+      y={animatedProps.y}
+      width={animatedProps.size}
+      height={animatedProps.size}
+      rx={borderRadius}
+      ry={borderRadius}
       opacity={0.7}
-      onMouseEnter={onHover}
-      onMouseMove={onHover}
-      onMouseLeave={onLeave}
-      onClick={(event) => {
-        onClick({ position, color, x, y, data }, event);
-      }}
+      fill={cell.fill || animatedProps.color}
+      stroke={animatedProps.borderColor}
+      strokeWidth={borderWidth}
+      data-test-id={
+        testIdPrefix ? `${testIdPrefix}.cell_${cell.key}` : undefined
+      }
     />
   );
 }
 
-function WaffleTooltip({ id, label, value }) {
-  return <Tooltip label={label || id} value={value} />;
+function WaffleTooltip({ data }) {
+  return <Tooltip {...data} />;
 }
 
 function Waffle({ data, height, total, width }) {

diff --git a/apps/codeforafrica/package.json b/apps/codeforafrica/package.json
@@ -40,7 +40,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@googlemaps/react-wrapper": "^1.1.35",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.14.20",
     "@mui/utils": "^5.14.20",
     "@next/env": "~14.0.3",
     "@payloadcms/plugin-cloud-storage": "^1.1.1",
@@ -74,7 +74,7 @@
     "@svgr/webpack": "^8.1.0",
     "@types/express": "^4.17.21",
     "@types/node": "^18.19.2",
-    "@types/react": "^18.2.41",
+    "@types/react": "^18.2.42",
     "babel-jest": "^29.7.0",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
@@ -87,7 +87,7 @@
     "prettier": "^3.1.0",
     "react-test-renderer": "^18.2.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "engines": {

diff --git a/apps/commons-ui-docs/package.json b/apps/commons-ui-docs/package.json
@@ -34,7 +34,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.14.20",
     "@mui/utils": "^5.14.20",
     "@next/env": "^14.0.3",
     "next": "^14.0.3",
@@ -54,14 +54,14 @@
     "@storybook/react": "^7.6.3",
     "@storybook/testing-library": "^0.2.2",
     "@types/node": "^18.19.2",
-    "@types/react": "^18.2.41",
+    "@types/react": "^18.2.42",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-import": "^2.29.0",
     "prettier": "^3.1.0",
     "storybook": "^7.6.3",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "engines": {

diff --git a/apps/pesayetu/package.json b/apps/pesayetu/package.json
@@ -37,11 +37,11 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/lab": "5.0.0-alpha.155",
-    "@mui/material": "^5.14.19",
-    "@mui/styles": "^5.14.19",
+    "@mui/material": "^5.14.20",
+    "@mui/styles": "^5.14.20",
     "@mui/utils": "^5.14.20",
     "@reactour/tour": "^3.6.1",
-    "aws-sdk": "^2.1512.0",
+    "aws-sdk": "^2.1513.0",
     "clsx": "^2.0.0",
     "d3-format": "^3.1.0",
     "deepmerge": "^4.3.1",
@@ -61,7 +61,7 @@
     "react-share": "^5.0.3",
     "react-vega": "^7.6.0",
     "sharp": "^0.33.0",
-    "simplebar-react": "^2.4.3",
+    "simplebar-react": "^3.2.4",
     "swr": "^2.2.4",
     "vega": "^5.26.1",
     "vega-embed": "^6.23.0",
@@ -91,7 +91,7 @@
     "@storybook/theming": "^7.6.3",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^18.19.2",
-    "@types/react": "^18.2.41",
+    "@types/react": "^18.2.42",
     "apollo-link-rest": "^0.9.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
@@ -113,8 +113,8 @@
     "playwright-config-commons-ui": "workspace:*",
     "prettier": "^3.1.0",
     "react-test-renderer": "^18.2.0",
-    "svg-url-loader": "^7.1.1",
-    "typescript": "^5.3.2"
+    "svg-url-loader": "^8.0.0",
+    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "18.x"

diff --git a/apps/promisetracker/package.json b/apps/promisetracker/package.json
@@ -28,8 +28,8 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.19",
     "@mui/lab": "5.0.0-alpha.155",
-    "@mui/material": "^5.14.19",
-    "@mui/styles": "^5.14.19",
+    "@mui/material": "^5.14.20",
+    "@mui/styles": "^5.14.20",
     "@mui/utils": "^5.14.20",
     "@sentry/nextjs": "^7.85.0",
     "clsx": "^2.0.0",
@@ -50,7 +50,7 @@
     "react-share": "^5.0.3",
     "reading-time": "^1.5.0",
     "sharp": "^0.33.0",
-    "simplebar-react": "^2.4.3",
+    "simplebar-react": "^3.2.4",
     "tiny-warning": "^1.0.3",
     "victory": "^36.7.0"
   },
@@ -62,7 +62,7 @@
     "@playwright/test": "^1.40.1",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^18.19.2",
-    "@types/react": "^18.2.41",
+    "@types/react": "^18.2.42",
     "babel-jest": "^29.7.0",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
@@ -74,7 +74,7 @@
     "playwright-config-commons-ui": "workspace:*",
     "prettier": "^3.1.0",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "scripts": {

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "lint-staged": "^15.2.0",
     "playwright-config-commons-ui": "workspace:*",
     "prettier": "^3.1.0",
-    "turbo": "^1.10.16"
+    "turbo": "^1.11.0"
   },
   "engines": {
     "node": "18.x",

diff --git a/packages/commons-ui-core/package.json b/packages/commons-ui-core/package.json
@@ -33,9 +33,9 @@
     "@commons-ui/testing-library": "workspace:*",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.14.20",
     "@mui/utils": "^5.14.20",
-    "@types/react": "^18.2.41",
+    "@types/react": "^18.2.42",
     "babel-loader": "^9.1.3",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
@@ -47,7 +47,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "require-from-string": "^2.0.2",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "peerDependencies": {

diff --git a/packages/commons-ui-next/package.json b/packages/commons-ui-next/package.json
@@ -34,7 +34,7 @@
     "@babel/preset-react": "^7.23.3",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/testing-library": "workspace:*",
-    "@mui/material": "^5.14.19",
+    "@mui/material": "^5.14.20",
     "babel-loader": "^9.1.3",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
@@ -45,7 +45,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "require-from-string": "^2.0.2",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "peerDependencies": {

diff --git a/packages/commons-ui-testing-library/package.json b/packages/commons-ui-testing-library/package.json
@@ -36,8 +36,8 @@
     "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.19",
-    "@types/react": "^18.2.41",
+    "@mui/material": "^5.14.20",
+    "@types/react": "^18.2.42",
     "babel-loader": "^9.1.3",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
@@ -48,7 +48,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "peerDependencies": {

diff --git a/packages/eslint-config-commons-ui/package.json b/packages/eslint-config-commons-ui/package.json
@@ -18,7 +18,7 @@
     "@next/eslint-plugin-next": "^14.0.3",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "^1.10.16",
+    "eslint-config-turbo": "^1.11.0",
     "eslint-import-resolver-jsconfig": "^1.1.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -37,7 +37,7 @@
     "eslint": "^8.55.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "eslint": "^8.11.0",

diff --git a/packages/jest-config-commons-ui/package.json b/packages/jest-config-commons-ui/package.json
@@ -28,7 +28,7 @@
     "jest": "^29.7.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "jest": "^28.1.0"