@abcagency/hc-ui-components 1.0.0

package/src/components/modules/filter/commute.js

@@ -0,0 +1,149 @@
+import { Fragment, useRef, useState, useEffect } from "react";
+import { Combobox, Transition } from "@headlessui/react";
+import Button from "~/components/modules/buttons/default";
+import Icon from "~/components/modules/icon";
+import usePlacesAutocomplete, {
+	getGeocode,
+	getLatLng
+} from "use-places-autocomplete";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import { getStorageItem } from "~/util/localStorageUtil";
+import React from 'react'
+
+const FilterCommute = ({ className }) => {
+	const {
+		ready,
+		value,
+		suggestions: { status, data },
+		setValue,
+		clearSuggestions
+	} = usePlacesAutocomplete();
+
+	const [selected, setSelected] = useState(getStorageItem('selectedCommute', ''));
+	const inputRef = useRef(null);
+	const { setCommuteLocation, commuteLocation } = useMapList();
+	const [isCurrentLocation, setIsCurrentLocation] = useState(getStorageItem('isCurrentLocation', false));
+
+	useEffect(() => {
+		if(commuteLocation !== null && commuteLocation != '') return;
+		setIsCurrentLocation(false);
+		localStorage.removeItem('isCurrentLocation');
+		localStorage.removeItem('selectedCommute');
+		setSelected("");
+	},[commuteLocation]);
+
+	const handleSelect = async (val, isCurrLocation = false) => {
+		setValue(val, false);
+		setSelected(val);
+		localStorage.setItem('selectedCommute', val);
+		clearSuggestions();
+		if (isCurrLocation) return;
+		try {
+			const results = await getGeocode({ address: val });
+			const { lat, lng } = await getLatLng(results[0]);
+			setCommuteLocation({ lat, lng });
+		} catch (error) { }
+	};
+
+	const fetchLocation = () => {
+		if (!navigator.geolocation) {
+			console.error("Geolocation is not supported by this browser.");
+			return;
+		}
+		navigator.geolocation.getCurrentPosition(
+			position => {
+				setCommuteLocation({
+					lat: position.coords.latitude,
+					lng: position.coords.longitude
+				});
+				handleSelect("Current Location");
+			},
+			error => {
+				console.error("Error fetching location", error);
+			},
+		);
+	};
+
+	return (
+		<div className={`relative ${className ?? ""}`}>
+			<label
+				htmlFor="commute"
+				className="flex items-center gap-2 mb-2 text-xs uppercase font-bold text-uiText"
+			>
+				<Icon
+					icon="ri:pin-distance-fill"
+					size="w-5 h-5"
+					className="text-uiAccent/30"
+				/>
+				<span>
+					<span className="md:hidden lg:inline">Calculate your</span> commute
+				</span>
+			</label>
+
+			<Combobox value={selected} onChange={handleSelect}>
+				<div className="relative mt-1">
+					<div className="relative flex items-center w-full pr-2 cursor-default overflow-hidden rounded bg-white text-left border border-uiAccent/20 focus-within:ring-1 focus-within:ring-uiAccent focus:outline-none">
+						<Combobox.Input
+							className="w-full border-none py-2 pl-4 pr-1 text-sm leading-5 text-gray-900 focus:ring-0 placeholder:text-gray-400"
+							onChange={e => {
+								setValue(e.target.value);
+								setSelected(e.target.value);
+							}}
+							value={selected}
+							disabled={!ready}
+							placeholder="Starting point"
+							ref={inputRef}
+						/>
+					    <Button.Btn
+							variant="icon"
+							size="sqsm"
+							onClick={() => {setIsCurrentLocation(!isCurrentLocation);
+							    localStorage.setItem('isCurrentLocation', !isCurrentLocation);
+								if(isCurrentLocation || commuteLocation){
+									 setCommuteLocation("");
+									 setSelected("");
+								}else if(!commuteLocation){fetchLocation();}}}
+
+							className=""
+						>
+							<span   className=" sr-only">Use your location</span>
+							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'text-blue-500' : 'text-current'} icon="mdi:my-location" />}
+						</Button.Btn>
+					</div>
+					<Transition
+						as={Fragment}
+						leave="transition ease-in duration-100"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+						afterLeave={clearSuggestions}
+					>
+						<Combobox.Options className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded bg-white py-1 text-base shadow ring-1 ring-uiAccent/10 focus:outline-none sm:text-sm">
+							{status === "OK" &&
+								data.map(data => (
+									<Combobox.Option
+										key={data.place_id}
+										value={data.description}
+										className={({ active }) =>
+											`relative cursor-default select-none px-4 py-2 ${active ? "bg-primary text-white" : "text-uiText"
+											}`
+										}
+									>
+										{({ selected, active }) => (
+											<span
+												className={`block truncate ${selected ? "font-bold" : "font-medium"}`}
+											>
+												{data.description}
+											</span>
+										)}
+									</Combobox.Option>
+								))}
+						</Combobox.Options>
+					</Transition>
+				</div>
+			</Combobox>
+		</div>
+	);
+};
+
+export default FilterCommute;

