@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-rc.1",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.modern.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "tsed-source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
       "tsed-source": "./src/*",
+      "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
     }
   },
@@ -30,6 +30,7 @@
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",
+    "@tanstack/react-table": ">=8.20.6",
     "formiojs": ">=4.0.0",
     "lodash": ">=4.17.20",
     "moment": ">=2.30.1",
@@ -42,11 +43,12 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind-formio": "3.0.0-alpha.8",
-    "@tsed/typescript": "3.0.0-alpha.8",
+    "@tanstack/react-table": ">=8.20.6",
+    "@tsed/tailwind-formio": "3.0.0-rc.1",
+    "@tsed/typescript": "3.0.0-rc.1",
     "microbundle": "0.13.0",
-    "vite": "5.4.11",
-    "vitest": "2.1.8"
+    "vite": "7.1.5",
+    "vitest": "3.2.4"
   },
   "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {
@@ -55,6 +57,6 @@
   "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/react-formio",
   "author": "Romain Lenzotti",
   "publishConfig": {
-    "tag": "alpha"
+    "tag": "rc"
   }
 }

package/readme.md

@@ -1,5 +1,5 @@
 <p style="text-align: center" align="center">
- <a href="https://tsed.io" target="_blank"><img src="https://tsed.io/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
+ <a href="https://tsed.dev" target="_blank"><img src="https://tsed.dev/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
 </p>
 
 <div align="center">
@@ -14,11 +14,11 @@
 </div>
 
 <div align="center">
-  <a href="https://tsed.io/">Website</a>
+  <a href="https://tsed.dev/">Website</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://tsed.io/tutorials/prisma.html">Tutorial</a>
+  <a href="https://tsed.dev/tutorials/prisma.html">Tutorial</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://api.tsed.io/rest/slack/tsedio/tsed">Slack</a>
+  <a href="https://api.tsed.dev/rest/slack/tsedio/tsed">Slack</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
   <a href="https://twitter.com/TsED_io">Twitter</a>
 </div>
@@ -31,7 +31,7 @@ platform.
 This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
 listed above.
 
