@woovi/ui 6.8.27 → 6.9.0

package/dist/llms.txt

@@ -1049,6 +1049,85 @@ import {
 - TableToggleViewModel: https://storybook.woovi.design/?path=/docs/components-table-tabletoggleviewmodel--docs
 - TablePixEMV: https://storybook.woovi.design/?path=/docs/components-table-tablepixemv--docs
 
+## MuiTable
+
+Tabela MUI com paginação, seleção de linhas e multiplos tipos de celula. Substitui o pacote `@woovi/table` (descontinuado). Use com `useRelayPagination` de `@woovi/hooks` para consumers Relay.
+
+```tsx
+import { Table, TableRelayPagination, CELL_TYPES, useTableProps } from '@woovi/ui';
+import type { TableColumn } from '@woovi/ui';
+import { useRelayPagination } from '@woovi/hooks';
+
+// Definicao de colunas
+const columns: TableColumn<User>[] = [
+  { property: 'name',      type: CELL_TYPES.STRING,   header: { label: 'Nome' } },
+  { property: 'email',     type: CELL_TYPES.STRING,   header: { label: 'E-mail' } },
+  { property: 'amount',    type: CELL_TYPES.CURRENCY, header: { label: 'Saldo' } },
+  { property: 'createdAt', type: CELL_TYPES.DATETIME, header: { label: 'Data' } },
+  // Renderizacao customizada
+  {
+    property: 'status',
+    header: { label: 'Status' },
+    renderRow: (value) => <StatusChip status={value} />,
+  },
+  // Link para rota interna
+  {
+    property: 'id',
+    type: CELL_TYPES.LINK,
+    header: { label: 'ID' },
+    getClickPath: (value) => `/transactions/${value}`,
+  },
+  // Menu de acoes
+  {
+    property: 'id',
+    type: CELL_TYPES.ACTIONS,
+    header: { label: '' },
+    actions: [
+      { label: 'Editar',  action: (row) => handleEdit(row) },
+      { label: 'Excluir', action: (row) => handleDelete(row) },
+    ],
+  },
+];
+
+// Table simples (dados em memoria)
+const { isLoading, quantityPerPage, setQuantityPerPage } = useTableProps();
+<Table
+  columns={columns}
+  rows={users}
+  isLoading={isLoading}
+  emptyMessage="Nenhum resultado encontrado"
+  rowsPerPage={quantityPerPage}
+  totalItems={users.length}
+  firstItemIndex={0}
+  lastItemIndex={users.length}
+  handleRowsPerPageChange={setQuantityPerPage}
+  handlePageChange={() => {}}
+  isSelectable={false}
+  isRowClickEnabled={() => false}
+  fixedHeader={false}
+  height="auto"
+  onSelectedRowsChange={() => {}}
+  onRowCheck={() => {}}
+  onSelectAllCheck={() => {}}
+  selectedRows={[]}
+/>
+
+// TableRelayPagination — consumer Relay com useRelayPagination
+const { edges, paginationProps } = useRelayPagination({ connection, relay });
+<TableRelayPagination
+  columns={columns}
+  edges={edges}
+  isLoading={isLoading}
+  emptyMessage="Nenhum resultado"
+  {...paginationProps}
+/>
+```
+
+Tipos de célula disponíveis em CELL_TYPES: STRING, CURRENCY, DATE, TIME, DATETIME, LINK, ICON, ACTIONS, CHECKBOX, EDITABLE, TAG. Use `renderRow` para renderização JSX customizada em qualquer coluna.
+
+- Table: https://storybook.woovi.design/?path=/docs/components-muitable-table--docs
+- TableRelayPagination: https://storybook.woovi.design/?path=/docs/components-muitable-table--relay-pagination
+
 ## Tag
 
 Componentes de tag e status.

package/dist/muiTable/Body.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from './Table.tsx';
+type Props<T> = {
+    emptyMessage: string;
+    isSelectable: boolean;
+    isRowSelected: (row: NodeT<T>) => boolean;
+    isRowDisabled?: (row: NodeT<T>) => boolean;
+    onRowCheck: (row: NodeT<T>, checked: boolean) => void;
+    onRowClick: (row: NodeT<T>) => void;
+    isRowClickEnabled: (row: NodeT<T>) => boolean;
+    rows: NodeT<T>[];
+    columns: TableColumn<T>[];
+    extraRow?: any[];
+};
+declare const TableBody: <T extends object>(props: Props<T>) => ReactNode;
+export default TableBody;

package/dist/muiTable/Footer.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    rowsPerPage: number;
+    firstItemIndex: number;
+    totalItems: number;
+    handlePageChange: (state: boolean) => void;
+    handleRowsPerPageChange: (value: number) => void;
+};
+declare const TableFooter: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default TableFooter;

