@nocobase/portal-template-default 1.0.0

package/src/components/data-table/data-table-pagination.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { useMemo } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type DataTablePaginationProps = {
+  currentPage: number;
+  pageCount: number;
+  setCurrentPage: (page: number) => void;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  total?: number;
+};
+
+export function DataTablePagination({
+  currentPage,
+  pageCount,
+  setCurrentPage,
+  pageSize,
+  setPageSize,
+  total,
+}: DataTablePaginationProps) {
+  const pageSizeOptions = useMemo(() => {
+    const baseOptions = [10, 20, 30, 40, 50];
+    const optionsSet = new Set(baseOptions);
+
+    if (!optionsSet.has(pageSize)) {
+      optionsSet.add(pageSize);
+    }
+
+    return Array.from(optionsSet).sort((a, b) => a - b);
+  }, [pageSize]);
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "items-center",
+        "justify-between",
+        "flex-wrap",
+        "px-2",
+        "w-full",
+        "gap-2"
+      )}
+    >
+      <div
+        className={cn(
+          "flex-1",
+          "text-sm",
+          "text-muted-foreground",
+          "whitespace-nowrap"
+        )}
+      >
+        {typeof total === "number" ? `${total} row(s)` : null}
+      </div>
+      <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
+        <div className={cn("flex", "items-center", "gap-2")}>
+          <span className={cn("text-sm", "font-medium")}>Rows per page</span>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(v) => setPageSize(Number(v))}
+          >
+            <SelectTrigger className={cn("h-8", "w-[70px]")}>
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
+          <div
+            className={cn(
+              "flex",
+              "items-center",
+              "justify-center",
+              "text-sm",
+              "font-medium"
+            )}
+          >
+            Page {currentPage} of {pageCount}
+          </div>
+          <div className={cn("flex", "items-center", "gap-2")}>
+            <Button
+              variant="outline"
+              className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              aria-label="Go to first page"
+            >
+              <ChevronsLeft />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("h-8", "w-8", "p-0")}
+              onClick={() => setCurrentPage(currentPage - 1)}
+              disabled={currentPage === 1}
+              aria-label="Go to previous page"
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("h-8", "w-8", "p-0")}
+              onClick={() => setCurrentPage(currentPage + 1)}
+              disabled={currentPage === pageCount}
+              aria-label="Go to next page"
+            >
+              <ChevronRight />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
+              onClick={() => setCurrentPage(pageCount)}
+              disabled={currentPage === pageCount}
+              aria-label="Go to last page"
+            >
+              <ChevronsRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+DataTablePagination.displayName = "DataTablePagination";

