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

package/src/forms/SwitchField/SwitchField.variants.ts

@@ -0,0 +1,62 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	field: tv({
+		base: [
+			'w-full',
+			'h-11',
+			'flex',
+			'items-center',
+			'justify-between',
+			'cursor-pointer',
+			'select-none'
+		]
+	}),
+
+	switch: tv({
+		base: [
+			'relative',
+			'w-10',
+			'h-5',
+			'border',
+			'rounded-xs',
+			'transition-colors',
+			'duration-200',
+			'cursor-pointer'
+		],
+		variants: {
+			checked: {
+				true: 'border-steel-300 bg-primary-700',
+				false: 'border-steel-300 bg-transparent'
+			}
+		}
+	}),
+
+	thumb: tv({
+		base: [
+			'absolute',
+			'top-0.5',
+			'left-0.5',
+			'size-[14px]',
+			'rounded-xs',
+			'transition-transform',
+			'duration-200',
+			'cursor-pointer'
+		],
+		variants: {
+			checked: {
+				true: 'translate-x-5 bg-primary-500',
+				false: 'translate-x-0 bg-steel-300'
+			}
+		}
+	}),
+
+	label: tv({
+		base: 'text-sm',
+		variants: {
+			required: {
+				true: 'after:content-["*"] after:ml-1 after:text-red-500'
+			}
+		}
+	})
+}

package/src/forms/SwitchField/index.ts

@@ -0,0 +1,4 @@
+export { SwitchField } from './SwitchField'
+export * from './SwitchField.types'
+export { ChoiceSwitch } from './ChoiceSwitch'
+export { Switch } from './Switch'

package/src/forms/TagsField/TagsField.tsx

@@ -0,0 +1,109 @@
+import { useRef, useState, type KeyboardEvent, type ChangeEvent } from 'react'
+import { useFormContext } from '../../contexts/FormContext'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { IconButton } from '../../buttons'
+import { FormField } from '../FormField'
+import { type TagsFieldProps } from './TagsField.types'
+import { styles } from './TagsField.variants'
+
+export function TagsField({
+	name,
+	label,
+	tagLimit = 10,
+	required = false,
+	placeholder = ''
+}: TagsFieldProps) {
+	const { data, setField } = useFormContext()
+	const [limitWarning, setLimitWarning] = useState<string | null>(null)
+	const [input, setInput] = useState('')
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	const tags = Array.isArray(data[name]) ? (data[name] as string[]) : []
+	const isFull = Boolean(limitWarning)
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === ' ' && input.length === 0) {
+			e.preventDefault()
+			return
+		}
+		if ((e.key === ' ' || e.key === 'Enter') && input.trim() !== '') {
+			e.preventDefault()
+			const next = input.trim()
+
+			if (tags.length >= tagLimit) {
+				if (!limitWarning) setLimitWarning(`Tag limit reached. A maximum of ${tagLimit} tags is allowed.`)
+				return
+			}
+			if (limitWarning) setLimitWarning(null)
+
+			if (!tags.includes(next)) {
+				setField(name, [...tags, next])
+			}
+			setInput('')
+		}
+	}
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const sanitized = e.target.value
+			.toLowerCase()
+			.replace(/_/g, '-')
+			.replace(/[^a-z0-9-]/g, '')
+		setInput(sanitized)
+	}
+
+	const handleRemove = (index: number) => {
+		const next = [...tags]
+		next.splice(index, 1)
+		setField(name, next)
+		if (limitWarning) setLimitWarning(null)
+	}
+
+	const handleBlur = () => {
+		if (input.trim() !== '') setInput('')
+	}
+
+	const focusInput = () => inputRef.current?.focus()
+
+	return (
+		<>
+			<FormField name={name} label={label} required={required}>
+				{id => (
+					<ul className={styles.tags({ isFull })} onClick={focusInput}>
+						{tags.map((tag, i) => (
+							<li key={i} className={styles.tag({ persisted: true })}>
+								<span className={styles.tagText()} style={{ width: `${tag.length + 0.5}ch` }}>
+									{tag}
+								</span>
+								<IconButton
+									type="button"
+									icon={faXmark}
+									color="secondary"
+									size="xxs"
+									onClick={() => handleRemove(i)}
+									aria-label={`Remove ${tag}`}
+								/>
+							</li>
+						))}
+						<li className={styles.tag({ persisted: false })}>
+							<input
+								ref={inputRef}
+								id={id}
+								type="text"
+								className={styles.input({ isFull })}
+								maxLength={24}
+								value={input}
+								onChange={handleChange}
+								onBlur={handleBlur}
+								onKeyDown={handleKeyDown}
+								placeholder={placeholder}
+								required={required && tags.length === 0}
+							/>
+						</li>
+					</ul>
+				)}
+			</FormField>
+
+			{limitWarning && <p className={styles.tagLimit()}>{limitWarning}</p>}
+		</>
+	)
+}

