@liguelead/design-system 0.0.30 → 0.0.32

package/components/Table/hooks/useDatatableFilters.ts

@@ -0,0 +1,88 @@
+import { useState, useCallback } from 'react'
+import { ColumnFiltersState } from '@tanstack/react-table'
+import {
+    ColumnFilterValue,
+    DatatableColumnFilters,
+} from '../Table.types'
+
+interface UseDatatableFiltersProps {
+    isServerMode: boolean
+    controlled?: DatatableColumnFilters
+    onChange?: (next: DatatableColumnFilters) => void
+}
+
+export function useDatatableFilters({
+    isServerMode,
+    controlled,
+    onChange,
+}: UseDatatableFiltersProps) {
+    const isControlled = controlled !== undefined
+    const [internal, setInternal] = useState<DatatableColumnFilters>({})
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+    const [openFilterColumnId, setOpenFilterColumnId] = useState<string | null>(null)
+
+    const filters: DatatableColumnFilters = isControlled ? controlled! : internal
+
+    const updateFilters = useCallback((next: DatatableColumnFilters) => {
+        if (!isControlled) setInternal(next)
+        onChange?.(next)
+    }, [isControlled, onChange])
+
+    const handleFilterValueChange = useCallback((colId: string, value: ColumnFilterValue | undefined) => {
+        updateFilters({ ...filters, [colId]: value })
+
+        if (isServerMode) return
+
+        setColumnFilters((prev) => {
+            const rest = prev.filter((f) => f.id !== colId)
+            if (!value) return rest
+            if (value.type === 'text') return value.value ? [...rest, { id: colId, value: value.value }] : rest
+            if (value.type === 'select') return value.value != null ? [...rest, { id: colId, value: value.value }] : rest
+            if (value.type === 'dateRange') {
+                const { from, to } = value.value
+                return from || to ? [...rest, { id: colId, value: { from, to } }] : rest
+            }
+            return rest
+        })
+    }, [filters, isServerMode, updateFilters])
+
+    const handleClearColumnFilter = useCallback((colId: string) => {
+        const next = { ...filters }
+        delete next[colId]
+        updateFilters(next)
+        setColumnFilters((prev) => prev.filter((f) => f.id !== colId))
+        if (openFilterColumnId === colId) setOpenFilterColumnId(null)
+    }, [filters, openFilterColumnId, updateFilters])
+
+    const handleClearAllFilters = useCallback((onClearGlobal: () => void) => {
+        onClearGlobal()
+        setColumnFilters([])
+        setOpenFilterColumnId(null)
+        updateFilters({})
+    }, [updateFilters])
+
+    const handlePopoverOpenChange = useCallback((colId: string, isOpen: boolean) => {
+        setOpenFilterColumnId(isOpen ? colId : null)
+    }, [])
+
+    const hasActiveFilter = useCallback((colId: string): boolean => {
+        const v = filters[colId]
+        if (!v) return false
+        if (v.type === 'text') return v.value !== ''
+        if (v.type === 'select') return v.value != null
+        if (v.type === 'dateRange') return v.value.from != null || v.value.to != null
+        return false
+    }, [filters])
+
+    return {
+        filters,
+        columnFilters,
+        setColumnFilters,
+        openFilterColumnId,
+        handleFilterValueChange,
+        handleClearColumnFilter,
+        handleClearAllFilters,
+        handlePopoverOpenChange,
+        hasActiveFilter,
+    }
+}

package/components/Table/stories.fixtures.ts

