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

package/src/modals/FormModal/FormModal.types.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react'
+import { type FormData } from '../../contexts/FormContext'
+import { type ModalSize } from '../Modal/Modal.types'
+
+export interface FormModalProps {
+	title: ReactNode
+	size?: ModalSize
+	initialData?: FormData
+	submitLabel?: string
+	cancelLabel?: string
+	onSubmit: (data: FormData) => void | Promise<void>
+	onClose: () => void
+	children: ReactNode
+}

package/src/modals/FormModal/FormModal.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	wrapper: tv({ base: '' })
+}

package/src/modals/FormModal/index.ts

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

package/src/modals/InfoModal/InfoModal.tsx

@@ -0,0 +1,21 @@
+import { Button } from '../../buttons'
+import { Modal } from '../Modal'
+import { type InfoModalProps } from './InfoModal.types'
+import { styles } from './InfoModal.variants'
+
+export function InfoModal({
+	title,
+	size,
+	dismissLabel = 'OK',
+	onClose,
+	children
+}: InfoModalProps) {
+	return (
+		<Modal title={title} size={size} onClose={onClose}>
+			<div className={styles.content()}>{children}</div>
+			<footer className={styles.footer()}>
+				<Button label={dismissLabel} onClick={onClose} />
+			</footer>
+		</Modal>
+	)
+}

package/src/modals/InfoModal/InfoModal.types.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react'
+import { type ModalSize } from '../Modal/Modal.types'
+
+export interface InfoModalProps {
+	title: ReactNode
+	size?: ModalSize
+	dismissLabel?: string
+	onClose: () => void
+	children: ReactNode
+}

package/src/modals/InfoModal/InfoModal.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' })
+}

package/src/modals/InfoModal/index.ts

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

package/src/modals/Modal/Modal.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { IconButton } from '../../buttons'
+import { type ModalProps } from './Modal.types'
+import { styles } from './Modal.variants'
+import { useBackHandler } from '../../back'
+
+export function Modal({ title, size, onClose, children }: ModalProps) {
+	// the phone's back button closes it
+	useBackHandler(true, onClose)
+	useEffect(() => {
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose()
+		}
+		window.addEventListener('keydown', onKey)
+		return () => window.removeEventListener('keydown', onKey)
+	}, [onClose])
+
+	return createPortal(
+		<div className={styles.backdrop()} onMouseDown={e => e.target === e.currentTarget && onClose()}>
+			<div className={styles.modal({ size })} role="dialog" aria-modal="true">
+				{title !== undefined && (
+					<header className={styles.header()}>
+						<h2 className={styles.title()}>{title}</h2>
+						<IconButton color="secondary" icon={faXmark} onClick={onClose} aria-label="Close" />
+					</header>
+				)}
+				<div className={styles.content()}>{children}</div>
+			</div>
+		</div>,
+		document.body
+	)
+}

package/src/modals/Modal/Modal.types.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react'
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+export interface ModalProps {
+	title?: ReactNode
+	size?: ModalSize
+	onClose: () => void
+	children: ReactNode
+}

package/src/modals/Modal/Modal.variants.ts

@@ -0,0 +1,48 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	backdrop: tv({
+		base: [
+			'fixed inset-0',
+			'flex',
+			'items-start',
+			'justify-center',
+			// phone: the modal is the whole screen (no margin below sm)
+			'sm:p-4',
+			'bg-black-overlay',
+			'backdrop-blur-xs',
+			'pretty-scrollbar',
+			'z-999'
+		]
+	}),
+
+	modal: tv({
+		base: [
+			'bg-steel-800',
+			'text-steel-100',
+			'sm:rounded-sm',
+			'shadow',
+			'sm:my-4',
+			'min-h-full sm:min-h-0',
+			'h-auto',
+			'w-full',
+			'relative'
+		],
+		variants: {
+			size: {
+				sm: 'sm:max-w-lg',
+				md: 'sm:max-w-2xl',
+				lg: 'sm:max-w-4xl',
+				xl: 'sm:max-w-6xl',
+				full: 'max-w-none w-screen h-screen my-0'
+			}
+		},
+		defaultVariants: {
+			size: 'sm'
+		}
+	}),
+
+	header: tv({ base: 'flex justify-between items-center gap-4 p-6 pb-4' }),
+	title: tv({ base: 'text-xl font-semibold' }),
+	content: tv({ base: 'px-6 pb-6' })
+}

package/src/modals/Modal/index.ts

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

package/src/modals/index.ts

@@ -0,0 +1,4 @@
+export * from './Modal'
+export * from './ConfirmationModal'
+export * from './FormModal'
+export * from './InfoModal'

package/src/navs/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,19 @@
+import { Fragment } from 'react'
+import { Link } from 'react-router'
+import { type BreadCrumbProps } from './BreadCrumb.types'
+import { styles } from './BreadCrumb.variants'
+
+export function BreadCrumb({ crumbs, separator = '/' }: BreadCrumbProps) {
+	return (
+		<ul className={styles.container()}>
+			{crumbs.map((crumb, i) => (
+				<Fragment key={`crumb-${i}`}>
+					{i > 0 && <li className={styles.separator()}>{separator}</li>}
+					<li className={styles.crumb()}>
+						<Link to={crumb.path}>{crumb.label}</Link>
+					</li>
+				</Fragment>
+			))}
+		</ul>
+	)
+}

