@abcagency/hc-ui-components 1.3.16 → 1.3.18

package/package.json

@@ -1,60 +1,62 @@
-{
-	"name": "@abcagency/hc-ui-components",
-	"version": "1.3.16",
-	"description": "UI Components for HireControl",
-	"main": "dist/index.js",
-	"scripts": {
-		"build": "cross-env NODE_ENV=production rollup -c",
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"keywords": [
-		"hirecontrol",
-		"ui",
-		"components"
-	],
-	"author": "Aloysius Butler & Clark",
-	"license": "ISC",
-	"peerDependencies": {
-		"@react-google-maps/api": "^2.0.0",
-		"@radix-ui/react-accordion": "^1.1.2",
-		"@radix-ui/react-dialog": "^1.0.5",
-		"@radix-ui/react-select": "^2.0.0",
-		"@radix-ui/react-tabs": "^1.0.4",
-		"@iconify/react": "^1.0.0",
-		"@headlessui/react": "^1.0.0",
-		"use-places-autocomplete": "^1.0.0"
-	},
-	"devDependencies": {
-		"cross-env": "^7.0.3",
-		"eslint": "^8.0.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-jsx-a11y": "^6.8.0",
-		"eslint-plugin-prettier": "^5.1.3",
-		"eslint-plugin-react": "^7.34.2",
-		"eslint-plugin-react-hooks": "^4.6.2",
-		"@babel/eslint-parser": "^7.24.6",
-		"@babel/cli": "^7.24.6",
-		"@babel/core": "^7.24.6",
-		"@babel/preset-env": "^7.24.6",
-		"@babel/preset-react": "^7.24.6",
-		"@rollup/plugin-alias": "^5.1.0",
-		"@rollup/plugin-babel": "^6.0.4",
-		"@rollup/plugin-commonjs": "^25.0.8",
-		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@rollup/plugin-replace": "^5.0.5",
-		"@tailwindcss/aspect-ratio": "^0.4.2",
-		"@tailwindcss/forms": "^0.5.7",
-		"@tailwindcss/typography": "^0.5.13",
-		"autoprefixer": "^10.4.19",
-		"dotenv": "^16.4.5",
-		"postcss": "^8.4.38",
-		"postcss-prefixer": "^3.0.0",
-		"postcss-preset-env": "^9.5.14",
-		"rollup": "^4.18.0",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"tailwindcss": "^3.4.3",
-		"tailwindcss-animate": "^1.0.7"
-	}
-}
+{
+	"name": "@abcagency/hc-ui-components",
+	"version": "1.3.18",
+	"description": "UI Components for HireControl",
+	"main": "dist/index.js",
+	"scripts": {
+		"build": "cross-env NODE_ENV=production rollup -c",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [
+		"hirecontrol",
+		"ui",
+		"components"
+	],
+	"author": "Aloysius Butler & Clark",
+	"license": "ISC",
+	"peerDependencies": {
+		"@react-google-maps/api": "^2.0.0",
+		"@radix-ui/react-accordion": "^1.1.2",
+		"@radix-ui/react-dialog": "^1.0.5",
+		"@radix-ui/react-select": "^2.0.0",
+		"@radix-ui/react-tabs": "^1.0.4",
+		"@iconify/react": "^1.0.0",
+		"@headlessui/react": "^1.0.0",
+		"use-places-autocomplete": "^1.0.0",
+		"fuse.js": "^7.0.0"
+	},
+	"devDependencies": {
+		"cross-env": "^7.0.3",
+		"eslint": "^8.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-jsx-a11y": "^6.8.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-react": "^7.34.2",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"@babel/eslint-parser": "^7.24.6",
+		"@babel/cli": "^7.24.6",
+		"@babel/core": "^7.24.6",
+		"@babel/preset-env": "^7.24.6",
+		"@babel/preset-react": "^7.24.6",
+		"@rollup/plugin-alias": "^5.1.0",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@rollup/plugin-commonjs": "^25.0.8",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-replace": "^5.0.5",
+		"@iconify/react": "^4.1.1",
+		"@tailwindcss/aspect-ratio": "^0.4.2",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.13",
+		"autoprefixer": "^10.4.19",
+		"dotenv": "^16.4.5",
+		"postcss": "^8.4.38",
+		"postcss-prefixer": "^3.0.0",
+		"postcss-preset-env": "^9.5.14",
+		"rollup": "^4.18.0",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-postcss": "^4.0.2",
+		"tailwindcss": "^3.4.3",
+		"tailwindcss-animate": "^1.0.7"
+	}
+}

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

@@ -1,92 +1,93 @@
-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;
+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 {
+		query,
+		setQuery,
+		siteConfig
+	} = useMapList();
+	const [inputValue, setInputValue] = useState(query != null ? query : "");
+	const debounceTimer = useRef(null);
+
+	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;

package/src/components/modules/maps/list/list-item/index.js

@@ -1,135 +1,135 @@
-import React, { forwardRef } from 'react';
-
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import FieldMapper from '~/components/modules/maps/list/field-mapper';
-
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const ListItem = forwardRef(
-	(
-		{
-			isActive,
-			bodyClassName,
-			className,
-			item,
-			fieldsShown,
-			specialFeatures,
-			onItemSelected,
-			showMap,
-			setMobileTab,
-			favorites,
-			setFavorites,
-			...props
-		},
-		ref
-	) => {
-		const { siteConfig } = useMapList();
-		const { trackEvent, eventTypes } = useTrackEvent();
-		const mapPinColor = siteConfig.colors.primary.replace("#", "");
-
-		const handleClick = () => {
-			if (onItemSelected) {
-				onItemSelected(item);
-			}
-		};
-
-		let isFavorite = favorites.includes(item.id);
-
-		const handleFavouriteClick = event => {
-			event.stopPropagation();
-			let updatedFavorites;
-			if (isFavorite) {
-				updatedFavorites = favorites.filter(fav => fav !== item.id);
-			} else {
-				trackEvent(eventTypes.FAVORITE_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
-				updatedFavorites = [...favorites, item.id];
-			}
-			isFavorite = !isFavorite;
-			setFavorites(updatedFavorites);
-		};
-
-		return (
-			<button
-				ref={ref}
-				onClick={handleClick}
-				className={`
-					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
-					${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
-					${className ?? ""}
-        `}
-				{...props}
-			>
-				<Grid
-					columns="hc-grid-flow-col hc-auto-cols-fr"
-					gap="hc-gap-2"
-					isAnimated={false}
-					className={`
-						hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
-						${bodyClassName ?? ""}
-					`}
-				>
-					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
-						<span className="hc-sr-only">Expand row</span>
-						<Icon
-							icon="fluent-emoji-high-contrast:plus"
-							size="hc-size-2.5"
-							className={`
-								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
-								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
-							`}
-						/>
-
-					</Grid.Item>
-
-					<FieldMapper
-						item={item}
-						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}
-						isFavorite={isFavorite}
-						handleFavouriteClick={handleFavouriteClick}
-					/>
-					<Grid.Item
-						key={"favorites"}
-						className="hc-hidden md:hc-block hc-col-span-1"
-					>
-						<Icon
-							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-							size="hc-size-3.5"
-							iconClasses={isFavorite ? "hc-text-primary" : ""}
-							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
-							className={`
-							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
-						`}
-							onClick={e => handleFavouriteClick(e)}
-						/>
-					</Grid.Item>
-				</Grid>
-
-				{showMap && (
-					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
-						<img
-							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
-							alt={`Map of location for ${item.fields.position}`}
-							className="hc-w-full hc-h-full hc-object-cover"
-						/>
-					</div>
-				)}
-			</button>
-		);
-	}
-);
-
-ListItem.displayName = "ListItem";
-
-export default React.memo(ListItem, (prevProps, nextProps) => {
-	return (
-		(prevProps.isActive === nextProps.isActive ||
-			prevProps.isActive !== nextProps.isActive) &&
-		prevProps.bodyClassName === nextProps.bodyClassName &&
-		prevProps.className === nextProps.className &&
-		prevProps.fieldsShown === nextProps.fieldsShown &&
-		prevProps.item.id === nextProps.item.id
-	);
-});
+import React, { forwardRef } from 'react';
+
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/maps/list/field-mapper';
+
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			favorites,
+			setFavorites,
+			...props
+		},
+		ref
+	) => {
+		const { siteConfig } = useMapList();
+		const { trackEvent, eventTypes } = useTrackEvent();
+		const mapPinColor = siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = event => {
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				trackEvent(eventTypes.FAVORITE_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			setFavorites(updatedFavorites);
+		};
+
+		return (
+			<button
+				ref={ref}
+				onClick={handleClick}
+				className={`
+					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
+					${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
+					${className ?? ""}
+        `}
+				{...props}
+			>
+				<Grid
+					columns="hc-grid-flow-col hc-auto-cols-fr"
+					gap="hc-gap-2"
+					isAnimated={false}
+					className={`
+						hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
+						${bodyClassName ?? ""}
+					`}
+				>
+					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
+						<span className="hc-sr-only">Expand row</span>
+						<Icon
+							icon="fluent-emoji-high-contrast:plus"
+							size="hc-size-2.5"
+							className={`
+								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
+								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
+							`}
+						/>
+
+					</Grid.Item>
+
+					<FieldMapper
+						item={item}
+						fieldsShown={fieldsShown}
+						specialFeatures={specialFeatures}
+						isFavorite={isFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					<Grid.Item
+						key={"favorites"}
+						className="hc-hidden md:hc-block hc-col-span-1"
+					>
+						<Icon
+							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+							size="hc-size-3.5"
+							iconClasses={isFavorite ? "hc-text-primary" : ""}
+							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
+							className={`
+							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
+						`}
+							onClick={e => handleFavouriteClick(e)}
+						/>
+					</Grid.Item>
+				</Grid>
+
+				{showMap && (
+					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
+						<img
+							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
+							alt={`Map of location for ${item.fields.position}`}
+							className="hc-w-full hc-h-full hc-object-cover"
+						/>
+					</div>
+				)}
+			</button>
+		);
+	}
+);
+
+ListItem.displayName = "ListItem";
+
+export default React.memo(ListItem, (prevProps, nextProps) => {
+	return (
+		(prevProps.isActive === nextProps.isActive ||
+			prevProps.isActive !== nextProps.isActive) &&
+		prevProps.bodyClassName === nextProps.bodyClassName &&
+		prevProps.className === nextProps.className &&
+		prevProps.fieldsShown === nextProps.fieldsShown &&
+		prevProps.item.id === nextProps.item.id
+	);
+});

package/src/constants/eventTypes.js

@@ -1,13 +1,13 @@
-export const eventTypes = {
-	FILTER_APPLIED: "filter_applied",
-	MAP_MARKER_CLICKED: "map_marker_clicked",
-	JOB_LISTING_SELECTED: "job_listing_selected",
-	APPLY_NOW_CLICKED: "apply_now_clicked",
-	VIEW_DETAILS_CLICKED: "view_details_clicked",
-	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
-	POI_APPLIED: "point_of_interest_applied",
-	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
-	FAVORITE_SELECTED: "favorite_job_selected",
-	LIST_SORTED: "jobs_list_sorted",
-	FILTERS_RESET: "filters_reset_button_clicked"
-};
+export const eventTypes = {
+	FILTER_APPLIED: "filter_applied",
+	MAP_MARKER_CLICKED: "map_marker_clicked",
+	JOB_LISTING_SELECTED: "job_listing_selected",
+	APPLY_NOW_CLICKED: "apply_now_clicked",
+	VIEW_DETAILS_CLICKED: "view_details_clicked",
+	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
+	POI_APPLIED: "point_of_interest_applied",
+	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
+	FAVORITE_SELECTED: "favorite_job_selected",
+	LIST_SORTED: "jobs_list_sorted",
+	FILTERS_RESET: "filter_reset_button_clicked"
+};