@abcagency/hc-ui-components 1.9.35 → 1.9.37

package/README.md

@@ -1,323 +0,0 @@
-# HireControl UI Components
-
-A flexible, customizable React component library for job search interfaces with integrated maps and filtering.
-
-## Features
-
-- 🗺️ **Interactive Map Integration** - Google Maps with job location markers
-- 🔍 **Advanced Filtering** - Multi-faceted search with dynamic counts
-- 📱 **Mobile Responsive** - Tab-based mobile interface
-- 🎨 **Fully Customizable** - Override any component with your own
-- ⚡ **Performance Optimized** - Lazy loading and efficient rendering
-- 🎯 **Type Safe** - TypeScript support
-- 🧩 **Modular Architecture** - Use what you need
-
-## Installation
-
-```bash
-npm install @hirecontrol/hc-ui-components
-```
-
-## Quick Start
-
-```jsx
-import { HireControlMap } from '@hirecontrol/hc-ui-components';
-
-function App() {
-  return (
-    <HireControlMap
-      googleMapsApiKey="your-api-key"
-      siteConfiguration={siteConfig}
-      listings={listings}
-      entities={entities}
-    />
-  );
-}
-```
-
-## Component Customization
-
-**NEW!** Override any component to customize the UI while preserving all business logic:
-
-```jsx
-import { HireControlMap } from '@hirecontrol/hc-ui-components';
-import MyCustomFilter from './MyCustomFilter';
-import MyCustomListItem from './MyCustomListItem';
-
-<HireControlMap
-  googleMapsApiKey="your-api-key"
-  siteConfiguration={siteConfig}
-  listings={listings}
-  entities={entities}
-  components={{
-    Filter: MyCustomFilter,
-    ListItem: MyCustomListItem,
-    MapMarker: MyCustomMapMarker,
-    // Override any component you want
-  }}
-/>
-```
-
-### Available Components
-
-- **Map Components**: `MapList`, `MapTabs`, `Map`, `MapMarker`, `PlaceMarker`, `InfoWindowCard`
-- **Filter Components**: `Filter`, `FilterItem`, `FilterSearch`, `FilterLocation`, `FilterCommute`
-- **List Components**: `ListItem`, `ItemsList`, `ListHeader`, `FieldMapperDesktop`, `FieldMapperMobile`
-- **Accordion Components**: `Accordion`, `FiltersAccordion`, `FilterItemAccordion`, `MapAccordionItem`
-- **Button Components**: `Button`, `ButtonGroupApply`, `ItemsPill`, `ShowAllButton`
-- **Card Components**: `Card`, `CardFilter`
-- **Dialog Components**: `ApplyDialog`
-- **Utility Components**: `Grid`, `Icon`
-
-See [Component Customization Guide](./docs/COMPONENT_CUSTOMIZATION.md) for detailed documentation.
-
-## Props
-
-### Required Props
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `googleMapsApiKey` | string | Google Maps API key |
-| `siteConfiguration` | object | Site configuration object |
-| `listings` | array | Job listings data |
-
-### Optional Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `entities` | array | `[]` | Entity/location data |
-| `components` | object | `{}` | Component overrides |
-| `containerStyle` | object | `{ height: '100vh' }` | Container styling |
-| `hideMap` | boolean | `false` | Hide map view |
-| `hideFilters` | boolean | `false` | Hide filter panel |
-| `filterConfig` | object | `{}` | Filter configuration |
-| `trackEvent` | function | Console log | Analytics tracking |
-| `navigateToDetails` | function | `null` | Custom navigation handler |
-| `Link` | component | `null` | Custom Link component |
-| `defaultFilters` | object | `null` | Initial filter state |
-| `hiddenFilters` | array | `null` | Filters to hide |
-
-See full prop documentation in [API Reference](./docs/API_REFERENCE.md).
-
-## Site Configuration
-
-```javascript
-const siteConfiguration = {
-  colors: {
-    primary: '#3B82F6',
-    primaryDark: '#1E40AF',
-    secondary: '#10B981',
-    secondaryDark: '#047857',
-    uiText: '#1F2937',
-    uiAccent: '#6B7280',
-    borderDefault: '#E5E7EB'
-  },
-  showMap: true,
-  mapPosition: 'bottom', // 'top' or 'bottom'
-  fieldsShown: ['title', 'category', 'entityName', 'location'],
-  fieldNames: {
-    title: 'Job Title',
-    category: 'Category',
-    entityName: 'Company',
-    location: 'Location'
-  },
-  pointsOfInterestConfig: {
-    placeMappings: {},
-    showAtZoomLevel: 12,
-    placeMarkerColors: {},
-    placeMarkerSize: 30
-  }
-};
-```
-
-## Advanced Usage
-
-### Using Component Hooks
-
-```jsx
-import { useComponents } from '@hirecontrol/hc-ui-components';
-
-const MyCustomComponent = () => {
-  const { Filter, ListItem } = useComponents();
-  
-  return (
-    <div>
-      <Filter {...filterProps} />
-      <ListItem {...itemProps} />
-    </div>
-  );
-};
-```
-
-### Extending Default Components
-
-```jsx
-import { defaultComponents } from '@hirecontrol/hc-ui-components';
-
-const EnhancedFilter = (props) => {
-  const DefaultFilter = defaultComponents.Filter;
-  
-  return (
-    <div className="enhanced-wrapper">
-      <DefaultFilter {...props} />
-      <div className="custom-addition">Extra content</div>
-    </div>
-  );
-};
-```
-
-### Higher-Order Component Pattern
-
-```jsx
-import { withComponents } from '@hirecontrol/hc-ui-components';
-
-const MyContainer = ({ Filter, ListItem, data }) => {
-  return (
-    <div>
-      <Filter />
-      {data.map(item => <ListItem key={item.id} item={item} />)}
-    </div>
-  );
-};
-
-export default withComponents(['Filter', 'ListItem'])(MyContainer);
-```
-
-## Styling
-
-The library uses Tailwind CSS with a custom `hc-` prefix to avoid conflicts:
-
-```jsx
-<div className="hc-bg-primary hc-text-white hc-p-4 hc-rounded-lg">
-  Custom styled element
-</div>
-```
-
-### Customizing Styles
-
-1. **Override components** with your own styling
-2. **Use filterConfig.classNames** to inject custom classes
-3. **Wrap with styled containers** around default components
-
-## Examples
-
-### Custom Filter with Analytics
-
-```jsx
-const AnalyticsFilter = (props) => {
-  const { Filter } = useComponents();
-  
-  useEffect(() => {
-    analytics.track('Filter Panel Viewed');
-  }, []);
-  
-  const handleFilterChange = (filters) => {
-    analytics.track('Filters Applied', { filters });
-    props.setSelectedFilters(filters);
-  };
-  
-  return <Filter {...props} setSelectedFilters={handleFilterChange} />;
-};
-```
-
-### Custom List Item with Favorites
-
-```jsx
-const CustomListItem = ({ item, favorites, handleSettingFavorites, ...props }) => {
-  const isFavorite = favorites.includes(item.id);
-  
-  return (
-    <div className="hc-border hc-rounded-lg hc-p-4 hc-hover:shadow-lg">
-      <div className="hc-flex hc-justify-between">
-        <h3>{item.fields.title}</h3>
-        <button 
-          onClick={(e) => {
-            e.stopPropagation();
-            handleSettingFavorites(item.id);
-          }}
-        >
-          {isFavorite ? '❤️' : '🤍'}
-        </button>
-      </div>
-      <p className="hc-text-gray-600">{item.fields.category}</p>
-      <p className="hc-text-sm">{item.mapDetails?.entityDisplayName}</p>
-    </div>
-  );
-};
-```
-
-## TypeScript Support
-
-The library includes TypeScript definitions:
-
-```typescript
-import { HireControlMap, ComponentOverrides } from '@hirecontrol/hc-ui-components';
-
-const customComponents: ComponentOverrides = {
-  Filter: MyCustomFilter,
-  ListItem: MyCustomListItem,
-};
-
-<HireControlMap
-  googleMapsApiKey={apiKey}
-  siteConfiguration={config}
-  listings={listings}
-  components={customComponents}
-/>
-```
-
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Mobile browsers (iOS Safari, Chrome Mobile)
-
-## Performance
-
-- Lazy loading of Google Maps
-- Virtual scrolling for large lists
-- Debounced search inputs
-- Optimized re-renders with React.memo
-- Efficient clustering for map markers
-
-## Troubleshooting
-
-### Google Maps Not Loading
-- Verify API key is correct
-- Check API key has Maps JavaScript API enabled
-- Ensure domain is whitelisted in Google Console
-
-### Custom Components Not Rendering
-- Verify component name matches exactly (case-sensitive)
-- Ensure all required props are handled
-- Check browser console for errors
-
-### Styling Conflicts
-- Use the `hc-` prefix for Tailwind classes
-- Check CSS specificity
-- Use browser dev tools to inspect styles
-
-See [Troubleshooting Guide](./docs/TROUBLESHOOTING.md) for more help.
-
-## Documentation
-
-- [Component Customization Guide](./docs/COMPONENT_CUSTOMIZATION.md) - Detailed customization docs
-- [Component Reference](./docs/COMPONENT_REFERENCE.md) - Quick reference for all components
-- [API Reference](./docs/API_REFERENCE.md) - Complete prop documentation
-- [Examples](./docs/EXAMPLES.md) - Code examples and use cases
-
-## Contributing
-
-Contributions are welcome! Please read our [Contributing Guide](./CONTRIBUTING.md) first.
-
-## License
-
-MIT License - see [LICENSE](./LICENSE) file for details.
-
-## Support
-
-- GitHub Issues: https://github.com/hirecontrol/hc-ui-components/issues
-- Documentation: https://docs.hirecontrol.com
-- Email: support@hirecontrol.com

