@abcagency/hc-ui-components 1.1.1 → 1.2.1

package/src/components/modules/navigation/navbar.js

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import NavLink from '~/components/modules/navigation/nav-link';
-import Icon from '~/components/modules/icon';
-import React from 'react'
-import routes from '~/data/routes.json';
-import site from '~/data/site.json';
-
-const Navbar = ({ isPinned }) => {
-	const [isExpanded, toggleExpansion] = useState(false);
-
-	return (
-		<div
-			className={`
-			hc-px-4 hc-transition-all hc-bg-white/20 hc-border-b hc-border-gray-400/20 hc-backdrop-blur
-				${isPinned ? 'mb:hc-bg-transparent md:hc-border-0 md:hc-backdrop-blur-[unset]' : ''}
-			`}
-		>
-			<div
-				className={`
-				hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-py-2 hc-px-6 hc-container hc-transition-all
-					${isPinned ? 'md:hc-translate-y-2 md:hc-bg-white/20 md:hc-border md:hc-border-gray-400/20 md:!hc-backdrop-blur md:hc-rounded-full' : ''}
-				`}
-			>
-				<Link
-					href="/"
-					className="hc-flex hc-gap-2 hc-items-center"
-				>
-					<Icon
-						icon="mdi:robot"
-						size="hc-size-6"
-					/>
-					<h1 className="hc-text-gray-800 hc-font-bold hc-text-md hc-no-underline">
-						{site.title}
-					</h1>
-				</Link>
-
-				<button
-					className={`
-					hc-block md:hc-hidden hc-px-3 hc-py-2 hc-transition-colors hover:hc-text-indigo-700 focus:hc-text-indigo-700
-						${isExpanded ? 'hc-text-indigo-700' : 'hc-text-gray-800'}
-					`}
-					onClick={() => toggleExpansion(!isExpanded)}
-				>
-					<svg
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						className={`
-						hc-block hc-size-5 hc-fill-current hc-transition-transform
-							${isExpanded ? `hc-transform-gpu hc-rotate-180` : ``}
-						`}
-					>
-						<title>Menu</title>
-						<rect
-							y="3"
-							width="20"
-							height="2"
-							className={`
-							hc-transition
-								${isExpanded ? `hc-transform-gpu hc-rotate-45 hc-translate-y-[0] hc-translate-x-[6px]` : ``}
-							`}
-						/>
-						<rect
-							y="9"
-							width="20"
-							height="2"
-							className={`
-							hc-transition
-								${isExpanded ? `hc-opacity-0` : ``}
-							`}
-						/>
-						<rect
-							y="15"
-							width="20"
-							height="2"
-							className={`
-							hc-transition
-								${isExpanded ? `hc-transform-gpu -hc-rotate-45 hc-translate-y-[6px] hc-translate-x-[-8px]` : ``}
-							`}
-						/>
-					</svg>
-				</button>
-
-				<nav
-					className={`
-						md:hc-flex md:hc-items-center md:hc-gap-2 hc-w-full md:hc-w-auto pt-2 md:hc-pt-0
-						${isExpanded ? 'hc-block' : 'hc-hidden'}
-					`}
-				>
-					{routes.map(link => (
-						<NavLink.Anchor
-							key={link.title}
-							href={link.route}
-							className="hc-block md:hc-inline-block hc-px-3.5 hc-py-1.5 hc-rounded-full hc-border hc-border-transparent hc-text-xs hc-text-gray-800 hc-transition-colors hover:hc-border-indigo-700 hover:hc-text-indigo-700 focus:hc-border-indigo-700 focus:hc-text-indigo-700"
-							activeClassName="hc-bg-indigo-700 !hc-text-white"
-						>
-							{link.title}
-						</NavLink.Anchor>
-					))}
-				</nav>
-			</div>
-		</div>
-	);
-};
-
-export default Navbar;

package/src/components/modules/navigation/skip-link.js

