@ayasofyazilim/ui 0.0.0

package/src/custom/master-data-grid/components/table/header-cell.tsx

@@ -0,0 +1,162 @@
+"use no memo";
+import type { Column, Header } from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  EyeOff,
+  FilterIcon,
+  PinIcon,
+  PinOffIcon,
+  Undo2,
+} from "lucide-react";
+import { Button } from "../../../../components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../../components/dropdown-menu";
+import { getTranslations } from "../../utils/translation-utils";
+import { InlineColumnFilter } from "../filters";
+import { MasterDataGridResources } from "../../types";
+
+interface HeaderCellProps<TData> {
+  column: Column<TData>;
+  header?: Header<TData, unknown>;
+  label: string;
+  t?: MasterDataGridResources;
+}
+export function HeaderCell<TData>({
+  column,
+  header,
+  label,
+  t,
+}: HeaderCellProps<TData>) {
+  const isSorted = column.getIsSorted();
+  const isPinned = column.getIsPinned();
+
+  const hasAnyAction =
+    column.getCanSort() ||
+    column.getCanPin() ||
+    column.getCanFilter() ||
+    column.getCanResize() ||
+    column.getCanHide();
+
+  if (!hasAnyAction) {
+    return (
+      <div className="flex items-center size-full">
+        <span className="font-semibold truncate">{label}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center size-full relative">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="data-[state=open]:bg-accent w-full rounded-none"
+          >
+            <span className="font-semibold mr-auto truncate">{label}</span>
+            {isSorted === "asc" ? (
+              <ArrowUp className="ml-2 h-4 w-4" />
+            ) : isSorted === "desc" ? (
+              <ArrowDown className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronDown className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {column.getCanSort() && (
+            <>
+              <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+                <ArrowUp className="mr-2 h-4 w-4" />
+                {getTranslations("column.sortAsc", t)}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+                <ArrowDown className="mr-2 h-4 w-4" />
+                {getTranslations("column.sortDesc", t)}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+
+          {column.getCanPin() && (
+            <>
+              <DropdownMenuItem onClick={() => column.pin("left")}>
+                <PinIcon className="mr-2 h-4 w-4" />
+                {getTranslations("column.pinLeft", t)}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => column.pin("right")}>
+                <PinIcon className="mr-2 h-4 w-4" />
+                {getTranslations("column.pinRight", t)}
+              </DropdownMenuItem>
+              {isPinned && (
+                <DropdownMenuItem onClick={() => column.pin(false)}>
+                  <PinOffIcon className="mr-2 h-4 w-4" />
+                  {getTranslations("column.unpin", t)}
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuSeparator />
+            </>
+          )}
+
+          {column.getCanFilter() && (
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="flex items-center gap-4 font-normal">
+                <FilterIcon className="h-4 w-4 text-muted-foreground" />
+                {getTranslations("column.filter", t)}
+              </DropdownMenuLabel>
+              <DropdownMenuItem className="p-0" asChild>
+                <InlineColumnFilter column={column} t={t} />
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
+
+          {header &&
+            column.getCanResize() &&
+            column.getSize() !== column.columnDef.size && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => header.column.resetSize()}>
+                  <Undo2 className="mr-2 h-4 w-4" />
+                  {getTranslations("column.resetSize", t)}
+                </DropdownMenuItem>
+              </>
+            )}
+
+          {column.getCanHide() && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeOff className="mr-2 h-4 w-4" />
+                {getTranslations("column.hide", t)}
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {header && column.getCanResize() && (
+        <div
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          className={`absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none hover:bg-primary transition-opacity ${
+            column.getIsResizing()
+              ? "bg-primary opacity-100"
+              : "opacity-0 hover:opacity-50"
+          }`}
+          style={{
+            transform: column.getIsResizing() ? "translateX(0)" : undefined,
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/custom/master-data-grid/components/table/index.ts

@@ -0,0 +1,4 @@
+export * from "./cell-renderer";
+export * from "./table-body-renderer";
+export * from "./virtual-body";
+export * from "./header-cell";

package/src/custom/master-data-grid/components/table/table-body-renderer.tsx

@@ -0,0 +1,113 @@
+"use no memo";
+import type { Row, Table as TanStackTable } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
+import React from "react";
+import { TableBody, TableCell, TableRow } from "../../../../components/table";
+import { cn } from "../../../../lib/utils";
+import {
+  getPinningCellClassNames,
+  getPinningCellStyles,
+} from "../../utils/pinning-utils";
+
+interface TableBodyRendererProps<TData> {
+  table: TanStackTable<TData>;
+  rows: Row<TData>[];
+  rowClassName?: string | ((row: TData) => string);
+  cellClassName?: string | ((cell: { row: TData; columnId: string }) => string);
+  editingRows?: Record<string, Record<string, unknown>>;
+  getRowId?: (row: TData, index: number) => string;
+  editingEnabled?: boolean;
+  emptyMessage?: string;
+  expansionEnabled?: boolean;
+  expansionRenderContent?: (row: TData) => React.ReactNode;
+  bodyClassName?: string;
+}
+
+export function TableBodyRenderer<TData>({
+  table,
+  rows,
+  rowClassName,
+  cellClassName,
+  editingRows,
+  getRowId,
+  editingEnabled,
+  emptyMessage,
+  expansionEnabled,
+  expansionRenderContent,
+  bodyClassName,
+}: TableBodyRendererProps<TData>) {
+  return (
+    <TableBody className={bodyClassName}>
+      {rows.length ? (
+        rows.map((row) => (
+          <React.Fragment key={row.id}>
+            <TableRow
+              data-state={row.getIsSelected() && "selected"}
+              className={cn(
+                typeof rowClassName === "function"
+                  ? rowClassName(row.original)
+                  : rowClassName,
+                "group"
+              )}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const cellClass =
+                  typeof cellClassName === "function"
+                    ? cellClassName({
+                        row: row.original,
+                        columnId: cell.column.id,
+                      })
+                    : cellClassName;
+
+                const rowId = getRowId
+                  ? getRowId(row.original, row.index)
+                  : String(row.index);
+                const isEditing = editingRows?.[rowId] !== undefined;
+
+                return (
+                  <TableCell
+                    key={cell.id}
+                    style={getPinningCellStyles(cell)}
+                    className={cn(
+                      cellClass,
+                      "last:border-0! first:border-0! group-last:border-b-0! py-0 h-9 has-[div>input]:px-0 has-[div>button]:px-0",
+                      getPinningCellClassNames(cell),
+                      isEditing && "py-0",
+                      editingEnabled && "border",
+                      editingEnabled &&
+                        !isEditing &&
+                        "hover:border-muted-foreground/40"
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+            {row.getIsExpanded() &&
+              expansionEnabled &&
+              expansionRenderContent && (
+                <TableRow>
+                  <TableCell
+                    className="has-[.pp-0]:p-0"
+                    colSpan={row.getVisibleCells().length}
+                  >
+                    {expansionRenderContent(row.original)}
+                  </TableCell>
+                </TableRow>
+              )}
+          </React.Fragment>
+        ))
+      ) : (
+        <TableRow>
+          <TableCell
+            colSpan={table.getAllColumns().length}
+            className="h-24 text-center"
+          >
+            {emptyMessage || "No results."}
+          </TableCell>
+        </TableRow>
+      )}
+    </TableBody>
+  );
+}

package/src/custom/master-data-grid/components/table/virtual-body.tsx

@@ -0,0 +1,138 @@
+"use no memo";
+import type { Row } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React, { useRef } from "react";
+import { TableBody, TableCell, TableRow } from "../../../../components/table";
+import { cn } from "../../../../lib/utils";
+import {
+  getPinningCellClassNames,
+  getPinningCellStyles,
+} from "../../utils/pinning-utils";
+
+interface VirtualBodyProps<TData> {
+  rows: Row<TData>[];
+  estimateSize?: number;
+  overscan?: number;
+  rowClassName?: string | ((row: TData) => string);
+  cellClassName?: string | ((cell: { row: TData; columnId: string }) => string);
+  editingRows?: Record<string, Record<string, unknown>>;
+  getRowId?: (row: TData, index: number) => string;
+  editingEnabled?: boolean;
+  expansionEnabled?: boolean;
+  expansionRenderContent?: (row: TData) => React.ReactNode;
+}
+
+export function VirtualBody<TData>({
+  rows,
+  estimateSize = 53,
+  overscan = 10,
+  rowClassName,
+  cellClassName,
+  editingRows,
+  getRowId,
+  editingEnabled,
+  expansionEnabled,
+  expansionRenderContent,
+}: VirtualBodyProps<TData>) {
+  const tableContainerRef = useRef<HTMLTableSectionElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => {
+      return tableContainerRef.current?.closest(
+        ".overflow-auto"
+      ) as HTMLElement | null;
+    },
+    estimateSize: () => estimateSize,
+    overscan,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start || 0 : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end || 0)
+      : 0;
+
+  return (
+    <TableBody ref={tableContainerRef}>
+      {paddingTop > 0 && (
+        <tr>
+          <td style={{ height: `${paddingTop}px` }} />
+        </tr>
+      )}
+
+      {virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+
+        const rowClass =
+          typeof rowClassName === "function"
+            ? rowClassName(row.original)
+            : rowClassName;
+
+        return (
+          <React.Fragment key={row.id}>
+            <TableRow
+              data-state={row.getIsSelected() && "selected"}
+              className={cn(rowClass, "group")}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const cellClass =
+                  typeof cellClassName === "function"
+                    ? cellClassName({
+                        row: row.original,
+                        columnId: cell.column.id,
+                      })
+                    : cellClassName;
+
+                const rowId = getRowId
+                  ? getRowId(row.original, row.index)
+                  : String(row.index);
+                const isEditing = editingRows?.[rowId] !== undefined;
+
+                return (
+                  <TableCell
+                    key={cell.id}
+                    style={getPinningCellStyles(cell)}
+                    className={cn(
+                      cellClass,
+                      isEditing && "py-0",
+                      getPinningCellClassNames(cell),
+                      "border-b border-r",
+                      editingEnabled &&
+                        "border border-dashed border-muted-foreground/20",
+                      editingEnabled &&
+                        !isEditing &&
+                        "hover:border-muted-foreground/40"
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+            {row.getIsExpanded() &&
+              expansionEnabled &&
+              expansionRenderContent && (
+                <TableRow>
+                  <TableCell colSpan={row.getVisibleCells().length}>
+                    {expansionRenderContent(row.original)}
+                  </TableCell>
+                </TableRow>
+              )}
+          </React.Fragment>
+        );
+      })}
+
+      {paddingBottom > 0 && (
+        <tr>
+          <td style={{ height: `${paddingBottom}px` }} />
+        </tr>
+      )}
+    </TableBody>
+  );
+}

package/src/custom/master-data-grid/components/toolbar/index.ts

@@ -0,0 +1 @@
+export { Toolbar } from "./toolbar";