@abcagency/hc-ui-components 1.0.0

package/src/components/modules/maps/list/list-item/index.js

@@ -0,0 +1,133 @@
+import React, { forwardRef } from 'react';
+import Grid, { GridItem } from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/maps/list/field-mapper';
+import { useMapList } from '~/contexts/mapListContext';
+
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			favorites,
+			setFavorites,
+			...props
+		},
+		ref,
+	) => {
+		const {siteConfig } = useMapList();
+		const mapPinColor = siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = event => {
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			setFavorites(updatedFavorites);
+
+		};
+
+		return (
+			<button
+				ref={ref}
+				onClick={handleClick}
+				className={`
+               group relative flex md:flex-col w-full md:pl-4 text-left bg-clip-border border border-transparent break-words overflow-hidden cursor-pointer transition-colors hover:bg-uiAccent/5 focus:hover:bg-uiAccent/5
+					${isActive ? "bg-uiAccent/5 border-secondary border" : "text-uiText bg-white"}
+					${className ?? ""}
+            `}
+				{...props}
+			>
+				<Grid
+					columns="grid-flow-col auto-cols-fr"
+					gap="gap-2"
+					isAnimated={false}
+					className={`
+                    block md:grid flex-auto p-2 ps-4 w-full grow leading-tight text-sm md:text-xs lg:text-sm
+                    ${bodyClassName ?? ""}
+                `}
+				>
+					<Grid.Item className="hidden md:block md:absolute md:left-1.5 top-1.5">
+						<span className="sr-only">Expand row</span>
+						<Icon
+							icon="fluent-emoji-high-contrast:plus"
+							size="w-2.5 h-2.5"
+							className={`
+								opacity-0 text-uiText/60 transition group-hover:opacity-100 group-active:opacity-100
+								${isActive ? "opacity-100 rotate-45" : ""}
+							`}
+						/>
+
+					</Grid.Item>
+
+					<FieldMapper
+						item={item}
+						fieldsShown={fieldsShown}
+						specialFeatures={specialFeatures}
+						isFavorite={isFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					<Grid.Item
+						key={"favorites"}
+						className="hidden md:block"
+					>
+
+						<Icon
+							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+							size="w-3.5 h-3.5"
+							iconClasses={isFavorite ? "text-primary" : ""}
+							title={!isFavorite ? 'Add job to favorites': 'Remove job from favorites'}
+							className={`
+							pr-2 transition-opacity duration-300 cursor-pointer opacity-100"
+						`}
+							onClick={e => handleFavouriteClick(e)}
+						/>
+					</Grid.Item>
+				</Grid>
+
+				{showMap && (
+					<div onClick={() => {setMobileTab("mapTab"); handleClick();}} className="md:hidden w-2/5 sm:w-1/3 p-1.5 my-1 bg-uiAccent/5 border border-uiAccent/10 rounded-sm">
+						<img
+							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=ToDo`}
+							alt={`Map of location for ${item.fields.position}`}
+							className="w-full h-full object-cover"
+						/>
+					</div>
+				)}
+			</button>
+		);
+	},
+);
+
+ListItem.displayName = "ListItem";
+
+export default React.memo(ListItem, (prevProps, nextProps) => {
+	return (
+		(prevProps.isActive === nextProps.isActive ||
+			prevProps.isActive !== nextProps.isActive) &&
+		prevProps.bodyClassName === nextProps.bodyClassName &&
+		prevProps.className === nextProps.className &&
+		prevProps.fieldsShown === nextProps.fieldsShown &&
+		prevProps.item.id === nextProps.item.id
+	);
+});

package/src/components/modules/maps/map-list.js

@@ -0,0 +1,73 @@
+import List from "~/components/modules/maps/list";
+import Map from "~/components/modules/maps/map";
+import Tabs from "~/components/modules/maps/tabs";
+import Filter from "~/components/modules/filter";
+import React from 'react'
+
+const MapList = ({
+	loading = false,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings
+}) => {
+
+	const listProps = {
+		fieldsShown: fieldsShown,
+		fieldNames: fieldNames,
+		itemExpandedContent: itemExpandedContent,
+		loading: loading,
+		showMap: showMap,
+		specialFeatures: specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails: mapDetails,
+		markerConfigs: markerConfigs,
+		placeMappings: placeMappings,
+		clusterGridSize: 60,
+		showMap: showMap
+	};
+
+	// useEffect(() => {
+	// 	if (selectedItem !== null) {
+	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
+	// 	}
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, []);
+	const map = <Map {...mapProps} />;
+	return (
+		<>
+			<div
+				className={`
+					${showMap == false ? "md:grid-rows-[100vh]" : "md:grid-rows-[50vh_50vh]"}
+					md:grid md:pt-4 overflow-hidden relative
+				`}
+			>
+				<div className="">
+					<List {...listProps} />
+				</div>
+				<div>{showMap && map}</div>
+			</div>
+			<div className="md:hidden">
+				<Tabs
+					showMap={showMap}
+					list={<List {...listProps} />}
+					map={!loading && showMap && map}
+					filter={
+						<Filter
+							showMap={showMap}
+							className="md:hidden"
+						/>
+					}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default MapList;

package/src/components/modules/maps/map-marker.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from "react";
+import { MarkerF, InfoWindow } from "@react-google-maps/api";
+import InfoWindowCard from "~/components/modules/maps/info-window-card";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import InfoWindowContent from "./info-window-content";
+
+const MapMarker = ({
+	item,
+	markerRefs,
+	infoWindowClasses,
+	markerClickHandler,
+	clusterer,
+	markerIconSelected,
+	markerIcon,
+	selectedLocation,
+	setMapInteracted
+}) => {
+	const { setLocation, commuteLocation } = useMap();
+	const isSelected = item.id === selectedLocation?.id;
+	const markerRef = useRef(null);
+
+	const {
+		handleFilterListingsByLocation
+	} = useMapList();
+
+	useEffect(() => {
+		markerRefs.current[item.id] = markerRef.current;
+	}, []);
+
+	const onMarkerClick = () => {
+		setMapInteracted(true);
+		markerClickHandler(item);
+	};
+
+	const getInfoWindow = () => {
+		if (!isSelected || !item || !item.id || !selectedLocation) {
+			return;
+		}
+		//Direct dom removal of empty info windows
+		document.querySelectorAll("div.gm-style-iw.gm-style-iw-c").forEach(x => { if (!x.innerHTML.includes(item.id)) x.parentElement.remove(); });
+		return (
+			<InfoWindow
+				position={{ lat: item.latitude, lng: item.longitude }}
+				anchor={markerRefs.current[item.id]}
+				onCloseClick={() => {
+					setMapInteracted(true);
+					setLocation(null);
+				}}
+				options={{ maxWidth: 400 }}
+			>
+				<InfoWindowCard
+					className={infoWindowClasses}
+					id={item.id}
+					content={<InfoWindowContent
+						item={item}
+						commuteLocation={commuteLocation}
+						filterListingsByLocation={() =>
+							handleFilterListingsByLocation(selectedLocation)
+						}
+					/>}
+				/>
+			</InfoWindow>
+		);
+	};
+	return (
+		<MarkerF
+			key={item.id}
+			position={{ lat: item.latitude, lng: item.longitude }}
+			title={item.name}
+			options={{
+				icon: isSelected ? markerIconSelected : markerIcon
+			}}
+			zIndex={isSelected ? 9999 : 1}
+			onLoad={marker => (markerRef.current = marker)}
+			onClick={onMarkerClick}
+			clusterer={clusterer}
+		>
+			{isSelected && getInfoWindow()}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;

package/src/components/modules/maps/map.js

@@ -0,0 +1,218 @@
+import React, { useEffect, useRef, useState } from "react";
+import { GoogleMap, MarkerF, MarkerClustererF, InfoWindowF } from "@react-google-maps/api";
+import MapMarker from "./map-marker";
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+import { clusterOptions } from "~/util/mapUtil";
+import { useMapList } from "~/contexts/mapListContext";
+import InfoWindowContent from "./info-window-content";
+import PlaceMarker from "./place-marker";
+import ShowAllButton from "../buttons/show-all-button";
+
+const Map = ({
+	markerConfigs,
+	infoWindowClasses,
+	clusterGridSize = 60
+}) => {
+	const {
+		location,
+		zoom,
+		center,
+		commuteLocation,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted
+	} = useMap();
+
+	const {
+		mapItems, handleFilterListingsByLocation, filteredListings,	setSelectedFilters,
+		setQuery
+	} = useMapList();
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const { poiMarkers, setCurrentCenter, currentCenter, setCurrentZoom, currentZoom, selectedPlaceMarker, setSelectedPlaceMarker, placesWindow, setPlacesWindow } =
+		usePlaces();
+
+	const onIdle = () => {
+		if(!currentCenter || !mapRef.current) return;
+		const newCenter = mapRef.current.getCenter().toJSON();
+		const newZoom = mapRef.current.zoom;
+
+		setCurrentCenter(newCenter);
+
+		if (newZoom != currentZoom) {
+			setCurrentZoom(newZoom);
+		}
+	};
+
+	useEffect(() => {
+		if (mapContainerRef.current) {
+		  const handleScroll = () => {
+				setMapInteracted(true);
+		  };
+		  var mapContainerRefCurrent = mapContainerRef.current;
+		  mapContainerRef.current.addEventListener('wheel', handleScroll);
+		  return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
+		}},[mapContainerRef.current]);
+
+	useEffect(() => {
+		if(mapRef.current){
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
+			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
+			return () => {
+				google.maps.event.removeListener(dragStartListener);
+				google.maps.event.removeListener(mouseDownListener);
+			};
+		}
+	  }, [mapRef.current, mapContainerRef.current]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
+			fitBounds(mapRef.current);
+		}
+	}, [mapItems, mapRef.current, location]);
+
+	useEffect(() => {
+		if (mapItems && mapItems.length > 0 || poiMarkers.length > 0 && mapRef.current && mapInteracted) {
+			fitBounds(mapRef.current, true);
+		}
+		if(mapRef.current){
+			let currZoom = mapRef.current.zoom;
+			let setZoomVal = currZoom < 13 ? currZoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [filteredListings]);
+
+	useEffect(() => {
+		if (!mapRef.current || !location || mapInteracted) return;
+		mapRef.current.panTo(
+			new google.maps.LatLng(location.latitude, location.longitude),
+		);
+		if(mapRef.current){
+			let setZoomVal = zoom < 13 ? zoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [location, zoom, mapRef.current]);
+
+	const fitBounds = (map, overload = false) => {
+		if((mapInteracted === false || overload) && mapItems != null){
+			const bounds = new window.google.maps.LatLngBounds();
+			mapItems.forEach(item => {
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+			});
+			if(!map) return;
+			map.fitBounds(bounds);
+		}
+		if(mapRef.current.zoom > 17){
+			mapRef.current.setZoom(16);
+		}
+	};
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		selectLocationEntity(mapLocation);
+	};
+
+	const onLoad = map => {
+		if (!location || location === null) {
+			  mapRef.current = map;
+			  fitBounds(map, true);
+			  return;
+		}
+		mapRef.current = map;
+
+		if(mapInteracted === false) {
+			  mapRef.current.panTo(
+				new google.maps.LatLng(location.latitude, location.longitude),
+			  );
+
+			  mapRef.current.setZoom(zoom);
+		}
+	};
+
+	const pinIconUrl = pinIcon({
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	  });
+
+	return (
+		<>{zoom && center && <div ref={mapContainerRef} className="h-full relative">
+			<GoogleMap
+				zoom={zoom}
+				onLoad={onLoad}
+				onIdle={onIdle}
+				center={center}
+				mapContainerStyle={{
+					width: "100%",
+					height: "100%"
+				}}
+				options={{
+					styles: [
+						{
+							featureType: "poi",
+							elementType: "labels",
+							stylers: [{ visibility: "off" }]
+						}
+					]
+				}}
+			>
+				<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
+					{clusterer => (
+						<>
+							{mapItems.map(item => (
+								<MapMarker
+									key={item.id}
+									item={item}
+									selectedLocation={location}
+									markerRefs={markerRefs}
+									infoWindowClasses={infoWindowClasses}
+									setSelectedLocation={setLocation}
+									markerClickHandler={markerClickHandler}
+									clusterer={clusterer}
+									markerIcon={markerIcon(markerConfigs)}
+									markerIconSelected={markerIconSelected(markerConfigs)}
+									setMapInteracted={setMapInteracted}
+								/>
+							))}
+							{poiMarkers && poiMarkers.markers.map((marker, index) => {
+								return (
+									<PlaceMarker
+										key={`marker-${marker.title}-${index}`}
+										marker={marker}
+										index={index}
+										selectedPlaceMarker={selectedPlaceMarker}
+										placesWindow={placesWindow}
+										setPlacesWindow={setPlacesWindow}
+										setSelectedPlaceMarker={setSelectedPlaceMarker}
+								  />
+								);
+							})}
+						</>
+					)}
+				</MarkerClustererF>
+			</GoogleMap>
+			{mapInteracted && markerConfigs && (
+				<ShowAllButton
+					mapInteracted={mapInteracted}
+					markerConfigs={markerConfigs}
+					setMapInteracted={setMapInteracted}
+					fitBounds={fitBounds}
+					mapRef={mapRef}
+					pinIconUrl={pinIconUrl}
+					setQuery={setQuery}
+					listingCount={filteredListings.length}
+					setSelectedFilters={setSelectedFilters}
+				/>
+			)}
+		</div>
+		}
+		</>
+	);
+};
+
+export default Map;

package/src/components/modules/maps/place-marker.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Marker, InfoWindowF } from '@react-google-maps/api';
+
+const PlaceMarker = ({
+	marker,
+	index,
+	selectedPlaceMarker,
+	setSelectedPlaceMarker,
+	placesWindow,
+	setPlacesWindow
+}) => {
+	const markerKey = `marker-${marker.title}-${index}`;
+
+	const placeMarkerClickHandler = () => {
+		setSelectedPlaceMarker(markerKey);
+		setPlacesWindow(true);
+	};
+
+	return (
+		<Marker
+			key={markerKey}
+			position={marker.position}
+			title={marker.title}
+			icon={marker.icon}
+			options={{ optimized: false }}
+			onClick={placeMarkerClickHandler}
+		>
+			{selectedPlaceMarker === markerKey && placesWindow && marker &&(
+				<InfoWindowF
+					position={marker.position}
+					onCloseClick={() => setPlacesWindow(false)}
+					options={{ maxWidth: 400 }}
+				>
+					<div>{marker.title}</div>
+				</InfoWindowF>
+			)}
+		</Marker>
+	);
+};
+
+export default PlaceMarker;

package/src/components/modules/maps/tabs.js

@@ -0,0 +1,79 @@
+import * as Tabs from "@radix-ui/react-tabs";
+import Button from "~/components/modules/buttons/default";
+import { useMapList } from "~/contexts/mapListContext";
+import React from 'react'
+
+const MapTabs = ({
+	map,
+	list,
+	filter,
+	className,
+	showMap
+}) => {
+	const tabButtonClasses =
+		"flex items-center gap-2 rounded-none border-x-0 data-[state=active]:bg-primary data-[state=active]:text-white";
+	const { mobileTab, setMobileTab } = useMapList();
+	return (
+		<div
+			className={`
+				relative overflow-hidden
+				${className ?? ""}
+			`}
+		>
+			<Tabs.Root
+				className="flex flex-col h-screen min-h-screen"
+				//defaultValue="listTab"
+				value={mobileTab}
+			>
+				<Tabs.List
+					className="w-full shrink-0 flex divide-x divide-primary"
+					aria-label="Review positions"
+				>
+					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="justify-center">
+								<Button.Icon icon="mdi:view-list" size="w-5 h-5" />
+								List
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+					{showMap && (
+						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
+							<Button.Btn
+								variant="outline"
+								isBlock
+								className={tabButtonClasses}
+							>
+								<Button.Body className="justify-center">
+									<Button.Icon icon="mdi:map" size="w-5 h-5" />
+									Map
+								</Button.Body>
+							</Button.Btn>
+						</Tabs.Trigger>
+					)}
+					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="justify-center">
+								<Button.Icon icon="fluent:search-12-filled" size="w-5 h-5" />
+								Filter
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content className="grow bg-white outline-none" value="listTab">
+					{list}
+				</Tabs.Content>
+				{showMap && (
+					<Tabs.Content className="grow bg-white outline-none" value="mapTab">
+						{map}
+					</Tabs.Content>
+				)}
+				<Tabs.Content className="grow bg-white outline-none p-2" value="filterTab">
+					{filter}
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+	);
+};
+
+export default MapTabs;

package/src/components/modules/navigation/nav-link.js

@@ -0,0 +1,65 @@
+import { forwardRef } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import React from 'react'
+
+const NavLink = ({ children }) => {
+  return (
+    <>{children}</>
+  );
+};
+
+export const Anchor = ({
+  to,
+  children,
+  activeClassName,
+  className,
+  partiallyActive = false,
+  ...rest
+}) => {
+  const location = useLocation();
+  const isActive = (activeClassName && location.pathname === to) || (location.pathname.startsWith(`${to}/`) && partiallyActive);
+
+  return (
+    <Link
+      to={to}
+      className={`
+        group
+        ${className ?? ''}
+        ${isActive ? `is-active ${activeClassName}` : ''}
+      `}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export const ScrollAnchor = forwardRef((props, ref) => {
+  const {
+    children,
+    to,
+    className,
+    size,
+    variant,
+    isBlock,
+    hasUnderline,
+    ...rest
+  } = props;
+
+  return (
+    <Link
+      ref={ref}
+      to={`#${to}`}
+      className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+});
+
+NavLink.Anchor = Anchor;
+NavLink.ScrollAnchor = ScrollAnchor;
+
+ScrollAnchor.displayName = 'NavLink:ScrollAnchor';
+export default NavLink;