package/src/forms/TagsField/TagsField.types.ts

@@ -0,0 +1,7 @@
+export interface TagsFieldProps {
+	name: string
+	label?: string
+	tagLimit?: number
+	required?: boolean
+	placeholder?: string
+}

package/src/forms/TagsField/TagsField.variants.ts

@@ -0,0 +1,51 @@
+import { styles as fieldStyles } from '../FormField'
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	tags: tv({
+		extend: fieldStyles.input,
+		base: [
+			'min-h-11',
+			'w-full',
+			'flex',
+			'flex-wrap',
+			'gap-y-2',
+			'items-center',
+			'focus-within:border-primary-300'
+		],
+		variants: {
+			isFull: { true: 'cursor-not-allowed' }
+		}
+	}),
+
+	tag: tv({
+		base: 'h-full flex items-center font-mono',
+		variants: {
+			persisted: {
+				true: [
+					'flex-[initial]',
+					'mr-2',
+					'border',
+					'border-steel-700',
+					'rounded-sm',
+					'p-[2px]',
+					'pl-2',
+					'leading-none'
+				],
+				false: 'flex-1'
+			}
+		},
+		defaultVariants: { persisted: false }
+	}),
+
+	tagText: tv({ base: 'text-xs leading-[115%]' }),
+
+	input: tv({
+		base: 'outline-none border-0 w-auto grow shrink bg-transparent text-white text-sm',
+		variants: {
+			isFull: { true: 'cursor-not-allowed' }
+		}
+	}),
+
+	tagLimit: tv({ base: '-mt-4 pt-1 text-xs text-red-300' })
+}

package/src/forms/TagsField/index.ts

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

package/src/forms/TextareaField/TextareaField.tsx

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

package/src/forms/TextareaField/TextareaField.types.ts

@@ -0,0 +1,9 @@
+export interface TextareaFieldProps {
+	name: string
+	label?: string
+	rows?: number
+	required?: boolean
+	placeholder?: string
+	autoComplete?: string
+	autoFocus?: boolean
+}

package/src/forms/TextareaField/TextareaField.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: 'min-h-11 resize-y',
+		variants: {
+			error: {
+				true: 'border-red-500!'
+			}
+		}
+	})
+}

package/src/forms/TextareaField/index.ts

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

package/src/forms/UploadField/UploadField.tsx

@@ -0,0 +1,70 @@
+import { useRef, useState, type ChangeEvent, type DragEvent } from 'react'
+import { useFormContext } from '../../contexts/FormContext'
+import { FormField } from '../FormField'
+import { type UploadFieldProps } from './UploadField.types'
+import { styles } from './UploadField.variants'
+
+export function UploadField({
+	name,
+	label,
+	required = false,
+	multiple = false,
+	accept = 'image/*'
+}: UploadFieldProps) {
+	const { data, setField } = useFormContext()
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [dragActive, setDragActive] = useState(false)
+
+	const value = data[name]
+	const files: File[] = value
+		? (multiple ? (value as File[]) : [value as File])
+		: []
+
+	const apply = (incoming: FileList | File[]) => {
+		const arr = Array.from(incoming)
+		if (arr.length === 0) return
+		setField(name, multiple ? arr : arr[0])
+	}
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) apply(e.target.files)
+	}
+
+	const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+		e.preventDefault()
+		setDragActive(false)
+		if (e.dataTransfer.files) apply(e.dataTransfer.files)
+	}
+
+	return (
+		<FormField name={name} label={label} required={required}>
+			{(id, hasError) => (
+				<div
+					id={id}
+					className={styles.dropzone({ dragActive, error: hasError })}
+					onClick={() => inputRef.current?.click()}
+					onDragOver={e => { e.preventDefault(); setDragActive(true) }}
+					onDragLeave={() => setDragActive(false)}
+					onDrop={handleDrop}
+				>
+					<input
+						ref={inputRef}
+						type="file"
+						name={name}
+						accept={accept}
+						multiple={multiple}
+						required={required && files.length === 0}
+						className="hidden"
+						onChange={handleChange}
+					/>
+					<p>{dragActive ? 'Drop the file here…' : 'Drag a file or click to select'}</p>
+					{files.length > 0 && (
+						<ul className={styles.previews()}>
+							{files.map((f, i) => <li key={i}>{f.name}</li>)}
+						</ul>
+					)}
+				</div>
+			)}
+		</FormField>
+	)
+}

