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

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

@@ -0,0 +1,74 @@
+import "../interfaces/extends";
+
+import { ColumnDef, ColumnDefResolved, createColumnHelper } from "@tanstack/react-table";
+import { Components } from "formiojs";
+import cloneDeep from "lodash/cloneDeep";
+import get from "lodash/get";
+
+import type { ComponentType, FormType } from "../../../interfaces";
+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);
+      }
+
+      return [component];
+    })
+    .filter((component) => component.tableView)
+    .map((component: ComponentType) => {
+      const cmp: any = Components.create(component, {}, null, true);
+
+      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 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

@@ -0,0 +1,140 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { expect, vi } from "vitest";
+
+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", async () => {
+    render(<TestComponent {...props} />);
+
+    // 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();
+
+    await waitFor(() => expect(screen.getByRole("tabpanel")).toHaveTextContent("Edit"));
+
+    // Clique sur l'onglet "Preview" et vérifie le contenu
+    await userEvent.click(screen.getByRole("tab", { name: "Preview" }));
+
+    expect(props.onClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: "preview"
+      })
+    );
+
+    await waitFor(() => expect(screen.getByRole("tabpanel")).toHaveTextContent("Preview"));
+
+    // Clique sur l'onglet "Delete" et vérifie le contenu
+    await userEvent.click(screen.getByRole("tab", { name: "Delete" }));
+
+    expect(props.onClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: "delete"
+      })
+    );
+
+    await waitFor(() => expect(screen.getByRole("tabpanel")).toHaveTextContent("Trash"));
+  });
+});