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

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"));
   });
 });

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

@@ -1,141 +1,374 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
+import "./all.js";
 
-import { Tabs } from "./Tabs";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-const useTabs = (args: any) => {
-  const [current, onClick] = useState(args.value);
-
-  return {
-    ...args,
-    current,
-    onClick
-  };
-};
+import { Icon } from "../../atoms/icon/Icon.js";
+import { Button } from "../button/Button.js";
+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";
 
 /**
- * Tabs component
+ * Tabs component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Tabs} from "@tsed/react-formio/molecules/tabs/all"
+ *
+ * or
+ *
+ * import {Tabs} from "@tsed/react-formio/molecules/tabs/Tabs";
+ * ```
+ *
+ * Tabs component support DI container and can be used with custom component. Here is the list of components that you can override:
+ *
+ * - Tab
+ * - TabList
+ * - TabPanel
+ * - Tabs
+ * - TabsBody
  *
  * ```tsx
- * import {Modal} from "@tsed/react-formio/molecules/tabs/Tabs";
+ * function CustomTab() {
+ *
+ * }
+ *
+ * registerComponent("Tab", CustomTab);
  * ```
  */
 export default {
   title: "Tabs",
   component: Tabs,
-  argTypes: {},
+  argTypes: {
+    reverse: {
+      control: "boolean",
+      description: "Reverse the order of the tabs"
+    },
+    selected: {
+      control: { type: "number", min: 0, max: 10 },
+      description: "Selected tab index"
+    },
+    items: {
+      control: "object",
+      description: "Array of tab items with label, icon, and content"
+    }
+  },
   parameters: {},
-  render: (args: any) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tabs = useTabs(args);
+  args: {}
+} satisfies Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Usage: Story = {
+  args: {
+    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: fn()
+  },
+
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Vérifie que tous les onglets sont présents
+    await expect(canvas.getByRole("tab", { name: "Edit" })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: "Data" })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: "Preview" })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: "Actions" })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: "Access" })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: "Export" })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: "Delete" })).toBeInTheDocument();
+
+    await waitFor(() => expect(canvas.getByRole("tabpanel")).toHaveTextContent("Edit"));
+
+    // Clique sur l'onglet "Preview" et vérifie le contenu
+    await userEvent.click(canvas.getByRole("tab", { name: "Preview" }));
+
+    await expect(args.onClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: "preview"
+      })
+    );
+
+    await waitFor(() => expect(canvas.getByRole("tabpanel")).toHaveTextContent("Preview"));
+
+    // Clique sur l'onglet "Delete" et vérifie le contenu
+    await userEvent.click(canvas.getByRole("tab", { name: "Delete" }));
+    await expect(args.onClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: "delete"
+      })
+    );
+
+    await waitFor(() => expect(canvas.getByRole("tabpanel")).toHaveTextContent("Trash"));
+  },
+
+  render: (args) => {
+    const items: any[] = args.items.filter((item: any) => item.label || item.icon);
 
     return (
       <div className={"border-gray-300 border-1 shadow"}>
-        <Tabs {...tabs} i18n={(f) => f}>
-          <div className={"p-5"}>{tabs?.current?.action}</div>
+        <Tabs selected={args.selected}>
+          <TabList>
+            {items.map((item, index) => {
+              return (
+                <Tab
+                  onClick={() => args.onClick(item)}
+                  key={index}
+                  icon={item.icon}
+                  value={index}
+                  className={args.reverse ? "-reverse" : ""}
+                >
+                  {item.label}
+                </Tab>
+              );
+            })}
+          </TabList>
+          <TabsBody>
+            {items.map((item, index) => {
+              return (
+                <TabPanel key={index} value={index}>
+                  {item.children}
+                </TabPanel>
+              );
+            })}
+          </TabsBody>
         </Tabs>
       </div>
     );
   }
-} satisfies Meta<typeof Tabs>;
-
-type Story = StoryObj<typeof Tabs>;
+};
 
