Reusable HURUMap Components

[kelvinkipruto]

Description

This PR makes HURUMap components reusable across multiple apps. This is done so as to reuse them for PesaYetu.
PS: This PR however does not move components that import assets/svg.

Type of change

• New feature (non-breaking change which adds functionality)

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

[koechkevin]

@kelvinkipruto We could break this PR to smaller PRs. I think it is really important in migrating PesaYetu.

[kilemensi]

@CodeForAfrica/tech

[kilemensi]

Can we get this reviewed & merged today @CodeForAfrica/tech ?

[m453h]

🚀
@kelvinkipruto , I have one question regarding the migration.... if a reusable HURUmap component is importing something from @commons-ui/next does that necessarily mean that it should be in @hurumap-next ?

[kilemensi]

Besides the question from @m453h, is there anything holding this PR back @kelvinkipruto ?

[kelvinkipruto]

@kilemensi Nothing else holding it back.

[m453h]

@kilemensi Nothing else holding it back.

@kelvinkipruto to add a bit more context on this....I had seen there are a couple of components in hurumap-core importing from @commons-ui/next as listed below

./src/Card/ActionArea.js
./src/Card/Card.js
./src/RichHeader/RichHeader.js
./src/DataVisualisationGuide/index.js
./src/HowItWorks/index.js
./src/Menu/index.js
./src/LineClampedRichTypography/LineClampedRichTypography.js
./src/Header/Header.js

In my mind I had thought they should automatically be in hurumap-next instead of hurumap-core

[kilemensi]

I'm probably missing something but these are the components in @hurumap-core package @m453h :

drwxr-xr-x@    - clemence 30 Jan 09:17  Action
drwxr-xr-x@    - clemence 26 Feb 18:24  ChartTooltip
drwxr-xr-x@    - clemence 30 Jan 09:17  Download
.rw-r--r--@  478 clemence  7 Aug  2024  index.js
drwxr-xr-x@    - clemence 27 Feb 14:49  IndicatorTitle
drwxr-xr-x@    - clemence 30 Jan 09:17  Location
drwxr-xr-x@    - clemence 30 Jan 09:17  LocationHighlight
drwxr-xr-x@    - clemence 28 Oct  2024  LocationTag
drwxr-xr-x@    - clemence 27 Feb 14:49  Scope
drwxr-xr-x@    - clemence 27 Feb 14:49  Share

Card, RichHeader, etc., are not in @hurumap-core. Are we talking about the same package?

[kilemensi]

... or are those the new components @kelvinkipruto is trying to move into @hurumap-core @m453h ?

[kelvinkipruto]

@m453h @hurumap/next should have dependencies that rely directly on nextjs. They can then be reused across any package.

[kilemensi]

If it's missing, lets update the packages' respective READMEs @kelvinkipruto / @m453h :

1. @commons-ui/core depends on react and @mui/material
2. @commons-ui/next depends on @commons-ui/core + next
3. @hurumap/core depends on @commons-ui/core + basic HURUmap components (e.g. charts using vega)
4. @hurumap/next depends on @commons-ui/next + @hurumap/core + HURUmap components that require next

[m453h]

I'm probably missing something but these are the components in @hurumap-core package @m453h :

drwxr-xr-x@    - clemence 30 Jan 09:17  Action
drwxr-xr-x@    - clemence 26 Feb 18:24  ChartTooltip
drwxr-xr-x@    - clemence 30 Jan 09:17  Download
.rw-r--r--@  478 clemence  7 Aug  2024  index.js
drwxr-xr-x@    - clemence 27 Feb 14:49  IndicatorTitle
drwxr-xr-x@    - clemence 30 Jan 09:17  Location
drwxr-xr-x@    - clemence 30 Jan 09:17  LocationHighlight
drwxr-xr-x@    - clemence 28 Oct  2024  LocationTag
drwxr-xr-x@    - clemence 27 Feb 14:49  Scope
drwxr-xr-x@    - clemence 27 Feb 14:49  Share

Card, RichHeader, etc., are not in @hurumap-core. Are we talking about the same package?

these

Hold on

... or are those the new components @kelvinkipruto is trying to move into @hurumap-core @m453h ?

@kilemensi I was referring to the new components that are added/moved to @hurumap-core in this PR I believe the list you shared is on the main branch. This is the full list

❯ ls -lh
drwxr-xr-x   6 michael  staff   192B Feb 28 16:08 AboutTeam
drwxr-xr-x   6 michael  staff   192B Aug 19  2024 Action
drwxr-xr-x   9 michael  staff   288B Feb 28 16:08 Card
drwxr-xr-x   6 michael  staff   192B Feb 28 16:08 Carousel
drwxr-xr-x   7 michael  staff   224B Aug 19  2024 ChartTooltip
drwxr-xr-x   3 michael  staff    96B Feb 28 16:08 DataVisualisationGuide
drwxr-xr-x   7 michael  staff   224B Aug 19  2024 Download
drwxr-xr-x   6 michael  staff   192B Feb 28 16:08 Header
drwxr-xr-x   4 michael  staff   128B Feb 28 16:08 HowItWorks
drwxr-xr-x   6 michael  staff   192B Jan 15 00:12 IndicatorTitle
drwxr-xr-x   4 michael  staff   128B Feb 28 16:08 LineClampedRichTypography
drwxr-xr-x   4 michael  staff   128B Feb 28 16:08 Loading
drwxr-xr-x   6 michael  staff   192B Nov 22 12:03 Location
drwxr-xr-x   6 michael  staff   192B Aug 19  2024 LocationHighlight
drwxr-xr-x   6 michael  staff   192B Nov 22 12:03 LocationTag
drwxr-xr-x   4 michael  staff   128B Feb 28 16:08 Menu
drwxr-xr-x   6 michael  staff   192B Feb 28 16:08 PageHero
drwxr-xr-x   6 michael  staff   192B Feb 28 16:08 RichHeader
drwxr-xr-x  16 michael  staff   512B Feb 25 11:15 Scope
drwxr-xr-x   9 michael  staff   288B Dec 10 14:20 Share
drwxr-xr-x   6 michael  staff   192B Feb 28 16:08 Summary
-rw-r--r--   1 michael  staff   1.1K Feb 28 16:08 index.js

[kilemensi]

Then I guess over to @kelvinkipruto ... I believe my previous message should clear where each component should be going.

[kilemensi]

👍🏽

---

Looks like you still need to review what goes into which package.

[kilemensi]

Haven't run it locally but code LGTM 🚀

---

Create an issue to move all payload related code in the current @hurumap/next package into a new @hurumap/payload package (similar to @commons-ui/payload)

[kelvinkipruto]

Create an issue to move all payload related code in the current @hurumap/next package into a new @hurumap/payload package (similar to @commons-ui/payload)

Tracked in #1067