@liguelead/design-system 0.0.30 → 0.0.32

package/components/Table/Table.tsx

@@ -1,157 +1,307 @@
-import { useState } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import {
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    SortingState,
+    useReactTable,
+    VisibilityState,
+    FilterFn,
 } from '@tanstack/react-table'
 
-import {
-  CaretLeftIcon,
-  CaretRightIcon,
-  DotsThreeIcon,
-} from '@phosphor-icons/react'
+import { DownloadSimpleIcon, FunnelSimpleXIcon } from '@phosphor-icons/react'
 
 import {
-  EmptyMessage,
-  FooterText,
-  PaginationContainer,
-  PaginationControls,
-  PaginationElipsis,
-  StyledTable,
-  TableFooter,
-  TableWrapper,
-  Td,
-  Th,
-  Tr,
+    EmptyMessage,
+    FooterText,
+    StyledTable,
+    TableFooter,
+    TableScrollContainer,
+    TableToolbar,
+    TableWrapper,
+    Td,
+    Tr,
+    ToolbarLeft,
+    ToolbarRight,
 } from './Table.styles'
-import { TTableProps } from './Table.types'
-import { getPageNumbers } from './utils'
-import IconButton from '../IconButton'
-import Button from '../Button'
 
+import { TableQueryState, TTableProps } from './Table.types'
+import { dateRangeFilterFn } from './utils'
+import { useDatatableFilters } from './hooks/useDatatableFilters'
+import Button from '../Button'
+import {
+    ColumnVisibility,
+    DatatableTopBar,
+    SearchInput,
+    TableHeader,
+    TablePagination,
+} from './components'
 
 function Table<TData>({
-  data,
-  columns,
-  emptyTitle = 'Nenhum registro encontrado.',
-  footerText,
-  pageSize = 10,
-  showPagination = true,
-}: TTableProps<TData>) {
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize,
-  });
-
-  const table = useReactTable({
     data,
     columns,
-    state: {
-      pagination,
-    },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-  });
-
-  const total = table.getFilteredRowModel().rows.length;
-  const pageCount = table.getPageCount();
-  const hasPagination = showPagination && pageCount > 1;
-  const currentPage = pagination.pageIndex + 1;
-  const pageNumbersArray = getPageNumbers({ currentPage, pageCount });
-
-  return (
-    <TableWrapper>
-      <StyledTable>
-        <thead>
-          {table.getHeaderGroups().map((hg) => (
-            <tr key={hg.id}>
-              {hg.headers.map((header) => (
-                <Th key={header.id}>
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
-                </Th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-
-        <tbody>
-          {table.getRowModel().rows.length === 0 ? (
-            <tr>
-              <EmptyMessage colSpan={columns.length}>{emptyTitle}</EmptyMessage>
-            </tr>
-          ) : (
-            table.getRowModel().rows.map((row) => (
-              <Tr key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <Td key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </Td>
-                ))}
-              </Tr>
-            ))
-          )}
-        </tbody>
-      </StyledTable>
-
-      {(footerText || hasPagination) && total > 0 && (
-        <TableFooter $hasPagination={hasPagination}>
-          {footerText && (
-            <FooterText>
-              {footerText({
-                total: data.length,
-                filtered: total,
-              })}
-            </FooterText>
-          )}
-          {hasPagination && (
-            <PaginationContainer>
-              <PaginationControls>
-                <IconButton
-                  variant="outline"
-                  onClick={() => table.previousPage()}
-                  disabled={!table.getCanPreviousPage()}
-                >
-                  <CaretLeftIcon />
-                </IconButton>
-                {pageNumbersArray.map((page, index) =>
-                  page === "ellipsis" ? (
-                    <PaginationElipsis key={`ellipsis-${index}`}>
-                      <DotsThreeIcon size={16} />
-                    </PaginationElipsis>
-                  ) : (
-                    <Button
-                      key={page}
-                      size="sm"
-                      variant={page === currentPage ? "solid" : "ghost"}
-                      onClick={() => {
-                        if (typeof page === "number") {
-                          table.setPageIndex(page - 1);
+    mode = 'client',
+    variant = 'table',
+    emptyTitle = 'Nenhum registro encontrado.',
+    footerText,
+    pageSize = 10,
+    showPagination = true,
+    enableGlobalSearch = false,
+    enableColumnVisibility = false,
+    enableClearFilters = false,
+    renderToolbarLeft,
+    renderToolbarRight,
+    searchPlaceholder = 'Pesquisar',
+    searchWidth = '373px',
+    clearFiltersLabel = 'Limpar filtros',
+    onExport,
+    getExportUrl,
+    exportButton = {},
+    ariaLabel = 'Tabela de dados',
+    paginationAriaLabels = {},
+    initialSorting = [],
+    initialColumnVisibility = {},
+    initialGlobalFilter = '',
+    datatableColumnFiltersValue,
+    onDatatableColumnFiltersChange,
+    datatableFilterDropdownLabels = {},
+    datatableEnableGlobalSearch = true,
+    datatableEnableColumnVisibility = true,
+    datatableEnableClearFilters = true,
+    ...serverProps
+}: TTableProps<TData>) {
+    const isDatatable = variant === 'datatable'
+    const isServerMode = mode === 'server'
+
+    const serverPageCount = isServerMode && 'pageCount' in serverProps ? serverProps.pageCount : undefined
+    const serverTotalRows = isServerMode && 'totalRows' in serverProps ? serverProps.totalRows : undefined
+    const serverFilteredRows = isServerMode && 'filteredRows' in serverProps ? serverProps.filteredRows : undefined
+    const onQueryChange = isServerMode && 'onQueryChange' in serverProps ? serverProps.onQueryChange : undefined
+
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize })
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(initialColumnVisibility)
+    const [globalFilter, setGlobalFilter] = useState(initialGlobalFilter)
+    const [sorting, setSorting] = useState<SortingState>(initialSorting)
+
+    const {
+        filters: datatableFilters,
+        columnFilters,
+        setColumnFilters,
+        openFilterColumnId,
+        handleFilterValueChange,
+        handleClearColumnFilter,
+        handleClearAllFilters,
+        handlePopoverOpenChange,
+    } = useDatatableFilters({
+        isServerMode,
+        controlled: datatableColumnFiltersValue,
+        onChange: onDatatableColumnFiltersChange,
+    })
+
+    const queryState: TableQueryState = useMemo(() => ({
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+        sorting,
+        globalFilter,
+        columnVisibility,
+        datatableFilters,
+    }), [pagination, sorting, globalFilter, columnVisibility, datatableFilters])
+
+    useEffect(() => {
+        if (isServerMode && onQueryChange) onQueryChange(queryState)
+    }, [queryState, isServerMode, onQueryChange])
+
+    const selectEqualsFilterFn = useMemo(
+        () =>
+            ((row, columnId, filterValue) => {
+                if (filterValue == null || filterValue === '') return true
+                return row.getValue(columnId) === filterValue
+            }) as FilterFn<TData>,
+        []
+    )
+
+    const resolvedColumns = useMemo(
+        () =>
+            columns.map((col) =>
+                (col.meta as { filterType?: string } | undefined)?.filterType === 'select' &&
+                !col.filterFn
+                    ? { ...col, filterFn: selectEqualsFilterFn }
+                    : col
+            ),
+        [columns, selectEqualsFilterFn]
+    )
+
+    const table = useReactTable<TData>({
+        data,
+        columns: resolvedColumns,
+        state: { pagination, columnVisibility, globalFilter, sorting, columnFilters },
+        onSortingChange: setSorting,
+        onColumnVisibilityChange: setColumnVisibility,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        filterFns: {
+            dateRange: dateRangeFilterFn as FilterFn<TData>
+        },
+        ...(isServerMode
+            ? { manualPagination: true, manualSorting: true, manualFiltering: true, pageCount: serverPageCount }
+            : {
+                getFilteredRowModel: getFilteredRowModel(),
+                getSortedRowModel: getSortedRowModel(),
+                getPaginationRowModel: getPaginationRowModel(),
+                globalFilterFn: 'includesString',
+            }
+        ),
+    })
+
+    const total = isServerMode ? (serverTotalRows ?? data.length) : data.length
+    const filtered = isServerMode ? (serverFilteredRows ?? data.length) : table.getFilteredRowModel().rows.length
+    const pageCount = isServerMode ? (serverPageCount ?? 1) : table.getPageCount()
+    const hasPagination = showPagination && pageCount > 1
+    const currentPage = pagination.pageIndex + 1
+
+    const hasActiveFilters = globalFilter !== '' || sorting.length > 0
+    const hasDatatableActiveFilters = globalFilter !== '' || columnFilters.length > 0
+
+    const handleClearFilters = () => {
+        setGlobalFilter('')
+        setSorting([])
+        setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+    }
+
+    const handleExport = async () => {
+        if (onExport) {
+            await onExport(queryState)
+        } else if (getExportUrl) {
+            const url = getExportUrl(queryState)
+            const link = document.createElement('a')
+            link.href = url
+            link.download = ''
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+        }
+    }
+
+    const showExportButton = Boolean(onExport || getExportUrl)
+    const toolbarContext = { globalFilter, setGlobalFilter, queryState }
+
+    const hasToolbar =
+        enableGlobalSearch || enableColumnVisibility || enableClearFilters ||
+        renderToolbarLeft || renderToolbarRight || showExportButton
+
+    return (
+        <TableWrapper>
+            {isDatatable && (
+                <DatatableTopBar
+                    table={table}
+                    globalFilter={globalFilter}
+                    setGlobalFilter={setGlobalFilter}
+                    enableGlobalSearch={datatableEnableGlobalSearch}
+                    enableColumnVisibility={datatableEnableColumnVisibility}
+                    enableClearFilters={datatableEnableClearFilters}
+                    hasActiveFilters={hasDatatableActiveFilters}
+                    onClearAll={() => handleClearAllFilters(() => setGlobalFilter(''))}
+                    searchPlaceholder={searchPlaceholder}
+                    searchWidth={searchWidth}
+                    clearFiltersLabel={clearFiltersLabel}
+                    showExportButton={showExportButton}
+                    onExport={handleExport}
+                    exportButton={exportButton}
+                />
+            )}
+
+            {!isDatatable && hasToolbar && (
+                <TableToolbar>
+                    <ToolbarLeft>
+                        {renderToolbarLeft
+                            ? renderToolbarLeft(toolbarContext)
+                            : enableGlobalSearch && (
+                                <SearchInput
+                                    globalFilter={globalFilter}
+                                    setGlobalFilter={setGlobalFilter}
+                                    placeholder={searchPlaceholder}
+                                    width={searchWidth}
+                                />
+                            )
                         }
-                      }}
-                    >
-                      {page}
-                    </Button>
-                  )
-                )}
-                <IconButton
-                  variant="outline"
-                  onClick={() => table.nextPage()}
-                  disabled={!table.getCanNextPage()}
-                >
-                  <CaretRightIcon />
-                </IconButton>
-              </PaginationControls>
-            </PaginationContainer>
-          )}
-        </TableFooter>
-      )}
-    </TableWrapper>
-  );
+                    </ToolbarLeft>
+                    <ToolbarRight>
+                        {renderToolbarRight?.(toolbarContext)}
+                        {enableClearFilters && hasActiveFilters && (
+                            <Button variant="solid" color="danger200" onClick={handleClearFilters} aria-label="Limpar filtros">
+                                <FunnelSimpleXIcon />
+                                {clearFiltersLabel}
+                            </Button>
+                        )}
+                        {showExportButton && (
+                            <Button
+                                variant={exportButton.variant ?? 'neutralOutline'}
+                                onClick={handleExport}
+                                disabled={exportButton.disabled}
+                                aria-label={exportButton.ariaLabel ?? 'Exportar'}
+                            >
+                                <DownloadSimpleIcon size={16} />
+                                {exportButton.label ?? 'Exportar'}
+                            </Button>
+                        )}
+                        {enableColumnVisibility && <ColumnVisibility table={table} />}
+                    </ToolbarRight>
+                </TableToolbar>
+            )}
+
+            <TableScrollContainer>
+                <StyledTable role="table" aria-label={ariaLabel}>
+                    <TableHeader
+                        headerGroups={table.getHeaderGroups()}
+                        isDatatable={isDatatable}
+                        datatableFilters={datatableFilters}
+                        openFilterColumnId={openFilterColumnId}
+                        onFilterPopoverOpenChange={handlePopoverOpenChange}
+                        onFilterValueChange={handleFilterValueChange}
+                        onClearFilter={handleClearColumnFilter}
+                        labels={datatableFilterDropdownLabels}
+                    />
+                    <tbody>
+                        {table.getRowModel().rows.length === 0 ? (
+                            <tr>
+                                <EmptyMessage colSpan={columns.length}>{emptyTitle}</EmptyMessage>
+                            </tr>
+                        ) : (
+                            table.getRowModel().rows.map((row) => (
+                                <Tr key={row.id}>
+                                    {row.getVisibleCells().map((cell) => (
+                                        <Td key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </Td>
+                                    ))}
+                                </Tr>
+                            ))
+                        )}
+                    </tbody>
+                </StyledTable>
+            </TableScrollContainer>
+
+            {(footerText || hasPagination) && filtered > 0 && (
+                <TableFooter $hasPagination={hasPagination}>
+                    {footerText && (hasActiveFilters || hasDatatableActiveFilters) && (
+                        <FooterText>{footerText({ total, filtered })}</FooterText>
+                    )}
+                    {hasPagination && (
+                        <TablePagination
+                            table={table}
+                            currentPage={currentPage}
+                            pageCount={pageCount}
+                            ariaLabels={paginationAriaLabels}
+                        />
+                    )}
+                </TableFooter>
+            )}
+        </TableWrapper>
+    )
 }
 
 export default Table

