@abcagency/hc-ui-components 1.0.4 → 1.0.6

package/package.json

@@ -1,38 +1,37 @@
-{
-  "name": "@abcagency/hc-ui-components",
-  "version": "1.0.4",
-  "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",
-    "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
-    "autoprefixer": "^10.4.19",
-    "dotenv": "^16.4.5",
-    "postcss": "^8.4.38",
-    "postcss-preset-env": "^9.5.13",
-    "rollup": "^4.17.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2"
-  }
-}
+{
+  "name": "@abcagency/hc-ui-components",
+  "version": "1.0.6",
+  "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"
+  }
+}

package/rollup.config.js

@@ -7,6 +7,7 @@ const commonjs = require('@rollup/plugin-commonjs');
 const replace = require('@rollup/plugin-replace');
 const dotenv = require('dotenv');
 const postcss = require('rollup-plugin-postcss');
+const prefixer =  require('postcss-prefixer');
 dotenv.config();
 
 const plugins = [
@@ -18,7 +19,8 @@ const plugins = [
     minimize: true,
     plugins: [
       require('tailwindcss'),
-      require('autoprefixer')
+      require('autoprefixer'),
+      
     ],
   }),
   replace({

package/src/components/layout/footer.js

@@ -5,13 +5,13 @@ 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">
+		<footer className="hc-px-4 hc-py-3 hc-bg-slate-100 hc-text-gray-700 hc-text-center hc-text-xs">
+			<div className="hc-container hc-flex hc-justify-between hc-items-center">
+				<p className="hc-m-0">
 					© {new Date().getFullYear()}. <a href={`${site.copyright.url}`} target="_blank">{site.copyright.name}</a>
 				</p>
 
-				<div className="flex items-center gap-3">
+				<div className="hc-flex hc-items-center hc-gap-3">
 					<NavSocial />
 
 					<Button.Scroll
@@ -19,10 +19,10 @@ const Footer = () => {
 						variant="icon"
 						size="sq"
 					>
-						<span className="sr-only">To the top!</span>
+						<span className="hc-sr-only">To the top!</span>
 						<Button.Icon
-							icon="mdi:arrow-collapse-up"
-							size="w-4 h-4"
+							icon="mdi:hc-arrow-collapse-up"
+							size="hc-size-4"
 						/>
 					</Button.Scroll>
 				</div>

package/src/components/layout/layout.js

@@ -13,7 +13,7 @@ const RootLayout = ({
 	return (
 		<div
 			id="top"
-			className="relative"
+			className="hc-relative"
 		>
 			<Provider>
 				<SectionContext.Provider

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

@@ -1,69 +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;
+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 ? "!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;

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

@@ -58,7 +58,7 @@ export const AccordionTrigger = forwardRef((
 		<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',
+				'hc-group hc-flex hc-justify-between hc-w-full hc-p-4 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none hc-focus-visible:ring hc-focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
 				className ?? ''
 			)}
 			{...props}
@@ -66,8 +66,8 @@ export const AccordionTrigger = forwardRef((
 			{children}
 			<Icon
 				icon="uil:angle-down"
-				size="w-5 h-5"
-				className="transition-transform group-data-[state=open]:!rotate-180"
+				size="hc-size-5"
+				className="hc-transition-transform hc-group-data-[state=open]:!hc-rotate-180"
 				aria-hidden="true"
 			/>
 		</RadixAccordion.Trigger>
@@ -87,13 +87,13 @@ export const AccordionTriggerHasHeader = forwardRef((
 ) => (
 	<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',
+			'hc-group hc-flex hc-items-start hc-justify-between hc-w-full hc-p-4 hc-pr-3 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none focus-visible:hc-ring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
 			headerClassName ?? ''
 		)}
 	>
 		<RadixAccordion.Trigger
 			ref={forwardedRef}
-			className={twMerge('flex items-center justify-between w-full', className ?? '')}
+			className={twMerge('hc-flex hc-items-center hc-justify-between hc-w-full', className ?? '')}
 			{...props}
 		>
 			{children}
@@ -101,7 +101,7 @@ export const AccordionTriggerHasHeader = forwardRef((
 				icon="uil:angle-down"
 				size="w-5 h-5"
 				className={twMerge(
-					'transition-transform group-data-[state=open]:!rotate-180',
+					'hc-transition-transform group-data-[state=open]:!hc-hc-rotate-180',
 					iconClassName ?? ''
 				)}
 				aria-hidden="true"
@@ -142,8 +142,8 @@ export const AccordionContent = forwardRef((
 	<RadixAccordion.Content
 		ref={forwardedRef}
 		className={twMerge(
-			'data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden',
-      	className ?? ''
+			'data-[state=open]:hc-animate-slideDown hc-data-[state=closed]:hc-animate-slideUp hc-overflow-hidden',
+			className ?? ''
 		)}
 		{...props}
 	>

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

@@ -1,53 +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;
+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="hc-stretched-link hc-text-left"
+				iconClassName="hc-order-last"
+				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
+				header={
+					activeItemsCount > 0 && (
+						<ItemsPill
+							activeItemsCount={activeItemsCount}
+							onClick={handleClearFilters}
+						/>
+					)
+				}
+			>
+				{filter.title}
+			</Accordion.Trigger.HasHeader>
+			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-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

@@ -1,44 +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;
+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:hc-hidden lg:hc-inline">your search</span>
+				</span>
+			</FilterCard.Title>
+
+			<Accordion defaultValue={defaultValue} className="hc-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

@@ -27,7 +27,7 @@ const SlideIn = ({
 	return (
 		<motion.div
 			ref={ref}
-			className="h-full"
+			className="hc-h-full"
 			style={{
 				scale: scaleSpring
 			}}