@abcagency/hc-ui-components 1.3.17 → 1.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@abcagency/hc-ui-components",
-	"version": "1.3.17",
+	"version": "1.3.19",
 	"description": "UI Components for HireControl",
 	"main": "dist/index.js",
 	"scripts": {
@@ -15,39 +15,46 @@
 	"author": "Aloysius Butler & Clark",
 	"license": "ISC",
 	"peerDependencies": {
-		"@react-google-maps/api": "^2.0.0",
+		"@headlessui/react": "^1.0.0",
+		"@iconify/react": "^1.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",
+		"@react-google-maps/api": "^2.0.0",
+		"fuse.js": "^7.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/eslint-parser": "^7.24.6",
 		"@babel/preset-env": "^7.24.6",
 		"@babel/preset-react": "^7.24.6",
+		"@iconify/react": "^4.1.1",
 		"@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",
+		"@rollup/plugin-typescript": "^11.1.6",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.13",
+		"@types/node": "^20.14.2",
+		"@types/react": "^18.3.3",
+		"@typescript-eslint/eslint-plugin": "^7.13.0",
+		"@typescript-eslint/parser": "^7.13.0",
 		"autoprefixer": "^10.4.19",
+		"cross-env": "^7.0.3",
 		"dotenv": "^16.4.5",
+		"eslint": "^8.57.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",
 		"postcss": "^8.4.38",
 		"postcss-prefixer": "^3.0.0",
 		"postcss-preset-env": "^9.5.14",
@@ -55,6 +62,7 @@
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
 		"tailwindcss": "^3.4.3",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"typescript": "^4.9.5"
 	}
 }

package/rollup.config.mjs

@@ -10,21 +10,21 @@ import postcss from 'rollup-plugin-postcss';
 import { fileURLToPath } from 'url';
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
+import typescript from '@rollup/plugin-typescript';
 
-// Convert file URL to file path
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// Load environment variables from .env file
 dotenv.config({ path: path.resolve(__dirname, '.env') });
 console.log('GOOGLE_MAPS_API_KEY:', process.env.GOOGLE_MAPS_API_KEY);
 
