@abcagency/hc-ui-components 1.0.4 → 1.0.6

package/src/styles/globals.css

@@ -1,25 +1,23 @@
-
-@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;
-} */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @layer base {
+	html {
+		@apply text-400 text-uiText [scroll-behavior:smooth];
+	}
+}
+
+@layer components {
+	.track * {
+		@apply pointer-events-none;
+	}
+
+	.hc-stretched-link::after {
+		@apply content-[''] absolute inset-0 z-[1] pointer-events-auto bg-transparent;
+	}
+}
+
+.hc-fit-content{
+	height:fit-content;
+} */

package/src/tailwind/tailwind.config.js

@@ -1,11 +1,12 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
-    content: [
-        '../**/*.{js,ts,jsx,tsx,mdx}',
-        '../components/**/*.{js,ts,jsx,tsx,mdx}',
-      ],
-      presets: [require(`./preset.default.js`)],
+  prefix: "hc-",
+  content: [
+    '../**/*.{js,ts,jsx,tsx,mdx}',
+    '../components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  presets: [require(`./preset.default.js`)],
   theme: {
     extend: {
       animation: {

package/src/util/fieldMapper.js

@@ -9,7 +9,7 @@ const mapFieldsToGridItems = (item, fieldsShown) => {
 
 		return (
 			<Grid.Item key={field}>
-				<span className="sr-only">{capitalize(field)}</span>
+				<span className="hc-sr-only">{capitalize(field)}</span>
 				{value}
 			</Grid.Item>
 		);

package/src/util/loading.js

@@ -3,10 +3,10 @@ import React from 'react'
 
 const Loading = ({ color = '#c0c0c0' }) => {
 	return (
-		<div className="flex items-center justify-center w-full h-full">
+		<div className="hc-flex hc-items-center hc-justify-center hc-w-full hc-h-full">
 			<Icon
 				icon="ph:spinner"
-				className="animate-spin text-gray-300"
+				className="hc-animate-spin hc-text-gray-300"
 				width="40"
 				height="40"
 			/>

package/src/components/modules/filter/search.js.rej

@@ -1,9 +0,0 @@
-diff a/components/modules/filter/search.js b/components/modules/filter/search.js	(rejected hunks)
-@@ -59,7 +59,6 @@
- 				)}
- 				<input
- 					type="text"
--					name="search"
- 				    onKeyDown={(e) => { if (e.key === 'Enter') {
- 						e.preventDefault();
- 					}}}

package/src/components/modules/form.js

@@ -1,362 +0,0 @@
-import React, { useState } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import Slider from 'react-slider';
-import * as Yup from 'yup';
-
-let validationSchema = Yup.object().shape({
-	name: Yup.string()
-		.required("is required"),
-	email: Yup.string()
-		.email("Invalid email address format")
-		.required("is required"),
-	message: Yup.string()
-		.required("is required"),
-	transportation: Yup.array()
-		.min(1, "Select a transportation type"),
-	state: Yup.string()
-		.required("is required"),
-	distance: Yup.number()
-		.min(1, "is required")
-});
-
-const ContactForm = () => {
-	const {
-		register,
-		handleSubmit,
-		setValue,
-		control,
-		trigger,
-		reset,
-		formState:{ errors }
-	} = useForm({
-		mode: 'onBlur',
-		defaultValues: {
-			name: '',
-			email: '',
-			message: '',
-			transportation: [],
-			favoriteColor: 'pink',
-			state: '',
-			distance: 0
-		},
-		resolver: yupResolver(validationSchema)
-	});
-
-	const [isSubmitting, setIsSubmitting] = useState(false);
-
-	const onSubmit = values => {
-		setIsSubmitting(true);
-		setTimeout(() => {
-			alert(JSON.stringify(values, null, 2));
-			reset();
-			setIsSubmitting(false);
-		}, 1000);
-	};
-
-	const transportationOptions = ['Car', 'Boat', 'Plane'];
-	const favoriteColorOptions = ['blue', 'green', 'pink', 'red', 'yellow'];
-
-	return (
-		<form
-			onSubmit={handleSubmit(onSubmit)}
-		>
-			<div className="sm:grid grid-cols-2 gap-4">
-				<div className="mb-6">
-					<label
-						className="inline-block mb-2 text-xs font-bold uppercase"
-						htmlFor="name"
-					>
-						Name
-					</label>
-
-					{errors.name &&
-						<span
-							id="name-error"
-							name="name"
-							className="inline-block text-red-500 uppercase text-xs font-bold ml-1"
-						>
-							{errors.name?.message}
-						</span>
-					}
-
-					<input
-						{...register("name")}
-						type="text"
-						name="name"
-						placeholder="First and Last Name"
-						className={`w-full rounded-md transition-colors ${
-							errors.name ? "border-red-500" : "border-gray-800"
-						}`}
-						aria-invalid={errors.name ? 'true' : null}
-						aria-describedby={errors.name ? 'name-error' : null}
-						aria-required="true"
-						disabled={isSubmitting}
-					/>
-				</div>
-
-				<div className="mb-6">
-					<label
-						className="inline-block mb-2 text-xs font-bold uppercase"
-						htmlFor="email"
-					>
-						Email
-					</label>
-
-					{errors.email &&
-						<span
-							id="email-error"
-							name="email"
-							className="inline-block text-red-500 uppercase text-xs font-bold ml-1"
-						>
-							{errors.email?.message}
-						</span>
-					}
-
-					<input
-						{...register("email")}
-						type="email"
-						name="email"
-						placeholder="user@domain.com"
-						className={`w-full rounded-md transition-colors ${
-							errors.email ? "border-red-500" : "border-gray-800"
-						}`}
-						aria-invalid={errors.email ? 'true' : null}
-						aria-describedby={errors.email? 'email-error' : null}
-						aria-required="true"
-						disabled={isSubmitting}
-					/>
-				</div>
-			</div>
-
-			<div className="grid grid-cols-2 gap-4">
-				<div className="mb-6">
-					<h2 id="transportation-group-title" className="inline-block text-xs uppercase font-bold mb-2">Transportation</h2>
-
-					{errors.transportation &&
-						<span
-							id="transportation-error"
-							name="email"
-							className="inline-block text-red-500 uppercase text-xs font-bold ml-1"
-						>
-							{errors.transportation?.message}
-						</span>
-					}
-
-					<div role="group" aria-labelledby="transportation-group-title" className="flex flex-col items-start">
-						{transportationOptions.map(value => (
-							<label
-								key={value}
-								className="inline-flex items-center mb-3"
-							>
-								<input
-									{...register(`transportation`)}
-									id={`transportation${value}`}
-									value={value}
-									type="checkbox"
-									className="rounded h-5 w-5 text-indigo-700 border-gray-800 transition-colors"
-								/>
-								<span className="ml-2">{value}</span>
-							</label>
-						))}
-					</div>
-				</div>
-
-				<div className="mb-6">
-					<h2 id="favorite-color-group-title" className="inline-block text-xs uppercase font-bold mb-2">Favorite color</h2>
-
-					<div role="group" aria-labelledby="favorite-color-group-title" className="flex flex-col items-start">
-						{favoriteColorOptions.map(value => (
-							<label
-								key={value}
-								className="inline-flex items-center mb-3"
-							>
-								<input
-									{...register(`favoriteColor`)}
-									id={`favoriteColor${value}`}
-									value={value}
-									type="radio"
-									name="favoriteColor"
-									className="rounded-full h-5 w-5 text-indigo-700 border-gray-800  transition-colors"
-								/>
-								<span className="ml-2 capitalize">{value}</span>
-							</label>
-						))}
-					</div>
-				</div>
-			</div>
-
-			<div className="grid grid-cols-2 gap-4">
-				<div className="mb-6">
-					<label
-						className="inline-block mb-2 text-xs font-bold uppercase"
-						htmlFor="state"
-					>
-						State
-					</label>
-
-					{errors.state &&
-						<span
-							id="state-error"
-							name="state"
-							className="inline-block text-red-500 uppercase text-xs font-bold ml-1"
-						>
-							{errors.state?.message}
-						</span>
-					}
-
-					<select
-						{...register(`state`)}
-						className={`w-full rounded-md transition-colors ${
-							errors.state ? "border-red-500" : "border-gray-800"
-						}`}
-						aria-invalid={errors.state ? 'true' : null}
-						aria-describedby={errors.state ? 'state-error' : null}
-						aria-required="true"
-						disabled={isSubmitting}
-					>
-						<option value="">Select a state</option>
-						<option value="AL">Alabama</option>
-						<option value="AK">Alaska</option>
-						<option value="AZ">Arizona</option>
-						<option value="AR">Arkansas</option>
-						<option value="CA">California</option>
-						<option value="CO">Colorado</option>
-						<option value="CT">Connecticut</option>
-						<option value="DE">Delaware</option>
-						<option value="DC">District Of Columbia</option>
-						<option value="FL">Florida</option>
-						<option value="GA">Georgia</option>
-						<option value="HI">Hawaii</option>
-						<option value="ID">Idaho</option>
-						<option value="IL">Illinois</option>
-						<option value="IN">Indiana</option>
-						<option value="IA">Iowa</option>
-						<option value="KS">Kansas</option>
-						<option value="KY">Kentucky</option>
-						<option value="LA">Louisiana</option>
-						<option value="ME">Maine</option>
-						<option value="MD">Maryland</option>
-						<option value="MA">Massachusetts</option>
-						<option value="MI">Michigan</option>
-						<option value="MN">Minnesota</option>
-						<option value="MS">Mississippi</option>
-						<option value="MO">Missouri</option>
-						<option value="MT">Montana</option>
-						<option value="NE">Nebraska</option>
-						<option value="NV">Nevada</option>
-						<option value="NH">New Hampshire</option>
-						<option value="NJ">New Jersey</option>
-						<option value="NM">New Mexico</option>
-						<option value="NY">New York</option>
-						<option value="NC">North Carolina</option>
-						<option value="ND">North Dakota</option>
-						<option value="OH">Ohio</option>
-						<option value="OK">Oklahoma</option>
-						<option value="OR">Oregon</option>
-						<option value="PA">Pennsylvania</option>
-						<option value="RI">Rhode Island</option>
-						<option value="SC">South Carolina</option>
-						<option value="SD">South Dakota</option>
-						<option value="TN">Tennessee</option>
-						<option value="TX">Texas</option>
-						<option value="UT">Utah</option>
-						<option value="VT">Vermont</option>
-						<option value="VA">Virginia</option>
-						<option value="WA">Washington</option>
-						<option value="WV">West Virginia</option>
-						<option value="WI">Wisconsin</option>
-						<option value="WY">Wyoming</option>
-					</select>
-				</div>
-				<div className="mb-6 overflow-hidden">
-					<label
-						className="inline-block mb-2 text-xs font-bold uppercase"
-						htmlFor="distance"
-					>
-						Distance
-					</label>
-
-					{errors.distance &&
-						<span
-							id="distance-error"
-							name="distance"
-							className="inline-block text-red-500 uppercase text-xs font-bold ml-1"
-						>
-							{errors.distance?.message}
-						</span>
-					}
-
-					<Controller
-						name="distance"
-						control={control}
-						render={({ field }) =>
-							<>
-								<input
-									{...field}
-									type="hidden"
-									aria-invalid={errors.distance ? 'true' : null}
-									aria-describedby={errors.distance ? 'distance-error' : null}
-									aria-required="true"
-								/>
-
-								<Slider
-									max={99}
-									className="py-4"
-									thumbClassName={`p-2 w-10 rounded-full bg-gray-100 text-gray-700 transform -translate-y-1/3 text-center outline-none cursor-grab focus:bg-indigo-700 focus:text-white transition-colors ${errors.distance && "!text-red-500"}`}
-									trackClassName="bg-gray-300 h-3 rounded-md transition-colors"
-									renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
-									onChange={v => setValue('distance', v)}
-									onAfterChange={() => trigger('distance')}
-								/>
-							</>
-						}
-					/>
-				</div>
-			</div>
-
-			<div className="mb-6">
-				<label
-					className="inline-block mb-2 text-xs font-bold uppercase"
-					htmlFor="message"
-				>
-					Message
-				</label>
-
-				{errors.message &&
-					<span
-						id="message-error"
-						name="message"
-						className="inline-block text-red-500 uppercase text-xs font-bold ml-1"
-					>
-						{errors.message?.message}
-					</span>
-				}
-
-				<textarea
-					{...register(`message`)}
-					id="message"
-					placeholder="Say something..."
-					rows="8"
-					className={`w-full rounded-md transition-colors ${
-						errors.message ? "border-red-500" : "border-gray-800"
-					}`}
-					aria-invalid={errors.message ? 'true' : null}
-					aria-describedby={errors.message ? 'state-error' : null}
-					aria-required="true"
-					disabled={isSubmitting}
-				/>
-			</div>
-
-			<button
-				type="submit"
-				className="px-4 py-2 text-sm font-bold text-white bg-gray-700 border-b-4 border-gray-800 rounded hover:border-gray-700 hover:bg-gray-600 transfrom disabled:bg-gray-200 disabled:text-gray-400 transition-colors"
-				disabled={isSubmitting}
-			>
-				{isSubmitting ? "Please wait..." : "Submit"}
-			</button>
-		</form>
-	);
-};
-
-export default ContactForm;

package/src/components/modules/jumbotron.js

@@ -1,81 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-import React from 'react'
-
-const Jumbotron = ({
-	className,
-	contentClasses,
-	image,
-	children,
-	...rest
-}) => {
-	return (
-		<section
-			className={twMerge(
-				'relative grid grid-cols-1 auto-rows-min md:grid-rows-1 overflow-hidden bg-gray-800 text-white',
-				className ?? ''
-			)}
-			{...rest}
-		>
-			<div
-				className={twMerge(
-					'md:row-span-full col-span-full grid place-content-center relative z-10 container p-4',
-					contentClasses ?? ''
-				)}
-			>
-				{children}
-			</div>
-
-			{image && image}
-		</section>
-	);
-};
-
-export const JumbotronTitle = ({
-	className,
-	children
-}) => {
-	return (
-		<h1
-			className={twMerge(
-				'text-3xl font-bold',
-				className ?? ''
-			)}
-		>
-			{children}
-		</h1>
-	);
-};
-
-export const JumbotronImage = ({
-	image,
-	alt,
-	className,
-	containerClassName,
-	...rest
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'relative order-first md:order-last row-span-full col-span-full',
-				containerClassName ?? ''
-			)}
-		>
-			<img
-				src={image || image.src}
-				width={image.width ? image.width : null}
-				height={image.height ? image.height : null}
-				alt={alt ?? ''}
-				className={twMerge(
-					'md:col-start-1 h-full w-full object-cover object-center opacity-70 md:opacity-20',
-					className ?? ''
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
-
-Jumbotron.Title = JumbotronTitle;
-Jumbotron.Image = JumbotronImage;
-
-export default Jumbotron;

package/src/components/modules/video-player.js

@@ -1,126 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import ReactPlayer from 'react-player/lazy';
-
-import Icon from '~/components/modules/icon';
-
-/*
-Responsive video player using react-player
-@url: https://github.com/CookPete/react-player
-
-@url: Video file URL
-@placeholder: Video poster image
-@playerOptions: Use to pass in any extra options to react-player
-@containerClasses: Pass extra classes to the container element
-@aspectRatio: Set player aspect ratio (Default: 16x9)
-*/
-
-const isBrowser = typeof window !== 'undefined';
-
-const VideoPlayer = ({
-	url,
-	imageAlt,
-	placeholder,
-	className,
-	containerClassName,
-	aspectRatio,
-	playOnLoad = false,
-	muted = false,
-	autoPlay = true,
-	...playerOptions
-}) => {
-	const [lightMode, setLightMode] = useState(placeholder);
-	const [isReady, setIsReady] = useState(false);
-	const [isPlaying, setIsPlaying] = useState(autoPlay);
-	const [played, setPlayed] = useState(0);
-	const [seekTo, setSeekTo] = useState(null);
-	const [pageLoaded, setPageLoaded] = useState(false);
-	const playerRef = useRef(null);
-	const divRef = useRef(null);
-
-	useEffect(() => {
-		if (isBrowser) {
-			setPageLoaded(true);
-		}
-	}, [autoPlay, setPageLoaded]);
-
-	useEffect(() => {
-		if (isReady && seekTo) {
-			playerRef.current.seekTo(parseFloat(seekTo), 'seconds');
-			setIsPlaying(true);
-			if (isBrowser && divRef.current) {
-				divRef.current.scrollIntoView({
-					behavior: 'smooth',
-					block: 'center'
-				});
-			}
-			setSeekTo(null);
-		}
-	}, [isReady, seekTo]);
-
-	return (
-		<div
-			className={`${containerClassName ?? ''}`}
-		>
-			<div
-				ref={divRef}
-				className="block relative w-full overflow-hidden"
-			>
-				{/*
-					Inline switch to set player aspect ratio
-					@default: 16x9
-					@usage: aspectRatio="21x9"
-				*/}
-				{
-					{
-						'21x9': <span className="block pt-[42.86%]" aria-hidden="true"></span>,
-						'16x9': <span className="block pt-[56.25%]" aria-hidden="true"></span>,
-						'4x3': <span className="block pt-[75%]" aria-hidden="true"></span>,
-						'1x1': <span className="block pt-[100%]" aria-hidden="true"></span>
-					}[aspectRatio]
-					|| <span className="block pt-[56.25%]" aria-hidden="true"></span>
-				}
-
-				{pageLoaded &&
-					<ReactPlayer
-						ref={playerRef}
-						className={`
-							absolute inset-y-0 left-0 w-full h-full border-0 my-0
-							${className ?? ''}
-						`}
-						url={url}
-						light={playOnLoad ? false : lightMode === false ? lightMode : placeholder}
-						progressInterval={3000}
-						// eslint-disable-next-line no-unused-vars
-						onProgress={(played, loaded) => {
-							setPlayed(played);
-							if (isBrowser) {
-								document.querySelectorAll('button:focus').forEach(el => el.blur());
-							}
-						}}
-						onReady={() => { setIsReady(true); setIsPlaying(autoPlay);}}
-						onPlay={() => setIsPlaying(true)}
-						onPause={() => setIsPlaying(false)}
-						playing={isPlaying}
-						autoPlay={autoPlay}
-						width="100%"
-						height="100%"
-						muted={muted}
-						playIcon={
-							<button className="bg-blue-400 bg-opacity-70 p-1 rounded-full transition-colors hover:bg-opacity-90 focus:bg-opacity-90">
-								<span className="sr-only">Play</span>
-								<Icon
-									icon="fe:play"
-									sizeClasses="w-16 h-16"
-									className="text-white drop-shadow-md translate-x-1"
-								/>
-							</button>
-						}
-						{...playerOptions}
-					/>
-				}
-			</div>
-		</div>
-	);
-};
-
-export default VideoPlayer;