@liguelead/design-system 0.0.30 → 0.0.32

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.styles.ts

@@ -0,0 +1,120 @@
+import styled from 'styled-components'
+import { spacing, fontSize, fontWeight, radius } from '@liguelead/foundation'
+import { parseColor } from "../../../../utils";
+import { FunnelSimpleIcon, FunnelSimpleXIcon } from '@phosphor-icons/react'
+import IconButton from '../../../IconButton'
+
+export const FunnelInactiveIcon = styled(FunnelSimpleIcon)`
+  fill: ${({ theme }) => parseColor(theme.colors.neutral700)};
+`
+
+export const FunnelActiveIcon = styled(FunnelSimpleXIcon)`
+  fill: ${({ theme }) => parseColor(theme.colors.primary)};
+`
+
+export const FilterTriggerArea = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: ${spacing.spacing8}px;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  flex: 1;
+  text-align: left;
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => parseColor(theme.colors.primary)};
+    outline-offset: 1px;
+  }
+`
+
+export const FilterIconWrapper = styled.span<{ $active?: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+`
+
+export const FilterButton = styled(IconButton)<{ $active?: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.15s ease;
+
+  & svg {
+    width: 14px !important;
+    heigth: 14px !important;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => parseColor(theme.colors.primary)};
+    outline-offset: 1px;
+  }
+`
+
+export const ClearFilterButton = styled(IconButton)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 12px !important;
+  heigth: 12px !important;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  & svg {
+    width: 12px !important;
+    heigth: 12px !important;
+  }
+`
+
+export const FilterPopoverContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.spacing8}px;
+  min-width: 240px;
+  max-width: 320px;
+  background: ${({ theme }) => parseColor(theme.colors.white)};
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+  border-radius: ${radius.radius4}px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  padding: ${spacing.spacing12}px;
+`
+
+export const FilterPopoverLabel = styled.span`
+  font-size: ${fontSize.fontSize12}px;
+  font-weight: ${fontWeight.fontWeight600};
+  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+`
+
+export const StyledTextInput = styled.input`
+  width: 100%;
+  height: 36px;
+  padding: 0 ${spacing.spacing12}px;
+  font-size: ${fontSize.fontSize14}px;
+  color: ${({ theme }) => parseColor(theme.colors.textDark)};
+  background: ${({ theme }) => parseColor(theme.colors.white)};
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral300)};
+  border-radius: ${radius.radius4}px;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+
+  &::placeholder {
+    color: ${({ theme }) => parseColor(theme.colors.textLight)};
+  }
+
+  &:focus {
+    border-color: ${({ theme }) => parseColor(theme.colors.primary)};
+  }
+`
+
+export const ClearFilterButtonWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: end;
+`

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.tsx

