@abcagency/hc-ui-components 1.1.1 → 1.2.1

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

@@ -1,69 +1,71 @@
-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:hc-location-16-filled">
-				<span>
-					<span className="hc-hidden lg:hc-inline">Job</span> location
-				</span>
-			</FilterCard.Title>
-			{!locations && (
-				<Loading />
-			)}
-			{locations && <Accordion defaultValue={defaultValue} className="hc-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="hc-mt-6" />}
-				{showMap && (
-					<FilterPointsOfInterest
-						className="hc-mt-4"
-						pointsOfInterest={pointsOfInterest}
-						setDefaultValue={setDefaultValue}
-						defaultValue={defaultValue}
-					/>
-				)}
-			</Accordion>
-			}
-		</FilterCard>
-	);
-};
-
-export default FilterLocation;
+import React from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import FilterCommute from '~/components/modules/filter/commute';
+import FilterPointsOfInterest from '~/components/modules/filter/points-of-interest';
+import FilterCard from '~/components/modules/cards/filter';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+
+import Loading from '~/util/loading';
+
+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:hc-location-16-filled">
+				<span>
+					<span className="hc-hidden lg:hc-inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && (
+				<Loading />
+			)}
+			{locations && <Accordion defaultValue={defaultValue} className="hc-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="hc-mt-6" />}
+				{showMap && (
+					<FilterPointsOfInterest
+						className="hc-mt-4"
+						pointsOfInterest={pointsOfInterest}
+						setDefaultValue={setDefaultValue}
+						defaultValue={defaultValue}
+					/>
+				)}
+			</Accordion>
+			}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;

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

@@ -1,43 +1,44 @@
-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={`
-				hc-relative
-				${className ?? ""}
-			`}
-		>
-			<Accordion defaultValue={defaultValue} className="hc-space-y-4">
-				<Accordion.Item id="points-of-interest">
-					<Accordion.Trigger.HasHeader
-						onClick={() => setDefaultValue("points-of-interest")}
-						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"
-					>
-						{title}
-					</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] ohc-verflow-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;
+import React from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import RadioItem from '~/components/modules/filter/radio-item';
+
+const FilterPointsOfInterest = ({
+	title = "Points of interest",
+	pointsOfInterest,
+	setDefaultValue,
+	className,
+	defaultValue
+}) => {
+	return (
+		<div
+			className={`
+				hc-relative
+				${className ?? ""}
+			`}
+		>
+			<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+				<Accordion.Item id="points-of-interest">
+					<Accordion.Trigger.HasHeader
+						onClick={() => setDefaultValue("points-of-interest")}
+						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"
+					>
+						{title}
+					</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] ohc-verflow-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

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

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

@@ -1,91 +1,92 @@
-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="hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent">
-				{showSearchIcon && (
-					<Icon
-						icon="fluent:search-12-filled"
-						size="hc-size-4"
-						className="hc-mr-2 hc-text-uiAccent/50"
-					/>
-				)}
-				<input
-					type="text"
-					name="search"
-					onKeyDown={e => {
-						if (e.key === 'Enter') {
-							e.preventDefault();
-						}
-					}}
-					placeholder={inputPlaceholder}
-					value={inputValue}
-					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
-					onChange={handleInputChange}
-				/>
-
-				<Button.Btn
-					type="reset"
-					variant="icon"
-					size="sqsm"
-					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
-					onClick={handleReset}
-				>
-					<span className="sr-only">Clear</span>
-					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
-				</Button.Btn>
-			</div>
-		</FilterCard>
-	);
-};
-
-export default Search;
+import React, { 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';
+
+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="hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent">
+				{showSearchIcon && (
+					<Icon
+						icon="fluent:search-12-filled"
+						size="hc-size-4"
+						className="hc-mr-2 hc-text-uiAccent/50"
+					/>
+				)}
+				<input
+					type="text"
+					name="search"
+					onKeyDown={e => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+						}
+					}}
+					placeholder={inputPlaceholder}
+					value={inputValue}
+					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
+					onChange={handleInputChange}
+				/>
+
+				<Button.Btn
+					type="reset"
+					variant="icon"
+					size="sqsm"
+					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
+					onClick={handleReset}
+				>
+					<span className="sr-only">Clear</span>
+					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
+				</Button.Btn>
+			</div>
+		</FilterCard>
+	);
+};
+
+export default Search;