@tsed/react-formio 3.0.0-alpha.9 → 3.0.0-rc.1

package/src/molecules/table/Table.tsx

@@ -1,101 +1,106 @@
-import classnames from "classnames";
+import { flexRender } from "@tanstack/react-table";
+import cx from "classnames";
 import { PropsWithChildren } from "react";
 
-import { PaginationProps } from "../../molecules/pagination/Pagination";
-import { DrapNDropContainer } from "./components/DragNDropContainer";
-import { TableProps, useCustomTable } from "./hooks/useCustomTable";
+import type { JSON } from "../../interfaces/index.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 function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
-  const {
-    className,
-    tableInstance,
-    CellHeader,
-    isLoading,
-    onClick,
-    Loader,
-    EmptyData,
-    Row,
-    data,
-    disablePagination,
-    Pagination,
-    pageIndex,
-    pageSize,
-    pageSizes,
-    setPageSize,
-    totalLength,
-    i18n,
-    enableDragNDrop,
-    children,
-    onDrag,
-    onDrop
-  } = useCustomTable(props);
+export interface TableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseTableProps<Data> {
+  className?: string;
+
+  enableFooter?: boolean;
+
+  pageSizes?: number[];
+}
+
+export function Table<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  className,
+  enableFooter,
+  children,
+  ...props
+}: PropsWithChildren<TableProps<Data>>) {
+  const { tableInstance, i18n } = useTable<Data>(props);
+  const CellHeader = getComponent<typeof DefaultCellHeader>("CellHeader");
+  const CellFooter = getComponent<typeof DefaultCellFooter>("CellFooter");
+  const Pagination = getComponent<typeof DefaultPagination>("Pagination");
+
+  const { pagination } = tableInstance.getState();
 
-  // Render the UI for your table
   return (
-    <DrapNDropContainer enableDragNDrop={enableDragNDrop}>
-      <div className={classnames("table-group table-responsive", className)}>
-        <table
-          className={"table table-striped table-hover"}
-          {...tableInstance.getTableProps()}
-          /* style={{ marginBottom: disablePagination ? "-1px" : "0px" }} */
-        >
-          <thead>
-            {tableInstance.headerGroups.map((headerGroup, i) => (
-              <tr {...headerGroup.getHeaderGroupProps()} key={`tableInstance.headerGroups${i}`}>
-                {enableDragNDrop ? (
-                  <th role='columnheader' className='text-center'>
-                    <div className='table-cell-header'></div>
-                  </th>
-                ) : null}
-                {headerGroup.headers.map((column) => (
+    <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
-                    /* className='text-left py-2 align-top' */
-                    {...column.getHeaderProps()}
-                    key={`tableInstance.headers.column.${column.id}`}
+                    data-testid={`head-cell-${header.id}`}
+                    key={header.id}
+                    aria-sort={sort ? (sort === "asc" ? "ascending" : "descending") : "none"}
                   >
-                    <CellHeader column={column} />
+                    {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>
                 ))}
               </tr>
             ))}
-          </thead>
-          {!isLoading ? (
-            <tbody {...tableInstance.getTableBodyProps()}>
-              {(tableInstance as unknown as { page: any[] }).page.map((row: any, index: number) => {
-                tableInstance.prepareRow(row);
-                return (
-                  <Row<Data>
-                    index={index}
-                    enableDragNDrop={enableDragNDrop}
-                    onClick={onClick}
-                    row={row}
-                    key={`tableInstance.page.${row.id}`}
-                    onDrag={onDrag}
-                    onDrop={onDrop}
-                  />
-                );
-              })}
-            </tbody>
-          ) : null}
-        </table>
-        {isLoading ? <Loader /> : null}
-        {!data.length ? <EmptyData /> : null}
-        {!isLoading && data.length && !disablePagination ? (
-          <div className={"overflow-hidden"}>
-            <Pagination
-              {...(tableInstance as unknown as PaginationProps)}
-              totalLength={totalLength}
-              className={"text-sm"}
-              pageIndex={pageIndex}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              setPageSize={setPageSize}
-              i18n={i18n}
-            />
-          </div>
+          </tfoot>
+        )}
+      </table>
+      <div className={"overflow-hidden flex flex-wrap"}>
+        {props.data.length && pagination ? (
+          <Pagination
+            className={"flex-1"}
+            canNextPage={tableInstance.getCanNextPage()}
+            canPreviousPage={tableInstance.getCanPreviousPage()}
+            pageIndex={pagination.pageIndex}
+            pageSize={pagination.pageSize}
+            pageSizes={props.pageSizes}
+            i18n={props.i18n}
+            pageCount={tableInstance.getPageCount()}
+            rowCount={props.rowCount}
+            onPageIndexChange={(page) => tableInstance.setPageIndex(page)}
+            onClickPreviousPage={() => tableInstance.previousPage()}
+            onClickNextPage={() => tableInstance.nextPage()}
+            onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}
+          />
         ) : null}
-        {children}
+        <div>{children}</div>
       </div>
-    </DrapNDropContainer>
+    </div>
   );
 }

package/src/molecules/table/all.ts

@@ -0,0 +1,16 @@
+import "./components/DefaultFilter";
+import "./components/DefaultArrowSort";
+import "./components/DefaultCell";
+import "./components/DefaultCellOperations";
+import "./components/DefaultOperationButton";
+import "./components/DefaultCellHeader";
+import "./components/DefaultCellFooter";
+// forms
+import "../forms/input-text/InputText";
+import "../forms/select/all";
+// filters
+import "./filters/TextFieldFilter";
+import "./filters/SelectFilter";
+import "./filters/RangeFilter";
+// ui
+import "../pagination/all";

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

@@ -1,10 +1,26 @@
+import type { Header } from "@tanstack/react-table";
+
+import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 
-export function DefaultArrowSort({ column }: any) {
-  const { isSorted, isSortedDesc } = column;
+export interface DefaultArrowSortProps<Data = any> {
+  header: Header<Data, unknown>;
+}
+
+export function DefaultArrowSort<Data>({ header }: DefaultArrowSortProps<Data>) {
+  const sort = header.column.getIsSorted();
+
   return (
-    <span className={"table-arrow-sort"}>
-      {isSorted ? <i className={iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")} /> : ""}
+    <span
+      data-testid={`head-sort-${header.column.id}`}
+      role='button'
+      aria-label={`Sort by ${header.column.columnDef.header}`}
+      aria-pressed={sort ? sort === "desc" : undefined}
+      className='table-arrow-sort'
+    >
+      {sort ? <i className={iconClass(undefined, sort === "asc" ? "sort-up" : "sort-down")} /> : null}
     </span>
   );
 }
+
+registerComponent("ArrowSort", DefaultArrowSort);

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

@@ -1,4 +1,11 @@
-export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element {
+import { registerComponent } from "../../../registries/components";
+
+export interface DefaultCellProps<Data = any> {
+  value: Data;
+  render?: (value: Data) => any;
+}
+
+export function DefaultCell<Data = any>({ value, render = (f: any) => f }: DefaultCellProps<Data>): JSX.Element {
   if (value === undefined) {
     return <span></span>;
   }
@@ -11,3 +18,5 @@ export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element
 
   return <span>{String(value)}</span>;
 }
+
+registerComponent("Cell", DefaultCell);

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

@@ -0,0 +1,16 @@
+import { flexRender, type Header } from "@tanstack/react-table";
+
+import { registerComponent } from "../../../registries/components";
+
+export interface DefaultCellHeaderProps<Data = any> {
+  header: Header<Data, unknown>;
+  i18n?: (f: string) => string;
+}
+
+export function DefaultCellFooter<Data = any>(props: DefaultCellHeaderProps<Data>) {
+  const { header } = props;
+
+  return <>{flexRender(header.column.columnDef.footer, header.getContext())}</>;
+}
+
+registerComponent("CellFooter", DefaultCellFooter);

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

@@ -1,22 +1,42 @@
-import { HeaderGroup } from "react-table";
+import { flexRender, type Header } from "@tanstack/react-table";
+import cx from "classnames";
 
-export interface DefaultCellHeaderProps<Data extends object = any> extends Record<string, unknown> {
-  column: HeaderGroup<Data> & {
-    getSortByToggleProps: () => Record<string, unknown>;
-    canFilter: boolean;
-    render: (key: string) => any;
-  };
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { DefaultArrowSort } from "./DefaultArrowSort";
+import type { DefaultFilter } from "./DefaultFilter";
+
+export interface DefaultCellHeaderProps<Data = any> {
+  header: Header<Data, unknown>;
+  i18n?: (f: string) => string;
 }
 
-export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ column }: DefaultCellHeaderProps<Data>) {
+export function DefaultCellHeader<Data = any>(props: DefaultCellHeaderProps<Data>) {
+  const { header, i18n } = props;
+
+  const ArrowSort = getComponent<typeof DefaultArrowSort>("ArrowSort");
+  const Filter = getComponent<typeof DefaultFilter>("Filter");
+  const canSort = header.column.getCanSort();
+  const canFilter = header.column.getCanFilter();
+
   return (
-    <div className={"table-cell-header"}>
-      <div className='table-cell-header__label' {...column.getSortByToggleProps()}>
-        <span>{column.render("Header") as any}</span>
+    <div className={cx("table-cell-header", {})}>
+      <div
+        className={cx("table-cell-header__label", {
+          "cursor-pointer select-none": header.column.getCanSort()
+        })}
+        {...(canSort
+          ? {
+              onClick: header.column.getToggleSortingHandler()
+            }
+          : {})}
+      >
+        <span>{flexRender(header.column.columnDef.header, header.getContext())}</span>
 
-        {column.render("ArrowSort") as any}
+        <ArrowSort header={header} />
       </div>
-      {column.canFilter ? <div className='table-cell-header__filter'>{column.render("Filter") as any}</div> : null}
+      {canFilter && <Filter header={header} i18n={i18n} />}
     </div>
   );
 }
+
+registerComponent("CellHeader", DefaultCellHeader);

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

@@ -1,37 +1,48 @@
-import { DefaultOperationButton, OperationButtonProps } from "./DefaultOperationButton";
+import type { CellContext } from "@tanstack/react-table";
 
-export interface DefaultCellOperationsProps {
-  operations: (OperationButtonProps & {
-    OperationButton: typeof DefaultOperationButton;
-    permissionsResolver?(data: unknown, ctx: any): boolean;
-  })[];
-  row: any;
+import type { CellMetadata, JSON, Operation } from "../../../interfaces";
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { DefaultOperationButton } from "./DefaultOperationButton";
 
-  onClick: (data: any, action: string) => void;
-  ctx: any;
+export interface DefaultCellOperationsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
+  info: CellContext<Data, unknown>;
+  operations: Operation<Data>[];
+  metadata?: CellMetadata;
   i18n: (i18n: string) => string;
+  onClick?: (data: any, operation: Operation<Data>) => void;
 }
 
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
-  const data = row.original;
-
+export function DefaultCellOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  info,
+  metadata,
+  operations,
+  i18n,
+  onClick
+}: DefaultCellOperationsProps<Data>) {
+  const Button = getComponent<typeof DefaultOperationButton<Data>>("OperationButton");
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
+        .filter(({ permissionsResolver, ...operation }) => {
+          return !permissionsResolver || permissionsResolver(info.row.original, metadata || {}, operation);
+        })
+        .map((operation) => {
           return (
-            <OperationButton
+            <Button
+              data-testid={`operation-${info.row.id}-${operation.action}`}
               key={operation.action}
-              {...operation}
-              data-testid={`operation-${index}-${operation.action}`}
-              onClick={(action: string) => onClick(data, action)}
-              data={data}
+              operation={operation}
+              metadata={metadata}
+              info={info}
               i18n={i18n}
-              ctx={ctx}
+              onClick={() => {
+                onClick?.(info.row.original, operation);
+              }}
             />
           );
         })}
     </div>
   );
 }
