@abcagency/hc-ui-components 1.0.0

package/src/contexts/placesContext.js

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { markerIconProps } from '~/util/mapIconUtil';
+import { useMap } from '~/contexts/mapContext';
+import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
+const PlacesContext = createContext();
+
+export const usePlaces = () => useContext(PlacesContext);
+
+export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
+	const { selectedPlaces, zoom, center } = useMap();
+	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
+	const [currentCenter, setCurrentCenter] = useState(center);
+	const [currentZoom, setCurrentZoom] = useState(zoom);
+	const [placesWindow, setPlacesWindow] = useState(false);
+	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
+
+	const getRadiusForZoom = () => {
+		if (currentZoom >= 18) return 1000;
+		if (currentZoom <= 10) return 0;
+
+		let tempZoom = Math.pow(19 - currentZoom, 4.85);
+		let radius = tempZoom;
+		let minRadius = 1500;
+		let maxRadius = 800000;
+
+		if (radius < minRadius) radius = minRadius;
+		else if (radius > maxRadius) radius = maxRadius;
+
+		return radius;
+	};
+
+	useEffect(() => {
+		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
+			setPoiMarkers({ markers: [], icon: null });
+			return;
+		}
+		const fetchPlaces = async () => {
+			let poiTypes = [];
+			const selectedPOICategories = selectedPlaces;
+			selectedPOICategories.forEach(pointOfInterest => {
+				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
+			});
+
+			const radius = getRadiusForZoom();
+			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
+
+			try {
+				const response = await searchNearbyPlaces(poiTypes, location, radius);
+				const newMarkers = response.places.map(place => {
+					const getParentCategory = types => {
+						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
+							return acc.concat(placeMappings[category]);
+						}, []);
+
+						for (const type of types) {
+							if (!selectedTypes.includes(type)) continue;
+							for (const category in placeMappings) {
+								if (placeMappings[category].includes(type)) {
+									return category;
+								}
+							}
+
+						}
+					};
+
+					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
+
+					return {
+						position: { lat: place.location.latitude, lng: place.location.longitude },
+						title: place.displayName.text,
+						icon: icon
+					};
+				});
+				setPoiMarkers({ markers: newMarkers, icon: null });
+			} catch (error) {
+				console.error('Failed to fetch places:', error);
+			}
+		};
+
+		fetchPlaces();
+	}, [selectedPlaces, currentZoom, currentCenter]);
+
+	return (
+		<PlacesContext.Provider value={{
+			poiMarkers,
+			setCurrentCenter,
+			currentCenter,
+			setCurrentZoom,
+			currentZoom,
+			placesWindow,
+			setPlacesWindow,
+			selectedPlaceMarker,
+			setSelectedPlaceMarker
+		}}>
+			{children}
+		</PlacesContext.Provider>
+	);
+};

package/src/hooks/useClickOutside.js

@@ -0,0 +1,16 @@
+import useEventListener from '~/hooks/useEventListener';
+
+const isBrowser = typeof window !== "undefined";
+
+const useClickOutside = (ref, cb) => {
+	useEventListener(
+		'click',
+		e => {
+			if (ref.current == null || ref.current.contains(e.target)) return;
+			cb(e);
+		},
+		isBrowser ? document : null
+	);
+};
+
+export default useClickOutside;

package/src/hooks/useEventListener.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+
+const isBrowser = typeof window !== "undefined";
+
+const useEventListener = (
+	eventType,
+	callback,
+	element = isBrowser ?? window
+) => {
+	const callbackRef = useRef(callback);
+
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+
+	useEffect(() => {
+		if (element == null) return;
+		const handler = e => callbackRef.current(e);
+		element.addEventListener(eventType, handler);
+
+		return () => element.removeEventListener(eventType, handler);
+	}, [eventType, element]);
+};
+
+export default useEventListener;

package/src/hooks/useEventTracker.js

@@ -0,0 +1,19 @@
+const isBrowser = typeof window !== 'undefined';
+
+if (isBrowser) {
+	window.dataLayer = window.dataLayer || [];
+}
+
+const trackEvent = (category, action, label, value) => {
+	if (isBrowser && window.dataLayer) {
+		window.dataLayer.push({
+			'event': 'eventTracking',
+			'category': category,
+			'action': action,
+			'label': label,
+			'value': value
+		});
+	}
+};
+
+export default trackEvent;