@@ -0,0 +1,100 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { DatatableColumnMeta } from './Table.types'
+
+export type OrderRow = {
+    id: string
+    customer: string
+    product: string
+    status: 'Aprovado' | 'Pendente' | 'Cancelado'
+    amount: string
+    createdAt: string
+}
+
+export const ORDER_DATA: OrderRow[] = [
+    { id: 'ORD-001', customer: 'João Silva', product: 'Plano Pro', status: 'Aprovado', amount: 'R$ 299,00', createdAt: '10/01/2026' },
+    { id: 'ORD-002', customer: 'Maria Oliveira', product: 'Plano Basic', status: 'Pendente', amount: 'R$ 99,00', createdAt: '12/01/2026' },
+    { id: 'ORD-003', customer: 'Carlos Souza', product: 'Plano Enterprise', status: 'Aprovado', amount: 'R$ 899,00', createdAt: '15/01/2026' },
+    { id: 'ORD-004', customer: 'Fernanda Lima', product: 'Plano Pro', status: 'Cancelado', amount: 'R$ 299,00', createdAt: '18/01/2026' },
+    { id: 'ORD-005', customer: 'Paulo Mendes', product: 'Plano Basic', status: 'Aprovado', amount: 'R$ 99,00', createdAt: '20/01/2026' },
+    { id: 'ORD-006', customer: 'Aline Costa', product: 'Plano Pro', status: 'Pendente', amount: 'R$ 299,00', createdAt: '22/01/2026' },
+    { id: 'ORD-007', customer: 'Rafael Santos', product: 'Plano Enterprise', status: 'Aprovado', amount: 'R$ 899,00', createdAt: '25/01/2026' },
+    { id: 'ORD-008', customer: 'Juliana Freitas', product: 'Plano Basic', status: 'Aprovado', amount: 'R$ 99,00', createdAt: '28/01/2026' },
+    { id: 'ORD-009', customer: 'Bruno Carvalho', product: 'Plano Pro', status: 'Cancelado', amount: 'R$ 299,00', createdAt: '01/02/2026' },
+    { id: 'ORD-010', customer: 'Camila Rocha', product: 'Plano Enterprise', status: 'Pendente', amount: 'R$ 899,00', createdAt: '03/02/2026' },
+]
+
+export const TABLE_COLUMNS: ColumnDef<OrderRow, unknown>[] = [
+    { header: 'ID', accessorKey: 'id', enableSorting: true },
+    { header: 'Cliente', accessorKey: 'customer', enableSorting: true },
+    { header: 'Produto', accessorKey: 'product', enableSorting: true },
+    { header: 'Status', accessorKey: 'status', enableSorting: true },
+    { header: 'Valor', accessorKey: 'amount' },
+    { header: 'Data', accessorKey: 'createdAt', enableSorting: true },
+]
+
+export const DATATABLE_COLUMNS: ColumnDef<OrderRow, unknown>[] = [
+    { 
+        header: 'ID', 
+        accessorKey: 'id',
+        meta: {
+            filterType: 'text',
+            filterLabel: 'ID',
+            filterPlaceholder: 'Buscar pelo ID',
+        } satisfies DatatableColumnMeta,
+    },
+    {
+        header: 'Cliente',
+        accessorKey: 'customer',
+        meta: {
+            filterType: 'text',
+            filterLabel: 'cliente',
+            filterPlaceholder: 'Buscar cliente',
+        } satisfies DatatableColumnMeta,
+    },
+    {
+        header: 'Produto',
+        accessorKey: 'product',
+        meta: {
+            filterType: 'select',
+            filterLabel: 'produto',
+            filterPlaceholder: 'Selecione um produto',
+            selectOptions: [
+                { label: 'Plano Basic', value: 'Plano Basic' },
+                { label: 'Plano Pro', value: 'Plano Pro' },
+                { label: 'Plano Enterprise', value: 'Plano Enterprise' },
+            ],
+        } satisfies DatatableColumnMeta,
+    },
+    {
+        header: 'Status',
+        accessorKey: 'status',
+        meta: {
+            filterType: 'select',
+            filterLabel: 'status',
+            filterPlaceholder: 'Selecione um status',
+            selectOptions: [
+                { label: 'Aprovado', value: 'Aprovado' },
+                { label: 'Pendente', value: 'Pendente' },
+                { label: 'Cancelado', value: 'Cancelado' },
+            ],
+        } satisfies DatatableColumnMeta,
+    },
+    { 
+        header: 'Valor', 
+        accessorKey: 'amount',
+        meta: {
+            filterType: 'text',
+            filterLabel: 'valor',
+            filterPlaceholder: 'Buscar pelo valor',
+        } satisfies DatatableColumnMeta,
+    },
+    {
+        header: 'Data',
+        accessorKey: 'createdAt',
+        filterFn: 'dateRange',
+        meta: {
+            filterType: 'dateRange',
+            filterLabel: 'Período',
+        } satisfies DatatableColumnMeta,
+    },
+]

package/components/Table/tanstack-table.d.ts

@@ -0,0 +1,10 @@
+import '@tanstack/react-table'
+import { DatatableColumnMeta } from './Table.types'
+
+declare module '@tanstack/react-table' {
+  interface FilterFns {
+    dateRange: import('@tanstack/react-table').FilterFn<unknown>;
+  }
+
+  interface ColumnMeta<TData extends RowData, TValue> extends DatatableColumnMeta {}
+}

package/components/Table/utils/dateRangeFilterFn.ts

