avine-react-components - npm Package Compare versions

Comparing version 0.1.22 to 0.1.23

dist/components/table/table.d.ts

@@ -25,2 +25,5 @@ import { FC } from 'react';
     formatter?: (value: any) => unknown;
+    events?: {
+        onClick: () => unknown;
+    };
 }
@@ -27,0 +30,0 @@ declare const Table: FC<TableProps>;

dist/components/table/table.js

@@ -41,44 +41,12 @@ "use strict";
 var import_react = require("react");
-
-// src/components/table/utils.ts
-var orderByAsc = (data, key) => {
-  const collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
-  return data.sort((a4, b3) => collator.compare(a4[key.toString()], b3[key.toString()]));
-};
-var orderByDesc = (data) => data.reverse();
-var sortData = (key, columns, data) => {
-  const column = columns.find((x4) => x4.key.toString() === key.toString());
-  if (column) {
-    const order = column.sortableOrder === "asc" /* Asc */ ? "desc" /* Desc */ : "asc" /* Asc */;
-    let sortedArray = [];
-    if (order === "asc" /* Asc */)
-      sortedArray = orderByAsc(data, key);
-    if (order === "desc" /* Desc */)
-      sortedArray = orderByDesc(data);
-    const sortedColumns = columns.map((col) => {
-      if (col.key.toString() === key.toString())
-        col.sortableOrder = order;
-      if (col.key.toString() !== key.toString())
-        col.sortableOrder = void 0;
-      return col;
-    });
-    return { columns: sortedColumns, data: sortedArray };
-  }
-  return { columns, data };
-};
-var getNestedValues = (key, obj) => {
-  return key.reduce((previous, current) => previous && previous[current] ? previous[current] : null, obj);
-};
-
-// src/hooks/use-pagination.ts
 var MAX_BUTTONS_PER_VIEW = 7;
