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

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

@@ -1,141 +1,374 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-
-import { Tabs } from "./Tabs";
+import "./all.js";
 
-const useTabs = (args: any) => {
-  const [current, onClick] = useState(args.value);
+import { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
 
-  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,
+        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,
-        action: 0,
-        label: "Test (0)"
+        icon: "lock",
+        label: "Access",
+        children: <div className='bg-blue-100 p-5'>Access</div>
       },
       {
+        action: "export",
         exact: true,
-        action: 1,
-        label: "Test (1)"
+        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>
+    );
   }
 };

package/src/molecules/tabs/Tabs.tsx

@@ -1,92 +1,21 @@
 import classnames from "classnames";
-import { PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
 
-import { iconClass } from "../../utils/iconClass";
-
-export function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>) {
-  return (
-    <div
-      title={"button-wrapper"}
-      className={classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)}
-    >
-      <button
-        title={"button-tab"}
-        className={classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : "")}
-        onClick={onClick}
-      >
-        {icon && <i className={classnames(iconClass(undefined, icon), "tw-tabs__button-icon")} />}
-        <span className={"tw-tabs__button-label"}>{children}</span>
-        {after}
-      </button>
-      <div className={classnames("tw-tabs__button-border", isActive ? "-active" : "")} />
-    </div>
-  );
-}
-
-export interface TabsItemProps extends Record<string, any> {
-  label?: string;
-  icon?: string;
-}
+import { registerComponent } from "../../registries/components.js";
+import { TabsProvider } from "./context/TabControl.js";
 
 export interface TabsProps extends Record<string, any> {
-  headerChildren?: any;
-  AddButton?: any;
-  current?: TabsItemProps;
-  items?: TabsItemProps[];
-  style?: any;
+  style?: CSSProperties;
   className?: string;
-  reverse?: boolean;
-  Button?: any;
-  onClick?: (item: TabsItemProps) => void;
-  i18n?: (f: string) => string;
+  selected?: number;
 }
 
-export function Tabs({
-  style,
-  current,
-  items = [],
-  children,
-  HeaderChildren,
-  AddButton,
-  Button = ButtonTab,
-  className,
-  onClick,
-  i18n = (f) => f,
-  ...additionalProps
-}: PropsWithChildren<TabsProps>) {
+export function Tabs({ style, selected, children, className }: PropsWithChildren<TabsProps>) {
   return (
-    <div data-testid={"tabs-comp"} className={`tw-tabs ${className}`} style={style}>
-      <div>
-        <nav className='tw-tabs__header'>
-          <div className='tw-tabs__header-wrapper'>
-            <div className='tw-tabs__header-border' />
-            {items
-              .filter((item) => item.label || item.icon)
-              .map((item, index) => {
-                return (
-                  <Button
-                    key={index}
-                    back={item.back}
-                    isActive={current?.action === item.action}
-                    exact={item.exact}
-                    onClick={() => {
-                      onClick && onClick(item);
-                    }}
-                    {...additionalProps}
-                    {...item}
-                  >
-                    {i18n(item.label || "")}
-                  </Button>
-                );
-              })}
-            {AddButton && <AddButton {...additionalProps} current={current} />}
-          </div>
-        </nav>
-        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}
-      </div>
-      <div title={"tab-body"} className={"tw-tabs__body"}>
-        {children}
-      </div>
+    <div data-testid={"Tabs"} className={classnames("tw-tabs", className)} style={style}>
+      <TabsProvider selected={selected}>{children}</TabsProvider>
     </div>
   );
 }
+
+registerComponent("Tabs", Tabs);

package/src/molecules/tabs/TabsBody.tsx

@@ -0,0 +1,11 @@
+import { registerComponent } from "../../registries/components.js";
+
+export function TabsBody(props: React.PropsWithChildren<{}>) {
+  return (
+    <div title={"tabs-body"} data-testid={"TabsBody"} className={"tw-tabs__body"}>
+      {props.children}
+    </div>
+  );
+}
+
+registerComponent("TabsBody", TabsBody);

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

@@ -0,0 +1,103 @@
+import "./all.js";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import { TabsLegacy } from "./TabsLegacy.js";
+
+/**
+ * TabsLegacy component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Tabs} from "@tsed/react-formio/molecules/tabs/TabsLegacy";
+ * ```
+ *
+ * TabsLegacy 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
+ * function CustomTab() {
+ *
+ * }
+ *
+ * registerComponent("Tab", CustomTab);
+ * ```
+ */
+export default {
+  title: "TabsLegacy",
+  component: TabsLegacy,
+  argTypes: {},
+  parameters: {},
+  render: (args: any) => {
+    return (
+      <div className={"border-gray-300 border-1 shadow"}>
+        <TabsLegacy {...args} i18n={(f) => f} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof TabsLegacy>;
+
+type Story = StoryObj<typeof TabsLegacy>;
+
+export const Sandbox: Story = {
+  args: {
+    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>
+      }
+    ]
+  }
+};