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

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>;
+}

package/src/molecules/tabs/hooks/tabControl.spec.tsx

@@ -0,0 +1,388 @@
+import { act, render, renderHook, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { type PropsWithChildren, useContext, useRef } from "react";
+
+import { TabControlContext, TabsProvider } from "../context/TabControl";
+import { Tab } from "../Tab.js";
+import { useActiveTab, useRegisterTabControl, useTabControls, useTabDispatch } from "./tabControl";
+
+interface Config {
+  selected: number;
+}
+
+const createWrapper = ({ selected }: Config = { selected: 3 }) => {
+  return ({ children }: PropsWithChildren) => {
+    return <TabsProvider selected={selected}>{children}</TabsProvider>;
+  };
+};
+
+describe("tab control hooks", () => {
+  beforeAll(() => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    vi.mocked(console.warn).mockReset();
+  });
+
+  describe("useActiveTab()", () => {
+    it("returns the current tab value", () => {
+      const { result } = renderHook(useActiveTab, { wrapper: createWrapper() });
+
+      expect(result.current).toBe(3);
+    });
+  });
+
+  describe("useRegisterTabControl()", () => {
+    it("returns the dispatch function", () => {
+      const { result } = renderHook(() => useRegisterTabControl({ value: 0, ref: useRef(null) }), {
+        wrapper: createWrapper()
+      });
+
+      expect(result.current).toEqual(expect.any(Function));
+    });
+
+    it("register and unregister", () => {
+      const { result, unmount } = renderHook(() => {
+        const div = document.createElement("div");
+
+        return useRegisterTabControl({ value: 0, ref: useRef<HTMLDivElement>(div) });
+      });
+
+      unmount();
+
+      expect(result.current).toEqual(expect.any(Function));
+    });
+
+    describe("without provider", () => {
+      it("log a warning", async () => {
+        const { result, unmount } = renderHook(() => {
+          const div = document.createElement("div");
+          return useRegisterTabControl({ value: 0, ref: useRef<HTMLDivElement>(div) });
+        });
+
+        await act(() => result.current({ type: "update", payload: 4 }));
+
+        unmount();
+
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context dispatch used outside of Provider");
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context register used outside of Provider");
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context unregister used outside of Provider");
+      });
+    });
+  });
+
+  describe("useTabDispatch()", () => {
+    it("returns the dispatch function", () => {
+      const { result } = renderHook(useTabDispatch, {
+        wrapper: createWrapper()
+      });
+
+      expect(result.current).toEqual(expect.any(Function));
+    });
+
+    describe("without provider", () => {
+      it("log a warning", async () => {
+        const { result } = renderHook(useTabDispatch);
+
+        await act(() => result.current({ type: "update", payload: 4 }));
+
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context dispatch used outside of Provider");
+      });
+    });
+
+    describe("dispatch update", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const update = () => {
+            dispatch({ type: "update", payload: 4 });
+          };
+
+          return (
+            <>
+              <button onClick={update}>update</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("4");
+      });
+    });
+
+    describe("dispatch end", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const end = () => {
+            dispatch({ type: "end" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={5}>Label 5</Tab>
+
+              <button onClick={end}>end</button>
+
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+        expect(output).toHaveValue("5");
+      });
+    });
+
+    describe("dispatch start", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const start = () => {
+            dispatch({ type: "start" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={5}>Label 5</Tab>
+              <button onClick={start}>start</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("0");
+      });
+    });
+
+    describe("dispatch next", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const next = () => {
+            dispatch({ type: "next" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={4}>Label 4</Tab>
+              <Tab value={5}>Label 5</Tab>
+              <button onClick={next}>next</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("4");
+      });
+
+      describe("when current tab is last one", () => {
+        it("loop to the first tab", async () => {
+          const Test = () => {
+            const dispatch = useTabDispatch();
+            const tab = useActiveTab();
+
+            const next = () => {
+              dispatch({ type: "next" });
+            };
+
+            return (
+              <>
+                <Tab value={0}>Label 0</Tab>
+                <Tab value={3}>Label 3</Tab>
+                <Tab value={4}>Label 4</Tab>
+                <Tab value={5}>Label 5</Tab>
+                <button onClick={next}>next</button>
+                <output name='result'>{tab}</output>
+              </>
+            );
+          };
+
+          render(<Test />, { wrapper: createWrapper({ selected: 5 }) });
+
+          const button = screen.getByRole("button");
+          const output = screen.getByRole("status");
+
+          expect(output).toHaveValue("5");
+
+          await userEvent.click(button);
+
+          expect(output).toHaveValue("0");
+        });
+      });
+    });
+
+    describe("dispatch previous", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const previous = () => {
+            dispatch({ type: "previous" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={2}>Label 2</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={4}>Label 4</Tab>
+              <Tab value={5}>Label 5</Tab>
+              <button onClick={previous}>previous</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("2");
+      });
+
+      describe("when current tab is first one", () => {
+        it("loop to the last tab", async () => {
+          const Test = () => {
+            const dispatch = useTabDispatch();
+            const tab = useActiveTab();
+
+            const previous = () => {
+              dispatch({ type: "previous" });
+            };
+
+            return (
+              <>
+                <Tab value={0}>Label 0</Tab>
+                <Tab value={2}>Label 2</Tab>
+                <Tab value={3}>Label 3</Tab>
+                <Tab value={4}>Label 4</Tab>
+                <Tab value={5}>Label 5</Tab>
+                <button onClick={previous}>previous</button>
+                <output name='result'>{tab}</output>
+              </>
+            );
+          };
+
+          render(<Test />, { wrapper: createWrapper({ selected: 0 }) });
+
+          const button = screen.getByRole("button");
+          const output = screen.getByRole("status");
+
+          expect(output).toHaveValue("0");
+
+          await userEvent.click(button);
+
+          expect(output).toHaveValue("5");
+        });
+      });
+    });
+  });
+
+  describe("useTabControl()", () => {
+    it("retuns the elements registered map", () => {
+      const Test = () => {
+        const div = document.createElement("div");
+        const ref = useRef(div);
+
+        useRegisterTabControl({ value: 0, ref });
+
+        const controls = useTabControls();
+
+        return <output name='result'>{controls.size}</output>;
+      };
+
+      render(<Test />, { wrapper: createWrapper() });
+
+      const output = screen.getByRole("status");
+
+      expect(output).toHaveValue("1");
+    });
+
+    it("allow unregister", async () => {
+      const Test = () => {
+        const div = document.createElement("div");
+        const ref = useRef(div);
+
+        const { register, unregister } = useContext(TabControlContext);
+        const controls = useTabControls();
+
+        return (
+          <>
+            <button onClick={() => register(0, ref)}>REGISTER</button>
+            <button onClick={() => unregister(0)}>UNREGISTER</button>
+            <output name='result'>{controls.size}</output>
+          </>
+        );
+      };
+
+      render(<Test />, { wrapper: createWrapper() });
+
+      const register = screen.getByRole("button", { name: "REGISTER" });
+      const unregister = screen.getByRole("button", { name: "UNREGISTER" });
+
+      await userEvent.click(register);
+
+      expect(screen.getByRole("status")).toHaveValue("1");
+
+      await userEvent.click(unregister);
+
+      expect(screen.getByRole("status")).toHaveValue("0");
+    });
+  });
+});

