@cxxi-lab/hub-ui 0.0.0-stage → 0.1.1

package/src/forms/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,39 @@
+import { useFormContext } from '../../contexts/FormContext'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { snakeCase } from '../../utils'
+import { type CheckboxFieldProps } from './CheckboxField.types'
+import { styles } from './CheckboxField.variants'
+
+export function CheckboxField({ name, label, required = false }: CheckboxFieldProps) {
+	const { data, setField } = useFormContext()
+	const id = `field_${snakeCase(name)}`
+	const checked = Boolean(data[name])
+
+	const toggle = () => setField(name, !checked)
+
+	return (
+		<div className={styles.field()} onClick={toggle} aria-pressed={checked} aria-controls={id}>
+			<div>
+				<button type="button" className={styles.check({ checked })}>
+					<FontAwesomeIcon icon={faCheck} />
+				</button>
+				<input
+					id={id}
+					name={name}
+					type="checkbox"
+					checked={checked}
+					className="hidden"
+					readOnly
+					required={required}
+				/>
+			</div>
+
+			{label && (
+				<label htmlFor={id} className={styles.label({ required })}>
+					{label}
+				</label>
+			)}
+		</div>
+	)
+}

package/src/forms/CheckboxField/CheckboxField.types.ts

@@ -0,0 +1,5 @@
+export interface CheckboxFieldProps {
+	name: string
+	label?: string
+	required?: boolean
+}

package/src/forms/CheckboxField/CheckboxField.variants.ts

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	field: tv({ base: 'flex items-center gap-2 mb-4 cursor-pointer' }),
+
+	label: tv({
+		base: 'text-sm font-normal pointer-events-none',
+		variants: {
+			required: {
+				true: "after:content-['*'] after:pl-[2px] after:text-red-100"
+			}
+		}
+	}),
+
+	check: tv({
+		base: [
+			'size-[14px]',
+			'text-[9px]',
+			'flex',
+			'justify-center',
+			'items-center',
+			'rounded-xs',
+			'border',
+			'cursor-pointer'
+		],
+		variants: {
+			checked: {
+				true: 'bg-primary-700 text-primary-500 border-primary-500',
+				false: 'bg-transparent text-transparent border-steel-300'
+			}
+		},
+		defaultVariants: {
+			checked: false
+		}
+	})
+}

package/src/forms/CheckboxField/index.ts

@@ -0,0 +1,3 @@
+export { CheckboxField } from './CheckboxField'
+export * from './CheckboxField.types'
+export { Checkbox } from './Checkbox'

package/src/forms/DropdownField/DropdownField.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useMemo } from 'react'
+import { useFormContext } from '../../contexts/FormContext'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FormField } from '../FormField'
+import { Dropdown } from '../../menus'
+import { type DropdownFieldProps } from './DropdownField.types'
+import { styles } from './DropdownField.variants'
+
+export function DropdownField({ name, label, choices, required = false }: DropdownFieldProps) {
+	const { data, setField } = useFormContext()
+
+	const allChoices = useMemo(
+		() => (required ? choices : [{ value: '', label: 'No selection' }, ...choices]),
+		[choices, required]
+	)
+
+	useEffect(() => {
+		if (data[name] === undefined) {
+			setField(name, allChoices[0]?.value ?? '')
+		}
+	}, [allChoices, data, name, setField])
+
+	const selected = data[name] as string | undefined
+	const selectedLabel = allChoices.find(c => c.value === selected)?.label ?? 'Select an option'
+
+	const handleSelection = (value: string) => setField(name, value)
+
+	const dropdownHeader = (isOpen: boolean) => (
+		<div className={styles.inputWrapper({ open: isOpen })}>
+			<div className={styles.input({ open: isOpen })}>
+				<span className={styles.inputText()}>{selectedLabel}</span>
+				<FontAwesomeIcon icon={faChevronDown} className={styles.inputIcon()} />
+			</div>
+		</div>
+	)
+
+	return (
+		<FormField name={name} label={label} required={required}>
+			{id => (
+				<div className={styles.field()}>
+					<select
+						id={id}
+						name={name}
+						value={selected ?? ''}
+						required={required}
+						className={styles.htmlSelect()}
+						onChange={e => handleSelection(e.target.value)}
+					>
+						{allChoices.map(c => (
+							<option key={c.value} value={c.value}>{c.label}</option>
+						))}
+					</select>
+
+					<Dropdown side="center" color="field" header={dropdownHeader}>
+						<ul className={styles.choices()}>
+							{allChoices.map(c => (
+								<li
+									key={c.value}
+									className={styles.choice()}
+									onClick={() => handleSelection(c.value)}
+								>
+									{c.label}
+								</li>
+							))}
+						</ul>
+					</Dropdown>
+				</div>
+			)}
+		</FormField>
+	)
+}

