@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/molecules/table/Table.tsx

@@ -0,0 +1,106 @@
+import { flexRender } from "@tanstack/react-table";
+import cx from "classnames";
+import { PropsWithChildren } from "react";
+
+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 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();
+
+  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>
+                ))}
+              </tr>
+            ))}
+          </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={i18n}
+            pageCount={tableInstance.getPageCount()}
+            rowCount={props.rowCount}
+            onPageIndexChange={(page) => tableInstance.setPageIndex(page)}
+            onClickPreviousPage={() => tableInstance.previousPage()}
+            onClickNextPage={() => tableInstance.nextPage()}
+            onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}
+          />
+        ) : null}
+        <div>{children}</div>
+      </div>
+    </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

@@ -0,0 +1,26 @@
+import type { Header } from "@tanstack/react-table";
+
+import { registerComponent } from "../../../registries/components";
+import { iconClass } from "../../../utils/iconClass";
+
+export interface DefaultArrowSortProps<Data = any> {
+  header: Header<Data, unknown>;
+}
+
+export function DefaultArrowSort<Data>({ header }: DefaultArrowSortProps<Data>) {
+  const sort = header.column.getIsSorted();
+
+  return (
+    <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

@@ -0,0 +1,22 @@
+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>;
+  }
+
+  const rendered = render(value);
+
+  if (value !== rendered) {
+    return <div dangerouslySetInnerHTML={{ __html: rendered }} />;
+  }
+
+  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

@@ -0,0 +1,42 @@
+import { flexRender, type Header } from "@tanstack/react-table";
+import cx from "classnames";
+
+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 = 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={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>
+
+        <ArrowSort header={header} />
+      </div>
+      {canFilter && <Filter header={header} i18n={i18n} />}
+    </div>
+  );
+}
+
+registerComponent("CellHeader", DefaultCellHeader);

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

@@ -0,0 +1,48 @@
+import type { CellContext } from "@tanstack/react-table";
+
+import type { CellMetadata, JSON, Operation } from "../../../interfaces";
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { DefaultOperationButton } from "./DefaultOperationButton";
+
+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<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, ...operation }) => {
+          return !permissionsResolver || permissionsResolver(info.row.original, metadata || {}, operation);
+        })
+        .map((operation) => {
+          return (
+            <Button
+              data-testid={`operation-${info.row.id}-${operation.action}`}
+              key={operation.action}
+              operation={operation}
+              metadata={metadata}
+              info={info}
+              i18n={i18n}
+              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

@@ -0,0 +1,41 @@
+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<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;
+}
+
+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
+      {...extraProps}
+      aria-label={"Operation button: " + (title || action)}
+      className={cx(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
+      onClick={stopPropagationWrapper(() => onClick())}
+    >
+      {icon ? (
+        <>
+          <i className={iconClass(undefined, icon)} /> {title && " "}
+        </>
+      ) : null}
+      {title && <span className={icon && title ? "ml-1" : ""}>{i18n(title)}</span>}
+    </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" });
+  console.log(uniqValues);
+  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);

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

@@ -0,0 +1,36 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { InputText as DefaultInputText } from "../../forms/input-text/InputText";
+import type { FilterProps } from "../components/DefaultFilter";
+import { useUniqValues } from "../hooks/useUniqValues";
+import { FilterTextOptions } from "./Filters";
+
+export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const columnFilterValue = header.column.getFilterValue();
+  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+  const datalistId = `data_list_${header.column.id}`;
+
+  return (
+    <>
+      {!options.disableDatalist && (
+        <datalist id={datalistId}>
+          {uniqValues.map((value: any) => (
+            <option value={value} key={value} />
+          ))}
+        </datalist>
+      )}
+      <InputText<string>
+        size='small'
+        placeholder={`Filter by ${header.column.columnDef.header}`}
+        {...options}
+        name={`filter_${header.column.id}`}
+        data-testid={`filter_${header.column.id}`}
+        value={(columnFilterValue ?? "") as string}
+        list={datalistId}
+        onChange={(_, value) => header.column.setFilterValue(value)}
+      />
+    </>
+  );
+}
+
+registerComponent("Filter.text", TextFieldFilter);

package/src/molecules/table/hooks/useTable.tsx

@@ -0,0 +1,75 @@
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type TableOptions,
+  type TableState,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect } from "react";
+
+import { type JSON, Operation } from "../../../interfaces";
+import { getComponent } from "../../../registries/components";
+import type { DefaultCellOperations } from "../components/DefaultCellOperations";
+
+export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
+  operations: Operation<Data>[];
+  metadata?: Record<string, unknown>;
+  i18n?: (i18n: string) => string;
+  onClick?: (data: any, operation: Operation<Data>) => void;
+  manualFaceted?: boolean;
+  onChange?: (query: TableState) => void;
+  pageSizes?: number[];
+}
+
+export function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {
+  const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
+  const i18n = props.i18n || ((f: string) => f);
+
+  // const [pagination, setPagination] = useState({
+  //   pageIndex: 0, //initial page index
+  //   pageSize: 10 //default page size
+  // });
+
+  const operations = props.operations.length
+    ? ([
+        {
+          id: "operations",
+          header: i18n("Operations"),
+          cell: (info) => (
+            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={i18n} />
+          )
+        }
+      ] satisfies ColumnDef<Data>[])
+    : [];
+
+  const tableInstance = useReactTable({
+    ...props,
+    columns: [...props.columns, ...operations],
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,
+    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,
+    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting
+    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
+  });
+
+  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =
+    tableInstance.getState();
+
+  useEffect(() => {
+    if (props.onChange) {
+      props.onChange(tableInstance.getState());
+    }
+  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);
+
+  return {
+    i18n,
+    tableInstance
+  };
+}

package/src/molecules/table/hooks/useUniqValues.tsx

@@ -0,0 +1,10 @@
+import type { Header } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+export function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {
+  return useMemo(
+    () => (filterVariant === "range" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),
+
+    [header.column, filterVariant]
+  );
+}

package/src/molecules/table/interfaces/extends.ts

@@ -0,0 +1,18 @@
+import type { RowData } from "@tanstack/react-table";
+import { TdHTMLAttributes } from "react";
+
+import { FilterOptions } from "../filters/Filters";
+
+declare module "@tanstack/react-table" {
+  //allows us to define custom properties for our columns
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filter?: FilterOptions;
+    sort?: string;
+    cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+    /**
+     * Hide the cell
+     */
+    hidden?: boolean;
+  }
+}