@abcagency/hc-ui-components 1.3.19 → 1.3.21

package/src/contexts/placesContext.js

@@ -1,102 +1,102 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
-import { markerIconProps } from '~/util/mapIconUtil';
-
-import { useMap } from '~/contexts/mapContext';
-
-import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
-
-const PlacesContext = createContext();
-
-export const usePlaces = () => useContext(PlacesContext);
-
-export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
-	const { selectedPlaces, zoom, center } = useMap();
-	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
-	const [currentCenter, setCurrentCenter] = useState(center);
-	const [currentZoom, setCurrentZoom] = useState(zoom);
-	const [placesWindow, setPlacesWindow] = useState(false);
-	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
-
-	const getRadiusForZoom = () => {
-		if (currentZoom >= 18) return 1000;
-		if (currentZoom <= 10) return 0;
-
-		let tempZoom = Math.pow(19 - currentZoom, 4.85);
-		let radius = tempZoom;
-		let minRadius = 1500;
-		let maxRadius = 800000;
-
-		if (radius < minRadius) radius = minRadius;
-		else if (radius > maxRadius) radius = maxRadius;
-
-		return radius;
-	};
-
-	useEffect(() => {
-		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
-			setPoiMarkers({ markers: [], icon: null });
-			return;
-		}
-		const fetchPlaces = async () => {
-			let poiTypes = [];
-			const selectedPOICategories = selectedPlaces;
-			selectedPOICategories.forEach(pointOfInterest => {
-				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
-			});
-
-			const radius = getRadiusForZoom();
-			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
-
-			try {
-				const response = await searchNearbyPlaces(poiTypes, location, radius);
-				const newMarkers = response.places.map(place => {
-					const getParentCategory = types => {
-						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
-							return acc.concat(placeMappings[category]);
-						}, []);
-
-						for (const type of types) {
-							if (!selectedTypes.includes(type)) continue;
-							for (const category in placeMappings) {
-								if (placeMappings[category].includes(type)) {
-									return category;
-								}
-							}
-
-						}
-					};
-
-					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
-
-					return {
-						position: { lat: place.location.latitude, lng: place.location.longitude },
-						title: place.displayName.text,
-						icon: icon
-					};
-				});
-				setPoiMarkers({ markers: newMarkers, icon: null });
-			} catch (error) {
-				console.error('Failed to fetch places:', error);
-			}
-		};
-
-		fetchPlaces();
-	}, [selectedPlaces, currentZoom, currentCenter]);
-
-	return (
-		<PlacesContext.Provider value={{
-			poiMarkers,
-			setCurrentCenter,
-			currentCenter,
-			setCurrentZoom,
-			currentZoom,
-			placesWindow,
-			setPlacesWindow,
-			selectedPlaceMarker,
-			setSelectedPlaceMarker
-		}}>
-			{children}
-		</PlacesContext.Provider>
-	);
-};
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { markerIconProps } from '~/util/mapIconUtil';
+
+import { useMap } from '~/contexts/mapContext';
+
+import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
+
+const PlacesContext = createContext();
+
+export const usePlaces = () => useContext(PlacesContext);
+
+export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
+	const { selectedPlaces, zoom, center } = useMap();
+	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
+	const [currentCenter, setCurrentCenter] = useState(center);
+	const [currentZoom, setCurrentZoom] = useState(zoom);
+	const [placesWindow, setPlacesWindow] = useState(false);
+	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
+
+	const getRadiusForZoom = () => {
+		if (currentZoom >= 18) return 1000;
+		if (currentZoom <= 10) return 0;
+
+		let tempZoom = Math.pow(19 - currentZoom, 4.85);
+		let radius = tempZoom;
+		let minRadius = 1500;
+		let maxRadius = 800000;
+
+		if (radius < minRadius) radius = minRadius;
+		else if (radius > maxRadius) radius = maxRadius;
+
+		return radius;
+	};
+
+	useEffect(() => {
+		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
+			setPoiMarkers({ markers: [], icon: null });
+			return;
+		}
+		const fetchPlaces = async () => {
+			let poiTypes = [];
+			const selectedPOICategories = selectedPlaces;
+			selectedPOICategories.forEach(pointOfInterest => {
+				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
+			});
+
+			const radius = getRadiusForZoom();
+			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
+
+			try {
+				const response = await searchNearbyPlaces(poiTypes, location, radius);
+				const newMarkers = response.places.map(place => {
+					const getParentCategory = types => {
+						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
+							return acc.concat(placeMappings[category]);
+						}, []);
+
+						for (const type of types) {
+							if (!selectedTypes.includes(type)) continue;
+							for (const category in placeMappings) {
+								if (placeMappings[category].includes(type)) {
+									return category;
+								}
+							}
+
+						}
+					};
+
+					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
+
+					return {
+						position: { lat: place.location.latitude, lng: place.location.longitude },
+						title: place.displayName.text,
+						icon: icon
+					};
+				});
+				setPoiMarkers({ markers: newMarkers, icon: null });
+			} catch (error) {
+				console.error('Failed to fetch places:', error);
+			}
+		};
+
+		fetchPlaces();
+	}, [selectedPlaces, currentZoom, currentCenter]);
+
+	return (
+		<PlacesContext.Provider value={{
+			poiMarkers,
+			setCurrentCenter,
+			currentCenter,
+			setCurrentZoom,
+			currentZoom,
+			placesWindow,
+			setPlacesWindow,
+			selectedPlaceMarker,
+			setSelectedPlaceMarker
+		}}>
+			{children}
+		</PlacesContext.Provider>
+	);
+};

