@ayasofyazilim/ui 0.0.0

package/src/custom/master-data-grid/utils/column-generator.tsx

@@ -0,0 +1,306 @@
+import type { Column, ColumnDef, Row, Header } from "@tanstack/react-table";
+import { HeaderCell, CellRenderer } from "../components/table";
+import type {
+  ColumnConfig,
+  CustomRenderers,
+  GeneratedColumn,
+  JSONSchema,
+  JSONSchemaProperty,
+  Localization,
+  MasterDataGridResources,
+} from "../types";
+import { getFilterOperators, masterFilter } from "./filter-fns";
+import { getColumnName } from "./translation-utils";
+import { GenericObjectType } from "@rjsf/utils";
+
+export function generateColumnsFromSchema<TData = unknown>(
+  schema: JSONSchema | GenericObjectType,
+  localization: Localization,
+  t?: MasterDataGridResources,
+  editingContext?: {
+    editingRows: Record<string, Record<string, unknown>>;
+    onCellUpdate: (rowId: string, columnId: string, value: unknown) => void;
+    getRowId: (row: TData, index: number) => string;
+  },
+  cellClassName?: string | ((cell: { row: TData; columnId: string }) => string),
+  dateOptions?: Intl.DateTimeFormatOptions,
+  customRenderers?: CustomRenderers<TData>,
+  errorDisplayMode?: "tooltip" | "inline" | "both",
+  enableColumnVisibility?: boolean,
+  expanderColumns?: Array<keyof TData> | Array<string>
+): GeneratedColumn<TData>[] {
+  if (!schema.properties) return [];
+
+  const columns: GeneratedColumn<TData>[] = [];
+
+  Object.entries(schema.properties).forEach(([key, property]) => {
+    const column = createColumnFromProperty<TData>(
+      key,
+      property as JSONSchemaProperty,
+      localization,
+      t,
+      editingContext,
+      cellClassName,
+      dateOptions,
+      customRenderers,
+      errorDisplayMode,
+      enableColumnVisibility,
+      expanderColumns
+    );
+    if (column) {
+      columns.push(column);
+    }
+  });
+
+  return columns;
+}
+
+function createColumnFromProperty<TData = unknown>(
+  key: string,
+  property: JSONSchemaProperty,
+  localization: Localization,
+  t?: MasterDataGridResources,
+  editingContext?: {
+    editingRows: Record<string, Record<string, unknown>>;
+    onCellUpdate: (rowId: string, columnId: string, value: unknown) => void;
+    getRowId: (row: TData, index: number) => string;
+  },
+  cellClassName?: string | ((cell: { row: TData; columnId: string }) => string),
+  dateOptions?: Intl.DateTimeFormatOptions,
+  customRenderers?: CustomRenderers<TData>,
+  errorDisplayMode?: "tooltip" | "inline" | "both",
+  enableColumnVisibility?: boolean,
+  expanderColumns?: Array<keyof TData> | Array<string>
+): GeneratedColumn<TData> | null {
+  if (property.type === "object" || property.type === "array") {
+    return null;
+  }
+
+  const filterOperators = getFilterOperators(property.type, property.format);
+
+  return {
+    id: key,
+    accessorKey: key,
+    header: ({
+      column,
+      header,
+    }: {
+      column: Column<TData>;
+      header: Header<TData, unknown>;
+    }) => (
+      <HeaderCell<TData>
+        column={column}
+        header={header}
+        label={getColumnName(key, t, property.title)}
+        t={t}
+      />
+    ),
+    cell: ({
+      getValue,
+      row,
+      column,
+    }: {
+      getValue: () => unknown;
+      row: Row<TData>;
+      column: Column<TData>;
+    }) => {
+      const rowId =
+        editingContext?.getRowId(row.original, row.index) || String(row.index);
+      const isEditing = editingContext?.editingRows[rowId] !== undefined;
+      const editedValue = editingContext?.editingRows[rowId]?.[key];
+      const displayValue =
+        isEditing && editedValue !== undefined ? editedValue : getValue();
+
+      const className =
+        typeof cellClassName === "function"
+          ? cellClassName({ row: row.original, columnId: key })
+          : cellClassName;
+
+      return (
+        <CellRenderer
+          value={displayValue}
+          row={row}
+          column={column}
+          columnId={key}
+          schemaProperty={property}
+          t={t}
+          isEditing={isEditing}
+          onUpdate={
+            isEditing
+              ? (value: unknown) =>
+                  editingContext?.onCellUpdate(rowId, key, value)
+              : undefined
+          }
+          className={className}
+          dateOptions={dateOptions}
+          localization={localization}
+          fieldName={key as keyof TData & string}
+          customRenderers={customRenderers}
+          errorDisplayMode={errorDisplayMode}
+        />
+      );
+    },
+    enableSorting: !property.readOnly,
+    enableFiltering: !property.readOnly,
+    enableHiding: enableColumnVisibility ?? true,
+    filterFn: masterFilter,
+    meta: {
+      schemaProperty: property,
+      filterOperators,
+      isExpanderColumn:
+        expanderColumns?.includes(key as keyof TData & string) ?? false,
+    },
+  } as GeneratedColumn<TData>;
+}
+
+export function mergeColumns<TData = unknown>(
+  schemaColumns: GeneratedColumn<TData>[],
+  customColumns?: ColumnConfig<TData>[],
+  editingContext?: {
+    readonly editingRows: Record<string, Record<string, unknown>>;
+    getRowId: (row: TData, index: number) => string;
+  },
+  enableColumnVisibility?: boolean,
+  t?: MasterDataGridResources
+): ColumnDef<TData>[] {
+  if (!customColumns || customColumns.length === 0) {
+    return schemaColumns;
+  }
+
+  const merged: ColumnDef<TData>[] = [];
+  const customColumnMap = new Map(customColumns.map((c) => [c.id, c]));
+
+  schemaColumns.forEach((schemaCol) => {
+    if (!schemaCol.id) return;
+
+    const custom = customColumnMap.get(schemaCol.id);
+
+    if (custom) {
+      const customCell = custom.cell;
+      const schemaCell = schemaCol.cell;
+
+      let finalCell = customCell || schemaCell;
+
+      if (
+        customCell &&
+        schemaCell &&
+        typeof schemaCell === "function" &&
+        editingContext
+      ) {
+        finalCell = (props) => {
+          const rowId =
+            editingContext.getRowId(props.row.original, props.row.index) ||
+            String(props.row.index);
+          const isEditing = editingContext.editingRows[rowId] !== undefined;
+
+          if (isEditing) {
+            return typeof schemaCell === "function"
+              ? schemaCell(props)
+              : schemaCell;
+          }
+
+          return typeof customCell === "function"
+            ? customCell(props)
+            : customCell;
+        };
+      }
+
+      let finalHeader = custom.header || schemaCol.header;
+
+      if (
+        custom.header &&
+        custom.extendHeader !== false &&
+        typeof custom.header === "string"
+      ) {
+        finalHeader = ({
+          column,
+          header,
+        }: {
+          column: Column<TData>;
+          header: Header<TData, unknown>;
+        }) => (
+          <HeaderCell<TData>
+            column={column}
+            header={header}
+            label={custom.header as string}
+            t={t}
+          />
+        );
+      } else if (custom.header && custom.extendHeader === false) {
+        finalHeader = custom.header;
+      }
+
+      merged.push({
+        ...schemaCol,
+        ...custom,
+        header: finalHeader,
+        cell: finalCell,
+        enableHiding: custom.enableHiding ?? enableColumnVisibility ?? true,
+        meta: {
+          ...schemaCol.meta,
+          ...custom.meta,
+        },
+      } as ColumnDef<TData>);
+      if (schemaCol.id) customColumnMap.delete(schemaCol.id);
+    } else {
+      merged.push(schemaCol);
+    }
+  });
+
+  customColumnMap.forEach((custom) => {
+    let header:
+      | string
+      | ((info: {
+          column: Column<TData>;
+          header: Header<TData, unknown>;
+        }) => React.ReactNode);
+
+    if (custom.extendHeader !== false) {
+      header = ({
+        column,
+        header: headerObj,
+      }: {
+        column: Column<TData>;
+        header: Header<TData, unknown>;
+      }) => {
+        const label =
+          typeof custom.header === "string" ? custom.header : custom.id;
+
+        return (
+          <HeaderCell<TData>
+            column={column}
+            header={headerObj}
+            label={label}
+            t={t}
+          />
+        );
+      };
+    } else if (typeof custom.header === "function") {
+      header = custom.header;
+    } else {
+      header = custom.header || custom.id;
+    }
+
+    merged.push({
+      id: custom.id,
+      accessorKey: custom.accessorKey,
+      accessorFn: custom.accessorFn,
+      header,
+      cell: custom.cell,
+      enableSorting: custom.enableSorting ?? true,
+      enableFiltering: custom.enableFiltering ?? true,
+      enableGrouping: custom.enableGrouping ?? false,
+      enablePinning: custom.enablePinning ?? true,
+      enableResizing: custom.enableResizing ?? true,
+      enableHiding: custom.enableHiding ?? enableColumnVisibility ?? true,
+      size: custom.width,
+      minSize: custom.minWidth,
+      maxSize: custom.maxWidth,
+      footer: custom.footer,
+      filterFn: masterFilter,
+      meta: custom.meta,
+    } as ColumnDef<TData>);
+  });
+
+  return merged;
+}

