feat: map, dependency updates & unit tests working

Author: jaredcwhite

package.json

@@ -96,8 +96,6 @@
   },
   "dependencies": {},
   "resolutions": {
-    "@types/react": "19.2.2",
-    "@fortawesome/react-fontawesome": "3.1.0",
-    "react-map-gl": "8.1.0"
+    "@fortawesome/react-fontawesome": "3.1.0"
   }
 }

shared-helpers/package.json

@@ -17,8 +17,8 @@
     "prettier": "prettier --write \"**/*.ts\""
   },
   "dependencies": {
-    "@bloom-housing/ui-components": "13.0.1",
-    "@bloom-housing/ui-seeds": "bloom-housing/ui-seeds#fix-react-19-type-errors",
+    "@bloom-housing/ui-components": "bloom-housing/ui-components#4328/remove-listing-map",
+    "@bloom-housing/ui-seeds": "3.1.1",
     "@heroicons/react": "^2.1.1",
     "axios-cookiejar-support": "^5.0.5",
     "markdown-to-jsx": "^7.7.16",

shared-helpers/src/views/components/Map.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useEffect, useMemo } from "react"
 import "mapbox-gl/dist/mapbox-gl.css"
-import MapGL from "react-map-gl/mapbox"
-import { Marker } from "react-map-gl/mapbox"
+import { Map as MapGL, Marker } from "@vis.gl/react-mapbox"
 
 import styles from "./Map.module.scss"
 import { MultiLineAddress } from "./MultiLineAddress"
@@ -71,16 +70,16 @@ const Map = (props: MapProps) => {
   const onMarkerDragEnd = useCallback((event: any) => {
     if (props.setLatLong) {
       props.setLatLong({
-        latitude: event.lngLat[1],
-        longitude: event.lngLat[0],
+        latitude: event.lngLat.lat,
+        longitude: event.lngLat.lng,
       })
     }
     if (props.setCustomMapPositionChosen) {
       props.setCustomMapPositionChosen(true)
     }
     setMarker({
-      latitude: event.lngLat[1],
-      longitude: event.lngLat[0],
+      latitude: event.lngLat.lat,
+      longitude: event.lngLat.lng,
     })
   }, [])
 

sites/partners/package.json

@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
-    "@bloom-housing/ui-components": "13.0.1",
-    "@bloom-housing/ui-seeds": "bloom-housing/ui-seeds#fix-react-19-type-errors",
+    "@bloom-housing/ui-components": "bloom-housing/ui-components#4328/remove-listing-map",
+    "@bloom-housing/ui-seeds": "3.1.1",
     "@heroicons/react": "^2.2.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@tiptap/core": "^2.24.0",
@@ -56,6 +56,7 @@
     "react-dom": "19.2.0",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hook-form": "^6.15.5",
+    "react-map-gl": "^8.1.0",
     "swr": "^2.1.2",
     "tailwindcss": "2.2.10"
   },

sites/partners/src/components/applications/PaperApplicationForm/MultiselectQuestionsMap.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
-import { FieldGroup, LatitudeLongitude, ListingMap, t } from "@bloom-housing/ui-components"
+import { FieldGroup, t } from "@bloom-housing/ui-components"
+import { Map, LatitudeLongitude } from "@bloom-housing/shared-helpers"
 import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
 import { useFormContext, useWatch } from "react-hook-form"
 import { GeocodeService as GeocodeServiceType } from "@mapbox/mapbox-sdk/services/geocoding"
@@ -132,7 +133,7 @@ const MultiselectQuestionsMap = ({ geocodingClient, dataKey }: MultiselectQuesti
         <Grid.Cell>
           <FieldValue label={t("listings.mapPreview")}>
             {displayMapPreview() ? (
-              <ListingMap
+              <Map
                 address={{
                   city: buildingAddress.city,
                   state: buildingAddress.state,

sites/partners/src/components/listings/PaperListingForm/sections/BuildingDetails.tsx

@@ -5,12 +5,10 @@ import {
   Field,
   Select,
   FieldGroup,
-  ListingMap,
-  LatitudeLongitude,
   GridCell,
 } from "@bloom-housing/ui-components"
 import { FieldValue, Grid } from "@bloom-housing/ui-seeds"
-import { AuthContext, stateKeys } from "@bloom-housing/shared-helpers"
+import { AuthContext, stateKeys, Map, LatitudeLongitude } from "@bloom-housing/shared-helpers"
 import { FormListing } from "../../../../lib/listings/formTypes"
 import GeocodeService, {
   GeocodeService as GeocodeServiceType,
@@ -361,7 +359,7 @@ const BuildingDetails = ({
           <Grid.Cell className="seeds-grid-span-2">
             <FieldValue label={t("listings.mapPreview")} className={styles["custom-label"]}>
               {displayMapPreview() ? (
-                <ListingMap
+                <Map
                   listingName={listing?.name}
                   address={{
                     city: buildingAddress.city,

sites/public/package.json

@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
-    "@bloom-housing/ui-components": "13.0.1",
-    "@bloom-housing/ui-seeds": "bloom-housing/ui-seeds#fix-react-19-type-errors",
+    "@bloom-housing/ui-components": "bloom-housing/ui-components#4328/remove-listing-map",
+    "@bloom-housing/ui-seeds": "3.1.1",
     "@heroicons/react": "^2.1.1",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@sentry/nextjs": "^7.61.0",
@@ -49,6 +49,7 @@
     "react-dom": "19.2.0",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hook-form": "^6.15.5",
+    "react-map-gl": "^8.1.0",
     "tailwindcss": "2.2.10"
   },
   "devDependencies": {

sites/public/src/components/listing/listing_sections/Availability.tsx

@@ -164,7 +164,12 @@ export const Availability = ({ listing, jurisdiction }: AvailabilityProps) => {
         </Heading>
         {!alwaysShowStatusBar && subtitle && <p className={styles["bold-subheader"]}>{subtitle}</p>}
         {statusMessage && (
-          <p className={`${listingStyles["thin-heading-sm"]} seeds-m-bs-label`}>{statusMessage}</p>
+          <p
+            className={`${listingStyles["thin-heading-sm"]} seeds-m-bs-label`}
+            suppressHydrationWarning
+          >
+            {statusMessage}
+          </p>
         )}
         {content && <p className={"seeds-m-bs-label"}>{content}</p>}
         {subheading && subheading}

sites/public/src/components/listing/listing_sections/Features.tsx

@@ -25,8 +25,7 @@ export const Features = ({ children, features }: FeaturesProps) => {
             <HeadingGroup
               heading={feature.heading}
               subheading={feature.subheading}
-              headingProps={{ size: "lg"}}
-              headingPriority={3}
+              headingProps={{ size: "lg", priority: 3 }}
               className={`${styles["heading-group"]} seeds-m-be-section`}
               key={index}
             />

sites/public/src/components/listing/listing_sections/Neighborhood.tsx

@@ -72,7 +72,7 @@ export const Neighborhood = ({
           <HeadingGroup
             heading={t("t.region")}
             subheading={region}
-            headingProps={{ priorty: 3, size: "lg" }}
+            headingProps={{ priority: 3, size: "lg" }}
             className={`${styles["heading-group"]} seeds-m-bs-section`}
           />
         )}