@abcagency/hc-ui-components 1.0.0

package/rollup.config.js

@@ -0,0 +1,67 @@
+const babel = require('@rollup/plugin-babel').default;
+const resolve = require('@rollup/plugin-node-resolve');
+const external = require('rollup-plugin-peer-deps-external');
+const alias = require('@rollup/plugin-alias');
+const path = require('path');
+const commonjs = require('@rollup/plugin-commonjs');
+const replace = require('@rollup/plugin-replace');
+const dotenv = require('dotenv');
+const postcss = require('rollup-plugin-postcss');
+dotenv.config();
+
+const plugins = [
+  external(),
+  resolve(),
+  postcss({
+    extensions: ['.css'],
+    extract: 'globals.css',
+    minimize: true,
+    plugins: [
+      require('tailwindcss'),
+      require('autoprefixer')
+    ],
+  }),
+  replace({
+    preventAssignment: true,
+    'process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY': JSON.stringify(process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY),
+    'process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_URL': JSON.stringify(process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_URL),
+    'process.env.NEXT_PUBLIC_HC_API_BASE_URL': JSON.stringify(process.env.NEXT_PUBLIC_HC_API_BASE_URL),
+  }),
+  alias({
+    entries: [{ find: '~', replacement: path.resolve(__dirname, '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', 'axios', 'next/router', 
+  'next/image', 'react/jsx-runtime', 'tailwind-merge', '@rollup/plugin-alias'
+];
+
+module.exports = [
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'dist/index.js',
+      format: 'es',
+      exports: 'named'
+    },
+    plugins,
+    external: externalDependencies
+  },
+  {
+    input: 'src/services/listingService.js',  
+    output: {
+      file: 'dist/services/listingService.js',
+      format: 'es',
+      exports: 'named'
+    },
+    plugins,
+    external: externalDependencies
+  },
+];

package/src/apis/hcApi.js

@@ -0,0 +1,68 @@
+
+import { getClientAuthKey } from '~/clientToken.js'
+const baseURL = `${process.env.NEXT_PUBLIC_HC_API_BASE_URL}`
+
+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) {
+			sessionStorage.setItem('authToken', data.token);
+			sessionStorage.setItem('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 = sessionStorage.getItem('authToken');
+	const expirationDateTime = sessionStorage.getItem('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();
+	}
+};

package/src/clientToken.js

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

package/src/components/layout/footer.js

@@ -0,0 +1,34 @@
+import NavSocial from '~/components/modules/navigation/social';
+import Button from '~/components/modules/buttons/default';
+import React from 'react'
+import site from '~/data/site.json';
+
+const Footer = () => {
+	return (
+		<footer className="px-4 py-3 bg-slate-100 text-gray-700 text-center text-xs">
+			<div className="container flex justify-between items-center">
+				<p className="m-0">
+					© {new Date().getFullYear()}. <a href={`${site.copyright.url}`} target="_blank">{site.copyright.name}</a>
+				</p>
+
+				<div className="flex items-center gap-3">
+					<NavSocial />
+
+					<Button.Scroll
+						href="top"
+						variant="icon"
+						size="sq"
+					>
+						<span className="sr-only">To the top!</span>
+						<Button.Icon
+							icon="mdi:arrow-collapse-up"
+							size="w-4 h-4"
+						/>
+					</Button.Scroll>
+				</div>
+			</div>
+		</footer>
+	);
+};
+
+export default Footer;

package/src/components/layout/header.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useState } from 'react';
+import Headroom from 'react-headroom';
+
+import Navbar from '~/components/modules/navigation/navbar';
+
+const Header = () => {
+	const [isPinned, setIsPinned] = useState(false);
+
+	return (
+		<Headroom
+			style={{ zIndex: 50 }}
+			onPin={() => setIsPinned(true)}
+			onUnfix={() => setIsPinned(false)}
+		>
+			<header>
+				<Navbar isPinned={isPinned} />
+			</header>
+		</Headroom>
+	);
+};
+
+export default Header;

package/src/components/layout/layout.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+import { SectionContext } from '~/components/modules/sections/sectionContext';
+
+import { Provider } from '~/util/provider';
+import SkipLink from '~/components/modules/navigation/skip-link';
+
+const RootLayout = ({
+	children
+}) => {
+	const [currentSection, setCurrentSection] = useState(null);
+
+	return (
+		<div
+			id="top"
+			className="relative"
+		>
+			<Provider>
+				<SectionContext.Provider
+					value={{
+						currentSection,
+						setCurrentSection
+					}}
+				>
+					<SkipLink />
+
+					<main id="start-of-content">
+						{children}
+					</main>
+				</SectionContext.Provider>
+			</Provider>
+		</div>
+	);
+};
+
+export default RootLayout;

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

@@ -0,0 +1,69 @@
+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 { setStorageObject } from "~/util/localStorageUtil";
+import { useEffect } from "react";
+import { useMapList } from "~/contexts/mapListContext";
+import React from 'react'
+const MapAccordionItem = ({
+	item,
+	itemRefs,
+	itemExpandedContent,
+	fieldsShown,
+	showMap,
+	hasListItemSelected,
+	specialFeatures,
+	isActive
+}) => {
+	const {
+		mapItems,
+		recruiters,
+		setMobileTab,
+		favorites,
+		handleSettingFavorites
+	} = useMapList();
+	const { selectItem } = useMap();
+	const setSelectedItemAndZoomMap = item => {
+		if (isActive) {
+			localStorage.removeItem("selectedListItem");
+			mapItems.find(x => x.items.hasOwnProperty(item.id)) || null;
+			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
+		} else {
+			setStorageObject("selectedListItem", item);
+			let location = mapItems.find(x => x.items.hasOwnProperty(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={() => setSelectedItemAndZoomMap(item)}
+					showMap={showMap}
+					isActive={isActive}
+					setMobileTab={setMobileTab}
+					specialFeatures={specialFeatures}
+					className={hasListItemSelected ? isActive ? "!border-secondary border border-b-0" : "opacity-85" : ""}
+					favorites={favorites}
+					setFavorites={handleSettingFavorites}
+				/>
+			</Accordion.Trigger.Blank>
+			{ isActive &&
+			<Accordion.Content bodyClassName="px-2 py-2 pt-0 bg-uiAccent/5 border-secondary border border-t-0">
+				<ItemExpandCard content={itemExpandedContent(item, recruiters)} />
+			</Accordion.Content>
+			}
+		</Accordion.Item>
+	);
+};
+
+export default MapAccordionItem;

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

@@ -0,0 +1,173 @@
+import { forwardRef } from 'react';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import { twMerge } from 'tailwind-merge';
+import Icon from '~/components/modules/icon';
+import React from 'react';
+import trackEvent from '~/hooks/useEventTracker';
+
+const Accordion = ({
+	className,
+	type = 'single',
+	defaultValue,
+	collapsible = true,
+	children
+}) => {
+	return (
+		<RadixAccordion.Root
+			type={type}
+			value={defaultValue ?? null}
+			collapsible={collapsible}
+			className={className ?? ''}
+			onValueChange={value => trackEvent('Engagement', 'Open Accordion', value)}
+		>
+			{children}
+		</RadixAccordion.Root>
+	);
+};
+
+export const AccordionItem = forwardRef((
+	{
+		id,
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => {
+	return (
+		<RadixAccordion.Item
+			ref={forwardedRef}
+			value={id}
+			className={className ?? ''}
+			{...props}
+		>
+			{children}
+		</RadixAccordion.Item>
+	);
+});
+
+export const AccordionTrigger = forwardRef((
+	{
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header asChild>
+		<RadixAccordion.Trigger
+			ref={forwardedRef}
+			className={twMerge(
+				'group flex justify-between w-full p-4 font-bold text-left text-uiText focus:outline-none focus-visible:ring focus-visible:ring-uiAccent focus-visible:ring-opacity-75 hover:text-primary focus:text-primary transition data-[state=open]:text-primary',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{children}
+			<Icon
+				icon="uil:angle-down"
+				size="w-5 h-5"
+				className="transition-transform group-data-[state=open]:!rotate-180"
+				aria-hidden="true"
+			/>
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionTriggerHasHeader = forwardRef((
+	{
+		header,
+		headerClassName,
+		iconClassName,
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header
+		className={twMerge(
+			'group flex items-start justify-between w-full p-4 pr-3 font-bold text-left text-uiText focus:outline-none focus-visible:ring focus-visible:ring-uiAccent focus-visible:ring-opacity-75 hover:text-primary focus:text-primary transition data-[state=open]:text-primary',
+			headerClassName ?? ''
+		)}
+	>
+		<RadixAccordion.Trigger
+			ref={forwardedRef}
+			className={twMerge('flex items-center justify-between w-full', className ?? '')}
+			{...props}
+		>
+			{children}
+			<Icon
+				icon="uil:angle-down"
+				size="w-5 h-5"
+				className={twMerge(
+					'transition-transform group-data-[state=open]:!rotate-180',
+					iconClassName ?? ''
+				)}
+				aria-hidden="true"
+			/>
+			{header}
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionTriggerBlank = forwardRef((
+	{
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header asChild>
+		<RadixAccordion.Trigger
+			asChild
+			ref={forwardedRef}
+			{...props}
+		>
+			{children}
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionContent = forwardRef((
+	{
+		children,
+		className,
+		bodyClassName,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Content
+		ref={forwardedRef}
+		className={twMerge(
+			'data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden',
+      	className ?? ''
+		)}
+		{...props}
+	>
+		<div
+			className={twMerge(
+				'p-4 pt-0.5',
+				bodyClassName ?? ''
+			)}
+		>
+			{children}
+		</div>
+	</RadixAccordion.Content>
+));
+
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Trigger.Blank = AccordionTriggerBlank;
+Accordion.Trigger.HasHeader = AccordionTriggerHasHeader;
+Accordion.Content = AccordionContent;
+
+AccordionItem.displayName = 'AccordionItem';
+AccordionTrigger.displayName = 'AccordionTrigger';
+AccordionTriggerBlank.displayName = 'AccordionTriggerBlank';
+AccordionTriggerHasHeader.displayName = 'AccordionTriggerHasHeader';
+AccordionContent.displayName = 'AccordionContent';
+
+export default Accordion;

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

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import React from 'react';
+import Accordion from "~/components/modules/accordions/default";
+import FilterItem from "~/components/modules/filter/item";
+import ItemsPill from "~/components/modules/buttons/items-pill";
+
+const AccordionFilterItem = memo(({ filter, setDefaultValue, setSelectedFilters, selectedFilters }) => {
+	const fieldKey = filter.id;
+	const activeItemsCount = selectedFilters != null && selectedFilters[fieldKey]
+		? Object.keys(selectedFilters[fieldKey]).length
+		: 0;
+
+	const handleClearFilters = () => {
+		setSelectedFilters(prevFilters => {
+			const updatedFilters = { ...prevFilters };
+			delete updatedFilters[fieldKey];
+			return updatedFilters;
+	  });
+	};
+	return (
+		<Accordion.Item key={filter.id} id={filter.id}>
+			<Accordion.Trigger.HasHeader
+				onClick={() => setDefaultValue(filter.id)}
+				className="stretched-link text-left"
+				iconClassName="order-last"
+				headerClassName="relative py-2 rounded border border-uiAccent/20 bg-white text-sm transition data-[state=open]:border-b-transparent data-[state=open]:rounded-b-none"
+				header={
+					activeItemsCount > 0 && (
+						<ItemsPill
+							activeItemsCount={activeItemsCount}
+							onClick={handleClearFilters}
+						/>
+					)
+				}
+			>
+				{filter.title}
+			</Accordion.Trigger.HasHeader>
+			<Accordion.Content bodyClassName="px-2 py-1 bg-white rounded-b border border-uiAccent/20 border-t-0 max-h-[20vh] md:max-h-[25vh] overflow-auto">
+				{filter.items.sort().map(item => (
+					<FilterItem
+						key={item.name}
+						item={item}
+						field={filter.id}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={setSelectedFilters}
+					/>
+				))}
+			</Accordion.Content>
+		</Accordion.Item>
+	);
+});
+AccordionFilterItem.displayName = 'AccordionItem';
+export default AccordionFilterItem;

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

@@ -0,0 +1,44 @@
+import Accordion from "~/components/modules/accordions/default";
+import AccordionFilterItem from "./filterItem";
+import FilterCard from "~/components/modules/cards/filter";
+import Loading from "~/util/loading";
+import { useMapList } from "~/contexts/mapListContext";
+import React from 'react'
+const AccordionFilters = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem
+}) => {
+	const { filterOptions, selectedFilters, setSelectedFilters, favorites, filterByFavorites, setFilterByFavorites } = useMapList();
+
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fa-solid:sliders-h">
+				<span>
+					Filter <span className="md:hidden lg:inline">your search</span>
+				</span>
+			</FilterCard.Title>
+
+			<Accordion defaultValue={defaultValue} className="space-y-4" >
+				{!filterOptions?.filters && (
+					<Accordion.Item>
+						<Loading />
+					</Accordion.Item>
+				)}
+				{filterOptions?.filters && filterOptions?.filters.map(filter => (
+					<AccordionFilterItem
+						key={filter.id}
+						filter={filter}
+						setDefaultValue={setDefaultValue}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
+					/>
+				))}
+			</Accordion>
+		</FilterCard>
+	);
+};
+
+export default AccordionFilters;

package/src/components/modules/animations/slidein.js

@@ -0,0 +1,41 @@
+import { useRef } from 'react';
+import { motion, useScroll, useSpring, useTransform } from 'framer-motion';
+import React from 'react'
+const SlideIn = ({
+	as = "div",
+	children,
+	delay = 0.05,
+	opacity = 1,
+	scale = 0.95,
+	y = 50,
+	...rest
+}) => {
+	const ref = useRef();
+
+	const { scrollYProgress } = useScroll({
+		target: ref,
+		offset: ["start end", `start 0.85`]
+	});
+
+	const scaleContained = useTransform(scrollYProgress, [0, 1], [scale, 1]);
+
+	const scaleSpring = useSpring(scaleContained, {
+		damping: 100,
+		stiffness: 1000
+	});
+
+	return (
+		<motion.div
+			ref={ref}
+			className="h-full"
+			style={{
+				scale: scaleSpring
+			}}
+			{...rest}
+		>
+			{children}
+		</motion.div>
+	);
+};
+
+export default SlideIn;

package/src/components/modules/buttons/button-group-apply.js

@@ -0,0 +1,75 @@
+import { twMerge } from 'tailwind-merge';
+import React from 'react'
+import Button from '~/components/modules/buttons/default';
+import ApplyDialog from '../dialogs/apply-dialog';
+
+const ButtonGroupApply = ({
+	applyUrl,
+	useDetailsPostMessage,
+	applyText = 'Apply Now',
+	detailsUrl,
+	detailsText = 'View Details',
+	className,
+	buttonSize = 'default',
+	applyButtonVariant = 'primary',
+	detailsButtonVariant = 'outline',
+	includeDialog = false,
+	internalApplyLink,
+	itemId,
+	companyName
+}) => {
+
+	const applyButton = () => {
+		return 	 <Button.Anchor
+			variant={applyButtonVariant}
+			size={buttonSize}
+		>
+			{applyText}
+		</Button.Anchor>;;
+	};
+
+	return (
+		<nav
+			className={twMerge`
+				flex flex-row justify-between gap-2 w-full
+				${className ?? ''}
+			`}
+		>
+			{detailsUrl && useDetailsPostMessage !== true &&
+				<Button.Anchor
+					href={detailsUrl}
+					variant={detailsButtonVariant}
+					size={buttonSize}
+				>
+					{detailsText}
+				</Button.Anchor>
+			}
+			{useDetailsPostMessage === true &&
+			<Button.Btn
+				onClick={() => { window.parent.postMessage({ itemId: itemId, type:'LISTING_ID' }, '*');}}
+				variant={detailsButtonVariant}
+				size={buttonSize}
+			>
+				{detailsText}
+			</Button.Btn>}
+			{applyUrl && !includeDialog &&
+				<>
+				 <Button.Anchor
+						href={applyUrl}
+						variant={applyButtonVariant}
+						size={buttonSize}
+					>
+						{applyText}
+					</Button.Anchor>
+				</>
+			}
+			{applyUrl && includeDialog &&
+			<ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
+				{applyButton()}
+			</ApplyDialog>
+			}
+		</nav>
+	);
+};
+
+export default ButtonGroupApply;