npm - analytica-frontend-lib - Versions diffs - 1.2.7 → 1.2.9 - Mend

analytica-frontend-lib 1.2.7 → 1.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/Table/index.d.mts CHANGED Viewed

@@ -1,8 +1,47 @@
 import * as react from 'react';
-import { HTMLAttributes, TdHTMLAttributes } from 'react';
+import { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
 type TableVariant = 'default' | 'borderless';
 type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
+type SortDirection = 'asc' | 'desc' | null;
+interface UseTableSortOptions {
+    /** Se true, sincroniza o estado de ordenação com os parâmetros da URL */
+    syncWithUrl?: boolean;
+}
+/**
+ * Hook para gerenciar ordenação de dados da tabela
+ *
+ * @param data - Array de dados a serem ordenados
+ * @param options - Opções de configuração do hook
+ * @returns Objeto com dados ordenados, coluna/direção atual e função de sort
+ *
+ * @example
+ * ```tsx
+ * const activities = [
+ *   { id: 1, name: 'Task A', date: '2024-01-01' },
+ *   { id: 2, name: 'Task B', date: '2024-01-02' },
+ * ];
+ *
+ * // Sem sincronização com URL
+ * const { sortedData, sortColumn, sortDirection, handleSort } = useTableSort(activities);
+ *
+ * // Com sincronização com URL
+ * const { sortedData, sortColumn, sortDirection, handleSort } = useTableSort(activities, { syncWithUrl: true });
+ *
+ * <TableHead
+ *   sortDirection={sortColumn === 'name' ? sortDirection : null}
+ *   onSort={() => handleSort('name')}
+ * >
+ *   Name
+ * </TableHead>
+ * ```
+ */
+declare function useTableSort<T extends Record<string, unknown>>(data: T[], options?: UseTableSortOptions): {
+    sortedData: T[];
+    sortColumn: string | null;
+    sortDirection: SortDirection;
+    handleSort: (column: string) => void;
+};
 interface TableProps extends HTMLAttributes<HTMLTableElement> {
     variant?: TableVariant;
 }
@@ -21,10 +60,19 @@ interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
 declare const TableFooter: react.ForwardRefExoticComponent<TableFooterProps & react.RefAttributes<HTMLTableSectionElement>>;
 interface TableRowPropsExtended extends TableRowProps {
     variant?: TableVariant;
+    clickable?: boolean;
 }
 declare const TableRow: react.ForwardRefExoticComponent<TableRowPropsExtended & react.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Enable sorting on this column (default: true) */
+    sortable?: boolean;
+    /** Current sort direction for this column */
+    sortDirection?: SortDirection;
+    /** Callback when column header is clicked */
+    onSort?: () => void;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
-export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table as default };
+export { type SortDirection, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table as default, useTableSort };

package/dist/Table/index.d.ts CHANGED Viewed

@@ -1,8 +1,47 @@
 import * as react from 'react';
