@glyphui/ui 0.0.0-stage → 0.1.0

package/src/patterns/data-table/data-table.tsx

@@ -0,0 +1,367 @@
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type RowData,
+  type RowSelectionState,
+  type SortingState,
+  useReactTable,
+} from '@tanstack/react-table'
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
+import { Button, IconButton } from '../../components/button'
+import { Checkbox } from '../../components/checkbox'
+import { Input } from '../../components/input'
+import { Skeleton } from '../../components/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../components/table'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  SearchIcon,
+} from '../../internal/icons'
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { EmptyState, ErrorState } from '../async/states'
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /** Cell and header alignment. Use `right` for numbers. */
+    align?: 'left' | 'center' | 'right'
+    /** Extra classes for this column's cells. */
+    className?: string
+  }
+}
+
+export const dataTableStyles = tv({
+  slots: {
+    root: 'flex min-w-0 flex-col',
+    toolbar: 'flex flex-wrap items-center gap-2',
+    search: 'w-full sm:max-w-64',
+    actions: 'ml-auto flex items-center gap-2',
+    sortButton: [
+      '-ml-1.5 inline-flex cursor-pointer items-center gap-1 rounded-xs px-1.5 py-1 hover:text-foreground [&>svg]:size-3.5',
+      focusRing,
+    ],
+    footer:
+      'flex flex-wrap items-center justify-between gap-3 text-small text-muted-foreground tabular-nums',
+    pager: 'flex items-center gap-1',
+  },
+  variants: {
+    variant: {
+      card: {
+        root: ['overflow-hidden rounded-lg border-border bg-surface shadow-sm', themedBorder],
+        toolbar: 'border-b border-border p-3',
+        footer: 'border-t border-border px-4 py-2.5',
+      },
+      plain: { root: 'gap-3' },
+    },
+  },
+  defaultVariants: { variant: 'card' },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DataTable: StylesEntry<typeof dataTableStyles>
+  }
+}
+
+const alignClass = { left: 'text-left', center: 'text-center', right: 'text-right' } as const
+const NO_ROWS: never[] = []
+
+export interface DataTableProps<T> extends VariantProps<typeof dataTableStyles> {
+  data: T[] | undefined
+  /** Build with `createColumnHelper<T>()` for typed accessors. */
+  // biome-ignore lint/suspicious/noExplicitAny: TanStack's own convention for mixed column value types
+  columns: ColumnDef<T, any>[]
+  /** Shows skeleton rows. */
+  loading?: boolean
+  /** Shows an error state with a retry button when `onRetry` is set. */
+  error?: unknown
+  onRetry?: () => unknown
+  getRowId?: (row: T, index: number) => string
+  /** Rows per page, or `false` to show every row. Default 10. */
+  pageSize?: number | false
+  /** Adds a checkbox column. */
+  selectable?: boolean
+  onSelectionChange?: (rows: T[]) => void
+  /** Adds a search box that filters across all columns. */
+  search?: boolean | { placeholder?: string }
+  /** Extra controls at the end of the toolbar (filters, buttons). */
+  toolbar?: ReactNode
+  /** Shown when there are no rows at all (not when a search matches nothing). */
+  empty?: ReactNode
+  initialSorting?: SortingState
+  'aria-label'?: string
+  className?: string
+}
+
+function selectColumn<T>(): ColumnDef<T> {
+  return {
+    id: '__select',
+    enableSorting: false,
+    enableGlobalFilter: false,
+    header: ({ table }) => (
+      <Checkbox
+        className="mt-0"
+        aria-label="Select all rows on this page"
+        checked={
+          table.getIsAllPageRowsSelected()
+            ? true
+            : table.getIsSomePageRowsSelected()
+              ? 'indeterminate'
+              : false
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(value === true)}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        className="mt-0"
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(value === true)}
+      />
+    ),
+  }
+}
+
+/**
+ * A table with sorting, search, pagination and row selection, plus built-in loading,
+ * empty, no-results and error states. Columns are typed from your row type.
+ */
+export function DataTable<T>(inProps: DataTableProps<T>) {
+  const [props, slots] = useComponentConfig('DataTable', inProps)
+  const {
+    data,
+    columns,
+    loading = false,
+    error,
+    onRetry,
+    getRowId,
+    pageSize = 10,
+    selectable = false,
+    onSelectionChange,
+    search = false,
+    toolbar,
+    empty,
+    initialSorting = [],
+    variant,
+    className,
+    'aria-label': ariaLabel,
+  } = props
+
+  const [sorting, setSorting] = useState<SortingState>(initialSorting)
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [globalFilter, setGlobalFilter] = useState('')
+  const allColumns = useMemo(
+    () => (selectable ? [selectColumn<T>(), ...columns] : columns),
+    [selectable, columns],
+  )
+
+  const table = useReactTable<T>({
+    data: data ?? NO_ROWS,
+    columns: allColumns,
+    state: { sorting, rowSelection, globalFilter },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    enableRowSelection: selectable,
+    sortDescFirst: false,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    ...(getRowId && { getRowId }),
+    ...(pageSize !== false && {
+      getPaginationRowModel: getPaginationRowModel(),
+      initialState: { pagination: { pageIndex: 0, pageSize } },
+    }),
+  })
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: report only when the selection changes
+  useEffect(() => {
+    onSelectionChange?.(table.getSelectedRowModel().rows.map((row) => row.original))
+  }, [rowSelection])
+
+  const s = dataTableStyles({ variant })
+  const columnCount = table.getVisibleLeafColumns().length
+  const rows = table.getRowModel().rows
+  const filteredTotal = table.getFilteredRowModel().rows.length
+  const selectedCount = Object.keys(rowSelection).length
+  const { pageIndex, pageSize: size } = table.getState().pagination
+  const showFooter = pageSize !== false && !loading && !error && filteredTotal > 0
+  const searchPlaceholder = typeof search === 'object' ? search.placeholder : undefined
+
+  const fullWidthRow = (content: ReactNode) => (
+    <TableRow className="hover:bg-transparent">
+      <TableCell colSpan={columnCount} className="p-0">
+        {content}
+      </TableCell>
+    </TableRow>
+  )
+
+  let body: ReactNode
+  if (loading) {
+    body = Array.from({ length: pageSize === false ? 5 : Math.min(pageSize, 8) }, (_, i) => (
+      <TableRow key={i} className="hover:bg-transparent">
+        {table.getVisibleLeafColumns().map((column) => (
+          <TableCell key={column.id}>
+            <Skeleton className={column.id === '__select' ? 'size-4' : 'h-4 w-[70%]'} />
+          </TableCell>
+        ))}
+      </TableRow>
+    ))
+  } else if (error) {
+    body = fullWidthRow(<ErrorState error={error} onRetry={onRetry} />)
+  } else if (rows.length === 0) {
+    body = fullWidthRow(
+      globalFilter ? (
+        <EmptyState
+          icon={<SearchIcon />}
+          title={`No results for “${globalFilter}”`}
+          description="Check the spelling or try a shorter search."
+          action={
+            <Button variant="outline" size="sm" onClick={() => setGlobalFilter('')}>
+              Clear search
+            </Button>
+          }
+        />
+      ) : (
+        (empty ?? <EmptyState title="No rows yet" />)
+      ),
+    )
+  } else {
+    body = rows.map((row) => (
+      <TableRow key={row.id} data-state={row.getIsSelected() ? 'selected' : undefined}>
+        {row.getVisibleCells().map((cell) => {
+          const meta = cell.column.columnDef.meta
+          return (
+            <TableCell
+              key={cell.id}
+              className={[alignClass[meta?.align ?? 'left'], meta?.className].join(' ')}
+            >
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </TableCell>
+          )
+        })}
+      </TableRow>
+    ))
+  }
+
+  return (
+    <div data-slot="data-table" className={s.root({ class: [slots.root, className] })}>
+      {(search || toolbar) && (
+        <div className={s.toolbar({ class: slots.toolbar })}>
+          {search && (
+            <Input
+              size="sm"
+              type="search"
+              aria-label="Search rows"
+              placeholder={searchPlaceholder ?? 'Search…'}
+              prefix={<SearchIcon />}
+              value={globalFilter}
+              onChange={(event) => {
+                setGlobalFilter(event.target.value)
+                table.setPageIndex(0)
+              }}
+              className={s.search({ class: slots.search })}
+            />
+          )}
+          {toolbar && <div className={s.actions({ class: slots.actions })}>{toolbar}</div>}
+        </div>
+      )}
+
+      <Table aria-label={ariaLabel} aria-busy={loading || undefined}>
+        <TableHeader>
+          {table.getHeaderGroups().map((group) => (
+            <TableRow key={group.id} className="hover:bg-transparent">
+              {group.headers.map((header) => {
+                const column = header.column
+                const sorted = column.getIsSorted()
+                const align = column.columnDef.meta?.align ?? 'left'
+                const label = header.isPlaceholder
+                  ? null
+                  : flexRender(column.columnDef.header, header.getContext())
+                return (
+                  <TableHead
+                    key={header.id}
+                    className={alignClass[align]}
+                    aria-sort={
+                      sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : undefined
+                    }
+                  >
+                    {column.getCanSort() && !header.isPlaceholder ? (
+                      <button
+                        type="button"
+                        onClick={column.getToggleSortingHandler()}
+                        className={s.sortButton({
+                          class: [slots.sortButton, align === 'right' && 'flex-row-reverse'],
+                        })}
+                      >
+                        {label}
+                        {sorted === 'asc' ? (
+                          <ArrowUpIcon />
+                        ) : sorted === 'desc' ? (
+                          <ArrowDownIcon />
+                        ) : (
+                          <ChevronsUpDownIcon className="opacity-40" />
+                        )}
+                      </button>
+                    ) : (
+                      label
+                    )}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>{body}</TableBody>
+      </Table>
+
+      {showFooter && (
+        <div className={s.footer({ class: slots.footer })}>
+          <p>
+            {pageIndex * size + 1}–{Math.min((pageIndex + 1) * size, filteredTotal)} of{' '}
+            {filteredTotal}
+            {selectedCount > 0 && (
+              <span className="text-foreground"> · {selectedCount} selected</span>
+            )}
+          </p>
+          <div className={s.pager({ class: slots.pager })}>
+            <IconButton
+              variant="outline"
+              size="sm"
+              icon={<ChevronLeftIcon />}
+              aria-label="Previous page"
+              disabled={!table.getCanPreviousPage()}
+              onClick={() => table.previousPage()}
+            />
+            <IconButton
+              variant="outline"
+              size="sm"
+              icon={<ChevronRightIcon />}
+              aria-label="Next page"
+              disabled={!table.getCanNextPage()}
+              onClick={() => table.nextPage()}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/patterns/data-table/index.ts

@@ -0,0 +1,2 @@
+export { type ColumnDef, createColumnHelper, type SortingState } from '@tanstack/react-table'
+export { DataTable, type DataTableProps, dataTableStyles } from './data-table'

package/src/patterns/form/form.tsx

@@ -0,0 +1,150 @@
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import type { StandardSchemaV1 } from '@standard-schema/spec'
+import type { ComponentProps, ReactNode } from 'react'
+import {
+  type Control,
+  Controller,
+  type ControllerRenderProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  type Resolver,
+  type UseFormProps,
+  type UseFormReturn,
+  useFormState,
+  useForm as useHookForm,
+} from 'react-hook-form'
+import { Button, type ButtonProps } from '../../components/button'
+import { Field, type FieldProps } from '../../components/field'
+import { AlertIcon } from '../../internal/icons'
+import { tv } from '../../utils/tv'
+
+type AnySchema = StandardSchemaV1<FieldValues, FieldValues>
+type InputOf<S extends AnySchema> = StandardSchemaV1.InferInput<S>
+type OutputOf<S extends AnySchema> = StandardSchemaV1.InferOutput<S>
+
+export interface UseFormOptions<S extends AnySchema>
+  extends Omit<UseFormProps<InputOf<S>, unknown, OutputOf<S>>, 'resolver'> {
+  /** Any Standard Schema validator: zod, valibot, arktype, ... */
+  schema: S
+}
+
+/**
+ * react-hook-form's `useForm`, validated by a schema. Field names and submitted values are
+ * typed from the schema.
+ */
+export function useForm<S extends AnySchema>({
+  schema,
+  ...options
+}: UseFormOptions<S>): UseFormReturn<InputOf<S>, unknown, OutputOf<S>> {
+  return useHookForm<InputOf<S>, unknown, OutputOf<S>>({
+    mode: 'onTouched',
+    ...options,
+    resolver: standardSchemaResolver(schema) as Resolver<InputOf<S>, unknown, OutputOf<S>>,
+  })
+}
+
+/** Field-level errors from the server, keyed by field name. `root` shows above the form. */
+export type FormErrors<TInput extends FieldValues> = Partial<
+  Record<FieldPath<TInput> | 'root', string>
+>
+
+// biome-ignore lint/suspicious/noConfusingVoidType: submit handlers usually return nothing
+export type SubmitResult<TInput extends FieldValues> = void | { errors: FormErrors<TInput> }
+
+export interface FormProps<TInput extends FieldValues, TOutput>
+  extends Omit<ComponentProps<'form'>, 'onSubmit'> {
+  form: UseFormReturn<TInput, unknown, TOutput>
+  /**
+   * Receives validated values. Return `{ errors }` to show server-side field errors, or throw
+   * to show a form-level error. The submit button shows a spinner until this settles.
+   */
+  onSubmit: (values: TOutput) => SubmitResult<TInput> | Promise<SubmitResult<TInput>>
+}
+
+export function Form<TInput extends FieldValues, TOutput>({
+  form,
+  onSubmit,
+  children,
+  ...props
+}: FormProps<TInput, TOutput>) {
+  const submit = form.handleSubmit(async (values) => {
+    try {
+      const result = await onSubmit(values)
+      if (!result?.errors) return
+      for (const [name, message] of Object.entries(result.errors)) {
+        if (message) form.setError(name as FieldPath<TInput>, { type: 'server', message })
+      }
+    } catch (error) {
+      form.setError('root', {
+        type: 'server',
+        message: error instanceof Error ? error.message : 'Something went wrong. Try again.',
+      })
+    }
+  })
+
+  return (
+    <FormProvider {...form}>
+      <form noValidate onSubmit={submit} {...props}>
+        {children}
+      </form>
+    </FormProvider>
+  )
+}
+
+export interface FormFieldProps<TInput extends FieldValues, TName extends FieldPath<TInput>>
+  extends Omit<FieldProps, 'children' | 'error'> {
+  // biome-ignore lint/suspicious/noExplicitAny: accepts forms with any transformed output type
+  control: Control<TInput, unknown, any>
+  /** Typed from the schema: a misspelled name is a compile error. */
+  name: TName
+  /** Render the control and spread `field` onto it: `{(field) => <Input {...field} />}`. */
+  children: (field: ControllerRenderProps<TInput, TName>) => ReactNode
+}
+
+/** One schema field: label, control, description and validation message, all wired. */
+export function FormField<TInput extends FieldValues, TName extends FieldPath<TInput>>({
+  control,
+  name,
+  children,
+  ...fieldProps
+}: FormFieldProps<TInput, TName>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <Field {...fieldProps} error={fieldState.error?.message}>
+          {children(field)}
+        </Field>
+      )}
+    />
+  )
+}
+
+/** Submit button that shows progress while the form submits. */
+export function FormSubmit(props: Omit<ButtonProps, 'type'>) {
+  const { isSubmitting } = useFormState()
+  return <Button type="submit" loading={isSubmitting} {...props} />
+}
+
+export const formErrorStyles = tv({
+  slots: {
+    base: 'flex items-start gap-2 rounded-md border border-danger/30 bg-danger/8 px-3 py-2.5 text-small text-danger',
+    icon: 'mt-0.5 size-4 shrink-0',
+  },
+})
+
+/** Form-level error (thrown from `onSubmit` or returned as `errors.root`). */
+export function FormError({ className }: { className?: string }) {
+  const { errors } = useFormState()
+  const message = errors.root?.message
+  if (!message) return null
+  const s = formErrorStyles()
+  return (
+    <div role="alert" data-slot="form-error" className={s.base({ class: className })}>
+      <AlertIcon className={s.icon()} />
+      <span>{message}</span>
+    </div>
+  )
+}

package/src/patterns/form/index.ts

@@ -0,0 +1,13 @@
+export {
+  Form,
+  FormError,
+  type FormErrors,
+  FormField,
+  type FormFieldProps,
+  type FormProps,
+  FormSubmit,
+  formErrorStyles,
+  type SubmitResult,
+  type UseFormOptions,
+  useForm,
+} from './form'

package/src/provider/color-mode.tsx

@@ -0,0 +1,133 @@
+import type { ColorMode } from '@glyphui/tokens'
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+export type ColorModePreference = ColorMode | 'system'
+
+export interface ColorModeContextValue {
+  /** What the user chose. */
+  mode: ColorModePreference
+  /** What is shown: `system` resolved against the OS setting. */
+  resolvedMode: ColorMode
+  setMode: (mode: ColorModePreference) => void
+}
+
+const ColorModeContext = createContext<ColorModeContextValue | null>(null)
+
+const DARK_QUERY = '(prefers-color-scheme: dark)'
+const isBrowser = typeof window !== 'undefined'
+
+export interface ColorModeOptions {
+  /** Used when nothing is stored yet. */
+  defaultMode?: ColorModePreference
+  /** localStorage key. Set to `null` to disable persistence. */
+  storageKey?: string | null
+}
+
+function readStoredMode(storageKey: string | null): ColorModePreference | null {
+  if (!isBrowser || !storageKey) return null
+  try {
+    const value = window.localStorage.getItem(storageKey)
+    return value === 'light' || value === 'dark' || value === 'system' ? value : null
+  } catch {
+    return null
+  }
+}
+
+function systemMode(): ColorMode {
+  return isBrowser && window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light'
+}
+
+/** Disables transitions for one frame so a mode switch doesn't animate every color. */
+function suppressTransitions(): () => void {
+  const style = document.createElement('style')
+  style.textContent = '*,*::before,*::after{transition:none!important}'
+  document.head.appendChild(style)
+  return () => {
+    window.getComputedStyle(document.body)
+    requestAnimationFrame(() => style.remove())
+  }
+}
+
+export function ColorModeProvider({
+  children,
+  defaultMode = 'system',
+  storageKey = 'glyph-mode',
+}: ColorModeOptions & { children: ReactNode }) {
+  const [mode, setModeState] = useState<ColorModePreference>(
+    () => readStoredMode(storageKey) ?? defaultMode,
+  )
+  const [system, setSystem] = useState<ColorMode>(systemMode)
+
+  useEffect(() => {
+    const query = window.matchMedia(DARK_QUERY)
+    const onChange = () => setSystem(query.matches ? 'dark' : 'light')
+    query.addEventListener('change', onChange)
+    return () => query.removeEventListener('change', onChange)
+  }, [])
+
+  const resolvedMode = mode === 'system' ? system : mode
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (root.dataset.mode === resolvedMode) return
+    const restore = suppressTransitions()
+    root.dataset.mode = resolvedMode
+    root.style.colorScheme = resolvedMode
+    restore()
+  }, [resolvedMode])
+
+  const setMode = useCallback(
+    (next: ColorModePreference) => {
+      setModeState(next)
+      if (!storageKey) return
+      try {
+        window.localStorage.setItem(storageKey, next)
+      } catch {
+        // Storage can be unavailable (private mode, blocked cookies); the mode still applies.
+      }
+    },
+    [storageKey],
+  )
+
+  const value = useMemo(() => ({ mode, resolvedMode, setMode }), [mode, resolvedMode, setMode])
+  return <ColorModeContext.Provider value={value}>{children}</ColorModeContext.Provider>
+}
+
+/** Read and change the color mode. */
+export function useColorMode(): ColorModeContextValue {
+  const value = useContext(ColorModeContext)
+  if (!value) throw new Error('useColorMode must be used inside <GlyphProvider>.')
+  return value
+}
+
+/**
+ * Inline script that sets `data-mode` on `<html>` before first paint, so a dark-mode
+ * visitor never sees a light flash. Put it in `<head>`.
+ */
+export function getColorModeScript({
+  defaultMode = 'system',
+  storageKey = 'glyph-mode',
+}: ColorModeOptions = {}): string {
+  return `(function(){try{var d=${JSON.stringify(defaultMode)},m=null;${
+    storageKey ? `m=localStorage.getItem(${JSON.stringify(storageKey)});` : ''
+  }if(m!=='light'&&m!=='dark'&&m!=='system')m=d;if(m==='system')m=matchMedia('${DARK_QUERY}').matches?'dark':'light';var r=document.documentElement;r.dataset.mode=m;r.style.colorScheme=m}catch(e){}})()`
+}
+
+/** `<script>` element version of `getColorModeScript` for SSR frameworks. */
+export function ColorModeScript(props: ColorModeOptions) {
+  return (
+    <script
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: static script built from typed options
+      dangerouslySetInnerHTML={{ __html: getColorModeScript(props) }}
+      suppressHydrationWarning
+    />
+  )
+}