fix(react-formio): use @formio/js v5+

.storybook/styles/index.css

@@ -1,6 +1,6 @@
 @import "tailwind.css";
 @import "fonts/index.css";
 @import "typography.css";
-@import "../../node_modules/formiojs/dist/formio.full.css";
+@import "../../node_modules/@formio/js/dist/formio.full.css";
 @import "../../packages/tailwind-formio/styles/index.css";
 

package.json

@@ -35,7 +35,9 @@
   },
   "dependencies": {
     "@formio/choices.js": "^9.0.1",
+    "@formio/js": "5.0.0",
     "@types/classnames": "^2.2.11",
+    "@types/lodash": "4.17.13",
     "@types/react": "^18.2.8",
     "@types/react-dnd": "3.0.2",
     "@types/react-dnd-html5-backend": "3.0.2",
@@ -45,7 +47,6 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.14",
     "connected-react-router": "6.9.1",
-    "formiojs": "4.21.6",
     "history": "5.3.0",
     "lerna": "8.1.2",
     "lodash": "4.17.21",

packages/integration/package.json

@@ -14,7 +14,7 @@
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",
-    "formiojs": ">=4.0.0",
+    "@formio/js": ">=5.0.0",
     "lodash": ">=4.17.20",
     "react": ">=16.14.0",
     "react-dnd": ">=16.0.1",

packages/integration/src/styles/index.css

@@ -1,6 +1,6 @@
 @import "tailwind.css";
 @import "fonts/index.css";
 @import "typography.css";
-@import "formiojs/dist/formio.full.css";
+@import "@formio/js/dist/formio.full.css";
 @import "@tsed/tailwind-formio/styles/index.css";
 

packages/react-formio-container/package.json

@@ -26,12 +26,12 @@
   },
   "peerDependencies": {
     "@formio/choices.js": "^9.0.1",
+    "@formio/js": "^5.0.0",
     "@tsed/react-formio": "3.0.0-alpha.1",
     "@tsed/react-formio-stores": "3.0.0-alpha.1",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.1",
     "file-saver": "^2.0.5",
-    "formiojs": "^4.21.6",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -52,6 +52,9 @@
     "vitest": "2.1.8"
   },
   "peerDependenciesMeta": {
+    "@formio/js": {
+      "optional": false
+    },
     "choices.js": {
       "optional": false
     },
@@ -64,9 +67,6 @@
     "file-saver": {
       "optional": false
     },
-    "formiojs": {
-      "optional": false
-    },
     "lodash": {
       "optional": false
     },
@@ -97,6 +97,5 @@
     "tooltip.js": {
       "optional": false
     }
-  },
-  "dependencies": {}
+  }
 }

packages/react-formio-container/src/interfaces/FormioContainerOptions.ts

@@ -1,4 +1,6 @@
-import { FormSchema, Submission } from "@tsed/react-formio";
+import type { Form } from "@formio/core";
+import { Submission } from "@tsed/react-formio";
+import { ComponentType } from "react";
 
 import { FormRoute } from "../views/form.routes";
 
@@ -54,24 +56,24 @@ export interface FormioContainerOptions extends Record<string, unknown> {
    * Handler called when an event is an error
    */
   onError?: FormioErrorHandler;
-  onSubmitForm?: (type: string, form: FormSchema) => void;
+  onSubmitForm?: (type: string, form: Form) => void;
   onSubmitSubmission?: (submissionType: string, formId: string, submission: Submission) => void;
   /**
    * i18n function to translate sentences
    */
   i18n?: (f: string) => string;
 
   // override components
-  FormsComponent?: React.ComponentType<any>;
-  FormComponent?: React.ComponentType<any>;
-  FormActionsComponent?: React.ComponentType<any>;
-  FormActionComponent?: React.ComponentType<any>;
-  FormExportComponent?: React.ComponentType<any>;
-  FormEditComponent?: React.ComponentType<any>;
-  FormSettingsComponent?: React.ComponentType<any>;
-  FormAccessComponent?: React.ComponentType<any>;
-  SubmissionComponent?: React.ComponentType<any>;
-  SubmissionsComponent?: React.ComponentType<any>;
-  RemoveModalComponent?: React.ComponentType<any>;
-  LoaderComponent?: React.ComponentType<any>;
+  FormsComponent?: ComponentType<any>;
+  FormComponent?: ComponentType<any>;
+  FormActionsComponent?: ComponentType<any>;
+  FormActionComponent?: ComponentType<any>;
+  FormExportComponent?: ComponentType<any>;
+  FormEditComponent?: ComponentType<any>;
+  FormSettingsComponent?: ComponentType<any>;
+  FormAccessComponent?: ComponentType<any>;
+  SubmissionComponent?: ComponentType<any>;
+  SubmissionsComponent?: ComponentType<any>;
+  RemoveModalComponent?: ComponentType<any>;
+  LoaderComponent?: ComponentType<any>;
 }

