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

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

@@ -0,0 +1,374 @@
+import "./all.js";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+
+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.
+ *
+ * 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
+ * function CustomTab() {
+ *
+ * }
+ *
+ * registerComponent("Tab", CustomTab);
+ * ```
+ */
+export default {
+  title: "Tabs",
+  component: Tabs,
+  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: {},
+  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 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>
+    );
+  }
+};
+
+export const WithSelectedTab: Story = {
+  args: {
+    selected: 2,
+    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>
+      }
+    ]
+  },
+  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>
+            {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: 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>
+      }
+    ]
+  },
+  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

@@ -0,0 +1,21 @@
+import classnames from "classnames";
+import type { CSSProperties, PropsWithChildren } from "react";
+
+import { registerComponent } from "../../registries/components.js";
+import { TabsProvider } from "./context/TabControl.js";
+
+export interface TabsProps extends Record<string, any> {
+  style?: CSSProperties;
+  className?: string;
+  selected?: number;
+}
+
+export function Tabs({ style, selected, children, className }: PropsWithChildren<TabsProps>) {
+  return (
+    <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>
+      }
+    ]
+  }
+};

package/src/molecules/tabs/TabsLegacy.tsx

@@ -0,0 +1,84 @@
+import "./all.js";
+
+import { CSSProperties, ReactNode } from "react";
+
+import { getComponent } from "../../registries/components.js";
+import type { Tab as DefaultTab } from "./Tab.js";
+import type { TabList as DefaultTabList } from "./TabList.js";
+import type { TabPanel as DefaultTabPanel } from "./TabPanel.js";
+import type { Tabs as DefaultTabs } from "./Tabs.js";
+import type { TabsBody as DefaultTabsBody } from "./TabsBody.js";
+
+export interface TabsItemProps extends Record<string, any> {
+  label?: string;
+  icon?: string;
+  children?: ReactNode;
+}
+
+export interface TabsLegacyProps extends Record<string, any> {
+  AddButton?: any;
+  current?: TabsItemProps;
+  items?: TabsItemProps[];
+  style?: CSSProperties;
+  className?: string;
+  reverse?: boolean;
+  onClick?: (item: TabsItemProps) => void;
+  i18n?: (f: string) => string;
+}
+
+export function TabsLegacy({
+  style,
+  current,
+  items = [],
+  HeaderChildren,
+  AddButton,
+  className,
+  onClick,
+  i18n = (f) => f,
+  reverse,
+  after,
+  ...additionalProps
+}: TabsLegacyProps) {
+  const Tab = getComponent<typeof DefaultTab>("Tab");
+  const TabsBody = getComponent<typeof DefaultTabsBody>("TabsBody");
+  const TabList = getComponent<typeof DefaultTabList>("TabList");
+  const TabPanel = getComponent<typeof DefaultTabPanel>("TabPanel");
+  const Tabs = getComponent<typeof DefaultTabs>("Tabs");
+  const tabs = items.filter((item) => item.label || item.icon);
+
+  return (
+    <Tabs className={className} style={style}>
+      <div>
+        <TabList>
+          {tabs.map((item, index) => {
+            return (
+              <Tab
+                key={index}
+                onClick={() => {
+                  onClick && onClick(item);
+                }}
+                icon={item.icon}
+                value={index}
+                className={reverse ? "-reverse" : ""}
+                after={after}
+              >
+                {i18n(item.label || "")}
+              </Tab>
+            );
+          })}
+          {AddButton && <AddButton {...additionalProps} current={current} />}
+        </TabList>
+        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}
+      </div>
+      <TabsBody>
+        {tabs.map((item, index) => {
+          return (
+            <TabPanel key={index} value={index}>
+              {item.children || item.content}
+            </TabPanel>
+          );
+        })}
+      </TabsBody>
+    </Tabs>
+  );
+}

package/src/molecules/tabs/all.ts

@@ -0,0 +1,5 @@
+export * from "./Tab";
+export * from "./TabList";
+export * from "./TabPanel";
+export * from "./Tabs";
+export * from "./TabsBody";