@liguelead/design-system 0.0.30 → 0.0.32

package/components/DatePicker/DatePicker.tsx

@@ -84,7 +84,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
         const baseId = useId()
         const errorId = `${baseId}-error`
         const inputRef = useRef<HTMLInputElement | null>(null)
-        const [inputValue, setInputValue] = useState(() => 
+        const [inputValue, setInputValue] = useState(() =>
             !isRange && value ? format(value, 'dd/MM/yyyy') : ''
         )
 
@@ -128,8 +128,8 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
                 : typeof error === 'object' &&
                     error !== null &&
                     'message' in error
-                ? String((error as { message?: string }).message ?? '')
-                : undefined
+                    ? String((error as { message?: string }).message ?? '')
+                    : undefined
 
         const handleSingleSelect = (date?: Date) => {
             if (disabled) return
@@ -226,11 +226,11 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             onRangeChange?.(nextRange)
             const serialized = nextRange
                 ? JSON.stringify({
-                        from: nextRange.from
-                            ? serializeDate(nextRange.from)
-                            : null,
-                        to: nextRange.to ? serializeDate(nextRange.to) : null
-                    })
+                    from: nextRange.from
+                        ? serializeDate(nextRange.from)
+                        : null,
+                    to: nextRange.to ? serializeDate(nextRange.to) : null
+                })
                 : ''
 
             register?.onChange({
@@ -247,7 +247,6 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
                         mode="range"
                         selected={rangeValue}
                         onSelect={handleRangeSelect}
-                        
                         captionLayout={appliedCaptionLayout}
                         navLayout="around"
                         fromYear={resolvedStartYear}
@@ -355,7 +354,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
                         </DatePickerTriggerWrapper>
 
                         <Popover.Portal>
-                            <DatePickerContent sideOffset={8} align="start">
+                            <DatePickerContent sideOffset={2} align="center">
                                 {picker}
                             </DatePickerContent>
                         </Popover.Portal>

package/components/IconButton/IconButton.sizes.ts

@@ -4,11 +4,11 @@ import { ButtonSizeTypes } from '../Button/Button.types'
 export const IconButtonSizes = (size: ButtonSizeTypes) => {
   const sizes = {
     sm: `
-        padding: ${spacing.spacing12}px ${spacing.spacing12}px;
+        padding: ${spacing.spacing8}px ${spacing.spacing8}px;
         border-radius: ${spacing.spacing4}px;
         & svg {
-            width: ${spacing.spacing16}px !important;
-            height: ${spacing.spacing16}px;
+            width: ${spacing.spacing20}px;
+            height: ${spacing.spacing20}px;
         }
       `,
     md: `
@@ -16,16 +16,16 @@ export const IconButtonSizes = (size: ButtonSizeTypes) => {
         border-radius: ${spacing.spacing4}px;
         min-width: ${spacing.spacing36}px;
         & svg {
-            width: ${spacing.spacing16}px;
-            height: ${spacing.spacing16}px;
+            width: ${spacing.spacing20}px;
+            height: ${spacing.spacing20}px;
         }
     `,
     lg: `
         padding: ${spacing.spacing12}px ${spacing.spacing12}px;
         border-radius: ${spacing.spacing4}px;
         & svg {
-            width: ${spacing.spacing16}px;
-            height: ${spacing.spacing16}px;
+            width: ${spacing.spacing20}px;
+            height: ${spacing.spacing20}px;
         }
     `
   }

package/components/IconButton/IconButton.tsx

@@ -32,7 +32,6 @@ const IconButton: React.FC<ButtonProps> = ({
         }
         setRipples(prev => [...prev, newRipple])
 
-        // Chama o onClick fornecido
         if (onClick) {
             onClick(e)
         }

package/components/InputOpt/InputOpt.stories.tsx

@@ -4,48 +4,18 @@ import InputOpt from './InputOpt'
 const meta: Meta<typeof InputOpt> = {
   title: 'Form/InputOpt',
   component: InputOpt,
-  parameters: {
-    layout: 'centered',
-  },
+  parameters: { layout: 'centered' },
   tags: ['autodocs'],
   argTypes: {
-    length: {
-      control: 'number',
-      description: 'Number of input fields'
-    },
-    label: {
-      control: 'text',
-      description: 'Input label'
-    },
-    helperText: {
-      control: 'text',
-      description: 'Helper text below input'
-    },
-    placeholderChar: {
-      control: 'text',
-      description: 'Placeholder character for empty fields'
-    },
-    inputMode: {
-      control: 'select',
-      options: ['numeric', 'text'],
-      description: 'Input mode for mobile keyboards'
-    },
-    autoFocus: {
-      control: 'boolean',
-      description: 'Auto focus first input on mount'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether inputs are disabled'
-    },
-    requiredSymbol: {
-      control: 'boolean',
-      description: 'Show required asterisk'
-    },
-    error: {
-      control: 'boolean',
-      description: 'Whether inputs have error state'
-    }
+    length: { control: 'number', description: 'Número de campos' },
+    label: { control: 'text', description: 'Label do campo' },
+    helperText: { control: 'text', description: 'Texto auxiliar abaixo do campo' },
+    placeholderChar: { control: 'text', description: 'Caractere placeholder para campos vazios' },
+    inputMode: { control: 'select', options: ['numeric', 'text'], description: 'Modo do teclado mobile' },
+    autoFocus: { control: 'boolean', description: 'Foca o primeiro campo automaticamente' },
+    disabled: { control: 'boolean', description: 'Desabilita todos os campos' },
+    requiredSymbol: { control: 'boolean', description: 'Exibe asterisco de campo obrigatório' },
+    error: { control: 'boolean', description: 'Estado de erro' },
   },
 }
 
@@ -53,9 +23,25 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    label: 'Verification Code',
-    length: 6,
-  },
+  args: { label: 'Código de verificação', length: 6 },
 }
 
+export const Desabilitado: Story = {
+  name: 'Estado desabilitado',
+  args: { label: 'Código de verificação', length: 6, disabled: true },
+}
+
+export const ComErro: Story = {
+  name: 'Estado de erro',
+  args: { label: 'Código de verificação', length: 6, error: true, helperText: 'Código inválido. Tente novamente.' },
+}
+
+export const Alfanumerico: Story = {
+  name: 'Alfanumérico',
+  args: { label: 'Código de convite', length: 8, inputMode: 'text', placeholderChar: '_' },
+}
+
+export const PIN4Digitos: Story = {
+  name: 'PIN de 4 dígitos',
+  args: { label: 'PIN de acesso', length: 4, inputMode: 'numeric' },
+}

package/components/Select/Select.stories.tsx

@@ -1,45 +1,69 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Select from './Select'
 
+const defaultOptions = [
+  { label: 'São Paulo', value: 'sp' },
+  { label: 'Rio de Janeiro', value: 'rj' },
+  { label: 'Minas Gerais', value: 'mg' },
+  { label: 'Bahia', value: 'ba' },
+  { label: 'Paraná', value: 'pr' },
+]
+
 const meta: Meta<typeof Select> = {
   title: 'Form/Select',
   component: Select,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Campo de seleção para escolha de uma opção em uma lista.
+
+**Quando usar:**
+- Listas com mais de 5 opções (abaixo disso, prefira RadioButton)
+- Quando o espaço é limitado
+
+**Boas práticas:**
+- Sempre defina um \`placeholder\` descritivo
+- Use \`helperText\` para orientar a escolha
+- Use \`requiredSymbol\` em campos obrigatórios
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
-  args: {
-    options: [],
-  },
   argTypes: {
     label: {
       control: 'text',
-      description: 'Select label',
+      description: 'Label do select',
     },
     placeholder: {
       control: 'text',
-      description: 'Select placeholder',
+      description: 'Placeholder quando nenhuma opção está selecionada',
     },
     helperText: {
       control: 'text',
-      description: 'Helper text below select',
+      description: 'Texto auxiliar abaixo do select',
     },
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'Select size',
+      description: 'Tamanho do select',
+      table: { defaultValue: { summary: 'md' } },
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether select is disabled',
+      description: 'Desabilita o select',
+      table: { defaultValue: { summary: 'false' } },
     },
     requiredSymbol: {
       control: 'boolean',
-      description: 'Show required asterisk',
+      description: 'Exibe asterisco de campo obrigatório',
+      table: { defaultValue: { summary: 'false' } },
     },
     options: {
       control: 'object',
-      description: 'Options for the select dropdown',
+      description: 'Array de opções `{ label, value }`',
     },
   },
 }
@@ -47,17 +71,54 @@ const meta: Meta<typeof Select> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const defaultOptions = [
-  { label: 'Option 1', value: 'option1' },
-  { label: 'Option 2', value: 'option2' },
-  { label: 'Option 3', value: 'option3' },
-  { label: 'Option 4', value: 'option4' },
-]
-
 export const Default: Story = {
   args: {
-    label: 'Select an option',
-    placeholder: 'Choose...',
+    label: 'Estado',
+    placeholder: 'Selecione um estado...',
+    options: defaultOptions,
+  },
+}
+
+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: 320 }}>
+      <Select label="Pequeno" size="sm" placeholder="sm" options={defaultOptions} />
+      <Select label="Médio" size="md" placeholder="md" options={defaultOptions} />
+      <Select label="Grande" size="lg" placeholder="lg" options={defaultOptions} />
+    </div>
+  ),
+}
+
+export const ComHelperText: Story = {
+  name: 'Com helper text',
+  args: {
+    label: 'Categoria',
+    placeholder: 'Selecione...',
+    helperText: 'Escolha a categoria que melhor descreve o item.',
+    options: defaultOptions,
+  },
+}
+
+export const Desabilitado: Story = {
+  name: 'Estado desabilitado',
+  args: {
+    label: 'País',
+    placeholder: 'Brasil',
+    disabled: true,
+    options: defaultOptions,
+  },
+}
+
+export const Obrigatorio: Story = {
+  name: 'Campo obrigatório',
+  args: {
+    label: 'Estado',
+    placeholder: 'Selecione um estado...',
+    requiredSymbol: true,
     options: defaultOptions,
   },
 }

package/components/Select/Select.tsx

@@ -42,15 +42,13 @@ const Select = forwardRef<HTMLInputElement, SelectProps>(
         const [open, setOpen] = useState(false)
 
         const handleOnChange = (value: string) => {
-            if (value) {
-                setSelectValue(value)
-                register?.onChange({
-                    target: {
-                        name: register.name,
-                        value
-                    }
-                })
-            }
+            setSelectValue(value)
+            register?.onChange({
+                target: {
+                    name: register.name,
+                    value
+                }
+            })
         }
 
         const state = getState(disabled, !!error)

package/components/Table/Datatable.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Table from './Table'
+import { DatatableColumnFilters, TableQueryState } from './Table.types'
+import { ORDER_DATA, DATATABLE_COLUMNS } from './stories.fixtures'
+
+const meta: Meta = {
+    title: 'Data Display/Datatable',
+    component: Table,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: `
+Variante \`datatable\` do componente Table — focada em filtragem por coluna.
+
+**Tipos de filtro disponíveis:**
+- \`text\` — campo de texto livre
+- \`select\` — dropdown com opções predefinidas
+- \`dateRange\` — seletor de intervalo de datas
+
+**Modos de operação:**
+- \`mode="client"\` (padrão) — filtragem e paginação feitas no browser
+- \`mode="server"\` — todo o estado é emitido via \`onQueryChange\`, o servidor processa
+
+**Controle de estado:**
+- Não-controlado: estado interno gerenciado pelo componente
+- Controlado: passe \`datatableColumnFiltersValue\` + \`onDatatableColumnFiltersChange\`
+                `,
+            },
+        },
+    },
+    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: 'Clique no cabeçalho de qualquer coluna filtrável para abrir o menu de filtro.' } },
+    },
+    render: () => (
+        <Table
+            variant="datatable"
+            data={ORDER_DATA}
+            columns={DATATABLE_COLUMNS}
+            pageSize={5}
+            footerText={footer}
+        />
+    ),
+}
+
+export const ComToolbar: Story = {
+    name: 'Com toolbar completa',
+    parameters: {
+        docs: { description: { story: 'Busca global + visibilidade de colunas + botão de limpar todos os filtros.' } },
+    },
+    render: () => (
+        <Table
+            variant="datatable"
+            data={ORDER_DATA}
+            columns={DATATABLE_COLUMNS}
+            pageSize={5}
+            datatableEnableGlobalSearch
+            datatableEnableColumnVisibility
+            datatableEnableClearFilters
+            footerText={footer}
+        />
+    ),
+}
+
+export const Controlado: Story = {
+    name: 'Controlado',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Estado dos filtros gerenciado externamente. O JSON abaixo reflete o estado em tempo real.',
+            },
+        },
+    },
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [filters, setFilters] = useState<DatatableColumnFilters>({
+            customer: { type: 'text', value: 'João' },
+        })
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                <Table
+                    variant="datatable"
+                    data={ORDER_DATA}
+                    columns={DATATABLE_COLUMNS}
+                    pageSize={5}
+                    datatableColumnFiltersValue={filters}
+                    onDatatableColumnFiltersChange={setFilters}
+                    footerText={footer}
+                />
+                <pre style={{ fontSize: 12, background: '#f5f5f5', padding: 12, borderRadius: 6, margin: 0 }}>
+                    {JSON.stringify(filters, null, 2)}
+                </pre>
+            </div>
+        )
+    },
+}
+
+export const ServerMode: Story = {
+    name: 'Server mode',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Com `mode="server"`, qualquer mudança de filtro, paginação ou busca emite o `queryState` completo via `onQueryChange`.',
+            },
+        },
+    },
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [queryState, setQueryState] = useState<TableQueryState | null>(null)
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                <Table
+                    variant="datatable"
+                    mode="server"
+                    data={ORDER_DATA}
+                    columns={DATATABLE_COLUMNS}
+                    pageSize={5}
+                    pageCount={2}
+                    totalRows={10}
+                    filteredRows={10}
+                    onQueryChange={setQueryState}
+                    footerText={footer}
+                />
+                {queryState && (
+                    <pre style={{ fontSize: 12, background: '#f5f5f5', padding: 12, borderRadius: 6, margin: 0 }}>
+                        {JSON.stringify(queryState, null, 2)}
+                    </pre>
+                )}
+            </div>
+        )
+    },
+}
+
+export const ComExportacao: Story = {
+    name: 'Com exportação',
+    parameters: {
+        docs: {
+            description: {
+                story: 'O `queryState` passado para `onExport` inclui os filtros ativos no momento do clique.',
+            },
+        },
+    },
+    render: () => (
+        <Table
+            variant="datatable"
+            data={ORDER_DATA}
+            columns={DATATABLE_COLUMNS}
+            pageSize={5}
+            onExport={(_state: TableQueryState) => {
+                console.log('[Datatable Export]', _state)
+                alert('Exportação disparada — veja o console.')
+            }}
+            exportButton={{ label: 'Exportar', variant: 'neutralOutline' }}
+            footerText={footer}
+        />
+    ),
+}
+
+export const SemDados: Story = {
+    name: 'Sem dados',
+    parameters: {
+        docs: { description: { story: 'Estado vazio do datatable.' } },
+    },
+    render: () => (
+        <Table
+            variant="datatable"
+            data={[]}
+            columns={DATATABLE_COLUMNS}
+            emptyTitle="Nenhum registro encontrado."
+        />
+    ),
+}