package/src/forms/UploadField/UploadField.types.ts

@@ -0,0 +1,7 @@
+export interface UploadFieldProps {
+	name: string
+	label?: string
+	required?: boolean
+	multiple?: boolean
+	accept?: string
+}

package/src/forms/UploadField/UploadField.variants.ts

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	dropzone: tv({
+		base: [
+			'flex flex-col items-center justify-center gap-2',
+			'min-h-24',
+			'p-4',
+			'border-2 border-dashed border-steel-700',
+			'rounded-xs',
+			'cursor-pointer',
+			'transition',
+			'text-sm text-steel-300',
+			'hover:border-primary-500 hover:text-primary-500'
+		],
+		variants: {
+			dragActive: { true: 'border-primary-500! text-primary-500!' },
+			error: { true: 'border-red-500!' }
+		}
+	}),
+
+	previews: tv({ base: 'mt-3 text-xs text-steel-100 list-disc list-inside' })
+}

package/src/forms/UploadField/index.ts

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

package/src/forms/index.ts

@@ -0,0 +1,10 @@
+export * from './Form'
+export * from './FormField'
+export * from './InputField'
+export * from './TextareaField'
+export * from './SwitchField'
+export * from './CheckboxField'
+export * from './SpoilerField'
+export * from './DropdownField'
+export * from './TagsField'
+export * from './UploadField'

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @cxxi-lab/hub-ui — hub's design system: the components, the design tokens (theme.css), the fonts
+ * (fonts.css) and the few helpers the components rely on (the back-button stack…).
+ */
+export * from './buttons'
+export * from './forms'
+export * from './menus'
+export * from './modals'
+export * from './navs'
+export * from './tables'
+export * from './Brand'
+export type { FormData, FormErrors, FormContextValue } from './contexts/FormContext'
+export { useFormContext } from './contexts/FormContext'
+export { useBackHandler, handleBack, onBackDepth } from './back'
+export * from './utils'

package/src/menus/Dropdown/Dropdown.tsx

@@ -0,0 +1,39 @@
+import { useRef, useState } from 'react'
+import { useClickOutside } from '../../utils/useClickOutside'
+import { useBackHandler } from '../../back'
+import { type DropdownProps } from './Dropdown.types'
+import { styles } from './Dropdown.variants'
+
+export function Dropdown({
+	header,
+	children,
+	color,
+	side,
+	isOpen: controlledOpen,
+	onOpenChange,
+	className
+}: DropdownProps) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
+	const isControlled = controlledOpen !== undefined
+	const open = isControlled ? controlledOpen : uncontrolledOpen
+
+	const setOpen = (next: boolean) => {
+		if (!isControlled) setUncontrolledOpen(next)
+		onOpenChange?.(next)
+	}
+
+	const containerRef = useRef<HTMLDivElement>(null)
+	const menuRef = useRef<HTMLDivElement>(null)
+
+	useClickOutside([containerRef, menuRef], () => setOpen(false))
+	useBackHandler(open, () => setOpen(false))
+
+	return (
+		<div ref={containerRef} className={styles.container({ class: className })} onClick={() => setOpen(!open)}>
+			{header && <div>{typeof header === 'function' ? header(open) : header}</div>}
+			<div ref={menuRef} className={styles.menu({ open, color, side })}>
+				<div>{children}</div>
+			</div>
+		</div>
+	)
+}

package/src/menus/Dropdown/Dropdown.types.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react'
+
+export type DropdownColor = 'menu' | 'field'
+export type DropdownSide = 'left' | 'center' | 'right'
+
+export type DropdownHeader = ReactNode | ((isOpen: boolean) => ReactNode)
+
+export interface DropdownProps {
+	header?: DropdownHeader
+	children: ReactNode
+	color?: DropdownColor
+	side?: DropdownSide
+	isOpen?: boolean
+	onOpenChange?: (open: boolean) => void
+	/** extra classes on the root (e.g. to size it inside a flex row) */
+	className?: string
+}

package/src/menus/Dropdown/Dropdown.variants.ts