@@ -1,21 +0,0 @@
-import React from 'react'
-
-const SkipLink = ({
-	href = '#start-of-content',
-	className,
-	children = 'Skip to content'
-}) => {
-	return (
-		<a
-			href={href}
-			className={`
-				hc-sr-only focus:hc-not-sr-only focus:hc-absolute focus:hc-py-2 focus:hc-px-6 hc-bg-gray-900 dark:hc-bg-white hc-text-white dark:hc-text-gray-900 hc-font-bold hc-text-center hc-transition-colors hover:hc-bg-gray-700
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</a>
-	);
-};
-
-export default SkipLink;

package/src/components/modules/navigation/social.js

@@ -1,29 +0,0 @@
-import Button from '~/components/modules/buttons/default';
-import React from 'react'
-import site from '~/data/site.json';
-
-const NavSocial = () => {
-	const socials = site.social;
-
-	return (
-		<nav className="hc-flex hc-justify-self-end hc-gap-3">
-			{socials.map((data, index) => (
-				<Button.Anchor
-					key={`${index}`}
-					href={data.url}
-					variant="icon"
-					size="sq"
-				>
-					<span className="hc-sr-only">{data.label}</span>
-
-					<Button.Icon
-						icon={data.icon}
-						size="hc-size-4"
-					/>
-				</Button.Anchor>
-			))}
-		</nav>
-	);
-};
-
-export default NavSocial;

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

@@ -1,59 +0,0 @@
-import { InView } from 'react-intersection-observer';
-import React from 'react'
-import useSectionTracker from '~/hooks/useSectionTracker';
-
-const isBrowser = typeof window !== 'undefined';
-
-const Section = ({
-	children,
-	className,
-	...props
-}) => {
-	const sectionIsIntersecting = useSectionTracker();
-
-	const onChange = (inView, entry) => {
-		if (inView) {
-			if (entry.intersectionRatio > 0 && sectionIsIntersecting) {
-				sectionIsIntersecting(entry.target.id, entry.intersectionRatio, entry.intersectionRatio * entry.boundingClientRect.height / (isBrowser ? window.innerHeight : 1));
-			}
-		}
-	};
-
-	return (
-		<InView
-			as="section"
-			threshold={[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]}
-			onChange={onChange}
-			className={`
-			hc-scroll-mt-20
-				${className ?? ''}
-			`}
-			{...props}
-		>
-			{children}
-		</InView>
-	);
-};
-
-export const SectionTitle = ({
-	as = 'h2',
-	children,
-	className
-}) => {
-	const Title = as;
-
-	return (
-		<Title
-			className={`
-				hc-mb-4 hc-text-2xl
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Title>
-	);
-};
-
-Section.Title = SectionTitle;
-
-export default Section;

package/src/components/modules/sections/sectionContext.js

@@ -1,4 +0,0 @@
-import React from 'react';
-
-const reactThingy = React
-export const SectionContext = reactThingy.createContext(null)

package/src/hooks/useClickOutside.js

@@ -1,16 +0,0 @@
-import useEventListener from '~/hooks/useEventListener';
-
-const isBrowser = typeof window !== "undefined";
-
-const useClickOutside = (ref, cb) => {
-	useEventListener(
-		'click',
-		e => {
-			if (ref.current == null || ref.current.contains(e.target)) return;
-			cb(e);
-		},
-		isBrowser ? document : null
-	);
-};
-
-export default useClickOutside;

package/src/hooks/useEventListener.js

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const isBrowser = typeof window !== "undefined";
-
-const useEventListener = (
-	eventType,
-	callback,
-	element = isBrowser ?? window
-) => {
-	const callbackRef = useRef(callback);
-
-	useEffect(() => {
-		callbackRef.current = callback;
-	}, [callback]);
-
-	useEffect(() => {
-		if (element == null) return;
-		const handler = e => callbackRef.current(e);
-		element.addEventListener(eventType, handler);
-
-		return () => element.removeEventListener(eventType, handler);
-	}, [eventType, element]);
-};
-
-export default useEventListener;

package/src/hooks/useEventTracker.js

@@ -1,19 +0,0 @@
-const isBrowser = typeof window !== 'undefined';
-
-if (isBrowser) {
-	window.dataLayer = window.dataLayer || [];
-}
-
-const trackEvent = (category, action, label, value) => {
-	if (isBrowser && window.dataLayer) {
-		window.dataLayer.push({
-			'event': 'eventTracking',
-			'category': category,
-			'action': action,
-			'label': label,
-			'value': value
-		});
-	}
-};
-
-export default trackEvent;

package/src/hooks/useRefScrollProgress.js

@@ -1,24 +0,0 @@
-import { useState, useEffect } from 'react';
-import useWindowSize from './useWindowSize';
-
-export default function useRefScrollProgress({ inputRef }) {
-	const ref = inputRef;
-	const [start, setStart] = useState(null);
-	const [end, setEnd] = useState(null);
-	const size = useWindowSize();
-
-	useEffect(() => {
-		if (!ref.current) {
-			return;
-		}
-
-		const rect = ref.current.getBoundingClientRect();
-		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-		const offsetTop = rect.top + scrollTop;
-
-		setStart(offsetTop / document.body.clientHeight);
-		setEnd((offsetTop + rect.height) / document.body.clientHeight);
-	}, [ref, size]);
-
-	return { ref, start, end };
-}

package/src/hooks/useScript.js

@@ -1,63 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const isBrowser = typeof window !== 'undefined';
-
-function useScript(src) {
-	// Keep track of script status ("idle", "loading", "ready", "error")
-	const [status, setStatus] = useState(src ? "loading" : "idle");
-	useEffect(
-		() => {
-			// Allow falsy src value if waiting on other data needed for
-			// constructing the script URL passed to this hook.
-			if (!isBrowser || !src) {
-				setStatus("idle");
-				return;
-			}
-			// Fetch existing script element by src
-			// It may have been added by another intance of this hook
-			let script = document.querySelector(`script[src="${src}"]`);
-			if (!script) {
-				// Create script
-				script = document.createElement("script");
-				script.src = src;
-				script.async = true;
-				script.setAttribute("data-status", "loading");
-				// Add script to document body
-				document.body.appendChild(script);
-				// Store status in attribute on script
-				// This can be read by other instances of this hook
-				const setAttributeFromEvent = event => {
-					script.setAttribute(
-						"data-status",
-						event.type === "load" ? "ready" : "error"
-					);
-				};
-				script.addEventListener("load", setAttributeFromEvent);
-				script.addEventListener("error", setAttributeFromEvent);
-			} else {
-				// Grab existing script status from attribute and set to state.
-				setStatus(script.getAttribute("data-status"));
-			}
-			// Script event handler to update status in state
-			// Note: Even if the script already exists we still need to add
-			// event handlers to update the state for *this* hook instance.
-			const setStateFromEvent = event => {
-				setStatus(event.type === "load" ? "ready" : "error");
-			};
-			// Add event listeners
-			script.addEventListener("load", setStateFromEvent);
-			script.addEventListener("error", setStateFromEvent);
-			// Remove event listeners on cleanup
-			return () => {
-				if (script) {
-					script.removeEventListener("load", setStateFromEvent);
-					script.removeEventListener("error", setStateFromEvent);
-				}
-			};
-		},
-		[src] // Only re-run effect if script src changes
-	);
-	return status;
-}
-
-export default useScript;

package/src/hooks/useScrollDirection.js

@@ -1,39 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useScrollDirection = () => {
-	const threshold = 1;
-	const [scrollDir, setScrollDir] = useState('up');
-
-	useEffect(() => {
-		let previousScrollYPosition = window.scrollY;
-
-		const scrolledMoreThanThreshold = currentScrollYPosition =>
-			Math.abs(currentScrollYPosition - previousScrollYPosition) > threshold;
-
-		const isScrollingUp = currentScrollYPosition =>
-			currentScrollYPosition > previousScrollYPosition &&
-      !(previousScrollYPosition > 0 && currentScrollYPosition === 0) &&
-      !(currentScrollYPosition > 0 && previousScrollYPosition === 0);
-
-		const updateScrollDirection = () => {
-			const currentScrollYPosition = window.scrollY;
-
-			if (scrolledMoreThanThreshold(currentScrollYPosition)) {
-				const newScrollDirection = isScrollingUp(currentScrollYPosition)
-					? 'down'
-					: 'up';
-				setScrollDir(newScrollDirection);
-				previousScrollYPosition =
-          currentScrollYPosition > 0 ? currentScrollYPosition : 0;
-			}
-		};
-
-		const onScroll = () => window.requestAnimationFrame(updateScrollDirection);
-
-		window.addEventListener("scroll", onScroll);
-
-		return () => window.removeEventListener("scroll", onScroll);
-	}, []);
-
-	return scrollDir;
-};

package/src/hooks/useSectionTracker.js

@@ -1,95 +0,0 @@
-import { useState, useContext } from 'react';
-import trackEvent from '~/hooks/useEventTracker';
-
-import { SectionContext } from '~/components/modules/sections/sectionContext';
-
-const isBrowser = typeof window !== 'undefined';
-
-const ignore = ['intro'];
-const RATIO = 0.33;
-// let first = true;
-
-const useSectionTracker = () => {
-	const { setCurrentSection } = useContext(SectionContext);
-
-	const [lastSection, setLastSection] = useState('');
-	const [sections, setSections] = useState([]);
-	let timeout = null;
-
-	// Allows a blank hash or ensures there is a # in the hash and replaces current state
-	const setHash = hash => {
-		if (hash !== ' ' && hash.indexOf('#') === -1) {
-			hash = `#${hash}`;
-		}
-		if (window.history.replaceState) {
-			window.history.replaceState(window.history.state, null, hash);
-		} else {
-			window.location.replace(hash);
-		}
-	};
-
-	// Called when a section is intersecting
-	const sectionIsIntersecting = (id, ratio, threshold) => {
-		// Ignore sections we don't want to track
-		if (ignore.indexOf(id) !== -1) {
-			return;
-		}
-
-		const newThreshold = threshold;
-		let found = false;
-
-		// Update sections we've seen before
-		sections.forEach(section => {
-			if (section.id === id) {
-				if (newThreshold < RATIO) {
-					section.active = false;
-				} else {
-					section.active = true;
-				}
-				section.threshold = newThreshold;
-				found = true;
-			}
-		});
-
-		// Otherwise, add the section to the list
-		if (!found) {
-			setSections(sections => {
-				sections.push({ id, threshold: newThreshold, active: newThreshold < RATIO ? false : true });
-				return sections;
-			});
-		}
-
-		let maxThreshold = 0;
-		let sectionId = '';
-
-		clearTimeout(timeout);
-
-		timeout = setTimeout(() => {
-			// Find the section with the largest threshold
-			sections.forEach(section => {
-				if (section.active && section.threshold > maxThreshold) {
-					maxThreshold = section.threshold;
-					sectionId = section.id;
-				}
-			});
-
-			// Set the current section (hash, track event)
-			if (isBrowser && sectionId && sectionId !== lastSection) {
-				setHash(ignore.some(id => id === sectionId) ? ' ' : sectionId);
-				trackEvent('Engagement', 'View Section', sectionId);
-				setCurrentSection(sectionId);
-			// } else {
-			} else if (isBrowser && window.scrollY < 100) {
-				setCurrentSection(' ');
-				setHash(' ');
-			}
-
-			// Remember this section for next time so we don't set it again if not necessary
-			setLastSection(sectionId);
-		}, 500);
-	};
-
-	return sectionIsIntersecting;
-};
-
-export default useSectionTracker;

package/src/hooks/useUserAgent.js

@@ -1,43 +0,0 @@
-import { useState, useEffect } from 'react';
-import UAParser from 'ua-parser-js';
-
-const isBrowser = () => typeof window !== 'undefined';
-
-const useUserAgent = () => {
-	const [state, setState] = useState(null);
-
-	useEffect(() => {
-		if (!isBrowser) {
-			return null;
-		}
-
-		let didRun = true;
-
-		try {
-			const uaParser = new UAParser.UAParser();
-			uaParser.setUA(window.navigator.userAgent);
-			const payload = {
-				os: uaParser.getOS(),
-				browser: uaParser.getBrowser(),
-				cpu: uaParser.getCPU(),
-				device: uaParser.getDevice(),
-				engine: uaParser.getEngine()
-			};
-			if (didRun) {
-				setState(payload);
-			}
-		} catch (err) {
-			if (didRun) {
-				setState(null);
-			}
-		}
-
-		return () => {
-			didRun = false;
-		};
-	}, []);
-
-	return state;
-};
-
-export default useUserAgent;

package/src/hooks/useWindowSize.js

@@ -1,28 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export default function useWindowSize() {
-	// Initialize state with undefined width/height so server and client renders match
-	// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-	const [windowSize, setWindowSize] = useState({
-		width: undefined,
-		height: undefined
-	});
-	
-	useEffect(() => {
-		// Handler to call on window resize
-		function handleResize() {
-			// Set window width/height to state
-			setWindowSize({
-				width: window.innerWidth,
-				height: window.innerHeight
-			});
-		}
-		// Add event listener
-		window.addEventListener("resize", () => {
-			window.requestAnimationFrame(handleResize);
-		});
-		// Remove event listener on cleanup
-		return () => window.removeEventListener("resize", handleResize);
-	}, []); // Empty array ensures that effect is only run on mount
-	return windowSize;
-}