+
+registerComponent("CellOperations", DefaultCellOperations);

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

@@ -0,0 +1,42 @@
+import "../interfaces/extends";
+
+import { Header } from "@tanstack/react-table";
+import type { ComponentType } from "react";
+
+import { getComponent, registerComponent } from "../../../registries/components";
+
+export interface DefaultFilterProps<Data = any> {
+  header: Header<Data, unknown>;
+  i18n?: (f: string) => string;
+}
+
+export interface FilterProps<Data = any, Opts = Record<string, unknown>> {
+  header: Header<Data, unknown>;
+  options: Opts;
+  i18n?: (f: string) => string;
+}
+
+export function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<Data>) {
+  const {
+    filter = {
+      variant: "text"
+    }
+  } = header.column.columnDef.meta || {};
+
+  const { variant: filterVariant } = filter;
+  const Filter = getComponent<ComponentType<FilterProps>>([`Filter.${header.column.id}`, `Filter.${filterVariant}`, "Filter.text"]);
+
+  if (!Filter) {
+    console.warn("Missing filter for `Filter." + header.column.id + "` or `Filter." + filterVariant + "`");
+
+    return null;
+  }
+
+  return (
+    <div className='table-cell-header__filter'>
+      <Filter header={header} options={filter} i18n={i18n} />
+    </div>
+  );
+}
+
+registerComponent("Filter", DefaultFilter);

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

@@ -1,49 +1,32 @@
-import classnames from "classnames";
+import { CellContext } from "@tanstack/react-table";
+import cx from "classnames";
 import { HTMLAttributes } from "react";
 
+import { type CellMetadata, type JSON, Operation } from "../../../interfaces";
+import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
-  buttonType?: string;
-  buttonSize?: string;
-  buttonOutline?: boolean;
-  data: any[];
-  onClick: (action: string) => void;
-  action: string;
-  icon?: string;
-  title?: string;
+export interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+  operation: Operation<Data>;
+  info: CellContext<Data, unknown>;
+  metadata?: CellMetadata;
+  onClick: () => void;
   i18n?: (i18n: string) => string;
-  ctx?: any;
-  permissionsResolver?: (ctx: any) => boolean;
 }
 