package/src/components/data-table/data-table-sorter.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type DataTableSorterProps<TData> = {
+  column: Column<TData>;
+} & React.ComponentProps<typeof Button>;
+
+export function DataTableSorter<TData>({
+  column,
+  className,
+  ...props
+}: DataTableSorterProps<TData>) {
+  const title =
+    column.getIsSorted() === "desc"
+      ? `Sort by ${column.id} as descending`
+      : column.getIsSorted() === "asc"
+      ? `Sort by ${column.id} as ascending`
+      : `Sort by ${column.id}`;
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => column.toggleSorting(undefined, true)}
+      title={title}
+      aria-label={title}
+      {...props}
+      className={cn("data-[state=open]:bg-accent", "w-5 h-5", className)}
+    >
+      {column.getIsSorted() === "desc" ? (
+        <ArrowDown className={cn("text-primary", "!w-3", "!h-3")} />
+      ) : column.getIsSorted() === "asc" ? (
+        <ArrowUp className={cn("text-primary", "!w-3", "!h-3")} />
+      ) : (
+        <ChevronsUpDown
+          className={cn("text-muted-foreground", "!w-3", "!h-3")}
+        />
+      )}
+    </Button>
+  );
+}
+
+DataTableSorter.displayName = "DataTableSorter";

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import type { HttpError, BaseRecord } from "@refinedev/core";
+import type { UseTableReturnType } from "@refinedev/react-table";
+import type { Column } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { DataTablePagination } from "@/components/data-table/data-table-pagination";
+import { cn } from "@/lib/utils";
+
+type DataTableProps<TData extends BaseRecord> = {
+  table: UseTableReturnType<TData, HttpError>;
+};
+
+export function DataTable<TData extends BaseRecord>({
+  table,
+}: DataTableProps<TData>) {
+  const {
+    reactTable: { getHeaderGroups, getRowModel, getAllColumns },
+    refineCore: {
+      tableQuery,
+      currentPage,
+      setCurrentPage,
+      pageCount,
+      pageSize,
+      setPageSize,
+    },
+  } = table;
+
+  const columns = getAllColumns();
+  const leafColumns = table.reactTable.getAllLeafColumns();
+  const isLoading = tableQuery.isLoading;
+
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState({
+    horizontal: false,
+    vertical: false,
+  });
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (tableRef.current && tableContainerRef.current) {
+        const table = tableRef.current;
+        const container = tableContainerRef.current;
+
+        const horizontalOverflow = table.offsetWidth > container.clientWidth;
+        const verticalOverflow = table.offsetHeight > container.clientHeight;
+
+        setIsOverflowing({
+          horizontal: horizontalOverflow,
+          vertical: verticalOverflow,
+        });
+      }
+    };
+
+    checkOverflow();
+
+    // Check on window resize
+    window.addEventListener("resize", checkOverflow);
+
+    // Check when table data changes
+    const timeoutId = setTimeout(checkOverflow, 100);
+
+    return () => {
+      window.removeEventListener("resize", checkOverflow);
+      clearTimeout(timeoutId);
+    };
+  }, [tableQuery.data?.data, pageSize]);
+
+  return (
+    <div className={cn("flex", "flex-col", "flex-1", "gap-4")}>
+      <div
+        ref={tableContainerRef}
+        className={cn(
+          "overflow-hidden rounded-xl border bg-card shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
+        )}
+      >
+        <Table ref={tableRef} style={{ tableLayout: "fixed", width: "100%" }}>
+          <TableHeader className="bg-muted/45">
+            {getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const isPlaceholder = header.isPlaceholder;
+
+                  return (
+                    <TableHead
+                      key={header.id}
+                      style={{
+                        ...getCommonStyles({
+                          column: header.column,
+                          isOverflowing: isOverflowing,
+                        }),
+                      }}
+                    >
+                      {isPlaceholder ? null : (
+                        <div className={cn("flex", "items-center", "gap-1")}>
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                        </div>
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody className="relative">
+            {isLoading ? (
+              <>
+                {Array.from({ length: pageSize < 1 ? 1 : pageSize }).map(
+                  (_, rowIndex) => (
+                    <TableRow
+                      key={`skeleton-row-${rowIndex}`}
+                      aria-hidden="true"
+                    >
+                      {leafColumns.map((column) => (
+                        <TableCell
+                          key={`skeleton-cell-${rowIndex}-${column.id}`}
+                          style={{
+                            ...getCommonStyles({
+                              column,
+                              isOverflowing: isOverflowing,
+                            }),
+                          }}
+                          className={cn("truncate")}
+                        >
+                          <div className="h-8" />
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  )
+                )}
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className={cn("absolute", "inset-0", "pointer-events-none")}
+                  >
+                    <Loader2
+                      className={cn(
+                        "absolute",
+                        "top-1/2",
+                        "left-1/2",
+                        "animate-spin",
+                        "text-primary",
+                        "h-8",
+                        "w-8",
+                        "-translate-x-1/2",
+                        "-translate-y-1/2"
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+              </>
+            ) : getRowModel().rows?.length ? (
+              getRowModel().rows.map((row) => {
+                return (
+                  <TableRow
+                    key={row.original?.id ?? row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => {
+                      return (
+                        <TableCell
+                          key={cell.id}
+                          style={{
+                            ...getCommonStyles({
+                              column: cell.column,
+                              isOverflowing: isOverflowing,
+                            }),
+                          }}
+                        >
+                          <div className="truncate">
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </div>
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })
+            ) : (
+              <DataTableNoData
+                isOverflowing={isOverflowing}
+                columnsLength={columns.length}
+              />
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {!isLoading && getRowModel().rows?.length > 0 && (
+        <DataTablePagination
+          currentPage={currentPage}
+          pageCount={pageCount}
+          setCurrentPage={setCurrentPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          total={tableQuery.data?.total}
+        />
+      )}
+    </div>
+  );
+}
+
+function DataTableNoData({
+  isOverflowing,
+  columnsLength,
+}: {
+  isOverflowing: { horizontal: boolean; vertical: boolean };
+  columnsLength: number;
+}) {
+  return (
+    <TableRow className="hover:bg-transparent">
+      <TableCell
+        colSpan={columnsLength}
+        className={cn("relative", "text-center")}
+        style={{ height: "490px" }}
+      >
+        <div
+          className={cn(
+            "absolute",
+            "inset-0",
+            "flex",
+            "flex-col",
+            "items-center",
+            "justify-center",
+            "gap-2",
+            "bg-card"
+          )}
+          style={{
+            position: isOverflowing.horizontal ? "sticky" : "absolute",
+            left: isOverflowing.horizontal ? "50%" : "50%",
+            transform: "translateX(-50%)",
+            zIndex: isOverflowing.horizontal ? 2 : 1,
+            width: isOverflowing.horizontal ? "fit-content" : "100%",
+            minWidth: "300px",
+          }}
+        >
+          <div className={cn("text-lg", "font-semibold", "text-foreground")}>
+            No data to display
+          </div>
+          <div className={cn("text-sm", "text-muted-foreground")}>
+            This table is empty for the time being.
+          </div>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function getCommonStyles<TData>({
+  column,
+  isOverflowing,
+}: {
+  column: Column<TData>;
+  isOverflowing: {
+    horizontal: boolean;
+    vertical: boolean;
+  };
+}): React.CSSProperties {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    boxShadow:
+      isOverflowing.horizontal && isLastLeftPinnedColumn
+        ? "-4px 0 4px -4px var(--border) inset"
+        : isOverflowing.horizontal && isFirstRightPinnedColumn
+        ? "4px 0 4px -4px var(--border) inset"
+        : undefined,
+    left:
+      isOverflowing.horizontal && isPinned === "left"
+        ? `${column.getStart("left")}px`
+        : undefined,
+    right:
+      isOverflowing.horizontal && isPinned === "right"
+        ? `${column.getAfter("right")}px`
+        : undefined,
+    opacity: 1,
+    position: isOverflowing.horizontal && isPinned ? "sticky" : "relative",
+    background: isOverflowing.horizontal && isPinned ? "var(--background)" : "",
+    borderTopRightRadius:
+      isOverflowing.horizontal && isPinned === "right"
+        ? "var(--radius)"
+        : undefined,
+    borderBottomRightRadius:
+      isOverflowing.horizontal && isPinned === "right"
+        ? "var(--radius)"
+        : undefined,
+    borderTopLeftRadius:
+      isOverflowing.horizontal && isPinned === "left"
+        ? "var(--radius)"
+        : undefined,
+    borderBottomLeftRadius:
+      isOverflowing.horizontal && isPinned === "left"
+        ? "var(--radius)"
+        : undefined,
+    width: column.getSize(),
+    zIndex: isOverflowing.horizontal && isPinned ? 1 : 0,
+  };
+}
+
+DataTable.displayName = "DataTable";

package/src/components/notifications/toaster.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { useTheme } from "@/components/theme/theme-provider";
+
+export function Toaster({ ...props }: ToasterProps) {
+  const { theme = "light" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+}

package/src/components/notifications/undoable-notification.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { useTranslate } from "@refinedev/core";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type UndoableNotificationProps = {
+  message: string;
+  description?: string;
+  undoableTimeout?: number;
+  cancelMutation?: () => void;
+  onClose?: () => void;
+};
+
+export function UndoableNotification({
+  message,
+  description,
+  undoableTimeout = 5,
+  cancelMutation,
+  onClose,
+}: UndoableNotificationProps) {
+  const t = useTranslate();
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose?.();
+    }, undoableTimeout * 1000);
+
+    return () => clearTimeout(timer);
+  }, [onClose, undoableTimeout]);
+
+  const handleUndo = () => {
+    cancelMutation?.();
+    onClose?.();
+  };
+
+  return (
+    <div
+      className={cn(
+        "bg-card",
+        "text-card-foreground",
+        "rounded-lg",
+        "p-4",
+        "shadow-xl",
+        "border",
+        "border-border",
+        "min-w-[320px]",
+        "max-w-md"
+      )}
+    >
+      <div className={cn("flex", "items-center", "justify-between")}>
+        <div className={cn("flex-1", "mr-4")}>
+          <div className={cn("font-medium", "text-foreground", "text-sm")}>
+            {message}
+          </div>
+          {description && (
+            <div className={cn("text-muted-foreground", "text-sm", "mt-1")}>
+              {description}
+            </div>
+          )}
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleUndo}
+          className={cn(
+            "bg-secondary",
+            "hover:bg-secondary/80",
+            "text-secondary-foreground",
+            "border-0",
+            "px-4",
+            "py-2",
+            "text-sm",
+            "font-medium",
+            "rounded-md"
+          )}
+        >
+          {t("buttons.undo", "Undo")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+UndoableNotification.displayName = "UndoableNotification";

package/src/components/notifications/use-notification-provider.tsx

@@ -0,0 +1,62 @@
+import type { NotificationProvider } from "@refinedev/core";
+import { toast } from "sonner";
+import { UndoableNotification } from "@/components/notifications/undoable-notification";
+
+export function useNotificationProvider(): NotificationProvider {
+  return {
+    open: ({
+      key,
+      type,
+      message,
+      description,
+      undoableTimeout,
+      cancelMutation,
+    }) => {
+      switch (type) {
+        case "success":
+          toast.success(message, {
+            id: key,
+            description,
+            richColors: true,
+          });
+          return;
+
+        case "error":
+          toast.error(message, {
+            id: key,
+            description,
+            richColors: true,
+          });
+          return;
+
+        case "progress": {
+          const toastId = key || Date.now();
+
+          toast(
+            () => (
+              <UndoableNotification
+                message={message}
+                description={description}
+                undoableTimeout={undoableTimeout}
+                cancelMutation={cancelMutation}
+                onClose={() => toast.dismiss(toastId)}
+              />
+            ),
+            {
+              id: toastId,
+              duration: (undoableTimeout || 5) * 1000,
+              unstyled: true,
+            }
+          );
+          return;
+        }
+
+        default:
+          return;
+      }
+    },
+    close: (id) => {
+      toast.dismiss(id);
+    },
+  };
+}