package/src/hooks/useList.js

@@ -0,0 +1,102 @@
+import { useEffect, useState, useRef } from "react";
+import { getStorageObject } from "~/util/localStorageUtil";
+import { dynamicSort } from "~/util/sortUtil";
+import { useMapList } from '~/contexts/mapListContext';
+
+const getDefaultItemId = () => {
+	let item = getStorageObject("selectedListItem");
+	if(item?.expanded == true){
+		return item.id;
+	}else{
+		return null;
+	}
+};
+
+const useListLogic = () => {
+	const [itemLimit, setItemLimit] = useState(100);
+	const [expandedId] = useState(getDefaultItemId());
+	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
+	const [scrollPosition, setScrollPosition] = useState(getStorageObject('scrollPosition',0));
+	const loader = useRef(null);
+	const scrollContainerRef = useRef(null);
+	const itemRefs = useRef({});
+	const observer = useRef(null);
+	const { filteredListings, setFilteredListings } = useMapList();
+
+	useEffect(() => {
+		if(!sortSetting) return;
+		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
+		let listingFiltered = dynamicSort(filteredListings, sortSetting.field, sortSetting.type);
+		setFilteredListings(listingFiltered);
+	},[sortSetting]);
+
+	useEffect(() => {
+		observer.current = new IntersectionObserver(handleObserver, {
+			root: scrollContainerRef.current,
+			rootMargin: "100px 0px",
+			threshold: 0.5
+		});
+		if (loader.current) {
+			observer.current.observe(loader.current);
+		}
+		return () => {
+			if (observer.current && loader.current) {
+				observer.current.unobserve(loader.current);
+			}
+		};
+	}, [loader.current, itemLimit, filteredListings.length]);
+
+	useEffect(() => {
+		localStorage.setItem('scrollPosition', scrollPosition.toString());
+	}, [scrollPosition]);
+
+	useEffect(() => {
+		const savedScrollPosition = scrollPosition;
+		if(parseInt(savedScrollPosition) > 3000){
+			setItemLimit(savedScrollPosition / 10);
+		}
+		if (savedScrollPosition && scrollPosition != null && scrollContainerRef.current) {
+			let scrollContainerRefCurrent = scrollContainerRef.current;
+			setTimeout(() => {
+				scrollContainerRefCurrent = parseInt(savedScrollPosition, 10);
+			}, 300);
+		}
+	}, []);
+
+	useEffect(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (scrollContainer) {
+			scrollContainer.addEventListener('scroll', handleScroll);
+		}
+		return () => {
+			if (scrollContainer) {
+				scrollContainer.removeEventListener('scroll', handleScroll);
+			}
+		};
+	}, [scrollContainerRef.current]);
+
+	const handleObserver = entities => {
+		const target = entities[0];
+		if (!target.isIntersecting) return;
+		if (filteredListings.length > itemLimit) {
+			setItemLimit(prevLimit => prevLimit + 100);
+		} else if (observer.current) {
+			observer.current.disconnect();
+		}
+
+	};
+
+	if(sortSetting){
+		dynamicSort(filteredListings, sortSetting.field, sortSetting.type);
+	}
+
+	const handleScroll = () => {
+		if (scrollContainerRef.current) {
+			setScrollPosition(scrollContainerRef.current.scrollTop);
+		}
+	};
+
+	return { itemLimit, expandedId, sortSetting, scrollPosition, loader, scrollContainerRef, itemRefs, setSortSetting, setScrollPosition, dynamicSort, filteredListings };
+};
+
+export default useListLogic;

package/src/hooks/useRefScrollProgress.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import useWindowSize from './useWindowSize';
+
+export default function useRefScrollProgress({ inputRef }) {
+	const ref = inputRef;
+	const [start, setStart] = useState(null);
+	const [end, setEnd] = useState(null);
+	const size = useWindowSize();
+
+	useEffect(() => {
+		if (!ref.current) {
+			return;
+		}
+
+		const rect = ref.current.getBoundingClientRect();
+		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+		const offsetTop = rect.top + scrollTop;
+
+		setStart(offsetTop / document.body.clientHeight);
+		setEnd((offsetTop + rect.height) / document.body.clientHeight);
+	}, [ref, size]);
+
+	return { ref, start, end };
+}