package/src/navs/BreadCrumb/BreadCrumb.types.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react'
+
+export interface Crumb {
+	path: string
+	label: ReactNode
+}
+
+export interface BreadCrumbProps {
+	crumbs: Crumb[]
+	separator?: ReactNode
+}

package/src/navs/BreadCrumb/BreadCrumb.variants.ts

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	container: tv({ base: 'flex gap-2 text-xs mb-1' }),
+	crumb: tv({ base: 'hover:underline underline-offset-3 text-steel-100' }),
+	separator: tv({ base: 'text-steel-300' })
+}

package/src/navs/BreadCrumb/index.ts

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

package/src/navs/index.ts

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

package/src/tables/Table/Table.tsx

@@ -0,0 +1,6 @@
+import { type TableProps } from './Table.types'
+import { styles } from './Table.variants'
+
+export function Table({ children, className }: TableProps) {
+	return <table className={className ?? styles.table()}>{children}</table>
+}

package/src/tables/Table/Table.types.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react'
+
+export interface TableProps {
+	children: ReactNode
+	className?: string
+}

package/src/tables/Table/Table.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	table: tv({ base: 'w-full text-sm text-left' })
+}

package/src/tables/Table/index.ts

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

package/src/tables/TableCell/TableCell.tsx

@@ -0,0 +1,27 @@
+import { Link } from 'react-router'
+import { type TableCellProps } from './TableCell.types'
+import { styles } from './TableCell.variants'
+
+export function TableCell({
+	to,
+	textAlign = 'left',
+	mobile = true,
+	className,
+	children,
+	...rest
+}: TableCellProps) {
+	const computed = styles.td({
+		textAlign,
+		hiddenOnMobile: !mobile,
+		isLink: Boolean(to)
+	})
+
+	return (
+		<td className={`${computed} ${className ?? ''}`.trim()} {...rest}>
+			{to
+				? <Link to={to} className={styles.link()}>{children}</Link>
+				: <span>{children}</span>
+			}
+		</td>
+	)
+}

package/src/tables/TableCell/TableCell.types.ts

@@ -0,0 +1,9 @@
+import { type ReactNode, type TdHTMLAttributes } from 'react'
+import { type TextAlign } from '../TableHead/TableHead.types'
+
+export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'children'> {
+	to?: string
+	textAlign?: TextAlign
+	mobile?: boolean
+	children?: ReactNode
+}

package/src/tables/TableCell/TableCell.variants.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	td: tv({
+		base: 'px-4 leading-none',
+		variants: {
+			isLink: { false: 'py-2' },
+			textAlign: {
+				left: 'text-left',
+				center: 'text-center',
+				right: 'text-right'
+			},
+			hiddenOnMobile: { true: 'hidden md:table-cell' }
+		}
+	}),
+	link: tv({
+		base: [
+			'inline-block',
+			'w-full',
+			'py-2',
+			'hover:text-primary-500',
+			'hover:underline',
+			'underline-offset-3'
+		]
+	})
+}

package/src/tables/TableCell/index.ts

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

package/src/tables/TableFootGroup/TableFootGroup.tsx

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react'
+import { styles } from './TableFootGroup.variants'
+
+export function TableFootGroup({ children }: { children: ReactNode }) {
+	return (
+		<tfoot className={styles.tfoot()}>
+			<tr className={styles.rowFoot()}>{children}</tr>
+		</tfoot>
+	)
+}

package/src/tables/TableFootGroup/TableFootGroup.variants.ts

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	tfoot: tv({ base: '' }),
+	rowFoot: tv({ base: '' })
+}

package/src/tables/TableFootGroup/index.ts

@@ -0,0 +1 @@
+export { TableFootGroup } from './TableFootGroup'

package/src/tables/TableHead/TableHead.tsx

@@ -0,0 +1,22 @@
+import { Children } from 'react'
+import { type TableHeadProps } from './TableHead.types'
+import { styles } from './TableHead.variants'
+
+export function TableHead({
+	textAlign = 'left',
+	mobile = true,
+	className,
+	children,
+	...rest
+}: TableHeadProps) {
+	const computed = styles.th({
+		textAlign,
+		empty: Children.count(children) === 0,
+		hiddenOnMobile: !mobile
+	})
+	return (
+		<th className={`${computed} ${className ?? ''}`.trim()} {...rest}>
+			{children}
+		</th>
+	)
+}

package/src/tables/TableHead/TableHead.types.ts

@@ -0,0 +1,9 @@
+import { type ReactNode, type ThHTMLAttributes } from 'react'
+
+export type TextAlign = 'left' | 'center' | 'right'
+
+export interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'children'> {
+	textAlign?: TextAlign
+	mobile?: boolean
+	children?: ReactNode
+}

