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

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

@@ -1,226 +0,0 @@
-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

@@ -1,300 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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
-}