@tsed/react-formio 3.0.0-rc.2 → 3.0.0-rc.21

package/src/interfaces/Operation.ts

@@ -1,17 +1,14 @@
-import React from "react";
-
 import type { OperationButtonProps } from "../molecules/table/components/DefaultOperationButton.js";
-import type { JSON } from "./SubmissionType.js";
+import type { JSONRecord } from "./JSONRecord.js";
 
 export type CellMetadata = Record<string, unknown>;
-
-export type PermissionsResolver<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = (
+export type PermissionsResolver<Data extends object = JSONRecord> = (
   data: Data,
   metadata: CellMetadata,
   operation: Operation<Data>
 ) => void;
 
-export interface Operation<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
+export interface Operation<Data extends object = JSONRecord> {
   /**
    * Action identifier
    */

package/src/interfaces/SubmissionType.ts

@@ -1,21 +1,17 @@
 import type { Component, Submission } from "@formio/core";
 
-export type JSON = unknown | string | number | boolean | null | undefined | JSON[] | { [key: string]: JSON };
+import type { JSONRecord } from "./JSONRecord.js";
 
-export type SubmissionType<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<Partial<Submission>, "data"> & {
+export type SubmissionType<Data extends object = JSONRecord> = Omit<Partial<Submission>, "data"> & {
   data: Data;
 };
 
-export interface ChangedSubmission<
-  Data extends { [key: string]: JSON } = {
-    [key: string]: JSON;
-  }
-> extends SubmissionType<Data> {
+export interface ChangedSubmission<Data extends object = JSONRecord> extends SubmissionType<Data> {
   data: Data;
   changed?: {
     component: Component;
     instance: any;
     value: unknown;
-  } & Record<string, JSON>;
+  } & JSONRecord;
   isValid: boolean;
 }

package/src/interfaces/index.ts

@@ -5,6 +5,5 @@ export * from "./FormBuilderOptions";
 export * from "./FormOptions";
 export * from "./FormType";
 export * from "./Operation";
-export * from "./QueryOptions";
 export * from "./RoleType";
 export * from "./SubmissionType";

package/src/molecules/forms/select/Select.interface.ts

@@ -28,10 +28,6 @@ export interface SelectProps<Data = string> extends FormControlProps<Data, Selec
   searchEnabled?: boolean;
   customProperties?: Record<string, any>;
   options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
-  /**
-   * @deprecated
-   */
-  choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
 }
 
 export interface SelectSingle<Data = string> extends SelectProps<Data> {

package/src/molecules/table/Table.stories.tsx

@@ -74,7 +74,7 @@ type Story = StoryObj<typeof Table<ProductSubmission>>;
 export const Usage: Story = {
   args: {
     data: formSubmissions as unknown as ProductSubmission[],
-    columns: mapFormToColumns(FormType as any),
+    columns: mapFormToColumns({ form: FormType as any }),
     operations: [
       {
         title: "Edit",
@@ -172,7 +172,10 @@ export const Usage: Story = {
       return expect(canvas.queryByText("MPEC")).not.toBeInTheDocument();
     });
 
-    await expect(canvas.getByText("La Caravelle")).toBeInTheDocument();
+    const tableBody = canvasElement.querySelector("tbody");
+
+    await expect(tableBody).toBeInTheDocument();
+    await expect(within(tableBody as HTMLElement).getByText("La Caravelle")).toBeInTheDocument();
 
     await delay(300);
 
@@ -183,17 +186,20 @@ export const Usage: Story = {
 export const WithFilters: Story = {
   args: {
     data: formSubmissions as unknown as ProductSubmission[],
-    columns: mapFormToColumns(FormType as any, [
-      {
-        accessorKey: "data.id",
-        meta: {
-          filter: {
-            variant: "select",
-            layout: "react"
+    columns: mapFormToColumns({
+      form: FormType as any,
+      columns: [
+        {
+          accessorKey: "data.id",
+          meta: {
+            filter: {
+              variant: "select",
+              layout: "react"
+            }
           }
         }
-      }
-    ]),
+      ]
+    }),
     operations: [
       {
         title: "Edit",
@@ -217,70 +223,99 @@ export const WithFilters: Story = {
   }
 };
 
-export const WithCustomCell: Story = {
+export const WithPaginationOptions: Story = {
   args: {
     data: formSubmissions as unknown as ProductSubmission[],
-    columns: mapFormToColumns<ProductSubmission>(FormType as any, [
+    columns: mapFormToColumns({ form: FormType as any }),
+    operations: [
       {
-        accessorKey: "data.id",
-        meta: {
-          filter: {
-            variant: "select",
-            layout: "react"
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      }
+    ],
+    i18n: {},
+    enablePagination: true,
+    pageSizes: [5, 10, 25],
+    rowCount: formSubmissions.length,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 5
+      }
+    }
+  }
+};
+
+export const WithCustomCell: Story = {
+  args: {
+    data: formSubmissions as unknown as ProductSubmission[],
+    columns: mapFormToColumns<ProductSubmission>({
+      form: FormType as any,
+      columns: [
+        {
+          accessorKey: "data.id",
+          meta: {
+            filter: {
+              variant: "select",
+              layout: "react"
+            },
+            cellProps: {
+              colSpan: 2
+            }
           },
-          cellProps: {
-            colSpan: 2
+          cell: (context) => {
+            return (
+              <div className='flex space-x-4 align-items-center'>
+                <div className='max-w-[80px]'>
+                  <img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
+                </div>
+                <div>
+                  <div className='text-lg text-primary'>{context.row.original.data.label}</div>
+                  <div className='text-xs'>{context.getValue()}</div>
+                </div>
+              </div>
+            );
           }
         },
-        cell: (context) => {
-          return (
-            <div className='flex space-x-4 align-items-center'>
-              <div className='max-w-[80px]'>
-                <img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
-              </div>
-              <div>
-                <div className='text-lg text-primary'>{context.row.original.data.label}</div>
-                <div className='text-xs'>{context.getValue()}</div>
-              </div>
-            </div>
-          );
-        }
-      },
-      {
-        accessorKey: "data.label",
-        meta: {
-          hidden: true
-        }
-      },
-      {
-        accessorKey: "data.description",
-        meta: {
-          filter: {
-            variant: "text",
-            disableDatalist: true
+        {
+          accessorKey: "data.label",
+          meta: {
+            hidden: true
           }
-        }
-      },
-      {
-        accessorKey: "data.price",
-        cell: (context) => {
-          const value = context.getValue();
-
-          if (value === undefined) {
-            return "-";
+        },
+        {
+          accessorKey: "data.description",
+          meta: {
+            filter: {
+              variant: "text",
+              disableDatalist: true
+            }
+          }
+        },
+        {
+          accessorKey: "data.price",
+          cell: (context) => {
+            const value = context.getValue();
+
+            if (value === undefined) {
+              return "-";
+            }
+
+            return (
+              <div className='text-right'>
+                {Intl.NumberFormat("fr-FR", {
+                  style: "currency",
+                  currency: context.row.original.data.currency
+                }).format(context.getValue())}
+              </div>
+            );
           }
-
-          return (
-            <div className='text-right'>
-              {Intl.NumberFormat("fr-FR", {
-                style: "currency",
-                currency: context.row.original.data.currency
-              }).format(context.getValue())}
-            </div>
-          );
         }
-      }
-    ]),
+      ]
+    }),
     operations: [
       {
         title: "Edit",

package/src/molecules/table/Table.tsx

@@ -2,24 +2,23 @@ import { flexRender } from "@tanstack/react-table";
 import cx from "classnames";
 import { PropsWithChildren } from "react";
 
-import type { JSON } from "../../interfaces/index.js";
+import type { JSONRecord } from "../../interfaces/JSONRecord.js";
 import { getComponent } from "../../registries/components";
 import type { Pagination as DefaultPagination } from "../pagination/Pagination";
 import type { DefaultCellFooter } from "./components/DefaultCellFooter";
 import type { DefaultCellHeader } from "./components/DefaultCellHeader";
 import { useTable, UseTableProps } from "./hooks/useTable";
 
-export interface TableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseTableProps<Data> {
+export interface TableProps<Data extends object = JSONRecord> extends UseTableProps<Data> {
   className?: string;
-
   enableFooter?: boolean;
-
-  pageSizes?: number[];
+  enablePagination?: boolean;
 }
 
-export function Table<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+export function Table<Data extends object = JSONRecord>({
   className,
   enableFooter,
+  enablePagination = true,
   children,
   ...props
 }: PropsWithChildren<TableProps<Data>>) {
@@ -31,58 +30,60 @@ export function Table<Data extends { [key: string]: JSON } = { [key: string]: JS
   const { pagination } = tableInstance.getState();
 
   return (
-    <div className={cx("table-group table-responsive", className)}>
-      <table className='table table-striped table-hover'>
-        <thead>
-          {tableInstance.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                const sort = header.column.getIsSorted();
-                return (
-                  <th
-                    data-testid={`head-cell-${header.id}`}
-                    key={header.id}
-                    aria-sort={sort ? (sort === "asc" ? "ascending" : "descending") : "none"}
-                  >
-                    {header.isPlaceholder ? null : <CellHeader header={header} i18n={i18n} />}
-                  </th>
-                );
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {tableInstance.getRowModel().rows.map((row) => {
-            return (
-              <tr key={row.id} data-testid={`body-row-${row.id}`}>
-                {row
-                  .getVisibleCells()
-                  .filter((cell) => !cell.column.columnDef.meta?.hidden)
-                  .map((cell) => {
-                    return (
-                      <td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>
-                    );
-                  })}
-              </tr>
-            );
-          })}
-        </tbody>
-        {enableFooter && (
-          <tfoot>
-            {tableInstance.getFooterGroups().map((footerGroup) => (
-              <tr key={footerGroup.id}>
-                {footerGroup.headers.map((header) => (
-                  <th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>
-                ))}
+    <div className={cx("table-group", className)}>
+      <div className='table-group-body'>
+        <table className='table table-striped table-hover'>
+          <thead>
+            {tableInstance.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const sort = header.column.getIsSorted();
+                  return (
+                    <th
+                      data-testid={`head-cell-${header.id}`}
+                      key={header.id}
+                      aria-sort={sort ? (sort === "asc" ? "ascending" : "descending") : "none"}
+                    >
+                      {header.isPlaceholder ? null : <CellHeader header={header} i18n={i18n} />}
+                    </th>
+                  );
+                })}
               </tr>
             ))}
-          </tfoot>
-        )}
-      </table>
-      <div className={"overflow-hidden flex flex-wrap"}>
-        {props.data.length && pagination ? (
+          </thead>
+          <tbody>
+            {tableInstance.getRowModel().rows.map((row) => {
+              return (
+                <tr key={row.id} data-testid={`body-row-${row.id}`}>
+                  {row
+                    .getVisibleCells()
+                    .filter((cell) => !cell.column.columnDef.meta?.hidden)
+                    .map((cell) => {
+                      return (
+                        <td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      );
+                    })}
+                </tr>
+              );
+            })}
+          </tbody>
+          {enableFooter && (
+            <tfoot>
+              {tableInstance.getFooterGroups().map((footerGroup) => (
+                <tr key={footerGroup.id}>
+                  {footerGroup.headers.map((header) => (
+                    <th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>
+                  ))}
+                </tr>
+              ))}
+            </tfoot>
+          )}
+        </table>
+      </div>
+      <div className='table-group-footer'>
+        {props.data.length && pagination && enablePagination ? (
           <Pagination
             className={"flex-1"}
             canNextPage={tableInstance.getCanNextPage()}

package/src/molecules/table/all.ts

@@ -1,6 +1,8 @@
 import "./components/DefaultFilter";
 import "./components/DefaultArrowSort";
 import "./components/DefaultCell";
+import "./components/DefaultBooleanCell";
+import "./components/DefaultDateCell";
 import "./components/DefaultCellOperations";
 import "./components/DefaultOperationButton";
 import "./components/DefaultCellHeader";

package/src/molecules/table/components/DefaultBooleanCell.spec.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+
+import { DefaultCellBoolean } from "./DefaultBooleanCell";
+
+function createCellContext(value: boolean, labels?: Record<string, string>) {
+  return {
+    getValue: () => value,
+    column: {
+      columnDef: {
+        meta: {
+          labels
+        }
+      }
+    }
+  } as any;
+}
+
+describe("DefaultCellBoolean", () => {
+  it("should render the default yes label for true values", () => {
+    render(<DefaultCellBoolean {...createCellContext(true)} />);
+
+    expect(screen.getByText("Yes", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should render the default no label for false values", () => {
+    render(<DefaultCellBoolean {...createCellContext(false)} />);
+
+    expect(screen.getByText("No", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should render custom labels from column metadata", () => {
+    render(<DefaultCellBoolean {...createCellContext(true, { yes: "Enabled", no: "Disabled" })} />);
+
+    expect(screen.getByText("Enabled", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should render the custom false label from column metadata", () => {
+    render(<DefaultCellBoolean {...createCellContext(false, { yes: "Enabled", no: "Disabled" })} />);
+
+    expect(screen.getByText("Disabled", { selector: "span" })).toBeInTheDocument();
+  });
+});

package/src/molecules/table/components/DefaultBooleanCell.tsx

@@ -0,0 +1,11 @@
+import { CellContext } from "@tanstack/react-table";
+
+import { registerComponent } from "../../../registries/components";
+
+export function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {
+  const value = getValue();
+  return <span>{String(value ? columnDef.meta?.labels?.["yes"] || "Yes" : columnDef.meta?.labels?.["no"] || "No")}</span>;
+}
+
+registerComponent("Cell.boolean", DefaultCellBoolean);
+registerComponent("Cell.checkbox", DefaultCellBoolean);

package/src/molecules/table/components/DefaultCell.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+
+import { DefaultCell } from "./DefaultCell";
+
+function createCellContext(value: unknown, rendered: unknown) {
+  return {
+    getValue: () => value,
+    renderValue: () => rendered
+  } as any;
+}
+
+describe("DefaultCell", () => {
+  it("should render an empty span when value is undefined", () => {
+    render(<DefaultCell {...createCellContext(undefined, undefined)} />);
+
+    expect(screen.getByText("", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it("should render html when rendered value differs from raw value", () => {
+    render(<DefaultCell {...createCellContext("hello", "<strong>hello</strong>")} />);
+
+    expect(screen.getByText("hello", { selector: "strong" })).toBeInTheDocument();
+  });
+
+  it("should render text when rendered value matches raw value", () => {
+    render(<DefaultCell {...createCellContext("hello", "hello")} />);
+
+    expect(screen.getByText("hello", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText("hello", { selector: "strong" })).not.toBeInTheDocument();
+  });
+});

package/src/molecules/table/components/DefaultCell.tsx

@@ -1,22 +1,21 @@
-import { registerComponent } from "../../../registries/components";
+import type { CellContext } from "@tanstack/react-table";
 
-export interface DefaultCellProps<Data = any> {
-  value: Data;
-  render?: (value: Data) => any;
-}
+import { registerComponent } from "../../../registries/components";
 
-export function DefaultCell<Data = any>({ value, render = (f: any) => f }: DefaultCellProps<Data>): JSX.Element {
+export function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<Data, any>): JSX.Element {
+  const value = getValue();
   if (value === undefined) {
     return <span></span>;
   }
 
-  const rendered = render(value);
+  const rendered = renderValue();
 
-  if (value !== rendered) {
-    return <div dangerouslySetInnerHTML={{ __html: rendered }} />;
+  if (rendered != null && value !== rendered) {
+    return <div dangerouslySetInnerHTML={{ __html: String(rendered) }} />;
   }
 
   return <span>{String(value)}</span>;
 }
 
 registerComponent("Cell", DefaultCell);
+registerComponent("Cell.string", DefaultCell);

package/src/molecules/table/components/DefaultCellOperations.tsx

@@ -1,10 +1,11 @@
 import type { CellContext } from "@tanstack/react-table";
 
-import type { CellMetadata, JSON, Operation } from "../../../interfaces";
+import type { CellMetadata, Operation } from "../../../interfaces";
+import type { JSONRecord } from "../../../interfaces/JSONRecord.js";
 import { getComponent, registerComponent } from "../../../registries/components";
 import type { DefaultOperationButton } from "./DefaultOperationButton";
 
-export interface DefaultCellOperationsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
+export interface DefaultCellOperationsProps<Data extends object = JSONRecord> {
   info: CellContext<Data, unknown>;
   operations: Operation<Data>[];
   metadata?: CellMetadata;
@@ -12,7 +13,7 @@ export interface DefaultCellOperationsProps<Data extends { [key: string]: JSON }
   onClick?: (data: any, operation: Operation<Data>) => void;
 }
 
-export function DefaultCellOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+export function DefaultCellOperations<Data extends object = JSONRecord>({
   info,
   metadata,
   operations,

package/src/molecules/table/components/DefaultDateCell.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+
+import { DefaultDateCell } from "./DefaultDateCell";
+
+function createCellContext(value: string | undefined, format?: string) {
+  return {
+    getValue: () => value,
+    column: {
+      columnDef: {
+        meta: {
+          format
+        }
+      }
+    }
+  } as any;
+}
+
+describe("DefaultDateCell", () => {
+  it("should render an empty span when value is undefined", () => {
+    render(<DefaultDateCell {...createCellContext(undefined)} />);
+
+    expect(screen.getByText("", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it("should render the formatted date with the default format", () => {
+    render(<DefaultDateCell {...createCellContext("2026-03-12T10:30:00.000Z")} />);
+
+    expect(screen.getByText("03/12/2026", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should render the formatted date with a custom format", () => {
+    render(<DefaultDateCell {...createCellContext("2026-03-12T10:30:00.000Z", "YYYY-MM-DD HH:mm")} />);
+
+    expect(screen.getByText("2026-03-12 10:30", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should fallback to the raw value when the date is invalid", () => {
+    render(<DefaultDateCell {...createCellContext("not-a-date")} />);
+
+    expect(screen.getByText("not-a-date", { selector: "span" })).toBeInTheDocument();
+  });
+});

package/src/molecules/table/components/DefaultDateCell.tsx

@@ -0,0 +1,23 @@
+import { CellContext } from "@tanstack/react-table";
+import moment from "moment";
+
+import { registerComponent } from "../../../registries/components";
+
+export function DefaultDateCell<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, string>) {
+  const value = getValue();
+
+  if (!value) {
+    return <span />;
+  }
+
+  const date = moment.parseZone(value, moment.ISO_8601, true);
+
+  if (!date.isValid()) {
+    return <span>{String(value)}</span>;
+  }
+
+  return <span>{date.format(columnDef.meta?.format || "L")}</span>;
+}
+
+registerComponent("Cell.date", DefaultDateCell);
+registerComponent("Cell.datetime", DefaultDateCell);