@ayasofyazilim/ui 0.0.0

package/src/custom/master-data-grid/components/toolbar/toolbar.tsx

@@ -0,0 +1,314 @@
+import type { Table as TanStackTable } from "@tanstack/react-table";
+import {
+  Columns3,
+  Download,
+  Filter,
+  Menu,
+  RefreshCw,
+  RotateCcw,
+} from "lucide-react";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Button } from "../../../../components/button";
+import { ButtonGroup } from "../../../../components/button-group";
+import { Input } from "../../../../components/input";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../../../../components/drawer";
+import type { MasterDataGridConfig, ServerFilterConfig } from "../../types";
+import { getTranslations } from "../../utils/translation-utils";
+import { MultiFilterDialog } from "../filters";
+
+interface ToolbarProps<TData> {
+  table: TanStackTable<TData>;
+  config: MasterDataGridConfig<TData>;
+  selectedRows: TData[];
+  serverFilters?: ServerFilterConfig[];
+  onExport?: (format: string) => void;
+  onRefresh?: () => void;
+  onReset?: () => void;
+  onOpenColumnSettings?: () => void;
+}
+
+export function Toolbar<TData>({
+  table,
+  config,
+  selectedRows,
+  onExport,
+  onRefresh,
+  onReset,
+  onOpenColumnSettings,
+}: ToolbarProps<TData>) {
+  const { t, tableActions, enableExport } = config;
+
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const initialStateRef = useRef<{
+    globalFilter: string | undefined;
+    columnFilters: any[];
+    sorting: any[];
+    columnVisibility: Record<string, boolean>;
+    columnPinning: { left?: string[]; right?: string[] };
+  } | null>(null);
+
+  useEffect(() => {
+    if (!initialStateRef.current) {
+      const state = table.getState();
+      initialStateRef.current = {
+        globalFilter: state.globalFilter as string | undefined,
+        columnFilters: [...state.columnFilters],
+        sorting: [...state.sorting],
+        columnVisibility: { ...state.columnVisibility },
+        columnPinning: {
+          left: state.columnPinning?.left ? [...state.columnPinning.left] : [],
+          right: state.columnPinning?.right
+            ? [...state.columnPinning.right]
+            : [],
+        },
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    const currentFilter = table.getState().globalFilter as string;
+    if (currentFilter !== searchValue) {
+      setSearchValue(currentFilter ?? "");
+    }
+  }, [table.getState().globalFilter]);
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        table.setGlobalFilter(value);
+      }, 300);
+    },
+    [table]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const hasTableChanges = () => {
+    if (!initialStateRef.current) return false;
+
+    const state = table.getState();
+    const initial = initialStateRef.current;
+
+    const hasGlobalFilterChanged = state.globalFilter !== initial.globalFilter;
+
+    const hasColumnFiltersChanged =
+      state.columnFilters.length !== initial.columnFilters.length ||
+      JSON.stringify(state.columnFilters) !==
+        JSON.stringify(initial.columnFilters);
+
+    const hasSortingChanged =
+      state.sorting.length !== initial.sorting.length ||
+      JSON.stringify(state.sorting) !== JSON.stringify(initial.sorting);
+
+    const hasColumnVisibilityChanged =
+      JSON.stringify(state.columnVisibility) !==
+      JSON.stringify(initial.columnVisibility);
+
+    const currentPinning = {
+      left: state.columnPinning?.left || [],
+      right: state.columnPinning?.right || [],
+    };
+    const initialPinning = {
+      left: initial.columnPinning?.left || [],
+      right: initial.columnPinning?.right || [],
+    };
+    const hasColumnPinningChanged =
+      JSON.stringify(currentPinning) !== JSON.stringify(initialPinning);
+
+    return (
+      hasGlobalFilterChanged ||
+      hasColumnFiltersChanged ||
+      hasSortingChanged ||
+      hasColumnVisibilityChanged ||
+      hasColumnPinningChanged
+    );
+  };
+
+  const renderTableButtons = (isMobile = false) => (
+    <>
+      {config.enableFiltering && (
+        <MultiFilterDialog table={table} config={config}>
+          <Button
+            variant="outline"
+            className={isMobile ? "w-full justify-start" : ""}
+          >
+            <Filter className="mr-2 h-4 w-4" />
+            <span>{getTranslations("toolbar.filters", t)}</span>
+            {table.getState().columnFilters.length > 0 && (
+              <span
+                className={
+                  (isMobile ? "ml-auto" : "ml-2") +
+                  " rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"
+                }
+              >
+                {table.getState().columnFilters.length}
+              </span>
+            )}
+          </Button>
+        </MultiFilterDialog>
+      )}
+      {config.enableColumnVisibility && (
+        <Button
+          variant="outline"
+          onClick={() => {
+            onOpenColumnSettings?.();
+            if (isMobile) setMobileMenuOpen(false);
+          }}
+          className={isMobile ? "w-full justify-start" : ""}
+        >
+          <Columns3 className="mr-2 h-4 w-4" />
+          <span>{getTranslations("toolbar.columns", t)}</span>
+        </Button>
+      )}
+      {enableExport && onExport && (
+        <Button
+          variant="outline"
+          onClick={() => {
+            onExport("csv");
+            if (isMobile) setMobileMenuOpen(false);
+          }}
+          className={isMobile ? "w-full justify-start" : ""}
+        >
+          <Download className="mr-2 h-4 w-4" />
+          <span>{getTranslations("toolbar.export", t)}</span>
+        </Button>
+      )}
+      {onRefresh && (
+        <Button
+          variant="outline"
+          onClick={() => {
+            onRefresh();
+            if (isMobile) setMobileMenuOpen(false);
+          }}
+          className={isMobile ? "w-full justify-start" : ""}
+        >
+          <RefreshCw className="mr-2 h-4 w-4" />
+          <span>{getTranslations("toolbar.refresh", t)}</span>
+        </Button>
+      )}
+      {onReset && hasTableChanges() && (
+        <Button
+          variant="outline"
+          onClick={() => {
+            onReset();
+            if (isMobile) setMobileMenuOpen(false);
+          }}
+          className={isMobile ? "w-full justify-start" : ""}
+        >
+          <RotateCcw className="mr-2 h-4 w-4" />
+          <span>{getTranslations("toolbar.reset", t)}</span>
+        </Button>
+      )}
+    </>
+  );
+
+  const renderTableActions = (isMobile = false) =>
+    tableActions?.map((action) => {
+      const disabled =
+        typeof action.disabled === "function"
+          ? action.disabled(selectedRows)
+          : action.disabled;
+
+      const hidden =
+        typeof action.hidden === "function"
+          ? action.hidden(selectedRows)
+          : action.hidden;
+
+      if (hidden) return null;
+
+      if (action.requiresSelection && selectedRows.length === 0) {
+        return null;
+      }
+
+      const Icon = action.icon;
+
+      return (
+        <Button
+          key={action.id}
+          variant={action.variant}
+          disabled={disabled}
+          onClick={() => {
+            action.onClick?.(selectedRows);
+            if (isMobile) setMobileMenuOpen(false);
+          }}
+          className={isMobile ? "w-full justify-start" : action.className}
+        >
+          {Icon && <Icon className="mr-2 h-4 w-4" />}
+          {action.label}
+        </Button>
+      );
+    });
+
+  const hasAnyEnabledFeature =
+    config.enableSearch ||
+    config.enableFiltering ||
+    config.enableColumnVisibility ||
+    enableExport ||
+    onRefresh ||
+    (tableActions && tableActions.length > 0);
+
+  if (!hasAnyEnabledFeature) {
+    return null;
+  }
+  return (
+    <div className="flex items-center gap-2 w-full">
+      {config.enableSearch && (
+        <Input
+          placeholder={getTranslations("toolbar.search", t)}
+          value={searchValue}
+          onChange={(event) => handleSearchChange(event.target.value)}
+          className="md:max-w-sm"
+        />
+      )}
+      {selectedRows.length > 0 && (
+        <div className="text-sm text-muted-foreground">
+          {selectedRows.length} {getTranslations("toolbar.selected", t)}
+        </div>
+      )}
+
+      <ButtonGroup className="hidden ml-auto md:flex">
+        {renderTableButtons(false)}
+      </ButtonGroup>
+      <ButtonGroup className="hidden md:has-first:flex">
+        {renderTableActions(false)}
+      </ButtonGroup>
+      <Drawer open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="icon" className="md:hidden">
+            <Menu className="h-4 w-4" />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="p-2">
+          <DrawerHeader>
+            <DrawerTitle>{getTranslations("toolbar.actions", t)}</DrawerTitle>
+          </DrawerHeader>
+          <div className="flex flex-col gap-2 mt-4">
+            {renderTableButtons(true)}
+            {renderTableActions(true)}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}