-See our [storybook](https://formio.tsed.io/?path=/docs/getting-started--docs) to see all available components.
+See our [storybook](https://formio.tsed.dev/?path=/docs/getting-started--docs) to see all available components and installation guide.
 
 ## Features
 
@@ -83,8 +83,7 @@ npm-compatible packaging system such as [Browserify](http://browserify.org/) or
 [webpack](http://webpack.github.io/).
 
 ```bash
-npm install @tsed/react-formio react-table --save
-npm install formiojs choices.js --save // Install formiojs since it is a peerDependency
+npm install @formio/js @tsed/react-formio react-table --save
 ```
 
 ## Usage
@@ -104,7 +103,7 @@ function App() {
 export default App;
 ```
 
-See more on http://formio.tsed.io/?path=/docs/getting-started--docs
+See more on http://formio.tsed.dev/?path=/docs/getting-started--docs
 
 ## Contributors
 

package/src/all.ts

@@ -0,0 +1,34 @@
+import "./atoms/icon/Icon";
+import "./molecules/tabs/Tab";
+import "./molecules/tabs/TabList";
+import "./molecules/tabs/TabPanel";
+import "./molecules/tabs/Tabs";
+import "./molecules/tabs/TabsBody";
+import "./molecules/button/Button";
+import "./molecules/forms/input-text/InputText";
+import "./molecules/forms/select/Select";
+import "./molecules/forms/select/components/HtmlSelect";
+import "./molecules/forms/select/components/ChoicesSelect";
+import "./molecules/forms/select/components/ReactSelect";
+import "./molecules/forms/input-tags/InputTags";
+import "./molecules/forms/input-tags/components/ReactTags";
+import "./molecules/forms/input-tags/components/ChoicesTags";
+import "./molecules/pagination/Pagination";
+import "./molecules/pagination/PaginationButton";
+import "./organisms/form/builder/FormBuilder";
+import "./organisms/form/builder/FormEdit";
+import "./organisms/form/builder/FormEditCtas";
+import "./organisms/form/builder/FormParameters";
+import "./organisms/form/builder/useFormBuilder";
+import "./organisms/form/builder/useFormEdit";
+import "./molecules/forms/input-tags/InputTags.interface";
+import "./molecules/table/components/DefaultFilter";
+import "./molecules/table/components/DefaultArrowSort";
+import "./molecules/table/components/DefaultCell";
+import "./molecules/table/components/DefaultCellOperations";
+import "./molecules/table/components/DefaultOperationButton";
+import "./molecules/table/components/DefaultCellHeader";
+import "./molecules/table/components/DefaultCellFooter";
+import "./molecules/table/filters/TextFieldFilter";
+import "./molecules/table/filters/SelectFilter";
+import "./molecules/table/filters/RangeFilter";

package/src/atoms/icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import Template from "@tsed/tailwind-formio";
 
 import { Icon } from "./Icon";
@@ -26,6 +26,13 @@ export default {
   argTypes: {
     name: {
       control: "text"
+    },
+    iconset: {
+      control: "select",
+      options: ["bx", "lu"]
+    },
+    spinning: {
+      control: "boolean"
     }
   },
   parameters: {
@@ -46,12 +53,12 @@ export const Size: Story = {
   args: {
     name: "save"
   },
-  render() {
+  render(args) {
     return (
       <div className='flex flex-wrap gap-3'>
         {["text-sm", "text-large", "text-xl", "text-3xl", "text-8xl"].map((className) => (
           <div key={className} className={"flex gap-3 items-end"}>
-            <Icon name='save' className={className} />
+            <Icon name={args.name} className={className} iconset={args.iconset} spinning={args.spinning} />
           </div>
         ))}
       </div>
@@ -63,12 +70,12 @@ export const Colors: Story = {
   args: {
     name: "save"
   },
-  render() {
+  render(args) {
     return (
       <div className='flex flex-wrap gap-3'>
         {["text-sm text-red-600", "text-large text-primary", "text-xl text-secondary", "text-3xl text-green-600"].map((className) => (
           <div key={className} className={"flex gap-3 items-end"}>
-            <Icon name='save' className={className} />
+            <Icon name={args.name} className={className} iconset={args.iconset} spinning={args.spinning} />
           </div>
         ))}
       </div>
@@ -80,12 +87,12 @@ export const Rounded: Story = {
   args: {
     name: "save"
   },
-  render() {
+  render(args) {
     return (
       <div className='flex flex-wrap gap-3'>
         {["text-sm bg-red-600", "text-large bg-primary", "text-xl bg-secondary", "text-3xl bg-green-600"].map((className) => (
           <div key={className} className={"flex gap-3 items-end"}>
-            <Icon name='save' className={className + " rounded-full text-white p-3"} />
+            <Icon name={args.name} className={className + " rounded-full text-white p-3"} iconset={args.iconset} spinning={args.spinning} />
           </div>
         ))}
       </div>
@@ -101,23 +108,65 @@ export const PresetsForFormio: Story = {
   },
   render() {
     return (
-      <div className='flex flex-wrap gap-3'>
-        {Object.entries(Template.templates.tailwind.ICONS).map(([icon]) => (
-          <div key={icon} className={"flex gap-3 flex-wrap"}>
-            <div
-              className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
-              style={{
-                width: "100px",
-                height: "100px"
-              }}
-            >
-              <div>
-                <Icon name={icon} />
+      <div className='flex flex-col gap-10'>
+        <div>
+          <h3 className='text-2xl'>
+            <a href='https://lucide.dev/icons/'>Lucide</a>
+          </h3>
+          <span>
+            See more{" "}
+            <a className='text-blue-800 hover:text-blue-950' href='https://lucide.dev/icons/'>
+              here
+            </a>
+          </span>
+        </div>
+
+        <div className='flex flex-wrap gap-3'>
+          {Object.entries(Template.templates.tailwind.ICONS["lu"]).map(([icon]) => (
+            <div key={icon} className={"flex gap-3 flex-wrap"}>
+              <div
+                className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
+                style={{
+                  width: "100px",
+                  height: "100px"
+                }}
+              >
+                <div>
+                  <Icon name={icon} iconset='lu' />
+                </div>
+                <span className='text-sm'>{icon}</span>
               </div>
-              <span className='text-sm'>{icon}</span>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
+
+        <div>
+          <h3 className='text-2xl'>BxIcons</h3>
+          <span>
+            See more{" "}
+            <a className='text-blue-800 hover:text-blue-950' href='https://v2.boxicons.com/'>
+              here
+            </a>
+          </span>
+        </div>
+        <div className='flex flex-wrap gap-3'>
+          {Object.entries(Template.templates.tailwind.ICONS["bx"]).map(([icon]) => (
+            <div key={icon} className={"flex gap-3 flex-wrap"}>
+              <div
+                className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
+                style={{
+                  width: "100px",
+                  height: "100px"
+                }}
+              >
+                <div>
+                  <Icon name={icon} iconset='bx' />
+                </div>
+                <span className='text-sm'>{icon}</span>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     );
   }

package/src/atoms/icon/Icon.tsx

@@ -1,16 +1,26 @@
 import cx from "classnames";
-import type { HTMLAttributes } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
 import { registerComponent } from "../../registries/components";
 import { iconClass } from "../../utils/iconClass";
 
-export interface IconProps extends HTMLAttributes<HTMLElement> {
+export interface IconProps extends ComponentPropsWithoutRef<"i"> {
   iconset?: string;
+  spinning?: boolean;
   name: string;
 }
 
-export function Icon({ iconset, name, className, ...props }: IconProps) {
-  return <i {...props} className={cx(iconClass(iconset, name), className)} />;
+export function Icon({ iconset, name, className, spinning, ...props }: IconProps) {
+  const textClasses = className
+    ?.split(" ")
+    .filter((cls) => cls.startsWith("text-"))
+    .join(" ");
+
+  return (
+    <span className={cx(textClasses, "wrapper-icon")}>
+      <i {...props} className={cx(iconClass(iconset, name, spinning), className)} />
+    </span>
+  );
 }
 
 registerComponent("Icon", Icon);

package/src/contexts/FormioContext.tsx

@@ -0,0 +1,89 @@
+import { Formio as ImportedFormio } from "@formio/js";
+import { createContext, type PropsWithChildren, useEffect, useState } from "react";
+
+type BaseConfigurationArgs = {
+  baseUrl?: string;
+  projectUrl?: string;
+  Formio?: typeof ImportedFormio;
+};
+
+const useBaseConfiguration = ({ baseUrl, projectUrl, Formio }: BaseConfigurationArgs) => {
+  if (!Formio) {
+    if (baseUrl) {
+      ImportedFormio.setBaseUrl(baseUrl);
+    }
+    if (projectUrl) {
+      ImportedFormio.setProjectUrl(projectUrl);
+    }
+    return {
+      Formio: ImportedFormio,
+      baseUrl: ImportedFormio.baseUrl,
+      projectUrl: ImportedFormio.projectUrl
+    };
+  }
+
+  if (baseUrl) {
+    Formio.setBaseUrl(baseUrl);
+  }
+  if (projectUrl) {
+    Formio.setProjectUrl(projectUrl);
+  }
+
+  return {
+    Formio,
+    baseUrl: Formio.baseUrl,
+    projectUrl: Formio.projectUrl
+  };
+};
+
+const useAuthentication = ({ Formio }: { Formio: typeof ImportedFormio }) => {
+  const [token, setToken] = useState(Formio.getToken() || null);
+  const [isAuthenticated, setIsAuthenticated] = useState(!!token);
+
+  useEffect(() => {
+    const handleUserEvent = async (user: unknown) => {
+      if (user) {
+        setToken(Formio.getToken());
+        setIsAuthenticated(true);
+      } else if (isAuthenticated) {
+        await Formio.logout();
+        setToken(null);
+        setIsAuthenticated(false);
+      }
+    };
+
+    const handleStaleToken = async () => {
+      if (isAuthenticated) {
+        const user = await Formio.currentUser();
+        if (!user) {
+          setToken(null);
+          setIsAuthenticated(false);
+        }
+      }
+    };
+
+    Formio.events.on("formio.user", handleUserEvent);
+    handleStaleToken();
+
+    return () => {
+      Formio.events.off("formio.user", handleUserEvent);
+    };
+  }, [isAuthenticated, Formio]);
+
+  const logout = async () => {
+    await Formio.logout();
+    setToken(null);
+    setIsAuthenticated(false);
+  };
+
+  return { token, setToken, isAuthenticated, logout };
+};
+
+export const FormioContext = createContext<(ReturnType<typeof useBaseConfiguration> & ReturnType<typeof useAuthentication>) | null>(null);
+
+export function FormioProvider({ children, baseUrl, projectUrl, Formio }: PropsWithChildren<BaseConfigurationArgs>) {
+  const baseConfig = useBaseConfiguration({ baseUrl, projectUrl, Formio });
+  const auth = useAuthentication({ Formio: baseConfig.Formio });
+  const formio = { ...baseConfig, ...auth };
+  return <FormioContext.Provider value={formio}>{children}</FormioContext.Provider>;
+}

package/src/hooks/keyboard.constants.ts

@@ -0,0 +1,40 @@
+export const enum CODE {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  SPACE = "Space",
+  END = "End",
+  HOME = "Home"
+}
+
+export const enum KEY {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  END = "End",
+  HOME = "Home",
+  SPACE = " ",
+  /**
+   * @deprecated
+   * Used by old browers, see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
+   */
+  SPACEBAR = "Spacebar"
+}
+
+export const enum KEY_CODE {
+  ENTER = 13,
+  ESCAPE = 27,
+  ARROW_LEFT = 37,
+  ARROW_UP = 38,
+  ARROW_RIGHT = 39,
+  ARROW_DOWN = 40,
+  SPACE = 32,
+  END = 35,
+  HOME = 36
+}

package/src/hooks/useFormioContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { FormioContext } from "../contexts/FormioContext";
+
+export function useFormioContext() {
+  const context = useContext(FormioContext);
+
+  if (!context) {
+    throw new Error("useFormioContext must be used within a FormioProvider component.");
+  }
+
+  return context;
+}

package/src/hooks/useI18n.ts

@@ -0,0 +1,9 @@
+import type { FormOptions } from "../interfaces/index.js";
+
+export function useI18n(labels?: FormOptions["i18n"]) {
+  return {
+    t: (key: string, defaultValue: string = key) => {
+      return labels?.[key] || defaultValue;
+    }
+  };
+}

package/src/hooks/useKeyboardControls.spec.tsx

@@ -0,0 +1,208 @@
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { useKeyboardControls } from "./useKeyboardControls";
+
+describe("useKeyboardControls()", () => {
+  const activate = vi.fn();
+  const start = vi.fn();
+  const end = vi.fn();
+  const up = vi.fn();
+  const down = vi.fn();
+  const left = vi.fn();
+  const right = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  const Test = () => {
+    const handle = useKeyboardControls({ activate, start, end, up, down, left, right });
+
+    return (
+      <div tabIndex={0} role='button' onKeyDown={handle}>
+        Test
+      </div>
+    );
+  };
+
+  describe("on Enter", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Enter]{Enter}");
+
+      expect(activate).toHaveBeenCalledTimes(2);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Spacebar", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Space]{ }{Spacebar}");
+
+      expect(activate).toHaveBeenCalledTimes(3);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Home", () => {
+    it('call the "start" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Home]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).toHaveBeenCalledTimes(1);
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on End", () => {
+    it('call the "end" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[End]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).toHaveBeenCalledTimes(1);
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Up", () => {
+    it('call the "up" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).toHaveBeenCalledTimes(1);
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Down", () => {
+    it('call the "down" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowDown]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).toHaveBeenCalledTimes(1);
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Left", () => {
+    it('call the "left" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowLeft]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).toHaveBeenCalledTimes(1);
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Right", () => {
+    it('call the "right" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowRight]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("without any callback", () => {
+    it("does nothing", async () => {
+      const Test = () => {
+        const handle = useKeyboardControls({ activate });
+
+        return (
+          <div tabIndex={0} role='button' onKeyDown={handle}>
+            Test
+          </div>
+        );
+      };
+
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp][ArrowUp][ArrowDown][ArrowDown][ArrowLeft][ArrowRight][ArrowLeft][ArrowRight]{b}{a}[Enter]");
+
+      expect(activate).toHaveBeenCalledTimes(1);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalledTimes(1);
+    });
+  });
+});