package/src/forms/DropdownField/DropdownField.types.ts

@@ -0,0 +1,11 @@
+export interface DropdownChoice {
+	value: string
+	label: string
+}
+
+export interface DropdownFieldProps {
+	name: string
+	label?: string
+	choices: DropdownChoice[]
+	required?: boolean
+}

package/src/forms/DropdownField/DropdownField.variants.ts

@@ -0,0 +1,37 @@
+import { styles as fieldStyles } from '../FormField'
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	field: tv({ base: 'relative w-full pb-1' }),
+
+	htmlSelect: tv({ base: 'hidden absolute w-full' }),
+
+	inputWrapper: tv({
+		base: ['w-full', 'rounded-xs', 'border', 'border-transparent'],
+		variants: {
+			open: { true: 'border-primary-300' }
+		}
+	}),
+
+	input: tv({
+		extend: fieldStyles.input,
+		base: [
+			'relative',
+			'w-full',
+			'flex',
+			'items-center',
+			'h-11',
+			'bg-steel-800',
+			'cursor-pointer'
+		],
+		variants: {
+			open: { true: 'border-primary-300' }
+		}
+	}),
+
+	inputText: tv({ base: 'flex-1' }),
+	inputIcon: tv({ base: 'mr-1' }),
+
+	choices: tv({ base: 'py-1 my-2' }),
+	choice: tv({ base: 'py-1 px-3 text-sm hover:bg-steel-700 cursor-pointer' })
+}

package/src/forms/DropdownField/index.ts

@@ -0,0 +1,2 @@
+export { DropdownField } from './DropdownField'
+export * from './DropdownField.types'

package/src/forms/Form/Form.tsx

@@ -0,0 +1,41 @@
+import { useState, type FormEvent } from 'react'
+import { FormContextProvider, useFormContext } from '../../contexts/FormContext'
+import { withLoading } from '../../utils'
+import { type FormProps } from './Form.types'
+import { styles } from './Form.variants'
+
+export function Form({ initialData, children, ...props }: FormProps) {
+	return (
+		<FormContextProvider initialData={initialData}>
+			<InnerForm {...props}>{children}</InnerForm>
+		</FormContextProvider>
+	)
+}
+
+type InnerProps = Omit<FormProps, 'initialData'>
+
+function InnerForm({ title, actions, onSubmit, children, className }: InnerProps) {
+	const { data } = useFormContext()
+	const [, setLoading] = useState(false)
+
+	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		await withLoading(setLoading, () => Promise.resolve(onSubmit(data)))
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className={className}>
+			{title && (
+				<header className={styles.header()}>
+					<h1 className={styles.title()}>{title}</h1>
+				</header>
+			)}
+
+			<div className={styles.content()}>{children}</div>
+
+			{actions && (
+				<footer className={styles.footer()}>{actions}</footer>
+			)}
+		</form>
+	)
+}

