@ayasofyazilim/ui 0.0.0

package/src/custom/tanstack-table/types/index.ts

@@ -0,0 +1,328 @@
+import { SchemaFormProps } from "@repo/ayasofyazilim-ui/custom/schema-form";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  OnChangeFn,
+  PaginationState,
+  Row,
+  TableMeta,
+} from "@tanstack/react-table";
+import { ComponentType, JSX } from "react";
+
+export type NonEditableTanstackTableProps<TData> = {
+  rowCount: number;
+  data: TData[];
+  columnFilters: ColumnFiltersState;
+  pagination: PaginationState;
+  onPaginationChange?: OnChangeFn<PaginationState>;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+};
+export type EditableTanstackTableProps<TData> = {
+  data: TData[];
+  meta?: TableMeta<TData>;
+};
+export type TanstackBaseProps<TData, TValue> = {
+  title?: string;
+  resizeable?: boolean;
+  columns: ColumnDef<TData, TValue>[];
+  columnOrder?: (keyof TData)[];
+  data: TData[];
+  columnVisibility?:
+    | {
+        columns: ("select" | keyof TData)[];
+        type: "show" | "hide";
+      }
+    | undefined;
+  pinColumns?: (keyof TData)[];
+  rowActions?: TanstackTableRowActionsType<TData>[];
+  rowCount?: number;
+  selectedRowAction?: TanstackTableSelectedRowActionType<TData>;
+  tableActions?: TanstackTableTableActionsType<TData>[] | undefined;
+  excludeColumns?: (keyof TData)[];
+  showPagination?: boolean;
+  expandedRowComponent?: (
+    row: TData,
+    toggleExpanded: () => void
+  ) => JSX.Element;
+  fillerColumn?: keyof TData;
+  editable: boolean;
+  onPaginationChange?: OnChangeFn<PaginationState>;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+  columnFilters?: ColumnFiltersState;
+  pagination?: PaginationState;
+  filters?: TanstackTableFiltersType;
+  meta?: TableMeta<TData>;
+};
+export type TanstackTablePropsType<TData, TValue> = {
+  title?: string;
+  resizeable?: boolean;
+
+  data: TData[];
+  columns: ColumnDef<TData, TValue>[];
+  fillerColumn?: keyof TData;
+  pinColumns?: (keyof TData)[] | undefined;
+  columnOrder?: (keyof TData)[] | undefined;
+  columnVisibility?:
+    | {
+        columns: (keyof TData | "select")[];
+        type: "show" | "hide";
+      }
+    | undefined;
+  excludeColumns?: (keyof TData)[];
+  rowActions?: TanstackTableRowActionsType<TData>[] | undefined;
+  selectedRowAction?: TanstackTableSelectedRowActionType<TData> | undefined;
+  tableActions?: TanstackTableTableActionsType<TData>[] | undefined;
+  filters?: TanstackTableFiltersType | undefined;
+  showPagination?: boolean;
+  expandedRowComponent?:
+    | ((row: TData, toggleExpanded: () => void) => JSX.Element)
+    | undefined;
+} & (
+  | {
+      rowCount?: number;
+      editable?: undefined;
+      onTableDataChange?: undefined;
+    }
+  | {
+      editable: true;
+      rowCount?: undefined;
+      onTableDataChange?: (data: TData[]) => void;
+    }
+);
+
+export type TanstackTableConfig = {
+  dateOptions?: Intl.DateTimeFormatOptions;
+  locale?: Intl.LocalesArgument;
+};
+export type TanstackTableCellCondition = {
+  conditionAccessorKey: string;
+  when: (value: string | boolean | number | Date) => boolean;
+};
+export type TanstackTableColumnClassNames = {
+  className?: string;
+  conditions?: TanstackTableCellCondition[];
+};
+export type TanstackTableFacetedFilterType = {
+  className?: string;
+  icon?: ComponentType<{ className?: string }>;
+  iconClassName?: string;
+  label: string;
+  when?: (value: string | boolean | number | Date) => boolean;
+  value: string;
+  hideColumnValue?: boolean;
+};
+export type TanstackTableDateFilterType = {
+  endAccessorKey?: string;
+  label: string;
+  startAccessorKey: string;
+  canFilteredBySingleDate?: boolean;
+};
+
+export type TanstackTableFiltersType = {
+  dateFilters?: TanstackTableDateFilterType[];
+  facetedFilters?: Record<
+    string,
+    {
+      options: TanstackTableFacetedFilterType[];
+      title: string;
+    }
+  >;
+  textFilters?: string[];
+  filterTitles?: Record<string, string>;
+};
+
+export type TanstackTableColumnLink = {
+  conditions?: TanstackTableCellCondition[];
+  prefix: string;
+  suffix?: string;
+  targetAccessorKey?: string;
+};
+export type TanstackTableColumnBadge = {
+  className?: string;
+  hideColumnValue?: boolean;
+  values: {
+    position?: "before" | "after";
+    badgeClassName?: string;
+    conditions?: TanstackTableCellCondition[];
+    label: string;
+  }[];
+};
+export type TanstackTableColumnIcon = {
+  icon?: ComponentType<{ className?: string }>;
+  iconClassName?: string;
+  position?: "before" | "after";
+};
+export type TanstackTableColumCell<TData> = {
+  conditions?: TanstackTableCellCondition[];
+  content: (row: TData, rowModel: Row<TData>) => JSX.Element | string | null;
+  showHeader?: boolean;
+};
+export type TanstackTableRowActionsDeleteRow = {
+  type: "delete-row";
+};
+export type TanstackTableRowActionsDuplicateRow = {
+  type: "duplicate-row";
+};
+export type TanstackTableRowActionsMoveRowUp = {
+  type: "move-row-up";
+};
+export type TanstackTableRowActionsMoveRowDown = {
+  type: "move-row-down";
+};
+export type TanstackTableRowActionsSimple<TData> = {
+  onClick: (row: TData) => void;
+  type: "simple";
+};
+
+export type TanstackTableRowDialog<TData> = {
+  cancelText?: string;
+  confirmationText?: string;
+  onCancel?: (row: TData) => void;
+  onConfirm?: (row: TData) => void;
+  title: string | ((row: TData) => string | JSX.Element);
+};
+export type TanstackTableRowActionsCustomDialog<TData> =
+  TanstackTableRowDialog<TData> & {
+    cancelText?: string;
+    confirmationText?: string;
+    content:
+      | JSX.Element
+      | ((row: TData, closeDialog?: () => void) => JSX.Element);
+    type: "custom-dialog";
+  };
+export type TanstackTableRowActionsConfirmationDialog<TData> =
+  TanstackTableRowDialog<TData> & {
+    cancelText: string;
+    confirmationText: string;
+    description: string;
+    onCancel?: (row: TData) => void;
+    onConfirm: (row: TData) => void;
+    type: "confirmation-dialog";
+  };
+
+export type TanstackTableRowActionsType<TData> = {
+  actionLocation: "row";
+  cta: string;
+  condition?: (row: TData) => boolean;
+  icon?: ComponentType<{ className?: string }>;
+} & (
+  | TanstackTableRowActionsConfirmationDialog<TData>
+  | TanstackTableRowActionsSimple<TData>
+  | TanstackTableRowActionsDeleteRow
+  | TanstackTableRowActionsDuplicateRow
+  | TanstackTableRowActionsMoveRowUp
+  | TanstackTableRowActionsMoveRowDown
+  | TanstackTableRowActionsCustomDialog<TData>
+);
+
+export type TanstackTableActionsSimple = {
+  actionLocation: "table";
+  onClick: () => void;
+  type: "simple";
+};
+export type TanstackTableCreateRowAction = {
+  actionLocation: "table";
+  onClick?: () => void;
+  type: "create-row";
+};
+export type TanstackTableActionsDialog = {
+  cancelText?: string;
+  confirmationText?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  title: string;
+};
+
+export type TanstackTableActionsSchemaFormDialog<TData> = Omit<
+  TanstackTableActionsDialog,
+  "cancelText" | "onCancel" | "confirmationText" | "onConfirm"
+> & {
+  className?: { autoform: string; submit: string };
+  onSubmit: (values: TData | undefined) => void;
+  type: "schemaform-dialog";
+} & Omit<SchemaFormProps<TData>, "onSubmit">;
+export type TanstackTableActionsCustomDialog = TanstackTableActionsDialog & {
+  content: JSX.Element | ((closeDialog?: () => void) => JSX.Element);
+  type: "custom-dialog";
+  dialogClassNames?: {
+    content?: string;
+    header?: string;
+    title?: string;
+    footer?: string;
+  };
+};
+
+export type TanstackTableTableActionsType<TData> = {
+  actionLocation: "table";
+  cta: string;
+  icon?: ComponentType<{ className?: string }>;
+  condition?: (data: TData[]) => boolean;
+} & (
+  | TanstackTableActionsSimple
+  | TanstackTableActionsCustomDialog
+  | TanstackTableCreateRowAction
+  | TanstackTableActionsSchemaFormDialog<TData>
+);
+
+export type TanstackTableSelectedRowActionType<TData> = {
+  actionLocation: "table";
+  cta: string;
+  icon?: ComponentType<{ className?: string }>;
+  onClick: (selectedIds: string[], selectedRows: TData[]) => void;
+};
+
+export type TanstackTableLanguageDataTypeWithConstantKey = {
+  constantKey: string;
+  languageData: Record<string, string>;
+};
+export type TanstackTableLanguageDataType =
+  | Record<string, string>
+  | TanstackTableLanguageDataTypeWithConstantKey;
+
+export type TanstackTableCreateColumnsByRowId<T> = {
+  badges?: Partial<Record<keyof T, TanstackTableColumnBadge>>;
+  classNames?: Partial<Record<keyof T, TanstackTableColumnClassNames[]>>;
+  config?: TanstackTableConfig;
+  custom?: Partial<Record<keyof T, TanstackTableColumCell<T>>>;
+  excludeColumns?: Partial<keyof T>[];
+  expandRowTrigger?: keyof T;
+  faceted?: Partial<
+    Record<keyof T, { options: TanstackTableFacetedFilterType[] }>
+  >;
+  icons?: Partial<Record<keyof T, TanstackTableColumnIcon>>;
+  languageData?: TanstackTableLanguageDataType;
+  links?: Partial<Record<keyof T, TanstackTableColumnLink>>;
+  rows: Record<
+    keyof T,
+    {
+      format?: string;
+      type: string;
+    }
+  >;
+  selectableRows?: boolean;
+  onSelectedRowChange?: (selectedRows: T[]) => void;
+  disabledRowIds?: string[];
+  localization: { locale: string; timeZone: string; lang: string };
+};
+
+export type TanstacktableEditableColumnsByRowId<T> = {
+  excludeColumns?: Partial<keyof T>[];
+  editableColumns?: Partial<keyof T>[];
+  languageData?: TanstackTableLanguageDataType;
+  rows: Record<
+    string,
+    {
+      enum?: Array<{
+        label: string;
+        value: string;
+      }>;
+      format?: string;
+      type: string;
+    }
+  >;
+};
+
+export type TanstackTableCreationProps<T> = Omit<
+  TanstackTablePropsType<T, string>,
+  "columns" | "data" | "rowCount" | "editable" | "onTableDataChange"
+>;