package/components/Table/Table.types.ts

@@ -1,16 +1,108 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ReactNode } from 'react'
+import { ColumnDef, SortingState, VisibilityState } from '@tanstack/react-table'
 
-export type TTableProps<TData> = {
-  data: TData[]
-  columns: ColumnDef<TData, unknown>[]
+export type TableMode = 'client' | 'server'
+export type TableVariant = 'table' | 'datatable'
 
-  emptyTitle?: string
-  pageSize?: number
-  showPagination?: boolean
+export type ColumnFilterValue =
+    | { type: 'text'; value: string }
+    | { type: 'dateRange'; value: { from?: Date; to?: Date } }
+    | { type: 'select'; value: string | number | null }
 
-  footerText?: (info: {
-    total: number
-    filtered: number
-  }) => string
+export type DatatableColumnFilters = Record<string, ColumnFilterValue | undefined>
 
-};
+export interface TableQueryState {
+    pageIndex: number
+    pageSize: number
+    sorting: SortingState
+    globalFilter: string
+    columnVisibility: VisibilityState
+    datatableFilters: DatatableColumnFilters
+}
+
+export interface TableToolbarContext<_TData = unknown> {
+    globalFilter: string
+    setGlobalFilter: (value: string) => void
+    queryState: TableQueryState
+}
+
+export interface ExportButtonConfig {
+    label?: string
+    variant?: 'solid' | 'outline' | 'ghost' | 'neutralOutline' | 'neutralGhost'
+    disabled?: boolean
+    ariaLabel?: string
+}
+
+export type DatatableFilterType = 'text' | 'dateRange' | 'select'
+
+export interface DatatableColumnMeta {
+    filterType?: DatatableFilterType
+    filterLabel?: string
+    filterPlaceholder?: string
+    selectOptions?: Array<{ label: string; value: string | number }>
+}
+
+export interface DatatableFilterDropdownLabels {
+    filterButtonAriaLabel?: string
+    clearFiltersLabel?: string
+}
+
+export interface TableBaseProps<TData> {
+    data: TData[]
+    columns: ColumnDef<TData, unknown>[]
+    mode?: TableMode
+    variant?: TableVariant
+    pageSize?: number
+    showPagination?: boolean
+    emptyTitle?: string
+    footerText?: (info: { total: number; filtered: number }) => string
+    ariaLabel?: string
+    paginationAriaLabels?: {
+        previous?: string
+        next?: string
+        page?: string
+    }
+    initialSorting?: SortingState
+    initialColumnVisibility?: VisibilityState
+    initialGlobalFilter?: string
+    datatableColumnFiltersValue?: DatatableColumnFilters
+    onDatatableColumnFiltersChange?: (next: DatatableColumnFilters) => void
+    datatableFilterDropdownLabels?: DatatableFilterDropdownLabels
+    datatableEnableGlobalSearch?: boolean
+    datatableEnableColumnVisibility?: boolean
+    datatableEnableClearFilters?: boolean
+}
+
+export interface TableClientProps<TData> extends TableBaseProps<TData> {
+    mode?: 'client'
+}
+
+export interface TableServerProps<TData> extends TableBaseProps<TData> {
+    mode: 'server'
+    pageCount: number
+    totalRows?: number
+    filteredRows?: number
+    onQueryChange?: (state: TableQueryState) => void | Promise<void>
+}
+
+export interface TableToolbarProps<TData> {
+    enableGlobalSearch?: boolean
+    enableColumnVisibility?: boolean
+    enableClearFilters?: boolean
+    renderToolbarLeft?: (ctx: TableToolbarContext<TData>) => ReactNode
+    renderToolbarRight?: (ctx: TableToolbarContext<TData>) => ReactNode
+    searchPlaceholder?: string
+    searchWidth?: string
+    clearFiltersLabel?: string
+}
+
+export interface TableExportProps {
+    onExport?: (state: TableQueryState) => void | Promise<void>
+    getExportUrl?: (state: TableQueryState) => string
+    exportButton?: ExportButtonConfig
+}
+
+export type TTableProps<TData> =
+    (TableClientProps<TData> | TableServerProps<TData>)
+    & TableToolbarProps<TData>
+    & TableExportProps