package/src/forms/Form/Form.types.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react'
+import { type FormData } from '../../contexts/FormContext'
+
+export interface FormProps {
+	initialData?: FormData
+	title?: string
+	actions?: ReactNode
+	onSubmit: (data: FormData) => void | Promise<void>
+	children: ReactNode
+	className?: string
+}

package/src/forms/Form/Form.variants.ts

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	header: tv({ base: 'pb-6' }),
+	title: tv({ base: 'text-xl font-medium' }),
+	footer: tv({ base: 'flex justify-end items-center gap-2' }),
+	content: tv({ base: 'mb-2' })
+}

package/src/forms/Form/index.ts

@@ -0,0 +1,2 @@
+export { Form } from './Form'
+export * from './Form.types'

package/src/forms/FormField/FormField.tsx

@@ -0,0 +1,26 @@
+import { useFormContext } from '../../contexts/FormContext'
+import { snakeCase } from '../../utils'
+import { type FormFieldProps } from './FormField.types'
+import { styles } from './FormField.variants'
+
+export function FormField({ name, label, required = false, children }: FormFieldProps) {
+	const { errors } = useFormContext()
+	const id = `field_${snakeCase(name)}`
+	const hasError = Boolean(errors[name])
+
+	return (
+		<div className={styles.field()}>
+			{label && (
+				<label htmlFor={id} className={styles.label({ required })}>
+					{label}
+				</label>
+			)}
+
+			<div className={styles.inputWrapper()}>
+				{children(id, hasError)}
+			</div>
+
+			{hasError && <p className={styles.error()}>{errors[name]}</p>}
+		</div>
+	)
+}

package/src/forms/FormField/FormField.types.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react'
+
+export type FormFieldRenderer = (id: string, hasError: boolean) => ReactNode
+
+export interface FormFieldProps {
+	name: string
+	label?: string
+	required?: boolean
+	children: FormFieldRenderer
+}

package/src/forms/FormField/FormField.variants.ts

@@ -0,0 +1,44 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	field: tv({ base: 'flex flex-col mb-4' }),
+
+	label: tv({
+		base: 'text-xs font-semibold mb-1',
+		variants: {
+			required: {
+				true: "after:content-['*'] after:pl-[2px] after:text-red-100"
+			}
+		}
+	}),
+
+	inputWrapper: tv({
+		base: [
+			'w-full',
+			'rounded-xs',
+			'border',
+			'border-transparent',
+			'focus-within:border-primary-300'
+		]
+	}),
+
+	input: tv({
+		base: [
+			'w-full',
+			'min-w-3xs',
+			'py-2',
+			'px-[6px]',
+			'rounded-xs',
+			'border',
+			'border-steel-300',
+			'focus:border-primary-300',
+			'outline-none',
+			'text-sm',
+			'bg-transparent',
+			'text-white',
+			'placeholder:text-steel-300'
+		]
+	}),
+
+	error: tv({ base: 'pt-1 text-red-500 text-xs' })
+}

package/src/forms/FormField/index.ts

@@ -0,0 +1,3 @@
+export { FormField } from './FormField'
+export * from './FormField.types'
+export { styles } from './FormField.variants'

package/src/forms/InputField/InputField.tsx

@@ -0,0 +1,33 @@
+import { useFormContext } from '../../contexts/FormContext'
+import { FormField } from '../FormField'
+import { type InputFieldProps } from './InputField.types'
+import { styles } from './InputField.variants'
+
+export function InputField({
+	name,
+	label,
+	type = 'text',
+	required = false,
+	placeholder = '',
+	...rest
+}: InputFieldProps) {
+	const { data, setField } = useFormContext()
+
+	return (
+		<FormField name={name} label={label} required={required}>
+			{(id, hasError) => (
+				<input
+					id={id}
+					name={name}
+					type={type}
+					value={(data[name] as string | number | undefined) ?? ''}
+					placeholder={placeholder}
+					className={styles.input({ error: hasError })}
+					onChange={e => setField(name, e.target.value)}
+					required={required}
+					{...rest}
+				/>
+			)}
+		</FormField>
+	)
+}