-import { HTMLAttributes, TdHTMLAttributes } from 'react';
+import { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
 type TableVariant = 'default' | 'borderless';
 type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
+type SortDirection = 'asc' | 'desc' | null;
+interface UseTableSortOptions {
+    /** Se true, sincroniza o estado de ordenação com os parâmetros da URL */
+    syncWithUrl?: boolean;
+}
+/**
+ * Hook para gerenciar ordenação de dados da tabela
+ *
+ * @param data - Array de dados a serem ordenados
+ * @param options - Opções de configuração do hook
+ * @returns Objeto com dados ordenados, coluna/direção atual e função de sort
+ *
+ * @example
+ * ```tsx
+ * const activities = [
+ *   { id: 1, name: 'Task A', date: '2024-01-01' },
+ *   { id: 2, name: 'Task B', date: '2024-01-02' },
+ * ];
+ *
+ * // Sem sincronização com URL
+ * const { sortedData, sortColumn, sortDirection, handleSort } = useTableSort(activities);
+ *
+ * // Com sincronização com URL
+ * const { sortedData, sortColumn, sortDirection, handleSort } = useTableSort(activities, { syncWithUrl: true });
+ *
+ * <TableHead
+ *   sortDirection={sortColumn === 'name' ? sortDirection : null}
+ *   onSort={() => handleSort('name')}
+ * >
+ *   Name
+ * </TableHead>
+ * ```
+ */
+declare function useTableSort<T extends Record<string, unknown>>(data: T[], options?: UseTableSortOptions): {
+    sortedData: T[];
+    sortColumn: string | null;
+    sortDirection: SortDirection;
+    handleSort: (column: string) => void;
+};
 interface TableProps extends HTMLAttributes<HTMLTableElement> {
     variant?: TableVariant;
 }
@@ -21,10 +60,19 @@ interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
 declare const TableFooter: react.ForwardRefExoticComponent<TableFooterProps & react.RefAttributes<HTMLTableSectionElement>>;
 interface TableRowPropsExtended extends TableRowProps {
     variant?: TableVariant;
+    clickable?: boolean;
 }
 declare const TableRow: react.ForwardRefExoticComponent<TableRowPropsExtended & react.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Enable sorting on this column (default: true) */
+    sortable?: boolean;
+    /** Current sort direction for this column */
+    sortDirection?: SortDirection;
+    /** Callback when column header is clicked */
+    onSort?: () => void;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
-export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table as default };
+export { type SortDirection, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table as default, useTableSort };

package/dist/Table/index.js CHANGED Viewed

@@ -27,7 +27,8 @@ __export(Table_exports, {
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
-  default: () => Table_default
+  default: () => Table_default,
+  useTableSort: () => useTableSort
 });
 module.exports = __toCommonJS(Table_exports);
 var import_react = require("react");
@@ -40,20 +41,93 @@ function cn(...inputs) {
 }
 // src/components/Table/Table.tsx