@@ -0,0 +1,33 @@
+import { FilterFn, Row } from '@tanstack/react-table'
+
+export const dateRangeFilterFn: FilterFn<unknown> = (
+    row: Row<unknown>,
+    columnId: string,
+    filterValue: { from?: Date; to?: Date }
+) => {
+    const raw = row.getValue(columnId)
+    if (!raw) return true
+
+    let cellDate: Date | null = null
+    if (raw instanceof Date) {
+        cellDate = raw
+    } else if (typeof raw === 'string') {
+        const parts = raw.includes('/') ? raw.split('/').reverse() : raw.split('-')
+        const parsed = new Date(parts.join('-'))
+        if (!isNaN(parsed.getTime())) cellDate = parsed
+    }
+
+    if (!cellDate) return true
+
+    const { from, to } = filterValue
+    if (from && cellDate < from) return false
+    if (to) {
+        const toEnd = new Date(to)
+        toEnd.setHours(23, 59, 59, 999)
+        if (cellDate > toEnd) return false
+    }
+    return true
+}
+
+dateRangeFilterFn.autoRemove = (val: { from?: Date; to?: Date }) =>
+    !val || (!val.from && !val.to)

package/components/Table/utils/index.ts

@@ -1 +1,2 @@
-export {default as getPageNumbers} from './getPageNumbers'
+export { default as getPageNumbers } from './getPageNumbers'
+export { dateRangeFilterFn } from './dateRangeFilterFn'

package/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { HouseIcon, UserIcon, GearIcon, BellIcon } from '@phosphor-icons/react'
+import Tabs from './Tabs'
+import type { TabItem } from './Tabs.types'
+
+const defaultItems: TabItem[] = [
+    { key: 'tab1', label: 'Início' },
+    { key: 'tab2', label: 'Perfil' },
+    { key: 'tab3', label: 'Configurações' },
+]
+
+const meta: Meta<typeof Tabs> = {
+    title: 'Navigation/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Componente de navegação por abas baseado no design system LigueLead.
+
+**Quando usar:**
+- Alternar entre seções de conteúdo relacionadas
+- Navegação secundária dentro de uma página
+- Filtros de visualização (ex: Ativo / Inativo)
+
+**Comportamento:**
+- A tab ativa recebe estilo \`Solid/Primary\` com sombra
+- As tabs inativas são \`Ghost/Neutral\` com fundo transparente
+- Suporte a ícones à esquerda e direita
+- Suporte a estado \`disabled\` por tab individual
+- Prop \`fullWidth\` distribui as tabs igualmente no container
+                `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        activeKey: {
+            control: 'select',
+            options: ['tab1', 'tab2', 'tab3'],
+            description: 'Chave da tab ativa',
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Distribui as tabs igualmente na largura do container',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    render: (args) => {
+        const [active, setActive] = useState(args.activeKey ?? 'tab1')
+        return <Tabs {...args} activeKey={active} onChange={setActive} />
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        items: defaultItems,
+        activeKey: 'tab1',
+    },
+}
+
+export const TabAtivaDireita: Story = {
+    name: 'Tab ativa à direita',
+    parameters: {
+        docs: {
+            description: { story: 'Variante com a tab ativa posicionada à direita (Variant=Right active do Figma).' },
+        },
+    },
+    args: {
+        items: defaultItems,
+        activeKey: 'tab3',
+    },
+}
+
+export const ComIcones: Story = {
+    name: 'Com ícones',
+    parameters: {
+        docs: {
+            description: { story: 'Tabs com ícones à esquerda para reforçar o contexto visual.' },
+        },
+    },
+    args: {
+        items: [
+            { key: 'home', label: 'Início', leftIcon: <HouseIcon size={16} /> },
+            { key: 'user', label: 'Perfil', leftIcon: <UserIcon size={16} /> },
+            { key: 'settings', label: 'Configurações', leftIcon: <GearIcon size={16} /> },
+            { key: 'notifications', label: 'Notificações', leftIcon: <BellIcon size={16} /> },
+        ],
+        activeKey: 'home',
+    },
+}
+
+export const ComDisabled: Story = {
+    name: 'Com tab desabilitada',
+    parameters: {
+        docs: {
+            description: { story: 'Tabs com uma ou mais opções desabilitadas.' },
+        },
+    },
+    args: {
+        items: [
+            { key: 'tab1', label: 'Ativo' },
+            { key: 'tab2', label: 'Pendente' },
+            { key: 'tab3', label: 'Bloqueado', disabled: true },
+        ],
+        activeKey: 'tab1',
+    },
+}
+
+export const LarguraTotal: Story = {
+    name: 'Largura total',
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: { story: 'Use `fullWidth` para distribuir as tabs igualmente no container.' },
+        },
+    },
+    render: () => {
+        const [active, setActive] = useState('tab1')
+        return (
+            <div style={{ width: 400 }}>
+                <Tabs
+                    items={defaultItems}
+                    activeKey={active}
+                    onChange={setActive}
+                    fullWidth
+                />
+            </div>
+        )
+    },
+}
+
+export const DuasAbas: Story = {
+    name: 'Duas abas',
+    parameters: {
+        docs: {
+            description: { story: 'Caso de uso comum: alternar entre dois estados (ex: Ativo / Inativo).' },
+        },
+    },
+    args: {
+        items: [
+            { key: 'active', label: 'Ativo' },
+            { key: 'inactive', label: 'Inativo' },
+        ],
+        activeKey: 'active',
+    },
+}

