@abcagency/hc-ui-components 1.3.21 → 1.3.23

package/src/components/containers/maps/map-container.js

@@ -1,204 +0,0 @@
-/* eslint-disable no-undef */
-import React, { useEffect, useRef } from 'react';
-
-import MapMarker from "~/components/containers/maps/map-marker-container";
-import PlaceMarker from "~/components/modules/maps/place-marker";
-
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-
-import Map from "~/components/modules/maps/map";
-
-const MapContainer = ({
-	markerConfigs,
-	infoWindowClasses,
-	clusterGridSize = 60
-}) => {
-	const {
-		location,
-		zoom,
-		center,
-		commuteLocation,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted
-	} = useMap();
-
-	const {
-		mapItems, 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
-	});
-
-	const mapMarkers = mapItems.map(item => (
-		<MapMarker
-			key={item.id}
-			item={item}
-			selectedLocation={location}
-			markerRefs={markerRefs}
-			infoWindowClasses={infoWindowClasses}
-			setSelectedLocation={setLocation}
-			markerClickHandler={markerClickHandler}
-			markerIcon={markerIcon(markerConfigs)}
-			markerIconSelected={markerIconSelected(markerConfigs)}
-			setMapInteracted={setMapInteracted}
-		/>
-	));
-
-	const placeMarkers = poiMarkers.markers.map((marker, index) => (
-		<PlaceMarker
-			key={`marker-${marker.title}-${index}`}
-			marker={marker}
-			index={index}
-			selectedPlaceMarker={selectedPlaceMarker}
-			placesWindow={placesWindow}
-			setPlacesWindow={setPlacesWindow}
-			setSelectedPlaceMarker={setSelectedPlaceMarker}
-		/>
-	));
-
-	return (
-		<Map
-			zoom={zoom}
-			center={center}
-			mapContainerRef={mapContainerRef}
-			onLoad={onLoad}
-			onIdle={onIdle}
-			clusterGridSize={clusterGridSize}
-			markerConfigs={markerConfigs}
-			mapMarkers={mapMarkers}
-			placeMarkers={placeMarkers}
-			mapInteracted={mapInteracted}
-			pinIconUrl={pinIconUrl}
-			setMapInteracted={setMapInteracted}
-			fitBounds={fitBounds}
-			mapRef={mapRef}
-			setQuery={setQuery}
-			filteredListingsLength={filteredListings.length}
-			setSelectedFilters={setSelectedFilters}
-		/>
-	);
-};
-
-export default MapContainer;

package/src/components/containers/maps/map-list-container.js

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import List from '~/components/containers/list/item-list-container';
-import Map from '~/components/containers/maps/map-container';
-import Filter from '~/components/modules/filter';
-import MapList from '~/components/modules/maps/map-list';
-
-const MapListContainer = ({
-	loading = false,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings
-}) => {
-
-	const listProps = {
-		fieldsShown,
-		fieldNames,
-		itemExpandedContent,
-		loading,
-		showMap,
-		specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails,
-		markerConfigs,
-		placeMappings,
-		clusterGridSize: 60,
-		showMap
-	};
-
-	return (
-		<MapList
-			showMap={showMap}
-			loading={loading}
-			list={<List {...listProps} />}
-			map={<Map {...mapProps} />}
-			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
-		/>
-	);
-};
-
-export default MapListContainer;

package/src/components/containers/maps/map-marker-container.js

@@ -1,78 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import MapMarker from '~/components/modules/maps/map-marker';
-import { InfoWindow } from '@react-google-maps/api';
-import InfoWindowCard from '~/components/modules/maps/info-window-card';
-import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
-
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const MapMarkerContainer = ({
-	item,
-	markerRefs,
-	infoWindowClasses,
-	markerClickHandler,
-	clusterer,
-	markerIconSelected,
-	markerIcon,
-	selectedLocation,
-	setMapInteracted
-}) => {
-	const { setLocation, commuteLocation } = useMap();
-	const isSelected = item.id === selectedLocation?.id;
-	const markerRef = useRef(null);
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { handleFilterListingsByLocation } = useMapList();
-
-	useEffect(() => {
-		markerRefs.current[item.id] = markerRef.current;
-	}, []);
-
-	const onMarkerClick = () => {
-		trackEvent(eventTypes.MAP_MARKER_CLICKED, {
-			entityDisplayName: item.entityDisplayName,
-			lat: item.latitude,
-			lng: item.longitude,
-			travelTime: item.travelTime
-		});
-		setMapInteracted(true);
-		markerClickHandler(item);
-	};
-
-	return (
-		<MapMarker
-			position={{ lat: item.latitude, lng: item.longitude }}
-			title={item.name}
-			icon={isSelected ? markerIconSelected : markerIcon}
-			zIndex={isSelected ? 9999 : 1}
-			onLoad={marker => (markerRef.current = marker)}
-			onClick={onMarkerClick}
-			clusterer={clusterer}
-		>
-			{isSelected && (
-				<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>
-			)}
-		</MapMarker>
-	);
-};
-
-export default MapMarkerContainer;

package/src/components/modules/accordions/MapAccordionItem.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import ItemExpandCard from '~/components/modules/list/item-expand-card';
-
-const MapAccordionItem = ({
-	item,
-	itemRefs,
-	itemExpandedContent,
-	isActive,
-	children
-}) => {
-	return (
-		<Accordion.Item key={item.id} id={item.id}>
-			<Accordion.Trigger.Blank>
-				<div ref={el => (itemRefs.current[item.id] = el)}>
-					{children}
-				</div>
-			</Accordion.Trigger.Blank>
-			{isActive &&
-
-        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
-        	{ <ItemExpandCard content={itemExpandedContent(item)} />}
-        </Accordion.Content>
-			}
-		</Accordion.Item>
-	);
-};
-
-export default MapAccordionItem;

