Merge pull request #785 from CodeForAfrica/ft/hurumap-source

HURUMap Source
CodeForAfrica · Jul 17, 2024 · 2923822 · 2923822
2 parents ed6d830 + af0c1a6
commit 2923822
Show file tree

Hide file tree

Showing 29 changed files with 367 additions and 168 deletions.
diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
@@ -37,6 +37,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hurumap/core": "workspace:*",
+    "@hurumap/next": "workspace:*",
     "@mui/lab": "5.0.0-alpha.155",
     "@mui/material": "^5.16.1",
     "@mui/styles": "^5.16.1",

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -1,3 +1,4 @@
+import { Source } from "@hurumap/next";
 import { useMediaQuery } from "@mui/material";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
@@ -12,20 +13,16 @@ import { calculateTooltipPosition, idify } from "./utils";
 
 import ChartTooltip from "@/climatemappedafrica/components/HURUmap/ChartTooltip";
 import IndicatorTitle from "@/climatemappedafrica/components/HURUmap/IndicatorTitle";
-import Source from "@/climatemappedafrica/components/HURUmap/Source";
 import theme from "@/climatemappedafrica/theme";
 
-const useStyles = makeStyles(({ typography }) => ({
+const useStyles = makeStyles(() => ({
   root: {
     position: "relative",
     width: "100%",
   },
   chart: {
     width: "100%",
   },
-  source: {
-    margin: `${typography.pxToRem(20)} 0`,
-  },
 }));
 
 function Chart({
@@ -242,7 +239,12 @@ function Chart({
         />
       )}
       <div ref={chartRef} className={classes.chart} />
-      <Source href={url} classes={{ root: classes.source }}>
+      <Source
+        href={url}
+        sx={({ typography }) => ({
+          margin: `${typography.pxToRem(20)} 0`,
+        })}
+      >
         {source}
       </Source>
     </div>

diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
@@ -1,12 +1,11 @@
+import { Source } from "@hurumap/next";
 import { Tooltip, Typography, LinearProgress } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 
 import useStyles from "./useStyles";
 
-import Source from "@/climatemappedafrica/components/HURUmap/Source";
-
 function KeyMetric({
   className,
   formattedValue: formattedValueProp,
@@ -67,7 +66,12 @@ function KeyMetric({
           {parentValue}
         </Typography>
       )}
-      <Source href={url} classes={{ root: classes.source }}>
+      <Source
+        href={url}
+        sx={(theme) => ({
+          marginTop: theme.typography.pxToRem(10),
+        })}
+      >
         {source}
       </Source>
     </div>

diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js
@@ -19,9 +19,6 @@ const useStyles = makeStyles(({ typography, palette }) => ({
   progressBarDeterminate: {
     backgroundColor: palette.grey.main,
   },
-  source: {
-    marginTop: typography.pxToRem(10),
-  },
   text: {
     fontSize: typography.pxToRem(11),
   },

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Source/index.js b/apps/climatemappedafrica/src/components/HURUmap/Source/index.js
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Source/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Source/index.stories.js
diff --git a/apps/pesayetu/package.json b/apps/pesayetu/package.json
@@ -38,6 +38,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hurumap/core": "workspace:*",
+    "@hurumap/next": "workspace:*",
     "@mui/lab": "5.0.0-alpha.155",
     "@mui/material": "^5.16.1",
     "@mui/styles": "^5.16.1",

diff --git a/apps/pesayetu/src/components/HURUmap/Chart/index.js b/apps/pesayetu/src/components/HURUmap/Chart/index.js
@@ -1,3 +1,4 @@
+import { Source } from "@hurumap/next";
 import { useMediaQuery } from "@mui/material";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
@@ -12,20 +13,16 @@ import { calculateTooltipPosition, idify } from "./utils";
 
 import ChartTooltip from "@/pesayetu/components/HURUmap/ChartTooltip";
 import IndicatorTitle from "@/pesayetu/components/HURUmap/IndicatorTitle";
-import Source from "@/pesayetu/components/HURUmap/Source";
 import theme from "@/pesayetu/theme";
 
-const useStyles = makeStyles(({ typography }) => ({
+const useStyles = makeStyles(() => ({
   root: {
     position: "relative",
     width: "100%",
   },
   chart: {
     width: "100%",
   },
-  source: {
-    margin: `${typography.pxToRem(20)} 0`,
-  },
 }));
 
 function Chart({
@@ -239,7 +236,12 @@ function Chart({
         />
       )}
       <div ref={chartRef} className={classes.chart} />
-      <Source href={url} classes={{ root: classes.source }}>
+      <Source
+        href={url}
+        sx={({ typography }) => ({
+          margin: `${typography.pxToRem(20)} 0`,
+        })}
+      >
         {source}
       </Source>
     </div>

diff --git a/apps/pesayetu/src/components/HURUmap/KeyMetric/index.js b/apps/pesayetu/src/components/HURUmap/KeyMetric/index.js
@@ -1,12 +1,11 @@
+import { Source } from "@hurumap/next";
 import { Tooltip, Typography, LinearProgress } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 
 import useStyles from "./useStyles";
 
-import Source from "@/pesayetu/components/HURUmap/Source";
-
 function KeyMetric({
   className,
   formattedValue: formattedValueProp,
@@ -67,7 +66,12 @@ function KeyMetric({
           {parentValue}
         </Typography>
       )}
-      <Source href={url} classes={{ root: classes.source }}>
+      <Source
+        href={url}
+        sx={(theme) => ({
+          marginTop: `${theme.typography.pxToRem(20)} 0`,
+        })}
+      >
         {source}
       </Source>
     </div>

diff --git a/apps/pesayetu/src/components/HURUmap/KeyMetric/useStyles.js b/apps/pesayetu/src/components/HURUmap/KeyMetric/useStyles.js
@@ -19,9 +19,6 @@ const useStyles = makeStyles(({ typography, palette }) => ({
   progressBarDeterminate: {
     backgroundColor: palette.grey.main,
   },
-  source: {
-    marginTop: typography.pxToRem(10),
-  },
   text: {
     fontSize: typography.pxToRem(11),
   },

diff --git a/apps/pesayetu/src/components/HURUmap/Source/index.js b/apps/pesayetu/src/components/HURUmap/Source/index.js
diff --git a/apps/pesayetu/src/components/HURUmap/Source/index.stories.js b/apps/pesayetu/src/components/HURUmap/Source/index.stories.js
diff --git a/apps/uibook/package.json b/apps/uibook/package.json
@@ -35,6 +35,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@hurumap/core": "workspace:*",
+    "@hurumap/next": "workspace:*",
     "@mui/material": "^5.16.1",
     "@mui/utils": "^5.16.1",
     "@next/env": "^14.2.5",

diff --git a/apps/uibook/stories/HURUmap/next/Source.stories.js b/apps/uibook/stories/HURUmap/next/Source.stories.js
@@ -0,0 +1,35 @@
+import { Source } from "@hurumap/next";
+import React from "react";
+
+export default {
+  title: "@hurumap/next/Source",
+  argTypes: {
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+    href: {
+      control: {
+        type: "text",
+      },
+    },
+    title: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+};
+
+function Template({ ...args }) {
+  return <Source {...args} />;
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: "Source Name",
+  href: "https://example.com",
+  title: "Source",
+};
diff --git a/packages/hurumap-core/package.json b/packages/hurumap-core/package.json
@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/codeforafrica/ui.git",
-    "directory": "packages/commons-ui-core"
+    "directory": "packages/hurumap-core"
   },
   "license": "MIT",
   "bugs": {