package/components/Tabs/Tabs.styles.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import { spacing, radius } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const TabsContainer = styled.div<{ $fullWidth?: boolean }>`
+    display: inline-flex;
+    align-items: stretch;
+    padding: ${spacing.spacing4}px;
+    border-radius: ${radius.radius4}px;
+    background-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+`

package/components/Tabs/Tabs.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Button from '../Button'
+import { TabsContainer } from './Tabs.styles'
+import { TabsProps } from './Tabs.types'
+
+const Tabs: React.FC<TabsProps> = ({
+    items,
+    activeKey,
+    onChange,
+    className,
+    fullWidth = false,
+}) => {
+    return (
+        <TabsContainer $fullWidth={fullWidth} className={className} role="tablist">
+            {items.map(item => (
+                <Button
+                    key={item.key}
+                    variant={activeKey === item.key ? 'solid' : 'neutralGhost'}
+                    color={activeKey === item.key ? 'primary' : undefined}
+                    size="sm"
+                    fullWidth={fullWidth}
+                    disabled={item.disabled}
+                    onClick={() => onChange(item.key)}
+                    type="button">
+                    {item.leftIcon}
+                    {item.label}
+                    {item.rightIcon}
+                </Button>
+            ))}
+        </TabsContainer>
+    )
+}
+
+export default Tabs

package/components/Tabs/Tabs.types.ts

@@ -0,0 +1,15 @@
+export interface TabItem {
+    key: string
+    label: string
+    disabled?: boolean
+    leftIcon?: React.ReactNode
+    rightIcon?: React.ReactNode
+}
+
+export interface TabsProps {
+    items: TabItem[]
+    activeKey: string
+    onChange: (key: string) => void
+    className?: string
+    fullWidth?: boolean
+}

package/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Tabs'
+export type { TabsProps, TabItem } from './Tabs.types'

package/components/TextField/TextField.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { EnvelopeIcon, LockIcon, EyeIcon, MagnifyingGlassIcon } from '@phosphor-icons/react'
 import TextField from './TextField'
 import { iconMap, iconOptions } from '../../../stories/utils/icons'
 