-export function DefaultOperationButton(props: OperationButtonProps) {
-  const {
-    className = "btn",
-    buttonSize = "xs",
-    buttonType = "primary",
-    buttonOutline,
-    onClick,
-    action,
-    icon = "",
-    title = "",
-    i18n = (f: string) => f,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    data,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ctx,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    permissionsResolver,
-    ...otherProps
-  } = props;
+export function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;
+  const { className = "btn", buttonSize = "xs", buttonType = "primary", buttonOutline, action, title = "", icon = "" } = operation;
 
   return (
     <button
-      {...otherProps}
+      {...extraProps}
       aria-label={"Operation button: " + (title || action)}
-      className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
-      onClick={stopPropagationWrapper(() => onClick(action))}
+      className={cx(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
+      onClick={stopPropagationWrapper(() => onClick())}
     >
       {icon ? (
         <>
@@ -54,3 +37,5 @@ export function DefaultOperationButton(props: OperationButtonProps) {
     </button>
   );
 }
+
+registerComponent("OperationButton", DefaultOperationButton);

package/src/molecules/table/filters/Filters.d.ts

@@ -0,0 +1,31 @@
+import { SelectOptionProps, SelectProps } from "../../forms/select/Select.interface";
+
+export type FilterVariants = "text" | "range" | "select" | "boolean";
+
+export interface FilterBaseOptions extends Record<string, unknown> {
+  variant: string;
+}
+
+export interface FilterTextOptions extends FilterBaseOptions {
+  variant: "text";
+  disableDatalist?: boolean;
+}
+
+export interface FilterRangeOptions extends FilterBaseOptions {
+  variant: "range";
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface FilterSelectOptions extends FilterBaseOptions, SelectProps<string> {
+  variant: "select";
+  options?: SelectOptionProps<string>[];
+}
+
+export interface FilterBooleanOptions extends FilterBaseOptions {
+  variant: "boolean";
+  options?: SelectOptionProps<string>[];
+}
+
+export type FilterOptions = FilterTextOptions | FilterRangeOptions | FilterSelectOptions | FilterBooleanOptions;

package/src/molecules/table/filters/RangeFilter.tsx

@@ -0,0 +1,43 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import { type InputText as DefaultInputText } from "../../forms/input-text/InputText";
+import type { FilterProps } from "../components/DefaultFilter";
+import { FilterRangeOptions } from "./Filters";
+
+export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {
+  const { column } = header;
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const columnFilterValue = header.column.getFilterValue();
+  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];
+  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];
+  const step = options.step ?? 1;
+
+  return (
+    <div>
+      <div className='flex space-x-2'>
+        <div className='w-1/2'>
+          <InputText
+            type='number'
+            size='small'
+            {...{ min, max, step }}
+            value={(columnFilterValue as [number, number])?.[0] ?? ""}
+            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}
+            placeholder={`Min ${min !== undefined ? `(${min})` : ""}`}
+          />
+        </div>
+        <div className='w-1/2'>
+          <InputText
+            type='number'
+            size='small'
+            {...{ min, max, step }}
+            value={(columnFilterValue as [number, number])?.[1] ?? ""}
+            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}
+            placeholder={`Max ${max ? `(${max})` : ""}`}
+          />
+        </div>
+      </div>
+      <div className='h-1' />
+    </div>
+  );
+}
+
+registerComponent("Filter.range", RangeFilter);

package/src/molecules/table/filters/SelectFilter.tsx

@@ -0,0 +1,47 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { Select as DefaultSelect } from "../../forms/select/Select";
+import { SelectOptionProps } from "../../forms/select/Select.interface";
+import type { FilterProps } from "../components/DefaultFilter";
+import { useUniqValues } from "../hooks/useUniqValues";
+import { FilterSelectOptions } from "./Filters";
+
+export function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {
+  const Select = getComponent<typeof DefaultSelect>("Select");
+  const columnFilterValue = header.column.getFilterValue();
+  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+
+  const opts =
+    options.layout === "choicesjs"
+      ? {
+          placeholder: undefined
+        }
+      : {
+          placeholder: `Filter by ${header.column.columnDef.header}`
+        };
+
+  const listOptions = (
+    [
+      {
+        label: `Filter by ${header.column.columnDef.header}`,
+        value: ""
+      }
+    ] as SelectOptionProps[]
+  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));
+
+  return (
+    <>
+      <Select<string>
+        size='small'
+        {...(options as any)}
+        {...opts}
+        options={listOptions}
+        name={`filter_${header.column.id}`}
+        data-testid={`filter_${header.column.id}`}
+        value={columnFilterValue as string}
+        onChange={(_, value) => header.column.setFilterValue(value)}
+      />
+    </>
+  );
+}
+
+registerComponent("Filter.select", SelectFilter);