package/src/custom/master-data-grid/utils/export-utils.ts

@@ -0,0 +1,67 @@
+import type { Table } from "@tanstack/react-table";
+import type { ExportColumnDef } from "../types";
+
+export interface ExportOptions {
+  filename?: string;
+}
+
+export function exportToCSV<TData>(
+  table: Table<TData>,
+  options: ExportOptions = {}
+): void {
+  const { filename = "export" } = options;
+
+  const rows = table.getFilteredRowModel().rows;
+
+  const excludedColumns = ["expander", "select", "actions", "edit-actions"];
+  const columns = table
+    .getVisibleLeafColumns()
+    .filter((col) => !excludedColumns.includes(col.id));
+
+  const headers = columns.map((col) => {
+    const header = col.columnDef.header;
+    return typeof header === "string" ? header : col.id;
+  });
+
+  const csv = [
+    headers.join(","),
+    ...rows.map((row) =>
+      columns
+        .map((col) => {
+          const columnDef = col.columnDef as ExportColumnDef<TData>;
+          let value: unknown;
+
+          if (columnDef.accessorKey) {
+            const keys = String(columnDef.accessorKey).split(".");
+            value = keys.reduce(
+              (obj: unknown, key) =>
+                obj && typeof obj === "object" && key in obj
+                  ? (obj as Record<string, unknown>)[key]
+                  : undefined,
+              row.original
+            );
+          } else if (columnDef.accessorFn) {
+            value = columnDef.accessorFn(row.original, row.index);
+          } else {
+            value = row.getValue(col.id);
+          }
+          const strValue = String(value ?? "");
+          return strValue.includes(",") || strValue.includes('"')
+            ? `"${strValue.replace(/"/g, '""')}"`
+            : strValue;
+        })
+        .join(",")
+    ),
+  ].join("\n");
+
+  const csvWithBOM = "\uFEFF" + csv;
+  const blob = new Blob([csvWithBOM], {
+    type: "text/csv;charset=utf-8;",
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${filename}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}

package/src/custom/master-data-grid/utils/filter-fns.ts

@@ -0,0 +1,290 @@
+import type { FilterFn } from "@tanstack/react-table";
+import type { FilterOperator } from "../types";
+
+function getRowValue(row: unknown, columnId: string): unknown {
+  if (!row || typeof row !== "object") return undefined;
+
+  const keys = columnId.split(".");
+  let value: unknown = row;
+
+  for (const key of keys) {
+    if (value && typeof value === "object" && key in value) {
+      value = (value as Record<string, unknown>)[key];
+    } else {
+      return undefined;
+    }
+  }
+
+  return value;
+}
+
+function toString(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean")
+    return String(value);
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function toNumber(value: unknown): number {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return parseFloat(value);
+  if (value instanceof Date) return value.getTime();
+  return NaN;
+}
+
+function toDate(value: unknown): Date | null {
+  if (value instanceof Date) return value;
+  if (typeof value === "string" || typeof value === "number") {
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+
+export const masterFilter: FilterFn<unknown> = (row, columnId, filterValue) => {
+  if (!filterValue || typeof filterValue !== "object") return true;
+
+  const { operator, value, value2 } = filterValue as {
+    operator: FilterOperator;
+    value: unknown;
+    value2?: unknown;
+  };
+
+  const cellValue = getRowValue(row.original, columnId);
+
+  switch (operator) {
+    case "equals":
+      return (
+        toString(cellValue).toLowerCase() === toString(value).toLowerCase()
+      );
+
+    case "notEquals":
+      return (
+        toString(cellValue).toLowerCase() !== toString(value).toLowerCase()
+      );
+
+    case "contains":
+      return toString(cellValue)
+        .toLowerCase()
+        .includes(toString(value).toLowerCase());
+
+    case "notContains":
+      return !toString(cellValue)
+        .toLowerCase()
+        .includes(toString(value).toLowerCase());
+
+    case "startsWith":
+      return toString(cellValue)
+        .toLowerCase()
+        .startsWith(toString(value).toLowerCase());
+
+    case "endsWith":
+      return toString(cellValue)
+        .toLowerCase()
+        .endsWith(toString(value).toLowerCase());
+
+    case "isEmpty":
+      return !cellValue || toString(cellValue).trim() === "";
+
+    case "isNotEmpty":
+      return Boolean(cellValue) && toString(cellValue).trim() !== "";
+
+    case "greaterThan": {
+      const numValue = toNumber(cellValue);
+      const numFilter = toNumber(value);
+      return !isNaN(numValue) && !isNaN(numFilter) && numValue > numFilter;
+    }
+
+    case "greaterThanOrEqual": {
+      const numValue = toNumber(cellValue);
+      const numFilter = toNumber(value);
+      return !isNaN(numValue) && !isNaN(numFilter) && numValue >= numFilter;
+    }
+
+    case "lessThan": {
+      const numValue = toNumber(cellValue);
+      const numFilter = toNumber(value);
+      return !isNaN(numValue) && !isNaN(numFilter) && numValue < numFilter;
+    }
+
+    case "lessThanOrEqual": {
+      const numValue = toNumber(cellValue);
+      const numFilter = toNumber(value);
+      return !isNaN(numValue) && !isNaN(numFilter) && numValue <= numFilter;
+    }
+
+    case "between": {
+      const numValue = toNumber(cellValue);
+      const numMin = toNumber(value);
+      const numMax = toNumber(value2);
+      return (
+        !isNaN(numValue) &&
+        !isNaN(numMin) &&
+        !isNaN(numMax) &&
+        numValue >= numMin &&
+        numValue <= numMax
+      );
+    }
+
+    case "inRange": {
+      const numValue = toNumber(cellValue);
+      const numMin = toNumber(value);
+      const numMax = toNumber(value2);
+      return (
+        !isNaN(numValue) &&
+        !isNaN(numMin) &&
+        !isNaN(numMax) &&
+        numValue >= numMin &&
+        numValue <= numMax
+      );
+    }
+
+    case "before": {
+      const dateValue = toDate(cellValue);
+      const dateFilter = toDate(value);
+      return (
+        dateValue !== null && dateFilter !== null && dateValue < dateFilter
+      );
+    }
+
+    case "after": {
+      const dateValue = toDate(cellValue);
+      const dateFilter = toDate(value);
+      return (
+        dateValue !== null && dateFilter !== null && dateValue > dateFilter
+      );
+    }
+
+    case "inList": {
+      if (!Array.isArray(value)) return false;
+      const strValue = toString(cellValue).toLowerCase();
+      return value.some((v) => toString(v).toLowerCase() === strValue);
+    }
+
+    case "notInList": {
+      if (!Array.isArray(value)) return true;
+      const strValue = toString(cellValue).toLowerCase();
+      return !value.some((v) => toString(v).toLowerCase() === strValue);
+    }
+
+    default:
+      return true;
+  }
+};
+
+export function getFilterOperators(
+  type?: string,
+  format?: string
+): FilterOperator[] {
+  if (format === "date" || format === "date-time" || format === "time") {
+    return [
+      "equals",
+      "notEquals",
+      "before",
+      "after",
+      "between",
+      "isEmpty",
+      "isNotEmpty",
+    ];
+  }
+
+  if (type === "number" || type === "integer") {
+    return [
+      "equals",
+      "notEquals",
+      "greaterThan",
+      "greaterThanOrEqual",
+      "lessThan",
+      "lessThanOrEqual",
+      "between",
+      "inRange",
+      "isEmpty",
+      "isNotEmpty",
+    ];
+  }
+
+  if (type === "boolean") {
+    return ["equals", "notEquals", "isEmpty", "isNotEmpty"];
+  }
+
+  if (format === "enum") {
+    return [
+      "equals",
+      "notEquals",
+      "inList",
+      "notInList",
+      "isEmpty",
+      "isNotEmpty",
+    ];
+  }
+
+  return [
+    "equals",
+    "notEquals",
+    "contains",
+    "notContains",
+    "startsWith",
+    "endsWith",
+    "isEmpty",
+    "isNotEmpty",
+  ];
+}
+
+export function validateFilterValue(
+  operator: FilterOperator,
+  value: unknown,
+  value2?: unknown
+): boolean {
+  if (operator === "isEmpty" || operator === "isNotEmpty") {
+    return true;
+  }
+
+  if (operator === "between" || operator === "inRange") {
+    return (
+      value !== undefined &&
+      value !== null &&
+      value !== "" &&
+      value2 !== undefined &&
+      value2 !== null &&
+      value2 !== ""
+    );
+  }
+
+  if (operator === "inList" || operator === "notInList") {
+    return Array.isArray(value) && value.length > 0;
+  }
+
+  return value !== undefined && value !== null && value !== "";
+}
+
+export function formatFilterValue(
+  value: unknown,
+  operator: FilterOperator,
+  schemaType?: string,
+  schemaFormat?: string
+): string {
+  if (value === null || value === undefined) return "";
+
+  if (Array.isArray(value)) {
+    return value.map((v) => toString(v)).join(", ");
+  }
+
+  if (schemaFormat === "date" || schemaFormat === "date-time") {
+    const date = toDate(value);
+    if (date) {
+      return schemaFormat === "date"
+        ? date.toLocaleDateString()
+        : date.toLocaleString();
+    }
+  }
+
+  if (schemaType === "number" || schemaType === "integer") {
+    const num = toNumber(value);
+    return isNaN(num) ? toString(value) : num.toString();
+  }
+
+  return toString(value);
+}

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

@@ -0,0 +1,8 @@
+export {
+  getPinningHeaderStyles,
+  getPinningHeaderClassNames,
+  getPinningCellStyles,
+  getPinningCellClassNames,
+} from "./pinning-utils";
+
+export { getTranslations, getColumnName } from "./translation-utils";