package/src/components/modules/filter/index.js

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import FilterSearch from "~/components/modules/filter/search";
+import FiltersAccordion from "~/components/modules/accordions/filters";
+import FilterLocations from "~/components/modules/filter/location";
+import Button from "~/components/modules/buttons/default";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import React from 'react'
+
+const Filter = ({
+	className,
+	showMap
+}) => {
+	const [hasActiveFilters, setHasActiveFilters] = useState(false);
+	const [defaultValue, setDefaultValue] = useState(null);
+	const { setSelectedListItem, setLocation, filterReset } = useMap();
+	const {
+		filteredListings,
+		selectedFilters,
+		setSelectedFilters,
+		setMobileTab,
+		handleSettingFavorites,
+		setQuery,
+		siteConfig
+	  } = useMapList();
+
+	return (
+		<div
+			className={`
+				relative max-h-[95vh] md:max-h-screen overflow-y-auto overflow-x-auto
+				${className ?? ""}
+			`}
+		>
+			<div className="px-4 md:pt-4 space-y-4">
+				<FiltersAccordion
+					setHasActiveFilters={setHasActiveFilters}
+					defaultValue={defaultValue}
+					setDefaultValue={value => {setDefaultValue(value == defaultValue ? "" : value);}}
+					setLocation={setLocation}
+					setSelectedListItem={setSelectedListItem}
+				/>
+				<FilterSearch/>
+				{siteConfig.hideLocations !== true &&
+				<FilterLocations
+					setHasActiveFilters={setHasActiveFilters}
+					defaultValue={defaultValue}
+					showMap={showMap}
+					setDefaultValue={value => {setDefaultValue(value == defaultValue ? "" : value);}}
+					setLocation={setLocation}
+					setSelectedListItem={setSelectedListItem}
+				/>
+				}
+			</div>
+			<div className="sticky bottom-0 inset-x-0 flex items-center justify-between gap-2 py-2 px-4 mt-2 bg-white md:bg-gray-100">
+				<Button.Btn
+					onClick={() => { filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null);}}
+					variant="outline"
+					size="sm"
+				>
+					Reset
+				</Button.Btn>
+				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
+				<Button.Btn
+					onClick={() => setMobileTab("listTab")}
+					variant="primary"
+					size="sm"
+					className={`
+						md:hidden
+						${hasActiveFilters ? "opacity-0 pointer-events-none" : "opacity-100"}
+					`}
+				>
+					<Button.Body>
+						<Button.Icon
+							icon="fluent:search-12-filled"
+							size="w-3.5 h-3.5"
+						/>
+						Show {filteredListings.length} Jobs
+					</Button.Body>
+				</Button.Btn>
+				}
+			</div>
+		</div>
+	);
+};
+
+export default Filter;

package/src/components/modules/filter/item.js