-var usePagination = (columns, data, rowsPerPage) => {
+var usePagination = (data, rowsPerPage) => {
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
   const maxPages = (0, import_react.useMemo)(() => {
     const totalPages = Math.ceil(data.length / rowsPerPage);
-    if (totalPages < currentPage)
+    if (currentPage > 1 && totalPages < currentPage)
       setCurrentPage(totalPages);
     return totalPages;
   }, [data, rowsPerPage]);
-  const pages = (0, import_react.useMemo)(() => {
+  const pagination = (0, import_react.useMemo)(() => {
     if (data.length > 0) {
@@ -157,4 +125,2 @@ if (maxPages <= 1)
   }, [data, currentPage, rowsPerPage]);
-  const [tableColumns, setTableColumns] = (0, import_react.useState)(columns);
-  const [tableData, setTableData] = (0, import_react.useState)(data.slice(startIndex, endIndex));
   const handlePreviousPage = () => {
@@ -172,23 +138,44 @@ if (currentPage > 1)
   };
-  const handleSortData = (column) => {
-    if (column.sortable) {
-      const { columns: sortedColumn, data: sortedData } = sortData(column.key, tableColumns, data);
-      setTableColumns(sortedColumn);
-      setTableData(sortedData.slice(startIndex, endIndex));
-    }
-    return void 0;
-  };
   return {
     maxPages,
     currentPage,
-    tableColumns,
-    tableData,
-    pages,
+    pagination,
+    startIndex,
+    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange,
-    handleSortData
+    handlePageChange
   };
 };
 
+// src/components/table/utils.ts
+var orderByAsc = (data, key) => {
+  const collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
+  return data.sort((a4, b3) => collator.compare(a4[key.toString()], b3[key.toString()]));
+};
+var orderByDesc = (data) => data.reverse();
+var sortData = (key, columns, data) => {
+  const column = columns.find((x4) => x4.key.toString() === key.toString());
+  if (column) {
+    const order = column.sortableOrder === "asc" /* Asc */ ? "desc" /* Desc */ : "asc" /* Asc */;
+    let sortedArray = [];
+    if (order === "asc" /* Asc */)
+      sortedArray = orderByAsc(data, key);
+    if (order === "desc" /* Desc */)
+      sortedArray = orderByDesc(data);
+    const sortedColumns = columns.map((col) => {
+      if (col.key.toString() === key.toString())
+        col.sortableOrder = order;
+      if (col.key.toString() !== key.toString())
+        col.sortableOrder = void 0;
+      return col;
+    });
+    return { columns: sortedColumns, data: sortedArray };
+  }
+  return { columns, data };
+};
+var getNestedValues = (key, obj) => {
+  return key.reduce((previous, current) => previous && previous[current] ? previous[current] : null, obj);
+};
+
 // node_modules/react-icons/lib/esm/iconBase.js
@@ -1104,3 +1091,3 @@ var import_react3 = __toESM(require("react"));
   columns,
-  data,
+  data = [],
   emptyDataText,
@@ -1112,15 +1099,25 @@ rowsPerPage = 10,
 }) => {
+  const [innerColumns, setInnerColumns] = (0, import_react21.useState)(columns);
+  const [innerData, setInnerData] = (0, import_react21.useState)(data);
   const [itemsPerPage, setItemsPerPage] = (0, import_react21.useState)(rowsPerPage);
   const {
-    pages,
+    pagination,
     currentPage,
-    tableColumns,
-    tableData,
+    startIndex,
+    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange,
-    handleSortData
-  } = usePagination(columns, data, itemsPerPage);
+    handlePageChange
+  } = usePagination(innerData, itemsPerPage);
   const emptyText = emptyDataText ? emptyDataText : "N\xE3o existem dados para exibi\xE7\xE3o";
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full" }, !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
+  const handleSortData = (column) => {
+    if (column.sortable) {
+      const { columns: sortedColumn, data: sortedData } = sortData(column.key, innerColumns, innerData);
+      setInnerColumns(sortedColumn);
+      setInnerData(sortedData);
+    }
+    return void 0;
+  };
+  (0, import_react21.useEffect)(() => setInnerData(data), [data]);
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react21.default.createElement("p", null, "P\xE1gina atual: ", currentPage), !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 items-center justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
     "input",
@@ -1133,10 +1130,10 @@ {
     }
-  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react21.default.createElement("span", null, "Exibindo"), /* @__PURE__ */ import_react21.default.createElement("select", { value: itemsPerPage, onChange: (e2) => setItemsPerPage(Number(e2.target.value)), className: "bg-green-50 border border-green-300 text-green-700 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2" }, /* @__PURE__ */ import_react21.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react21.default.createElement("span", null, "de ", data.length, " resultados")), /* @__PURE__ */ import_react21.default.createElement(it, null, /* @__PURE__ */ import_react21.default.createElement(it.Button, { className: "px-2 -py-1 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react21.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react21.default.createElement(it.Items, { className: "flex flex-col absolute right-0 top-12 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react21.default.createElement(it.Item, null, /* @__PURE__ */ import_react21.default.createElement("button", { onClick: () => {
-  }, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react21.default.createElement(LuDownload, { className: "mr-2" }), " Download")))))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react21.default.createElement("table", { className: `w-full text-sm text-left text-gray-500 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react21.default.createElement("thead", { className: "text-green-700 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react21.default.createElement("tr", null, tableColumns.map((column, index) => {
+  )), !isLoading && innerData.length > 0 && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react21.default.createElement("span", null, "Exibindo"), /* @__PURE__ */ import_react21.default.createElement("select", { value: itemsPerPage, onChange: (e2) => setItemsPerPage(Number(e2.target.value)), className: "bg-green-50 border border-green-300 text-green-700 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2" }, /* @__PURE__ */ import_react21.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react21.default.createElement("span", null, "de ", innerData.length, " resultados")), /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react21.default.createElement(it, null, /* @__PURE__ */ import_react21.default.createElement(it.Button, { className: "px-2 py-2 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react21.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react21.default.createElement(it.Items, { className: "flex flex-col absolute right-0 top-8 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react21.default.createElement(it.Item, null, /* @__PURE__ */ import_react21.default.createElement("button", { onClick: () => {
+  }, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react21.default.createElement(LuDownload, { className: "mr-2" }), " Exportar")))))))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react21.default.createElement("table", { className: `w-full text-sm text-left text-gray-500 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react21.default.createElement("thead", { className: "text-green-700 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react21.default.createElement("tr", null, innerColumns.map((column, index) => {
     if (column.visible !== false) {
-      return /* @__PURE__ */ import_react21.default.createElement("th", { key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap", onClick: () => handleSortData(column) }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, /* @__PURE__ */ import_react21.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react21.default.createElement(LuChevronUp, { size: 16, className: column.sortableOrder === "asc" ? "text-green-700" : "text-gray-300" }), /* @__PURE__ */ import_react21.default.createElement(LuChevronDown, { size: 16, className: column.sortableOrder === "desc" ? "-mt-1.5 text-green-700" : "-mt-1.5 text-gray-300" }))));
+      return /* @__PURE__ */ import_react21.default.createElement("th", { key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap", onClick: column.sortable ? () => handleSortData(column) : void 0 }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, /* @__PURE__ */ import_react21.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react21.default.createElement(LuChevronUp, { size: 16, className: column.sortableOrder === "asc" ? "text-green-700" : "text-gray-300" }), /* @__PURE__ */ import_react21.default.createElement(LuChevronDown, { size: 16, className: column.sortableOrder === "desc" ? "-mt-1.5 text-green-700" : "-mt-1.5 text-gray-300" }))));
     }
     return null;
-  }))), /* @__PURE__ */ import_react21.default.createElement("tbody", { className: "overflow-y-auto" }, !isLoading && tableData.map((item, rowIndex) => {
-    return /* @__PURE__ */ import_react21.default.createElement("tr", { key: rowIndex, className: "hover:bg-green-50 [&:not(:last-child)]:border-b" }, tableColumns.map((column, colIndex) => {
+  }))), /* @__PURE__ */ import_react21.default.createElement("tbody", { className: "overflow-y-auto" }, !isLoading && innerData.slice(startIndex, endIndex).map((item, rowIndex) => {
+    return /* @__PURE__ */ import_react21.default.createElement("tr", { key: rowIndex, className: "hover:bg-green-50 [&:not(:last-child)]:border-b" }, innerColumns.map((column, colIndex) => {
       if (column.visible !== false) {
@@ -1165,3 +1162,3 @@ if (colIndex === 0) {
     }));
-  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pages.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
+  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pagination.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
     "a",
@@ -1168,0 +1165,0 @@ {

dist/hooks/use-pagination.d.ts

@@ -1,16 +0,12 @@
-import { TableColumn } from '../components/table/table.js';
-import 'react';
-
-declare const usePagination: (columns: TableColumn[], data: any[], rowsPerPage: number) => {
+declare const usePagination: (data: any[], rowsPerPage: number) => {
     maxPages: number;
     currentPage: number;
-    tableColumns: TableColumn[];
-    tableData: any[];
-    pages: (number | "...")[];
+    pagination: (number | "...")[];
+    startIndex: any;
+    endIndex: any;
     handlePreviousPage: () => void;
     handleNextPage: () => void;
     handlePageChange: (page: number) => void;
-    handleSortData: (column: TableColumn) => undefined;
 };
 
 export { usePagination };

dist/hooks/use-pagination.js

 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -20,10 +18,2 @@ var __export = (target, all) => {
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -37,45 +27,13 @@
 module.exports = __toCommonJS(use_pagination_exports);
-var import_react2 = require("react");
-
-// src/components/table/table.tsx
-var import_react = __toESM(require("react"));
-
-// src/components/table/utils.ts
-var orderByAsc = (data, key) => {
-  const collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
-  return data.sort((a, b) => collator.compare(a[key.toString()], b[key.toString()]));
-};
-var orderByDesc = (data) => data.reverse();
-var sortData = (key, columns, data) => {
-  const column = columns.find((x) => x.key.toString() === key.toString());
-  if (column) {
-    const order = column.sortableOrder === "asc" /* Asc */ ? "desc" /* Desc */ : "asc" /* Asc */;
-    let sortedArray = [];
-    if (order === "asc" /* Asc */)
-      sortedArray = orderByAsc(data, key);
-    if (order === "desc" /* Desc */)
-      sortedArray = orderByDesc(data);
-    const sortedColumns = columns.map((col) => {
-      if (col.key.toString() === key.toString())
-        col.sortableOrder = order;
-      if (col.key.toString() !== key.toString())
-        col.sortableOrder = void 0;
-      return col;
-    });
-    return { columns: sortedColumns, data: sortedArray };
-  }
-  return { columns, data };
-};
-
-// src/hooks/use-pagination.ts
+var import_react = require("react");
 var MAX_BUTTONS_PER_VIEW = 7;
-var usePagination = (columns, data, rowsPerPage) => {
-  const [currentPage, setCurrentPage] = (0, import_react2.useState)(1);
-  const maxPages = (0, import_react2.useMemo)(() => {
+var usePagination = (data, rowsPerPage) => {
+  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
+  const maxPages = (0, import_react.useMemo)(() => {
     const totalPages = Math.ceil(data.length / rowsPerPage);
-    if (totalPages < currentPage)
+    if (currentPage > 1 && totalPages < currentPage)
       setCurrentPage(totalPages);
     return totalPages;
   }, [data, rowsPerPage]);
-  const pages = (0, import_react2.useMemo)(() => {
+  const pagination = (0, import_react.useMemo)(() => {
     if (data.length > 0) {
@@ -146,3 +104,3 @@ if (maxPages <= 1)
   }, [data, currentPage, rowsPerPage]);
-  const { startIndex, endIndex } = (0, import_react2.useMemo)(() => {
+  const { startIndex, endIndex } = (0, import_react.useMemo)(() => {
     if (data.length > 0) {
@@ -155,4 +113,2 @@ const startIndex2 = (currentPage - 1) * rowsPerPage;
   }, [data, currentPage, rowsPerPage]);
-  const [tableColumns, setTableColumns] = (0, import_react2.useState)(columns);
-  const [tableData, setTableData] = (0, import_react2.useState)(data.slice(startIndex, endIndex));
   const handlePreviousPage = () => {
@@ -170,20 +126,11 @@ if (currentPage > 1)
   };
-  const handleSortData = (column) => {
-    if (column.sortable) {
-      const { columns: sortedColumn, data: sortedData } = sortData(column.key, tableColumns, data);
-      setTableColumns(sortedColumn);
-      setTableData(sortedData.slice(startIndex, endIndex));
-    }
-    return void 0;
-  };
   return {
     maxPages,
     currentPage,
-    tableColumns,
-    tableData,
-    pages,
+    pagination,
+    startIndex,
+    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange,
-    handleSortData
+    handlePageChange
   };
@@ -190,0 +137,0 @@ };

dist/index.js

@@ -46,44 +46,12 @@ "use strict";
 var import_react = require("react");
-
-// src/components/table/utils.ts
-var orderByAsc = (data, key) => {
-  const collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
-  return data.sort((a4, b3) => collator.compare(a4[key.toString()], b3[key.toString()]));
-};
-var orderByDesc = (data) => data.reverse();
-var sortData = (key, columns, data) => {
-  const column = columns.find((x4) => x4.key.toString() === key.toString());
-  if (column) {
-    const order = column.sortableOrder === "asc" /* Asc */ ? "desc" /* Desc */ : "asc" /* Asc */;
-    let sortedArray = [];
-    if (order === "asc" /* Asc */)
-      sortedArray = orderByAsc(data, key);
-    if (order === "desc" /* Desc */)
-      sortedArray = orderByDesc(data);
-    const sortedColumns = columns.map((col) => {
-      if (col.key.toString() === key.toString())
-        col.sortableOrder = order;
-      if (col.key.toString() !== key.toString())
-        col.sortableOrder = void 0;
-      return col;
-    });
-    return { columns: sortedColumns, data: sortedArray };
-  }
-  return { columns, data };
-};
-var getNestedValues = (key, obj) => {
-  return key.reduce((previous, current) => previous && previous[current] ? previous[current] : null, obj);
-};
-
-// src/hooks/use-pagination.ts
 var MAX_BUTTONS_PER_VIEW = 7;
-var usePagination = (columns, data, rowsPerPage) => {
+var usePagination = (data, rowsPerPage) => {
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
   const maxPages = (0, import_react.useMemo)(() => {
     const totalPages = Math.ceil(data.length / rowsPerPage);
-    if (totalPages < currentPage)
+    if (currentPage > 1 && totalPages < currentPage)
       setCurrentPage(totalPages);
     return totalPages;
   }, [data, rowsPerPage]);
-  const pages = (0, import_react.useMemo)(() => {
+  const pagination = (0, import_react.useMemo)(() => {
     if (data.length > 0) {
@@ -162,4 +130,2 @@ if (maxPages <= 1)
   }, [data, currentPage, rowsPerPage]);
-  const [tableColumns, setTableColumns] = (0, import_react.useState)(columns);
-  const [tableData, setTableData] = (0, import_react.useState)(data.slice(startIndex, endIndex));
   const handlePreviousPage = () => {
@@ -177,23 +143,44 @@ if (currentPage > 1)
   };
-  const handleSortData = (column) => {
-    if (column.sortable) {
-      const { columns: sortedColumn, data: sortedData } = sortData(column.key, tableColumns, data);
-      setTableColumns(sortedColumn);
-      setTableData(sortedData.slice(startIndex, endIndex));
-    }
-    return void 0;
-  };
   return {
     maxPages,
     currentPage,
-    tableColumns,
-    tableData,
-    pages,
+    pagination,
+    startIndex,
+    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange,
-    handleSortData
+    handlePageChange
   };
 };
 
+// src/components/table/utils.ts
+var orderByAsc = (data, key) => {
+  const collator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
+  return data.sort((a4, b3) => collator.compare(a4[key.toString()], b3[key.toString()]));
+};
+var orderByDesc = (data) => data.reverse();
+var sortData = (key, columns, data) => {
+  const column = columns.find((x4) => x4.key.toString() === key.toString());
+  if (column) {
+    const order = column.sortableOrder === "asc" /* Asc */ ? "desc" /* Desc */ : "asc" /* Asc */;
+    let sortedArray = [];
+    if (order === "asc" /* Asc */)
+      sortedArray = orderByAsc(data, key);
+    if (order === "desc" /* Desc */)
+      sortedArray = orderByDesc(data);
+    const sortedColumns = columns.map((col) => {
+      if (col.key.toString() === key.toString())
+        col.sortableOrder = order;
+      if (col.key.toString() !== key.toString())
+        col.sortableOrder = void 0;
+      return col;
+    });
+    return { columns: sortedColumns, data: sortedArray };
+  }
+  return { columns, data };
+};
+var getNestedValues = (key, obj) => {
+  return key.reduce((previous, current) => previous && previous[current] ? previous[current] : null, obj);
+};
+
 // node_modules/react-icons/lib/esm/iconBase.js
@@ -1109,3 +1096,3 @@ var import_react3 = __toESM(require("react"));
   columns,
-  data,
+  data = [],
   emptyDataText,
@@ -1117,15 +1104,25 @@ rowsPerPage = 10,
 }) => {
+  const [innerColumns, setInnerColumns] = (0, import_react21.useState)(columns);
+  const [innerData, setInnerData] = (0, import_react21.useState)(data);
   const [itemsPerPage, setItemsPerPage] = (0, import_react21.useState)(rowsPerPage);
   const {
-    pages,
+    pagination,
     currentPage,
-    tableColumns,
-    tableData,
+    startIndex,
+    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange,
-    handleSortData
-  } = usePagination(columns, data, itemsPerPage);
+    handlePageChange
+  } = usePagination(innerData, itemsPerPage);
   const emptyText = emptyDataText ? emptyDataText : "N\xE3o existem dados para exibi\xE7\xE3o";
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full" }, !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
+  const handleSortData = (column) => {
+    if (column.sortable) {
+      const { columns: sortedColumn, data: sortedData } = sortData(column.key, innerColumns, innerData);
+      setInnerColumns(sortedColumn);
+      setInnerData(sortedData);
+    }
+    return void 0;
+  };
+  (0, import_react21.useEffect)(() => setInnerData(data), [data]);
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react21.default.createElement("p", null, "P\xE1gina atual: ", currentPage), !viewOnly && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 justify-end mb-4" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex space-x-4 items-center justify-end" }, searchable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ import_react21.default.createElement(LuSearch, { className: "absolute top-2.5 left-2 text-gray-300", size: 20 }), /* @__PURE__ */ import_react21.default.createElement(
     "input",
@@ -1138,10 +1135,10 @@ {
     }
-  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react21.default.createElement("span", null, "Exibindo"), /* @__PURE__ */ import_react21.default.createElement("select", { value: itemsPerPage, onChange: (e2) => setItemsPerPage(Number(e2.target.value)), className: "bg-green-50 border border-green-300 text-green-700 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2" }, /* @__PURE__ */ import_react21.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react21.default.createElement("span", null, "de ", data.length, " resultados")), /* @__PURE__ */ import_react21.default.createElement(it, null, /* @__PURE__ */ import_react21.default.createElement(it.Button, { className: "px-2 -py-1 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react21.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react21.default.createElement(it.Items, { className: "flex flex-col absolute right-0 top-12 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react21.default.createElement(it.Item, null, /* @__PURE__ */ import_react21.default.createElement("button", { onClick: () => {
-  }, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react21.default.createElement(LuDownload, { className: "mr-2" }), " Download")))))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react21.default.createElement("table", { className: `w-full text-sm text-left text-gray-500 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react21.default.createElement("thead", { className: "text-green-700 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react21.default.createElement("tr", null, tableColumns.map((column, index) => {
+  )), !isLoading && innerData.length > 0 && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react21.default.createElement("span", null, "Exibindo"), /* @__PURE__ */ import_react21.default.createElement("select", { value: itemsPerPage, onChange: (e2) => setItemsPerPage(Number(e2.target.value)), className: "bg-green-50 border border-green-300 text-green-700 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2" }, /* @__PURE__ */ import_react21.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react21.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react21.default.createElement("span", null, "de ", innerData.length, " resultados")), /* @__PURE__ */ import_react21.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react21.default.createElement(it, null, /* @__PURE__ */ import_react21.default.createElement(it.Button, { className: "px-2 py-2 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react21.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react21.default.createElement(it.Items, { className: "flex flex-col absolute right-0 top-8 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react21.default.createElement(it.Item, null, /* @__PURE__ */ import_react21.default.createElement("button", { onClick: () => {
+  }, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react21.default.createElement(LuDownload, { className: "mr-2" }), " Exportar")))))))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react21.default.createElement("table", { className: `w-full text-sm text-left text-gray-500 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react21.default.createElement("thead", { className: "text-green-700 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react21.default.createElement("tr", null, innerColumns.map((column, index) => {
     if (column.visible !== false) {
-      return /* @__PURE__ */ import_react21.default.createElement("th", { key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap", onClick: () => handleSortData(column) }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, /* @__PURE__ */ import_react21.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react21.default.createElement(LuChevronUp, { size: 16, className: column.sortableOrder === "asc" ? "text-green-700" : "text-gray-300" }), /* @__PURE__ */ import_react21.default.createElement(LuChevronDown, { size: 16, className: column.sortableOrder === "desc" ? "-mt-1.5 text-green-700" : "-mt-1.5 text-gray-300" }))));
+      return /* @__PURE__ */ import_react21.default.createElement("th", { key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap", onClick: column.sortable ? () => handleSortData(column) : void 0 }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, /* @__PURE__ */ import_react21.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react21.default.createElement(LuChevronUp, { size: 16, className: column.sortableOrder === "asc" ? "text-green-700" : "text-gray-300" }), /* @__PURE__ */ import_react21.default.createElement(LuChevronDown, { size: 16, className: column.sortableOrder === "desc" ? "-mt-1.5 text-green-700" : "-mt-1.5 text-gray-300" }))));
     }
     return null;
-  }))), /* @__PURE__ */ import_react21.default.createElement("tbody", { className: "overflow-y-auto" }, !isLoading && tableData.map((item, rowIndex) => {
-    return /* @__PURE__ */ import_react21.default.createElement("tr", { key: rowIndex, className: "hover:bg-green-50 [&:not(:last-child)]:border-b" }, tableColumns.map((column, colIndex) => {
+  }))), /* @__PURE__ */ import_react21.default.createElement("tbody", { className: "overflow-y-auto" }, !isLoading && innerData.slice(startIndex, endIndex).map((item, rowIndex) => {
+    return /* @__PURE__ */ import_react21.default.createElement("tr", { key: rowIndex, className: "hover:bg-green-50 [&:not(:last-child)]:border-b" }, innerColumns.map((column, colIndex) => {
       if (column.visible !== false) {
@@ -1170,3 +1167,3 @@ if (colIndex === 0) {
     }));
-  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pages.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
+  }))), isLoading && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, "Carregando...")), !isLoading && data.length <= 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "w-full flex justify-center mt-4 text-sm" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-gray-500" }, emptyText))), !isLoading && data.length > itemsPerPage && /* @__PURE__ */ import_react21.default.createElement("nav", { className: "w-full flex justify-end mt-6" }, /* @__PURE__ */ import_react21.default.createElement("ul", { className: "inline-flex -space-x-px" }, /* @__PURE__ */ import_react21.default.createElement("li", null, /* @__PURE__ */ import_react21.default.createElement("a", { onClick: handlePreviousPage, className: "select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer" }, "Anterior")), pagination.map((page, index) => /* @__PURE__ */ import_react21.default.createElement("li", { key: index }, /* @__PURE__ */ import_react21.default.createElement(
     "a",
@@ -1173,0 +1170,0 @@ {

package.json

 {
     "name": "avine-react-components",
-    "version": "0.1.22",
+    "version": "0.1.23",
     "license": "MIT",
@@ -17,5 +17,7 @@ "description": "",
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "tsup ./src",
-        "prepare": "tsup ./src",
-        "deploy": "npm version patch && npm publish"
+        "build": "tsup src --clean --out-dir dist",
+        "prepare": "tsup src --clean --out-dir dist",
+        "deploy": "npm version patch && npm publish",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
@@ -28,7 +30,20 @@ "author": "Carlos Daniel",
         "@headlessui/react": "^1.7.17",
+        "@storybook/addon-essentials": "^7.6.4",
+        "@storybook/addon-interactions": "^7.6.4",
+        "@storybook/addon-links": "^7.6.4",
+        "@storybook/addon-onboarding": "^1.0.9",
+        "@storybook/addon-styling-webpack": "^0.0.5",
+        "@storybook/blocks": "^7.6.4",
+        "@storybook/react": "^7.6.4",
+        "@storybook/react-vite": "^7.6.4",
+        "@storybook/test": "^7.6.4",
         "@types/react": "^18.2.42",
         "@types/react-dom": "^18.2.17",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.32",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
+        "storybook": "^7.6.4",
+        "tailwindcss": "^3.3.6",
         "tsup": "^8.0.1",
@@ -35,0 +50,0 @@ "typescript": "^5.3.3"

src/hooks/use-pagination.ts

 import { useState, useMemo } from 'react';
-import { TableColumn } from "../components/table/table";
-import { sortData } from '../components/table/utils';
 
 const MAX_BUTTONS_PER_VIEW = 7;
 
-export const usePagination = (columns: TableColumn[], data: any[], rowsPerPage: number) => {
-    const [currentPage, setCurrentPage] = useState(1);
+export const usePagination = (data: any[], rowsPerPage: number) => {
+    const [currentPage, setCurrentPage] = useState<number>(1);
     const maxPages = useMemo(() => {
         const totalPages = Math.ceil(data.length / rowsPerPage);
-        if (totalPages < currentPage) setCurrentPage(totalPages);
+        if (currentPage > 1 && totalPages < currentPage) setCurrentPage(totalPages);
         return totalPages;
     }, [data, rowsPerPage]);
-    const pages = useMemo(() => {
+    const pagination = useMemo(() => {
         if (data.length > 0) {
@@ -83,4 +81,2 @@ if (maxPages <= 1) return [];
     }, [data, currentPage, rowsPerPage]);
-    const [tableColumns, setTableColumns] = useState(columns);
-    const [tableData, setTableData] = useState(data.slice(startIndex, endIndex));
     const handlePreviousPage = (): void => {
@@ -95,21 +91,13 @@ if (currentPage > 1) setCurrentPage(current => current - 1);
     };
-    const handleSortData = (column: TableColumn) => {
-        if (column.sortable) {
-            const { columns: sortedColumn, data: sortedData } = sortData(column.key, tableColumns, data);
-            setTableColumns(sortedColumn);
-            setTableData(sortedData.slice(startIndex, endIndex));
-        }
-        return undefined;
-    };
+
     return {
         maxPages,
         currentPage,
-        tableColumns,
-        tableData,
-        pages,
+        pagination,
+        startIndex,
+        endIndex,
         handlePreviousPage,
         handleNextPage,
-        handlePageChange,
-        handleSortData
+        handlePageChange
     };
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5102264

increased by52.81%

Number of package files

38

increased by22.58%

Lines of code

9537

increased by77.3%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

21

increased by162.5%

No dependency changes