package/src/hooks/useScript.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+const isBrowser = typeof window !== 'undefined';
+
+function useScript(src) {
+	// Keep track of script status ("idle", "loading", "ready", "error")
+	const [status, setStatus] = useState(src ? "loading" : "idle");
+	useEffect(
+		() => {
+			// Allow falsy src value if waiting on other data needed for
+			// constructing the script URL passed to this hook.
+			if (!isBrowser || !src) {
+				setStatus("idle");
+				return;
+			}
+			// Fetch existing script element by src
+			// It may have been added by another intance of this hook
+			let script = document.querySelector(`script[src="${src}"]`);
+			if (!script) {
+				// Create script
+				script = document.createElement("script");
+				script.src = src;
+				script.async = true;
+				script.setAttribute("data-status", "loading");
+				// Add script to document body
+				document.body.appendChild(script);
+				// Store status in attribute on script
+				// This can be read by other instances of this hook
+				const setAttributeFromEvent = event => {
+					script.setAttribute(
+						"data-status",
+						event.type === "load" ? "ready" : "error"
+					);
+				};
+				script.addEventListener("load", setAttributeFromEvent);
+				script.addEventListener("error", setAttributeFromEvent);
+			} else {
+				// Grab existing script status from attribute and set to state.
+				setStatus(script.getAttribute("data-status"));
+			}
+			// Script event handler to update status in state
+			// Note: Even if the script already exists we still need to add
+			// event handlers to update the state for *this* hook instance.
+			const setStateFromEvent = event => {
+				setStatus(event.type === "load" ? "ready" : "error");
+			};
+			// Add event listeners
+			script.addEventListener("load", setStateFromEvent);
+			script.addEventListener("error", setStateFromEvent);
+			// Remove event listeners on cleanup
+			return () => {
+				if (script) {
+					script.removeEventListener("load", setStateFromEvent);
+					script.removeEventListener("error", setStateFromEvent);
+				}
+			};
+		},
+		[src] // Only re-run effect if script src changes
+	);
+	return status;
+}
+
+export default useScript;

package/src/hooks/useScrollDirection.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+export const useScrollDirection = () => {
+	const threshold = 1;
+	const [scrollDir, setScrollDir] = useState('up');
+
+	useEffect(() => {
+		let previousScrollYPosition = window.scrollY;
+
+		const scrolledMoreThanThreshold = currentScrollYPosition =>
+			Math.abs(currentScrollYPosition - previousScrollYPosition) > threshold;
+
+		const isScrollingUp = currentScrollYPosition =>
+			currentScrollYPosition > previousScrollYPosition &&
+      !(previousScrollYPosition > 0 && currentScrollYPosition === 0) &&
+      !(currentScrollYPosition > 0 && previousScrollYPosition === 0);
+
+		const updateScrollDirection = () => {
+			const currentScrollYPosition = window.scrollY;
+
+			if (scrolledMoreThanThreshold(currentScrollYPosition)) {
+				const newScrollDirection = isScrollingUp(currentScrollYPosition)
+					? 'down'
+					: 'up';
+				setScrollDir(newScrollDirection);
+				previousScrollYPosition =
+          currentScrollYPosition > 0 ? currentScrollYPosition : 0;
+			}
+		};
+
+		const onScroll = () => window.requestAnimationFrame(updateScrollDirection);
+
+		window.addEventListener("scroll", onScroll);
+
+		return () => window.removeEventListener("scroll", onScroll);
+	}, []);
+
+	return scrollDir;
+};

package/src/hooks/useSectionTracker.js