packages/react-formio-container/src/utils/ExportClient.ts

@@ -1,4 +1,4 @@
-import { FormSchema } from "@tsed/react-formio";
+import type { Form } from "@formio/core";
 import FileSaver from "file-saver";
 import moment from "moment";
 
@@ -8,12 +8,12 @@ async function getDatabase() {
   return httpClient.get("/export");
 }
 
-async function exportForm(form: FormSchema) {
+async function exportForm(form: Form) {
   const database = await getDatabase();
   return database.forms[form.machineName!] || database.resources[form.machineName!];
 }
 
-async function exportActions(form: FormSchema) {
+async function exportActions(form: Form) {
   const database = await getDatabase();
 
   return Object.entries(database.actions).reduce((obj, [machineName, action]) => {
@@ -25,9 +25,9 @@ async function exportActions(form: FormSchema) {
   }, {});
 }
 
-async function getContent(form: FormSchema, type: string, format = "json") {
+async function getContent(form: Form, type: string, format = "json") {
   let result;
-  console.log(form, type, format);
+
   switch (type) {
     case "schema":
       result = await exportForm(form);

packages/react-formio-container/tsconfig.app.json

@@ -6,6 +6,6 @@
     "declaration": false,
     "composite": false
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.mts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
 }

packages/react-formio-container/tsconfig.json

@@ -11,6 +11,9 @@
     {
       "path": "./tsconfig.app.json"
     },
+    {
+      "path": "./tsconfig.node.json"
+    },
     {
       "path": "./tsconfig.spec.json"
     }

packages/react-formio-container/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@tsed/typescript/tsconfig.web.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "baseUrl": ".",
+    "noEmit": true,
+    "declaration": false,
+    "composite": false
+  },
+  "include": ["vite.config.mts"],
+  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
+}

packages/react-formio-stores/package.json

@@ -24,7 +24,7 @@
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",
-    "formiojs": ">=4.0.0",
+    "@formio/js": ">=5.0.0",
     "lodash": ">=4.17.20",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",

packages/react-formio-stores/src/stores/action-info/action-info.actions.spec.ts

@@ -1,8 +1,8 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { getActionInfo, receiveActionInfo, requestActionInfo } from "./action-info.actions";
 
-vi.mock("formiojs", async (originalImport) => {
+vi.mock("@formio/js", async (originalImport) => {
   return {
     ...(await originalImport()),
     Formio: class {

packages/react-formio-stores/src/stores/action-info/action-info.actions.ts

@@ -1,5 +1,5 @@
+import { Formio } from "@formio/js";
 import { createAction } from "@tsed/redux-utils";
-import { Formio } from "formiojs";
 import noop from "lodash/noop";
 
 import { getFormUrl } from "../../utils/url";

packages/react-formio-stores/src/stores/action/action.actions.spec.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { getActionInfo } from "../action-info";
 import {
@@ -12,7 +12,7 @@ import {
   sendAction
 } from "./action.actions";
 
-vi.mock("formiojs", async (originalImport) => {
+vi.mock("@formio/js", async (originalImport) => {
   return {
     ...(await originalImport()),
     Formio: class {

packages/react-formio-stores/src/stores/action/action.actions.ts

@@ -1,5 +1,5 @@
+import { Formio } from "@formio/js";
 import { createAction } from "@tsed/redux-utils";
-import { Formio } from "formiojs";
 import get from "lodash/get";
 import noop from "lodash/noop";
 

packages/react-formio-stores/src/stores/actions/actions.actions.spec.ts

@@ -1,8 +1,8 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { getActions, receiveActions, requestActions, resetActions } from "./actions.actions";
 
-vi.mock("formiojs", async (originalImport) => {
+vi.mock("@formio/js", async (originalImport) => {
   return {
     ...(await originalImport()),
     Formio: class {

packages/react-formio-stores/src/stores/actions/actions.actions.ts

@@ -1,5 +1,5 @@
+import { Formio } from "@formio/js";
 import { createAction } from "@tsed/redux-utils";
-import { Formio } from "formiojs";
 import noop from "lodash/noop";
 
 import { getFormUrl } from "../../utils/url";

packages/react-formio-stores/src/stores/auth/getAccess.action.spec.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { formAccessUser, submissionAccessUser, userForms, userRoles } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/auth/getAccess.action.ts

@@ -1,5 +1,5 @@
+import { Formio } from "@formio/js";
 import type { FormSchema, RoleSchema } from "@tsed/react-formio";
-import { Formio } from "formiojs";
 
 import { formAccessUser, submissionAccessUser, userForms, userRoles } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/auth/getProjectAccess.action.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { projectAccessUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/auth/initAuth.action.spec.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { requestUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/auth/initAuth.action.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 import noop from "lodash/noop";
 
 import { failUser, requestUser } from "./auth.actions";

packages/react-formio-stores/src/stores/auth/logout.action.spec.ts

@@ -1,11 +1,11 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { logoutUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 import { logout } from "./logout.action";
 
 vi.mock("./auth.actions");
-vi.mock("formiojs");
+vi.mock("@formio/js");
 
 describe("logout()", () => {
   beforeEach(() => {

packages/react-formio-stores/src/stores/auth/logout.action.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { logoutUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/auth/setUser.action.spec.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { receiveUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/auth/setUser.action.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { receiveUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";

packages/react-formio-stores/src/stores/form/form.actions.spec.ts

@@ -1,8 +1,8 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { deleteForm, failForm, getForm, receiveForm, requestForm, resetForm, saveForm, sendForm } from "./form.actions";
 
-vi.mock("formiojs", async (originalImport) => {
+vi.mock("@formio/js", async (originalImport) => {
   return {
     ...(await originalImport()),
     Formio: class {

packages/react-formio-stores/src/stores/form/form.actions.ts

@@ -1,6 +1,6 @@
+import { Formio } from "@formio/js";
 import type { FormSchema } from "@tsed/react-formio";
 import { createAction } from "@tsed/redux-utils";
-import { Formio } from "formiojs";
 import noop from "lodash/noop";
 
 import { getFormUrl } from "../../utils/url";

packages/react-formio-stores/src/stores/forms/forms.actions.spec.ts

@@ -1,9 +1,9 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import { mapRequestParams } from "../../utils/mapRequestParams";
 import { failForms, getForms, receiveForms, requestForms } from "./forms.actions";
 
-vi.mock("formiojs", async (originalImport) => {
+vi.mock("@formio/js", async (originalImport) => {
   return {
     ...(await originalImport()),
     Formio: class {

packages/react-formio-stores/src/stores/forms/forms.actions.ts

@@ -1,6 +1,6 @@
+import { Formio } from "@formio/js";
 import type { FormSchema } from "@tsed/react-formio";
 import { createAction } from "@tsed/redux-utils";
-import { Formio } from "formiojs";
 import noop from "lodash/noop";
 
 import { mapRequestParams, RequestParamsOptions } from "../../utils/mapRequestParams";

packages/react-formio-stores/src/stores/submission/submission.actions.spec.ts

@@ -1,4 +1,4 @@
-import { Formio } from "formiojs";
+import { Formio } from "@formio/js";
 
 import {
   clearSubmissionError,
@@ -12,7 +12,7 @@ import {
   sendSubmission
 } from "./submission.actions";
 
-vi.mock("formiojs", async (originalImport) => {
+vi.mock("@formio/js", async (originalImport) => {
   return {
     ...(await originalImport()),
     Formio: class {

packages/react-formio-stores/src/stores/submission/submission.actions.ts

@@ -1,6 +1,6 @@
+import { Formio } from "@formio/js";
 import { Submission } from "@tsed/react-formio";
 import { createAction } from "@tsed/redux-utils";
-import { Formio } from "formiojs";
 import noop from "lodash/noop";
 
 import { getSubmissionUrl } from "../../utils/url";