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

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,76 @@
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type TableOptions,
+  type TableState,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect } from "react";
+
+import { useI18n } from "../../../hooks/useI18n.js";
+import { type FormOptions, 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?: FormOptions["i18n"];
+  onClick?: (data: Data, 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 { t } = useI18n(props.i18n);
+
+  // const [pagination, setPagination] = useState({
+  //   pageIndex: 0, //initial page index
+  //   pageSize: 10 //default page size
+  // });
+
+  const operations = props.operations.length
+    ? ([
+        {
+          id: "operations",
+          header: t("Operations"),
+          cell: (info) => (
+            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />
+          )
+        }
+      ] 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: t,
+    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;
+  }
+}

package/src/molecules/table/utils/mapFormToColumns.tsx

@@ -1,32 +1,75 @@
-import { Components, Utils } from "formiojs";
+import "../interfaces/extends";
+
+import { Components } from "@formio/js";
+import { ColumnDef, ColumnDefResolved, createColumnHelper } from "@tanstack/react-table";
+import cloneDeep from "lodash/cloneDeep";
+import get from "lodash/get";
 
 import type { ComponentType, FormType } from "../../../interfaces";
-import { DefaultCell } from "../components/DefaultCell";
-import { SelectColumnFilter } from "../filters/SelectColumnFilter";
-import { ExtendedColumn } from "../hooks/useCustomTable";
-
-export function mapFormToColumns(form: FormType): ExtendedColumn[] {
-  const columns: ExtendedColumn[] = [];
-
-  Utils.eachComponent(form.components, (component: ComponentType) => {
-    if (component.tableView && component.key) {
-      const cmp: any = Components.create(component, {}, null, true);
-
-      const column: ExtendedColumn = {
-        Header: component.label || component.title || component.key,
-        accessor: `data.${component.key}`,
-        className: "text-center",
-        Cell: (props: any) => <DefaultCell {...props} render={(value: any) => cmp.asString(value)} />
-      };
-
-      if (component.type === "select" && component.dataSrc === "values") {
-        (column as any).Filter = SelectColumnFilter;
-        (column as any).choices = component.data.values;
+import { getComponent } from "../../../registries/components";
+import type { DefaultCell } from "../components/DefaultCell";
+import type { FilterVariants } from "../filters/Filters.js";
+
+const MAP_TYPES: Record<string, FilterVariants> = {
+  number: "range",
+  currency: "range",
+  checkbox: "boolean"
+};
+
+export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {
+  const columnHelper = createColumnHelper<Data>();
+  const columnsToKeep = cloneDeep(columns);
+
+  const Cell = getComponent<typeof DefaultCell>("Cell");
+
+  const columnsFromComponents = form.components
+    .flatMap((component) => {
+      if (component.type === "tabs") {
+        return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);
       }
 
-      columns.push(column);
-    }
-  });
+      return [component];
+    })
+    .filter((component) => component?.tableView)
+    .map((c) => {
+      const component = c as ComponentType;
+      const cmp: any = Components.create(component, {}, null);
+
+      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
+        return accessorKey === `data.${component.key}`;
+      });
+
+      let column = columnsToKeep[columnIndex];
+
+      if (column) {
+        columnsToKeep.splice(columnIndex, 1);
+      }
+
+      return columnHelper.accessor(`data.${component.key}` as any, {
+        header: (component.label || component.title || component.key)?.replace(/:/, ""),
+        cell: (info) => {
+          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;
+        },
+        meta: {
+          filter: { variant: MAP_TYPES[component.type!] || "text" },
+          ...(column?.meta || {})
+        },
+        ...(column || {})
+      });
+    });
+
+  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({
+    ...column,
+    meta: {
+      ...(column.meta || {}),
+      order: get(column, "meta.order", index * 10)
+    },
+    cell:
+      column.cell ||
+      ((info) => {
+        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;
+      })
+  }));
 
-  return columns;
+  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];
 }

package/src/molecules/tabs/Tab.tsx

