@abcagency/hc-ui-components 1.0.0

package/src/components/modules/navigation/navbar.js

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import NavLink from '~/components/modules/navigation/nav-link';
+import Icon from '~/components/modules/icon';
+import React from 'react'
+import routes from '~/data/routes.json';
+import site from '~/data/site.json';
+
+const Navbar = ({ isPinned }) => {
+	const [isExpanded, toggleExpansion] = useState(false);
+
+	return (
+		<div
+			className={`
+				px-4 transition-all bg-white/20 border-b border-gray-400/20 backdrop-blur
+				${isPinned ? 'mb:bg-transparent md:border-0 md:backdrop-blur-[unset]' : ''}
+			`}
+		>
+			<div
+				className={`
+					flex flex-wrap items-center justify-between py-2 px-6 container transition-all
+					${isPinned ? 'md:translate-y-2 md:bg-white/20 md:border md:border-gray-400/20 md:!backdrop-blur md:rounded-full' : ''}
+				`}
+			>
+				<Link
+					href="/"
+					className="flex gap-2 items-center"
+				>
+					<Icon
+						icon="mdi:robot"
+						size="w-6 h-6"
+					/>
+					<h1 className="text-gray-800 font-bold text-md no-underline">
+						{site.title}
+					</h1>
+				</Link>
+
+				<button
+					className={`
+						block md:hidden px-3 py-2 transition-colors hover:text-indigo-700 focus:text-indigo-700
+						${isExpanded ? 'text-indigo-700' : 'text-gray-800'}
+					`}
+					onClick={() => toggleExpansion(!isExpanded)}
+				>
+					<svg
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						className={`
+							block w-5 h-5 fill-current transition-transform
+							${isExpanded ? `transform-gpu rotate-180` : ``}
+						`}
+					>
+						<title>Menu</title>
+						<rect
+							y="3"
+							width="20"
+							height="2"
+							className={`
+								transition
+								${isExpanded ? `transform-gpu rotate-45 translate-y-[0] translate-x-[6px]` : ``}
+							`}
+						/>
+						<rect
+							y="9"
+							width="20"
+							height="2"
+							className={`
+								transition
+								${isExpanded ? `opacity-0` : ``}
+							`}
+						/>
+						<rect
+							y="15"
+							width="20"
+							height="2"
+							className={`
+								transition
+								${isExpanded ? `transform-gpu -rotate-45 translate-y-[6px] translate-x-[-8px]` : ``}
+							`}
+						/>
+					</svg>
+				</button>
+
+				<nav
+					className={`
+						md:flex md:items-center md:gap-2 w-full md:w-auto pt-2 md:pt-0
+						${isExpanded ? 'block' : 'hidden'}
+					`}
+				>
+					{routes.map(link => (
+						<NavLink.Anchor
+							key={link.title}
+							href={link.route}
+							className="block md:inline-block px-3.5 py-1.5 rounded-full border border-transparent text-xs text-gray-800 transition-colors hover:border-indigo-700 hover:text-indigo-700 focus:border-indigo-700  focus:text-indigo-700"
+							activeClassName="bg-indigo-700 !text-white"
+						>
+							{link.title}
+						</NavLink.Anchor>
+					))}
+				</nav>
+			</div>
+		</div>
+	);
+};
+
+export default Navbar;

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SkipLink = ({
+	href = '#start-of-content',
+	className,
+	children = 'Skip to content'
+}) => {
+	return (
+		<a
+			href={href}
+			className={`
+				sr-only focus:not-sr-only focus:absolute focus:py-2 focus:px-6 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold text-center transition-colors hover:bg-gray-700
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</a>
+	);
+};
+
+export default SkipLink;

package/src/components/modules/navigation/social.js

@@ -0,0 +1,29 @@
+import Button from '~/components/modules/buttons/default';
+import React from 'react'
+import site from '~/data/site.json';
+
+const NavSocial = () => {
+	const socials = site.social;
+
+	return (
+		<nav className="flex justify-self-end gap-3">
+			{socials.map((data, index) => (
+				<Button.Anchor
+					key={`${index}`}
+					href={data.url}
+					variant="icon"
+					size="sq"
+				>
+					<span className="sr-only">{data.label}</span>
+
+					<Button.Icon
+						icon={data.icon}
+						size="w-4 h-4"
+					/>
+				</Button.Anchor>
+			))}
+		</nav>
+	);
+};
+
+export default NavSocial;

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

@@ -0,0 +1,59 @@
+import { InView } from 'react-intersection-observer';
+import React from 'react'
+import useSectionTracker from '~/hooks/useSectionTracker';
+
+const isBrowser = typeof window !== 'undefined';
+
+const Section = ({
+	children,
+	className,
+	...props
+}) => {
+	const sectionIsIntersecting = useSectionTracker();
+
+	const onChange = (inView, entry) => {
+		if (inView) {
+			if (entry.intersectionRatio > 0 && sectionIsIntersecting) {
+				sectionIsIntersecting(entry.target.id, entry.intersectionRatio, entry.intersectionRatio * entry.boundingClientRect.height / (isBrowser ? window.innerHeight : 1));
+			}
+		}
+	};
+
+	return (
+		<InView
+			as="section"
+			threshold={[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]}
+			onChange={onChange}
+			className={`
+				scroll-mt-20
+				${className ?? ''}
+			`}
+			{...props}
+		>
+			{children}
+		</InView>
+	);
+};
+
+export const SectionTitle = ({
+	as = 'h2',
+	children,
+	className
+}) => {
+	const Title = as;
+
+	return (
+		<Title
+			className={`
+				mb-4 text-2xl
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Title>
+	);
+};
+
+Section.Title = SectionTitle;
+
+export default Section;

package/src/components/modules/sections/sectionContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const reactThingy = React
+export const SectionContext = reactThingy.createContext(null)

package/src/components/modules/video-player.js

@@ -0,0 +1,126 @@
+import React, { useRef, useState, useEffect } from 'react';
+import ReactPlayer from 'react-player/lazy';
+
+import Icon from '~/components/modules/icon';
+
+/*
+Responsive video player using react-player
+@url: https://github.com/CookPete/react-player
+
+@url: Video file URL
+@placeholder: Video poster image
+@playerOptions: Use to pass in any extra options to react-player
+@containerClasses: Pass extra classes to the container element
+@aspectRatio: Set player aspect ratio (Default: 16x9)
+*/
+
+const isBrowser = typeof window !== 'undefined';
+
+const VideoPlayer = ({
+	url,
+	imageAlt,
+	placeholder,
+	className,
+	containerClassName,
+	aspectRatio,
+	playOnLoad = false,
+	muted = false,
+	autoPlay = true,
+	...playerOptions
+}) => {
+	const [lightMode, setLightMode] = useState(placeholder);
+	const [isReady, setIsReady] = useState(false);
+	const [isPlaying, setIsPlaying] = useState(autoPlay);
+	const [played, setPlayed] = useState(0);
+	const [seekTo, setSeekTo] = useState(null);
+	const [pageLoaded, setPageLoaded] = useState(false);
+	const playerRef = useRef(null);
+	const divRef = useRef(null);
+
+	useEffect(() => {
+		if (isBrowser) {
+			setPageLoaded(true);
+		}
+	}, [autoPlay, setPageLoaded]);
+
+	useEffect(() => {
+		if (isReady && seekTo) {
+			playerRef.current.seekTo(parseFloat(seekTo), 'seconds');
+			setIsPlaying(true);
+			if (isBrowser && divRef.current) {
+				divRef.current.scrollIntoView({
+					behavior: 'smooth',
+					block: 'center'
+				});
+			}
+			setSeekTo(null);
+		}
+	}, [isReady, seekTo]);
+
+	return (
+		<div
+			className={`${containerClassName ?? ''}`}
+		>
+			<div
+				ref={divRef}
+				className="block relative w-full overflow-hidden"
+			>
+				{/*
+					Inline switch to set player aspect ratio
+					@default: 16x9
+					@usage: aspectRatio="21x9"
+				*/}
+				{
+					{
+						'21x9': <span className="block pt-[42.86%]" aria-hidden="true"></span>,
+						'16x9': <span className="block pt-[56.25%]" aria-hidden="true"></span>,
+						'4x3': <span className="block pt-[75%]" aria-hidden="true"></span>,
+						'1x1': <span className="block pt-[100%]" aria-hidden="true"></span>
+					}[aspectRatio]
+					|| <span className="block pt-[56.25%]" aria-hidden="true"></span>
+				}
+
+				{pageLoaded &&
+					<ReactPlayer
+						ref={playerRef}
+						className={`
+							absolute inset-y-0 left-0 w-full h-full border-0 my-0
+							${className ?? ''}
+						`}
+						url={url}
+						light={playOnLoad ? false : lightMode === false ? lightMode : placeholder}
+						progressInterval={3000}
+						// eslint-disable-next-line no-unused-vars
+						onProgress={(played, loaded) => {
+							setPlayed(played);
+							if (isBrowser) {
+								document.querySelectorAll('button:focus').forEach(el => el.blur());
+							}
+						}}
+						onReady={() => { setIsReady(true); setIsPlaying(autoPlay);}}
+						onPlay={() => setIsPlaying(true)}
+						onPause={() => setIsPlaying(false)}
+						playing={isPlaying}
+						autoPlay={autoPlay}
+						width="100%"
+						height="100%"
+						muted={muted}
+						playIcon={
+							<button className="bg-blue-400 bg-opacity-70 p-1 rounded-full transition-colors hover:bg-opacity-90 focus:bg-opacity-90">
+								<span className="sr-only">Play</span>
+								<Icon
+									icon="fe:play"
+									sizeClasses="w-16 h-16"
+									className="text-white drop-shadow-md translate-x-1"
+								/>
+							</button>
+						}
+						{...playerOptions}
+					/>
+				}
+			</div>
+		</div>
+	);
+};
+
+export default VideoPlayer;

package/src/constants/placeTypes.js

@@ -0,0 +1,8 @@
+export const placeTypes = {
+	FOOD: "food",
+	STORE: "shopping",
+	TOURIST_ATTRACTION: "attractions",
+	TRANSIT_STATION: "transit",
+	SCHOOL: "schools",
+	PLACE_OF_WORSHIP: "worship"
+};

package/src/contexts/mapContext.js

@@ -0,0 +1,116 @@
+import React, { createContext, useState, useContext, useEffect, useRef } from "react";
+import { getStorageObject, setStorageObject } from "~/util/localStorageUtil";
+const MapContext = createContext();
+
+export const useMap = () => {
+	const context = useContext(MapContext);
+	if (!context) {
+		throw new Error("useMap must be used within a MapProvider");
+	}
+	return context;
+};
+
+export const MapProvider = ({ children, resetFilters }) => {
+	const [selectedListItem, setSelectedListItem] = useState(getStorageObject('selectedListItem'));
+	const [location, setLocation] = useState(getStorageObject('location'));
+	const [center, setCenter] = useState(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }));
+	const [zoom, setZoom] = useState(getStorageObject("zoom",10));
+	const [commuteLocation, setCommuteLocation] = useState(getStorageObject('commuteLocation'));
+	const [selectedPlaces, setSelectedPlaces] = useState([]);
+	const [mapInteracted, setMapInteracted] = useState(false);
+	const [ firstLoadListItem ] = useState(getStorageObject('selectedListItem') ?? { id: "defaultId" });
+	const [travelTime, setTravelTime] = useState(null);
+	const userSetZoom = useRef(true);
+
+	useEffect(() =>{
+		setStorageObject("commuteLocation", commuteLocation);
+		if(!commuteLocation){
+			setTravelTime(null);
+		}
+	},[commuteLocation]);
+
+	useEffect(() => {
+	    setStorageObject("selectedListItem", selectedListItem);
+	},[selectedListItem]);
+
+	useEffect(() => {
+		localStorage.setItem("zoom",zoom);
+	},[zoom]);
+
+	useEffect(() => {
+		if(location == null){
+			localStorage.removeItem("location");
+		}else{
+			setStorageObject("location", location);
+		}
+	},[location]);
+
+	useEffect(() => {
+		setStorageObject("center", center);
+	},[center]);
+
+	const selectItem = (item, itemLocation, zoom, center) => {
+		setSelectedListItem(item);
+		if(mapInteracted === false && itemLocation != null){
+			setLocation(itemLocation);
+		}
+		if(mapInteracted === false || itemLocation != null){
+			setLocation(itemLocation);
+			setCenter(center);
+		}
+		if(mapInteracted === false){
+			setZoom(zoom);
+
+		}
+
+	};
+
+	const filterReset = () => {
+		setSelectedPlaces({});
+		setSelectedListItem(null);
+		setLocation(null);
+		setZoom(8);
+		setMapInteracted(false);
+	};
+
+	if(resetFilters === true){
+		filterReset();
+	}
+	const selectLocationEntity = location => {
+
+		localStorage.removeItem("selectedListItem");
+		setTimeout(() => setLocation(location), 200);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<MapContext.Provider
+			value={{
+				selectedListItem,
+				setSelectedListItem,
+				location,
+				center,
+				zoom,
+				setZoom,
+				selectItem,
+				commuteLocation,
+				setCommuteLocation,
+				setSelectedPlaces,
+				selectedPlaces,
+				selectLocationEntity,
+				setLocation,
+				setMapInteracted,
+				mapInteracted,
+				userSetZoom,
+				setLocation,
+				location,
+				firstLoadListItem,
+				travelTime,
+				setTravelTime,
+				filterReset
+			}}
+		>
+			{children}
+		</MapContext.Provider>
+	);
+};

