@accreditation/ui 1.0.0

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

@@ -0,0 +1,348 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { IconLayoutColumns, IconChevronsLeft, IconChevronLeft, IconChevronRight, IconChevronsRight } from '@tabler/icons-react';
+import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { Button } from '../../atoms/button';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem } from '../../molecules/dropdown-menu';
+import { Label } from '../../atoms/label';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../molecules/select';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../organisms/table';
+
+function DraggableRow({
+  row,
+  enableDrag
+}) {
+  const id = String(row.original.id);
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id
+  });
+  const cells = row.getVisibleCells();
+  return /* @__PURE__ */ jsx(
+    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: CSS.Transform.toString(transform),
+        transition
+      } : void 0,
+      children: cells.map((cell) => /* @__PURE__ */ jsx(TableCell, { children: 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.useState(() => initialData);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const [columnFilters, setColumnFilters] = React.useState(
+    []
+  );
+  const [sorting, setSorting] = React.useState([]);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const sortableId = React.useId();
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+  const dataIds = React.useMemo(
+    () => data?.map((item) => String(item.id)) || [],
+    [data]
+  );
+  React.useEffect(() => {
+    setData(initialData);
+  }, [initialData]);
+  const isControlledPagination = typeof page === "number" && typeof pageSize === "number" && typeof total === "number" && typeof onPageChange === "function";
+  const table = 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: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: 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 arrayMove(currentData, oldIndex, newIndex);
+      });
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "w-full space-y-4",
+      role: "region",
+      "aria-label": "Tabela de dados",
+      children: [
+        enableColumnVisibility && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "rounded-none",
+              "aria-label": "Personalizar colunas",
+              children: [
+                /* @__PURE__ */ jsx(IconLayoutColumns, {}),
+                /* @__PURE__ */ jsx("span", { className: "hidden lg:inline", children: "Personalizar colunas" }),
+                /* @__PURE__ */ jsx("span", { className: "lg:hidden", children: "Colunas" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-56", children: table.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__ */ jsx(
+              DropdownMenuCheckboxItem,
+              {
+                className: "capitalize rounded-none",
+                checked: column.getIsVisible(),
+                onCheckedChange: (value) => column.toggleVisibility(!!value),
+                children: display
+              },
+              column.id
+            );
+          }) })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-hidden border", children: /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            collisionDetection: closestCenter,
+            modifiers: [restrictToVerticalAxis],
+            onDragEnd: handleDragEnd,
+            sensors,
+            id: sortableId,
+            children: /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { className: "bg-muted sticky top-0 z-10", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ) }, header.id)) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsx(TableBody, { className: "**:data-[slot=table-cell]:first:w-8", children: table.getRowModel().rows?.length ? enableDrag ? /* @__PURE__ */ jsx(
+                SortableContext,
+                {
+                  items: dataIds,
+                  strategy: verticalListSortingStrategy,
+                  children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, { row, enableDrag: true }, row.id))
+                }
+              ) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, { row, enableDrag: false }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  colSpan: columns.length,
+                  className: "h-48 text-center",
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex flex-col items-center justify-center gap-2 py-6",
+                      role: "status",
+                      "aria-live": "polite",
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Nenhum dado encontrado" }),
+                        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Ajuste os filtros ou tente novamente mais tarde." })
+                      ]
+                    }
+                  )
+                }
+              ) }) })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground hidden flex-1 text-sm lg:flex", children: [
+            table.getFilteredSelectedRowModel().rows.length,
+            " of",
+            " ",
+            table.getFilteredRowModel().rows.length,
+            " row(s) selected."
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-8 lg:w-fit", children: [
+            /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 lg:flex", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "rows-per-page", className: "text-sm font-medium", children: "Linhas por p\xE1gina" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: `${isControlledPagination ? pageSize : table.getState().pagination.pageSize}`,
+                  onValueChange: (value) => {
+                    if (isControlledPagination) {
+                      if (onPageSizeChange) {
+                        onPageSizeChange(Number(value));
+                      }
+                    } else {
+                      table.setPageSize(Number(value));
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-20", id: "rows-per-page", children: /* @__PURE__ */ jsx(
+                      SelectValue,
+                      {
+                        placeholder: isControlledPagination ? pageSize : table.getState().pagination.pageSize
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ 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.getState().pagination.pageIndex + 1} de ${table.getPageCount()}`
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 lg:ml-0", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  className: "hidden size-8 p-0 lg:flex",
+                  onClick: () => {
+                    if (isControlledPagination && onPageChange) {
+                      onPageChange(1);
+                    } else {
+                      table.setPageIndex(0);
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) <= 1 : !table.getCanPreviousPage(),
+                  "aria-label": "Ir para a primeira p\xE1gina",
+                  children: /* @__PURE__ */ jsx(IconChevronsLeft, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  className: "size-8",
+                  size: "icon",
+                  onClick: () => {
+                    if (isControlledPagination && onPageChange) {
+                      onPageChange(Math.max(1, (page ?? 1) - 1));
+                    } else {
+                      table.previousPage();
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) <= 1 : !table.getCanPreviousPage(),
+                  "aria-label": "Ir para a p\xE1gina anterior",
+                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                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.nextPage();
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) >= Math.max(1, Math.ceil((total ?? 0) / (pageSize ?? 1))) : !table.getCanNextPage(),
+                  "aria-label": "Ir para a pr\xF3xima p\xE1gina",
+                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                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.setPageIndex(table.getPageCount() - 1);
+                    }
+                  },
+                  disabled: isControlledPagination ? (page ?? 1) >= Math.max(1, Math.ceil((total ?? 0) / (pageSize ?? 1))) : !table.getCanNextPage(),
+                  "aria-label": "Ir para a \xFAltima p\xE1gina",
+                  children: /* @__PURE__ */ jsx(IconChevronsRight, {})
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { DataTable };

package/dist/components/organisms/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./data-table";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/data-table/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var dataTable = require('./data-table');
+
+
+
+Object.keys(dataTable).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return dataTable[k]; }
+	});
+});

package/dist/components/organisms/data-table/index.mjs

@@ -0,0 +1 @@
+export * from './data-table';

package/dist/components/organisms/expandable-cards/expandable-cards.d.ts

@@ -0,0 +1,14 @@
+export default function ExpandableCardDemo(): import("react/jsx-runtime").JSX.Element | null;
+export declare const CloseIcon: () => import("react/jsx-runtime").JSX.Element;
+export type ExpandableInfoCardProps = {
+    title: string;
+    description?: string;
+    value?: string | number;
+    content: React.ReactNode | (() => React.ReactNode);
+    ctaText?: string;
+    ctaLink?: string;
+    icon?: React.ReactNode;
+    className?: string;
+};
+export declare function ExpandableInfoCard({ title, description, value, content, ctaText, ctaLink, icon, className, }: ExpandableInfoCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=expandable-cards.d.ts.map

package/dist/components/organisms/expandable-cards/expandable-cards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-cards.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/expandable-cards/expandable-cards.tsx"],"names":[],"mappings":"AAwBA,MAAM,CAAC,OAAO,UAAU,kBAAkB,mDA+KzC;AAID,eAAO,MAAM,SAAS,+CA+BrB,CAAC;AAMF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,OAAoB,EACpB,OAAO,EACP,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,2CAoHzB"}