+var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime = require("react/jsx-runtime");
+function useTableSort(data, options = {}) {
+  const { syncWithUrl = false } = options;
+  const getInitialState = () => {
+    if (!syncWithUrl || globalThis.window === void 0) {
+      return { column: null, direction: null };
+    }
+    const params = new URLSearchParams(globalThis.location.search);
+    const sortBy = params.get("sortBy");
+    const sort = params.get("sort");
+    if (sortBy && sort && (sort === "ASC" || sort === "DESC")) {
+      return {
+        column: sortBy,
+        direction: sort.toLowerCase()
+      };
+    }
+    return { column: null, direction: null };
+  };
+  const initialState = getInitialState();
+  const [sortColumn, setSortColumn] = (0, import_react.useState)(
+    initialState.column
+  );
+  const [sortDirection, setSortDirection] = (0, import_react.useState)(
+    initialState.direction
+  );
+  (0, import_react.useEffect)(() => {
+    if (!syncWithUrl || globalThis.window === void 0) return;
+    const url = new URL(globalThis.location.href);
+    const params = url.searchParams;
+    if (sortColumn && sortDirection) {
+      params.set("sortBy", sortColumn);
+      params.set("sort", sortDirection.toUpperCase());
+    } else {
+      params.delete("sortBy");
+      params.delete("sort");
+    }
+    globalThis.history.replaceState({}, "", url.toString());
+  }, [sortColumn, sortDirection, syncWithUrl]);
+  const handleSort = (column) => {
+    if (sortColumn === column) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortColumn(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  };
+  const sortedData = (0, import_react.useMemo)(() => {
+    if (!sortColumn || !sortDirection) {
+      return data;
+    }
+    return [...data].sort((a, b) => {
+      const aValue = a[sortColumn];
+      const bValue = b[sortColumn];
+      if (typeof aValue === "string" && typeof bValue === "string") {
+        const comparison = aValue.localeCompare(bValue);
+        return sortDirection === "asc" ? comparison : -comparison;
+      }
+      if (typeof aValue === "number" && typeof bValue === "number") {
+        return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
+      }
+      return 0;
+    });
+  }, [data, sortColumn, sortDirection]);
+  return { sortedData, sortColumn, sortDirection, handleSort };
+}
 var Table = (0, import_react.forwardRef)(
   ({ variant = "default", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: cn(
-        "relative w-full overflow-hidden",
+        "relative w-full overflow-x-auto",
         variant === "default" && "border border-border-200 rounded-xl"
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "table",
         {
           ref,
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn(
+            "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
+            className
+          ),
           ...props,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { className: "sr-only", children: "My Table" }),
@@ -75,15 +149,11 @@ var TableHeader = (0, import_react.forwardRef)(({ className, ...props }, ref) =>
 ));
 TableHeader.displayName = "TableHeader";
 var TableBody = (0, import_react.forwardRef)(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "tbody",
     {
       ref,
-      className: cn(
-        "[&_tr:last-child]:border-0",
-        variant === "default" && "border-t border-border-200",
-        className
-      ),
+      className: cn("[&_tr:last-child]:border-border-200", className),
       ...props
     }
   )
@@ -106,7 +176,7 @@ var TableFooter = (0, import_react.forwardRef)(
 TableFooter.displayName = "TableFooter";
 var VARIANT_STATES_ROW = {
   default: {
-    default: "border-b border-border-200",
+    default: "border border-border-200",
     borderless: ""
   },
   selected: {
@@ -123,7 +193,13 @@ var VARIANT_STATES_ROW = {
   }
 };
 var TableRow = (0, import_react.forwardRef)(
-  ({ variant = "default", state = "default", className, ...props }, ref) => {
+  ({
+    variant = "default",
+    state = "default",
+    clickable = false,
+    className,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "tr",
       {
@@ -131,6 +207,7 @@ var TableRow = (0, import_react.forwardRef)(
         className: cn(
           "transition-colors",
           state !== "disabled" ? "hover:bg-muted/50" : "",
+          clickable && state !== "disabled" ? "cursor-pointer" : "",
           VARIANT_STATES_ROW[state][variant],
           className
         ),
@@ -141,24 +218,49 @@ var TableRow = (0, import_react.forwardRef)(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "th",
-  {
-    ref,
-    className: cn(
-      "h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    ),
+var TableHead = (0, import_react.forwardRef)(
+  ({
+    className,
+    sortable = true,
+    sortDirection = null,
+    onSort,
+    children,
     ...props
+  }, ref) => {
+    const handleClick = () => {
+      if (sortable && onSort) {
+        onSort();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "th",
+      {
+        ref,
+        className: cn(
+          "h-10 px-6 py-3.5 text-left align-middle font-bold text-base text-text-800 tracking-[0.2px] leading-none [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] whitespace-nowrap",
+          sortable && "cursor-pointer select-none hover:bg-muted/30",
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+          children,
+          sortable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+            sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
+            sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
+          ] })
+        ] })
+      }
+    );
   }
-));
+);
 TableHead.displayName = "TableHead";
 var TableCell = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "td",
   {
     ref,
     className: cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5",
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-base font-normal text-text-800 leading-[150%] tracking-normal px-6 py-3.5 whitespace-nowrap",
       className
     ),
     ...props
@@ -186,6 +288,7 @@ var Table_default = Table;
   TableFooter,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  useTableSort
 });
 //# sourceMappingURL=index.js.map

package/dist/Table/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/Table/Table.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, TdHTMLAttributes } from 'react';\nimport { cn } from '../../utils/utils';\n\ntype TableVariant = 'default' \| 'borderless';\ntype TableRowState = 'default' \| 'selected' \| 'invalid' \| 'disabled';\n\ninterface TableProps extends HTMLAttributes<HTMLTableElement> {\n variant?: TableVariant;\n}\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n state?: TableRowState;\n}\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n ({ variant = 'default', className, children, ...props }, ref) => (\n <div\n className={cn(\n 'relative w-full overflow-hidden',\n variant === 'default' && 'border border-border-200 rounded-xl'\n )}\n >\n <table\n ref={ref}\n className={cn('w-full caption-bottom text-sm', className)}\n {...props}\n >\n {/* Fix Sonnar /}\n <caption className=\"sr-only\">My Table</caption>\n {children}\n </table>\n </div>\n )\n);\n\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead\n ref={ref}\n className={cn('[&_tr:first-child]:border-0', className)}\n {...props}\n />\n));\nTableHeader.displayName = 'TableHeader';\n\ninterface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n variant?: TableVariant;\n}\n\nconst TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n ({ variant = 'default', className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-0',\n variant === 'default' && 'border-t border-border-200',\n className\n )}\n {...props}\n />\n )\n);\nTableBody.displayName = 'TableBody';\n\ninterface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {\n variant?: TableVariant;\n}\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(\n ({ variant = 'default', className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'bg-background-50 font-medium [&>tr]:last:border-b-0 px-6 py-3.5',\n variant === 'default' && 'border-t border-border-200',\n className\n )}\n {...props}\n />\n )\n);\nTableFooter.displayName = 'TableFooter';\n\nconst VARIANT_STATES_ROW = {\n default: {\n default: 'border-b border-border-200',\n borderless: '',\n },\n selected: {\n default: 'border-b-2 border-indicator-primary',\n borderless: 'bg-indicator-primary/10',\n },\n invalid: {\n default: 'border-b-2 border-indicator-error',\n borderless: 'bg-indicator-error/10',\n },\n disabled: {\n default:\n 'border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed',\n borderless: 'bg-background-50 opacity-50 cursor-not-allowed',\n },\n} as const;\n\ninterface TableRowPropsExtended extends TableRowProps {\n variant?: TableVariant;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowPropsExtended>(\n ({ variant = 'default', state = 'default', className, ...props }, ref) => {\n return (\n <tr\n ref={ref}\n className={cn(\n 'transition-colors',\n state !== 'disabled' ? 'hover:bg-muted/50' : '',\n VARIANT_STATES_ROW[state][variant],\n className\n )}\n aria-disabled={state === 'disabled'}\n {...props}\n />\n );\n }\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={cn(\n 'h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n className\n )}\n {...props}\n />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn(\n 'border-t border-border-200 text-sm text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport default Table;\nexport {\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/\n Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n \n @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string \| undefined,\n isDark: boolean\n): string \| undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../src/components/Table/Table.tsx","../../src/utils/utils.ts"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n TdHTMLAttributes,\n ThHTMLAttributes,\n useState,\n useMemo,\n useEffect,\n} from 'react';\nimport { cn } from '../../utils/utils';\nimport { CaretUp, CaretDown } from 'phosphor-react';\n\ntype TableVariant = 'default' \| 'borderless';\ntype TableRowState = 'default' \| 'selected' \| 'invalid' \| 'disabled';\nexport type SortDirection = 'asc' \| 'desc' \| null;\n\ninterface UseTableSortOptions {\n /** Se true, sincroniza o estado de ordenação com os parâmetros da URL /\n syncWithUrl?: boolean;\n}\n\n/\n Hook para gerenciar ordenação de dados da tabela\n \n @param data - Array de dados a serem ordenados\n * @param options - Opções de configuração do hook\n * @returns Objeto com dados ordenados, coluna/direção atual e função de sort\n \n @example\n * ```tsx\n * const activities = [\n * { id: 1, name: 'Task A', date: '2024-01-01' },\n * { id: 2, name: 'Task B', date: '2024-01-02' },\n * ];\n \n // Sem sincronização com URL\n * const { sortedData, sortColumn, sortDirection, handleSort } = useTableSort(activities);\n \n // Com sincronização com URL\n * const { sortedData, sortColumn, sortDirection, handleSort } = useTableSort(activities, { syncWithUrl: true });\n \n <TableHead\n * sortDirection={sortColumn === 'name' ? sortDirection : null}\n * onSort={() => handleSort('name')}\n * >\n * Name\n * </TableHead>\n * ```\n /\nexport function useTableSort<T extends Record<string, unknown>>(\n data: T[],\n options: UseTableSortOptions = {}\n) {\n const { syncWithUrl = false } = options;\n\n // Inicializar estado a partir da URL se syncWithUrl estiver habilitado\n const getInitialState = () => {\n if (!syncWithUrl \|\| globalThis.window === undefined) {\n return { column: null, direction: null };\n }\n\n const params = new URLSearchParams(globalThis.location.search);\n const sortBy = params.get('sortBy');\n const sort = params.get('sort');\n\n if (sortBy && sort && (sort === 'ASC' \|\| sort === 'DESC')) {\n return {\n column: sortBy,\n direction: sort.toLowerCase() as SortDirection,\n };\n }\n\n return { column: null, direction: null };\n };\n\n const initialState = getInitialState();\n const [sortColumn, setSortColumn] = useState<string \| null>(\n initialState.column\n );\n const [sortDirection, setSortDirection] = useState<SortDirection>(\n initialState.direction\n );\n\n // Atualizar URL quando o estado de ordenação mudar\n useEffect(() => {\n if (!syncWithUrl \|\| globalThis.window === undefined) return;\n\n const url = new URL(globalThis.location.href);\n const params = url.searchParams;\n\n if (sortColumn && sortDirection) {\n params.set('sortBy', sortColumn);\n params.set('sort', sortDirection.toUpperCase());\n } else {\n params.delete('sortBy');\n params.delete('sort');\n }\n\n // Atualizar URL sem recarregar a página\n globalThis.history.replaceState({}, '', url.toString());\n }, [sortColumn, sortDirection, syncWithUrl]);\n\n const handleSort = (column: string) => {\n if (sortColumn === column) {\n if (sortDirection === 'asc') {\n setSortDirection('desc');\n } else if (sortDirection === 'desc') {\n setSortColumn(null);\n setSortDirection(null);\n }\n } else {\n setSortColumn(column);\n setSortDirection('asc');\n }\n };\n\n const sortedData = useMemo(() => {\n if (!sortColumn \|\| !sortDirection) {\n return data;\n }\n\n return [...data].sort((a, b) => {\n const aValue = a[sortColumn as keyof T];\n const bValue = b[sortColumn as keyof T];\n\n if (typeof aValue === 'string' && typeof bValue === 'string') {\n const comparison = aValue.localeCompare(bValue);\n return sortDirection === 'asc' ? comparison : -comparison;\n }\n\n if (typeof aValue === 'number' && typeof bValue === 'number') {\n return sortDirection === 'asc' ? aValue - bValue : bValue - aValue;\n }\n\n return 0;\n });\n }, [data, sortColumn, sortDirection]);\n\n return { sortedData, sortColumn, sortDirection, handleSort };\n}\n\ninterface TableProps extends HTMLAttributes<HTMLTableElement> {\n variant?: TableVariant;\n}\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n state?: TableRowState;\n}\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n ({ variant = 'default', className, children, ...props }, ref) => (\n <div\n className={cn(\n 'relative w-full overflow-x-auto',\n variant === 'default' && 'border border-border-200 rounded-xl'\n )}\n >\n <table\n ref={ref}\n className={cn(\n 'analytica-table w-full caption-bottom text-sm border-separate border-spacing-0',\n className\n )}\n {...props}\n >\n {/ Fix Sonnar /}\n <caption className=\"sr-only\">My Table</caption>\n {children}\n </table>\n </div>\n )\n);\n\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead\n ref={ref}\n className={cn('[&_tr:first-child]:border-0', className)}\n {...props}\n />\n));\nTableHeader.displayName = 'TableHeader';\n\ninterface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n variant?: TableVariant;\n}\n\nconst TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n ({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn('[&_tr:last-child]:border-border-200', className)}\n {...props}\n />\n )\n);\nTableBody.displayName = 'TableBody';\n\ninterface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {\n variant?: TableVariant;\n}\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(\n ({ variant = 'default', className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'bg-background-50 font-medium [&>tr]:last:border-b-0 px-6 py-3.5',\n variant === 'default' && 'border-t border-border-200',\n className\n )}\n {...props}\n />\n )\n);\nTableFooter.displayName = 'TableFooter';\n\nconst VARIANT_STATES_ROW = {\n default: {\n default: 'border border-border-200',\n borderless: '',\n },\n selected: {\n default: 'border-b-2 border-indicator-primary',\n borderless: 'bg-indicator-primary/10',\n },\n invalid: {\n default: 'border-b-2 border-indicator-error',\n borderless: 'bg-indicator-error/10',\n },\n disabled: {\n default:\n 'border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed',\n borderless: 'bg-background-50 opacity-50 cursor-not-allowed',\n },\n} as const;\n\ninterface TableRowPropsExtended extends TableRowProps {\n variant?: TableVariant;\n clickable?: boolean;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowPropsExtended>(\n (\n {\n variant = 'default',\n state = 'default',\n clickable = false,\n className,\n ...props\n },\n ref\n ) => {\n return (\n <tr\n ref={ref}\n className={cn(\n 'transition-colors',\n state !== 'disabled' ? 'hover:bg-muted/50' : '',\n clickable && state !== 'disabled' ? 'cursor-pointer' : '',\n VARIANT_STATES_ROW[state][variant],\n className\n )}\n aria-disabled={state === 'disabled'}\n {...props}\n />\n );\n }\n);\nTableRow.displayName = 'TableRow';\n\ninterface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {\n /* Enable sorting on this column (default: true) /\n sortable?: boolean;\n /* Current sort direction for this column /\n sortDirection?: SortDirection;\n /* Callback when column header is clicked /\n onSort?: () => void;\n}\n\nconst TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(\n (\n {\n className,\n sortable = true,\n sortDirection = null,\n onSort,\n children,\n ...props\n },\n ref\n ) => {\n const handleClick = () => {\n if (sortable && onSort) {\n onSort();\n }\n };\n\n return (\n <th\n ref={ref}\n className={cn(\n 'h-10 px-6 py-3.5 text-left align-middle font-bold text-base text-text-800 tracking-[0.2px] leading-none [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] whitespace-nowrap',\n sortable && 'cursor-pointer select-none hover:bg-muted/30',\n className\n )}\n onClick={handleClick}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {children}\n {sortable && (\n <div className=\"flex flex-col\">\n {sortDirection === 'asc' && (\n <CaretUp size={16} weight=\"fill\" className=\"text-text-800\" />\n )}\n {sortDirection === 'desc' && (\n <CaretDown size={16} weight=\"fill\" className=\"text-text-800\" />\n )}\n </div>\n )}\n </div>\n </th>\n );\n }\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-base font-normal text-text-800 leading-[150%] tracking-normal px-6 py-3.5 whitespace-nowrap',\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn(\n 'border-t border-border-200 text-sm text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport default Table;\nexport {\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/\n Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n \n @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string \| undefined,\n isDark: boolean\n): string \| undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":[]}

package/dist/Table/index.mjs CHANGED Viewed

@@ -1,5 +1,10 @@
 // src/components/Table/Table.tsx
-import { forwardRef } from "react";
+import {
+  forwardRef,
+  useState,
+  useMemo,
+  useEffect
+} from "react";
 // src/utils/utils.ts
 import { clsx } from "clsx";
@@ -9,20 +14,93 @@ function cn(...inputs) {
 }
 // src/components/Table/Table.tsx
+import { CaretUp, CaretDown } from "phosphor-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function useTableSort(data, options = {}) {
+  const { syncWithUrl = false } = options;
+  const getInitialState = () => {
+    if (!syncWithUrl || globalThis.window === void 0) {
+      return { column: null, direction: null };
+    }
+    const params = new URLSearchParams(globalThis.location.search);
+    const sortBy = params.get("sortBy");
+    const sort = params.get("sort");
+    if (sortBy && sort && (sort === "ASC" || sort === "DESC")) {
+      return {
+        column: sortBy,
+        direction: sort.toLowerCase()
+      };
+    }
+    return { column: null, direction: null };
+  };
+  const initialState = getInitialState();
+  const [sortColumn, setSortColumn] = useState(
+    initialState.column
+  );
+  const [sortDirection, setSortDirection] = useState(
+    initialState.direction
+  );
+  useEffect(() => {
+    if (!syncWithUrl || globalThis.window === void 0) return;
+    const url = new URL(globalThis.location.href);
+    const params = url.searchParams;
+    if (sortColumn && sortDirection) {
+      params.set("sortBy", sortColumn);
+      params.set("sort", sortDirection.toUpperCase());
+    } else {
+      params.delete("sortBy");
+      params.delete("sort");
+    }
+    globalThis.history.replaceState({}, "", url.toString());
+  }, [sortColumn, sortDirection, syncWithUrl]);
+  const handleSort = (column) => {
+    if (sortColumn === column) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortColumn(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  };
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) {
+      return data;
+    }
+    return [...data].sort((a, b) => {
+      const aValue = a[sortColumn];
+      const bValue = b[sortColumn];
+      if (typeof aValue === "string" && typeof bValue === "string") {
+        const comparison = aValue.localeCompare(bValue);
+        return sortDirection === "asc" ? comparison : -comparison;
+      }
+      if (typeof aValue === "number" && typeof bValue === "number") {
+        return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
+      }
+      return 0;
+    });
+  }, [data, sortColumn, sortDirection]);
+  return { sortedData, sortColumn, sortDirection, handleSort };
+}
 var Table = forwardRef(
   ({ variant = "default", className, children, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative w-full overflow-hidden",
+        "relative w-full overflow-x-auto",
         variant === "default" && "border border-border-200 rounded-xl"
       ),
       children: /* @__PURE__ */ jsxs(
         "table",
         {
           ref,
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn(
+            "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
+            className
+          ),
           ...props,
           children: [
             /* @__PURE__ */ jsx("caption", { className: "sr-only", children: "My Table" }),
@@ -44,15 +122,11 @@ var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
 ));
 TableHeader.displayName = "TableHeader";
 var TableBody = forwardRef(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tbody",
     {
       ref,
-      className: cn(
-        "[&_tr:last-child]:border-0",
-        variant === "default" && "border-t border-border-200",
-        className
-      ),
+      className: cn("[&_tr:last-child]:border-border-200", className),
       ...props
     }
   )
@@ -75,7 +149,7 @@ var TableFooter = forwardRef(
 TableFooter.displayName = "TableFooter";
 var VARIANT_STATES_ROW = {
   default: {
-    default: "border-b border-border-200",
+    default: "border border-border-200",
     borderless: ""
   },
   selected: {
@@ -92,7 +166,13 @@ var VARIANT_STATES_ROW = {
   }
 };
 var TableRow = forwardRef(
-  ({ variant = "default", state = "default", className, ...props }, ref) => {
+  ({
+    variant = "default",
+    state = "default",
+    clickable = false,
+    className,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsx(
       "tr",
       {
@@ -100,6 +180,7 @@ var TableRow = forwardRef(
         className: cn(
           "transition-colors",
           state !== "disabled" ? "hover:bg-muted/50" : "",
+          clickable && state !== "disabled" ? "cursor-pointer" : "",
           VARIANT_STATES_ROW[state][variant],
           className
         ),
@@ -110,24 +191,49 @@ var TableRow = forwardRef(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "th",
-  {
-    ref,
-    className: cn(
-      "h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    ),
+var TableHead = forwardRef(
+  ({
+    className,
+    sortable = true,
+    sortDirection = null,
+    onSort,
+    children,
     ...props
+  }, ref) => {
+    const handleClick = () => {
+      if (sortable && onSort) {
+        onSort();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        className: cn(
+          "h-10 px-6 py-3.5 text-left align-middle font-bold text-base text-text-800 tracking-[0.2px] leading-none [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] whitespace-nowrap",
+          sortable && "cursor-pointer select-none hover:bg-muted/30",
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          children,
+          sortable && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            sortDirection === "asc" && /* @__PURE__ */ jsx(CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
+            sortDirection === "desc" && /* @__PURE__ */ jsx(CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
+          ] })
+        ] })
+      }
+    );
   }
-));
+);
 TableHead.displayName = "TableHead";
 var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
     className: cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5",
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-base font-normal text-text-800 leading-[150%] tracking-normal px-6 py-3.5 whitespace-nowrap",
       className
     ),
     ...props
@@ -155,6 +261,7 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-  Table_default as default
+  Table_default as default,
+  useTableSort
 };
 //# sourceMappingURL=index.mjs.map