@abcagency/hc-ui-components 1.6.5 → 1.6.7

package/src/contexts/mapListContext.tsx

@@ -55,6 +55,28 @@ interface MapListContextProps {
   containerStyle?: any;
   ExpandListComponent?: React.ComponentType<{ listing: any }> | ((listing: any) => JSX.Element) | null;
   noEntities?: boolean;
+  filterConfig?: {
+    hideZeroResults?: boolean;
+    dynamicCounts?: boolean;
+    showFavorites?: boolean;
+    collapsedByDefault?: boolean;
+    sortAlphabetically?: boolean;
+    classNames?: {
+      filterContainer?: string;
+      filterContent?: string;
+      filterAccordion?: string;
+      filterAccordionHeader?: string;
+      filterAccordionContent?: string;
+      filterItem?: string;
+      filterItemLabel?: string;
+      filterItemCheckbox?: string;
+      filterItemCount?: string;
+      searchInput?: string;
+      resetButton?: string;
+      showJobsButton?: string;
+      filterFooter?: string;
+    };
+  };
 }
 
 const MapListContext = createContext<MapListContextProps | undefined>(undefined);
@@ -101,6 +123,28 @@ interface MapListProviderProps {
   hideMap?: boolean;
   hideFilters?: boolean;
   noEntities?: boolean;
+  filterConfig?: {
+    hideZeroResults?: boolean;
+    dynamicCounts?: boolean;
+    showFavorites?: boolean;
+    collapsedByDefault?: boolean;
+    sortAlphabetically?: boolean;
+    classNames?: {
+      filterContainer?: string;
+      filterContent?: string;
+      filterAccordion?: string;
+      filterAccordionHeader?: string;
+      filterAccordionContent?: string;
+      filterItem?: string;
+      filterItemLabel?: string;
+      filterItemCheckbox?: string;
+      filterItemCount?: string;
+      searchInput?: string;
+      resetButton?: string;
+      showJobsButton?: string;
+      filterFooter?: string;
+    };
+  };
 }
 
 export const MapListProvider: React.FC<MapListProviderProps> = ({
@@ -128,17 +172,39 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	localStorageKey,
 	hideMap = false,
 	hideFilters = false,
-	noEntities = false
+	noEntities = false,
+	filterConfig = {
+		hideZeroResults: false,
+		dynamicCounts: true,
+		showFavorites: true,
+		collapsedByDefault: false,
+		sortAlphabetically: false,
+		classNames: {
+			filterContainer: '',
+			filterContent: '',
+			filterAccordion: '',
+			filterAccordionHeader: '',
+			filterAccordionContent: '',
+			filterItem: '',
+			filterItemLabel: '',
+			filterItemCheckbox: '',
+			filterItemCount: '',
+			searchInput: '',
+			resetButton: '',
+			showJobsButton: '',
+			filterFooter: ''
+		}
+	}
 }) => {
 	const firstLoadFilters = () =>{
 		let urlData = filtersFromURL(window.location);
 		let urlFilters = urlData?.filters;
-		
+
 		// If ls-ignore=true is in URL, don't load from localStorage
 		if (urlData?.lsIgnore) {
 			return urlFilters || {};
 		}
-		
+
 		return  (setFiltersUrl === true && urlFilters && Object.keys(urlFilters).length > 0) ? urlFilters  : getStorageObject(localStorageKey + 'selectedFilters', {}) || {}
 	}
 
@@ -146,12 +212,12 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		if (resetFilters) return null;
 		// Check URL first
 		const urlData = filtersFromURL(window.location);
-		
+
 		// If ls-ignore=true is in URL, don't load from localStorage
 		if (urlData?.lsIgnore) {
 			return urlData?.query || null;
 		}
-		
+
 		if (setFiltersUrl === true && urlData?.query) {
 			return urlData.query;
 		}
@@ -277,7 +343,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 				console.log('processListings: Skipping - allListings is empty');
 				return;
 			}
