@manusiakemos/laravel-tanstack-react 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,5 +1,10 @@
-import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { forwardRef, useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { ArrowUp, ArrowDown, ChevronsUpDown, Search, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
 
 // src/hooks/useDataTable.ts
 
@@ -203,7 +208,622 @@ function useDataTable(options) {
   });
   return { table, data, meta, loading, error, refetch };
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Table = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+function DataTable(props) {
+  const {
+    table,
+    loading = false,
+    emptyMessage = "No results.",
+    loadingMessage = "Loading...",
+    className,
+    classNames,
+    onRowClick
+  } = props;
+  const columnCount = table.getAllColumns().length;
+  const rows = table.getRowModel().rows;
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-md border", className, classNames?.root), children: /* @__PURE__ */ jsxs(Table, { className: classNames?.table, children: [
+    /* @__PURE__ */ jsx(TableHeader, { className: classNames?.header, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: classNames?.headerRow, children: headerGroup.headers.map((header) => {
+      const canSort = header.column.getCanSort();
+      const sortDir = header.column.getIsSorted();
+      return /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          className: cn(
+            canSort && "cursor-pointer select-none",
+            classNames?.head
+          ),
+          onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+            flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            ),
+            canSort && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: sortDir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) : sortDir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 opacity-50" }) })
+          ] })
+        },
+        header.id
+      );
+    }) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(TableBody, { className: classNames?.body, children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        colSpan: columnCount,
+        className: cn(
+          "h-24 text-center text-muted-foreground",
+          classNames?.loading
+        ),
+        children: loadingMessage
+      }
+    ) }) : rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        colSpan: columnCount,
+        className: cn(
+          "h-24 text-center text-muted-foreground",
+          classNames?.empty
+        ),
+        children: emptyMessage
+      }
+    ) }) : rows.map((row) => /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        className: cn(
+          onRowClick && "cursor-pointer",
+          classNames?.row
+        ),
+        onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: classNames?.cell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+      },
+      row.id
+    )) })
+  ] }) });
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, type = "button", ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Button.displayName = "Button";
+var Input = forwardRef(
+  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      className: cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+var DEFAULT_DEBOUNCE_MS = 300;
+function DataTableSearch(props) {
+  const {
+    table,
+    debounce = true,
+    placeholder = "Search...",
+    submitLabel,
+    className,
+    inputClassName,
+    buttonClassName,
+    inputProps,
+    onSearch,
+    render
+  } = props;
+  const isDebounced = debounce !== false;
+  const debounceMs = typeof debounce === "number" ? debounce : DEFAULT_DEBOUNCE_MS;
+  const appliedValue = table.getState().globalFilter ?? "";
+  const [value, setValue] = useState(appliedValue);
+  const debounced = useDebouncedValue(value, debounceMs);
+  const commit = (next) => {
+    if (next === appliedValue) return;
+    table.setGlobalFilter(next);
+    onSearch?.(next);
+  };
+  useEffect(() => {
+    if (!isDebounced) return;
+    commit(debounced);
+  }, [debounced, isDebounced, table]);
+  useEffect(() => {
+    setValue(appliedValue);
+  }, [appliedValue]);
+  const submit = () => commit(value);
+  if (render) {
+    return /* @__PURE__ */ jsx(Fragment, { children: render({ value, setValue, submit, appliedValue }) });
+  }
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    submit();
+  };
+  if (isDebounced) {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "search",
+        value,
+        onChange: (e) => setValue(e.target.value),
+        placeholder,
+        className: cn(className, inputClassName),
+        ...inputProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleFormSubmit,
+      className: cn("flex w-full max-w-md items-center gap-2", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            value,
+            onChange: (e) => setValue(e.target.value),
+            placeholder,
+            className: inputClassName,
+            ...inputProps
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: buttonClassName, children: submitLabel ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: "Search" })
+        ] }) })
+      ]
+    }
+  );
+}
+var Select = forwardRef(
+  ({ className, multiple, ...props }, ref) => /* @__PURE__ */ jsx(
+    "select",
+    {
+      ref,
+      multiple,
+      className: cn(
+        "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        multiple ? "min-h-[6rem]" : "h-10",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Select.displayName = "Select";
+var DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+function DataTablePagination(props) {
+  const {
+    table,
+    meta = null,
+    showPageSize = false,
+    pageSizeOptions = DEFAULT_PAGE_SIZES,
+    showFirstLast = false,
+    hideSummary = false,
+    labels,
+    className,
+    classNames,
+    buttonProps,
+    selectProps,
+    render
+  } = props;
+  const state = table.getState().pagination;
+  const pageIndex = state.pageIndex;
+  const pageSize = state.pageSize;
+  const pageCount = table.getPageCount();
+  const canPreviousPage = table.getCanPreviousPage();
+  const canNextPage = table.getCanNextPage();
+  const goToFirst = () => table.setPageIndex(0);
+  const goToPrevious = () => table.previousPage();
+  const goToNext = () => table.nextPage();
+  const goToLast = () => table.setPageIndex(Math.max(0, pageCount - 1));
+  const setPageSize = (size) => table.setPageSize(size);
+  if (render) {
+    return /* @__PURE__ */ jsx(Fragment, { children: render({
+      table,
+      meta,
+      pageIndex,
+      pageCount,
+      pageSize,
+      canPreviousPage,
+      canNextPage,
+      goToFirst,
+      goToPrevious,
+      goToNext,
+      goToLast,
+      setPageSize
+    }) });
+  }
+  const filtered = meta?.filtered ?? 0;
+  const total = meta?.total ?? null;
+  const summaryNode = labels?.summary ? labels.summary({ pageIndex, pageCount, pageSize, filtered, total }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    labels?.page ?? "Page",
+    " ",
+    pageIndex + 1,
+    " ",
+    labels?.of ?? "of",
+    " ",
+    Math.max(1, pageCount),
+    meta ? ` \xB7 ${filtered} rows` : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+        className,
+        classNames?.root
+      ),
+      children: [
+        !hideSummary && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-sm text-muted-foreground",
+              classNames?.info
+            ),
+            children: summaryNode
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2",
+              classNames?.controls
+            ),
+            children: [
+              showPageSize && /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: cn(
+                    "flex items-center gap-2 text-sm text-muted-foreground",
+                    classNames?.pageSize
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: labels?.rowsPerPage ?? "Rows per page:" }),
+                    /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        value: pageSize,
+                        onChange: (e) => setPageSize(Number(e.target.value)),
+                        className: cn("h-9 w-[5rem]", classNames?.select),
+                        ...selectProps,
+                        children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+                      }
+                    )
+                  ]
+                }
+              ),
+              showFirstLast && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  onClick: goToFirst,
+                  disabled: !canPreviousPage,
+                  className: classNames?.button,
+                  "aria-label": "Go to first page",
+                  ...buttonProps,
+                  children: labels?.first ?? /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: goToPrevious,
+                  disabled: !canPreviousPage,
+                  className: classNames?.button,
+                  "aria-label": "Go to previous page",
+                  ...buttonProps,
+                  children: labels?.previous ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { children: "Previous" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: goToNext,
+                  disabled: !canNextPage,
+                  className: classNames?.button,
+                  "aria-label": "Go to next page",
+                  ...buttonProps,
+                  children: labels?.next ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { children: "Next" }),
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+                  ] })
+                }
+              ),
+              showFirstLast && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  onClick: goToLast,
+                  disabled: !canNextPage,
+                  className: classNames?.button,
+                  "aria-label": "Go to last page",
+                  ...buttonProps,
+                  children: labels?.last ?? /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DataTableFilter(props) {
+  const { table, columnId, className, render } = props;
+  const column = table.getColumn(columnId);
+  if (!column) {
+    if (typeof console !== "undefined") {
+      console.warn(
+        `[DataTableFilter] Column "${columnId}" not found on table. Make sure a column with this id exists.`
+      );
+    }
+    return null;
+  }
+  const value = column.getFilterValue();
+  const setValue = (next) => {
+    if (next === void 0 || next === "" || Array.isArray(next) && next.length === 0) {
+      column.setFilterValue(void 0);
+    } else {
+      column.setFilterValue(next);
+    }
+  };
+  if (render) {
+    return /* @__PURE__ */ jsx(Fragment, { children: render({ value, setValue, column, table }) });
+  }
+  if (props.type === "multiselect") {
+    const arrayValue = Array.isArray(value) ? value : value ? [String(value)] : [];
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        multiple: true,
+        value: arrayValue,
+        onChange: (e) => {
+          const selected = Array.from(e.target.selectedOptions).map((o) => o.value);
+          setValue(selected);
+        },
+        className: cn("w-auto min-w-[10rem]", className),
+        ...props.selectProps,
+        children: props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    );
+  }
+  if (props.type === "input") {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => setValue(e.target.value),
+        placeholder: props.placeholder,
+        className: cn("w-auto min-w-[10rem]", className),
+        ...props.inputProps
+      }
+    );
+  }
+  if ("options" in props && props.options) {
+    const includeEmpty = props.includeEmptyOption ?? true;
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => setValue(e.target.value),
+        className: cn("w-auto min-w-[10rem]", className),
+        ...props.selectProps,
+        children: [
+          includeEmpty && /* @__PURE__ */ jsx("option", { value: "", children: props.placeholder ?? "All" }),
+          props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    );
+  }
+  if (typeof console !== "undefined") {
+    console.warn(
+      `[DataTableFilter] No "options" or "render" prop provided for column "${columnId}". Nothing will render.`
+    );
+  }
+  return null;
+}
+function DataTableSplitLayout(props) {
+  const {
+    table,
+    meta = null,
+    loading = false,
+    filters,
+    actions,
+    search,
+    searchProps,
+    tableProps,
+    paginationProps,
+    className,
+    classNames
+  } = props;
+  const searchNode = search ?? /* @__PURE__ */ jsx(
+    DataTableSearch,
+    {
+      table,
+      placeholder: "Search...",
+      className: "w-full max-w-md",
+      ...searchProps
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4",
+        className,
+        classNames?.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+              classNames?.toolbar
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex-1 min-w-0",
+                    classNames?.toolbarLeft
+                  ),
+                  children: searchNode
+                }
+              ),
+              (filters || actions) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-wrap items-center gap-2",
+                    classNames?.toolbarRight
+                  ),
+                  children: [
+                    filters,
+                    actions
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classNames?.body, children: /* @__PURE__ */ jsx(DataTable, { table, loading, ...tableProps }) }),
+        /* @__PURE__ */ jsx("div", { className: classNames?.footer, children: /* @__PURE__ */ jsx(
+          DataTablePagination,
+          {
+            table,
+            meta,
+            ...paginationProps
+          }
+        ) })
+      ]
+    }
+  );
+}
 
-export { DataTableError, buildQueryString, defaultFetcher, useDataTable, useDebouncedValue };
+export { Button, DataTable, DataTableError, DataTableFilter, DataTablePagination, DataTableSearch, DataTableSplitLayout, Input, Select, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, buildQueryString, buttonVariants, cn, defaultFetcher, useDataTable, useDebouncedValue };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map