@maestro-js/components 1.0.0-alpha.2 → 1.0.0-alpha.21

package/src/components/table/table-primitives.tsx

@@ -0,0 +1,226 @@
+import { NavLink, type NavLinkProps } from 'react-router'
+import { twMerge } from 'tailwind-merge'
+import { Icon } from '../icon'
+import React from 'react'
+import { PlainCheckbox } from '../checkbox'
+import type { StandardTable } from './table-types'
+
+// --- Layout ---
+
+export function TableMain({
+  className,
+  ...props
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+  return <div className={twMerge('max-w-full h-auto', className)} {...props} />
+}
+
+export function TableBody({
+  className,
+  ...props
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+  return (
+    <div className="w-full">
+      <div
+        className={twMerge(
+          'flex flex-col flex-nowrap w-full',
+          '[&>*+*>*]:border-t [&>*+*>*]:border-gray-950/5' /** select table cells for all but the first row */,
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function TableCell({
+  className,
+  ...props
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+  return <div className={twMerge('basis-0 grow min-w-0 py-3.5 px-2', className)} {...props} />
+}
+
+// --- Row ---
+
+const TableRowContext = React.createContext<{ table: StandardTable; multiSelect?: boolean }>(null as any)
+export const TableRowContextProvider = TableRowContext.Provider
+
+interface TableRowProps {
+  row: Record<string, any>
+  children?: React.ReactNode
+  className?: string
+  hideMobileSpacer?: boolean
+  ['aria-label']?: string
+}
+
+export function TableRow({ row, children, className, hideMobileSpacer, 'aria-label': ariaLabel }: TableRowProps) {
+  const { table, multiSelect } = React.useContext(TableRowContext)
+  const selected = table.isRowSelected?.(row) ?? false
+
+  return (
+    <div
+      className={twMerge('flex flex-row w-full h-auto', selected && 'bg-gray-50', className)}
+      onClick={(e) => {
+        const isTouchableDevice = navigator.maxTouchPoints > 0
+        const isSmallScreen = !window.matchMedia('(min-width: 640px)').matches
+
+        const target = e.target as HTMLElement
+        const isInteractiveElement = target.closest('input, label, button, a')
+
+        if ((isTouchableDevice || isSmallScreen) && !isInteractiveElement) {
+          const title = e.currentTarget.querySelector('[data-row-title*="true"]')
+          const titleLink = title instanceof HTMLAnchorElement ? title : title?.querySelector('a')
+          titleLink?.click()
+        }
+      }}
+      role="row"
+      aria-label={ariaLabel}
+    >
+      {multiSelect ? (
+        <div className="relative shrink-0 hidden md:flex items-start pt-3.5 pl-4 pr-2 *:scale-90">
+          {selected ? <div className="absolute inset-y-0 left-0 w-0.5 bg-primary-600" /> : null}
+          <PlainCheckbox checked={selected} onChange={() => table.toggleRowSelection?.(row)} />
+        </div>
+      ) : null}
+      {!hideMobileSpacer ? <TableCell className={twMerge('relative grow-0 w-3', multiSelect && 'md:hidden')} /> : null}
+
+      {children}
+    </div>
+  )
+}
+
+// --- Title / Description ---
+
+export interface TableTitleProps extends React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLParagraphElement>,
+  HTMLParagraphElement
+> {}
+
+export function TableTitle({ className, ...props }: TableTitleProps) {
+  return <p {...props} data-row-title="true" className={twMerge('truncate text-sm font-medium text-blue-600', className)} />
+}
+
+export function TableTitleLink({ className, ...props }: NavLinkProps) {
+  return (
+    <NavLink
+      {...props}
+      data-row-title="true"
+      className={(b) =>
+        twMerge('truncate text-sm font-medium text-blue-600', typeof className === 'function' ? className(b) : className)
+      }
+    />
+  )
+}
+
+export interface TableDescriptionProps extends React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> {}
+
+export function TableDescription({ className, ...props }: TableDescriptionProps) {
+  return <div {...props} className={twMerge('truncate text-sm text-gray-500', className)} />
+}
+
+// --- Footer ---
+
+export interface TableFooterProps {
+  table: StandardTable
+  hideResultCount?: boolean
+}
+
+export function TableFooter({ table, hideResultCount }: TableFooterProps) {
+  const { limit, skip } = table.state.pagination
+  const rowCount = table.getRowCount()
+
+  const pageCount = Math.ceil(limit ? rowCount / limit : 1)
+  const pageNumber = limit > 0 ? Math.floor(skip / limit) : 0
+
+  const goToPage = (page: number) => {
+    table.setPagination({ limit, skip: page * (limit || 25) })
+  }
+
+  const canGoPrevious = pageNumber > 0
+  const canGoNext = pageNumber < pageCount - 1
+
+  const showingFrom = skip + 1
+  const showingTo = limit ? Math.min(skip + limit, rowCount) : rowCount
+  const pages = getPaginationRange(pageCount, pageNumber)
+
+  return (
+    <nav className="flex items-center justify-between border-t border-gray-950/5 px-4 py-2">
+      {!hideResultCount ? (
+        <p className="text-xs text-gray-400 tabular-nums">
+          {showingFrom}–{showingTo} of {rowCount}
+        </p>
+      ) : (
+        <div />
+      )}
+      {pageCount > 1 && (
+        <div className="flex items-center gap-0.5">
+          <button
+            type="button"
+            onClick={() => canGoPrevious && goToPage(pageNumber - 1)}
+            disabled={!canGoPrevious}
+            className="inline-flex items-center justify-center rounded-md p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent"
+            aria-label="Previous page"
+          >
+            <Icon name="chevron-left" className="size-3.5" />
+          </button>
+          <div className="flex items-center gap-0.5 max-sm:hidden">
+            {pages.map((page, i) => {
+              if (page === '...') {
+                return (
+                  <span key={`ellipsis-${i}`} className="px-1 text-xs text-gray-400">
+                    ...
+                  </span>
+                )
+              }
+              const isSelected = page === pageNumber
+              return (
+                <button
+                  type="button"
+                  key={page}
+                  onClick={() => goToPage(page)}
+                  className={twMerge(
+                    'inline-flex items-center justify-center size-7 rounded-full text-xs tabular-nums',
+                    isSelected
+                      ? 'bg-gray-100 text-gray-900 font-medium'
+                      : 'text-gray-400 hover:bg-gray-50 hover:text-gray-600'
+                  )}
+                >
+                  {page + 1}
+                </button>
+              )
+            })}
+          </div>
+          <span className="text-xs tabular-nums text-gray-400 sm:hidden px-1">
+            {pageNumber + 1}/{pageCount}
+          </span>
+          <button
+            type="button"
+            onClick={() => canGoNext && goToPage(pageNumber + 1)}
+            disabled={!canGoNext}
+            className="inline-flex items-center justify-center rounded-md p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent"
+            aria-label="Next page"
+          >
+            <Icon name="chevron-right" className="size-3.5" />
+          </button>
+        </div>
+      )}
+    </nav>
+  )
+}
+
+function getPaginationRange(pageCount: number, currentPage: number): (number | '...')[] {
+  const delta = 1
+  const range: (number | '...')[] = []
+
+  for (let i = 0; i < pageCount; i++) {
+    if (i === 0 || i === pageCount - 1 || (i >= currentPage - delta && i <= currentPage + delta)) {
+      range.push(i)
+    } else if (range[range.length - 1] !== '...') {
+      range.push('...')
+    }
+  }
+
+  return range
+}

package/src/components/table/table-toolbar.tsx

@@ -0,0 +1,300 @@
+import { twMerge } from 'tailwind-merge'
+import { type To, Link, useNavigate } from 'react-router'
+import { Icon } from '../icon'
+import { OptionalLink, type OptionalLinkProps } from '../optional-link'
+import { usePress } from '@react-aria/interactions'
+import React from 'react'
+import { mergeProps } from '@react-aria/utils'
+import { HeadlessButton } from '../helpers/headless-button'
+import { PlainCheckbox } from '../checkbox'
+import { Button, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components'
+import type { StandardTable } from './table-types'
+
+// --- Header ---
+
+export interface TableHeaderProps {
+  table: StandardTable
+  multiSelect?: boolean
+  multiSelectActions?: React.ReactNode
+  children: React.ReactNode
+  sticky?: boolean
+  hide?: boolean
+  action?: React.ReactNode
+}
+
+export function TableHeader({ table, multiSelect, multiSelectActions, children, sticky, hide, action }: TableHeaderProps) {
+  const rowCount = table.getRows().length
+  const selectionSize = table.state.rowSelection?.size ?? 0
+  const hasSelection = multiSelect && selectionSize > 0
+
+  if (hide) return null
+
+  return (
+    <div
+      className={twMerge(
+        'bg-gray-100 border-b border-gray-950/10 py-0.5',
+        sticky && 'sticky z-20 md:z-[2] top-0',
+        hasSelection && 'bg-primary-50 border-primary-200'
+      )}
+    >
+      <div className="flex items-center gap-2 pl-4 pr-1.5 min-h-9">
+        {action}
+        {multiSelect ? (
+          <div className="flex items-center *:scale-90">
+            <PlainCheckbox
+              checked={rowCount > 0 ? selectionSize === rowCount : false}
+              onChange={() => table.toggleAllRowSelection?.()}
+              isDisabled={rowCount === 0}
+            />
+          </div>
+        ) : null}
+        {hasSelection ? (
+          <>
+            <span className="text-sm text-primary-700 font-medium">{selectionSize} selected</span>
+            <button
+              type="button"
+              onClick={() => table.clearRowSelection?.()}
+              className="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1"
+            >
+              <Icon name="x-mark" className="size-4" />
+              <span className="max-sm:hidden">Clear</span>
+            </button>
+            <div className="grow" />
+            {multiSelectActions}
+          </>
+        ) : (
+          <>
+            <div className="grow" />
+            <div className="flex overflow-x-scroll scrollbar-hide md:overflow-x-visible h-full gap-2">{children}</div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// --- Search ---
+
+interface TableSearchProps {
+  table: StandardTable
+  actions?: React.ReactNode
+  placeholder?: string | null
+  hideActionsOnMobile?: boolean
+  hasFilters?: boolean
+  hideSearch?: boolean
+}
+
+export function TableSearch({ table, actions, placeholder, hideActionsOnMobile, hasFilters, hideSearch }: TableSearchProps) {
+  const [inputValue, setInputValue] = React.useState(table.state.search ?? '')
+
+  React.useEffect(() => {
+    setInputValue(table.state.search ?? '')
+  }, [table.state.search])
+
+  const commitSearch = React.useCallback(
+    (value: string) => {
+      table.setSearch(value)
+    },
+    [table]
+  )
+
+  const clearAll = () => {
+    table.setSearch('')
+  }
+
+  return (
+    <div className="w-full mb-3">
+      <div
+        className={twMerge(
+          'flex',
+          hideActionsOnMobile ? 'md:flex-row-reverse md:gap-x-2 flex-wrap' : 'flex-row-reverse gap-x-2'
+        )}
+      >
+        <div className={twMerge(hideActionsOnMobile && 'basis-full md:basis-auto')}>{actions}</div>
+        {hideSearch ? null : (
+          <form
+            className="flex grow"
+            onSubmit={(e) => {
+              e.preventDefault()
+              commitSearch(inputValue)
+            }}
+          >
+            <div className="grow relative max-w-2xl" role="search">
+              <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                <Icon name="magnifying-glass" className="size-4 text-gray-400" aria-hidden="true" />
+              </div>
+              <input
+                className={twMerge(
+                  'w-full max-w-2xl pl-9 rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-black/10 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 text-sm/6 max-sm:text-base/6',
+                  hasFilters ? 'pr-8' : 'pr-3'
+                )}
+                enterKeyHint="search"
+                placeholder={placeholder || undefined}
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+              />
+              {table.state.search ? (
+                <button
+                  type="button"
+                  onClick={clearAll}
+                  className="absolute inset-y-0 right-0 flex items-center pr-2.5"
+                  aria-label="Clear search"
+                >
+                  <Icon name="x-mark" className="size-4 text-gray-400 hover:text-gray-600" />
+                </button>
+              ) : null}
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// --- Actions ---
+
+export type NavigationAction = { label: string; to: To; replace?: boolean; preventScrollReset?: boolean; disabled?: boolean }
+export type ButtonAction = { label: string; onClick: () => void; disabled?: boolean }
+export type ActionParams = NavigationAction | ButtonAction
+
+export type TableActionProps = {
+  actions: (ActionParams | null | undefined)[] | null | undefined
+  maxVisibleActions?: number
+  compact?: boolean
+}
+
+function isNavigationAction(action: ActionParams): action is NavigationAction {
+  return 'to' in action
+}
+
+export function TableActions({ actions: rawActions, maxVisibleActions = 4, compact }: TableActionProps) {
+  const navigate = useNavigate()
+  const actions = (rawActions?.filter(Boolean) || []) as ActionParams[]
+
+  // If we have more actions than the max, always use dropdown on desktop too
+  const useDropdownOnDesktop = actions.length > maxVisibleActions
+
+  const dropdownTriggerClassName = compact
+    ? 'inline-flex items-center rounded px-2 py-0.5 text-sm font-medium text-primary-700 hover:text-primary-900 hover:bg-primary-100 truncate'
+    : twMerge(
+        'inline-flex items-center rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900',
+        'shadow-sm ring-1 ring-black/10',
+        'disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white',
+        'hover:bg-gray-50 truncate'
+      )
+
+  return (
+    <>
+      <div className={useDropdownOnDesktop ? '' : 'xl:hidden'}>
+        {actions.length ? (
+          <MenuTrigger>
+            <Button className={dropdownTriggerClassName}>
+              Actions
+              <Icon name="chevron-down" className="h-5 w-5" />
+            </Button>
+            <Popover offset={4} className="w-48 rounded-md shadow-lg ring-1 ring-black/10 bg-white z-20">
+              <Menu className="outline-none py-1">
+                {actions.map((a) => (
+                  <MenuItem
+                    key={a.label}
+                    isDisabled={a.disabled}
+                    onAction={() => {
+                      if (isNavigationAction(a)) {
+                        navigate(a.to, { replace: a.replace, preventScrollReset: a.preventScrollReset })
+                      } else {
+                        a.onClick()
+                      }
+                    }}
+                    className={({ isFocused }) =>
+                      twMerge(
+                        'text-sm px-4 py-2 cursor-pointer outline-none',
+                        isFocused ? 'text-white bg-primary-500' : 'text-gray-900',
+                        a.disabled && 'opacity-50 cursor-not-allowed'
+                      )
+                    }
+                  >
+                    {a.label}
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Popover>
+          </MenuTrigger>
+        ) : null}
+      </div>
+      {!useDropdownOnDesktop ? (
+        <div className="gap-x-2 hidden xl:flex">
+          {actions.map((a) =>
+            isNavigationAction(a) ? (
+              <ActionLink
+                to={a.to}
+                replace={a.replace}
+                key={a.label}
+                preventScrollReset={a.preventScrollReset}
+                disabled={a.disabled}
+                compact={compact}
+              >
+                {a.label}
+              </ActionLink>
+            ) : (
+              <ActionButton key={a.label} onClick={a.onClick} disabled={a.disabled} compact={compact}>
+                {a.label}
+              </ActionButton>
+            )
+          )}
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+function ActionLink(props: OptionalLinkProps & { compact?: boolean }) {
+  const ref = React.useRef<HTMLAnchorElement>(null)
+  const { isPressed, pressProps } = usePress({
+    ref
+  })
+  const { compact, ...linkProps } = props
+  return (
+    <OptionalLink
+      {...mergeProps(pressProps, linkProps)}
+      ref={ref}
+      className={twMerge(
+        props.className,
+        props.disabled && 'cursor-not-allowed opacity-30',
+        compact
+          ? 'inline-flex items-center rounded px-2 py-0.5 text-sm font-medium text-primary-700 hover:text-primary-900 hover:bg-primary-100 truncate'
+          : twMerge(
+              'inline-flex items-center rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900',
+              'shadow-sm ring-1 ring-black/10',
+              'hover:bg-gray-50 truncate'
+            ),
+        isPressed && 'scale-[.98]'
+      )}
+    >
+      {props.children}
+    </OptionalLink>
+  )
+}
+
+type ActionButtonProps = React.ComponentProps<typeof HeadlessButton> & { compact?: boolean }
+
+function ActionButton(props: ActionButtonProps) {
+  const { className, compact, ...restProps } = props
+  return (
+    <HeadlessButton
+      {...restProps}
+      className={twMerge(
+        typeof className === 'function' ? className({ isPressed: false }) : className,
+        props.disabled && 'cursor-not-allowed opacity-30',
+        compact
+          ? 'inline-flex items-center rounded px-2 py-0.5 text-sm font-medium text-primary-700 hover:text-primary-900 hover:bg-primary-100 truncate'
+          : twMerge(
+              'inline-flex items-center rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900',
+              'shadow-sm ring-1 ring-black/10',
+              'hover:bg-gray-50 truncate data-[pressed=true]:scale-[.98]'
+            )
+      )}
+    >
+      {props.children}
+    </HeadlessButton>
+  )
+}

package/src/components/table/table-types.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+import type { Iso } from 'iso-fns'
+import type { DateRangeRootAdditionalProps } from '../date-range'
+
+type PaginationState = { limit: number; skip: number }
+type SetterOrUpdater<T> = T | ((prev: T) => T)
+
+export type StandardTable<
+  FC extends Record<string, any> = Record<string, any>,
+  SC extends Record<string, any> = Record<string, any>
+> = {
+  getRows(): Record<string, any>[]
+  getRowCount(): number
+  getFilterConfig(): FC
+  getSortConfig(): { [K in keyof SC]: null }
+  state: {
+    filters: { [K in keyof FC]: FC[K] | null | undefined }
+    sort: (keyof SC & string) | null
+    search: string
+    pagination: PaginationState
+    rowSelection?: Set<string>
+  }
+  setFilters(val: SetterOrUpdater<{ [K in keyof FC]: FC[K] | null | undefined }>): void
+  setSort(val: any): void
+  setSearch(val: SetterOrUpdater<string>): void
+  setPagination(val: SetterOrUpdater<PaginationState>): void
+  toggleAllRowSelection?(): void
+  toggleRowSelection?(row: Record<string, any>): void
+  isRowSelected?(row: Record<string, any>): boolean
+  clearRowSelection?(): void
+}
+
+type DefaultTableFilter<V = any> = {
+  label: string
+  type?: never
+  options: { label: string; value: V; className?: string; icon?: ReactNode }[]
+  autoComplete?: boolean
+}
+
+type DateRangeTableFilter = {
+  label: string
+  type: 'date-range'
+  options?: Pick<DateRangeRootAdditionalProps, 'shouldDisableDate' | 'shouldDisableEndDate' | 'shouldDisableStartDate'> & {
+    quickPresets?: { label: string; value: { startDate: Iso.Date; endDate: Iso.Date } }[]
+  }
+}
+
+export type TableFilterLocalization<V = any> = 0 extends 1 & V
+  ? DefaultTableFilter | DateRangeTableFilter
+  : [V] extends [{ startDate: Iso.Date; endDate: Iso.Date }]
+    ? DateRangeTableFilter
+    : DefaultTableFilter<V>
+
+export type TableLocalization<
+  FC extends Record<string, any> = Record<string, any>,
+  SC extends Record<string, any> = Record<string, any>
+> = {
+  filters: { [K in keyof FC]: TableFilterLocalization<FC[K]> }
+  sorts: { [key in keyof SC]: { label: string } }
+  searchPlaceholder?: string
+}