@@ -0,0 +1,106 @@
+import classnames from "classnames";
+import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
+
+import { useKeyboardControls } from "../../hooks/useKeyboardControls.js";
+import { registerComponent } from "../../registries/components.js";
+import { iconClass } from "../../utils/iconClass.js";
+import { useActiveTab, useRegisterTabControl, useTabsUid } from "./hooks/tabControl.js";
+
+export interface TabProps {
+  icon?: string;
+  isActive?: boolean;
+  className?: string;
+  after?: React.ReactNode;
+  value: number;
+  /**
+   * on tab select handler
+   */
+  onClick?: (value: number) => void;
+}
+
+export function Tab({ onClick, icon, value, children, className, after }: PropsWithChildren<TabProps>) {
+  const uid = useTabsUid();
+  const ref = useRef<HTMLButtonElement>(null);
+  const activeTab = useActiveTab();
+  const dispatch = useRegisterTabControl({ value, ref });
+  const previousActiveTab = useRef(activeTab);
+
+  const isActive = useRef(activeTab === value);
+  isActive.current = activeTab === value;
+
+  useEffect(() => {
+    if (previousActiveTab.current !== activeTab && value === activeTab) {
+      ref.current?.focus();
+      onClick?.(value);
+    }
+    if (previousActiveTab.current !== activeTab) {
+      previousActiveTab.current = activeTab;
+    }
+  }, [value, onClick, activeTab]);
+
+  const start = useCallback(() => {
+    dispatch({ type: "start" });
+  }, [dispatch]);
+
+  const end = useCallback(() => {
+    dispatch({ type: "end" });
+  }, [dispatch]);
+
+  const up = useCallback(() => {
+    dispatch({ type: "previous" });
+  }, [dispatch]);
+
+  const down = useCallback(() => {
+    dispatch({ type: "next" });
+  }, [dispatch]);
+
+  const left = useCallback(() => {
+    const isRTL = document.documentElement.dir === "rtl";
+
+    dispatch({ type: isRTL ? "next" : "previous" });
+  }, [dispatch]);
+
+  const right = useCallback(() => {
+    const isRTL = document.documentElement.dir === "rtl";
+
+    dispatch({ type: isRTL ? "previous" : "next" });
+  }, [dispatch]);
+
+  const handleKeyDown = useKeyboardControls({
+    start,
+    end,
+    up,
+    down,
+    left,
+    right
+  });
+
+  const handleClick = useCallback(() => {
+    dispatch({ type: "update", payload: value });
+  }, [dispatch, value]);
+
+  return (
+    <div title={"button-wrapper"} className={classnames("tw-tabs__button-wrapper", className, { "-active": isActive.current }, className)}>
+      <button
+        ref={ref}
+        id={`Tab_${value}_${uid}`}
+        data-name='Tab'
+        title='button-tab'
+        role='tab'
+        aria-selected={isActive.current}
+        aria-controls={`TabPanel_${value}_${uid}`}
+        tabIndex={isActive.current ? 0 : -1}
+        className={"tw-tabs__button"}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        {icon && <i className={classnames(iconClass(undefined, icon), "tw-tabs__button-icon")} />}
+        <span className={"tw-tabs__button-label"}>{children}</span>
+        {after}
+      </button>
+      <div className='tw-tabs__button-border' />
+    </div>
+  );
+}
+
+registerComponent("Tab", Tab);

package/src/molecules/tabs/TabList.tsx

@@ -0,0 +1,37 @@
+import { Children, isValidElement, PropsWithChildren, ReactNode } from "react";
+
+import { registerComponent } from "../../registries/components.js";
+
+export function TabList(props: PropsWithChildren<{}>) {
+  const before: ReactNode[] = [];
+  const after: ReactNode[] = [];
+  const items: ReactNode[] = [];
+
+  Children.forEach(props.children, (child) => {
+    if (isValidElement(child)) {
+      if ((child.type as any)?.name === "Tab") {
+        items.push(child);
+        return;
+      }
+    }
+
+    if (items.length > 0) {
+      after.push(child);
+    } else {
+      before.push(child);
+    }
+  });
+
+  return (
+    <nav className='tw-tabs__header'>
+      <div className='tw-tabs__header-wrapper'>
+        <div className='tw-tabs__header-border' />
+        {before}
+        <div role='tablist'>{items}</div>
+        {after}
+      </div>
+    </nav>
+  );
+}
+
+registerComponent("TabList", TabList);