package/components/Table/components/ColumnVisibility/ColumnVisibility.style.ts

@@ -0,0 +1,46 @@
+import style from "styled-components";
+import { radius, spacing } from "@liguelead/foundation";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { parseColor } from "../../../../utils";
+
+type TIconProps = {
+  $selected?: 'asc' | 'desc' | false;
+}
+
+export const PopoverWrapper = style.div`
+  display: flex; 
+  margin-top: 8px; 
+  flex-direction: column; 
+  gap: 6px;
+  justify-content: center;
+  background-color: white;
+  border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+  border-radius: 4px;
+  padding: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
+`;
+
+export const PopoverLabel = style.label`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.spacing2}px;
+  padding: ${spacing.spacing2}px;
+  border-radius: ${radius.radius2}px;
+  cursor: pointer;
+`
+
+export const ArrowUpIcon = style(CaretUpIcon).attrs<TIconProps>({})`
+  fill: ${({ theme, $selected }) => {
+    if ($selected === 'asc') return parseColor(theme.colors.primary);
+    if ($selected === 'desc') return parseColor(theme.colors.neutral400);
+    return parseColor(theme.colors.neutral700);
+  }};
+`;
+
+export const ArrowDownIcon = style(CaretDownIcon).attrs<TIconProps>({})`
+  fill: ${({ theme, $selected }) => {
+    if ($selected === 'desc') return parseColor(theme.colors.primary);
+    if ($selected === 'asc') return parseColor(theme.colors.neutral400);
+    return parseColor(theme.colors.neutral700);
+  }};
+`;