package/src/components/modules/maps/map.js.bak

@@ -1,67 +0,0 @@
-import React from 'react';
-import { GoogleMap, useLoadScript } from "@react-google-maps/api";
-import ShowAllButton from "~/components/modules/buttons/show-all-button";
-
-const Map = ({
-	zoom,
-	center,
-	mapContainerRef,
-	onLoad,
-	onIdle,
-	mapInteracted,
-	pinIconUrl,
-	setMapInteracted,
-	fitBounds,
-	mapRef,
-	setQuery,
-	filteredListingsLength,
-	setSelectedFilters,
-	children
-}) => {
-	// Don't render GoogleMap until google.maps.Map constructor is available
-	const isGoogleMapsAvailable = typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map;
-	
-	return (
-		<>
-			<div ref={mapContainerRef} className="hc-h-full hc-relative">
-				{isGoogleMapsAvailable && (
-					<GoogleMap
-					zoom={zoom}
-					onLoad={onLoad}
-					onIdle={onIdle}
-					center={center}
-					mapContainerStyle={{
-						width: "100%",
-						height: "100%"
-					}}
-					options={{
-						styles: [
-							{
-								featureType: "poi",
-								elementType: "labels",
-								stylers: [{ visibility: "off" }]
-							}
-						]
-					}}
-				)}
-				>
-					{children}
-				</GoogleMap>
-				{mapInteracted && (
-					<ShowAllButton
-						mapInteracted={mapInteracted}
-						setMapInteracted={setMapInteracted}
-						fitBounds={fitBounds}
-						mapRef={mapRef}
-						pinIconUrl={pinIconUrl}
-						setQuery={setQuery}
-						listingCount={filteredListingsLength}
-						setSelectedFilters={setSelectedFilters}
-					/>
-				)}
-			</div>
-		</>
-	);
-};
-
-export default Map;