package/src/styles/bundle.css

@@ -0,0 +1,268 @@
+/* Custom prefixed styles */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.hc-bundle html {
+	font-size: 14px;
+  }
+
+  @media (min-width: 768px) {
+	.hc-bundle html {
+	  font-size: 16px;
+	}
+  }
+
+  .hc-bundle .btn:focus, .hc-bundle .btn:active:focus, .hc-bundle .btn-link.nav-link:focus, .hc-bundle .form-control:focus, .hc-bundle .form-check-input:focus {
+	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+  }
+
+  .hc-bundle html {
+	position: relative;
+	min-height: 100%;
+  }
+
+  .hc-bundle body {
+	margin-bottom: 60px;
+  }
+
+  .hc-bundle *, .hc-bundle :after, .hc-bundle :before {
+	border: 0 solid #e5e7eb;
+	box-sizing: border-box;
+  }
+
+  .hc-bundle :after, .hc-bundle :before {
+	--tw-content: "";
+  }
+
+  .hc-bundle :host, .hc-bundle html {
+	-webkit-text-size-adjust: 100%;
+	font-feature-settings: normal;
+	-webkit-tap-highlight-color: transparent;
+	font-family: var(--font-roboto-flex), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	font-variation-settings: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+  }
+
+
+  .hc-bundle hr {
+	border-top-width: 1px;
+	color: inherit;
+	height: 0;
+  }
+
+  .hc-bundle abbr:where([title]) {
+	-webkit-text-decoration: underline dotted;
+	text-decoration: underline dotted;
+  }
+
+
+  .hc-bundle a {
+	color: inherit;
+	text-decoration: inherit;
+  }
+
+  .hc-bundle b, .hc-bundle strong {
+	font-weight: bolder;
+  }
+
+  .hc-bundle code, .hc-bundle kbd, .hc-bundle pre, .hc-bundle samp {
+	font-feature-settings: normal;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+	font-size: 1em;
+	font-variation-settings: normal;
+  }
+
+  .hc-bundle small {
+	font-size: 80%;
+  }
+
+  .hc-bundle sub, .hc-bundle sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+  }
+
+  .hc-bundle sub {
+	bottom: -.25em;
+  }
+
+  .hc-bundle sup {
+	top: -.5em;
+  }
+
+  .hc-bundle table {
+	border-collapse: collapse;
+	border-color: inherit;
+	text-indent: 0;
+  }
+
+  .hc-bundle button, .hc-bundle input, .hc-bundle optgroup, .hc-bundle select, .hc-bundle textarea {
+	font-feature-settings: inherit;
+	color: inherit;
+	font-family: inherit;
+	font-size: 100%;
+	font-variation-settings: inherit;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	line-height: inherit;
+	margin: 0;
+	padding: 0;
+  }
+
+  .hc-bundle button, .hc-bundle select {
+	text-transform: none;
+  }
+
+  .hc-bundle button, .hc-bundle input:where([type=button]), .hc-bundle input:where([type=reset]), .hc-bundle input:where([type=submit]) {
+	-webkit-appearance: button;
+	background-color: transparent;
+	background-image: none;
+  }
+
+  .hc-bundle :-moz-focusring {
+	outline: auto;
+  }
+
+  .hc-bundle :-moz-ui-invalid {
+	box-shadow: none;
+  }
+
+  .hc-bundle progress {
+	vertical-align: baseline;
+  }
+
+  .hc-bundle ::-webkit-inner-spin-button, .hc-bundle ::-webkit-outer-spin-button {
+	height: auto;
+  }
+
+  .hc-bundle [type=search] {
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
+  }
+
+  .hc-bundle ::-webkit-search-decoration {
+	-webkit-appearance: none;
+  }
+
+  .hc-bundle ::-webkit-file-upload-button {
+	-webkit-appearance: button;
+	font: inherit;
+  }
+
+  .hc-bundle summary {
+	display: list-item;
+  }
+
+  .hc-bundle textarea {
+	resize: vertical;
+  }
+
+  .hc-bundle input::-moz-placeholder, .hc-bundle textarea::-moz-placeholder {
+	color: #9ca3af;
+  }
+
+  .hc-bundle input::placeholder, .hc-bundle textarea::placeholder {
+	color: #9ca3af;
+  }
+
+  .hc-bundle [role=button], .hc-bundle button {
+	cursor: pointer;
+  }
+
+  .hc-bundle :disabled {
+	cursor: default;
+  }
+
+  .hc-bundle audio, .hc-bundle canvas, .hc-bundle embed, .hc-bundle iframe, .hc-bundle img, .hc-bundle object, .hc-bundle svg, .hc-bundle video {
+	display: block;
+	vertical-align: middle;
+  }
+
+  .hc-bundle img, .hc-bundle video {
+	height: auto;
+	max-width: 100%;
+  }
+
+  .hc-bundle [hidden] {
+	display: none;
+  }
+
+  .hc-bundle [multiple], .hc-bundle [type=date], .hc-bundle [type=datetime-local], .hc-bundle [type=email], .hc-bundle [type=month], .hc-bundle [type=number], .hc-bundle [type=password], .hc-bundle [type=search], .hc-bundle [type=tel], .hc-bundle [type=text], .hc-bundle [type=time], .hc-bundle [type=url], .hc-bundle [type=week], .hc-bundle input:where(:not([type])), .hc-bundle select, .hc-bundle textarea {
+	--tw-shadow: 0 0 #0000;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-color: #fff;
+	border-color: #6b7280;
+	border-radius: 0;
+	border-width: 1px;
+	font-size: 1rem;
+	line-height: 1.5rem;
+	padding: .5rem .75rem;
+  }
+
+  .hc-bundle [multiple]:focus, .hc-bundle [type=date]:focus, .hc-bundle [type=datetime-local]:focus, .hc-bundle [type=email]:focus, .hc-bundle [type=month]:focus, .hc-bundle [type=number]:focus, .hc-bundle [type=password]:focus, .hc-bundle [type=search]:focus, .hc-bundle [type=tel]:focus, .hc-bundle [type=text]:focus, .hc-bundle [type=time]:focus, .hc-bundle [type=url]:focus, .hc-bundle [type=week]:focus, .hc-bundle input:where(:not([type])):focus, .hc-bundle select:focus, .hc-bundle textarea:focus {
+	--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+	--tw-ring-offset-width: 0px;
+	--tw-ring-offset-color: #fff;
+	--tw-ring-color: #2563eb;
+	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+	border-color: #2563eb;
+	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+  }
+
+  .hc-bundle input::-moz-placeholder, .hc-bundle textarea::-moz-placeholder {
+	color: #6b7280;
+	opacity: 1;
+  }
+
+  .hc-bundle input::placeholder, .hc-bundle textarea::placeholder {
+	color: #6b7280;
+	opacity: 1;
+  }
+
+  .hc-bundle ::-webkit-datetime-edit-fields-wrapper {
+	padding: 0;
+  }
+
+  .hc-bundle ::-webkit-date-and-time-value {
+	min-height: 1.5em;
+	text-align: inherit;
+  }
+
+  .hc-bundle ::-webkit-datetime-edit {
+	display: inline-flex;
+  }
+
+  .hc-bundle ::-webkit-datetime-edit, .hc-bundle ::-webkit-datetime-edit-day-field, .hc-bundle ::-webkit-datetime-edit-hour-field, .hc-bundle ::-webkit-datetime-edit-meridiem-field, .hc-bundle ::-webkit-datetime-edit-millisecond-field, .hc-bundle ::-webkit-datetime-edit-minute-field, .hc-bundle ::-webkit-datetime-edit-month-field, .hc-bundle ::-webkit-datetime-edit-second-field, .hc-bundle ::-webkit-datetime-edit-year-field {
+	padding-bottom: 0;
+	padding-top: 0;
+  }
+
+  .hc-bundle select {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+	background-position: right .5rem center;
+	background-repeat: no-repeat;
+	background-size: 1.5em 1.5em;
+	padding-right: 2.5rem;
+	-webkit-print-color-adjust: exact;
+	print-color-adjust: exact;
+  }
+
+  .hc-bundle [multiple], .hc-bundle [size]:where(select:not([size="1"])) {
+	background-image: none;
+	background-position: 0 0;
+	background-repeat: unset;
+	background-size: auto auto;
+	background-size: initial;
+	padding-right: .75rem;
+	-webkit-print-color-adjust: unset;
+	print-color-adjust: unset;
+  }