package/src/forms/InputField/InputField.types.ts

@@ -0,0 +1,14 @@
+import { type HTMLInputTypeAttribute } from 'react'
+
+export interface InputFieldProps {
+	name: string
+	label?: string
+	type?: HTMLInputTypeAttribute
+	required?: boolean
+	placeholder?: string
+	autoComplete?: string
+	autoFocus?: boolean
+	min?: number | string
+	max?: number | string
+	step?: number | string
+}

package/src/forms/InputField/InputField.variants.ts

@@ -0,0 +1,14 @@
+import { styles as fieldStyles } from '../FormField'
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	input: tv({
+		extend: fieldStyles.input,
+		base: 'h-11',
+		variants: {
+			error: {
+				true: 'border-red-500!'
+			}
+		}
+	})
+}

package/src/forms/InputField/index.ts

@@ -0,0 +1,2 @@
+export { InputField } from './InputField'
+export * from './InputField.types'

package/src/forms/SpoilerField/SpoilerField.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { useFormContext } from '../../contexts/FormContext'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { FormField } from '../FormField'
+import { type SpoilerFieldProps } from './SpoilerField.types'
+import { styles } from './SpoilerField.variants'
+
+export function SpoilerField({
+	name,
+	label,
+	required = false,
+	placeholder = '',
+	...rest
+}: SpoilerFieldProps) {
+	const { data, setField } = useFormContext()
+	const [revealed, setRevealed] = useState(false)
+
+	return (
+		<FormField name={name} label={label} required={required}>
+			{(id, hasError) => (
+				<div className={styles.field()}>
+					<input
+						id={id}
+						name={name}
+						type={revealed ? 'text' : 'password'}
+						value={(data[name] as string | undefined) ?? ''}
+						placeholder={placeholder}
+						className={styles.input({ error: hasError })}
+						onChange={e => setField(name, e.target.value)}
+						required={required}
+						{...rest}
+					/>
+
+					<button
+						type="button"
+						onClick={() => setRevealed(r => !r)}
+						className={styles.revealer()}
+						tabIndex={-1}
+						aria-label={revealed ? 'Hide value' : 'Reveal value'}
+					>
+						<FontAwesomeIcon icon={revealed ? faEyeSlash : faEye} />
+					</button>
+				</div>
+			)}
+		</FormField>
+	)
+}

package/src/forms/SpoilerField/SpoilerField.types.ts

@@ -0,0 +1,8 @@
+export interface SpoilerFieldProps {
+	name: string
+	label?: string
+	required?: boolean
+	placeholder?: string
+	autoComplete?: string
+	autoFocus?: boolean
+}

package/src/forms/SpoilerField/SpoilerField.variants.ts

@@ -0,0 +1,31 @@
+import { styles as fieldStyles } from '../FormField'
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	field: tv({ base: 'relative' }),
+
+	input: tv({
+		extend: fieldStyles.input,
+		base: 'h-11 pr-8',
+		variants: {
+			error: {
+				true: 'border-red-500!'
+			}
+		}
+	}),
+
+	revealer: tv({
+		base: [
+			'absolute',
+			'right-2',
+			'top-1/2',
+			'-translate-y-1/2',
+			'text-steel-300',
+			'hover:text-primary-500',
+			'focus:outline-none',
+			'cursor-pointer',
+			'bg-transparent',
+			'border-0'
+		]
+	})
+}

package/src/forms/SpoilerField/index.ts

@@ -0,0 +1,2 @@
+export { SpoilerField } from './SpoilerField'
+export * from './SpoilerField.types'