package/src/molecules/tabs/TabPanel.tsx

@@ -0,0 +1,37 @@
+import classnames from "classnames";
+
+import { registerComponent } from "../../registries/components.js";
+import { useActiveTab, useTabsUid } from "./hooks/tabControl.js";
+
+export interface TabPanelProps {
+  className?: string;
+  /**
+   * Tab panel index<br/>
+   * _Can be **0** or **1** indexed_
+   */
+  value: number;
+}
+
+export function TabPanel({ value, className, children }: React.PropsWithChildren<TabPanelProps>) {
+  const tabSelected = useActiveTab();
+  const uid = useTabsUid();
+  const isActive = tabSelected === value;
+
+  return (
+    <div
+      id={`TabPanel_${value}_${uid}`}
+      data-name={`TabPanel_${value}`}
+      role='tabpanel'
+      aria-hidden={!isActive}
+      aria-labelledby={`Tab_${value}_${uid}`}
+      tabIndex={isActive ? 0 : -1}
+      className={classnames("tw-tabs__panel", className, {
+        "-active": isActive
+      })}
+    >
+      {children}
+    </div>
+  );
+}
+
+registerComponent("TabPanel", TabPanel);

package/src/molecules/tabs/Tabs.spec.tsx

@@ -1,87 +1,140 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import { expect, vi } from "vitest";
 
