sea-dev 1.0.0

package/libs/ui/src/components/table/report-table.tsx

@@ -0,0 +1,305 @@
+import { cn } from "@/lib/utils";
+import { Table, TableBody, TableCell, TableRow } from "@sea/ui/components/ui/table";
+import type { OnChangeFn, Updater } from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { notUndefined, useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Skeleton } from "../ui/skeleton";
+
+const CELL_HEIGHT = 53;
+
+export interface ReportTableProps<TData extends object, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  loading?: boolean;
+  sortingState?: SortingState;
+  columnFiltersState?: ColumnFiltersState;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+  onSortingChange?: OnChangeFn<SortingState>;
+}
+
+export function ReportTable<TData extends object, TValue>({
+  columns,
+  data,
+  loading = false,
+  sortingState,
+  columnFiltersState,
+  onColumnFiltersChange,
+  onSortingChange,
+}: ReportTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>(sortingState ?? []);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(columnFiltersState ?? []);
+
+  const handleColumnFiltersChange = useCallback(
+    (updater: Updater<ColumnFiltersState>) => {
+      const nextFilters = typeof updater === "function" ? updater(columnFilters) : updater;
+      setColumnFilters(nextFilters);
+      onColumnFiltersChange?.(nextFilters);
+    },
+    [columnFilters, onColumnFiltersChange],
+  );
+
+  const handleSortingChange = useCallback(
+    (updater: Updater<SortingState>) => {
+      const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
+      setSorting(nextSorting);
+      onSortingChange?.(nextSorting);
+    },
+    [sorting, onSortingChange],
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: handleSortingChange,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: handleColumnFiltersChange,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+    },
+  });
+
+  const parentRef = useRef<HTMLDivElement>(null);
+  const headers = table.getHeaderGroups()[0]?.headers || [];
+  const [expandedHeaders, setExpandedHeaders] = useState<Set<string>>(new Set());
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
+  const { rows } = table.getRowModel();
+
+  // build flat list of items including group headers and field rows
+  const flatItems = useMemo(() => {
+    const items: Array<
+      | { type: "group-header"; groupName: string; groupHint?: string; isFirst: boolean }
+      | { type: "field-row"; header: (typeof headers)[number]; groupName: string }
+    > = [];
+    let lastGroupName: string | null = null;
+    let groupHeaderCount = 0;
+
+    headers.forEach((header) => {
+      const columnDef = header.column.columnDef;
+      const meta = columnDef.meta as
+        | {
+            groupName?: string;
+            groupHint?: string;
+            isFirstInGroup?: boolean;
+          }
+        | undefined;
+      const groupName = meta?.groupName ?? "";
+      const groupHint = meta?.groupHint;
+
+      // Insert group header when entering a new group (only for non-empty group names)
+      if (groupName && groupName !== lastGroupName) {
+        items.push({
+          type: "group-header",
+          groupName,
+          groupHint,
+          isFirst: groupHeaderCount > 0,
+        });
+        lastGroupName = groupName;
+        groupHeaderCount++;
+      }
+
+      items.push({ type: "field-row", header, groupName });
+    });
+
+    return items;
+  }, [headers]);
+
+  // Filter out collapsed items
+  const visibleItems = useMemo(() => {
+    return flatItems.filter((item) => {
+      if (item.type === "group-header") return true;
+      if (item.type === "field-row") {
+        return !collapsedGroups.has(item.groupName);
+      }
+      return true;
+    });
+  }, [flatItems, collapsedGroups]);
+
+  const virtualizer = useVirtualizer({
+    count: visibleItems.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      const item = visibleItems[index];
+      return item?.type === "group-header" ? 40 : CELL_HEIGHT;
+    },
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+  const [before, after] =
+    virtualItems.length > 0
+      ? [
+          notUndefined(virtualItems[0]).start - virtualizer.options.scrollMargin,
+          virtualizer.getTotalSize() - notUndefined(virtualItems[virtualItems.length - 1]).end,
+        ]
+      : [0, 0];
+
+  const toggleHeader = (id: string) => {
+    setExpandedHeaders((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleGroup = (groupName: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupName)) {
+        next.delete(groupName);
+      } else {
+        next.add(groupName);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div ref={parentRef} className="bg-card max-h-full overflow-auto rounded-lg border shadow-xs">
+      <Table className="w-auto">
+        <TableBody>
+          {before > 0 && (
+            <tr>
+              <td colSpan={rows.length + 1} style={{ height: before }} />
+            </tr>
+          )}
+          {visibleItems.length ? (
+            virtualItems.map((virtualRow) => {
+              const item = visibleItems[virtualRow.index];
+              if (!item) return null;
+
+              // Render group header row
+              if (item.type === "group-header") {
+                const isCollapsed = collapsedGroups.has(item.groupName);
+                return (
+                  <TableRow
+                    key={`group-${item.groupName}`}
+                    className={cn("border-0", item.isFirst && "border-t")}
+                  >
+                    <TableCell
+                      className={cn("bg-card sticky left-0 z-30 py-3 pl-4", item.isFirst && "pt-6")}
+                    >
+                      <button
+                        type="button"
+                        onClick={() => toggleGroup(item.groupName)}
+                        className="text-foreground hover:text-muted-foreground flex items-center gap-2 text-sm font-medium"
+                        title={item.groupHint}
+                      >
+                        {isCollapsed ? (
+                          <ChevronRight className="h-4 w-4" />
+                        ) : (
+                          <ChevronDown className="h-4 w-4" />
+                        )}
+                        {item.groupName}
+                      </button>
+                    </TableCell>
+                    {rows.map((row) => (
+                      <TableCell
+                        key={`group-${item.groupName}-${row.id}`}
+                        className={cn("py-3", item.isFirst && "pt-6")}
+                      />
+                    ))}
+                  </TableRow>
+                );
+              }
+
+              // Render field row
+              const { header } = item;
+              const columnDef = header.column.columnDef;
+              const meta = columnDef.meta as
+                | {
+                    headerTooltip?: string;
+                  }
+                | undefined;
+              const headerTitle =
+                meta?.headerTooltip ??
+                (typeof columnDef.header === "string" ? columnDef.header : header.column.id);
+
+              return (
+                <TableRow
+                  key={header.id}
+                  style={{ height: CELL_HEIGHT }}
+                  className="hover:bg-muted/30 border-0"
+                >
+                  <TableCell
+                    className={cn(
+                      "bg-muted group border-r font-medium",
+                      "sticky left-0 z-30 shadow-[4px_0_6px_-4px_rgba(0,0,0,0.2)]",
+                      expandedHeaders.has(header.id)
+                        ? "whitespace-normal"
+                        : "max-w-[260px] truncate",
+                    )}
+                    style={{ width: "auto", minWidth: 150 }}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <button
+                        type="button"
+                        className="block w-full truncate text-left"
+                        title={headerTitle}
+                        onClick={() => toggleHeader(header.id)}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                      </button>
+                    )}
+                  </TableCell>
+                  {loading
+                    ? [1, 2, 3, 4, 5].map((row) => (
+                        <TableCell key={row} className="py-3">
+                          <Skeleton className="h-full w-10" key={row} />
+                        </TableCell>
+                      ))
+                    : rows.map((row) => {
+                        const cell = row
+                          .getVisibleCells()
+                          .find((c) => c.column.id === header.column.id);
+                        return (
+                          <TableCell
+                            key={`${row.id}-${header.id}`}
+                            style={{ width: 200, minWidth: 200 }}
+                            className="max-w-[300px] py-3"
+                          >
+                            {cell
+                              ? flexRender(cell.column.columnDef.cell, cell.getContext())
+                              : null}
+                          </TableCell>
+                        );
+                      })}
+                </TableRow>
+              );
+            })
+          ) : (
+            <TableRow>
+              <TableCell
+                colSpan={rows.length + 1}
+                className="text-muted-foreground py-8 text-center"
+              >
+                No data.
+              </TableCell>
+            </TableRow>
+          )}
+          {after > 0 && (
+            <tr>
+              <td colSpan={rows.length + 1} style={{ height: after }} />
+            </tr>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/libs/ui/src/components/table/sortable-column.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@sea/ui/components/ui/button";
+import type { Column } from "@tanstack/react-table";
+import { ChevronDownIcon, ChevronsUpDownIcon, ChevronUpIcon } from "lucide-react";
+
+export function SortableColumn<T>({
+  column,
+  children,
+}: {
+  column: Column<T>;
+  children: React.ReactNode;
+}) {
+  const sorted = column.getIsSorted();
+  const notSorted = sorted === false;
+
+  const isSortedAsc = sorted === "asc";
+  const sortDescending = notSorted ? true : isSortedAsc;
+
+  return (
+    <Button
+      className="group w-full justify-between !px-0 text-left"
+      variant="ghost"
+      onClick={() => column.toggleSorting(sortDescending)}
+    >
+      {children}
+      {notSorted ? (
+        <ChevronsUpDownIcon className="group-hover:text-brand-foreground ml-2 size-4" />
+      ) : isSortedAsc ? (
+        <ChevronUpIcon className="text-brand-foreground ml-2 size-4" />
+      ) : (
+        <ChevronDownIcon className="text-brand-foreground ml-2 size-4" />
+      )}
+    </Button>
+  );
+}

package/libs/ui/src/components/ui/accordion.tsx

@@ -0,0 +1,62 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/libs/ui/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,142 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { buttonVariants } from "@/components/ui/button";
+import type { VariantProps } from "class-variance-authority";
+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(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        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 top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border 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,
+  variant,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+}) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), variant && buttonVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+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,
+};

package/libs/ui/src/components/ui/alert.tsx

@@ -0,0 +1,62 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        primary:
+          "bg-brand/30 border-brand-foreground *:data-[slot=alert-title]:text-brand-foreground",
+        destructive:
+          "text-destructive border-destructive bg-destructive/5 *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle };