@povio/ui 0.0.2 → 0.0.3

package/src/helpers/dynamicColumns.ts

@@ -0,0 +1,567 @@
+// oxlint-disable no-unsafe-assignment
+// oxlint-disable no-unsafe-argument
+// oxlint-disable no-unsafe-return
+// oxlint-disable no-unsafe-member-access
+// oxlint-disable no-explicit-any
+
+import type { CellContext, ColumnDef, ColumnMeta } from "@tanstack/react-table";
+import i18next from "i18next";
+import type { ReactNode } from "react";
+import type { FieldPath } from "react-hook-form";
+import { z } from "zod";
+
+import { DateUtils } from "#ui/utils/date.utils";
+import { StringUtils } from "#ui/utils/string.utils";
+import { ZodUtils } from "#ui/utils/zod.utils";
+
+type NestedTypeFromKey<T, K extends string> = K extends keyof T
+  ? T[K]
+  : K extends `${infer First}.${infer Rest}`
+    ? First extends keyof T
+      ? NestedTypeFromKey<T[First], Rest>
+      : never
+    : never;
+
+type SchemaType<TSchema extends z.ZodObject<any>> = z.infer<TSchema>;
+type SchemaKey<TSchema extends z.ZodObject<any>> = keyof SchemaType<TSchema>;
+type NestedSchemaKey<TSchema extends z.ZodObject<any>> = FieldPath<SchemaType<TSchema>>;
+type SchemaValue<TSchema extends z.ZodObject<any>> = SchemaType<TSchema>[SchemaKey<TSchema>];
+type ColumnEntry<TSchema extends z.ZodObject<any>> = [string, ColumnsConfig<TSchema>[NestedSchemaKey<TSchema>]];
+type CustomColumnEntry<TSchema extends z.ZodObject<any>> = [string, CustomColumnDef<TSchema>];
+type ColumnMetaType<TSchema extends z.ZodObject<any>> = ColumnMeta<SchemaType<TSchema>, SchemaValue<TSchema>>;
+
+type GetNestedValueType<TSchema extends z.ZodObject<any>, K extends string> = NestedTypeFromKey<SchemaType<TSchema>, K>;
+type NestedSchemaKeyOrString<TSchema extends z.ZodObject<any>> = NestedSchemaKey<TSchema> | (string & {});
+
+type DynamicColumnDef<TSchema extends z.ZodObject<any>, TValue = any> = Omit<
+  ColumnDef<SchemaType<TSchema>, TValue>,
+  "accessorKey" | "cell"
+> & {
+  cell?: ((props: CellContext<SchemaType<TSchema>, TValue>) => any) | NestedSchemaKey<TSchema>;
+};
+
+type ColumnsConfig<TSchema extends z.ZodObject<any>> = {
+  [K in NestedSchemaKey<TSchema>]?:
+    | DynamicColumnDef<TSchema, GetNestedValueType<TSchema, K>>
+    | ((props: CellContext<SchemaType<TSchema>, GetNestedValueType<TSchema, K>>) => any)
+    | NestedSchemaKey<TSchema>
+    | boolean;
+};
+
+type CustomColumnDef<TSchema extends z.ZodObject<any>> = Omit<
+  ColumnDef<SchemaType<TSchema>, any>,
+  "accessorKey" | "cell"
+> & {
+  accessorKey?: NestedSchemaKeyOrString<TSchema>;
+  cell?: ((props: CellContext<SchemaType<TSchema>, any>) => any) | NestedSchemaKey<TSchema>;
+};
+
+type CustomColumnsConfig<TSchema extends z.ZodObject<any>> = Record<
+  string,
+  CustomColumnDef<TSchema> | ((props: CellContext<SchemaType<TSchema>, undefined>) => any) | NestedSchemaKey<TSchema>
+>;
+
+export interface DynamicColumnsOptions<TSchema extends z.ZodObject<any>> {
+  columns?: ColumnsConfig<TSchema>;
+  customColumns?: CustomColumnsConfig<TSchema>;
+  order?: NestedSchemaKeyOrString<TSchema>[];
+  sortable?: NestedSchemaKeyOrString<TSchema>[] | z.ZodEnum<any>;
+  disableFormatting?: NestedSchemaKeyOrString<TSchema>[];
+  emptyValue?: ReactNode;
+  namespace?: string;
+  overridePresetLocales?: boolean;
+  globalMeta?: Omit<ColumnMetaType<TSchema>, "sortKey">;
+  globalWrapper?: (children: ReactNode) => ReactNode;
+  includeAll?: boolean;
+}
+
+const DEFAULT_NAMESPACE = "dynamicColumns";
+
+const FORMAT_MAP = {
+  datetime: (value: string) => DateUtils.formatDate(new Date(value)),
+  dateRange: (value: { start: string; end: string }) => {
+    const startDate = DateUtils.formatDate(new Date(value.start));
+    const endDate = DateUtils.formatDate(new Date(value.end));
+
+    return `${startDate} - ${endDate}`;
+  },
+  enum: (value: string) => StringUtils.capitalize(value),
+  number: (value: number) => value.toLocaleString(i18next.language),
+  string: (value: string) => String(value),
+  boolean: (value: boolean) => {
+    const key = `${DEFAULT_NAMESPACE}.${value ? "yes" : "no"}`;
+    if (i18next.exists(key)) {
+      return String(i18next.t(key as any));
+    }
+
+    return value ? "Yes" : "No";
+  },
+} as const;
+
+const ZOD_TYPE_FORMAT_MAP = [
+  [z.ZodEnum, FORMAT_MAP.enum],
+  [z.ZodNumber, FORMAT_MAP.number],
+  [z.ZodString, FORMAT_MAP.string],
+  [z.ZodBoolean, FORMAT_MAP.boolean],
+  [z.ZodISODateTime, FORMAT_MAP.datetime],
+] as const;
+
+const configValueToColumnDef = <TSchema extends z.ZodObject<any>>(
+  value: ColumnsConfig<TSchema>[NestedSchemaKey<TSchema>],
+): DynamicColumnDef<TSchema, any> => {
+  if (typeof value === "function" || typeof value === "string") {
+    return {
+      cell: value as (props: CellContext<SchemaType<TSchema>, any>) => any,
+    };
+  }
+
+  if (typeof value === "boolean" || value === undefined) {
+    return {};
+  }
+
+  return value;
+};
+
+const convertEntriesToColumnDefs = <TSchema extends z.ZodObject<any>>(
+  entries: ColumnEntry<TSchema>[],
+): [string, DynamicColumnDef<TSchema, any>][] => {
+  return entries.map(([key, value]) => [key, configValueToColumnDef(value)]);
+};
+
+const customConfigValueToColumnDef = <TSchema extends z.ZodObject<any>>(
+  value: CustomColumnsConfig<TSchema>[Exclude<string, NestedSchemaKey<TSchema>>],
+): CustomColumnDef<TSchema> => {
+  if (typeof value === "string") {
+    return {
+      accessorKey: value,
+      cell: value as NestedSchemaKey<TSchema> | ((props: CellContext<SchemaType<TSchema>, any>) => any),
+    };
+  }
+
+  if (typeof value === "function") {
+    return {
+      cell: value as (props: CellContext<SchemaType<TSchema>, any>) => any,
+    };
+  }
+
+  return value;
+};
+
+const convertCustomEntriesToColumnDefs = <TSchema extends z.ZodObject<any>>(
+  entries: CustomColumnEntry<TSchema>[],
+): [string, CustomColumnDef<TSchema>][] => {
+  return entries.map(([key, value]) => [key, customConfigValueToColumnDef(value)]);
+};
+
+const excludeEntries = <TSchema extends z.ZodObject<any>>(entries: ColumnEntry<TSchema>[]): ColumnEntry<TSchema>[] => {
+  return entries.filter(([, value]) => value !== false && value !== undefined);
+};
+
+export const sortColumns = <TSchema extends z.ZodObject<any>>(
+  columns: ColumnDef<SchemaType<TSchema>>[],
+  orderKeys?: DynamicColumnsOptions<TSchema>["order"],
+): ColumnDef<SchemaType<TSchema>>[] => {
+  if (!orderKeys) {
+    return columns;
+  }
+
+  const wildcardIndex = orderKeys.indexOf("*");
+  if (wildcardIndex === -1) {
+    return columns.sort((columnA, columnB) => {
+      const idA = columnA.id;
+      const idB = columnB.id;
+
+      const orderMap = new Map(orderKeys.map((key, index) => [String(key), index]));
+      const orderA = orderMap.get(String(idA));
+      const orderB = orderMap.get(String(idB));
+
+      if (orderA !== undefined && orderB !== undefined) {
+        return orderA - orderB;
+      }
+      if (orderA !== undefined && orderB === undefined) {
+        return -1;
+      }
+      if (orderA === undefined && orderB !== undefined) {
+        return 1;
+      }
+
+      return 0;
+    });
+  }
+
+  const beforeWildcard = orderKeys.slice(0, wildcardIndex);
+  const afterWildcard = orderKeys.slice(wildcardIndex + 1);
+
+  const beforeMap = new Map(beforeWildcard.map((key, index) => [String(key), index]));
+  const afterMap = new Map(afterWildcard.map((key, index) => [String(key), index]));
+
+  const before: ColumnDef<SchemaType<TSchema>>[] = [];
+  const middle: ColumnDef<SchemaType<TSchema>>[] = [];
+  const after: ColumnDef<SchemaType<TSchema>>[] = [];
+
+  columns.forEach((column) => {
+    const id = String(column.id);
+    if (beforeMap.has(id)) {
+      before.push(column);
+    } else if (afterMap.has(id)) {
+      after.push(column);
+    } else {
+      middle.push(column);
+    }
+  });
+
+  before.sort((a, b) => beforeMap.get(String(a.id))! - beforeMap.get(String(b.id))!);
+  after.sort((a, b) => afterMap.get(String(a.id))! - afterMap.get(String(b.id))!);
+
+  return [...before, ...middle, ...after];
+};
+
+const formatValueByType = (value: unknown, schemaType: z.core.$ZodType): string | null => {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  if (ZodUtils.isDateRange(schemaType)) {
+    return FORMAT_MAP.dateRange(value as never);
+  }
+
+  const unwrappedType = ZodUtils.unwrapZodType(schemaType);
+  if (unwrappedType instanceof z.ZodArray) {
+    if (!Array.isArray(value)) {
+      return null;
+    }
+
+    const elementType = unwrappedType.element;
+    const formattedElements = value.map((element) => formatValueByType(element, elementType));
+    return formattedElements.join(", ");
+  }
+
+  const formatFunction = ZOD_TYPE_FORMAT_MAP.find(([zodType]) => unwrappedType instanceof zodType)?.[1];
+  if (formatFunction) {
+    return formatFunction(value as never);
+  }
+
+  // oxlint-disable-next-line no-base-to-string
+  return String(value);
+};
+
+const getNestedValue = (obj: any, path: string): any => {
+  return path.split(".").reduce((current, key) => {
+    return current && typeof current === "object" ? current[key] : undefined;
+  }, obj);
+};
+
+const getKeyType = <TSchema extends z.ZodObject<any>>(schema: TSchema, key: string): z.ZodType => {
+  const pathParts = key.split(".");
+  let currentType = schema.shape[pathParts[0]];
+
+  for (let i = 1; i < pathParts.length; i++) {
+    if (currentType instanceof z.ZodObject) {
+      currentType = currentType.shape[pathParts[i]];
+    } else {
+      currentType = schema.shape[key];
+      break;
+    }
+  }
+  return currentType;
+};
+
+const getCellFunction = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  schemaKey: string,
+  columnDef: DynamicColumnDef<TSchema, any> | CustomColumnDef<TSchema>,
+  options: DynamicColumnsOptions<TSchema>,
+) => {
+  const { cell } = columnDef;
+  if (typeof cell === "function") {
+    return cell;
+  }
+
+  return ({ data }: CellContext<SchemaType<TSchema>, any>) => {
+    const isCellKeyString = typeof cell === "string";
+    const key = isCellKeyString ? cell : schemaKey;
+
+    const value = getNestedValue(data, key);
+    const keyType = getKeyType(schema, key);
+    const shouldFormat = !options.disableFormatting?.includes(key as NestedSchemaKey<TSchema>);
+    const formattedValue = shouldFormat ? formatValueByType(value, keyType) : value;
+
+    let finalValue = formattedValue;
+    if (options.emptyValue && !finalValue) {
+      finalValue = options.emptyValue;
+    }
+
+    if (options.globalWrapper) {
+      return options.globalWrapper(finalValue);
+    }
+
+    return finalValue;
+  };
+};
+
+const normalizeSortable = <TSchema extends z.ZodObject<any>>(
+  sortable?: DynamicColumnsOptions<TSchema>["sortable"],
+): SchemaKey<TSchema>[] | undefined => {
+  if (!sortable) {
+    return undefined;
+  }
+
+  if (Array.isArray(sortable)) {
+    return sortable;
+  }
+
+  if (sortable instanceof z.ZodEnum) {
+    return Object.values(sortable.enum);
+  }
+
+  return undefined;
+};
+
+const getDefaultColumnHeader = <TSchema extends z.ZodObject<any>>(
+  key: string,
+  options: DynamicColumnsOptions<TSchema>,
+): string => {
+  const namespace = options.namespace ?? DEFAULT_NAMESPACE;
+  const localeKey = `${namespace}.${key}`;
+
+  if (i18next.exists(localeKey)) {
+    return String(i18next.t(localeKey as any));
+  }
+
+  return StringUtils.capitalize(key);
+};
+
+const overridePresetColumnsHeaders = <TSchema extends z.ZodObject<any>>(
+  presetColumns: ColumnDef<SchemaType<TSchema>>[],
+  options: DynamicColumnsOptions<TSchema>,
+): ColumnDef<SchemaType<TSchema>>[] => {
+  const namespace = options.namespace ?? DEFAULT_NAMESPACE;
+
+  return presetColumns.map((columnDef) => {
+    const localeKey = `${namespace}.${columnDef.id}`;
+
+    const header = i18next.exists(localeKey) ? i18next.t(localeKey as any) : columnDef.header;
+    return {
+      ...columnDef,
+      header: typeof header === "string" ? header : columnDef.header,
+    } as ColumnDef<SchemaType<TSchema>>;
+  });
+};
+
+const populateColumnDef = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  key: string,
+  columnDef: DynamicColumnDef<TSchema, any>,
+  options: DynamicColumnsOptions<TSchema>,
+  sortableKeys?: SchemaKey<TSchema>[],
+): ColumnDef<SchemaType<TSchema>> => {
+  const id = columnDef.id ?? key;
+  const enableSorting = columnDef.enableSorting ?? sortableKeys?.includes(id as SchemaKey<TSchema>) ?? false;
+  const header = columnDef.header ?? getDefaultColumnHeader(key, options);
+  const cell = getCellFunction(schema, key, columnDef, options);
+
+  return {
+    ...columnDef,
+    id,
+    accessorKey: key,
+    meta: {
+      width: "flex-1",
+      ...options.globalMeta,
+      ...columnDef.meta,
+    },
+    header,
+    enableSorting,
+    cell,
+  };
+};
+
+const populateCustomColumnDef = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  key: string,
+  columnDef: CustomColumnDef<TSchema>,
+  options: DynamicColumnsOptions<TSchema>,
+  sortableKeys?: SchemaKey<TSchema>[],
+): ColumnDef<SchemaType<TSchema>> => {
+  const id = columnDef.id ?? key;
+  const accessorKey = columnDef.accessorKey ?? id;
+  const enableSorting = columnDef.enableSorting ?? sortableKeys?.includes(id as SchemaKey<TSchema>) ?? false;
+  const header = columnDef.header ?? getDefaultColumnHeader(key, options);
+  const cell = getCellFunction(schema, key, columnDef, options);
+
+  return {
+    ...columnDef,
+    id,
+    accessorKey,
+    meta: {
+      width: "flex-1",
+      ...options.globalMeta,
+      ...columnDef.meta,
+    },
+    header,
+    enableSorting,
+    cell,
+  };
+};
+
+const addMissingSchemaFields = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  existingColumns: ColumnDef<SchemaType<TSchema>>[],
+  options: DynamicColumnsOptions<TSchema>,
+  sortableKeys?: SchemaKey<TSchema>[],
+): ColumnDef<SchemaType<TSchema>>[] => {
+  const schemaFields = getAllSchemaKeys(schema);
+  const definedFields = new Set(existingColumns.map((col) => col.id));
+
+  const missingFields = schemaFields.filter((field) => !definedFields.has(field));
+  const additionalColumns = missingFields.map((field) => {
+    return populateColumnDef(schema, field, {}, options, sortableKeys);
+  });
+
+  return [...existingColumns, ...additionalColumns];
+};
+
+const removeOverriddenPresetColumns = <TSchema extends z.ZodObject<any>>(
+  presetColumns: ColumnDef<SchemaType<TSchema>>[],
+  options: DynamicColumnsOptions<TSchema>,
+): ColumnDef<SchemaType<TSchema>>[] => {
+  if (presetColumns.length === 0) {
+    return presetColumns;
+  }
+
+  const usedColumnsIds = Object.entries(options.columns ?? {}).map(([key, value]) => {
+    const columnDef = value as DynamicColumnDef<TSchema, any>;
+    return columnDef.id ?? key;
+  });
+
+  const usedCustomColumnsIds = Object.entries(options.customColumns ?? {}).map(([key, value]) => {
+    const columnDef = value as CustomColumnDef<TSchema>;
+    return columnDef.id ?? key;
+  });
+
+  const usedIds = [...usedColumnsIds, ...usedCustomColumnsIds];
+
+  return presetColumns.filter((column) => {
+    if (!column.id) {
+      return true;
+    }
+
+    return !usedIds.includes(column.id);
+  });
+};
+
+const getAllSchemaKeys = <TSchema extends z.ZodObject<any>>(schema: TSchema): string[] => {
+  const keys: string[] = [];
+  const { shape } = schema;
+
+  const traverse = (obj: Record<string, any>, prefix = "") => {
+    Object.entries(obj).forEach(([key, value]) => {
+      const currentPath = prefix ? `${prefix}.${key}` : key;
+      keys.push(currentPath);
+
+      if (value instanceof z.ZodObject) {
+        traverse(value.shape, currentPath);
+      }
+    });
+  };
+
+  traverse(shape);
+  return keys;
+};
+
+const validateCustomColumnKeys = <TSchema extends z.ZodObject<any>>(schema: TSchema, customColumnKeys: string[]) => {
+  const schemaKeys = getAllSchemaKeys(schema);
+
+  const invalidCustomColumnKeys = customColumnKeys.filter((key) =>
+    schemaKeys.includes(key),
+  ) as NestedSchemaKey<TSchema>[];
+
+  if (invalidCustomColumnKeys.length > 0) {
+    throw new Error(
+      `Invalid custom column keys: [${invalidCustomColumnKeys.join(", ")}]. Custom column keys cannot be part of the schema. Define these columns in the "columns" property instead.`,
+    );
+  }
+};
+
+const validateOptionKeyArray = (usedKeys: Set<string>, optionKeys: string[] | undefined, optionName: string) => {
+  if (!optionKeys) {
+    return;
+  }
+
+  const extraUnusedKeys = optionKeys.filter((key) => !usedKeys.has(key));
+  if (extraUnusedKeys.length > 0) {
+    throw new Error(
+      `Found unnecessary keys in "${optionName}": [${extraUnusedKeys.join(", ")}].\n\nAll available options are: [${Array.from(usedKeys).join(", ")}].`,
+    );
+  }
+};
+
+const validateParams = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  presetColumns: ColumnDef<SchemaType<TSchema>>[],
+  options: DynamicColumnsOptions<TSchema>,
+) => {
+  const { columns, customColumns, sortable, order, disableFormatting, includeAll } = options;
+
+  const columnKeys = Object.keys(columns ?? {});
+  const customColumnKeys = customColumns ? Object.keys(customColumns) : [];
+  const usedKeys = new Set([...columnKeys, ...customColumnKeys]);
+
+  const presetKeys = presetColumns.map((column) => column.id).filter((id) => id !== undefined);
+  const schemaKeys = includeAll ? getAllSchemaKeys(schema) : [];
+  const allKeys = new Set([...presetKeys, ...usedKeys, ...schemaKeys, "*"]);
+
+  if (customColumns) {
+    validateCustomColumnKeys(schema, customColumnKeys);
+  }
+
+  if (Array.isArray(sortable)) {
+    validateOptionKeyArray(usedKeys, sortable, "sortable");
+  }
+  validateOptionKeyArray(allKeys, order, "order");
+  validateOptionKeyArray(usedKeys, disableFormatting, "disableFormatting");
+};
+
+interface DynamicColumnsParams<TSchema extends z.ZodObject<any>> {
+  schema: TSchema;
+  preset?: ColumnDef<SchemaType<TSchema>>[];
+  options: DynamicColumnsOptions<TSchema>;
+}
+
+export const dynamicColumns = <TSchema extends z.ZodObject<any>>({
+  schema,
+  preset = [],
+  options,
+}: DynamicColumnsParams<TSchema>): ColumnDef<SchemaType<TSchema>>[] => {
+  validateParams(schema, preset, options);
+
+  const sortableKeys = normalizeSortable(options.sortable);
+
+  let entries = Object.entries(options.columns ?? {}) as ColumnEntry<TSchema>[];
+  entries = excludeEntries(entries);
+  entries = convertEntriesToColumnDefs(entries);
+
+  const columns: ColumnDef<SchemaType<TSchema>>[] = entries.map(([key, value]) => {
+    const columnDef = value as DynamicColumnDef<TSchema, any>;
+    return populateColumnDef(schema, key, columnDef, options, sortableKeys);
+  });
+
+  let customEntries = Object.entries(options.customColumns ?? {}) as CustomColumnEntry<TSchema>[];
+  customEntries = convertCustomEntriesToColumnDefs(customEntries);
+
+  const customColumns: ColumnDef<SchemaType<TSchema>>[] = customEntries.map(([key, value]) => {
+    const columnDef = value;
+    return populateCustomColumnDef(schema, key, columnDef, options, sortableKeys);
+  });
+
+  let presetColumns = removeOverriddenPresetColumns(preset, options);
+  if (options.overridePresetLocales) {
+    presetColumns = overridePresetColumnsHeaders(presetColumns, options);
+  }
+
+  const mergedColumns = [...presetColumns, ...columns, ...customColumns];
+  const allColumns = options.includeAll
+    ? addMissingSchemaFields(schema, mergedColumns, options, sortableKeys)
+    : mergedColumns;
+
+  return sortColumns(allColumns, options.order);
+};