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

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-vite";
+
+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";

package/src/molecules/tabs/context/TabControl.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { createContext, type Dispatch, type PropsWithChildren, type RefObject, useCallback, useId, useReducer } from "react";
+
+type RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;
+type RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;
+
+type TabsUpdateAction = {
+  type: "update";
+  payload: number;
+};
+
+type TabsRegisterAction<T extends HTMLElement = HTMLElement> = {
+  type: "register";
+  payload: { value: number; ref: RefObject<T> };
+};
+
+type TabsUnregisterAction = {
+  type: "unregister";
+  payload: { value: number };
+};
+
+type TabsAction<T extends HTMLElement = HTMLElement> =
+  | { type: "start" | "end" | "previous" | "next" }
+  | TabsUpdateAction
+  | TabsRegisterAction<T>
+  | TabsUnregisterAction;
+
+interface TabsState<T extends HTMLElement = HTMLElement> {
+  uid: string;
+  value: number;
+  refs: RefTabs<T>;
+}
+
+interface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {
+  uid: string;
+  value: number;
+  refs: RefTabs<T>;
+  dispatch: Dispatch<TabsAction>;
+  register: (value: number, ref: RefTab<T>) => void;
+  unregister: (value: number) => void;
+}
+
+function next(state: TabsState) {
+  const keys = [...state.refs.keys()];
+  const index = keys.findIndex((value) => value === state.value);
+  const nextIndex = (index + 1) % keys.length;
+
+  return { ...state, value: keys[nextIndex] };
+}
+
+function previous(state: TabsState) {
+  const keys = [...state.refs.keys()];
+  const index = keys.findIndex((value) => value === state.value);
+  const previousIndex = (index - 1 + keys.length) % keys.length;
+
+  return { ...state, value: keys[previousIndex] };
+}
+
+function start(state: TabsState) {
+  const keys = [...state.refs.keys()];
+  const firstIndex = keys[0];
+
+  return {
+    ...state,
+    value: firstIndex
+  };
+}
+
+function end(state: TabsState) {
+  const keys = [...state.refs.keys()];
+  const lastIndex = keys[keys.length - 1];
+
+  return {
+    ...state,
+    value: lastIndex
+  };
+}
+
+function unregister(state: TabsState, action: TabsUnregisterAction) {
+  const deletedRefs = new Map(state.refs);
+  deletedRefs.delete(action.payload.value);
+
+  return {
+    ...state,
+    refs: deletedRefs
+  };
+}
+
+function register(state: TabsState, action: TabsRegisterAction) {
+  return {
+    ...state,
+    refs: new Map(state.refs).set(action.payload.value, action.payload.ref)
+  };
+}
+
+function update(state: TabsState, action: TabsUpdateAction) {
+  return { ...state, value: action.payload };
+}
+
+const actions = {
+  next,
+  previous,
+  start,
+  end,
+  register,
+  unregister,
+  update
+};
+
+function tabsReducer(state: TabsState, action: TabsAction): TabsState {
+  if (action.type in actions) {
+    const actionFunction = actions[action.type as keyof typeof actions] as (state: TabsState, action: TabsAction) => TabsState;
+
+    return actionFunction(state, action);
+  }
+
+  return state;
+}
+
+export const TabControlContext = createContext<TabControl>({
+  uid: "",
+  value: 0,
+  refs: new Map(),
+  dispatch: () => {
+    console.warn("Tab Controller Context dispatch used outside of Provider");
+  },
+  register: () => {
+    console.warn("Tab Controller Context register used outside of Provider");
+  },
+  unregister: () => {
+    console.warn("Tab Controller Context unregister used outside of Provider");
+  }
+});
+
+TabControlContext.displayName = "TabControlContext";
+
+export interface TabsProviderProps {
+  selected?: number;
+  /**
+   * The selected tab value
+   * @deprecated Min props as no effect on the Tabs component and will be removed in future versions
+   */
+  min?: number;
+
+  /**
+   * The selected tab value
+   * @deprecated Max props as no effect on the Tabs component and will be removed in future versions
+   */
+  max?: number;
+}
+
+export function TabsProvider({ selected = 0, children }: PropsWithChildren<TabsProviderProps>) {
+  const uid = useId();
+  const [state, dispatch] = useReducer(tabsReducer, { uid, value: selected, refs: new Map() });
+
+  const register = useCallback(<T extends HTMLElement>(value: number, ref: RefTab<T>) => {
+    dispatch({ type: "register", payload: { value, ref } });
+  }, []);
+
+  const unregister = useCallback((value: number) => {
+    dispatch({ type: "unregister", payload: { value } });
+  }, []);
+
+  return <TabControlContext.Provider value={{ ...state, dispatch, register, unregister }}>{children}</TabControlContext.Provider>;
+}