package/dist/muiTable/Header.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from './Table.tsx';
+type Props<T> = {
+    selectedRows: NodeT<T>[];
+    rows: NodeT<T>[];
+    columns: TableColumn<T>[];
+    onSelectAllCheck: (rows: NodeT<T>[]) => void;
+    isSelectable: boolean;
+};
+declare const TableHeader: <T extends object>(props: Props<T>) => ReactNode;
+export default TableHeader;

package/dist/muiTable/Table.d.ts

@@ -0,0 +1,85 @@
+import type { TableProps } from '@mui/material/Table';
+import type { ReactNode } from 'react';
+export type NodeT<T> = {
+    id?: string;
+} & T;
+export type Edge<T> = {
+    node: NodeT<T>;
+};
+export type Action<T> = {
+    label: string;
+    disabled?: boolean;
+    action: (row: T) => void;
+};
+export type Sort<T> = {
+    order: 'desc' | 'asc' | undefined;
+    orderBy: string;
+    onSort: (column: TableColumn<T>) => void;
+};
+export type TableColumn<T> = {
+    property: string | ((row: NodeT<T>) => string);
+    header?: {
+        label: string;
+        icon?: string;
+        type?: string;
+        onChange?: (value: string, row: NodeT<T>) => void;
+    };
+    onChange?: (value: string, row: NodeT<T>) => void;
+    icon?: string | ((row: T) => string);
+    rightIcon?: string | ((row: T) => string);
+    type?: string;
+    clickPath?: string | ((row: T) => string);
+    renderRow?: (value: string, row: NodeT<T>) => any;
+    onClick?: (row: T, rowIndex?: number) => void;
+    actions?: Action<T>[] | ((row: T) => Action<T>[]);
+    shouldShowRow?: (row: T, column: TableColumn<T>) => boolean;
+    minWidth?: number;
+    value?: string;
+    cellProps?: Record<string, unknown>;
+    sort?: Sort<T>;
+    isColumnChecked?: (row: T) => boolean;
+    onColumnCheck?: (row: T) => void;
+    isColumnDisabled?: (row: T) => boolean;
+    route?: {
+        value: string;
+        params: Record<string, unknown>;
+    };
+    format?: string;
+    getClickPath?: (value: any, row: NodeT<T>) => string | undefined;
+};
+export type TableColumns<T> = TableColumn<T>[];
+export type Props<T> = {
+    onRowClick?: (row: T) => void;
+    isRowClickEnabled: (row: T) => boolean;
+    columns: TableColumn<T>[];
+    rows: NodeT<T>[];
+    height: string;
+    hideFooter?: boolean;
+    fixedHeader: boolean;
+    isLoading?: boolean;
+    emptyMessage: string;
+    handleRowsPerPageChange: (quantity: number) => void;
+    rowsPerPage: number;
+    totalItems: number;
+    firstItemIndex: number;
+    lastItemIndex: number;
+    handlePageChange: (isForward: boolean) => void;
+    isSelectable: boolean;
+    onSelectedRowsChange: (selectedRows: NodeT<T>[]) => void;
+    onRowCheck: (row: T, checkedState: boolean) => void;
+    onSelectAllCheck: (selectedRows: NodeT<T>[]) => void;
+    selectedRows: T[];
+    isRowSelected?: (row: T) => boolean;
+    handleLoading?: (value: boolean, callback: () => void) => void;
+    setIsLoading?: (value: boolean) => void;
+    currentSort?: any;
+    onSort?: (column: TableColumn<T>) => void;
+    showCheckbox?: boolean;
+    sortColumns?: string[];
+    columnsNames?: string[];
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+    staticContext?: any;
+} & TableProps;
+declare const Table: <T extends object>(props: Props<T>) => ReactNode;
+export default Table;