package/src/styles/index.css

@@ -1,23 +1,125 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* @layer base {
-	html {
-		@apply hc-text-400 hc-text-uiText [scroll-behavior:smooth];
-	}
-}
-
-@layer components {
-	.track * {
-		@apply hc-pointer-events-none;
-	}
-
-	.stretched-link::after {
-		@apply hc-content-[''] hc-absolute hc-inset-0 z-[1] hc-pointer-events-auto hc-bg-transparent;
-	}
-}
-
-.fit-content{
-	height:fit-content;
-} */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+*, :after, :before {
+    border: 0 solid #e5e7eb;
+    box-sizing: border-box
+}
+
+.hc-bundle :after, :before {
+    --tw-content: ""
+}
+
+.hc-bundle :host, html, .hc-bundle h4, .hc-bundle h3, .hc-bundle h2, .hc-bundle h1 {
+    -webkit-text-size-adjust: 100%;
+    font-feature-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+    font-family: var(--font-roboto-flex),ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    font-variation-settings: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4
+}
+
+.hc-bundle {
+    line-height: inherit;
+    margin: 0
+}
+
+.gmnoprint button > div > img:nth-child(1){
+    height:unset;
+    position: initial !important;
+}
+
+.hc-bundle hr {
+    border-top-width: 1px;
+    color: inherit;
+    height: 0
+}
+
+.hc-bundle abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted
+}
+
+.hc-bundle h1,.hc-bundle  h2,.hc-bundle  h3,.hc-bundle  h4,.hc-bundle  h5,.hc-bundle  h6 {
+    font-size: inherit;
+    font-weight: inherit
+}
+
+a {
+    text-decoration: inherit
+}
+
+.hc-bundle b, .hc-bundle strong {
+    font-weight: bolder
+}
+
+button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none
+}
+
+progress {
+    vertical-align: baseline
+}
+
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit
+}
+
+summary {
+    display: list-item
+}
+
+.hc-bundle blockquote,.hc-bundle  dd,.hc-bundle  dl, .hc-bundle figure,.hc-bundle  h1,.hc-bundle  h2, h3,.hc-bundle  h4,.hc-bundle  h5,.hc-bundle  h6,.hc-bundle  hr, .hc-bundle p,.hc-bundle {
+    margin: 0
+}
+
+
+    input::-moz-placeholder, textarea::-moz-placeholder {
+        color: #9ca3af
+    }
+
+    input::placeholder, textarea::placeholder {
+        color: #9ca3af
+    }
+
+[role=button], button {
+    cursor: pointer
+}
+
+:disabled {
+    cursor: default
+}
+
+.hc-bundle audio,.hc-bundle  canvas,.hc-bundle  embed,.hc-bundle  iframe, .hc-bundle img,.hc-bundle  object,.hc-bundle  svg, .hc-bundle video {
+    display: block;
+    vertical-align: middle
+}
+
+.hc-bundle img,.hc-bundle  video {
+    height: auto;
+    max-width: 100%
+}
+
+.hc-bundle [hidden] {
+    display: none
+}