@@ -7,48 +8,69 @@ const meta: Meta<typeof TextField> = {
   component: TextField,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component: `
+Campo de texto para entrada de dados pelo usuário.
+
+**Tamanhos:** \`sm\` · \`md\` · \`lg\`
+
+**Tipos suportados:** \`text\` · \`password\` · \`email\` · \`number\` · \`file\`
+
+**Boas práticas:**
+- Sempre use \`label\` para identificar o campo
+- Use \`helperText\` para instruções ou validações
+- Use \`error\` para comunicar erros de validação
+- Ícones devem reforçar o tipo de dado esperado
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
-      description: 'Field label'
+      description: 'Label do campo',
     },
     placeholder: {
       control: 'text',
-      description: 'Input placeholder'
+      description: 'Placeholder do input',
     },
     helperText: {
       control: 'text',
-      description: 'Helper text below input'
+      description: 'Texto auxiliar abaixo do campo',
     },
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'Input size'
+      description: 'Tamanho do campo',
+      table: { defaultValue: { summary: 'md' } },
     },
     type: {
       control: 'select',
       options: ['text', 'password', 'email', 'number', 'file'],
-      description: 'Input type'
+      description: 'Tipo do input HTML',
+      table: { defaultValue: { summary: 'text' } },
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether input is disabled'
+      description: 'Desabilita o campo',
+      table: { defaultValue: { summary: 'false' } },
     },
     requiredSymbol: {
       control: 'boolean',
-      description: 'Show required asterisk'
+      description: 'Exibe asterisco de campo obrigatório',
+      table: { defaultValue: { summary: 'false' } },
     },
     leftIcon: {
       control: 'select',
       options: iconOptions,
-      description: 'Left icon',
+      description: 'Ícone à esquerda do campo',
     },
     rightIcon: {
       control: 'select',
       options: iconOptions,
-      description: 'Right icon',
+      description: 'Ícone à direita do campo',
     },
   },
 }
@@ -58,15 +80,14 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    label: 'Label',
-    placeholder: 'Enter text...',
+    label: 'Nome completo',
+    placeholder: 'Digite seu nome...',
     leftIcon: 'none',
     rightIcon: 'none',
   },
   render: (args) => {
     const leftIcon = args.leftIcon === 'none' ? undefined : iconMap[args.leftIcon as keyof typeof iconMap]
     const rightIcon = args.rightIcon === 'none' ? undefined : iconMap[args.rightIcon as keyof typeof iconMap]
-    
     return (
       <TextField
         label={args.label}
@@ -82,3 +103,105 @@ export const Default: Story = {
     )
   },
 }
+
+export const Tamanhos: Story = {
+  name: 'Tamanhos',
+  parameters: {
+    docs: { description: { story: 'Três tamanhos disponíveis para diferentes densidades de layout.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 360 }}>
+      <TextField label="Pequeno" size="sm" placeholder="sm" />
+      <TextField label="Médio" size="md" placeholder="md" />
+      <TextField label="Grande" size="lg" placeholder="lg" />
+    </div>
+  ),
+}
+
+export const ComHelperText: Story = {
+  name: 'Com helper text',
+  parameters: {
+    docs: { description: { story: 'Use `helperText` para instruções de preenchimento.' } },
+  },
+  args: {
+    label: 'Senha',
+    placeholder: '••••••••',
+    helperText: 'Mínimo de 8 caracteres, com letras e números.',
+    type: 'password',
+  },
+}
+
+export const ComErro: Story = {
+  name: 'Estado de erro',
+  parameters: {
+    docs: { description: { story: 'Use `error` para comunicar falhas de validação.' } },
+  },
+  args: {
+    label: 'E-mail',
+    placeholder: 'seu@email.com',
+    error: { message: 'E-mail inválido.' },
+    value: 'email-invalido',
+  },
+}
+
+export const Desabilitado: Story = {
+  name: 'Estado desabilitado',
+  args: {
+    label: 'Campo desabilitado',
+    placeholder: 'Não editável',
+    disabled: true,
+  },
+}
+
+export const ComIcones: Story = {
+  name: 'Com ícones',
+  parameters: {
+    docs: { description: { story: 'Ícones reforçam o tipo de dado esperado.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 360 }}>
+      <TextField label="E-mail" placeholder="seu@email.com" leftIcon={<EnvelopeIcon />} />
+      <TextField label="Senha" placeholder="••••••••" leftIcon={<LockIcon />} type="password" />
+      <TextField label="Buscar" placeholder="Pesquisar..." leftIcon={<MagnifyingGlassIcon />} />
+      <TextField label="Confirmar senha" placeholder="••••••••" rightIcon={<EyeIcon />} type="password" />
+    </div>
+  ),
+}
+
+export const Obrigatorio: Story = {
+  name: 'Campo obrigatório',
+  parameters: {
+    docs: { description: { story: 'Use `requiredSymbol` para indicar campos obrigatórios.' } },
+  },
+  args: {
+    label: 'Nome completo',
+    placeholder: 'Digite seu nome...',
+    requiredSymbol: true,
+  },
+}
+
+export const ExemploLogin: Story = {
+  name: 'Exemplo: Formulário de login',
+  parameters: {
+    docs: { description: { story: 'Padrão de uso em formulários de autenticação.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 360 }}>
+      <TextField
+        label="E-mail"
+        placeholder="seu@email.com"
+        leftIcon={<EnvelopeIcon />}
+        requiredSymbol
+        type="email"
+      />
+      <TextField
+        label="Senha"
+        placeholder="••••••••"
+        leftIcon={<LockIcon />}
+        requiredSymbol
+        type="password"
+        helperText="Mínimo de 8 caracteres."
+      />
+    </div>
+  ),
+}

package/components/index.ts

@@ -1,4 +1,6 @@
 export { default as Alert } from './Alert'
+export { Badge } from './Badge'
+export type { TBadgeProps } from './Badge'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as DatePicker } from './DatePicker'
@@ -17,3 +19,4 @@ export { ToastProvider, Toaster } from './Toaster'
 export { default as Dialog } from './Dialog'
 export { Combobox } from './Combobox'
 export { default as Table } from './Table'
+export { default as Tabs } from './Tabs'