@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/package.json

@@ -1,38 +1,51 @@
-{
-  "name": "@abcagency/hc-ui-components",
-  "version": "1.1.1",
-
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "rollup -c",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@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.13",
-    "rollup": "^4.17.2",
-    "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.2.0",
+	"description": "UI Components for HireControl",
+	"main": "dist/index.js",
+	"scripts": {
+		"build": "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-tabs": "^0.1.0",
+		"@radix-ui/react-accordion": "^0.1.0",
+		"@iconify/react": "^1.0.0",
+		"@radix-ui/react-select": "^0.1.0",
+		"@headlessui/react": "^1.0.0",
+		"use-places-autocomplete": "^1.0.0",
+		"@radix-ui/react-dialog": "^0.1.0"
+	},
+	"devDependencies": {
+		"@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"
+	}
+}

package/postcss.config.js

@@ -1,15 +1,13 @@
-module.exports = {
-    plugins: {
-      'tailwindcss/nesting': 'postcss-nesting',
-      tailwindcss: {},
-      'postcss-preset-env': {
-        autoprefixer: false,
-        stage: 0,
-        features: {
-          'nesting-rules': false
-        }
-      },
-      autoprefixer: {}
-    }
-  };
-  
+module.exports = {
+  plugins: {
+    'postcss-nesting': {}, // Use postcss-nesting directly
+    tailwindcss: {},
+    'postcss-preset-env': {
+      stage: 4, // Consider specifying a higher stage if you don't need all experimental features
+      features: {
+        'nesting-rules': false // Ensure no conflict with postcss-nesting
+      }
+    },
+    autoprefixer: {}
+  }
+};

package/{src/tailwind/preset.default.js → preset.default.js}

@@ -1,15 +1,15 @@
-
-module.exports = {
-	theme: {
-		extend: {
-			colors: {
-				"uiText": "#141414",
-				"uiAccent": "#0f172a",
-				"primary": "#002575",
-				"primaryDark": "#001f5f",
-				"secondary": "#ff612b",
-				"secondaryDark": "#bf900d"
-			},
-		}
-	}
-};
+
+module.exports = {
+	theme: {
+		extend: {
+			colors: {
+				"uiText": "#141414",
+				"uiAccent": "#0f172a",
+				"primary": "#002575",
+				"primaryDark": "#001f5f",
+				"secondary": "#ff612b",
+				"secondaryDark": "#bf900d"
+			},
+		}
+	}
+};

package/rollup.config.mjs

@@ -0,0 +1,87 @@
+import babel from '@rollup/plugin-babel';
+import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
+import external from 'rollup-plugin-peer-deps-external';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import dotenv from 'dotenv';
+import postcss from 'rollup-plugin-postcss';
+import { fileURLToPath } from 'url';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+// Load environment variables from .env file
+dotenv.config();
+
+// Convert file URL to file path
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Resolve the project root directory
+const projectRootDir = path.resolve(__dirname);
+
+const plugins = [
+	external(),
+	resolve(),
+	postcss({
+		extensions: ['.css'],
+		extract: 'styles/index.css',
+		minimize: true,
+		plugins: [
+			tailwindcss,
+			autoprefixer,
+		],
+	}),
+	replace({
+		preventAssignment: true,
+		'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(process.env.GOOGLE_MAPS_API_KEY),
+		'process.env.GOOGLE_MAPS_API_URL': JSON.stringify(process.env.GOOGLE_MAPS_API_URL),
+		'process.env.HC_API_BASE_URL': JSON.stringify(process.env.HC_API_BASE_URL),
+	}),
+	alias({
+		entries: [{ find: '~', replacement: path.resolve(projectRootDir, 'src') }],
+	}),
+	babel({
+		babelHelpers: 'bundled',
+		exclude: 'node_modules/**',
+		presets: ['@babel/preset-env', '@babel/preset-react'],
+	}),
+	commonjs(),
+];
+
+const externalDependencies = [
+	'react', 'react-dom', 'react-router-dom', 'form-data',
+	'react/jsx-runtime', 'tailwind-merge'
+];
+
+export default [
+	{
+		input: 'src/index.js',
+		output: {
+			dir: 'dist',
+			format: 'es',
+			exports: 'named',
+			sourcemap: true,
+			preserveModules: true,
+			preserveModulesRoot: 'src',
+		},
+		plugins,
+		external: externalDependencies,
+		treeshake: true,
+	},
+	{
+		input: 'src/services/listingService.js',
+		output: {
+			dir: 'dist/services',
+			format: 'es',
+			exports: 'named',
+			sourcemap: true,
+			preserveModules: true,
+			preserveModulesRoot: 'src/services',
+		},
+		plugins,
+		external: externalDependencies,
+		treeshake: true,
+	},
+];

package/src/apis/hcApi.js

