@customafk/lunas-ui 0.0.7 → 0.0.8

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

@@ -0,0 +1,328 @@
+import React, { type CSSProperties } from "react";
+import {
+  type Column,
+  flexRender,
+  type Header,
+  type Table as ReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowLeftToLineIcon,
+  ArrowRightToLineIcon,
+  ChevronDown,
+  ChevronUp,
+  EllipsisIcon,
+  PackagePlusIcon,
+  PinOffIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import type { AnyEntity } from "@/types";
+
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+
+// Helper function to compute pinning styles for columns
+const getPinningStyles = (column: Column<AnyEntity>): CSSProperties => {
+  const isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0,
+  };
+};
+
+const SortingIndicator = ({ column }: { column: Column<AnyEntity> }) => {
+  const sortDirection = column.getIsSorted();
+
+  const icons = {
+    asc: (
+      <ChevronUp
+        className="shrink-0 opacity-60"
+        size={16}
+        strokeWidth={2}
+        aria-hidden="true"
+      />
+    ),
+    desc: (
+      <ChevronDown
+        className="shrink-0 opacity-60"
+        size={16}
+        strokeWidth={2}
+        aria-hidden="true"
+      />
+    ),
+  };
+
+  return sortDirection ? icons[sortDirection] : null;
+};
+
+const PinControls = ({ column }: { column: Column<AnyEntity> }) => {
+  const columnHeader = column.columnDef.header as string;
+
+  if (!column.getCanPin()) return null;
+
+  if (column.getIsPinned()) {
+    return (
+      <Button
+        size="icon"
+        variant="ghost"
+        className="hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none"
+        aria-label={`Unpin ${columnHeader} column`}
+        title={`Unpin ${columnHeader} column`}
+        onClick={() => column.pin(false)}
+      >
+        <PinOffIcon className="opacity-60" size={16} aria-hidden="true" />
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="-mr-1 size-7 shadow-none"
+          aria-label={`Pin options for ${columnHeader} column`}
+          title={`Pin options for ${columnHeader} column`}
+        >
+          <EllipsisIcon className="opacity-60" size={16} aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => column.pin("left")}>
+          <ArrowLeftToLineIcon
+            size={16}
+            className="opacity-60"
+            aria-hidden="true"
+          />
+          Stick to left
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => column.pin("right")}>
+          <ArrowRightToLineIcon
+            size={16}
+            className="opacity-60"
+            aria-hidden="true"
+          />
+          Stick to right
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const HeaderContent = ({ header }: { header: Header<AnyEntity, unknown> }) => {
+  const { column } = header;
+
+  const handleSort = (e: React.KeyboardEvent) => {
+    if (column.getCanSort() && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      column.getToggleSortingHandler()?.(e);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 truncate">
+      {!header.isPlaceholder && (
+        <div
+          className={cn(
+            column.getCanSort() &&
+              "flex h-full cursor-pointer items-center justify-between gap-2 select-none",
+          )}
+          onClick={column.getToggleSortingHandler()}
+          onKeyDown={handleSort}
+          tabIndex={column.getCanSort() ? 0 : undefined}
+        >
+          <span className="truncate">
+            {flexRender(column.columnDef.header, header.getContext())}
+          </span>
+          <SortingIndicator column={column} />
+        </div>
+      )}
+      {!header.isPlaceholder && <PinControls column={column} />}
+    </div>
+  );
+};
+
+interface DataTableProps {
+  table: ReactTable<AnyEntity>;
+  columnsLength?: number;
+  isLoading?: boolean;
+  onClickRow?: (id: string) => void;
+}
+
+export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
+  "use no memo";
+  return (
+    <ScrollArea className="border-border bg-background relative w-full overflow-auto rounded-lg border">
+      <Table
+        className={cn(
+          "!w-full",
+          "[&_td]:border-border",
+          "[&_th]:border-border",
+          "table-fixed border-separate border-spacing-0",
+          "[&_tfoot_td]:border-t",
+          "[&_th]:border-b",
+          "[&_tr]:border-none",
+          "[&_tr:not(:last-child)_td]:border-b",
+        )}
+        style={{
+          width: table.getTotalSize(),
+        }}
+      >
+        <TableHeader className="bg-muted/50 sticky top-0 z-10 backdrop-blur-xs">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-muted/50">
+              {headerGroup.headers.map((header) => {
+                const { column } = header;
+                const isPinned = column.getIsPinned();
+                const isLastLeftPinned =
+                  isPinned === "left" && column.getIsLastColumn("left");
+                const isFirstRightPinned =
+                  isPinned === "right" && column.getIsFirstColumn("right");
+                return (
+                  <TableHead
+                    key={header.id}
+                    data-pinned={isPinned || undefined}
+                    data-last-col={
+                      isLastLeftPinned
+                        ? "left"
+                        : isFirstRightPinned
+                          ? "right"
+                          : undefined
+                    }
+                    className={cn(
+                      "text-accent-foreground/60 relative h-9 border-r font-semibold select-none",
+                      "data-pinned:backdrop-blur-xs",
+                      "data-pinned:bg-muted/90",
+                      "[&>.cursor-col-resize]:last:opacity-0",
+                      "[&[data-pinned][data-last-col]]:border-border",
+                      "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0",
+                      "[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0",
+                      "[&[data-pinned=left][data-last-col=left]]:border-r",
+                      "[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0",
+                      "[&[data-pinned=right][data-last-col=right]]:border-l",
+                    )}
+                    {...{
+                      colSpan: header.colSpan,
+                      style: {
+                        width: header.getSize(),
+                        maxWidth: header.getSize(),
+                        ...getPinningStyles(header.column),
+                      },
+                    }}
+                  >
+                    <HeaderContent header={header} />
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+
+        <TableBody
+          className={cn(
+            isLoading && "h-36",
+            table.getRowModel().rows?.length === 0 && "h-48",
+          )}
+        >
+          {isLoading ? (
+            <TableRow className="absolute top-9 flex h-36 w-full items-center justify-center">
+              <TableCell>loading...</TableCell>
+            </TableRow>
+          ) : (
+            <React.Fragment>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    className="cursor-pointer border-none focus:outline-none"
+                    onClick={() =>
+                      onClickRow?.(
+                        row?.id ||
+                          row.original?.id?.toString() ||
+                          row.original?.uuid ||
+                          undefined,
+                      )
+                    }
+                  >
+                    {row.getVisibleCells().map((cell) => {
+                      const { column } = cell;
+                      const isPinned = column.getIsPinned();
+                      const isLastLeftPinned =
+                        isPinned === "left" && column.getIsLastColumn("left");
+                      const isFirstRightPinned =
+                        isPinned === "right" &&
+                        column.getIsFirstColumn("right");
+                      return (
+                        <TableCell
+                          key={cell.id}
+                          style={{
+                            ...getPinningStyles(column),
+                            width: cell.column.getSize(),
+                            maxWidth: cell.column.getSize(),
+                          }}
+                          data-pinned={isPinned || undefined}
+                          data-last-col={
+                            isLastLeftPinned
+                              ? "left"
+                              : isFirstRightPinned
+                                ? "right"
+                                : undefined
+                          }
+                          className={cn(
+                            "overflow-hidden py-2.5",
+                            "[&[data-pinned][data-last-col]]:border-border",
+                            "[&[data-pinned=left][data-last-col=left]]:border-r",
+                            "[&[data-pinned=right][data-last-col=right]]:border-l",
+                            "data-pinned:bg-background/90",
+                          )}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow className="absolute top-9 flex h-36 w-full items-center justify-center">
+                  <TableCell>
+                    <div className="text-muted-foreground flex size-full flex-col items-center justify-center gap-y-8 text-base">
+                      <PackagePlusIcon size={48} strokeWidth={2} />
+                      <p>Thêm dữ liệu để hiển thị</p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </React.Fragment>
+          )}
+        </TableBody>
+      </Table>
+      <ScrollBar orientation="vertical" className="z-10 w-2" />
+      <ScrollBar
+        orientation="horizontal"
+        className="absolute right-0 bottom-0 left-0 h-2"
+      />
+    </ScrollArea>
+  );
+};

package/packages/components/table/index.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+
+import { DataTable } from "./data-table";
+import { DataTablePagination } from "./data-table-pagination";
+import { Flex } from "../layouts/flex";
+import { AddNewBtn } from "../ui/buttons/add-new";
+import { RefreshBtn } from "../ui/buttons/refresh";
+import { SearchInput } from "../ui/inputs/search-input";
+
+type Props<T> = {
+  data: T[];
+  totalCount?: number;
+  isLoading?: boolean;
+  columns: ColumnDef<T>[];
+  pagination?: PaginationState;
+  onAdd?: () => void;
+  onRefresh?: () => void;
+  onClickRow?: (id: string) => void;
+  onPaginationChange?: React.Dispatch<React.SetStateAction<PaginationState>>;
+};
+export function Table<T extends Record<string, unknown>>({
+  data,
+  totalCount,
+  isLoading,
+  columns,
+  pagination,
+  onAdd,
+  onRefresh,
+  onClickRow,
+  onPaginationChange,
+}: Props<T>) {
+  "use no memo";
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const initialState = React.useMemo(
+    () => ({
+      columnPinning: { right: ["actions", "update", "delete"] },
+      pagination: { pageIndex: 0, pageSize: 20 },
+    }),
+    [],
+  );
+
+  const table = useReactTable<T>({
+    initialState,
+    data,
+    columns,
+    rowCount: totalCount,
+    columnResizeMode: "onChange",
+    manualPagination: true,
+    enableColumnResizing: false,
+    enableMultiRowSelection: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getRowId: (row) => (row.id as string) || (row.uuid as string),
+    state: {
+      rowSelection,
+      sorting,
+      columnVisibility,
+      columnFilters,
+      ...(pagination ? { pagination } : {}),
+    },
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnFiltersChange: setColumnFilters,
+    ...(onPaginationChange ? { onPaginationChange } : {}),
+  });
+
+  return (
+    <Flex
+      vertical
+      wrap={false}
+      gap="sm"
+      align="start"
+      className="size-full overflow-y-auto pt-1"
+    >
+      <Flex justify="between" padding="none" width="full" className="flex-0">
+        <SearchInput placeholder="Search..." />
+        <Flex className="px-0">
+          {onAdd && <AddNewBtn onClick={onAdd} />}
+          <RefreshBtn onClick={onRefresh} />
+        </Flex>
+      </Flex>
+      <Flex
+        padding="none"
+        vertical
+        wrap={false}
+        width="full"
+        className="flex-1 overflow-auto"
+      >
+        <DataTable
+          table={table}
+          isLoading={isLoading}
+          onClickRow={onClickRow}
+        />
+        <DataTablePagination<T> table={table} />
+      </Flex>
+    </Flex>
+  );
+}

package/packages/components/typography/paragraph.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+type Props = {
+  variant?: "p" | "muted" | "lead" | "sm" | "lg";
+  className?: string;
+  children?: React.ReactNode;
+};
+
+const paragraphVariants = cva("", {
+  variants: {
+    variant: {
+      p: "leading-7 [&:not(:first-child)]:mt-6",
+      sm: "text-sm leading-none font-normal",
+      lg: "text-lg font-semibold",
+      lead: "text-muted-foreground text-xl",
+      muted: "text-muted-foreground text-sm",
+    },
+    default: {
+      variant: "sm",
+    },
+  },
+});
+
+export const Paragraph = ({ variant = "p", className, children }: Props) => {
+  return (
+    <p className={cn(paragraphVariants({ variant }), className)}>{children}</p>
+  );
+};

package/packages/components/typography/title.tsx

@@ -0,0 +1,36 @@
+import type { JSX } from "react";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const titleVariants = cva(
+  "scroll-m-20 text-secondary-foreground tracking-tight",
+  {
+    variants: {
+      level: {
+        1: "text-center text-4xl font-extrabold text-balance",
+        2: "border-b pb-2 text-3xl font-semibold first:mt-0",
+        3: "text-2xl font-semibold",
+        4: "text-xl font-semibold",
+        5: "text-lg font-semibold",
+        6: "text-base font-semibold",
+      },
+      default: {
+        level: 1,
+      },
+    },
+  },
+);
+
+type Props = {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const Title = ({ level = 1, className, children }: Props) => {
+  const Comp = `h${level}` as keyof JSX.IntrinsicElements;
+  return (
+    <Comp className={cn(titleVariants({ level }), className)}>{children}</Comp>
+  );
+};

package/packages/components/ui/alert-dialog.tsx

@@ -0,0 +1,173 @@
+"use client";
+import React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in",
+        "data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0",
+        "data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background",
+          "data-[state=open]:animate-in",
+          "data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0",
+          "data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95",
+          "data-[state=open]:zoom-in-95",
+          "fixed z-50",
+          "top-1/2 left-1/2",
+          "-translate-1/2",
+          "grid w-full max-w-[calc(100%-2rem)]",
+          "gap-4 rounded-lg p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+      autoFocus
+      tabIndex={1}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};