package/src/index.css

@@ -1,25 +0,0 @@
-@config "./tailwind/tailwind.config.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-/* @layer base {
-	html {
-		@apply text-400 text-uiText [scroll-behavior:smooth];
-	}
-}
-
-@layer components {
-	.track * {
-		@apply pointer-events-none;
-	}
-
-	.stretched-link::after {
-		@apply content-[''] absolute inset-0 z-[1] pointer-events-auto bg-transparent;
-	}
-}
-
-.fit-content{
-	height:fit-content;
-} */

package/src/util/page-head.js

@@ -1,62 +0,0 @@
-import { useMapList } from "~/contexts/mapListContext";
-import React from 'react';
-const PageHead = ({
-	description,
-	keywords,
-	title
-}) => {
-	const {siteConfig} = useMapList(); 
-	//const router = useRouter();
-	const defaultTitle = siteConfig.title;
-	const pageTitle = title || defaultTitle;
-	const metaDescription = description || siteConfig.description;
-
-	return (
-		<div>
-			<title>{title ? `${title} | ${defaultTitle}` : defaultTitle}</title>
-			<meta name="description" content={metaDescription} />
-			{keywords?.length > 0
-				? (
-					<meta name="keywords" content={`${keywords.join(', ')}`} />
-				) : null
-			}
-
-			<meta property="og:title" content={pageTitle} />
-			<meta property="og:description" content={metaDescription} />
-			{siteConfig?.shareImage &&
-				<meta property="og:image" content={`/${siteConfig.shareImage}`} />
-			}
-			<meta property="og:type" content="website" />
-
-			<meta name="twitter:card" content="summary" />
-			<meta name="twitter:creator" content={siteConfig?.author} />
-			<meta name="twitter:title" content={pageTitle} />
-			<meta name="twitter:description" content={metaDescription} />
-			<script type="application/ld+json">
-				{`
-						{
-							"@context": "https://schema.org",
-							"@type": "WebPage",
-							"url": "pathame",
-							"legalName": "${defaultTitle}",
-							"name": "${pageTitle}",
-							"about": "${metaDescription}",
-							"brand": "${defaultTitle}"
-						}
-				`}
-			</script>
-
-			<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-
-			{/* Only show these in Production */}
-			{'' !== 'development' && <>
-				<link rel="icon" href="/favicon.ico" sizes="any" />
-				<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-				<link rel="manifest" href="/manifest.webmanifest" />
-				<meta name="msapplication-TileColor" content={siteConfig?.colors?.manifest?.tileColor ?? '#000'} />
-			</>}
-		</div>
-	);
-};
-
-export default PageHead;

package/src/util/provider.js

@@ -1,12 +0,0 @@
-import { Provider as RWBProvider } from 'react-wrap-balancer';
-import React from 'react';
-
-export function Provider({
-	children
-}) {
-	return (
-		<RWBProvider>
-			{children}
-		</RWBProvider>
-	);
-}