package/dist/muiTable/TableRelayPagination.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { Edge, Props as TableProps } from './Table.tsx';
+export type TableRelayPaginationProps<T extends object> = {
+    edges: Edge<T>[];
+} & Omit<TableProps<T>, 'rows'>;
+declare const TableRelayPagination: <T extends object>({ edges, columns, ...props }: TableRelayPaginationProps<T>) => ReactNode;
+export default TableRelayPagination;

package/dist/muiTable/cells/Cell.d.ts

@@ -0,0 +1,12 @@
+import type { TableCellProps } from '@mui/material/TableCell';
+import type { ReactNode } from 'react';
+import type { TableColumn } from '../Table.tsx';
+type Props<T> = Omit<TableCellProps, 'onClick'> & {
+    onClick?: any;
+    column: TableColumn<T>;
+    cellProps?: Record<string, any>;
+    children: React.ReactNode;
+    staticContext?: any;
+};
+declare const Cell: <T extends object>(props: Props<T>) => ReactNode;
+export default Cell;

package/dist/muiTable/cells/CellCheckbox.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column?: TableColumn<T>;
+    row?: NodeT<T>;
+    cellProps?: Record<string, any>;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange: () => void;
+    indeterminateIcon?: React.ReactNode;
+    checkedIcon?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    dataTestID?: string;
+};
+declare const CellCheckbox: <T extends object>(props: Props<T>) => ReactNode;
+export default CellCheckbox;

package/dist/muiTable/cells/CellCurrency.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    onClick?: () => void;
+    cellProps?: Record<string, any>;
+};
+declare const CellCurrency: <T extends Record<string, unknown>>(props: Props<T>) => ReactNode;
+export default CellCurrency;

package/dist/muiTable/cells/CellCustom.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    cellProps?: Record<string, any>;
+    onClick?: () => void;
+};
+declare const CellCustom: <T extends object>(props: Props<T>) => ReactNode;
+export default CellCustom;

package/dist/muiTable/cells/CellDate.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    onClick?: () => void;
+    cellProps?: Record<string, any>;
+};
+declare const CellDate: <T extends Record<string, unknown>>(props: Props<T>) => ReactNode;
+export default CellDate;

package/dist/muiTable/cells/CellEditable.d.ts

@@ -0,0 +1,11 @@
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column?: TableColumn<T>;
+    row?: NodeT<T>;
+    onChange: (value: string, row: NodeT<T>) => void;
+    cellProps?: Record<string, any>;
+    header?: boolean;
+    value?: string;
+};
+declare const CellEditable: <T extends object>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default CellEditable;

package/dist/muiTable/cells/CellIcon.d.ts

@@ -0,0 +1,8 @@
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    cellProps?: Record<string, any>;
+};
+declare const CellIcon: <T extends object>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default CellIcon;

package/dist/muiTable/cells/CellLink.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    cellProps?: Record<string, unknown>;
+    onClick?: () => void;
+};
+declare const CellLink: <T extends object>(props: Props<T>) => ReactNode;
+export default CellLink;

package/dist/muiTable/cells/CellString.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    cellProps?: {
+        onClick?: any;
+        [key: string]: any;
+    };
+};
+declare const CellString: <T extends object>(props: Props<T>) => ReactNode;
+export default CellString;

package/dist/muiTable/cells/CellTags.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Props<T> = {
+    column: TableColumn<T>;
+    row: NodeT<T>;
+    onClick?: () => void;
+};
+declare const CellTags: <T extends {
+    tags?: string[];
+}>(props: Props<T>) => ReactNode;
+export default CellTags;

package/dist/muiTable/cells/RenderCell.d.ts

@@ -0,0 +1,12 @@
+import type { NodeT, TableColumn } from '../Table.tsx';
+type Row = NodeT<{
+    emptyMessage?: string;
+    tags?: string[];
+}> & Record<string, any>;
+type CellProps = {
+    row: Row;
+    column: TableColumn<Row>;
+    cellProps: Record<string, unknown>;
+};
+declare const RenderCell: (props: CellProps) => import("react/jsx-runtime").JSX.Element;
+export default RenderCell;