package/src/components/modules/maps/map.js.bak2

@@ -1,67 +0,0 @@
-import React from 'react';
-import { GoogleMap, useLoadScript } from "@react-google-maps/api";
-import ShowAllButton from "~/components/modules/buttons/show-all-button";
-
-const Map = ({
-	zoom,
-	center,
-	mapContainerRef,
-	onLoad,
-	onIdle,
-	mapInteracted,
-	pinIconUrl,
-	setMapInteracted,
-	fitBounds,
-	mapRef,
-	setQuery,
-	filteredListingsLength,
-	setSelectedFilters,
-	children
-}) => {
-	// Don't render GoogleMap until google.maps.Map constructor is available
-	const isGoogleMapsAvailable = typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map;
-	
-	return (
-		<>
-			<div ref={mapContainerRef} className="hc-h-full hc-relative">
-				{isGoogleMapsAvailable && (
-					<GoogleMap
-					zoom={zoom}
-					onLoad={onLoad}
-					onIdle={onIdle}
-					center={center}
-					mapContainerStyle={{
-						width: "100%",
-						height: "100%"
-					}}
-					options={{
-						styles: [
-							{
-								featureType: "poi",
-								elementType: "labels",
-								stylers: [{ visibility: "off" }]
-							}
-						]
-					}}
-				
-				>
-					{children}
-				</GoogleMap>
-				{mapInteracted && (
-					<ShowAllButton
-						mapInteracted={mapInteracted}
-						setMapInteracted={setMapInteracted}
-						fitBounds={fitBounds}
-						mapRef={mapRef}
-						pinIconUrl={pinIconUrl}
-						setQuery={setQuery}
-						listingCount={filteredListingsLength}
-						setSelectedFilters={setSelectedFilters}
-					/>
-				)}
-			</div>
-		</>
-	);
-};
-
-export default Map;

package/src/contexts/componentContext.tsx

@@ -1,226 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-
-// Import all default components
-import MapList from '~/components/modules/maps/map-list';
-import MapTabs from '~/components/modules/maps/tabs';
-import Map from '~/components/modules/maps/map';
-import PlaceMarker from '~/components/modules/maps/place-marker';
-import MapMarker from '~/components/modules/maps/map-marker';
-import InfoWindowCard from '~/components/modules/maps/info-window-card';
-import InfoWindowContent from '~/components/modules/maps/info-window-content';
-
-import Filter from '~/components/modules/filter/index';
-import FilterItem from '~/components/modules/filter/item';
-import FilterSearch from '~/components/modules/filter/search';
-import FilterLocation from '~/components/modules/filter/location';
-import FilterCommute from '~/components/modules/filter/commute';
-import FilterRadioItem from '~/components/modules/filter/radio-item';
-import FilterSort from '~/components/modules/filter/sort';
-
-import ListItem from '~/components/modules/list/list-item/list-item';
-import ItemsList from '~/components/modules/list/item-list';
-import ListHeader from '~/components/modules/list/header';
-import ListHeaderItem from '~/components/modules/list/header-item';
-import FieldMapperDesktop from '~/components/modules/list/field-mapper-desktop';
-import FieldMapperMobile from '~/components/modules/list/field-mapper-mobile';
-import ItemExpandCard from '~/components/modules/list/item-expand-card/index';
-import RecruiterDetails from '~/components/modules/list/item-expand-card/recruiter-details';
-import RecruiterHeadshot from '~/components/modules/list/item-expand-card/recruiter-headshot';
-import RecruiterContactNav from '~/components/modules/list/item-expand-card/recruiter-contact-nav';
-
-import ListingDetails from '~/components/modules/jobListing/listing-details';
-
-import Accordion from '~/components/modules/accordions/default';
-import FiltersAccordion from '~/components/modules/accordions/filters';
-import FilterItemAccordion from '~/components/modules/accordions/filterItem';
-import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
-
-import Button from '~/components/modules/buttons/default';
-import ButtonGroupApply from '~/components/modules/buttons/button-group-apply';
-import ItemsPill from '~/components/modules/buttons/items-pill';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-import ShowAllButton from '~/components/modules/buttons/show-all-button';
-
-import Card from '~/components/modules/cards/default';
-import CardFilter from '~/components/modules/cards/filter';
-
-import ApplyDialog from '~/components/modules/dialogs/apply-dialog';
-
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-
-/**
- * Default component registry - all available components in the library
- */
-export const defaultComponents = {
-	// Map components
-	MapList,
-	MapTabs,
-	Map,
-	PlaceMarker,
-	MapMarker,
-	InfoWindowCard,
-	InfoWindowContent,
-
-	// Filter components
-	Filter,
-	FilterItem,
-	FilterSearch,
-	FilterLocation,
-	FilterCommute,
-	FilterRadioItem,
-	FilterSort,
-
-	// List components
-	ListItem,
-	ItemsList,
-	ListHeader,
-	ListHeaderItem,
-	FieldMapperDesktop,
-	FieldMapperMobile,
-	ItemExpandCard,
-	RecruiterDetails,
-	RecruiterHeadshot,
-	RecruiterContactNav,
-
-	// Job listing components
-	ListingDetails,
-
-	// Accordion components
-	Accordion,
-	FiltersAccordion,
-	FilterItemAccordion,
-	MapAccordionItem,
-
-	// Button components
-	Button,
-	ButtonGroupApply,
-	ItemsPill,
-	PillWrapper,
-	ShowAllButton,
-
-	// Card components
-	Card,
-	CardFilter,
-
-	// Dialog components
-	ApplyDialog,
-
-	// Utility components
-	Grid,
-	Icon,
-};
-
-/**
- * Type for component overrides
- * Users can override any component by passing a custom implementation
- */
-export type ComponentOverrides = Partial<typeof defaultComponents>;
-
-/**
- * Component registry type - combines defaults with overrides
- */
-export type ComponentRegistry = typeof defaultComponents;
-
-interface ComponentProviderProps {
-	children: React.ReactNode;
-	components?: ComponentOverrides;
-}
-
-/**
- * Context for accessing components throughout the app
- */
-const ComponentContext = createContext<ComponentRegistry>(defaultComponents);
-
-/**
- * ComponentProvider - Provides component registry with optional overrides
- *
- * @example
- * ```tsx
- * // Using default components
- * <ComponentProvider>
- *   <HireControlMap />
- * </ComponentProvider>
- *
- * // With custom components
- * <ComponentProvider components={{
- *   Filter: MyCustomFilter,
- *   ListItem: MyCustomListItem
- * }}>
- *   <HireControlMap />
- * </ComponentProvider>
- * ```
- */
-export const ComponentProvider: React.FC<ComponentProviderProps> = ({
-	children,
-	components = {}
-}) => {
-	// Merge default components with custom overrides
-	const componentRegistry = useMemo(() => ({
-		...defaultComponents,
-		...components,
-	}), [components]);
-
-	return (
-		<ComponentContext.Provider value={componentRegistry}>
-			{children}
-		</ComponentContext.Provider>
-	);
-};
-
-/**
- * Hook to access component registry
- *
- * @example
- * ```tsx
- * const { Filter, ListItem } = useComponents();
- * return <Filter {...props} />;
- * ```
- */
-export const useComponents = (): ComponentRegistry => {
-	const context = useContext(ComponentContext);
-	if (!context) {
-		throw new Error('useComponents must be used within a ComponentProvider');
-	}
-	return context;
-};
-
-/**
- * HOC to inject specific components as props
- * Useful for containers that need specific components
- *
- * @example
- * ```tsx
- * const MyContainer = withComponents(['Filter', 'ListItem'])(({ Filter, ListItem, ...props }) => {
- *   return (
- *     <div>
- *       <Filter {...filterProps} />
- *       <ListItem {...itemProps} />
- *     </div>
- *   );
- * });
- * ```
- */
-export const withComponents = <T extends (keyof ComponentRegistry)[]>(
-	componentKeys: T
-) => {
-	return <P extends object>(
-		Component: React.ComponentType<P & Pick<ComponentRegistry, T[number]>>
-	) => {
-		const WrappedComponent = (props: P) => {
-			const components = useComponents();
-			const selectedComponents = componentKeys.reduce((acc, key) => {
-				acc[key] = components[key];
-				return acc;
-			}, {} as Pick<ComponentRegistry, T[number]>);
-
-			return <Component {...props} {...selectedComponents} />;
-		};
-
-		WrappedComponent.displayName = `withComponents(${Component.displayName || Component.name || 'Component'})`;
-
-		return WrappedComponent;
-	};
-};
-
-export default ComponentProvider;

package/src/styles/components.css

@@ -1,30 +0,0 @@
-@config "../../tailwind.config.js";
-
-/* Only include components and utilities - no base styles */
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-	.track * {
-		@apply hc-pointer-events-none;
-	}
-
-	.stretched-link::after {
-		@apply hc-content-[''] hc-absolute hc-inset-0 hc-z-[1] hc-pointer-events-auto hc-bg-transparent;
-	}
-}
-
-/* Component-specific utilities */
-.fit-content {
-	height: fit-content;
-}
-
-/* CSS Variables for theming - these should be set by the consuming app */
-:root {
-	--ui-text: #000000;
-	--ui-accent: #959595;
-	--primary: #959595;
-	--primary-dark: #959595;
-	--secondary: #959595;
-	--secondary-dark: #959595;
-}