-// Resolve the project root directory
 const projectRootDir = path.resolve(__dirname);
 
 const plugins = [
 	external(),
-	resolve(),
+	resolve({
+		extensions: ['.js', '.jsx', '.ts', '.tsx'] // Ensure resolve works with these extensions
+	}),
 	postcss({
 		extensions: ['.css'],
 		extract: 'styles/index.css',
@@ -48,6 +48,10 @@ const plugins = [
 		exclude: 'node_modules/**',
 		presets: ['@babel/preset-env', '@babel/preset-react']
 	}),
+	typescript({
+		tsconfig: path.resolve(__dirname, 'tsconfig.json'),
+		allowJs: true
+	}),
 	commonjs()
 ];
 
@@ -58,7 +62,7 @@ const externalDependencies = [
 
 export default [
 	{
-		input: path.resolve(__dirname, 'src/index.js'),
+		input: path.resolve(__dirname, 'src/index.js'), // Change to .ts if your entry point is TypeScript
 		output: {
 			dir: path.resolve(__dirname, 'dist'),
 			format: 'es',
@@ -71,18 +75,18 @@ export default [
 		external: externalDependencies,
 		treeshake: true
 	},
-	{
-		input: path.resolve(__dirname, 'src/services/listingService.js'),
-		output: {
-			dir: path.resolve(__dirname, 'dist/services'),
-			format: 'es',
-			exports: 'named',
-			sourcemap: true,
-			preserveModules: true,
-			preserveModulesRoot: 'src/services'
-		},
-		plugins,
-		external: externalDependencies,
-		treeshake: true
-	}
+	// {
+	// 	input: path.resolve(__dirname, 'src/services/listingService.ts'),
+	// 	output: {
+	// 		dir: path.resolve(__dirname, 'dist'),
+	// 		format: 'es',
+	// 		exports: 'named',
+	// 		sourcemap: true,
+	// 		preserveModules: true,
+	// 		preserveModulesRoot: 'src/services'
+	// 	},
+	// 	plugins,
+	// 	external: externalDependencies,
+	// 	treeshake: true
+	// }
 ];

package/src/apis/{hcApi.js → hcApi.ts}

@@ -1,12 +1,17 @@
-import { getClientAuthKey } from '~/clientToken.js';
-const baseURL = process.env.HC_API_BASE_URL;
+import { getClientAuthKey } from '~/clientToken';
+const baseURL = process.env.HC_API_BASE_URL as string;
 
-const memoryStorage = {
+interface MemoryStorage {
+	authToken: string | null;
+	tokenExpiration: string | null;
+}
+
+const memoryStorage: MemoryStorage = {
 	authToken: null,
 	tokenExpiration: null
 };
 
-function setStorage(key, value) {
+function setStorage(key: keyof MemoryStorage, value: string): void {
 	try {
 		sessionStorage.setItem(key, value);
 	} catch (error) {
@@ -14,7 +19,7 @@ function setStorage(key, value) {
 	}
 }
 
-function getStorage(key) {
+function getStorage(key: keyof MemoryStorage): string | null {
 	try {
 		return sessionStorage.getItem(key) || memoryStorage[key];
 	} catch (error) {
@@ -22,7 +27,12 @@ function getStorage(key) {
 	}
 }
 
-const login = async () => {
+interface AuthResponse {
+	token: string;
+	expiration: string;
+}
+
+const login = async (): Promise<AuthResponse> => {
 	const clientAuthKey = getClientAuthKey();
 
 	try {
@@ -36,12 +46,18 @@ const login = async () => {
 			})
 		});
 
+		if (!response.ok) {
+			throw new Error('Login failed');
+		}
+
 		const data = await response.json();
 
 		if (data.token && data.expiration) {
 			setStorage('authToken', data.token);
 			setStorage('tokenExpiration', data.expiration);
 			return { token: data.token, expiration: data.expiration };
+		} else {
+			throw new Error('Invalid login response');
 		}
 	} catch (error) {
 		console.error('Login failed:', error);
@@ -49,7 +65,7 @@ const login = async () => {
 	}
 };
 
-const fetchWithAuth = async (url, options = {}) => {
+const fetchWithAuth = async (url: string, options: RequestInit = {}): Promise<Response> => {
 	let token = getStorage('authToken');
 
 	const expirationDateTime = getStorage('tokenExpiration');
@@ -76,11 +92,11 @@ const fetchWithAuth = async (url, options = {}) => {
 };
 
 export default {
-	get: async url => {
+	get: async <T>(url: string): Promise<T> => {
 		const response = await fetchWithAuth(url);
-		return await response.json();
+		return await response.json() as T;
 	},
-	post: async (url, data) => {
+	post: async <T>(url: string, data: any): Promise<T> => {
 		const response = await fetchWithAuth(url, {
 			method: 'POST',
 			headers: {
@@ -88,6 +104,6 @@ export default {
 			},
 			body: JSON.stringify(data)
 		});
-		return await response.json();
+		return await response.json() as T;
 	}
 };

package/src/components/HireControlMap.js

@@ -1,129 +1,132 @@
-import React, { useEffect, useState } from 'react';
-import { useLoadScript } from '@react-google-maps/api';
-
-import Grid from '~/components/modules/grid';
-import Filter from '~/components/modules/filter';
-import MapList from '~/components/modules/maps/map-list';
-
-import { MapProvider } from '~/contexts/mapContext';
-import { PlacesProvider } from '~/contexts/placesContext';
-import { MapListProvider } from '~/contexts/mapListContext';
-import { TrackEventProvider } from '~/contexts/trackEventContext';
-
-import { getMapConfig } from '~/services/configService';
-import { setClientAuthKey } from '~/clientToken.js';
-
-import '../styles/index.css';
-
-const libraries = ['places'];
-
-export const HireControlMap = ({
-	clientToken,
-	navigateToDetails = null,
-	navigateToEasyApply = null,
-	Link = null,
-	linkFormat = '/jobs/[slug]',
-	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);}
-}) => {
-	const [siteConfig, setSiteconfig] = useState(null);
-
-	useEffect(() => {
-		setClientAuthKey(clientToken);
-		const fetchSiteConfig = async () => {
-			try {
-				const configData = await getMapConfig(clientToken);
-				setSiteconfig(configData);
-			} catch (error) {
-				console.error('Failed to fetch site configuration:', error);
-			}
-		};
-
-		fetchSiteConfig();
-	}, [clientToken]);
-
-	const { isLoaded } = useLoadScript({
-		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
-		version: 'quarterly',
-		libraries: libraries
-	});
-
-	return (
-		<div>
-			{isLoaded && siteConfig && (
-				<HomeBody
-					siteConfig={siteConfig}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					trackEvent={trackEvent}
-				/>
-			)}
-		</div>
-	);
-};
-
-const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, trackEvent }) => {
-	const resetFilters = false;
-
-	return (
-		<TrackEventProvider trackEvent={trackEvent}>
-			<MapListProvider
-				siteConfig={siteConfig}
-				resetFilters={resetFilters}
-				avigateToDetails={navigateToDetails}
-				navigateToEasyApply={navigateToEasyApply}
-				Link={Link}
-				linkFormat={linkFormat}
-			>
-				<MapProvider resetFilters={resetFilters}>
-					<PlacesProvider
-						placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-						markerColors={{
-							fillColor: siteConfig.colors.primary,
-							strokeColor: siteConfig.colors.primaryDark,
-							selectedFillColor: siteConfig.colors.secondary,
-							selectedStrokeColor: siteConfig.colors.secondaryDark,
-							placeMarkers: {
-								colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-								size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-							}
-						}}
-					>
-						<Grid
-							as='section'
-							id='job-search-interface'
-							columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
-							gap='hc-gap-0'
-							autoRows={false}
-							className='hc-items-stretch hc-h-screen hc-min-h-[30rem] hc-divide-x hc-divide-uiAccent/20'
-						>
-							<Grid.Item className='hc-bg-gray-100'>
-								<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
-							</Grid.Item>
-							<MapList
-								markerConfigs={{
-									fillColor: siteConfig.colors.primary,
-									strokeColor: siteConfig.colors.primaryDark,
-									selectedFillColor: siteConfig.colors.secondary,
-									selectedStrokeColor: siteConfig.colors.secondaryDark,
-									placeMarkers: {
-										colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-										size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-									}
-								}}
-								showMap={siteConfig.showMap}
-								fieldsShown={siteConfig.fieldsShown}
-								specialFeatures={siteConfig.specialFeatures}
-								fieldNames={siteConfig.fieldNames}
-								placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-							/>
-						</Grid>
-					</PlacesProvider>
-				</MapProvider>
-			</MapListProvider>
-		</TrackEventProvider>
-	);
-};
-
-export default HireControlMap;
+import React, { useEffect, useState } from 'react';
+import { useLoadScript } from '@react-google-maps/api';
+
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/modules/filter';
+import MapList from '~/components/modules/maps/map-list';
+
+import { MapProvider } from '~/contexts/mapContext';
+import { PlacesProvider } from '~/contexts/placesContext';
+import { MapListProvider } from '~/contexts/mapListContext';
+import { TrackEventProvider } from '~/contexts/trackEventContext';
+
+import { getMapConfig } from '~/services/configService';
+import { setClientAuthKey } from '~/clientToken.js';
+
+import '../styles/index.css';
+
+const libraries = ['places'];
+
+export const HireControlMap = ({
+	clientToken,
+	navigateToDetails = null,
+	navigateToEasyApply = null,
+	Link = null,
+	linkFormat = '/jobs/[slug]',
+	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);},
+	listings = []
+}) => {
+	const [siteConfig, setSiteconfig] = useState(null);
+
+	useEffect(() => {
+		setClientAuthKey(clientToken);
+		const fetchSiteConfig = async () => {
+			try {
+				const configData = await getMapConfig(clientToken);
+				setSiteconfig(configData);
+			} catch (error) {
+				console.error('Failed to fetch site configuration:', error);
+			}
+		};
+
+		fetchSiteConfig();
+	}, [clientToken]);
+
+	const { isLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: libraries
+	});
+
+	return (
+		<div>
+			{isLoaded && siteConfig && (
+				<HomeBody
+					siteConfig={siteConfig}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					trackEvent={trackEvent}
+					listings={listings}
+				/>
+			)}
+		</div>
+	);
+};
+
+const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, trackEvent, listings }) => {
+	const resetFilters = false;
+
+	return (
+		<TrackEventProvider trackEvent={trackEvent}>
+			<MapListProvider
+				siteConfig={siteConfig}
+				resetFilters={resetFilters}
+				avigateToDetails={navigateToDetails}
+				navigateToEasyApply={navigateToEasyApply}
+				Link={Link}
+				linkFormat={linkFormat}
+				listings={listings}
+			>
+				<MapProvider resetFilters={resetFilters}>
+					<PlacesProvider
+						placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+						markerColors={{
+							fillColor: siteConfig.colors.primary,
+							strokeColor: siteConfig.colors.primaryDark,
+							selectedFillColor: siteConfig.colors.secondary,
+							selectedStrokeColor: siteConfig.colors.secondaryDark,
+							placeMarkers: {
+								colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+								size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+							}
+						}}
+					>
+						<Grid
+							as='section'
+							id='job-search-interface'
+							columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
+							gap='hc-gap-0'
+							autoRows={false}
+							className='hc-items-stretch hc-h-screen hc-min-h-[30rem] hc-divide-x hc-divide-uiAccent/20'
+						>
+							<Grid.Item className='hc-bg-gray-100'>
+								<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
+							</Grid.Item>
+							<MapList
+								markerConfigs={{
+									fillColor: siteConfig.colors.primary,
+									strokeColor: siteConfig.colors.primaryDark,
+									selectedFillColor: siteConfig.colors.secondary,
+									selectedStrokeColor: siteConfig.colors.secondaryDark,
+									placeMarkers: {
+										colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+										size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+									}
+								}}
+								showMap={siteConfig.showMap}
+								fieldsShown={siteConfig.fieldsShown}
+								specialFeatures={siteConfig.specialFeatures}
+								fieldNames={siteConfig.fieldNames}
+								placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+							/>
+						</Grid>
+					</PlacesProvider>
+				</MapProvider>
+			</MapListProvider>
+		</TrackEventProvider>
+	);
+};
+
+export default HireControlMap;

package/src/components/modules/accordions/MapAccordionItem.js

@@ -1,74 +1,32 @@
-import React from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import ListItem from '~/components/modules/maps/list/list-item';
-import ItemExpandCard from '~/components/modules/maps/list/item-expand-card';
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-import { setStorageObject } from '~/util/localStorageUtil';
-
-const MapAccordionItem = ({
-	item,
-	itemRefs,
-	itemExpandedContent,
-	fieldsShown,
-	showMap,
-	hasListItemSelected,
-	specialFeatures,
-	isActive
-}) => {
-	const {
-		mapItems,
-		recruiters,
-		setMobileTab,
-		favorites,
-		handleSettingFavorites
-	} = useMapList();
-	const { selectItem } = useMap();
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const setSelectedItemAndZoomMap = item => {
-		if (isActive) {
-			localStorage.removeItem("selectedListItem");
-			mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
-			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
-		} else {
-			setStorageObject("selectedListItem", item);
-			let location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
-			selectItem(item, location, 12, {
-				lat: location?.latitude,
-				lng: location?.longitude
-			});
-		}
-	};
-	return (
-		<Accordion.Item key={item.id} id={item.id}>
-			<Accordion.Trigger.Blank>
-				<ListItem
-					ref={el => (itemRefs.current[item.id] = el)}
-					id={item.id}
-					key={item.id}
-					item={item}
-					fieldsShown={fieldsShown}
-					onClick={() => 	{ trackEvent(eventTypes.JOB_LISTING_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });setSelectedItemAndZoomMap(item);}}
-					showMap={showMap}
-					isActive={isActive}
-					setMobileTab={setMobileTab}
-					specialFeatures={specialFeatures}
-					className={hasListItemSelected ? isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85" : ""}
-					favorites={favorites}
-					setFavorites={handleSettingFavorites}
-				/>
-			</Accordion.Trigger.Blank>
-			{isActive &&
-				<Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
-					<ItemExpandCard content={itemExpandedContent(item, recruiters)} />
-				</Accordion.Content>
-			}
-		</Accordion.Item>
-	);
-};
-
-export default MapAccordionItem;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import ItemExpandCard from '~/components/modules/list/item-expand-card';
+
+const MapAccordionItem = ({
+	item,
+	itemRefs,
+	itemExpandedContent,
+	isActive,
+	children
+}) => {
+	if(isActive){
+		console.log("accordion rerender ");
+	}
+	return (
+		<Accordion.Item key={item.id} id={item.id}>
+			<Accordion.Trigger.Blank>
+				<div ref={el => (itemRefs.current[item.id] = el)}>
+					{children}
+				</div>
+			</Accordion.Trigger.Blank>
+			{isActive &&
+
+        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
+        	{ <ItemExpandCard content={itemExpandedContent(item)} />}
+        </Accordion.Content>
+			}
+		</Accordion.Item>
+	);
+};
+
+export default MapAccordionItem;