package/dist/muiTable/cells/cellTypes.d.ts

@@ -0,0 +1,15 @@
+declare const CELL_TYPES: {
+    TIME: string;
+    DATE: string;
+    DATETIME: string;
+    EMPTY: string;
+    STRING: string;
+    ICON: string;
+    ACTIONS: string;
+    CHECKBOX: string;
+    EDITABLE: string;
+    LINK: string;
+    CURRENCY: string;
+    TAG: string;
+};
+export default CELL_TYPES;

package/dist/muiTable/cells/index.d.ts

@@ -0,0 +1,8 @@
+export { default as CellString } from './CellString.tsx';
+export { default as CellCheckbox } from './CellCheckbox.tsx';
+export { default as CellCustom } from './CellCustom.tsx';
+export { default as CellDate } from './CellDate.tsx';
+export { default as CellIcon } from './CellIcon.tsx';
+export { default as CellEditable } from './CellEditable.tsx';
+export { default as CellLink } from './CellLink.tsx';
+export { default as CELL_TYPES } from './cellTypes.ts';

package/dist/muiTable/useTableProps.d.ts

@@ -0,0 +1,7 @@
+export declare const useTableProps: () => {
+    isLoading: boolean;
+    setIsLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    quantityPerPage: number;
+    setQuantityPerPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleLoading: (value: boolean, callback: () => void) => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@woovi/ui",
   "description": "Woovi UI component library",
-  "version": "6.8.27",
+  "version": "6.9.0",
   "packageManager": "pnpm@10.28.1",
   "author": "Woovi",
   "dependencies": {
@@ -14,12 +14,13 @@
     "@mui/x-data-grid-pro": "8.27.1",
     "@mui/x-license": "^8.26.0",
     "@tanstack/react-virtual": "3.13.18",
-    "@woovi-private/release": "^1.0.0",
+    "@woovi-private/release": "^1.1.0",
     "brazilian-values": "0.13.1",
     "dot-object": "2.1.5",
     "formik": "3.0.0-next.6",
     "i18next": "^23.16.5",
     "i18next-browser-languagedetector": "8.2.1",
+    "lodash": "^4.17.21",
     "libphonenumber-js": "1.12.36",
     "mime-types": "3.0.2",
     "moment": "2.30.1",
@@ -43,8 +44,8 @@
     "zx": "^8.8.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.8",
-    "@chromatic-com/storybook": "^5.0.0",
+    "@biomejs/biome": "^2.4.11",
+    "@chromatic-com/storybook": "^5.1.1",
     "@eslint/js": "^9.39.1",
     "@mui/x-date-pickers-pro": "^8.27.2",
     "@octokit/rest": "^22.0.1",
@@ -52,24 +53,25 @@
     "@rsbuild/plugin-react": "^1.4.5",
     "@rslib/core": "^0.19.5",
     "@rspack/core": "^1.7.5",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-mcp": "^0.4.2",
-    "@storybook/addon-onboarding": "^10.3.3",
-    "@storybook/addon-vitest": "^10.3.3",
-    "@storybook/react-vite": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-mcp": "^0.5.0",
+    "@storybook/addon-onboarding": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@types/dot-object": "^2.1.6",
-    "@types/node": "^25.3.3",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^25.6.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^18.2.1",
     "@typescript/native-preview": "7.0.0-dev.20260207.1",
     "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.4",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.7",
+    "eslint-plugin-storybook": "^10.3.5",
     "generate-changelog": "^1.8.0",
     "glob": "^13.0.1",
     "globals": "^17.3.0",
@@ -77,12 +79,12 @@
     "moment-timezone": "^0.6.0",
     "playwright": "^1.58.2",
     "simple-git": "^3.30.0",
-    "storybook": "^10.3.3",
-    "turbo": "^2.8.20",
+    "storybook": "^10.3.5",
+    "turbo": "^2.9.6",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.4"
   },
   "engines": {
     "node": ">=18.0.0"