package/src/tables/TableHead/TableHead.variants.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	th: tv({
+		base: 'py-2',
+		variants: {
+			textAlign: {
+				left: 'text-left',
+				center: 'text-center',
+				right: 'text-right'
+			},
+			empty: { false: 'px-4' },
+			hiddenOnMobile: { true: 'hidden md:table-cell' }
+		}
+	})
+}

package/src/tables/TableHead/index.ts

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

package/src/tables/TableHeadGroup/TableHeadGroup.tsx

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react'
+import { styles } from './TableHeadGroup.variants'
+
+export function TableHeadGroup({ children }: { children: ReactNode }) {
+	return (
+		<thead className={styles.thead()}>
+			<tr className={styles.rowHead()}>{children}</tr>
+		</thead>
+	)
+}

package/src/tables/TableHeadGroup/TableHeadGroup.variants.ts

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	thead: tv({ base: 'border-b-2 border-steel-800' }),
+	rowHead: tv({ base: 'text-xs font-medium text-steel-300' })
+}

package/src/tables/TableHeadGroup/index.ts

@@ -0,0 +1 @@
+export { TableHeadGroup } from './TableHeadGroup'

package/src/tables/TableRow/TableRow.tsx

@@ -0,0 +1,7 @@
+import { type TableRowProps } from './TableRow.types'
+import { styles } from './TableRow.variants'
+
+export function TableRow({ children, highlighted = false, className }: TableRowProps) {
+	const computed = styles.tr({ highlighted })
+	return <tr className={`${computed} ${className ?? ''}`.trim()}>{children}</tr>
+}

package/src/tables/TableRow/TableRow.types.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react'
+
+export interface TableRowProps {
+	children: ReactNode
+	highlighted?: boolean
+	className?: string
+}

package/src/tables/TableRow/TableRow.variants.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	tr: tv({
+		base: 'hover:bg-primary-700/40 transition-colors',
+		variants: {
+			highlighted: {
+				true: 'bg-product-pink/15 hover:bg-product-pink/25'
+			}
+		}
+	})
+}

package/src/tables/TableRow/index.ts

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

package/src/tables/TableRowGroup/TableRowGroup.tsx

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react'
+import { styles } from './TableRowGroup.variants'
+
+export function TableRowGroup({ children }: { children: ReactNode }) {
+	return <tbody className={styles.tbody()}>{children}</tbody>
+}

package/src/tables/TableRowGroup/TableRowGroup.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants'
+
+export const styles = {
+	tbody: tv({ base: 'border-b-2 border-steel-800' })
+}

package/src/tables/TableRowGroup/index.ts

@@ -0,0 +1 @@
+export { TableRowGroup } from './TableRowGroup'

package/src/tables/index.ts

@@ -0,0 +1,7 @@
+export * from './Table'
+export * from './TableHead'
+export * from './TableHeadGroup'
+export * from './TableRow'
+export * from './TableRowGroup'
+export * from './TableCell'
+export * from './TableFootGroup'

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './withLoading'
+export * from './snakeCase'
+export * from './useClickOutside'
+export * from './useMediaQuery'

package/src/utils/snakeCase.ts

@@ -0,0 +1,6 @@
+export function snakeCase(input: string): string {
+	return input
+		.replace(/([a-z0-9])([A-Z])/g, '$1_$2')
+		.replace(/[-\s]+/g, '_')
+		.toLowerCase()
+}

package/src/utils/useClickOutside.ts

@@ -0,0 +1,16 @@
+import { useEffect, type RefObject } from 'react'
+
+type Refs = ReadonlyArray<RefObject<HTMLElement | null>>
+
+export function useClickOutside(refs: Refs, callback: () => void): void {
+	useEffect(() => {
+		const handler = (e: MouseEvent) => {
+			const target = e.target as Node
+			if (refs.every(ref => ref.current && !ref.current.contains(target))) {
+				callback()
+			}
+		}
+		document.addEventListener('mousedown', handler)
+		return () => document.removeEventListener('mousedown', handler)
+	}, [refs, callback])
+}

package/src/utils/useMediaQuery.ts

@@ -0,0 +1,11 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+/** Whether `query` (a CSS media query) currently matches; follows its changes. */
+export function useMediaQuery(query: string): boolean {
+	const subscribe = useCallback((onChange: () => void) => {
+		const list = window.matchMedia(query)
+		list.addEventListener('change', onChange)
+		return () => list.removeEventListener('change', onChange)
+	}, [query])
+	return useSyncExternalStore(subscribe, () => window.matchMedia(query).matches)
+}

package/src/utils/withLoading.ts

@@ -0,0 +1,13 @@
+export async function withLoading(
+	setLoading: (loading: boolean) => void,
+	fn?: () => Promise<void> | void
+): Promise<void> {
+	if (!fn) return
+	setLoading(true)
+	try {
+		await fn()
+	}
+	finally {
+		setLoading(false)
+	}
+}