@@ -0,0 +1,95 @@
+import { useState, useContext } from 'react';
+import trackEvent from '~/hooks/useEventTracker';
+
+import { SectionContext } from '~/components/modules/sections/sectionContext';
+
+const isBrowser = typeof window !== 'undefined';
+
+const ignore = ['intro'];
+const RATIO = 0.33;
+// let first = true;
+
+const useSectionTracker = () => {
+	const { setCurrentSection } = useContext(SectionContext);
+
+	const [lastSection, setLastSection] = useState('');
+	const [sections, setSections] = useState([]);
+	let timeout = null;
+
+	// Allows a blank hash or ensures there is a # in the hash and replaces current state
+	const setHash = hash => {
+		if (hash !== ' ' && hash.indexOf('#') === -1) {
+			hash = `#${hash}`;
+		}
+		if (window.history.replaceState) {
+			window.history.replaceState(window.history.state, null, hash);
+		} else {
+			window.location.replace(hash);
+		}
+	};
+
+	// Called when a section is intersecting
+	const sectionIsIntersecting = (id, ratio, threshold) => {
+		// Ignore sections we don't want to track
+		if (ignore.indexOf(id) !== -1) {
+			return;
+		}
+
+		const newThreshold = threshold;
+		let found = false;
+
+		// Update sections we've seen before
+		sections.forEach(section => {
+			if (section.id === id) {
+				if (newThreshold < RATIO) {
+					section.active = false;
+				} else {
+					section.active = true;
+				}
+				section.threshold = newThreshold;
+				found = true;
+			}
+		});
+
+		// Otherwise, add the section to the list
+		if (!found) {
+			setSections(sections => {
+				sections.push({ id, threshold: newThreshold, active: newThreshold < RATIO ? false : true });
+				return sections;
+			});
+		}
+
+		let maxThreshold = 0;
+		let sectionId = '';
+
+		clearTimeout(timeout);
+
+		timeout = setTimeout(() => {
+			// Find the section with the largest threshold
+			sections.forEach(section => {
+				if (section.active && section.threshold > maxThreshold) {
+					maxThreshold = section.threshold;
+					sectionId = section.id;
+				}
+			});
+
+			// Set the current section (hash, track event)
+			if (isBrowser && sectionId && sectionId !== lastSection) {
+				setHash(ignore.some(id => id === sectionId) ? ' ' : sectionId);
+				trackEvent('Engagement', 'View Section', sectionId);
+				setCurrentSection(sectionId);
+			// } else {
+			} else if (isBrowser && window.scrollY < 100) {
+				setCurrentSection(' ');
+				setHash(' ');
+			}
+
+			// Remember this section for next time so we don't set it again if not necessary
+			setLastSection(sectionId);
+		}, 500);
+	};
+
+	return sectionIsIntersecting;
+};
+
+export default useSectionTracker;

package/src/hooks/useUserAgent.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import UAParser from 'ua-parser-js';
+
+const isBrowser = () => typeof window !== 'undefined';
+
+const useUserAgent = () => {
+	const [state, setState] = useState(null);
+
+	useEffect(() => {
+		if (!isBrowser) {
+			return null;
+		}
+
+		let didRun = true;
+
+		try {
+			const uaParser = new UAParser.UAParser();
+			uaParser.setUA(window.navigator.userAgent);
+			const payload = {
+				os: uaParser.getOS(),
+				browser: uaParser.getBrowser(),
+				cpu: uaParser.getCPU(),
+				device: uaParser.getDevice(),
+				engine: uaParser.getEngine()
+			};
+			if (didRun) {
+				setState(payload);
+			}
+		} catch (err) {
+			if (didRun) {
+				setState(null);
+			}
+		}
+
+		return () => {
+			didRun = false;
+		};
+	}, []);
+
+	return state;
+};
+
+export default useUserAgent;

package/src/hooks/useWindowSize.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+export default function useWindowSize() {
+	// Initialize state with undefined width/height so server and client renders match
+	// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+	const [windowSize, setWindowSize] = useState({
+		width: undefined,
+		height: undefined
+	});
+	
+	useEffect(() => {
+		// Handler to call on window resize
+		function handleResize() {
+			// Set window width/height to state
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		}
+		// Add event listener
+		window.addEventListener("resize", () => {
+			window.requestAnimationFrame(handleResize);
+		});
+		// Remove event listener on cleanup
+		return () => window.removeEventListener("resize", handleResize);
+	}, []); // Empty array ensures that effect is only run on mount
+	return windowSize;
+}

package/src/index.css

@@ -0,0 +1,25 @@
+@config "./tailwind/tailwind.config.js";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+/* @layer base {
+	html {
+		@apply text-400 text-uiText [scroll-behavior:smooth];
+	}
+}
+
+@layer components {
+	.track * {
+		@apply pointer-events-none;
+	}
+
+	.stretched-link::after {
+		@apply content-[''] absolute inset-0 z-[1] pointer-events-auto bg-transparent;
+	}
+}
+
+.fit-content{
+	height:fit-content;
+} */