-			
+
 			let filteredListings: Listing[];
 			let tempSelectedFilters = selectedFilters;
 			let tempQuery = query;
@@ -297,11 +363,11 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			if (filterByFavorites) {
 				filteredListings = filteredListings.filter((x: Listing) => favorites.includes(x.id));
 			}
-			
+
 			// Batch state updates together
 			setNewFilteredListings(filteredListings);
 			setMapItems(mapItems);
-			
+
 			if (firstLoad && tempSelectedFilters) {
 				// Update URL with filters if needed
 			} else if (Object.keys(tempSelectedFilters).length === 0 && !firstLoad) {
@@ -318,6 +384,31 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			if (tempSelectedFilters) {
 				const keys = Object.keys(tempSelectedFilters);
 				const lastKey = keys[keys.length - 1];
+
+				// Ensure all filterConfig properties have values
+				const normalizedFilterConfig = {
+					hideZeroResults: filterConfig?.hideZeroResults ?? false,
+					dynamicCounts: filterConfig?.dynamicCounts ?? true,
+					showFavorites: filterConfig?.showFavorites ?? true,
+					collapsedByDefault: filterConfig?.collapsedByDefault ?? false,
+					sortAlphabetically: filterConfig?.sortAlphabetically ?? false,
+					classNames: {
+						filterContainer: filterConfig?.classNames?.filterContainer ?? '',
+						filterContent: filterConfig?.classNames?.filterContent ?? '',
+						filterAccordion: filterConfig?.classNames?.filterAccordion ?? '',
+						filterAccordionHeader: filterConfig?.classNames?.filterAccordionHeader ?? '',
+						filterAccordionContent: filterConfig?.classNames?.filterAccordionContent ?? '',
+						filterItem: filterConfig?.classNames?.filterItem ?? '',
+						filterItemLabel: filterConfig?.classNames?.filterItemLabel ?? '',
+						filterItemCheckbox: filterConfig?.classNames?.filterItemCheckbox ?? '',
+						filterItemCount: filterConfig?.classNames?.filterItemCount ?? '',
+						searchInput: filterConfig?.classNames?.searchInput ?? '',
+						resetButton: filterConfig?.classNames?.resetButton ?? '',
+						showJobsButton: filterConfig?.classNames?.showJobsButton ?? '',
+						filterFooter: filterConfig?.classNames?.filterFooter ?? ''
+					}
+				};
+
 				const options = generateFilterOptions(
 					filteredListings,
 					allListings,
@@ -325,7 +416,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 					filterOptions,
 					lastKey,
 					favorites,
-					tempSelectedFilters
+					tempSelectedFilters,
+					normalizedFilterConfig
 				);
 				if (options) {
 					setFilterOptions(options);
@@ -403,7 +495,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			hiddenFilters,
 			containerStyle,
 			ExpandListComponent,
-			noEntities
+			noEntities,
+			filterConfig
 		}}>
 			{children}
 		</MapListContext.Provider>

package/src/util/algoliaSearchUtil.js

@@ -56,11 +56,11 @@ export const searchAlgolia = async (query) => {
 		// Extract IDs from the results and maintain order
 		const hits = results[0]?.hits || [];
 		console.log('Algolia search returned', hits.length, 'hits');
-		
+
 		const referenceNumbers = [];
 		const ids = [];
 		const orderMap = new Map(); // Map to store the Algolia result order
-		
+
 		hits.forEach((hit, index) => {
 			if (hit.referenceNumber) {
 				const refNum = parseInt(hit.referenceNumber);
@@ -92,18 +92,18 @@ export const filterListingsByAlgoliaSearch = async (listings, query) => {
 
 	try {
 		const { referenceNumbers, ids, orderMap } = await searchAlgolia(query);
-		
+
 		console.log('Filtering', listings.length, 'listings against', referenceNumbers.length, 'referenceNumbers and', ids.length, 'ids');
 		console.log('Sample listing referenceNumbers:', listings.slice(0, 5).map(l => l.referenceNumber));
 		console.log('Sample listing ids:', listings.slice(0, 5).map(l => l.id));
 		console.log('Sample Algolia referenceNumbers:', referenceNumbers.slice(0, 5));
 		console.log('Sample Algolia ids:', ids.slice(0, 5));
-		
+
 		// Filter listings by matching referenceNumber OR id
-		const filtered = listings.filter(listing => 
+		const filtered = listings.filter(listing =>
 			referenceNumbers.includes(listing.referenceNumber) || ids.includes(listing.id)
 		);
-		
+
 		// Sort filtered listings by Algolia result order
 		filtered.sort((a, b) => {
 			// Get the Algolia order index for each listing
@@ -111,7 +111,7 @@ export const filterListingsByAlgoliaSearch = async (listings, query) => {
 			const orderB = orderMap.get(`ref-${b.referenceNumber}`) ?? orderMap.get(`id-${b.id}`) ?? Infinity;
 			return orderA - orderB;
 		});
-		
+
 		console.log('Filtered result:', filtered.length, 'listings matched and sorted by Algolia order');
 		return filtered;
 	} catch (error) {

package/src/util/filterUtil.js

@@ -4,10 +4,10 @@ import { isAlgoliaAvailable, filterListingsByAlgoliaSearch } from '~/util/algoli
 
 import Fuse from 'fuse.js';
 
-export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = null) => {
+export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = false, sortAlphabetically = false) => {
 	const options = new Set();
 	listings.forEach(listing => {
-		if (listing.fields[field]) {
+		if (listing.fields && listing.fields[field]) {
 			options.add(listing.fields[field]);
 		}
 	});
@@ -18,22 +18,32 @@ export const getFilterOptions = (listings, filteredListings, field, excludeZeroC
 	});
 
 	filteredListings.forEach(listing => {
+		if (!listing.fields) return;
 		const value = listing.fields[field];
-		if (value && optionCounts.hasOwnProperty(value)) {
+		if (value && Object.prototype.hasOwnProperty.call(optionCounts, value)) {
 			optionCounts[value] += 1;
 		}
 	});
 
-	return Array.from(options)
-		.sort()
+	let result = Array.from(options)
+		.filter(option => option != null && option !== '') // Filter out null/empty values
 		.map(option => ({
 			name: option,
 			count: optionCounts[option] || 0
 		}))
 		.filter(option => !(excludeZeroCount === true && option.count === 0));
+
+	// Sort alphabetically or by count
+	if (sortAlphabetically) {
+		result.sort((a, b) => a.name.localeCompare(b.name));
+	} else {
+		result.sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
+	}
+
+	return result;
 };
 
-export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig, favorites) => {
+export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig, favorites, filterConfig = {}) => {
 	const specialFeatures = siteConfig.specialFeatures;
 	const featureCounts = Object.keys(specialFeatures).sort().reduce((acc, key) => {
 		acc[specialFeatures[key]] = 0;
@@ -48,17 +58,28 @@ export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig,
 		});
 	});
 
-	const specialFeatureOptions = Object.entries(featureCounts).map(([name, count]) => ({
+	let specialFeatureOptions = Object.entries(featureCounts).map(([name, count]) => ({
 		name,
 		count
 	}));
 
+	// Update favorite count
 	for (let option of specialFeatureOptions) {
 		if (option.name === 'Favorite') {
 			option.count = filteredListings.filter(x => favorites.includes(x.id)).length;
 		}
 	}
 
+	// Hide favorites if filterConfig.showFavorites is false
+	if (filterConfig.showFavorites === false) {
+		specialFeatureOptions = specialFeatureOptions.filter(option => option.name !== 'Favorite');
+	}
+
+	// Hide zero results if filterConfig.hideZeroResults is true
+	if (filterConfig.hideZeroResults === true) {
+		specialFeatureOptions = specialFeatureOptions.filter(option => option.count > 0);
+	}
+
 	return specialFeatureOptions;
 };
 
@@ -76,9 +97,19 @@ export const generateFilterOptions = (
 	filterOptions,
 	parentField,
 	favorites,
-	selectedFilters
+	selectedFilters,
+	filterConfig = {
+		hideZeroResults: false,
+		dynamicCounts: true,
+		showFavorites: true,
+		collapsedByDefault: false,
+		sortAlphabetically: false
+	}
 ) => {
 	if (allListings.length > 0) {
+		// Determine which listings to use for counts based on dynamicCounts setting
+		const countListings = filterConfig.dynamicCounts ? filteredListings : allListings;
+
 		const dynamicFilters = siteConfig.fieldFiltersShown.map(fieldName => {
 			if (fieldName === parentField && filterOptions?.filters) {
 				return filterOptions.filters.find(filter => filter.id === fieldName);
@@ -87,31 +118,31 @@ export const generateFilterOptions = (
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getFilterOptions(allListings, allListings, fieldName)
+					items: getFilterOptions(allListings, countListings, fieldName, filterConfig.hideZeroResults, filterConfig.sortAlphabetically)
 				};
 			}
 			if(fieldName == 'subCategory' && selectedFilters.category){
 				const categoryKeys = Object.keys(selectedFilters.category);
-				const filteredListings = allListings.filter(
+				const filteredByCategory = allListings.filter(
 					x => categoryKeys.includes(x.fields?.category)
 				);
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getFilterOptions(allListings, filteredListings, fieldName, false)
+					items: getFilterOptions(allListings, filteredByCategory, fieldName, filterConfig.hideZeroResults, filterConfig.sortAlphabetically)
 				};
 			}
 			if (fieldName == "specialFeatures") {
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getSpecialFeatureOptions(allListings, filteredListings, siteConfig, favorites).sort()
+					items: getSpecialFeatureOptions(allListings, countListings, siteConfig, favorites, filterConfig).sort()
 				};
 			}
 			return {
 				id: fieldName,
 				title: siteConfig.fieldNames[fieldName],
-				items: getFilterOptions(allListings, filteredListings, fieldName)
+				items: getFilterOptions(allListings, countListings, fieldName, filterConfig.hideZeroResults, filterConfig.sortAlphabetically)
 			};
 		});
 
@@ -186,9 +217,24 @@ export const generateFilterOptions = (
 			)
 		};
 
+		// Filter out null filters and ensure items arrays don't contain undefined values
+		const cleanFilters = dynamicFilters
+			.filter(f => f != null && f.items != null)
+			.map(f => ({
+				...f,
+				items: f.items.filter(item => item != null && item.name != null)
+			}));
+
+		const cleanLocations = locations
+			.filter(l => l != null && l.items != null)
+			.map(l => ({
+				...l,
+				items: l.items.filter(item => item != null && item.name != null)
+			}));
+
 		return {
-			filters: dynamicFilters,
-			locations: locations,
+			filters: cleanFilters,
+			locations: cleanLocations,
 			pointsOfInterest: pointsOfInterest
 		};
 	}
@@ -235,7 +281,7 @@ export const applyFilters = async (
 			});
 		} else if (Object.keys(filterItems).length > 0) {
 			results = results.filter(listing =>
-				filterItems.hasOwnProperty(listing.fields[formattedField])
+				Object.prototype.hasOwnProperty.call(filterItems, listing.fields[formattedField])
 			);
 		}
 	}
@@ -314,7 +360,7 @@ export const filterListingsByLocation = (
 	let results = allListings;
 	if (selectedLocation !== null) {
 		results = results.filter(item =>
-			selectedLocation.items.hasOwnProperty(item.id)
+			Object.prototype.hasOwnProperty.call(selectedLocation.items, item.id)
 		);
 	}
 	const mapItems = getDistinctItemsByProximity(results, listingEntities);

package/src/util/twMerge.js

@@ -0,0 +1,6 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// Create a custom tailwind-merge that understands the hc- prefix
+export const twMerge = extendTailwindMerge({
+	prefix: 'hc-'
+});