@accreditation/ui 1.0.0

package/dist/components/organisms/data-table/data-table.js

@@ -0,0 +1,370 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var modifiers = require('@dnd-kit/modifiers');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var iconsReact = require('@tabler/icons-react');
+var reactTable = require('@tanstack/react-table');
+var button = require('../../atoms/button');
+var dropdownMenu = require('../../molecules/dropdown-menu');
+var label = require('../../atoms/label');
+var select = require('../../molecules/select');
+var table = require('../../organisms/table');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function DraggableRow({
+  row,
+  enableDrag
+}) {
+  const id = String(row.original.id);
+  const { transform, transition, setNodeRef, isDragging } = sortable.useSortable({
+    id
+  });
+  const cells = row.getVisibleCells();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    table.TableRow,
+    {
+      "data-state": row.getIsSelected() && "selected",
+      "data-dragging": isDragging,
+      ref: setNodeRef,
+      className: "relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80",
+      style: enableDrag ? {
+        transform: utilities.CSS.Transform.toString(transform),
+        transition
+      } : void 0,
+      children: cells.map((cell) => /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+    }
+  );
+}
+function DataTable({
+  data: initialData,
+  columns,
+  enableDrag = false,
+  enableColumnVisibility = true,
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  onPageSizeChange
+}) {
+  const [data, setData] = React__namespace.useState(() => initialData);
+  const [rowSelection, setRowSelection] = React__namespace.useState({});
+  const [columnVisibility, setColumnVisibility] = React__namespace.useState({});
+  const [columnFilters, setColumnFilters] = React__namespace.useState(
+    []
+  );
+  const [sorting, setSorting] = React__namespace.useState([]);
+  const [pagination, setPagination] = React__namespace.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const sortableId = React__namespace.useId();
+  const sensors = core.useSensors(
+    core.useSensor(core.MouseSensor, {}),
+    core.useSensor(core.TouchSensor, {}),
+    core.useSensor(core.KeyboardSensor, {})
+  );
+  const dataIds = React__namespace.useMemo(
+    () => data?.map((item) => String(item.id)) || [],
+    [data]
+  );
+  React__namespace.useEffect(() => {
+    setData(initialData);
+  }, [initialData]);
+  const isControlledPagination = typeof page === "number" && typeof pageSize === "number" && typeof total === "number" && typeof onPageChange === "function";
+  const table$1 = reactTable.useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination: isControlledPagination ? {
+        pageIndex: (page ?? 1) - 1,
+        pageSize: pageSize ?? 10
+      } : pagination
+    },
+    getRowId: (row) => String(row.id),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getFacetedRowModel: reactTable.getFacetedRowModel(),
+    getFacetedUniqueValues: reactTable.getFacetedUniqueValues(),
+    manualPagination: isControlledPagination,
+    pageCount: isControlledPagination ? Math.ceil((total ?? 0) / (pageSize ?? 1)) : void 0
+  });
+  function handleDragEnd(event) {
+    if (!enableDrag) return;
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setData((currentData) => {
+        const oldIndex = dataIds.indexOf(active.id);
+        const newIndex = dataIds.indexOf(over.id);
+        return sortable.arrayMove(currentData, oldIndex, newIndex);
+      });
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "w-full space-y-4",
+      role: "region",
+      "aria-label": "Tabela de dados",
+      children: [
+        enableColumnVisibility && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "rounded-none",
+              "aria-label": "Personalizar colunas",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLayoutColumns, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden lg:inline", children: "Personalizar colunas" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lg:hidden", children: "Colunas" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56", children: table$1.getAllColumns().filter(
+            (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
+          ).map((column) => {
+            const labelMap = {
+              name: "Nome",
+              email: "E-mail",
+              type: "Tipo",
+              created_at: "Criado em",
+              updated_at: "Atualizado em",
+              is_active: "Status",
+              status: "Status",
+              city: "Cidade",
+              state: "Estado",
+              start_date: "Data inicial",
+              end_date: "Data final",
+              value: "Valor",
+              image_file: "Imagem",
+              notes: "Notas",
+              service_id: "Servi\xE7o",
+              channel_id: "Canal",
+              members_count: "Membros",
+              phone: "Telefone",
+              picture: "Foto",
+              agency_id: "Ag\xEAncia",
+              client_id: "Cliente",
+              email_verified_at: "E-mail verificado em"
+            };
+            const display = labelMap[column.id] || column.id;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              dropdownMenu.DropdownMenuCheckboxItem,
+              {
+                className: "capitalize rounded-none",
+                checked: column.getIsVisible(),
+                onCheckedChange: (value) => column.toggleVisibility(!!value),
+                children: display
+              },
+              column.id
+            );
+          }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border", children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.DndContext,
+          {
+            collisionDetection: core.closestCenter,
+            modifiers: [modifiers.restrictToVerticalAxis],
+            onDragEnd: handleDragEnd,
+            sensors,
+            id: sortableId,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { className: "bg-muted sticky top-0 z-10", children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : reactTable.flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ) }, header.id)) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { className: "**:data-[slot=table-cell]:first:w-8", children: table$1.getRowModel().rows?.length ? enableDrag ? /* @__PURE__ */ jsxRuntime.jsx(
+                sortable.SortableContext,
+                {
+                  items: dataIds,
+                  strategy: sortable.verticalListSortingStrategy,
+                  children: table$1.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(DraggableRow, { row, enableDrag: true }, row.id))
+                }
+              ) : table$1.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(DraggableRow, { row, enableDrag: false }, row.id)) : /* @__PURE__ */ jsxRuntime.jsx(table.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                table.TableCell,
+                {
+                  colSpan: columns.length,
+                  className: "h-48 text-center",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "flex flex-col items-center justify-center gap-2 py-6",
+                      role: "status",
+                      "aria-live": "polite",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "Nenhum dado encontrado" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Ajuste os filtros ou tente novamente mais tarde." })
+                      ]
+                    }
+                  )
+                }
+              ) }) })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground hidden flex-1 text-sm lg:flex", children: [
+            table$1.getFilteredSelectedRowModel().rows.length,
+            " of",
+            " ",
+            table$1.getFilteredRowModel().rows.length,
+            " row(s) selected."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-8 lg:w-fit", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden items-center gap-2 lg:flex", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "rows-per-page", className: "text-sm font-medium", children: "Linhas por p\xE1gina" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                select.Select,
+                {
+                  value: `${isControlledPagination ? pageSize : table$1.getState().pagination.pageSize}`,
+                  onValueChange: (value) => {
+                    if (isControlledPagination) {
+                      if (onPageSizeChange) {
+                        onPageSizeChange(Number(value));
+                      }
+                    } else {
+                      table$1.setPageSize(Number(value));
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", className: "w-20", id: "rows-per-page", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      select.SelectValue,
+                      {
+                        placeholder: isControlledPagination ? pageSize : table$1.getState().pagination.pageSize
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: `${size}`, children: size }, size)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-fit items-center justify-center text-sm font-medium", children: [
+              "P\xE1gina",
+              " ",
+              isControlledPagination ? `${page} de ${Math.max(1, Math.ceil((total ?? 0) / (pageSize ?? 1)))}` : `${table$1.getState().pagination.pageIndex + 1} de ${table$1.getPageCount()}`
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2 lg:ml-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  className: "hidden size-8 p-0 lg:flex",
+                  onClick: () => {
+                    if (isControlledPagination && onPageChange) {
+                      onPageChange(1);
+                    } else {
+                      table$1.setPageIndex(0);
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) <= 1 : !table$1.getCanPreviousPage(),
+                  "aria-label": "Ir para a primeira p\xE1gina",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronsLeft, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  className: "size-8",
+                  size: "icon",
+                  onClick: () => {
+                    if (isControlledPagination && onPageChange) {
+                      onPageChange(Math.max(1, (page ?? 1) - 1));
+                    } else {
+                      table$1.previousPage();
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) <= 1 : !table$1.getCanPreviousPage(),
+                  "aria-label": "Ir para a p\xE1gina anterior",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronLeft, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  className: "size-8",
+                  size: "icon",
+                  onClick: () => {
+                    if (isControlledPagination && onPageChange) {
+                      const maxPage = Math.max(
+                        1,
+                        Math.ceil((total ?? 0) / (pageSize ?? 1))
+                      );
+                      onPageChange(Math.min(maxPage, (page ?? 1) + 1));
+                    } else {
+                      table$1.nextPage();
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) >= Math.max(1, Math.ceil((total ?? 0) / (pageSize ?? 1))) : !table$1.getCanNextPage(),
+                  "aria-label": "Ir para a pr\xF3xima p\xE1gina",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  className: "hidden size-8 lg:flex",
+                  size: "icon",
+                  onClick: () => {
+                    if (isControlledPagination && onPageChange) {
+                      const maxPage = Math.max(
+                        1,
+                        Math.ceil((total ?? 0) / (pageSize ?? 1))
+                      );
+                      onPageChange(maxPage);
+                    } else {
+                      table$1.setPageIndex(table$1.getPageCount() - 1);
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) >= Math.max(1, Math.ceil((total ?? 0) / (pageSize ?? 1))) : !table$1.getCanNextPage(),
+                  "aria-label": "Ir para a \xFAltima p\xE1gina",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronsRight, {})
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.DataTable = DataTable;