@maestro-js/components 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/components/table/table-filters/date-range-filter.tsx

@@ -0,0 +1,227 @@
+import { twMerge } from 'tailwind-merge'
+import React from 'react'
+import { dateFns, type Iso } from 'iso-fns'
+import { Button } from '../../button'
+import type { StandardTable } from '../table-types'
+import { Button as AriaButton, Dialog, DialogTrigger, Popover } from 'react-aria-components'
+import { Icon } from '../../icon'
+import { DateRangePicker, type DateRangeRootAdditionalProps } from '../../date-range'
+
+export function TableDateRangeFilter({
+  table,
+  label,
+  value,
+  name,
+  options
+}: {
+  table: StandardTable
+  label: string
+  name: string
+  value: null | { startDate: Iso.Date; endDate: Iso.Date }
+  options?: Partial<
+    Pick<DateRangeRootAdditionalProps, 'shouldDisableDate' | 'shouldDisableEndDate' | 'shouldDisableStartDate'>
+  > & {
+    quickPresets?: { label: string; value: { startDate: Iso.Date; endDate: Iso.Date } }[]
+  }
+}) {
+  const [startDate, endDate] = value ? [value.startDate, value.endDate] : [null, null]
+
+  return (
+    <DialogTrigger>
+      <AriaButton
+        className={twMerge(
+          'text-sm px-2 h-full flex text-gray-500 focus:outline-none whitespace-pre',
+          'rounded-full border data-[pressed]:scale-[.98]',
+          'md:my-3',
+          value ? 'text-primary-400 font-semibold' : ''
+        )}
+      >
+        {label} {startDate && endDate ? getTableDateRangeFilterValue({ startDate, endDate }, options?.quickPresets) : ''}
+        <Icon name="chevron-down" className="ml-1 h-5 w-5" />
+      </AriaButton>
+      <Popover offset={4} className="z-20 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 bg-white">
+        <Dialog className="outline-none">
+          {({ close }) => (
+            <TableDateRangeFilterInner
+              table={table}
+              filterName={name}
+              closePopover={close}
+              defaultStart={startDate}
+              defaultEnd={endDate}
+              shouldDisableDate={options?.shouldDisableDate ?? (() => false)}
+              shouldDisableEndDate={options?.shouldDisableEndDate ?? (() => false)}
+              shouldDisableStartDate={options?.shouldDisableStartDate ?? (() => false)}
+              quickPresets={options?.quickPresets}
+            />
+          )}
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  )
+}
+
+function TableDateRangeFilterInner({
+  table,
+  filterName,
+  closePopover,
+  defaultStart,
+  defaultEnd,
+  shouldDisableDate,
+  shouldDisableEndDate,
+  shouldDisableStartDate,
+  quickPresets
+}: {
+  table: StandardTable
+  filterName: string
+  closePopover(): void
+  quickPresets?: { label: string; value: { startDate: Iso.Date; endDate: Iso.Date } }[]
+} & DateRangeRootAdditionalProps) {
+  const [start, setStart] = React.useState<DateRangeRootAdditionalProps['defaultStart']>(defaultStart)
+  const [end, setEnd] = React.useState<DateRangeRootAdditionalProps['defaultEnd']>(defaultEnd)
+  const [currentField, setCurrentField] = React.useState<'start' | 'end' | null>(null)
+
+  const isPresetAvailable = !!quickPresets?.length
+
+  const applyFilter = (dateRange: { startDate: Iso.Date; endDate: Iso.Date }) => {
+    table.setFilters((prev: Record<string, any>) => ({ ...prev, [filterName]: dateRange }))
+  }
+
+  const onQuickPresetClick = (presetValue: { startDate: Iso.Date; endDate: Iso.Date }) => {
+    setCurrentField(null)
+    closePopover()
+    applyFilter(presetValue)
+  }
+
+  // Note: DateRangePicker and its useDateRangePicker hook need to be adapted
+  // from headless-primitives. For now we pass through the same shape.
+  const pickerControls = {
+    start: start ?? null,
+    end: end ?? null,
+    onStartChange(v: Iso.Date | null, f: 'start' | 'end' | null) {
+      setStart(v)
+      setCurrentField(f)
+    },
+    onEndChange(v: Iso.Date | null, f: 'start' | 'end' | null) {
+      setEnd(v)
+      setCurrentField(f)
+    },
+    currentField,
+    shouldDisableDate,
+    shouldDisableEndDate,
+    shouldDisableStartDate
+  }
+
+  return (
+    <div className="flex bg-white overflow-auto rounded-md text-base sm:text-sm">
+      {isPresetAvailable ? (
+        <QuickPresetPanel
+          start={start}
+          end={end}
+          containerClassName="border-solid border-r border-gray-200 py-2 overflow-y-auto sm:min-w-[200px] hidden sm:block"
+          className={twMerge('px-4 py-2 w-full text-left')}
+          quickPresets={quickPresets}
+          onQuickPresetClick={onQuickPresetClick}
+        />
+      ) : null}
+      <div>
+        <div className="px-3 py-3">
+          <DateRangePicker {...pickerControls} />
+        </div>
+        {isPresetAvailable ? (
+          <QuickPresetPanel
+            start={start}
+            end={end}
+            containerClassName="border-solid border-y border-gray-200 p-2 flex gap-1 flex-wrap sm:hidden"
+            className={twMerge('px-3 py-1 rounded-full border')}
+            quickPresets={quickPresets}
+            onQuickPresetClick={onQuickPresetClick}
+          />
+        ) : null}
+        <div className="p-2 float-right flex gap-2">
+          <Button variant="soft" onClick={closePopover}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              closePopover()
+              if (start && end && start <= end) {
+                applyFilter({ startDate: start as Iso.Date, endDate: end as Iso.Date })
+              }
+            }}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function QuickPresetPanel({
+  start,
+  end,
+  quickPresets,
+  onQuickPresetClick,
+  className,
+  containerClassName
+}: {
+  start?: string | null
+  end?: string | null
+  quickPresets: { label: string; value: { startDate: Iso.Date; endDate: Iso.Date } }[]
+  onQuickPresetClick: (value: { startDate: Iso.Date; endDate: Iso.Date }) => void
+  className?: string
+  containerClassName?: string
+}) {
+  return (
+    <div className={containerClassName}>
+      {quickPresets.map(({ label, value }) => {
+        const [presetStartDate, presetEndDate] = [value.startDate, value.endDate]
+        return (
+          <button
+            key={label}
+            className={twMerge(
+              'text-sm cursor-pointer',
+              className,
+              'text-gray-900 bg-white text-nowrap',
+              'hover:text-white hover:bg-primary-500',
+              'focus:text-white focus:bg-primary-500',
+              presetStartDate === start && presetEndDate === end && 'bg-primary-500 text-white'
+            )}
+            onClick={() => onQuickPresetClick(value)}
+          >
+            {label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function getTableDateRangeFilterValue(
+  value: { startDate: Iso.Date; endDate: Iso.Date },
+  quickPreset?: { label: string; value: { startDate: Iso.Date; endDate: Iso.Date } }[]
+) {
+  if (quickPreset) {
+    const preset = quickPreset.find((p) => p.value.startDate === value.startDate && p.value.endDate === value.endDate)
+    if (preset) {
+      return preset.label
+    }
+  }
+  if (dateFns.getYear(value.startDate) !== dateFns.getYear(value.endDate)) {
+    return getFormattedDateRange(value, 'MMM dd yyyy')
+  }
+  if (
+    dateFns.getYear(value.startDate) === dateFns.getYear(dateFns.now()) &&
+    dateFns.getYear(value.endDate) === dateFns.getYear(dateFns.now())
+  ) {
+    return getFormattedDateRange(value, 'MMM dd')
+  }
+  return getFormattedDateRange(value, 'MMM dd yyyy')
+}
+
+function getFormattedDateRange(value: { startDate: Iso.Date; endDate: Iso.Date }, format: string) {
+  if (value.startDate === value.endDate) {
+    return dateFns.format(value.startDate, format)
+  }
+  return `${dateFns.format(value.startDate, format)} - ${dateFns.format(value.endDate, format)}`
+}

package/src/components/table/table-filters/select-filter.tsx

@@ -0,0 +1,211 @@
+import { twMerge } from 'tailwind-merge'
+import { Icon } from '../../icon'
+import type { ReactNode } from 'react'
+import type { StandardTable } from '../table-types'
+import { Button, ComboBox, Input, ListBox, ListBoxItem, Popover, Select } from 'react-aria-components'
+import React from 'react'
+
+interface TableSelectFilterProps {
+  table: StandardTable
+  label: string
+  name: string
+  options: { label: string; value: any; className?: string; icon?: ReactNode }[]
+  value: any
+  autoComplete?: boolean
+}
+
+export function TableSelectFilter({ table, label, name, options, value, autoComplete }: TableSelectFilterProps) {
+  const setFilter = (newValue: any) => {
+    const toggledValue = newValue === value ? null : newValue
+    table.setFilters((prev: Record<string, any>) => ({ ...prev, [name]: toggledValue }))
+  }
+
+  if (autoComplete) {
+    return <AutoCompleteFilter label={label} options={options} value={value} onSelect={setFilter} />
+  }
+
+  return <DropdownFilter label={label} options={options} value={value} onSelect={setFilter} />
+}
+
+function DropdownFilter({
+  label,
+  options,
+  value,
+  onSelect
+}: {
+  label: string
+  options: TableSelectFilterProps['options']
+  value: any
+  onSelect: (value: any) => void
+}) {
+  return (
+    <Select
+      aria-label={label}
+      selectedKey={value != null ? String(value) : null}
+      onSelectionChange={(key) => {
+        if (key === '__clear__') return onSelect(null)
+        const option = options.find((o) => String(o.value) === String(key))
+        onSelect(option?.value ?? null)
+      }}
+    >
+      <Button
+        className={twMerge(
+          'text-sm px-2 h-full flex text-gray-500 focus:outline-none whitespace-pre',
+          'rounded-full ring-1 ring-black/10 data-[pressed]:scale-[.98]',
+          'my-1',
+          value != null ? 'text-blue-600 font-medium' : ''
+        )}
+      >
+        {label}
+        <Icon name="chevron-down" className="ml-1 h-5 w-5" />
+      </Button>
+      <Popover offset={4} className="w-56 rounded-md shadow-lg ring-1 ring-black/10 bg-white z-20">
+        <ListBox className="outline-none max-h-60 overflow-y-auto py-1">
+          {value != null && (
+            <ListBoxItem
+              id="__clear__"
+              textValue="Clear"
+              className={({ isFocused }) =>
+                twMerge(
+                  'text-sm px-4 py-2 cursor-pointer outline-none border-b border-gray-100',
+                  isFocused ? 'text-white bg-primary-500' : 'text-gray-500'
+                )
+              }
+            >
+              Clear filter
+            </ListBoxItem>
+          )}
+          {options.map((o) => (
+            <FilterOption key={o.label} option={o} selected={value === o.value} />
+          ))}
+        </ListBox>
+      </Popover>
+    </Select>
+  )
+}
+
+export function FilterOption({
+  option,
+  selected
+}: {
+  option: { label: string; value: any; className?: string; icon?: ReactNode }
+  selected: boolean
+}) {
+  return (
+    <ListBoxItem
+      id={String(option.value)}
+      textValue={option.label}
+      className={({ isFocused }) =>
+        twMerge(
+          'group items-center text-sm px-4 py-2 relative flex justify-between w-full cursor-pointer outline-none',
+          isFocused ? 'text-white bg-primary-500' : 'text-gray-900',
+          option.className
+        )
+      }
+    >
+      {({ isFocused }) => (
+        <>
+          <div
+            className={twMerge(
+              selected ? 'font-semibold' : 'font-normal',
+              option.icon ? 'flex gap-1 items-center' : 'block'
+            )}
+          >
+            {option.icon}
+            {option.label}
+          </div>
+          {selected ? (
+            <div className={twMerge(isFocused ? 'text-white' : 'text-primary-500', 'flex items-center')}>
+              <Icon name="check" className="h-5 w-5" aria-hidden="true" />
+            </div>
+          ) : null}
+        </>
+      )}
+    </ListBoxItem>
+  )
+}
+
+interface AutoCompleteFilterProps {
+  label: string
+  options: { label: string; value: any; className?: string; icon?: ReactNode }[]
+  value: any
+  onSelect: (value: any) => void
+}
+
+function AutoCompleteFilter({ label, options, value, onSelect }: AutoCompleteFilterProps) {
+  const [query, setQuery] = React.useState('')
+
+  const filteredOptions =
+    query === ''
+      ? options
+      : options.filter((o) => {
+          const q = query.toLowerCase()
+          return o.label.toLowerCase().includes(q) || String(o.value).toLowerCase().includes(q)
+        })
+
+  return (
+    <ComboBox
+      aria-label={label}
+      inputValue={query}
+      onInputChange={setQuery}
+      selectedKey={value != null ? String(value) : null}
+      onSelectionChange={(key) => {
+        if (key === null) return
+        if (key === '__clear__') {
+          onSelect(null)
+          setQuery('')
+          return
+        }
+        const option = options.find((o) => String(o.value) === String(key))
+        onSelect(option?.value ?? null)
+        setQuery('')
+      }}
+      menuTrigger="focus"
+    >
+      <div className="relative inline-block text-left">
+        <Button
+          className={twMerge(
+            'text-sm px-2 h-full flex text-gray-500 focus:outline-none whitespace-pre',
+            'rounded-full ring-1 ring-black/10 data-[pressed]:scale-[.98]',
+            'my-1',
+            value != null ? 'text-blue-600 font-medium' : ''
+          )}
+        >
+          {label}
+          <Icon name="chevron-down" className="ml-1 h-5 w-5" />
+        </Button>
+      </div>
+      <Popover offset={4} className="w-56 rounded-md shadow-lg ring-1 ring-black/10 bg-white z-20">
+        <div className="flex p-2">
+          <Input
+            className={twMerge(
+              'text-sm block rounded-md focus:ring-0 border-0 focus:outline-none px-0 py-0 w-0 grow min-w-[30px]',
+              'py-1 px-1'
+            )}
+            placeholder="Filter..."
+            autoFocus
+          />
+        </div>
+        <ListBox className="outline-none max-h-60 overflow-y-auto py-1">
+          {value != null && (
+            <ListBoxItem
+              id="__clear__"
+              textValue="Clear"
+              className={({ isFocused }) =>
+                twMerge(
+                  'text-sm px-4 py-2 cursor-pointer outline-none border-b border-gray-100',
+                  isFocused ? 'text-white bg-primary-500' : 'text-gray-500'
+                )
+              }
+            >
+              Clear filter
+            </ListBoxItem>
+          )}
+          {filteredOptions.map((o) => (
+            <FilterOption key={o.label} option={o} selected={value === o.value} />
+          ))}
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  )
+}

package/src/components/table/table-filters/sort.tsx

@@ -0,0 +1,85 @@
+import { twMerge } from 'tailwind-merge'
+import { Icon } from '../../icon'
+import React from 'react'
+import type { StandardTable } from '../table-types'
+import { Button, ListBox, ListBoxItem, Popover, Select } from 'react-aria-components'
+
+export interface TableSelectSortProps {
+  table: StandardTable
+  value: string | null
+  options: { value: string; label: string }[]
+  search: string | null
+}
+
+export function TableSelectSort({ table, value, options, search }: TableSelectSortProps) {
+  const optionsWithRelevant = React.useMemo(() => {
+    return search ? [{ label: 'Most Relevant', value: 'mostRelevant' }, ...options] : options
+  }, [options, search])
+
+  return (
+    <Select
+      aria-label="Sort"
+      selectedKey={value ?? null}
+      onSelectionChange={(key) => {
+        table.setSort(key === '__clear__' ? null : key ? String(key) : null)
+      }}
+    >
+      <Button
+        className={twMerge(
+          'text-sm px-2 h-full flex text-gray-500',
+          'rounded-full ring-1 ring-black/10 data-[pressed]:scale-[.98]',
+          'my-1'
+        )}
+      >
+        Sort
+        <Icon name="chevron-down" className="ml-1 h-5 w-5" />
+      </Button>
+      <Popover offset={4} className="w-56 rounded-md shadow-lg ring-1 ring-black/10 bg-white z-20">
+        <ListBox className="outline-none max-h-60 overflow-y-auto py-1">
+          {value != null && (
+            <ListBoxItem
+              key="__clear__"
+              id="__clear__"
+              textValue="Clear"
+              className={({ isFocused }) =>
+                twMerge(
+                  'text-sm px-4 py-2 cursor-pointer outline-none border-b border-gray-100',
+                  isFocused ? 'text-white bg-primary-500' : 'text-gray-500'
+                )
+              }
+            >
+              Clear sort
+            </ListBoxItem>
+          )}
+          {optionsWithRelevant.map((o) => {
+            const selected = value === o.value
+            return (
+              <ListBoxItem
+                key={o.value}
+                id={o.value}
+                textValue={o.label}
+                className={({ isFocused }) =>
+                  twMerge(
+                    'group items-center text-sm px-4 py-2 relative flex justify-between w-full cursor-pointer outline-none',
+                    isFocused ? 'text-white bg-primary-500' : 'text-gray-900'
+                  )
+                }
+              >
+                {({ isFocused }) => (
+                  <>
+                    <span className={twMerge(selected ? 'font-semibold' : 'font-normal', 'block')}>{o.label}</span>
+                    {selected ? (
+                      <span className={twMerge(isFocused ? 'text-white' : 'text-primary-500', 'flex items-center')}>
+                        <Icon name="check" className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </ListBoxItem>
+            )
+          })}
+        </ListBox>
+      </Popover>
+    </Select>
+  )
+}