-import { Tabs } from "./Tabs";
-import { Sandbox } from "./Tabs.stories";
+import { Tab } from "./Tab.js";
+import { TabList } from "./TabList.js";
+import { TabPanel } from "./TabPanel.js";
+import { Tabs } from "./Tabs.js";
+import { TabsBody } from "./TabsBody.js";
+
+const props = {
+  reverse: false,
+  items: [
+    {
+      action: "edit",
+      exact: true,
+      icon: "edit",
+      label: "Edit",
+      children: <div className='bg-red-100 p-5'>Edit</div>
+    },
+    {
+      action: "submissions",
+      exact: false,
+      icon: "data",
+      label: "Data",
+      children: <div className='bg-orange-100 p-5'>Data</div>
+    },
+    {
+      action: "preview",
+      exact: true,
+      icon: "test-tube",
+      label: "Preview",
+      children: <div className='bg-yellow-100 p-5'>Preview</div>
+    },
+    {
+      action: "actions",
+      exact: false,
+      icon: "paper-plane",
+      label: "Actions",
+      children: <div className='bg-green-100 p-5'>Actions</div>
+    },
+    {
+      action: "access",
+      exact: true,
+      icon: "lock",
+      label: "Access",
+      children: <div className='bg-blue-100 p-5'>Access</div>
+    },
+    {
+      action: "export",
+      exact: true,
+      icon: "download",
+      label: "Export",
+      children: <div className='bg-purple-100 p-5'>Export</div>
+    },
+    {
+      action: "delete",
+      exact: true,
+      icon: "trash",
+      label: "Delete",
+      roles: ["administrator", "owner"],
+      children: <div className='bg-gray-100 p-5'>Trash</div>
+    }
+  ],
+  onClick: vi.fn()
+};
+
+function TestComponent({
+  selected,
+  onClick,
+  reverse,
+  items
+}: {
+  selected?: number;
+  onClick?: (item: any) => void;
+  reverse?: boolean;
+  items: any[];
+}) {
+  return (
+    <Tabs selected={selected}>
+      <TabList>
+        {items.map((item, index) => {
+          return (
+            <Tab onClick={() => onClick?.(item)} key={index} icon={item.icon} value={index} className={reverse ? "-reverse" : ""}>
+              {item.label}
+            </Tab>
+          );
+        })}
+      </TabList>
+      <TabsBody>
+        {items.map((item, index) => {
+          return (
+            <TabPanel key={index} value={index}>
+              {item.children}
+            </TabPanel>
+          );
+        })}
+      </TabsBody>
+    </Tabs>
+  );
+}
 
 describe("<Tabs>", () => {
-  it("should display the tabs component and children", () => {
-    const items = [
-      {
-        action: "back",
-        exact: true,
-        icon: "chevron-left",
-        back: true
-      },
-      {
-        action: "edit",
-        exact: true,
-        icon: "edit",
-        label: "Edit"
-      }
-    ];
+  it("should display the tabs component and children", async () => {
+    render(<TestComponent {...props} />);
 
-    render(<Tabs {...Sandbox.args} items={items} />);
+    // Vérifie que tous les onglets sont présents
+    expect(screen.getByRole("tab", { name: "Edit" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Data" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Preview" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Actions" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Access" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Export" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Delete" })).toBeInTheDocument();
 
-    const tabsComponent = screen.getByTestId("tabs-comp");
+    await waitFor(() => expect(screen.getByRole("tabpanel")).toHaveTextContent("Edit"));
 
-    const buttonsTabWrapper = screen.getAllByTitle("button-wrapper");
-    const chevronLeftButtonTabWrapper = buttonsTabWrapper[0];
-    const editButtonTabWrapper = buttonsTabWrapper[1];
+    // Clique sur l'onglet "Preview" et vérifie le contenu
+    await userEvent.click(screen.getByRole("tab", { name: "Preview" }));
 
-    const buttonsTab = screen.getAllByTitle("button-tab");
-    const chevronLeftButtonTab = buttonsTab[0];
-    const editButtonTab = buttonsTab[1];
+    expect(props.onClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: "preview"
+      })
+    );
 
-    const fontAwsomeChevronLeftIcon = "fa fa-chevron-left";
-    const fontAwsomeEditIcon = "fa fa-edit";
+    await waitFor(() => expect(screen.getByRole("tabpanel")).toHaveTextContent("Preview"));
 
-    expect(tabsComponent).toBeInTheDocument();
+    // Clique sur l'onglet "Delete" et vérifie le contenu
+    await userEvent.click(screen.getByRole("tab", { name: "Delete" }));
 
-    expect(chevronLeftButtonTabWrapper).toContainElement(chevronLeftButtonTab);
-    expect(chevronLeftButtonTabWrapper).toContainHTML("-back");
-    expect(chevronLeftButtonTab).toBeInTheDocument();
-    expect(chevronLeftButtonTab).toContainHTML(fontAwsomeChevronLeftIcon);
-    expect(chevronLeftButtonTab).toHaveTextContent("");
+    expect(props.onClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: "delete"
+      })
+    );
 
-    expect(editButtonTabWrapper).toContainElement(editButtonTab);
-    expect(editButtonTabWrapper).not.toContainHTML("-back");
-    expect(editButtonTab).toBeInTheDocument();
-    expect(editButtonTab).toContainHTML(fontAwsomeEditIcon);
-    expect(editButtonTab).toHaveTextContent("Edit");
-  });
-
-  it("should call dispatcher when clicking on a button tab", () => {
-    const items = [
-      {
-        action: "back",
-        exact: true,
-        icon: "chevron-left",
-        back: true
-      },
-      {
-        action: "edit",
-        exact: true,
-        icon: "edit",
-        label: "Edit"
-      }
-    ];
-    const onClick = vi.fn();
-
-    render(<Tabs items={items} onClick={onClick} />);
-
-    const buttonsTab = screen.getAllByTitle("button-tab");
-    const chevronLeftButtonTab = buttonsTab[0];
-    const editButtonTab = buttonsTab[1];
-
-    fireEvent.click(chevronLeftButtonTab);
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(items[0]);
-
-    fireEvent.click(editButtonTab);
-
-    expect(onClick).toHaveBeenCalledTimes(2);
-    expect(onClick).toHaveBeenCalledWith(items[1]);
+    await waitFor(() => expect(screen.getByRole("tabpanel")).toHaveTextContent("Trash"));
   });
 });