-export const Sandbox: Story = {
+export const WithSelectedTab: Story = {
   args: {
+    selected: 2,
+    reverse: false,
     items: [
-      {
-        action: "back",
-        exact: true,
-        icon: "chevron-left",
-        back: true
-      },
       {
         action: "edit",
         exact: true,
         icon: "edit",
-        label: "Edit"
+        label: "Edit",
+        children: <div className='bg-red-100 p-5'>Edit</div>
       },
       {
         action: "submissions",
         exact: false,
         icon: "data",
-        label: "Data"
+        label: "Data",
+        children: <div className='bg-orange-100 p-5'>Data</div>
       },
       {
         action: "preview",
         exact: true,
         icon: "test-tube",
-        label: "Preview"
+        label: "Preview",
+        children: <div className='bg-yellow-100 p-5'>Preview</div>
       },
       {
         action: "actions",
         exact: false,
         icon: "paper-plane",
-        label: "Actions"
+        label: "Actions",
+        children: <div className='bg-green-100 p-5'>Actions</div>
       },
       {
         action: "access",
         exact: true,
         icon: "lock",
-        label: "Access"
+        label: "Access",
+        children: <div className='bg-blue-100 p-5'>Access</div>
       },
       {
         action: "export",
         exact: true,
         icon: "download",
-        label: "Export"
+        label: "Export",
+        children: <div className='bg-purple-100 p-5'>Export</div>
       },
       {
         action: "delete",
         exact: true,
         icon: "trash",
         label: "Delete",
-        roles: ["administrator", "owner"]
+        roles: ["administrator", "owner"],
+        children: <div className='bg-gray-100 p-5'>Trash</div>
       }
     ]
-  }
-};
-
-function AddButton({ onCreate }: any) {
-  return (
-    <div>
-      <button onClick={onCreate}>+</button>
-    </div>
-  );
-}
-
-function HeaderChildren() {
-  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
-}
-
-export const WithCloseable = {
-  render: (args: any) => {
-    args.value = args.value === undefined ? 0 : args.value;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tabs = useTabs(args);
+  },
+  render: (args) => {
+    const items: any[] = args.items.filter((item: any) => item.label || item.icon);
 
     return (
       <div className={"border-gray-300 border-1 shadow"}>
-        <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
-          <div className={"p-5"}>{tabs?.current?.action}</div>
+        <Tabs selected={args.selected}>
+          <TabList>
+            {items.map((item, index) => {
+              return (
+                <Tab key={index} icon={item.icon} value={index}>
+                  {item.label}
+                </Tab>
+              );
+            })}
+          </TabList>
+          <TabsBody>
+            {items.map((item, index) => {
+              return (
+                <TabPanel key={index} value={index}>
+                  {item.children}
+                </TabPanel>
+              );
+            })}
+          </TabsBody>
         </Tabs>
       </div>
     );
-  },
+  }
+};
+
+export const WithExtraControls: Story = {
   args: {
-    reverse: true,
+    reverse: false,
     items: [
       {
+        action: "edit",
         exact: true,
-        action: 0,
-        label: "Test (0)"
+        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,
-        action: 1,
-        label: "Test (1)"
+        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>
       }
     ]
+  },
+  render: (args) => {
+    const items: any[] = args.items.filter((item: any) => item.label || item.icon);
+
+    return (
+      <div className={"border-gray-300 border-1 shadow"}>
+        <Tabs selected={args.selected}>
+          <TabList>
+            <Button variant='link' aria-label='Previous tab'>
+              <Icon name='chevron-left' />
+            </Button>
+
+            {items.map((item, index) => {
+              return (
+                <Tab key={index} icon={item.icon} value={index} className={args.reverse ? "-reverse" : ""}>
+                  {item.label}
+                </Tab>
+              );
+            })}
+            <Button variant='link' aria-label='Add tab'>
+              <Icon name='plus' />
+            </Button>
+          </TabList>
+          <TabsBody>
+            {items.map((item, index) => {
+              return (
+                <TabPanel key={index} value={index}>
+                  {item.children}
+                </TabPanel>
+              );
+            })}
+          </TabsBody>
+        </Tabs>
+      </div>
+    );
   }
 };