@liguelead/design-system 0.0.30 → 0.0.32

package/components/Table/Table.stories.tsx

@@ -1,53 +1,134 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import Table from './Table';
-
-const meta: Meta<typeof Table> = {
-  title: 'Data Display/Table',
-  component: Table,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    data: {
-      control: 'object',
-      description: 'Array of data objects to be displayed in the table',
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Table from './Table'
+import { TableQueryState } from './Table.types'
+import { ORDER_DATA, TABLE_COLUMNS } from './stories.fixtures'
+
+const meta: Meta = {
+    title: 'Data Display/Table',
+    component: Table,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: `
+Tabela de dados com ordenação por coluna, busca global, visibilidade de colunas, exportação e paginação.
+
+**Props principais:**
+- \`data\` — array de dados
+- \`columns\` — definição de colunas via \`@tanstack/react-table\`
+- \`enableGlobalSearch\` — habilita campo de busca global
+- \`enableColumnVisibility\` — habilita toggle de visibilidade por coluna
+- \`enableClearFilters\` — exibe botão para limpar ordenação e busca
+- \`onExport\` / \`getExportUrl\` — habilita botão de exportação
+- \`mode="server"\` — delega paginação e ordenação ao servidor via \`onQueryChange\`
+                `,
+            },
+        },
     },