package/src/custom/tanstack-table/utils/cell-with-actions.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Row, Table as TableType } from "@tanstack/react-table";
+import { TanstackTableRowActions } from "../fields";
+import { TanstackTableRowActionsType } from "../types";
+
+export const CellWithActions = <TData,>(
+  table: TableType<TData>,
+  row: Row<TData>,
+  actions: TanstackTableRowActionsType<TData>[],
+  setRowAction: (
+    actions: TanstackTableRowActionsType<TData> & { row: TData }
+  ) => void
+) => (
+  <TanstackTableRowActions
+    row={row}
+    actions={actions}
+    setRowAction={setRowAction}
+    table={table}
+  />
+);

package/src/custom/tanstack-table/utils/column-names.ts

@@ -0,0 +1,26 @@
+import {
+  TanstackTableLanguageDataType,
+  TanstackTableLanguageDataTypeWithConstantKey,
+} from "../types";
+
+const isTypeLanguageDataTypeWithConstantKey = (
+  value: object
+): value is TanstackTableLanguageDataTypeWithConstantKey =>
+  value && typeof value !== "undefined" && "constantKey" in value;
+
+export function tanstackTableCreateTitleWithLanguageData({
+  languageData,
+  accessorKey,
+}: {
+  accessorKey: string;
+  languageData?:
+    | TanstackTableLanguageDataType
+    | TanstackTableLanguageDataTypeWithConstantKey;
+}): string {
+  if (languageData && isTypeLanguageDataTypeWithConstantKey(languageData)) {
+    const { constantKey, languageData: res } = languageData;
+    return res[`${constantKey}.${accessorKey}`] || accessorKey;
+  }
+
+  return languageData?.[accessorKey] || accessorKey;
+}

