@ayasofyazilim/ui 0.0.0

package/src/custom/master-data-grid/hooks/use-editing.ts

@@ -0,0 +1,106 @@
+import { useCallback, useRef } from "react";
+
+export interface UseEditingProps<TData> {
+  data: TData[];
+  getRowId?: (row: TData, index: number) => string;
+  onDataChange?: (data: TData[]) => void;
+  editingRows: Record<string, Record<string, unknown>>;
+  setEditingRows: (
+    updater: (
+      prev: Record<string, Record<string, unknown>>
+    ) => Record<string, Record<string, unknown>>
+  ) => void;
+  editing?: {
+    isRowEditable?: (row: TData) => boolean;
+    onRowSave?: (row: TData, changes: Partial<TData>) => void | Promise<void>;
+    onRowCancel?: (row: TData) => void;
+  };
+}
+
+export interface UseEditingReturn<TData> {
+  editingRowsRef: React.RefObject<Record<string, Record<string, unknown>>>;
+  startEditingRow: (rowId: string, row: TData) => void;
+  cancelEditingRow: (rowId: string, row: TData) => void;
+  saveEditingRow: (rowId: string, row: TData) => Promise<void>;
+  updateCellValue: (rowId: string, columnId: string, value: unknown) => void;
+}
+
+export function useEditing<TData>({
+  data,
+  getRowId,
+  onDataChange,
+  editingRows,
+  setEditingRows,
+  editing,
+}: UseEditingProps<TData>): UseEditingReturn<TData> {
+  const editingRowsRef = useRef<Record<string, Record<string, unknown>>>({});
+  editingRowsRef.current = editingRows;
+
+  const startEditingRow = useCallback(
+    (rowId: string, row: TData) => {
+      if (editing?.isRowEditable && !editing.isRowEditable(row)) {
+        return;
+      }
+      setEditingRows((prev) => ({ ...prev, [rowId]: {} }));
+    },
+    [editing, setEditingRows]
+  );
+
+  const cancelEditingRow = useCallback(
+    (rowId: string, row: TData) => {
+      setEditingRows((prev) => {
+        const { [rowId]: removed, ...rest } = prev;
+        return rest;
+      });
+      editing?.onRowCancel?.(row);
+    },
+    [editing, setEditingRows]
+  );
+
+  const saveEditingRow = useCallback(
+    async (rowId: string, row: TData) => {
+      const changes = editingRowsRef.current[rowId] || {};
+      const typedChanges = changes as Partial<TData>;
+
+      if (editing?.onRowSave) {
+        await editing.onRowSave(row, typedChanges);
+      }
+      if (onDataChange && Object.keys(changes).length > 0) {
+        const updatedData = data.map((item) => {
+          const itemId = getRowId
+            ? getRowId(item, data.indexOf(item))
+            : String(data.indexOf(item));
+          return itemId === rowId ? { ...item, ...typedChanges } : item;
+        });
+        onDataChange(updatedData);
+      }
+
+      setEditingRows((prev) => {
+        const { [rowId]: removed, ...rest } = prev;
+        return rest;
+      });
+    },
+    [data, onDataChange, getRowId, editing, setEditingRows]
+  );
+
+  const updateCellValue = useCallback(
+    (rowId: string, columnId: string, value: unknown) => {
+      setEditingRows((prev) => ({
+        ...prev,
+        [rowId]: {
+          ...prev[rowId],
+          [columnId]: value,
+        },
+      }));
+    },
+    [setEditingRows]
+  );
+
+  return {
+    editingRowsRef,
+    startEditingRow,
+    cancelEditingRow,
+    saveEditingRow,
+    updateCellValue,
+  };
+}

package/src/custom/master-data-grid/hooks/use-table-state-reducer.ts