package/components/Table/components/ColumnVisibility/ColumnVisibility.tsx

@@ -0,0 +1,55 @@
+import { Table } from "@tanstack/react-table";
+import { SlidersHorizontalIcon } from "@phosphor-icons/react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import Checkbox from "../../../Checkbox";
+import IconButton from "../../../IconButton";
+import { PopoverLabel, PopoverWrapper } from "./ColumnVisibility.style";
+
+interface ColumnVisibilityProps<TData> {
+  table: Table<TData>;
+}
+
+const ColumnVisibility = <TData,>({ table }: ColumnVisibilityProps<TData>) => {
+  return (
+    <PopoverPrimitive.Root>
+      <PopoverPrimitive.Trigger asChild>
+        <IconButton 
+          variant="neutralOutline"
+          aria-label="Alternar visibilidade de colunas"
+        >
+          <SlidersHorizontalIcon weight="light" />
+        </IconButton>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content 
+          side="bottom"
+          align="end"
+          sideOffset={-7}
+        >
+          <PopoverWrapper>
+            {table
+              .getAllColumns()
+              .filter(
+                (col) =>
+                  typeof col.accessorFn !== "undefined" 
+                  && col.getCanHide()
+              )
+              .map((col) => (
+                <PopoverLabel key={col.id}>
+                  <Checkbox
+                    checked={col.getIsVisible()}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      col.toggleVisibility(e.target.checked)
+                    }
+                  />
+                  {typeof col.columnDef.header === 'string' ? col.columnDef.header : col.id}
+                </PopoverLabel>
+              ))}
+          </PopoverWrapper>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}
+
+export default ColumnVisibility;