package/src/custom/tanstack-table/utils/columns-by-row-data.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { ColumnDef, Row } from "@tanstack/react-table";
+import Link from "next/link";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Checkbox } from "@repo/ayasofyazilim-ui/components/checkbox";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { tanstackTableCreateTitleWithLanguageData, testConditions } from ".";
+import DateTooltip, { Localization } from "../../date-tooltip";
+import { TanstackTableColumnHeader } from "../fields";
+import {
+  TanstackTableColumCell,
+  TanstackTableColumnBadge,
+  TanstackTableColumnClassNames,
+  TanstackTableColumnIcon,
+  TanstackTableColumnLink,
+  TanstackTableConfig,
+  TanstackTableCreateColumnsByRowId,
+  TanstackTableFacetedFilterType,
+} from "../types";
+import { JSX } from "react";
+
+export function createCell<T>(props: {
+  accessorKey: keyof T;
+  row: Row<T>;
+  link?: TanstackTableColumnLink;
+  faceted?: TanstackTableFacetedFilterType[];
+  badge?: TanstackTableColumnBadge;
+  icon?: TanstackTableColumnIcon;
+  className?: TanstackTableColumnClassNames[];
+  expandRowTrigger?: boolean;
+  format?: string;
+  custom?: TanstackTableColumCell<T>;
+  config?: TanstackTableConfig;
+  localization: Localization;
+}) {
+  const {
+    accessorKey,
+    row,
+    link,
+    badge,
+    icon,
+    className,
+    expandRowTrigger,
+    format,
+    custom,
+    config,
+    faceted,
+    localization,
+  } = props;
+
+  let content: JSX.Element | string | null =
+    row.getValue(accessorKey.toString())?.toString() || "";
+  if (format) {
+    if (format === "date" || format === "date-time") {
+      content = content ? (
+        <DateTooltip
+          date={content}
+          dateOptions={config?.dateOptions}
+          localization={localization}
+        />
+      ) : (
+        ""
+      );
+    }
+  }
+
+  if (icon) {
+    const position = icon.position || "before";
+    content = (
+      <div className="inline-flex">
+        {icon.icon && position === "before" && (
+          <icon.icon className={cn("w-4 h-4 mr-2", icon.iconClassName)} />
+        )}
+        {row.getValue(accessorKey.toString())}
+        {icon.icon && position === "after" && (
+          <icon.icon className={cn("w-4 h-4 ml-2", icon.iconClassName)} />
+        )}
+      </div>
+    );
+  }
+  if (badge) {
+    const position: { before: JSX.Element[]; after: JSX.Element[] } = {
+      before: [],
+      after: [],
+    };
+    badge.values.forEach((item) => {
+      const itemPosition = item.position || "before";
+      item.conditions?.forEach((condition) => {
+        if (condition.when(row.getValue(condition.conditionAccessorKey))) {
+          position[itemPosition].push(
+            <Badge
+              variant="outline"
+              className={item.badgeClassName}
+              key={item.label}
+            >
+              {item.label}
+            </Badge>
+          );
+        }
+        return null;
+      });
+    });
+    content = (
+      <>
+        {position.before}
+        {!badge.hideColumnValue && content}
+        {position.after}
+      </>
+    );
+  }
+  if (faceted) {
+    const facetedItem = faceted.find(
+      (item) =>
+        item.when?.(row.getValue(accessorKey.toString())) ||
+        row.getValue(accessorKey.toString()) === item.value
+    );
+    if (facetedItem) {
+      content = (
+        <div className={cn("flex items-center", facetedItem.className)}>
+          {facetedItem.icon && (
+            <facetedItem.icon
+              className={cn(
+                "text-muted-foreground mr-2 h-4 w-4",
+                facetedItem.iconClassName
+              )}
+            />
+          )}
+          {facetedItem.hideColumnValue ? "" : <span>{facetedItem.label}</span>}
+        </div>
+      );
+    }
+  }
+  const containerClassName = className
+    ?.map((item) => {
+      if (testConditions(item.conditions, row)) {
+        return item.className;
+      }
+      return null;
+    })
+    .join(" ");
+
+  if (custom) content = custom.content(row.original, row);
+  if (!link || !testConditions(link.conditions, row)) {
+    if (expandRowTrigger) {
+      return (
+        <button
+          type="button"
+          onClick={row.getToggleExpandedHandler()}
+          data-testid={`expand-row-${accessorKey.toString()}`}
+          className={cn(
+            "font-medium text-blue-700 flex items-center gap-2 cursor-pointer",
+            containerClassName
+          )}
+        >
+          {content}
+        </button>
+      );
+    }
+    return (
+      <div className={cn(" flex items-center gap-2", containerClassName)}>
+        {content}
+      </div>
+    );
+  }
+  let url = link.prefix;
+  if (link.targetAccessorKey) {
+    url += `/${row._getAllCellsByColumnId()?.[link.targetAccessorKey || ""]?.getValue()?.toString()}`;
+  }
+  if (link.suffix) {
+    url += `/${link.suffix}`;
+  }
+  return (
+    <Link
+      href={url}
+      className={cn(
+        "font-medium text-blue-700 flex items-center gap-2",
+        containerClassName
+      )}
+    >
+      {content}
+    </Link>
+  );
+}
+export function tanstackTableCreateColumnsByRowData<T>(
+  params: TanstackTableCreateColumnsByRowId<T>
+) {
+  const { rows, config } = params;
+
+  const {
+    excludeColumns,
+    languageData,
+    links,
+    faceted,
+    badges,
+    classNames,
+    icons,
+    expandRowTrigger,
+    custom,
+    localization,
+    onSelectedRowChange,
+  } = params;
+  const columns: ColumnDef<T>[] = [];
+  if (params.selectableRows) {
+    columns.push({
+      size: 64,
+      id: "select",
+      header: ({ table }) => (
+        <div className="w-full h-9 flex items-center justify-center">
+          <Checkbox
+            checked={
+              table
+                .getRowModel()
+                .rows.filter((row) => !params.disabledRowIds?.includes(row.id))
+                .every((row) => row.getIsSelected()) &&
+              table
+                .getRowModel()
+                .rows.some(
+                  (row) =>
+                    !params.disabledRowIds?.includes(row.id) &&
+                    row.getIsSelected()
+                )
+            }
+            onCheckedChange={(value) => {
+              const selectedRows: T[] = [];
+              table.getRowModel().rows.forEach((row) => {
+                if (!params.disabledRowIds?.includes(row.id)) {
+                  row.toggleSelected(!!value);
+                  if (value) {
+                    selectedRows.push(row.original);
+                  }
+                }
+              });
+              onSelectedRowChange?.(selectedRows);
+            }}
+            aria-label="Select all"
+            className="translate-y-0.5 align-middle"
+          />
+        </div>
+      ),
+
+      cell: ({ row, table }) => (
+        <div className="w-full h-9 flex items-center justify-center">
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => {
+              const selectedRows: T[] = [];
+              table.getSelectedRowModel().rows.forEach((row) => {
+                selectedRows.push(row.original);
+              });
+              if (value) {
+                selectedRows.push(row.original);
+              } else {
+                selectedRows.splice(selectedRows.indexOf(row.original), 1);
+              }
+              row.toggleSelected(!!value);
+              onSelectedRowChange?.(selectedRows);
+            }}
+            disabled={params.disabledRowIds?.some((id) => id === row.id)}
+            aria-label="Select row"
+            className="translate-y-0.5 align-top"
+          />
+        </div>
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    });
+  }
+  const rowKeys = Object.keys(rows) as (keyof T)[];
+  rowKeys
+    .filter((key) => !excludeColumns?.includes(key as keyof T))
+    .forEach((accessorKey) => {
+      const title = tanstackTableCreateTitleWithLanguageData({
+        languageData,
+        accessorKey: accessorKey.toString(),
+      });
+      const link = links?.[accessorKey as keyof T];
+      const { format } = rows[accessorKey];
+      const column: ColumnDef<T> = {
+        id: accessorKey.toString(),
+        accessorKey,
+        meta: title,
+        header:
+          !custom?.[accessorKey] || custom?.[accessorKey]?.showHeader
+            ? ({ column }) => (
+                <TanstackTableColumnHeader column={column} title={title} />
+              )
+            : undefined,
+        cell: ({ row }) =>
+          createCell<T>({
+            accessorKey,
+            row,
+            link,
+            faceted: faceted?.[accessorKey]?.options,
+            badge: badges?.[accessorKey],
+            icon: icons?.[accessorKey],
+            className: classNames?.[accessorKey],
+            expandRowTrigger: expandRowTrigger === accessorKey,
+            format,
+            custom: custom?.[accessorKey],
+            config,
+            localization,
+          }),
+      };
+      if (faceted?.[accessorKey]) {
+        column.filterFn = (row, id, value) => value.includes(row.getValue(id));
+      }
+      columns.push(column);
+    });
+
+  return columns;
+}