@@ -0,0 +1,157 @@
+import type {
+  ColumnFiltersState,
+  ColumnPinningState,
+  RowSelectionState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { useReducer } from "react";
+import type { MasterDataGridConfig, TableState } from "../types";
+
+type TableStateAction =
+  | { type: "SET_SORTING"; payload: SortingState }
+  | { type: "SET_COLUMN_FILTERS"; payload: ColumnFiltersState }
+  | { type: "SET_COLUMN_VISIBILITY"; payload: VisibilityState }
+  | { type: "SET_ROW_SELECTION"; payload: RowSelectionState }
+  | { type: "SET_COLUMN_PINNING"; payload: ColumnPinningState }
+  | { type: "SET_GROUPING"; payload: string[] }
+  | { type: "SET_EXPANDED"; payload: Record<string, boolean> | true }
+  | {
+      type: "SET_PAGINATION";
+      payload: { pageIndex: number; pageSize: number };
+    }
+  | {
+      type: "UPDATE_EDITING_ROWS";
+      payload:
+        | Record<string, Record<string, unknown>>
+        | ((
+            prev: Record<string, Record<string, unknown>>
+          ) => Record<string, Record<string, unknown>>);
+    }
+  | { type: "RESET"; payload: TableState };
+
+function tableStateReducer(
+  state: TableState,
+  action: TableStateAction
+): TableState {
+  switch (action.type) {
+    case "SET_SORTING":
+      return { ...state, sorting: action.payload };
+    case "SET_COLUMN_FILTERS":
+      return { ...state, columnFilters: action.payload };
+    case "SET_COLUMN_VISIBILITY":
+      return { ...state, columnVisibility: action.payload };
+    case "SET_ROW_SELECTION":
+      return { ...state, rowSelection: action.payload };
+    case "SET_COLUMN_PINNING":
+      return { ...state, columnPinning: action.payload };
+    case "SET_GROUPING":
+      return { ...state, grouping: action.payload };
+    case "SET_EXPANDED":
+      return { ...state, expanded: action.payload };
+    case "SET_PAGINATION":
+      return { ...state, pagination: action.payload };
+    case "UPDATE_EDITING_ROWS":
+      return {
+        ...state,
+        editingRows:
+          typeof action.payload === "function"
+            ? action.payload(state.editingRows || {})
+            : action.payload,
+      };
+    case "RESET":
+      return action.payload;
+    default:
+      return state;
+  }
+}
+
+function initializeColumnVisibility<TData>(
+  config: MasterDataGridConfig<TData>
+): VisibilityState {
+  if (!config.columnVisibility) {
+    return {};
+  }
+
+  if (config.columnVisibility.mode === "hide") {
+    return Object.fromEntries(
+      config.columnVisibility.columns.map((id) => [String(id), false])
+    );
+  }
+
+  if (config.columnVisibility.mode === "show") {
+    const allColumnIds: string[] = [
+      ...(config.columns?.map((c) => c.id) || []),
+      ...(config.schema ? Object.keys(config.schema.properties || {}) : []),
+    ];
+    return Object.fromEntries(
+      allColumnIds.map((id) => [
+        String(id),
+        config.columnVisibility!.columns.map(String).includes(String(id)),
+      ])
+    );
+  }
+
+  return {};
+}
+
+function createInitialState<TData>(
+  config: MasterDataGridConfig<TData>,
+  pageSize: number
+): TableState {
+  return {
+    sorting: [],
+    columnFilters: [],
+    columnVisibility: initializeColumnVisibility(config),
+    rowSelection: {},
+    columnPinning: config.pinning || {},
+    grouping: config.grouping?.groupBy || [],
+    expanded: config.grouping?.expanded || {},
+    pagination: {
+      pageIndex: 0,
+      pageSize,
+    },
+    editingRows: {},
+  };
+}
+
+export function useTableStateReducer<TData>(
+  config: MasterDataGridConfig<TData>,
+  pageSize: number
+) {
+  const [tableState, dispatch] = useReducer(tableStateReducer, undefined, () =>
+    createInitialState(config, pageSize)
+  );
+
+  return {
+    tableState,
+    setSorting: (payload: SortingState) =>
+      dispatch({ type: "SET_SORTING", payload }),
+    setColumnFilters: (payload: ColumnFiltersState) =>
+      dispatch({ type: "SET_COLUMN_FILTERS", payload }),
+    setColumnVisibility: (payload: VisibilityState) =>
+      dispatch({ type: "SET_COLUMN_VISIBILITY", payload }),
+    setRowSelection: (payload: RowSelectionState) =>
+      dispatch({ type: "SET_ROW_SELECTION", payload }),
+    setColumnPinning: (payload: ColumnPinningState) =>
+      dispatch({ type: "SET_COLUMN_PINNING", payload }),
+    setGrouping: (payload: string[]) =>
+      dispatch({ type: "SET_GROUPING", payload }),
+    setExpanded: (payload: Record<string, boolean> | true) =>
+      dispatch({ type: "SET_EXPANDED", payload }),
+    setPagination: (payload: { pageIndex: number; pageSize: number }) =>
+      dispatch({ type: "SET_PAGINATION", payload }),
+    updateEditingRows: (
+      payload:
+        | Record<string, Record<string, unknown>>
+        | ((
+            prev: Record<string, Record<string, unknown>>
+          ) => Record<string, Record<string, unknown>>)
+    ) => dispatch({ type: "UPDATE_EDITING_ROWS", payload }),
+    resetToDefaults: () =>
+      dispatch({
+        type: "RESET",
+        payload: createInitialState(config, pageSize),
+      }),
+  };
+}

package/src/custom/master-data-grid/hooks/use-table-state.ts

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import type { TableState } from "../types";
+
+interface UseTableStateOptions {
+  pageSize?: number;
+  groupBy?: string[];
+  expanded?: Record<string, boolean>;
+}
+
+export function useTableState(options: UseTableStateOptions = {}) {
+  const { pageSize = 10, groupBy = [], expanded = {} } = options;
+
+  const [tableState, setTableState] = useState<TableState>(() => {
+    return {
+      sorting: [],
+      columnFilters: [],
+      columnVisibility: {},
+      rowSelection: {},
+      columnPinning: { left: [], right: [] },
+      grouping: groupBy,
+      expanded,
+      pagination: {
+        pageIndex: 0,
+        pageSize,
+      },
+      editingRows: {},
+    };
+  });
+
+  return [tableState, setTableState] as const;
+}

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

@@ -0,0 +1,16 @@
+export { MasterDataGrid } from "./components/master-data-grid";
+export type {
+  MasterDataGridProps,
+  MasterDataGridConfig,
+  JSONSchema,
+  JSONSchemaProperty,
+  ColumnConfig,
+  RowAction,
+  TableAction,
+  FilterOperator,
+  SelectionConfig,
+  VirtualizationConfig,
+  GroupingConfig,
+  PinningConfig,
+  ExportConfig,
+} from "./types";