package/src/components/modules/accordions/default.js

@@ -1,171 +0,0 @@
-import React, { forwardRef } from 'react';
-import * as RadixAccordion from '@radix-ui/react-accordion';
-import { twMerge } from 'tailwind-merge';
-
-import Icon from '~/components/modules/icon';
-
-const Accordion = ({
-	className,
-	type = 'single',
-	defaultValue,
-	collapsible = true,
-	children
-}) => {
-	return (
-		<RadixAccordion.Root
-			type={type}
-			value={defaultValue ?? null}
-			collapsible={collapsible}
-			className={className ?? ''}
-		>
-			{children}
-		</RadixAccordion.Root>
-	);
-};
-
-export const AccordionItem = forwardRef((
-	{
-		id,
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => {
-	return (
-		<RadixAccordion.Item
-			ref={forwardedRef}
-			value={id}
-			className={className ?? ''}
-			{...props}
-		>
-			{children}
-		</RadixAccordion.Item>
-	);
-});
-
-export const AccordionTrigger = forwardRef((
-	{
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header asChild>
-		<RadixAccordion.Trigger
-			ref={forwardedRef}
-			className={twMerge(
-				'hc-group hc-flex hc-justify-between hc-w-full hc-p-4 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none hfocus-visible:hcring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
-				className ?? ''
-			)}
-			{...props}
-		>
-			{children}
-			<Icon
-				icon="uil:angle-down"
-				size="hc-size-5"
-				className="hc-transition-transform group-data-[state=open]:!hc-rotate-180"
-				aria-hidden="true"
-			/>
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionTriggerHasHeader = forwardRef((
-	{
-		header,
-		headerClassName,
-		iconClassName,
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header
-		className={twMerge(
-			'hc-group hc-flex hc-items-start hc-justify-between hc-w-full hc-p-4 hc-pr-3 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none focus-visible:hc-ring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
-			headerClassName ?? ''
-		)}
-	>
-		<RadixAccordion.Trigger
-			ref={forwardedRef}
-			className={twMerge('hc-flex hc-items-center hc-justify-between hc-w-full', className ?? '')}
-			{...props}
-		>
-			{children}
-			<Icon
-				icon="uil:angle-down"
-				size="w-5 h-5"
-				className={twMerge(
-					'hc-transition-transform group-data-[state=open]:!hc-rotate-180',
-					iconClassName ?? ''
-				)}
-				aria-hidden="true"
-			/>
-			{header}
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionTriggerBlank = forwardRef((
-	{
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header asChild>
-		<RadixAccordion.Trigger
-			asChild
-			ref={forwardedRef}
-			{...props}
-		>
-			{children}
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionContent = forwardRef((
-	{
-		children,
-		className,
-		bodyClassName,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Content
-		ref={forwardedRef}
-		className={twMerge(
-			'data-[state=open]:hc-animate-slideDown data-[state=closed]:hc-animate-slideUp hc-overflow-hidden',
-			className ?? ''
-		)}
-		{...props}
-	>
-		<div
-			className={twMerge(
-				'hc-p-4 hc-pt-0.5',
-				bodyClassName ?? ''
-			)}
-		>
-			{children}
-		</div>
-	</RadixAccordion.Content>
-));
-
-Accordion.Item = AccordionItem;
-Accordion.Trigger = AccordionTrigger;
-Accordion.Trigger.Blank = AccordionTriggerBlank;
-Accordion.Trigger.HasHeader = AccordionTriggerHasHeader;
-Accordion.Content = AccordionContent;
-
-AccordionItem.displayName = 'AccordionItem';
-AccordionTrigger.displayName = 'AccordionTrigger';
-AccordionTriggerBlank.displayName = 'AccordionTriggerBlank';
-AccordionTriggerHasHeader.displayName = 'AccordionTriggerHasHeader';
-AccordionContent.displayName = 'AccordionContent';
-
-export default Accordion;

package/src/components/modules/accordions/filterItem.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-
-const AccordionFilterItem = ({
-	id,
-	setDefaultValue,
-	header,
-	body
-}) => {
-	return (
-		<Accordion.Item key={id} id={id}>
-			<Accordion.Trigger.HasHeader
-				onClick={() => setDefaultValue(id)}
-				className="hc-stretched-link hc-text-left"
-				iconClassName="hc-order-last"
-				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
-			>
-				{header}
-			</Accordion.Trigger.HasHeader>
-			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
-				{body}
-			</Accordion.Content>
-		</Accordion.Item>
-	);
-};
-
-export default AccordionFilterItem;

package/src/components/modules/accordions/filters.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import FilterCard from '~/components/modules/cards/filter';
-import Loading from '~/util/loading';
-
-const AccordionFilters = ({
-	className,
-	defaultValue,
-	children,
-	filterOptions
-}) => {
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fa-solid:sliders-h">
-				<span>
-          Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
-				</span>
-			</FilterCard.Title>
-
-			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
-				{!filterOptions?.filters && (
-					<Accordion.Item>
-						<Loading />
-					</Accordion.Item>
-				)}
-				{filterOptions?.filters && children}
-			</Accordion>
-		</FilterCard>
-	);
-};
-
-export default AccordionFilters;