diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json index 8db4bfdc8..d997fd29f 100644 --- a/apps/climatemappedafrica/jsconfig.json +++ b/apps/climatemappedafrica/jsconfig.json @@ -4,7 +4,9 @@ "paths": { "@/climatemappedafrica/*": ["./src/*"], "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], - "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"] + "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"], + "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"], + "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"] } }, "exclude": ["node_modules"] diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index 75dfaf025..a1ea83bc7 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,4 +1,5 @@ -import { Box } from "@mui/material"; +import { Location } from "@hurumap/core"; +import { Box, useTheme } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -9,7 +10,6 @@ import { primaryGeoStyles, secondaryGeoStyles } from "./useLayerStyles"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; -import Location from "@/climatemappedafrica/components/HURUmap/Location"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; const Map = dynamic( @@ -30,6 +30,7 @@ function initialState(profiles, onClick) { } function ExplorePage({ panelProps, profile: profileProp, ...props }) { + const theme = useTheme(); const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at // this point, useReducer hasn't been called yet so we can't use @@ -144,7 +145,18 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { highlights={highlights} isLoading={isLoading} tags={tags} - className={classes.location} + sx={{ + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex", + left: 0, + margin: "0 auto", + position: "absolute", + right: 0, + top: theme.typography.pxToRem(52), + zIndex: theme.zIndex.appBar, + }, + }} /> diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js index 78b4f7e67..1f1febd38 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js @@ -1,66 +1,52 @@ import makeStyles from "@mui/styles/makeStyles"; -const useStyles = makeStyles( - ({ breakpoints, palette, typography, zIndex }) => ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, - }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, +const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, }, - location: { - display: "none", - [breakpoints.up("md")]: { + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, display: "flex", - left: 0, + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, margin: "0 auto", - position: "absolute", - right: 0, - top: typography.pxToRem(52), - zIndex: zIndex.appBar, + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", }, }, - }), -); + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, + }, +})); export default useStyles; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js deleted file mode 100644 index ba9a2fb0c..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; -import { Box } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; - -import useStyles from "./useStyles"; - -function Location({ className, highlights, isLoading, tags, ...props }) { - const classes = useStyles(props); - - if (!tags?.length) { - return null; - } - return ( - - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - - ); -} - -Location.propTypes = { - className: PropTypes.string, - highlights: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - number: PropTypes.number, - }), - ), - isLoading: PropTypes.bool, - tags: PropTypes.arrayOf( - PropTypes.shape({ - level: PropTypes.string, - name: PropTypes.string, - }), - ), -}; - -Location.defaultProps = { - className: undefined, - highlights: undefined, - isLoading: undefined, - tags: undefined, -}; - -export default Location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js deleted file mode 100644 index 07603640b..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Location from "."; - -import { hurumapArgs } from "@/climatemappedafrica/config"; - -const { location } = hurumapArgs; - -export default { - title: "Components/HURUmap/Location", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = location; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js deleted file mode 100644 index e659b2925..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( - 19, - )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }, - highlights: { - borderTop: `1px solid ${palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }, -})); - -export default useStyles; diff --git a/apps/pesayetu/jsconfig.json b/apps/pesayetu/jsconfig.json index a301d3100..479e1deda 100644 --- a/apps/pesayetu/jsconfig.json +++ b/apps/pesayetu/jsconfig.json @@ -4,6 +4,8 @@ "paths": { "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"], "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"], + "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"], + "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"], "@/pesayetu/*": ["./src/*"] } }, diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js index 528b3140d..aa063f098 100644 --- a/apps/pesayetu/src/components/ExplorePage/index.js +++ b/apps/pesayetu/src/components/ExplorePage/index.js @@ -1,4 +1,5 @@ -import { Box } from "@mui/material"; +import { Location } from "@hurumap/core"; +import { Box, useTheme } from "@mui/material"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; @@ -8,7 +9,6 @@ import useExplore from "./useExplore"; import useProfileGeography from "./useProfileGeography"; import useStyles from "./useStyles"; -import Location from "@/pesayetu/components/HURUmap/Location"; import Panel from "@/pesayetu/components/HURUmap/Panel"; const Map = dynamic(() => import("@/pesayetu/components/HURUmap/Map"), { @@ -26,6 +26,7 @@ function initialState(profiles, onClick) { } function ExplorePage({ panelProps, profile: profileProp, ...props }) { + const theme = useTheme(); const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at // this point, useReducer hasn't been called yet so we can't use @@ -138,7 +139,18 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) { highlights={highlights} isLoading={isLoading} tags={tags} - className={classes.location} + sx={{ + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex", + left: 0, + margin: "0 auto", + position: "absolute", + right: 0, + top: theme.typography.pxToRem(52), + zIndex: theme.zIndex.appBar, + }, + }} /> diff --git a/apps/pesayetu/src/components/ExplorePage/useStyles.js b/apps/pesayetu/src/components/ExplorePage/useStyles.js index 78b4f7e67..1f1febd38 100644 --- a/apps/pesayetu/src/components/ExplorePage/useStyles.js +++ b/apps/pesayetu/src/components/ExplorePage/useStyles.js @@ -1,66 +1,52 @@ import makeStyles from "@mui/styles/makeStyles"; -const useStyles = makeStyles( - ({ breakpoints, palette, typography, zIndex }) => ({ - root: { - position: "relative", - height: "calc(100vh - 88px)", - [breakpoints.up("lg")]: { - height: "calc(100vh - 110px)", - position: "fixed", - left: 0, - right: 0, - }, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - map: { - display: "none", - [breakpoints.up("md")]: { - display: "block", - }, +const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ + root: { + position: "relative", + height: "calc(100vh - 88px)", + [breakpoints.up("lg")]: { + height: "calc(100vh - 110px)", + position: "fixed", + left: 0, + right: 0, }, - location: { - display: "none", - [breakpoints.up("md")]: { + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, display: "flex", - left: 0, + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, margin: "0 auto", - position: "absolute", - right: 0, - top: typography.pxToRem(52), - zIndex: zIndex.appBar, + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", }, }, - }), -); + }, + map: { + display: "none", + [breakpoints.up("md")]: { + display: "block", + }, + }, +})); export default useStyles; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js deleted file mode 100644 index 4b181ea1b..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { LocationTag, LocationHighlight } from "@hurumap/core"; -import { Box } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; - -import useStyles from "./useStyles"; - -function Location({ className, highlights, isLoading, tags, ...props }) { - const classes = useStyles(props); - - if (!tags?.length) { - return null; - } - return ( - - - {tags.map((tag, index) => ( - ({ - "&:not(:first-of-type)": { - marginLeft: theme.typography.pxToRem(10), - }, - })} - /> - ))} - - {highlights?.length > 0 ? ( - - {highlights.map((highlight) => ( - ({ - paddingTop: "4.5px", - "&:not(:first-of-type)": { - borderLeft: `1px solid ${theme.palette.grey.main}`, - }, - })} - /> - ))} - - ) : null} - - ); -} - -Location.propTypes = { - className: PropTypes.string, - highlights: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - number: PropTypes.number, - }), - ), - isLoading: PropTypes.bool, - tags: PropTypes.arrayOf( - PropTypes.shape({ - level: PropTypes.string, - name: PropTypes.string, - }), - ), -}; - -Location.defaultProps = { - className: undefined, - highlights: undefined, - isLoading: undefined, - tags: undefined, -}; - -export default Location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js b/apps/pesayetu/src/components/HURUmap/Location/index.stories.js deleted file mode 100644 index ee0808c45..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Location from "."; - -import { hurumapArgs } from "@/pesayetu/config"; - -const { location } = hurumapArgs; - -export default { - title: "HURUmap/Components/Location", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = location; diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js deleted file mode 100644 index e659b2925..000000000 --- a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - background: alpha("#FFFFFF", 0.9), // #FFFFFFE6 - borderRadius: typography.pxToRem(5), - bottom: "auto", - boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`, // #00000029 - padding: `${typography.pxToRem(4.12)} ${typography.pxToRem( - 19, - )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`, - width: typography.pxToRem(600), - }, - highlights: { - borderTop: `1px solid ${palette.grey.main}`, - marginTop: 4.5, - width: "100%", - }, -})); - -export default useStyles; diff --git a/apps/uibook/stories/HURUmap/core/Location.stories.js b/apps/uibook/stories/HURUmap/core/Location.stories.js new file mode 100644 index 000000000..11c6d96ae --- /dev/null +++ b/apps/uibook/stories/HURUmap/core/Location.stories.js @@ -0,0 +1,50 @@ +import { Location } from "@hurumap/core"; +import React from "react"; + +export default { + title: "@hurumap/core/Location", + argTypes: { + highlights: { + control: { + type: "array", + }, + }, + tags: { + control: { + type: "array", + }, + }, + }, +}; + +function Template({ ...args }) { + return ; +} + +export const Default = Template.bind({}); + +Default.args = { + isLoading: false, + highlights: [ + { + title: "Population", + value: "10,000,000", + }, + { + title: "GDP", + value: "10,000,000", + }, + ], + tags: [ + { + href: "/explore", + level: "Country", + name: "Kenya", + }, + { + href: "/explore/county-11", + level: "County", + name: "Isiolo", + }, + ], +}; diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js new file mode 100644 index 000000000..a9ecd95bb --- /dev/null +++ b/packages/hurumap-core/src/Location/Location.js @@ -0,0 +1,80 @@ +import { Box, Grid, useTheme } from "@mui/material"; +import { alpha } from "@mui/material/styles"; +import React from "react"; + +import LocationHighlight from "@/hurumap/core/LocationHighlight"; +import LocationTag from "@/hurumap/core/LocationTag"; + +const Location = React.forwardRef(function Location( + { highlights, isLoading, tags, ...props }, + ref, +) { + const theme = useTheme(); + return ( + + + {tags.map((tag, index) => ( + + + + ))} + + + {highlights?.length > 0 ? ( + + {highlights.map((highlight) => ( + + ))} + + ) : null} + + + ); +}); + +export default Location; diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js new file mode 100644 index 000000000..a31669970 --- /dev/null +++ b/packages/hurumap-core/src/Location/Location.snap.js @@ -0,0 +1,88 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Location renders unchanged 1`] = ` +
+
+
+
+
+
+ Country +
+ + Kenya + +
+
+
+
+
+ County +
+ + Isiolo + +
+
+
+
+
+
+
+ Population +
+

+ 10,000,000 +

+
+
+
+ GDP +
+

+ 10,000,000 +

+
+
+
+
+
+`; diff --git a/packages/hurumap-core/src/Location/Location.test.js b/packages/hurumap-core/src/Location/Location.test.js new file mode 100644 index 000000000..98bf79748 --- /dev/null +++ b/packages/hurumap-core/src/Location/Location.test.js @@ -0,0 +1,37 @@ +import { render } from "@commons-ui/testing-library"; +import React from "react"; + +import Location from "./Location"; + +const defaultProps = { + isLoading: false, + highlights: [ + { + title: "Population", + value: "10,000,000", + }, + { + title: "GDP", + value: "10,000,000", + }, + ], + tags: [ + { + href: "/explore", + level: "Country", + name: "Kenya", + }, + { + href: "/explore/county-11", + level: "County", + name: "Isiolo", + }, + ], +}; + +describe("Location", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/hurumap-core/src/Location/index.js b/packages/hurumap-core/src/Location/index.js new file mode 100644 index 000000000..946f173c3 --- /dev/null +++ b/packages/hurumap-core/src/Location/index.js @@ -0,0 +1,3 @@ +import Location from "./Location"; + +export default Location; diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js index 881ae0422..3149c42c1 100644 --- a/packages/hurumap-core/src/index.js +++ b/packages/hurumap-core/src/index.js @@ -1,3 +1,4 @@ /* eslint-disable import/prefer-default-export */ export { default as LocationTag } from "./LocationTag"; export { default as LocationHighlight } from "./LocationHighlight"; +export { default as Location } from "./Location";