@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

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

@@ -0,0 +1,272 @@
+import "./all";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+
+import { SubmissionType } from "../../interfaces";
+import FormType from "../__fixtures__/form-schema.json";
+import formSubmissions from "../__fixtures__/form-submissions.json";
+import { Table } from "./Table";
+import { mapFormToColumns } from "./utils/mapFormToColumns";
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+type ProductSubmission = SubmissionType<{
+  id: string;
+  label: string;
+  description: string;
+  image: string;
+  price?: number;
+  currency?: string;
+}>;
+
+export default {
+  title: "Table",
+  component: Table,
+  argTypes: {
+    onClick: {
+      description: "Click event",
+      action: "onClick"
+    },
+    onChange: {
+      description: "Change event",
+      action: "onChange"
+    }
+  },
+  parameters: {}
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table<ProductSubmission>>;
+
+export const Usage: Story = {
+  args: {
+    data: formSubmissions as ProductSubmission[],
+    columns: mapFormToColumns(FormType as any),
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver({ data }: any) {
+          return data.id === "CSKC";
+        }
+      }
+    ],
+    i18n: (f: string) => f,
+    onClick: fn(),
+    onChange: fn()
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+
+    // check headers information
+    await expect(canvas.getByTestId("head-cell-data_id")).toHaveTextContent("Id");
+    await expect(canvas.getByTestId("head-cell-data_label")).toHaveTextContent("Label");
+
+    // check body information
+    await expect(canvas.getByTestId("body-row-0")).toBeDefined();
+    await expect(canvas.getByTestId("body-cell-0_data_id")).toHaveTextContent("CSKC");
+    await expect(canvas.getByTestId("body-cell-0_data_label")).toHaveTextContent("Cap Skirring");
+
+    const editButton = canvas.getByTestId("operation-0-edit");
+
+    await userEvent.click(editButton);
+
+    await expect(args.onClick).toHaveBeenCalledWith(formSubmissions[0], args.operations[0]);
+
+    const deleteButton = canvas.getByTestId("operation-0-delete");
+
+    await userEvent.click(deleteButton);
+    await expect(args.onClick).toHaveBeenCalledWith(formSubmissions[0], args.operations[1]);
+
+    await expect(canvas.queryByTestId("operation-1-delete")).not.toBeInTheDocument();
+
+    // check sorting
+    const sortId = canvas.getByTestId("head-sort-data_id");
+    const thId = canvas.getByTestId("head-cell-data_id");
+
+    await userEvent.click(sortId, { delay: 200 });
+
+    await expect(args.onChange).toHaveBeenCalledWith({
+      columnSizing: {},
+      columnSizingInfo: {
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        isResizingColumn: false,
+        columnSizingStart: []
+      },
+      rowSelection: {},
+      rowPinning: { top: [], bottom: [] },
+      expanded: {},
+      grouping: [],
+      sorting: [],
+      columnFilters: [],
+      columnPinning: { left: [], right: [] },
+      columnOrder: [],
+      columnVisibility: {},
+      pagination: { pageIndex: 0, pageSize: 10 }
+    });
+
+    await expect(sortId).toHaveAttribute("aria-pressed", "false");
+    await expect(thId).toHaveAttribute("aria-sort", "ascending");
+
+    await userEvent.click(sortId, { delay: 200 });
+
+    await expect(sortId).toHaveAttribute("aria-pressed", "true");
+    await expect(thId).toHaveAttribute("aria-sort", "descending");
+
+    await userEvent.click(sortId, { delay: 200 });
+
+    await expect(sortId).not.toHaveAttribute("aria-pressed");
+    await expect(thId).toHaveAttribute("aria-sort", "none");
+
+    // check filtering
+    const filterLabel = canvas.getByTestId("input_filter_data_label");
+
+    await userEvent.type(filterLabel, "La caravelle", { delay: 200 });
+
+    await waitFor(() => {
+      return expect(canvas.queryByText("MPEC")).not.toBeInTheDocument();
+    });
+
+    await expect(canvas.getByText("La Caravelle")).toBeInTheDocument();
+
+    await delay(300);
+
+    await userEvent.clear(filterLabel);
+  }
+};
+
+export const WithFilters: Story = {
+  args: {
+    data: formSubmissions as ProductSubmission[],
+    columns: mapFormToColumns(FormType as any, [
+      {
+        accessorKey: "data.id",
+        meta: {
+          filter: {
+            variant: "select",
+            layout: "react"
+          }
+        }
+      }
+    ]),
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver({ data }: any) {
+          return data.id === "MPEC";
+        }
+      }
+    ],
+    i18n: (f: string) => f,
+    onClick: fn()
+  }
+};
+
+export const WithCustomCell: Story = {
+  args: {
+    data: formSubmissions as ProductSubmission[],
+    columns: mapFormToColumns<ProductSubmission>(FormType as any, [
+      {
+        accessorKey: "data.id",
+        meta: {
+          filter: {
+            variant: "select",
+            layout: "react"
+          },
+          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>
+          );
+        }
+      },
+      {
+        accessorKey: "data.label",
+        meta: {
+          hidden: true
+        }
+      },
+      {
+        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>
+          );
+        }
+      }
+    ]),
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver({ data }: any) {
+          return data.id === "MPEC";
+        }
+      }
+    ],
+    i18n: (f: string) => f,
+    onClick: fn()
+  }
+};

package/src/molecules/table/Table.tsx

@@ -0,0 +1,100 @@
+import { flexRender, RowData } from "@tanstack/react-table";
+import cx from "classnames";
+import { PropsWithChildren } from "react";
+
+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 RowData = any> extends UseTableProps<Data> {
+  className?: string;
+
+  enableFooter?: boolean;
+
+  pageSizes?: number[];
+}
+
+export function Table<Data extends RowData = any>({ className, enableFooter, children, ...props }: PropsWithChildren<TableProps<Data>>) {
+  const { tableInstance, i18n } = useTable(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)}
+          />
+        )}
+        <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,42 @@
+import type { CellContext } from "@tanstack/react-table";
+
+import type { Operation } from "../../../interfaces";
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { DefaultOperationButton } from "./DefaultOperationButton";
+
+export interface DefaultCellOperationsProps<Data = any> {
+  info: CellContext<Data, unknown>;
+  operations: Operation<Data>[];
+  metadata?: Record<string, unknown>;
+  i18n: (i18n: string) => string;
+  onClick?: (data: any, operation: Operation<Data>) => void;
+}
+
+export function DefaultCellOperations({ info, metadata, operations, i18n, onClick }: DefaultCellOperationsProps) {
+  const Button = getComponent<typeof DefaultOperationButton>("OperationButton");
+  return (
+    <div className='btn-group'>
+      {operations
+        .filter(({ permissionsResolver }) => {
+          return !permissionsResolver || permissionsResolver(info.row.original, metadata);
+        })
+        .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,40 @@
+import { CellContext } from "@tanstack/react-table";
+import cx from "classnames";
+import { HTMLAttributes } from "react";
+
+import { Operation } from "../../../interfaces";
+import { registerComponent } from "../../../registries/components";
+import { iconClass } from "../../../utils/iconClass";
+import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
+
+export interface OperationButtonProps<Data = any> extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+  operation: Operation<Data>;
+  info: CellContext<Data, unknown>;
+  metadata?: Record<string, unknown>;
+  onClick: () => void;
+  i18n?: (i18n: string) => string;
+}
+
+export function DefaultOperationButton(props: OperationButtonProps) {
+  // 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;