-    columns: {
-      control: 'object',
-      description: 'Column definitions for the table',
+    tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj
+
+const footer = ({ total, filtered }: { total: number; filtered: number }) =>
+    `${filtered} de ${total}`
+
+export const Default: Story = {
+    name: 'Padrão',
+    parameters: {
+        docs: { description: { story: 'Tabela simples com paginação e ordenação por coluna.' } },
     },
-    footerText: {
-      control: {type: undefined},
-      description:
-        'Function to render custom footer text, receives total and filtered counts',
+    render: () => (
+        <Table
+            data={ORDER_DATA}
+            columns={TABLE_COLUMNS}
+            pageSize={5}
+            footerText={footer}
+        />
+    ),
+}
+
+export const ComBuscaGlobal: Story = {
+    name: 'Com busca global',
+    parameters: {
+        docs: { description: { story: 'Use `enableGlobalSearch` para filtrar todas as colunas de uma vez.' } },
     },
-    showPagination: {
-      control: 'boolean',
-      description: 'Whether to enable pagination for the table',
+    render: () => (
+        <Table
+            data={ORDER_DATA}
+            columns={TABLE_COLUMNS}
+            pageSize={5}
+            enableGlobalSearch
+            searchPlaceholder="Buscar em todos os campos..."
+            footerText={footer}
+        />
+    ),
+}
+
+export const ComVisibilidadeColunas: Story = {
+    name: 'Com visibilidade de colunas',
+    parameters: {
+        docs: { description: { story: 'Use `enableColumnVisibility` para permitir mostrar/ocultar colunas.' } },
     },
-    pageSize: {
-      control: 'number',
-      description: 'Initial number of rows per page when pagination is enabled',
+    render: () => (
+        <Table
+            data={ORDER_DATA}
+            columns={TABLE_COLUMNS}
+            pageSize={5}
+            enableColumnVisibility
+            footerText={footer}
+        />
+    ),
+}
+
+export const ComExportacao: Story = {
+    name: 'Com exportação',
+    parameters: {
+        docs: { description: { story: 'Use `onExport` para receber o estado atual e disparar o download.' } },
     },
-  },
-};
+    render: () => (
+        <Table
+            data={ORDER_DATA}
+            columns={TABLE_COLUMNS}
+            pageSize={5}
+            onExport={(_state: TableQueryState) => alert('Exportação disparada — veja o console.')}
+            exportButton={{ label: 'Exportar CSV', variant: 'neutralOutline' }}
+            footerText={footer}
+        />
+    ),
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export const Completa: Story = {
+    name: 'Completa',
+    parameters: {
+        docs: { description: { story: 'Busca global + visibilidade de colunas + limpar filtros + exportação.' } },
+    },
+    render: () => (
+        <Table
+            data={ORDER_DATA}
+            columns={TABLE_COLUMNS}
+            pageSize={5}
+            enableGlobalSearch
+            enableColumnVisibility
+            enableClearFilters
+            onExport={(_state: TableQueryState) => console.log('[Export]', _state)}
+            exportButton={{ label: 'Exportar', variant: 'neutralOutline' }}
+            footerText={footer}
+        />
+    ),
+}
 
-export const Default: Story = {
-  args: {
-    data: [
-      {name: 'John Doe', email: 'john.doe@example.com'},
-      {name: 'Jane Smith', email: 'jane.smith@example.com'},
-    ],
-    columns: [
-      {header: 'Name', accessorKey: 'name'},
-      {header: 'Email', accessorKey: 'email'},
-    ],
-    showPagination: true,
-    pageSize: 10,
-  },
-};
+export const SemDados: Story = {
+    name: 'Sem dados',
+    parameters: {
+        docs: { description: { story: 'Estado vazio exibido quando `data` é um array vazio.' } },
+    },
+    render: () => (
+        <Table
+            data={[]}
+            columns={TABLE_COLUMNS}
+            emptyTitle="Nenhum pedido encontrado."
+        />
+    ),
+}

package/components/Table/Table.styles.ts

@@ -1,9 +1,37 @@
 import styled from 'styled-components'
 import { spacing, fontSize, fontWeight } from '@liguelead/foundation'
 import { parseColor } from '../../utils'
+import Button from '../Button'
 
 export const TableWrapper = styled.div`
   background: ${({ theme }) => parseColor(theme.colors.white)};
+  width: 100%;
+`
+
+export const TableScrollContainer = styled.div`
+  overflow-x: auto;
+  width: 100%;
+`
+
+export const TableToolbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: ${spacing.spacing16}px;
+  margin-bottom: ${spacing.spacing16}px;
+`
+
+export const ToolbarLeft = styled.div`
+  display: flex;
+  gap: ${spacing.spacing8}px;
+  align-items: center;
+  flex: 1;
+`
+
+export const ToolbarRight = styled.div`
+  display: flex;
+  gap: ${spacing.spacing8}px;
+  align-items: center;
 `
 
 export const StyledTable = styled.table`
@@ -13,27 +41,32 @@ export const StyledTable = styled.table`
 export const TableFooter = styled.div<{ $hasPagination: boolean }>`
   display: flex;
   justify-content: center;
-  flex-direction: ${({ $hasPagination }) => ($hasPagination ? 'column-reverse' : 'row')};
+  flex-direction: ${({ $hasPagination }) => ($hasPagination ? 'row-reverse' : 'row')};
   align-items: center;
-  gap: ${spacing.spacing8}px;
-  padding: ${spacing.spacing16}px;
+  padding: ${spacing.spacing16}px 0;
   font-size: ${fontSize.fontSize14}px;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid ${({ theme }) => parseColor(theme.colors.neutral300)};
 `
 
 export const FooterText = styled.div`
   display: flex;
   align-items: center;
+  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: ${fontWeight.fontWeight400};
 `
 
 export const PaginationContainer = styled.div`
   display: flex;
   align-items: center;
+  flex: 1;
+  justify-content: center;
 `
 
 export const PaginationControls = styled.div`
   display: flex;
   gap: ${spacing.spacing4}px;
+  align-items: center;
 `
 
 export const PaginationElipsis = styled.span`
@@ -57,15 +90,53 @@ export const Td = styled.td`
 
 export const Tr = styled.tr`
   &:not(:last-child) td {
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid ${({ theme }) => parseColor(theme.colors.neutral300)};
   }
 `
-export const Th = styled.th`
-  padding: 12px 16px;
-  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+
+export const Th = styled.th<{ $sortable?: boolean; $hasActiveSort?: boolean; $filterable?: boolean }>`
+  padding: ${spacing.spacing8}px;
+  color: ${({ theme, $hasActiveSort }) => 
+    $hasActiveSort 
+      ? parseColor(theme.colors.primary)
+      : parseColor(theme.colors.textMedium)};
   font-size: ${fontSize.fontSize14}px;
   font-weight: ${fontWeight.fontWeight600};
   border-bottom: 1px solid ${({ theme }) => parseColor(theme.colors.neutral300)};
+  background-color: ${({ theme, $hasActiveSort }) => 
+    $hasActiveSort ? parseColor(theme.colors.primaryLighter) : 'transparent'};
+  cursor: ${({ $sortable, $filterable }) => ($sortable || $filterable ? 'pointer' : 'default')};
+  user-select: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  position: relative;
+
+  &:focus {
+    outline: 2px solid rgba(163, 163, 163, 0.50);
+    outline-offset: -2px;
+    z-index: 1;
+  }
+
+  &:hover {
+    color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    background-color: ${({ theme, $sortable, $filterable, $hasActiveSort }) => {
+      if ($hasActiveSort) return parseColor(theme.colors.neutral200);
+      if ($sortable || $filterable) return parseColor(theme.colors.neutral100);
+      return 'transparent';
+    }};
+  }
+`
+
+export const ThContent = styled.div<{ $filterable?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.spacing16}px;
+  width: 100%;
+`
+
+export const SortIconWrapper = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  line-height: 0;
 `
 
 export const EmptyMessage = styled.td`
@@ -74,3 +145,7 @@ export const EmptyMessage = styled.td`
   font-size: ${fontSize.fontSize14}px;
   text-align: center;
 `
+
+export const PaginationButton = styled(Button)<{ $active?: boolean }>`
+  color: ${({ theme, $active }) => $active ? parseColor(theme.colors.white) : parseColor(theme.colors.textMedium)};
+`