package/src/custom/master-data-grid/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useEditing } from "./use-editing";
+export { useTableState } from "./use-table-state";
+export type { UseEditingProps, UseEditingReturn } from "./use-editing";

package/src/custom/master-data-grid/hooks/use-columns.tsx

@@ -0,0 +1,332 @@
+import { GenericObjectType } from "@rjsf/utils";
+import type { ColumnDef } from "@tanstack/react-table";
+import { MoreHorizontal, Pencil, Save, X } from "lucide-react";
+import { useMemo, type RefObject } from "react";
+import { Button } from "../../../components/button";
+import { Checkbox } from "../../../components/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../../components/dropdown-menu";
+import type {
+  CellProps,
+  ColumnConfig,
+  ExpandableColumnMeta,
+  JSONSchema,
+  MasterDataGridConfig,
+  MasterDataGridResources,
+} from "../types";
+import {
+  generateColumnsFromSchema,
+  mergeColumns,
+} from "../utils/column-generator";
+
+export interface UseColumnsProps<TData> {
+  config: MasterDataGridConfig<TData>;
+  configRef: RefObject<MasterDataGridConfig<TData>>;
+  schema?: JSONSchema | GenericObjectType;
+  customColumns?: ColumnConfig<TData>[];
+  enableRowSelection: boolean;
+  enableColumnVisibility: boolean;
+  editingRowsRef: RefObject<Record<string, Record<string, unknown>>>;
+  updateCellValue: (rowId: string, columnId: string, value: unknown) => void;
+  getRowId?: (row: TData, index: number) => string;
+  t?: MasterDataGridResources;
+  startEditingRow: (rowId: string, row: TData) => void;
+  cancelEditingRow: (rowId: string, row: TData) => void;
+  saveEditingRow: (rowId: string, row: TData) => Promise<void>;
+}
+
+export function useColumns<TData>({
+  config,
+  configRef,
+  schema,
+  customColumns,
+  enableRowSelection,
+  enableColumnVisibility,
+  editingRowsRef,
+  updateCellValue,
+  getRowId,
+  t,
+  startEditingRow,
+  cancelEditingRow,
+  saveEditingRow,
+}: UseColumnsProps<TData>): ColumnDef<TData>[] {
+  return useMemo<ColumnDef<TData>[]>(() => {
+    const editingContext = config.editing?.enabled
+      ? {
+          get editingRows() {
+            return editingRowsRef.current;
+          },
+          onCellUpdate: updateCellValue,
+          getRowId: getRowId || ((row: TData, index: number) => String(index)),
+        }
+      : undefined;
+
+    const generatedColumns = schema
+      ? generateColumnsFromSchema<TData>(
+          schema,
+          configRef.current.localization,
+          t,
+          editingContext,
+          configRef.current.cellClassName,
+          configRef.current.dateOptions,
+          configRef.current.customRenderers,
+          configRef.current.editing?.errorDisplayMode,
+          enableColumnVisibility,
+          config.expansion?.expanderColumns
+        )
+      : [];
+
+    const mergeContext = editingContext
+      ? {
+          get editingRows() {
+            return editingRowsRef.current;
+          },
+          getRowId: editingContext.getRowId,
+        }
+      : undefined;
+
+    const merged = mergeColumns<TData>(
+      generatedColumns,
+      customColumns,
+      mergeContext,
+      enableColumnVisibility,
+      t
+    );
+
+    const mergedWithExpansion = merged.map((col) => {
+      const shouldExpandOnClick =
+        (col.meta as ExpandableColumnMeta)?.isExpanderColumn ||
+        customColumns?.find((c) => c.id === col.id)?.isExpanderColumn;
+
+      if (!shouldExpandOnClick || !configRef.current.expansion?.enabled) {
+        return col;
+      }
+
+      const originalCell = col.cell;
+      return {
+        ...col,
+        cell: (props: CellProps<TData>) => {
+          const content =
+            typeof originalCell === "function"
+              ? originalCell(props)
+              : originalCell;
+
+          return (
+            <div
+              onClick={(e) => {
+                e.stopPropagation();
+                props.row.toggleExpanded();
+              }}
+              className="cursor-pointer hover:bg-muted/50"
+            >
+              {content}
+            </div>
+          );
+        },
+      };
+    });
+
+    const finalColumns: ColumnDef<TData>[] = [];
+
+    if (enableRowSelection) {
+      finalColumns.push({
+        id: "select",
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) =>
+              table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label={t?.["select_all"]}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label={t?.["select_row"]}
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+      });
+    }
+
+    finalColumns.push(...mergedWithExpansion);
+
+    if (config.rowActions && config.rowActions.length > 0) {
+      finalColumns.push({
+        id: "actions",
+        header: t?.["actions"],
+        cell: ({ row }) => {
+          const rowActions = config.rowActions?.filter((action) => {
+            if (typeof action.hidden === "function") {
+              return !action.hidden(row.original);
+            }
+            return !action.hidden;
+          });
+
+          if (!rowActions || rowActions.length === 0) return null;
+
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  className="w-full"
+                  aria-label={t?.["open_menu"]}
+                >
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {rowActions.map((action) => {
+                  const label =
+                    typeof action.label === "function"
+                      ? action.label(row.original)
+                      : action.label;
+                  const disabled =
+                    typeof action.disabled === "function"
+                      ? action.disabled(row.original)
+                      : action.disabled;
+
+                  return (
+                    <DropdownMenuItem
+                      key={action.id}
+                      onClick={(e) => action.onClick?.(row.original, e)}
+                      disabled={disabled}
+                      className={action.className}
+                    >
+                      {action.icon && <action.icon className="size-3.5" />}
+                      {label}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+        enableSorting: false,
+        enableHiding: false,
+      });
+    }
+
+    if (config.editing?.enabled && config.editing.mode === "row") {
+      finalColumns.push({
+        id: "edit-actions",
+        header: t?.["edit"] || "Edit",
+        cell: ({ row }) => {
+          const rowId = getRowId
+            ? getRowId(row.original, row.index)
+            : String(row.index);
+          const isEditing = !!editingRowsRef.current[rowId];
+          const isRowEditable =
+            !config.editing?.isRowEditable ||
+            config.editing.isRowEditable(row.original);
+
+          if (!isRowEditable) return null;
+
+          return isEditing ? (
+            <div className="flex gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => saveEditingRow(rowId, row.original)}
+                className="h-7 px-2"
+                aria-label={t?.["save"]}
+              >
+                <Save className="size-3.5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => cancelEditingRow(rowId, row.original)}
+                className="h-7 px-2"
+                aria-label={t?.["cancel"]}
+              >
+                <X className="size-3.5" />
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => startEditingRow(rowId, row.original)}
+              className="h-7 px-2"
+              aria-label={t?.["edit"]}
+            >
+              <Pencil className="size-3.5" />
+            </Button>
+          );
+        },
+        enableSorting: false,
+        enableHiding: false,
+      });
+    }
+
+    if (config.columnOrder && config.columnOrder.length > 0) {
+      const orderedColumns: ColumnDef<TData>[] = [];
+      const columnMap = new Map(finalColumns.map((col) => [col.id, col]));
+
+      for (const colId of config.columnOrder) {
+        const col = columnMap.get(String(colId));
+        if (col) {
+          orderedColumns.push(col);
+          columnMap.delete(String(colId));
+        }
+      }
+      orderedColumns.push(...Array.from(columnMap.values()));
+
+      return orderedColumns;
+    }
+
+    if (
+      !config.columnOrder &&
+      config.columnVisibility?.mode === "show" &&
+      config.columnVisibility.columns.length > 0
+    ) {
+      const orderedColumns: ColumnDef<TData>[] = [];
+      const columnMap = new Map(finalColumns.map((col) => [col.id, col]));
+
+      for (const colId of config.columnVisibility.columns) {
+        const col = columnMap.get(String(colId));
+        if (col) {
+          orderedColumns.push(col);
+          columnMap.delete(String(colId));
+        }
+      }
+
+      orderedColumns.push(...Array.from(columnMap.values()));
+
+      return orderedColumns;
+    }
+
+    return finalColumns;
+  }, [
+    schema,
+    customColumns,
+    enableRowSelection,
+    enableColumnVisibility,
+    config.expansion,
+    config.rowActions,
+    config.editing,
+    config.columnOrder,
+    config.columnVisibility,
+    config.cellClassName,
+    config.dateOptions,
+    config.customRenderers,
+    configRef,
+    editingRowsRef,
+    updateCellValue,
+    getRowId,
+    t,
+    startEditingRow,
+    cancelEditingRow,
+    saveEditingRow,
+  ]);
+}