@@ -1,87 +1,93 @@
-import { getClientAuthKey } from '~/clientToken.js';
-const baseURL = `${process.env.NEXT_PUBLIC_HC_API_BASE_URL}`;
-
-const memoryStorage = {
-    authToken: null,
-    tokenExpiration: null
-};
-
-function setStorage(key, value) {
-    try {
-        sessionStorage.setItem(key, value);
-    } catch (error) {
-        memoryStorage[key] = value;
-    }
-}
-
-function getStorage(key) {
-    try {
-        return sessionStorage.getItem(key) || memoryStorage[key];
-    } catch (error) {
-        return memoryStorage[key];
-    }
-}
-
-const login = async () => {
-    const clientAuthKey = getClientAuthKey(); 
-    try {
-        const response = await fetch(`${baseURL}/auth/login`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                clientAuthKey: clientAuthKey
-            })
-        });
-        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 };
-        }
-    } catch (error) {
-        console.error('Login failed:', error);
-        throw error;
-    }
-};
-
-const fetchWithAuth = async (url, options = {}) => {
-    let token = getStorage('authToken');
-    const expirationDateTime = getStorage('tokenExpiration');
-    const currentTime = new Date();
-
-    if (!token || !expirationDateTime || new Date(expirationDateTime) <= currentTime) {
-        const authResponse = await login();
-        token = authResponse.token;
-    }
-
-    const headers = new Headers(options.headers || {});
-    headers.append('Authorization', `Bearer ${token}`);
-
-    const finalOptions = {
-        ...options,
-        headers
-    };
-    const response = await fetch(`${baseURL}${url}`, finalOptions);
-
-    if (!response.ok) throw new Error('Network response was not ok.');
-    return response;
-};
-
-export default {
-    get: async (url) => {
-        const response = await fetchWithAuth(url);
-        return response.json();
-    },
-    post: async (url, data) => {
-        const response = await fetchWithAuth(url, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(data)
-        });
-        return response.json();
-    }
-};
+import { getClientAuthKey } from '~/clientToken.js';
+const baseURL = process.env.HC_API_BASE_URL;
+
+const memoryStorage = {
+	authToken: null,
+	tokenExpiration: null
+};
+
+function setStorage(key, value) {
+	try {
+		sessionStorage.setItem(key, value);
+	} catch (error) {
+		memoryStorage[key] = value;
+	}
+}
+
+function getStorage(key) {
+	try {
+		return sessionStorage.getItem(key) || memoryStorage[key];
+	} catch (error) {
+		return memoryStorage[key];
+	}
+}
+
+const login = async () => {
+	const clientAuthKey = getClientAuthKey();
+
+	try {
+		const response = await fetch(`${baseURL}/auth/login`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				clientAuthKey: clientAuthKey
+			})
+		});
+
+		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 };
+		}
+	} catch (error) {
+		console.error('Login failed:', error);
+		throw error;
+	}
+};
+
+const fetchWithAuth = async (url, options = {}) => {
+	let token = getStorage('authToken');
+
+	const expirationDateTime = getStorage('tokenExpiration');
+	const currentTime = new Date();
+
+	if (!token || !expirationDateTime || new Date(expirationDateTime) <= currentTime) {
+		const authResponse = await login();
+		token = authResponse.token;
+	}
+
+	const headers = new Headers(options.headers || {});
+	headers.append('Authorization', `Bearer ${token}`);
+
+	const finalOptions = {
+		...options,
+		headers
+	};
+
+	const response = await fetch(`${baseURL}${url}`, finalOptions);
+
+	if (!response.ok) throw new Error('Network response was not ok.');
+
+	return response;
+};
+
+export default {
+	get: async (url) => {
+		const response = await fetchWithAuth(url);
+		return await response.json();
+	},
+	post: async (url, data) => {
+		const response = await fetchWithAuth(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(data)
+		});
+		return await response.json();
+	}
+};

package/src/clientToken.js

@@ -1,9 +1,9 @@
-let clientAuthKey = null;
-
-export const setClientAuthKey = (key) => {
-  clientAuthKey = key;
-};
-
-export const getClientAuthKey = () => {
-  return clientAuthKey;
-};
+let clientAuthKey = null;
+
+export const setClientAuthKey = (key) => {
+  clientAuthKey = key;
+};
+
+export const getClientAuthKey = () => {
+  return clientAuthKey;
+};

package/src/components/HireControlMap.js

@@ -0,0 +1,120 @@
+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 { 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
+}) => {
+	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,
+		libraries: libraries,
+	});
+
+	return (
+		<div>
+			{isLoaded && siteConfig && (
+				<HomeBody
+					siteConfig={siteConfig}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+				/>
+			)}
+		</div>
+	);
+};
+
+const HomeBody = ({ siteConfig, navigateToDetails, navigateToEasyApply, Link }) => {
+	const resetFilters = false;
+
+	return (
+		<MapListProvider
+			siteConfig={siteConfig}
+			resetFilters={resetFilters}
+			avigateToDetails={navigateToDetails}
+			navigateToEasyApply={navigateToEasyApply}
+			Link={Link}
+		>
+			<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>
+	);
+};
+
+export default HireControlMap;