package/src/molecules/tabs/hooks/tabControl.ts

@@ -0,0 +1,52 @@
+import { type RefObject, useContext, useEffect } from "react";
+
+import { TabControlContext } from "../context/TabControl";
+
+export const useActiveTab = () => {
+  const { value } = useContext(TabControlContext);
+
+  return value;
+};
+
+export const useTabDispatch = () => {
+  const { dispatch } = useContext(TabControlContext);
+
+  return dispatch;
+};
+
+export const useTabsUid = () => {
+  const { uid } = useContext(TabControlContext);
+
+  return uid;
+};
+
+interface Props<T extends HTMLElement> {
+  value: number;
+  ref: RefObject<T>;
+}
+
+export function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>) {
+  const { dispatch, register, unregister } = useContext(TabControlContext);
+
+  useEffect(() => {
+    register(value, ref);
+
+    return () => {
+      unregister(value);
+    };
+  }, [value, ref, register, unregister]);
+
+  return dispatch;
+}
+
+export const useTabControls = () => {
+  const { refs } = useContext(TabControlContext);
+
+  return refs;
+};
+
+export const useActiveTabControl = () => {
+  const { value, refs } = useContext(TabControlContext);
+
+  return [value, refs.get(value)] as const;
+};

package/src/organisms/__fixtures__/WrapComponent.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren, useRef } from "react";
+
+export function WrapComponent({ children }: PropsWithChildren<any>) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div data-testid='formio-container' ref={ref}>
+      {children(ref)}
+    </div>
+  );
+}