package/src/forms/SwitchField/ChoiceSwitch.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode } from 'react'
+
+/**
+ * A switch between two choices (this || that, not on/off): both labels sit in the track, the
+ * thumb slides under the picked one. SwitchField's look, blue on both sides.
+ */
+export function ChoiceSwitch<V extends string>({ value, options, label, onChange }: {
+	value: V
+	/** `count`: a number shown after the label (e.g. results waiting there) */
+	options: [{ value: V, label: string, icon?: ReactNode, count?: number }, { value: V, label: string, icon?: ReactNode, count?: number }]
+	/** said to screen readers */
+	label: string
+	onChange: (value: V) => void
+}) {
+	const second = value === options[1].value
+	return (
+		<div role="radiogroup" aria-label={label} className="relative inline-grid grid-cols-2 h-8 p-0.5 border border-steel-300 rounded-xs">
+			<span
+				aria-hidden
+				className={`absolute top-0.5 bottom-0.5 left-0.5 w-[calc(50%-2px)] rounded-xs bg-primary-500 transition-transform duration-200 ${second ? 'translate-x-full' : 'translate-x-0'}`}
+			/>
+			{options.map(o => {
+				const picked = o.value === value
+				return (
+					<button
+						key={o.value}
+						type="button"
+						role="radio"
+						aria-checked={picked}
+						onClick={() => onChange(o.value)}
+						className={`relative z-10 flex items-center justify-center gap-1.5 px-3 text-xs font-semibold bg-transparent border-0 cursor-pointer transition-colors duration-200 ${picked ? 'text-steel-950' : 'text-steel-100 hover:text-white'}`}
+					>
+						{o.icon}
+						{o.label}
+						{o.count !== undefined && (
+							<span className={`min-w-5 h-4 px-1 rounded-full text-[10px] leading-4 tabular-nums ${picked ? 'bg-steel-950/25 text-steel-950' : 'bg-steel-800 text-steel-100'}`}>{o.count}</span>
+						)}
+					</button>
+				)
+			})}
+		</div>
+	)
+}

package/src/forms/SwitchField/Switch.tsx

@@ -0,0 +1,18 @@
+import { styles } from './SwitchField.variants'
+
+/** The SwitchField switch on its own, outside a form: controlled by `checked`. */
+export function Switch({ checked, onChange, title }: { checked: boolean, onChange: (checked: boolean) => void, title?: string }) {
+	return (
+		<button
+			type="button"
+			role="switch"
+			aria-checked={checked}
+			aria-label={title}
+			title={title}
+			onClick={() => onChange(!checked)}
+			className={`${styles.switch({ checked })} shrink-0 p-0 bg-clip-padding`}
+		>
+			<span className={styles.thumb({ checked })} />
+		</button>
+	)
+}

package/src/forms/SwitchField/SwitchField.tsx

@@ -0,0 +1,43 @@
+import { useFormContext } from '../../contexts/FormContext'
+import { snakeCase } from '../../utils'
+import { type SwitchFieldProps } from './SwitchField.types'
+import { styles } from './SwitchField.variants'
+
+export function SwitchField({ name, label, required = false }: SwitchFieldProps) {
+	const { data, setField } = useFormContext()
+	const id = `field_${snakeCase(name)}`
+	const checked = Boolean(data[name])
+
+	const toggle = () => setField(name, !checked)
+
+	return (
+		<div className={styles.field()} onClick={toggle} aria-pressed={checked} aria-controls={id}>
+			{label && (
+				<label htmlFor={id} className={styles.label({ required })}>
+					{label}
+				</label>
+			)}
+
+			<div>
+				<button
+					type="button"
+					className={styles.switch({ checked })}
+					role="switch"
+					aria-checked={checked}
+				>
+					<span className={styles.thumb({ checked })} />
+				</button>
+
+				<input
+					id={id}
+					name={name}
+					type="checkbox"
+					checked={checked}
+					className="hidden"
+					readOnly
+					required={required}
+				/>
+			</div>
+		</div>
+	)
+}

package/src/forms/SwitchField/SwitchField.types.ts

@@ -0,0 +1,5 @@
+export interface SwitchFieldProps {
+	name: string
+	label?: string
+	required?: boolean
+}