package/src/contexts/mapListContext.js

@@ -0,0 +1,212 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import fetchListings from '~/services/listingAggregatorService';
+import {
+	generateFilterOptions,
+	applyFilters,
+	filterListingsByLocation
+} from '~/util/filterUtil';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+import { updateURLWithFilters, hasFiltersInURL, filtersFromURL, hasQueryInUrl } from '~/util/urlFilterUtil';
+import { getListingEntities } from "~/services/listingEntityService";
+
+const MapListContext = createContext();
+
+export const useMapList = () => useContext(MapListContext);
+
+const getQuery = (location) => {
+	let query;
+	if (!hasQueryInUrl(location)) {
+		query = typeof window !== 'undefined' ? localStorage.getItem('query') : '';
+	} else {
+		query = filtersFromURL(location).query;
+	}
+	return query;
+};
+
+export const MapListProvider = ({ children, siteConfig, resetFilters }) => {
+	const location = useLocation();
+	const navigate = useNavigate();
+	const [allListings, setAllListings] = useState(getStorageObject("listings",[]));
+	const [filteredListings, setFilteredListings] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [mapItems, setMapItems] = useState(getStorageObject('mapItems', []));
+	const [query, setQuery] = useState(() => resetFilters ? null : getQuery(location));
+	const [listingEntities, setListingEntities] = useState(getStorageObject("listingEntities",null));
+	const [firstLoad, setFirstLoad] = useState(true);
+	const [commuteLocation, setCommuteLocation] = useState(null);
+	const [selectedFilters, setSelectedFilters] = useState(() => resetFilters ? {} : hasFiltersInURL(location) ? filtersFromURL(location).filters : getStorageObject('selectedFilters', {}));
+	const [filterOptions, setFilterOptions] = useState();
+	const [recruiters, setRecruiters] = useState(getStorageObject("recruiters", {}));
+	const [filterDialogIsOpen, setFilterDialogIsOpen] = useState(false);
+	const [mobileTab, setMobileTab] = useState("listTab");
+	const [favorites, setFavorites] = useState([]);
+	const [filterByFavorites, setFilterByFavorites] = useState(false);
+
+	useEffect(() => {
+		const loadedFavorites = JSON.parse(localStorage.getItem('favorites')) || [];
+		setFavorites(loadedFavorites);
+	}, []);
+
+	useEffect(() => {
+		if (commuteLocation === null || commuteLocation === '') return;
+		async function fetchEntities() {
+			const distinctEntityIds = [
+				...new Set(allListings.map(listing => listing.entityId))
+			];
+			try {
+				const fetchedEntities = await getListingEntities(
+					distinctEntityIds,
+					`${commuteLocation.lat}, ${commuteLocation.lng}`
+				);
+				setListingEntities(fetchedEntities);
+				var newFilteredListings = filteredListings;
+				for (var i = 0; i < allListings.length; i++) {
+					if (newFilteredListings[i].entityId != -1) {
+						newFilteredListings[i].fields.travelTime = fetchedEntities[newFilteredListings[i].entityId].travelTime;
+					}
+				}
+				for (var i = 0; i < newFilteredListings.length; i++) {
+					if (newFilteredListings[i].entityId != -1) {
+						newFilteredListings[i].fields.travelTime = fetchedEntities[newFilteredListings[i].entityId].travelTime;
+					}
+				}
+				setFilteredListings(newFilteredListings);
+			} catch (error) {
+				console.error("Failed to fetch listing entities:", error);
+			}
+		}
+
+		fetchEntities();
+	}, [commuteLocation, allListings, siteConfig.companyId]);
+
+	useEffect(() => {
+		const handleFetchListings = async () => {
+			if (!getStorageObject('listings', []).length > 0) {
+				setLoading(true);
+			}
+
+			try {
+				const {
+					listingsResult,
+					fetchedRecruiters,
+					fetchedEntities,
+					distinctItems
+				} = await fetchListings(query, siteConfig);
+				setAllListings(listingsResult);
+				setRecruiters(fetchedRecruiters);
+				setListingEntities(fetchedEntities);
+				setMapItems(distinctItems);
+				setStorageObject("mapItems", distinctItems);
+				setStorageObject("listingEntities", fetchedEntities);
+				setStorageObject("recruiters", fetchedRecruiters);
+				setStorageObject("listings", listingsResult);
+			} catch (error) {
+				console.log(error);
+			}
+			setLoading(false);
+		};
+		handleFetchListings();
+	}, [query, siteConfig]);
+
+	useEffect(() => {
+		const processListings = () => {
+			let { filteredListings, mapItems } = applyFilters(
+				allListings,
+				selectedFilters,
+				query,
+				listingEntities,
+				favorites,
+				siteConfig
+			);
+			if (filterByFavorites) {
+				filteredListings = filteredListings.filter(x => favorites.includes(x.id));
+			}
+			setFilteredListings(filteredListings);
+			if (firstLoad && hasFiltersInURL(location)) {
+				const { filters } = filtersFromURL(location);
+				setSelectedFilters(filters);
+			}
+			if (firstLoad && selectedFilters) {
+				updateURLWithFilters(selectedFilters,location, navigate, query);
+			} else if (Object.keys(selectedFilters).length === 0 && !firstLoad) {
+				localStorage.removeItem('selectedFilters');
+				updateURLWithFilters(selectedFilters,location, navigate, query);
+			} else if (!firstLoad) {
+				setStorageObject('selectedFilters', selectedFilters);
+				updateURLWithFilters(selectedFilters,location, navigate, query);
+			}
+			query != null ? localStorage.setItem('query', query) : localStorage.removeItem('query');
+			setMapItems(mapItems);
+
+			if (selectedFilters) {
+				const keys = Object.keys(selectedFilters);
+				const lastKey = keys[keys.length - 1];
+				const options = generateFilterOptions(
+					firstLoad ? allListings : filteredListings,
+					allListings,
+					siteConfig,
+					filterOptions,
+					lastKey,
+					favorites
+				);
+				if (options) {
+					setFilterOptions(options);
+					if (firstLoad) setFirstLoad(false);
+				}
+			}
+		};
+
+		processListings();
+	}, [selectedFilters, query, listingEntities, filterByFavorites, favorites]);
+
+	const handleFilterListingsByLocation = selectedLocation => {
+		const { filteredListings, mapItems } = filterListingsByLocation(
+			allListings,
+			selectedLocation,
+			listingEntities,
+		);
+		setFilteredListings(filteredListings);
+		//setMapItems(mapItems);
+	};
+
+	const handleSettingFavorites = newFavorites => {
+		if (newFavorites == null) {
+			localStorage.removeItem('favorites');
+		} else {
+			setFavorites(newFavorites);
+			localStorage.setItem('favorites', JSON.stringify(newFavorites));
+		}
+	};
+
+	return (
+		<MapListContext.Provider value={{
+			loading,
+			allListings,
+			filteredListings,
+			mapItems,
+			query,
+			setFilteredListings,
+			setQuery,
+			listingEntities,
+			selectedFilters,
+			setSelectedFilters,
+			filterOptions,
+			recruiters,
+			handleFilterListingsByLocation,
+			filterDialogIsOpen,
+			setFilterDialogIsOpen,
+			setMobileTab,
+			mobileTab,
+			siteConfig,
+			favorites,
+			handleSettingFavorites,
+			setFilterByFavorites,
+			filterByFavorites,
+			commuteLocation,
+			setCommuteLocation
+		}}>
+			{children}
+		</MapListContext.Provider>
+	);
+};