@@ -0,0 +1,228 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { XIcon } from '@phosphor-icons/react'
+import { DateRange } from 'react-day-picker'
+import DatePicker from '../../../DatePicker'
+import Select from '../../../Select'
+import {
+  ColumnFilterValue,
+  DatatableColumnMeta,
+  DatatableFilterDropdownLabels,
+} from '../../Table.types'
+
+import { SortIconWrapper, ThContent } from '../../Table.styles'
+import {
+  ClearFilterButton,
+  ClearFilterButtonWrapper,
+  FilterIconWrapper,
+  FilterPopoverContent,
+  FilterPopoverLabel,
+  FilterTriggerArea,
+  FunnelActiveIcon,
+  FunnelInactiveIcon,
+  StyledTextInput,
+} from './DatatableColumnFilterMenu.styles'
+
+interface DatatableColumnFilterMenuProps {
+  columnId: string
+  title: React.ReactNode
+  meta?: DatatableColumnMeta
+  open: boolean
+  onOpenChange: (isOpen: boolean) => void
+  filterValue: ColumnFilterValue | undefined
+  onFilterValueChange: (columnId: string, value: ColumnFilterValue | undefined) => void
+  onClearFilter: (columnId: string) => void
+  labels?: DatatableFilterDropdownLabels
+}
+
+const SELECT_PLACEHOLDER_VALUE = '__placeholder__'
+
+function DatatableColumnFilterMenu({
+  columnId,
+  title,
+  meta,
+  open,
+  onOpenChange,
+  filterValue,
+  onFilterValueChange,
+  onClearFilter,
+  labels = {},
+}: DatatableColumnFilterMenuProps) {
+  const filterType = meta?.filterType
+  const filterLabel = meta?.filterLabel ?? String(title)
+  const filterPlaceholder = meta?.filterPlaceholder ?? 'Pesquisar...'
+  const selectOptions = [
+    { label: filterPlaceholder, value: SELECT_PLACEHOLDER_VALUE },
+    ...(meta?.selectOptions ?? []).map((o) => ({
+      label: o.label,
+      value: String(o.value),
+    })),
+  ]
+
+  const hasActiveFilter =
+    filterValue !== undefined &&
+    ((filterValue.type === 'text' && filterValue.value !== '') ||
+      (filterValue.type === 'select' && filterValue.value != null) ||
+      (filterValue.type === 'dateRange' &&
+        (filterValue.value.from != null || filterValue.value.to != null)))
+
+  const handleTriggerClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+  }
+
+  const handleClearClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onClearFilter(columnId)
+  }
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onFilterValueChange(columnId, { type: 'text', value: e.target.value })
+  }
+
+  const handleTextKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      onOpenChange(false)
+    }
+  }
+
+  const handleRangeChange = (range: DateRange | undefined) => {
+    onFilterValueChange(columnId, {
+      type: 'dateRange',
+      value: range ? { from: range.from, to: range.to } : {},
+    })
+  }
+
+  const handleSelectChange = (value: string) => {
+    if (!value || value === SELECT_PLACEHOLDER_VALUE) {
+      onFilterValueChange(columnId, undefined)
+    } else {
+      onFilterValueChange(columnId, { type: 'select', value })
+    }
+    onOpenChange(false)
+  }
+
+  const rangeValue: DateRange | undefined =
+    filterValue?.type === 'dateRange'
+      ? { from: filterValue.value.from, to: filterValue.value.to }
+      : undefined
+
+  const textValue = filterValue?.type === 'text' ? filterValue.value : ''
+  const selectValue =
+    filterValue?.type === 'select' && filterValue.value != null
+      ? String(filterValue.value)
+      : SELECT_PLACEHOLDER_VALUE
+
+  if (!filterType) {
+    return (
+      <ThContent>
+        {title}
+      </ThContent>
+    )
+  }
+
+  return (
+    <PopoverPrimitive.Root
+      open={open}
+      onOpenChange={(isOpen) => {
+        onOpenChange(isOpen)
+      }}
+    >
+      <ThContent $filterable>
+        <PopoverPrimitive.Trigger asChild>
+          <FilterTriggerArea
+            aria-label={labels.filterButtonAriaLabel ?? `Abrir filtro da coluna ${filterLabel}`}
+            aria-pressed={hasActiveFilter}
+            aria-expanded={open}
+            onClick={handleTriggerClick}
+          >
+            {title}
+            <SortIconWrapper aria-hidden="true">
+              <FilterIconWrapper>
+                {hasActiveFilter
+                  ? <FunnelActiveIcon size={14} />
+                  : <FunnelInactiveIcon size={14} />
+                }
+              </FilterIconWrapper>
+            </SortIconWrapper>
+          </FilterTriggerArea>
+        </PopoverPrimitive.Trigger>
+
+        {hasActiveFilter && (
+          <ClearFilterButtonWrapper>
+            <ClearFilterButton
+              type="button"
+              variant='neutralGhost'
+              aria-label={`Limpar filtro da coluna ${filterLabel}`}
+              onClick={handleClearClick}
+            >
+              <XIcon size={12} weight="bold" />
+            </ClearFilterButton>
+          </ClearFilterButtonWrapper>
+        )}
+      </ThContent>
+
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="bottom"
+          align="start"
+          sideOffset={10}
+          alignOffset={-5}
+          style={{ zIndex: 200 }}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            const target = e.target as HTMLElement
+            if (target.closest('[data-radix-popper-content-wrapper]')) {
+              e.preventDefault()
+            }
+          }}
+        >
+          <FilterPopoverContent>
+            <FilterPopoverLabel>Filtrar por {filterLabel}</FilterPopoverLabel>
+
+            {filterType === 'text' && (
+              <StyledTextInput
+                type="text"
+                value={textValue}
+                onChange={handleTextChange}
+                onKeyDown={handleTextKeyDown}
+                placeholder={filterPlaceholder}
+                aria-label={`Filtrar por ${filterLabel}`}
+                autoFocus
+              />
+            )}
+
+            {filterType === 'dateRange' && (
+              <DatePicker
+                mode="range"
+                label=""
+                rangeValue={rangeValue}
+                onRangeChange={handleRangeChange}
+                size="sm"
+                icon
+              />
+            )}
+
+            {filterType === 'select' && (
+              <Select
+                key={`select-${columnId}-${selectValue}`}
+                label=""
+                options={selectOptions}
+                defaultValue={selectValue}
+                size="sm"
+                register={{
+                  name: `datatable-select-${columnId}`,
+                  ref: () => { },
+                  onBlur: async () => { },
+                  onChange: async (e: { target: { value: string } }) => {
+                    handleSelectChange(e.target.value)
+                  },
+                }}
+              />
+            )}
+          </FilterPopoverContent>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}
+
+export default DatatableColumnFilterMenu