@@ -0,0 +1,77 @@
+import { useState, useEffect, useRef } from "react";
+import React from 'react'
+
+const FilterItem = ({
+	className,
+	item,
+	type = 'checkbox',
+	itemKey = null,
+	hasCount = true,
+	field,
+	selectedFilters,
+	setSelectedFilters,
+	...rest
+}) => {
+	const itemName = item.name ? item.name : item;
+	itemKey = itemKey === null ? itemName : itemKey;
+	var isActive =
+        selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
+
+	const changeHandler = () => {
+		setSelectedFilters(prevFilters => {
+			const updatedFilters = { ...prevFilters };
+			if (!isActive) {
+				if (!updatedFilters[field]) {
+					updatedFilters[field] = {};
+				}
+				updatedFilters[field][itemKey] = true;
+				return updatedFilters;
+			}
+			delete updatedFilters[field][itemKey];
+			if (Object.keys(updatedFilters[field]).length === 0) {
+				delete updatedFilters[field];
+			}
+			return updatedFilters;
+		});
+	};
+	const [activeItem, setActiveItem] = useState(isActive);
+
+	useEffect(() => {
+		if(selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
+		else if(activeItem === true){
+			setActiveItem(false);
+		}
+	},[selectedFilters]);
+
+	return (
+		<label
+			className={`
+                flex items-start gap-2 px-2 py-1.5 rounded-sm text-sm cursor-pointer transition hover:bg-uiAccent/5
+                ${className ?? ""}
+            `}
+			{...rest}
+		>
+			<input
+				id={itemKey}
+				name={field}
+				disabled={item.count == 0}
+				value={itemName}
+				type={type}
+				className={`h-4 w-4 mt-px text-primary border-uiAccent/30 transition-colors rounded-sm`}
+				 checked = {activeItem }
+				onChange={() => {
+					setActiveItem(!activeItem);
+					changeHandler();
+				}}
+			/>
+			<span className="font-medium">{itemName}</span>
+			{hasCount && (
+				<span className="inline-block mt-1 ml-auto text-xs leading-none text-primary">
+                    ({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;

package/src/components/modules/filter/location.js

@@ -0,0 +1,69 @@
+import Accordion from "~/components/modules/accordions/default";
+import FilterItem from "~/components/modules/filter/item";
+import React from 'react';
+import FilterCommute from "~/components/modules/filter/commute";
+import FilterPointsOfInterest from "~/components/modules/filter/points-of-interest";
+import ItemsPill from "~/components/modules/buttons/items-pill";
+import FilterCard from "~/components/modules/cards/filter";
+import Loading from "~/util/loading";
+import AccordionFilterItem from "~/components/modules/accordions/filterItem";
+import { useMapList } from "~/contexts/mapListContext";
+
+const FilterLocation = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	showMap = false,
+	setLocation,
+	setSelectedListItem
+}) => {
+	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
+	const activeItemsCount = selectedFilters != null && selectedFilters["cityState"]
+		? Object.keys(selectedFilters["cityState"]).length
+		: 0;
+
+	const handleClearFilters = () => {
+		setSelectedFilters(prevFilters => {
+			const updatedFilters = { ...prevFilters };
+			delete updatedFilters["cityState"];
+			return updatedFilters;
+		});
+	};
+	var locations = filterOptions?.locations;
+	var pointsOfInterest = filterOptions?.pointsOfInterest;
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fluent:location-16-filled">
+				<span>
+					<span className="hidden lg:inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && (
+				<Loading />
+			)}
+			{locations && <Accordion defaultValue={defaultValue} className="space-y-4">
+				{locations?.map(filter =>
+					(<AccordionFilterItem
+						key={filter.id}
+						filter={filter}
+						setDefaultValue={setDefaultValue}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
+					/>
+					))}
+				{showMap && <FilterCommute className="mt-6" />}
+				{showMap && (
+					<FilterPointsOfInterest
+						className="mt-4"
+						pointsOfInterest={pointsOfInterest}
+						setDefaultValue={setDefaultValue}
+						defaultValue={defaultValue}
+					/>
+				)}
+			</Accordion>
+			}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;

package/src/components/modules/filter/points-of-interest.js

@@ -0,0 +1,43 @@
+import Accordion from "~/components/modules/accordions/default";
+import RadioItem from "~/components/modules/filter/radio-item";
+import React from 'react'
+
+const FilterPointsOfInterest = ({
+	title = "Points of interest",
+	pointsOfInterest,
+	setDefaultValue,
+	className,
+	defaultValue
+}) => {
+	return (
+		<div
+			className={`
+				relative
+				${className ?? ""}
+			`}
+		>
+			<Accordion defaultValue={defaultValue} className="space-y-4">
+				<Accordion.Item id="points-of-interest">
+					<Accordion.Trigger.HasHeader
+						onClick={() => setDefaultValue("points-of-interest")}
+						className="stretched-link text-left"
+						iconClassName="order-last"
+						headerClassName="relative py-2 rounded border border-uiAccent/20 bg-white text-sm transition data-[state=open]:border-b-transparent data-[state=open]:rounded-b-none"
+					>
+						{title}
+					</Accordion.Trigger.HasHeader>
+					<Accordion.Content bodyClassName="px-2 py-1 bg-white rounded-b border border-uiAccent/20 border-t-0 max-h-[20vh] md:max-h-[25vh] overflow-auto">
+						{pointsOfInterest.items.map((item, index) => {
+							return <RadioItem
+								key={item.key + index}
+								item={item}
+								field={item.id} />;
+						})}
+					</Accordion.Content>
+				</Accordion.Item>
+			</Accordion>
+		</div>
+	);
+};
+
+export default FilterPointsOfInterest;

package/src/components/modules/filter/radio-item.js

@@ -0,0 +1,51 @@
+import Icon from "~/components/modules/icon";
+import { useMap } from "~/contexts/mapContext";
+import React from 'react'
+
+const RadioItem = ({
+	className,
+	item,
+	field,
+	...rest
+}) => {
+	const { selectedPlaces, setSelectedPlaces } = useMap();
+	const chosenPlace = item.key.toLowerCase();
+	let isActive = selectedPlaces.includes(chosenPlace);
+
+	const changeHandler = () => {
+		setSelectedPlaces([ isActive ? '' : chosenPlace]);
+	};
+
+	return (
+		<label key ={item.key}
+			className={`
+                flex items-start gap-2 px-2 py-1.5 rounded-sm text-sm cursor-pointer transition hover:bg-uiAccent/5
+				${item.count === 0 ? 'text-uiDisabled cursor-not-allowed' : 'hover:bg-uiAccent/5'}
+                ${className ?? ""}
+            `}
+			{...rest}
+		>
+			<input
+				 key ={item.key}
+				id={item.Key}
+				name={field}
+				value={item.key}
+				type={"radio"}
+				className={`h-4 w-4 mt-px text-primary border-uiAccent/30 transition-colors rounded-full`}
+				checked={isActive}
+				onClick={() => {
+					changeHandler();
+				}}
+				onChange={()=> {}}
+			/>
+			<span className="font-medium">{item.key}</span>
+			{isActive &&
+				<div className=" w-full unselect-div">
+					<Icon className="float-right" icon="mdi:times"></Icon>
+				</div>
+			}
+		</label>
+	);
+};
+
+export default RadioItem;

package/src/components/modules/filter/search.js

@@ -0,0 +1,89 @@
+import { useRef, useState, useEffect } from "react";
+import Button from "~/components/modules/buttons/default";
+import Icon from "~/components/modules/icon";
+import FilterCard from "~/components/modules/cards/filter";
+import { useMapList } from "~/contexts/mapListContext";
+import React from 'react'
+
+const Search = ({
+	inputPlaceholder = "Keywords",
+	showSearchIcon = false,
+	className,
+	labelClassName
+}) => {
+	const [inputValue, setInputValue] = useState(query != null ? query: "");
+	const debounceTimer = useRef(null);
+	const {
+		query,
+		setQuery,
+		siteConfig
+	  } = useMapList();
+	const handleInputChange = e => {
+		setInputValue(e.target.value);
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current);
+		}
+		debounceTimer.current = setTimeout(() => {
+			setQuery(e.target.value);
+		}, 500);
+	};
+
+	const handleReset = () => {
+		setInputValue("");
+		setQuery("");
+	};
+
+	useEffect(() =>{
+		if(query == null){
+			setInputValue("");
+		}
+	},[query]);
+	inputPlaceholder = siteConfig.searchConfig.placeholder;
+	return (
+		<FilterCard as="form" className={className ?? ""}>
+			<FilterCard.Title
+				as="label"
+				icon="fluent:search-12-filled"
+				className={labelClassName ?? ""}
+			>
+				<span>
+					{siteConfig.searchConfig.label}
+				</span>
+			</FilterCard.Title>
+
+			<div className="relative flex items-center px-2 rounded bg-white border border-uiAccent/20 focus-within:ring-1 focus-within:ring-uiAccent">
+				{showSearchIcon && (
+					<Icon
+						icon="fluent:search-12-filled"
+						size="w-4 h-4"
+						className="mr-2 text-uiAccent/50"
+					/>
+				)}
+				<input
+					type="text"
+					name="search"
+				    onKeyDown={e => { if (e.key === 'Enter') {
+						e.preventDefault();
+					}}}
+					placeholder={inputPlaceholder}
+					value={inputValue}
+					className="w-full px-0 py-2 text-sm border-0 transition-colors placeholder:text-uiText/50 focus:ring-0 focus:outline-none"
+					onChange={handleInputChange}
+				/>
+
+				<Button.Btn
+					type="reset"
+					variant="icon"
+					size="sqsm"
+					className={`transition-opacity ${inputValue ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+					onClick={handleReset}
+				>
+					<span className="sr-only">Clear</span>
+					<Button.Icon icon="uil:times" className="text-uiAccent" />
+				</Button.Btn>
+			</div>
+		</FilterCard>
+	);
+};
+
+export default Search;

package/src/components/modules/filter/search.js.rej

@@ -0,0 +1,9 @@
+diff a/components/modules/filter/search.js b/components/modules/filter/search.js	(rejected hunks)
+@@ -59,7 +59,6 @@
+ 				)}
+ 				<input
+ 					type="text"
+-					name="search"
+ 				    onKeyDown={(e) => { if (e.key === 'Enter') {
+ 						e.preventDefault();
+ 					}}}

package/src/components/modules/filter/sort.js

@@ -0,0 +1,83 @@
+import { forwardRef } from "react";
+import * as Select from "@radix-ui/react-select";
+import { twMerge } from "tailwind-merge";
+import Icon from "~/components/modules/icon";
+import Button from "~/components/modules/buttons/default";
+import React from 'react'
+
+const FilterSort = ({ className, fields, setSortSetting, fieldNames }) => {
+	const handleSortChange = value => {
+		const [field, direction] = value.split("-");
+		setSortSetting({ field, type: direction });
+	};
+
+	return (
+		<div className={className ?? ""}>
+			<Select.Root onValueChange={handleSortChange}>
+				<Select.Trigger asChild aria-label="Sort">
+					<Button.Btn variant="outline" size="sm" className="normal-case">
+						<Button.Body className="justify-center">
+							<Select.Value placeholder={
+								<span className="flex items-center gap-2">
+                                    Sort
+									<Icon icon="mdi:sort" />
+								</span>
+							}/>
+							<Select.Icon>
+								<Button.Icon icon="mdi:chevron-down" />
+							</Select.Icon>
+						</Button.Body>
+					</Button.Btn>
+				</Select.Trigger>
+				<Select.Portal>
+					<Select.Content className={`relative z-[200] overflow-hidden bg-white rounded-md `}>
+						<Select.ScrollUpButton className="flex items-center justify-center h-5 bg-white text-primary cursor-default">
+							<Icon icon="mdi:chevron-up" />
+						</Select.ScrollUpButton>
+						<Select.Viewport className="p-1">
+							{fields.map(field => (
+								<Select.Group key={field}>
+									<SelectItem value={`${field}-asc`}>
+										<span className="flex items-center justify-between gap-2 w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-ascending" />
+										</span>
+									</SelectItem>
+									<SelectItem value={`${field}-desc`}>
+										<span className="flex items-center justify-between gap-2 w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-descending" />
+										</span>
+									</SelectItem>
+								</Select.Group>
+							))}
+						</Select.Viewport>
+						<Select.ScrollDownButton className="flex items-center justify-center h-5 bg-white text-primary cursor-default">
+							<Icon icon="mdi:chevron-down" />
+						</Select.ScrollDownButton>
+					</Select.Content>
+				</Select.Portal>
+			</Select.Root>
+		</div>
+	);
+};
+
+const SelectItem = forwardRef(({ children, className, ...props }, forwardedRef) => (
+	<Select.Item
+		className={twMerge(
+			"text-sm leading-none rounded-sm flex items-center w-full py-1.5 pr-4 pl-7 relative select-none cursor-pointer data-[disabled]:text-gray-500 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-primary data-[highlighted]:text-white",
+			className
+		)}
+		{...props}
+		ref={forwardedRef}
+	>
+		<Select.ItemText>{children}</Select.ItemText>
+		<Select.ItemIndicator className="absolute left-0 w-8 inline-flex items-center justify-center">
+			<Icon icon="mdi:check" />
+		</Select.ItemIndicator>
+	</Select.Item>
+));
+
+SelectItem.displayName = "SelectItem";
+
+export default FilterSort;