@@ -0,0 +1,44 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	container: tv({ base: 'relative' }),
+
+	menu: tv({
+		base: [
+			'absolute',
+			'w-fit',
+			'rounded-xs',
+			'border',
+			'origin-top',
+			'transition-transform',
+			'transition-opacity',
+			'z-50'
+		],
+
+		variants: {
+			color: {
+				menu: 'bg-steel-800 border-steel-700 shadow-out',
+				field: 'bg-steel-800 border-steel-300 shadow'
+			},
+			side: {
+				left: 'start-0',
+				center: 'start-0 w-full end-0',
+				right: 'end-0'
+			},
+			open: {
+				true: 'scale-y-100 opacity-100 pointer-events-auto',
+				false: 'scale-y-0 opacity-0 pointer-events-none'
+			}
+		},
+
+		defaultVariants: {
+			color: 'menu',
+			side: 'left'
+		},
+
+		compoundVariants: [
+			{ side: ['left', 'right'], color: 'menu', class: 'top-[calc(100%+8px)]' },
+			{ side: 'center', color: 'field', class: 'top-12' }
+		]
+	})
+}

package/src/menus/Dropdown/index.ts

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

package/src/menus/index.ts

@@ -0,0 +1 @@
+export * from './Dropdown'

package/src/modals/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { withLoading } from '../../utils'
+import { Button } from '../../buttons'
+import { Modal } from '../Modal'
+import { type ConfirmationModalProps } from './ConfirmationModal.types'
+import { styles } from './ConfirmationModal.variants'
+
+export function ConfirmationModal({
+	title,
+	size,
+	confirmLabel = 'Confirm',
+	confirmColor,
+	cancelLabel = 'Cancel',
+	onConfirm,
+	onClose,
+	children
+}: ConfirmationModalProps) {
+	const [loading, setLoading] = useState(false)
+
+	const handleConfirm = async () => {
+		await withLoading(setLoading, () => Promise.resolve(onConfirm()))
+		onClose()
+	}
+
+	return (
+		<Modal title={title} size={size} onClose={onClose}>
+			<div className={styles.content()}>{children}</div>
+			<footer className={styles.footer()}>
+				<Button
+					label={cancelLabel}
+					color="secondary"
+					onClick={onClose}
+					isDisabled={loading}
+				/>
+				<Button
+					label={confirmLabel}
+					color={confirmColor}
+					onClick={handleConfirm}
+					isLoading={loading}
+				/>
+			</footer>
+		</Modal>
+	)
+}

package/src/modals/ConfirmationModal/ConfirmationModal.types.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react'
+import { type ButtonColor } from '../../buttons/Button/Button.types'
+import { type ModalSize } from '../Modal/Modal.types'
+
+export interface ConfirmationModalProps {
+	title: ReactNode
+	size?: ModalSize
+	confirmLabel?: string
+	confirmColor?: ButtonColor
+	cancelLabel?: string
+	onConfirm: () => void | Promise<void>
+	onClose: () => void
+	children: ReactNode
+}

package/src/modals/ConfirmationModal/ConfirmationModal.variants.ts

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	content: tv({ base: 'mb-2' }),
+	footer: tv({ base: 'pt-6 flex justify-end items-center gap-2' })
+}

package/src/modals/ConfirmationModal/index.ts

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

package/src/modals/FormModal/FormModal.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { withLoading } from '../../utils'
+import { type FormData } from '../../contexts/FormContext'
+import { Button } from '../../buttons'
+import { Form } from '../../forms'
+import { Modal } from '../Modal'
+import { type FormModalProps } from './FormModal.types'
+
+export function FormModal({
+	title,
+	size,
+	initialData,
+	submitLabel = 'Submit',
+	cancelLabel = 'Cancel',
+	onSubmit,
+	onClose,
+	children
+}: FormModalProps) {
+	const [loading, setLoading] = useState(false)
+
+	const handleSubmit = async (data: FormData) => {
+		await withLoading(setLoading, () => Promise.resolve(onSubmit(data)))
+		onClose()
+	}
+
+	const actions = (
+		<>
+			<Button
+				type="button"
+				color="secondary"
+				label={cancelLabel}
+				onClick={onClose}
+				isDisabled={loading}
+			/>
+			<Button type="submit" label={submitLabel} isLoading={loading} />
+		</>
+	)
+
+	return (
+		<Modal title={title} size={size} onClose={onClose}>
+			<Form initialData={initialData} onSubmit={handleSubmit} actions={actions}>
+				{children}
+			</Form>
+		</Modal>
+	)
+}