package/components/Table/components/DatatableColumnFilterMenu/index.ts

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

package/components/Table/components/DatatableTopBar/DatatableTopBar.styles.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+import { spacing } from '@liguelead/foundation'
+
+export const TopBarWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${spacing.spacing8}px;
+  margin-bottom: ${spacing.spacing16}px;
+`
+
+export const TopBarLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.spacing8}px;
+  flex: 1;
+  min-width: 0;
+`
+
+export const TopBarRight = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.spacing8}px;
+  flex-shrink: 0;
+`

package/components/Table/components/DatatableTopBar/DatatableTopBar.tsx

@@ -0,0 +1,89 @@
+import { Table } from '@tanstack/react-table'
+import { DownloadSimpleIcon, FunnelSimpleXIcon } from '@phosphor-icons/react'
+import Button from '../../../Button'
+import { ExportButtonConfig } from '../../Table.types'
+import { ColumnVisibility } from '../index'
+import SearchInput from '../SearchInput/SearchInput'
+import { TopBarLeft, TopBarRight, TopBarWrapper } from './DatatableTopBar.styles'
+
+interface DatatableTopBarProps<TData> {
+  table: Table<TData>
+  globalFilter: string
+  setGlobalFilter: (v: string) => void
+  enableGlobalSearch: boolean
+  enableColumnVisibility: boolean
+  enableClearFilters: boolean
+  hasActiveFilters: boolean
+  onClearAll: () => void
+  searchPlaceholder?: string
+  searchWidth?: string
+  clearFiltersLabel?: string
+  showExportButton?: boolean
+  onExport?: () => void
+  exportButton?: ExportButtonConfig
+}
+
+function DatatableTopBar<TData>({
+  table,
+  globalFilter,
+  setGlobalFilter,
+  enableGlobalSearch,
+  enableColumnVisibility,
+  enableClearFilters,
+  hasActiveFilters,
+  onClearAll,
+  searchPlaceholder = 'Pesquisar',
+  searchWidth = '320px',
+  clearFiltersLabel = 'Limpar filtros',
+  showExportButton = false,
+  onExport,
+  exportButton = {},
+}: DatatableTopBarProps<TData>) {
+  const showBar = enableGlobalSearch || enableColumnVisibility || (enableClearFilters && hasActiveFilters) || showExportButton
+
+  if (!showBar) return null
+
+  return (
+    <TopBarWrapper>
+      <TopBarLeft>
+        {enableGlobalSearch && (
+          <SearchInput
+            globalFilter={globalFilter}
+            setGlobalFilter={setGlobalFilter}
+            placeholder={searchPlaceholder}
+            width={searchWidth}
+          />
+        )}
+      </TopBarLeft>
+
+      <TopBarRight>
+        {enableClearFilters && hasActiveFilters && (
+          <Button
+            variant="solid"
+            color="danger200"
+            size="sm"
+            onClick={onClearAll}
+            aria-label={clearFiltersLabel}
+          >
+            <FunnelSimpleXIcon size={16} />
+            {clearFiltersLabel}
+          </Button>
+        )}
+        {showExportButton && (
+          <Button
+            variant={exportButton?.variant ?? 'neutralOutline'}
+            onClick={onExport}
+            disabled={exportButton?.disabled}
+            aria-label={exportButton?.ariaLabel ?? 'Exportar'}
+          >
+            <DownloadSimpleIcon size={16} />
+            {exportButton?.label ?? 'Exportar'}
+          </Button>
+        )}
+        {enableColumnVisibility && <ColumnVisibility table={table} />}
+      </TopBarRight>
+    </TopBarWrapper>
+  )
+}
+
+export default DatatableTopBar

package/components/Table/components/DatatableTopBar/index.ts

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

package/components/Table/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,30 @@
+import TextField from "../../../TextField";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+
+export type SearchInputProps = {
+  globalFilter: string;
+  setGlobalFilter: (value: string) => void;
+  placeholder?: string;
+  width?: string;
+};
+
+const SearchInput = ({
+  globalFilter,
+  setGlobalFilter,
+  placeholder = "Pesquisar",
+  width = '373px',
+}: SearchInputProps) => {
+  return (
+    <div style={{ width }}>
+      <TextField
+        label=''
+        leftIcon={<MagnifyingGlassIcon />}
+        placeholder={placeholder}
+        value={globalFilter}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
+      />
+    </div>
+  )
+};
+
+export default SearchInput;

package/components/Table/components/TableHeader/TableHeader.tsx

@@ -0,0 +1,98 @@
+import { flexRender, Header, HeaderGroup } from '@tanstack/react-table'
+import { SortIconWrapper, Th, ThContent } from '../../Table.styles'
+import { DatatableColumnFilters, DatatableColumnMeta, DatatableFilterDropdownLabels } from '../../Table.types'
+import { ArrowDownIcon, ArrowUpIcon } from '../ColumnVisibility/ColumnVisibility.style'
+import DatatableColumnFilterMenu from '../DatatableColumnFilterMenu/DatatableColumnFilterMenu'
+
+interface TableHeaderProps<TData> {
+    headerGroups: HeaderGroup<TData>[]
+    isDatatable: boolean
+    datatableFilters: DatatableColumnFilters
+    openFilterColumnId: string | null
+    onFilterPopoverOpenChange: (colId: string, isOpen: boolean) => void
+    onFilterValueChange: (colId: string, value: any) => void
+    onClearFilter: (colId: string) => void
+    labels?: DatatableFilterDropdownLabels
+}
+
+function TableHeader<TData>({
+    headerGroups,
+    isDatatable,
+    datatableFilters,
+    openFilterColumnId,
+    onFilterPopoverOpenChange,
+    onFilterValueChange,
+    onClearFilter,
+    labels = {},
+}: TableHeaderProps<TData>) {
+    return (
+        <thead>
+            {headerGroups.map((hg) => (
+                <tr key={hg.id}>
+                    {hg.headers.map((header: Header<TData, unknown>) => {
+                        const canSort = !isDatatable && header.column.getCanSort()
+                        const sortDirection = header.column.getIsSorted()
+                        const colMeta = header.column.columnDef.meta as DatatableColumnMeta | undefined
+                        const colFilterValue = datatableFilters[header.column.id]
+                        const colHasActiveFilter = isDatatable && colFilterValue !== undefined && (
+                            (colFilterValue.type === 'text' && colFilterValue.value !== '') ||
+                            (colFilterValue.type === 'select' && colFilterValue.value != null) ||
+                            (colFilterValue.type === 'dateRange' && (
+                                colFilterValue.value.from != null || colFilterValue.value.to != null
+                            ))
+                        )
+
+                        return (
+                            <Th
+                                key={header.id}
+                                $sortable={canSort}
+                                $filterable={isDatatable && !!colMeta?.filterType}
+                                $hasActiveSort={isDatatable ? colHasActiveFilter : !!sortDirection}
+                                onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                                onKeyDown={(e) => {
+                                    if (canSort && (e.key === 'Enter' || e.key === ' ')) {
+                                        e.preventDefault()
+                                        header.column.getToggleSortingHandler()?.(e)
+                                    }
+                                }}
+                                tabIndex={canSort ? 0 : undefined}
+                                role={canSort ? 'button' : undefined}
+                                aria-sort={
+                                    !isDatatable && sortDirection === 'asc' ? 'ascending'
+                                    : !isDatatable && sortDirection === 'desc' ? 'descending'
+                                    : undefined
+                                }
+                            >
+                                {isDatatable ? (
+                                    <DatatableColumnFilterMenu
+                                        columnId={header.column.id}
+                                        title={flexRender(header.column.columnDef.header, header.getContext())}
+                                        meta={colMeta}
+                                        open={openFilterColumnId === header.column.id}
+                                        onOpenChange={(isOpen) => onFilterPopoverOpenChange(header.column.id, isOpen)}
+                                        filterValue={datatableFilters[header.column.id]}
+                                        onFilterValueChange={onFilterValueChange}
+                                        onClearFilter={onClearFilter}
+                                        labels={labels}
+                                    />
+                                ) : (
+                                    <ThContent>
+                                        {flexRender(header.column.columnDef.header, header.getContext())}
+                                        {canSort && (
+                                            <SortIconWrapper aria-hidden="true">
+                                                <ArrowUpIcon size={14} $selected={sortDirection === 'asc' ? 'asc' : false} />
+                                                <ArrowDownIcon size={14} $selected={sortDirection === 'desc' ? 'desc' : false} />
+                                            </SortIconWrapper>
+                                        )}
+                                    </ThContent>
+                                )}
+                            </Th>
+                        )
+                    })}
+                </tr>
+            ))}
+        </thead>
+    )
+}
+
+export default TableHeader

package/components/Table/components/TablePagination/TablePagination.tsx

@@ -0,0 +1,78 @@
+import { Table } from '@tanstack/react-table'
+import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react'
+import {
+    PaginationButton,
+    PaginationContainer,
+    PaginationControls,
+    PaginationElipsis,
+} from '../../Table.styles'
+import IconButton from '../../../IconButton'
+import { getPageNumbers } from '../../utils'
+
+interface TablePaginationProps<TData> {
+    table: Table<TData>
+    currentPage: number
+    pageCount: number
+    ariaLabels?: { previous?: string; next?: string; page?: string }
+}
+
+function TablePagination<TData>({
+    table,
+    currentPage,
+    pageCount,
+    ariaLabels = {},
+}: TablePaginationProps<TData>) {
+    const pageNumbersArray = getPageNumbers({ currentPage, pageCount })
+
+    return (
+        <PaginationContainer>
+            <PaginationControls>
+                <IconButton
+                    variant="ghost"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                    aria-label={ariaLabels.previous ?? 'Página anterior'}
+                >
+                    <CaretLeftIcon />
+                </IconButton>
+
+                {pageNumbersArray.map((page, index) =>
+                    page === 'ellipsis' ? (
+                        <PaginationElipsis key={`ellipsis-${index}`} aria-hidden="true">
+                            <DotsThreeIcon size={16} />
+                        </PaginationElipsis>
+                    ) : (
+                        <PaginationButton
+                            key={page}
+                            size="sm"
+                            $active={page === currentPage}
+                            variant={page === currentPage ? 'solid' : 'ghost'}
+                            onClick={() => {
+                                if (typeof page === 'number') table.setPageIndex(page - 1)
+                            }}
+                            aria-label={
+                                ariaLabels.page
+                                    ? `${ariaLabels.page} ${page}`
+                                    : `Ir para página ${page}`
+                            }
+                            aria-current={page === currentPage ? 'page' : undefined}
+                        >
+                            {page}
+                        </PaginationButton>
+                    )
+                )}
+
+                <IconButton
+                    variant="ghost"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                    aria-label={ariaLabels.next ?? 'Próxima página'}
+                >
+                    <CaretRightIcon />
+                </IconButton>
+            </PaginationControls>
+        </PaginationContainer>
+    )
+}
+
+export default TablePagination

package/components/Table/components/index.ts

@@ -0,0 +1,6 @@
+export { default as ColumnVisibility } from './ColumnVisibility/ColumnVisibility'
+export { default as DatatableColumnFilterMenu } from './DatatableColumnFilterMenu'
+export { default as DatatableTopBar } from './DatatableTopBar'
+export { default as SearchInput } from './SearchInput/SearchInput'
+export { default as TableHeader } from './TableHeader/TableHeader'
+export { default as TablePagination } from './TablePagination/TablePagination'