From 2dab9d73b98a15c56c4c8298867fc35943109d8d Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 08:54:22 +0100
Subject: [PATCH 01/12] chore: update storybook configuration

---
 .storybook/main.ts | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 233c8d4..8ef62ef 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -6,9 +6,20 @@ const config: StorybookConfig = {
   stories: [
     "../stories/Getting-started.mdx",
     "../stories/**/*.mdx",
-    "../packages/{tailwind-formio,react-formio}/src/**/*.mdx",
-    "../packages/{tailwind-formio,react-formio}/src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../packages/{tailwind-formio,react-formio}/src/**/*.story.@(js|jsx|ts|tsx)"
+    {
+      titlePrefix: "Molecules",
+      directory: "../packages/react-formio/src/molecules"
+    },
+    // {
+    //   titlePrefix: "@tsed/react-formio/Organisms",
+    //   directory: "../packages/react-formio/src/organisms/**/*.stories.@(js|jsx|ts|tsx)"
+    // },
+    "../packages/react-formio/src/components/**/*.mdx",
+    "../packages/react-formio/src/components/**/*.stories.@(js|jsx|ts|tsx)",
+    "../packages/react-formio/src/components/**/*.story.@(js|jsx|ts|tsx)",
+    "../packages/tailwind-formio/src/**/*.mdx",
+    "../packages/tailwind-formio/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../packages/tailwind-formio/src/**/*.story.@(js|jsx|ts|tsx)"
   ],
 
   addons: [

From ca1abb387ccdd61162bafca721c350eb6f7a5dcb Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 08:59:35 +0100
Subject: [PATCH 02/12] fix: fix typing issue

---
 .../form-action/formAction.component.tsx      |  2 +-
 .../src/components/form/useForm.hook.ts       | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/react-formio/src/components/form-action/formAction.component.tsx b/packages/react-formio/src/components/form-action/formAction.component.tsx
index d537160..a790bc6 100644
--- a/packages/react-formio/src/components/form-action/formAction.component.tsx
+++ b/packages/react-formio/src/components/form-action/formAction.component.tsx
@@ -51,7 +51,7 @@ export function FormAction({ actionInfo, children, onSubmit, options, ...props }
     <div>
       {children}
 
-      <Form form={form} submission={submission} onSubmit={onSubmit} options={options} />
+      <Form<ActionType> form={form} submission={submission} onSubmit={onSubmit} options={options} />
 
       {children}
     </div>
diff --git a/packages/react-formio/src/components/form/useForm.hook.ts b/packages/react-formio/src/components/form/useForm.hook.ts
index cddc608..7758787 100644
--- a/packages/react-formio/src/components/form/useForm.hook.ts
+++ b/packages/react-formio/src/components/form/useForm.hook.ts
@@ -12,21 +12,21 @@ export interface UseFormProps<Data extends { [key: string]: JSON } = { [key: str
   src?: string;
   url?: string;
   form?: FormType;
-  submission?: SubmissionType;
+  submission?: SubmissionType<Data>;
   // TODO: once events is typed correctly in @formio/js options, we can remove this override
   options?: FormOptions;
   FormClass?: any;
   onFormReady?: (instance: Webform) => void;
-  onPrevPage?: (page: number, submission: SubmissionType) => void;
-  onNextPage?: (page: number, submission: SubmissionType) => void;
+  onPrevPage?: (page: number, submission: SubmissionType<Data>) => void;
+  onNextPage?: (page: number, submission: SubmissionType<Data>) => void;
   onCancelSubmit?: () => void;
   onCancelComponent?: (component: ComponentType) => void;
   onChange?: (value: ChangedSubmission<Data>, flags: any, modified: boolean) => void;
   onCustomEvent?: (event: FormCustomEvent) => void;
   onComponentChange?: (changed: { instance: Webform; component: Webform; value: any; flags: any }) => void;
-  onSubmit?: (submission: SubmissionType, saved?: boolean) => void;
-  onAsyncSubmit?: (submission: SubmissionType) => void;
-  onSubmitDone?: (submission: SubmissionType) => void;
+  onSubmit?: (submission: SubmissionType<Data>, saved?: boolean) => void;
+  onAsyncSubmit?: (submission: SubmissionType<Data>) => void;
+  onSubmitDone?: (submission: SubmissionType<Data>) => void;
   onSubmitError?: (error: EventError) => void;
   onFormLoad?: (form: JSON) => void;
   onError?: (error: EventError | false) => void;
@@ -37,11 +37,11 @@ export interface UseFormProps<Data extends { [key: string]: JSON } = { [key: str
   onBlur?: (instance: Webform) => void;
   onInitialized?: () => void;
   onLanguageChanged?: () => void;
-  onBeforeSetSubmission?: (submission: SubmissionType) => void;
+  onBeforeSetSubmission?: (submission: SubmissionType<Data>) => void;
   onSaveDraftBegin?: () => void;
-  onSaveDraft?: (submission: SubmissionType) => void;
-  onRestoreDraft?: (submission: SubmissionType | null) => void;
-  onSubmissionDeleted?: (submission: SubmissionType) => void;
+  onSaveDraft?: (submission: SubmissionType<Data>) => void;
+  onRestoreDraft?: (submission: SubmissionType<Data> | null) => void;
+  onSubmissionDeleted?: (submission: SubmissionType<Data>) => void;
   onRequestDone?: () => void;
   otherEvents?: {
     [event: string]: (...args: any[]) => void;

From d204bb93ca6f11d11b3d4b96dff964692eac903b Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 09:33:53 +0100
Subject: [PATCH 03/12] refactor(react-formio): move Alert in molecules

---
 .../src/views/form.view.tsx                   |  5 ++-
 .../src/views/forms.view.tsx                  |  5 ++-
 .../src/components/alert/alert.stories.tsx    | 16 --------
 packages/react-formio/src/components/index.ts |  1 -
 .../alert/Alert.spec.tsx}                     | 22 ++++++-----
 .../src/molecules/alert/Alert.stories.tsx     | 39 +++++++++++++++++++
 .../alert/Alert.tsx}                          | 17 ++++----
 7 files changed, 68 insertions(+), 37 deletions(-)
 delete mode 100644 packages/react-formio/src/components/alert/alert.stories.tsx
 rename packages/react-formio/src/{components/alert/alert.component.spec.tsx => molecules/alert/Alert.spec.tsx} (86%)
 create mode 100644 packages/react-formio/src/molecules/alert/Alert.stories.tsx
 rename packages/react-formio/src/{components/alert/alert.component.tsx => molecules/alert/Alert.tsx} (86%)

diff --git a/packages/react-formio-container/src/views/form.view.tsx b/packages/react-formio-container/src/views/form.view.tsx
index cf3acd1..1ffabb0 100644
--- a/packages/react-formio-container/src/views/form.view.tsx
+++ b/packages/react-formio-container/src/views/form.view.tsx
@@ -1,4 +1,5 @@
-import { Alert, Loader, RemoveModal, Tabs } from "@tsed/react-formio";
+import { Loader, RemoveModal, Tabs } from "@tsed/react-formio";
+import { Alert } from "@tsed/react-formio/molecules/alert/Alert";
 import { Route, Switch, useParams } from "react-router";
 
 import { useForm } from "../hooks/useForm.hook";
@@ -13,7 +14,7 @@ function FormComponent({ className, ...props }: ReturnType<typeof useForm>) {
 
   return (
     <div>
-      <Alert error={error} />
+      <Alert message={error} />
       <div className={className}>
         <Tabs i18n={i18n} current={currentRoute} items={routes} className='' onClick={setCurrentRoute}>
           <Switch>
diff --git a/packages/react-formio-container/src/views/forms.view.tsx b/packages/react-formio-container/src/views/forms.view.tsx
index e5b281d..bb0832f 100644
--- a/packages/react-formio-container/src/views/forms.view.tsx
+++ b/packages/react-formio-container/src/views/forms.view.tsx
@@ -1,4 +1,5 @@
-import { Alert, FormsTable } from "@tsed/react-formio";
+import { FormsTable } from "@tsed/react-formio";
+import { Alert } from "@tsed/react-formio/molecules/alert/Alert";
 
 import { useForms, UseFormsProps } from "../hooks/useForms.hook";
 
@@ -39,7 +40,7 @@ export function FormsComponent({
 
   return (
     <div className={"-m-px"}>
-      <Alert error={error} />
+      <Alert message={error} />
       <FormsTable
         className={className}
         icon={formType === "forms" ? "detail" : "folder"}
diff --git a/packages/react-formio/src/components/alert/alert.stories.tsx b/packages/react-formio/src/components/alert/alert.stories.tsx
deleted file mode 100644
index 9eaac0a..0000000
--- a/packages/react-formio/src/components/alert/alert.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Alert } from "./alert.component";
-
-export default {
-  title: "@tsed/react-formio/Alert",
-  component: Alert,
-  argTypes: {},
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Alert {...args} />;
-};
-
-Sandbox.args = {
-  error: "error placeholder"
-};
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index f0e82ae..cb5b4f8 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -1,5 +1,4 @@
 export * from "./actions-table/actionsTable.component";
-export * from "./alert/alert.component";
 export * from "./card/card.component";
 export * from "./form/form.component";
 export * from "./form/useForm.hook";
diff --git a/packages/react-formio/src/components/alert/alert.component.spec.tsx b/packages/react-formio/src/molecules/alert/Alert.spec.tsx
similarity index 86%
rename from packages/react-formio/src/components/alert/alert.component.spec.tsx
rename to packages/react-formio/src/molecules/alert/Alert.spec.tsx
index 5bbe512..2f005c6 100644
--- a/packages/react-formio/src/components/alert/alert.component.spec.tsx
+++ b/packages/react-formio/src/molecules/alert/Alert.spec.tsx
@@ -1,10 +1,14 @@
 import { render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./alert.stories";
+import { Alert } from "./Alert";
+
+const args = {
+  error: "error placeholder"
+};
 
 describe("Alert component", () => {
   it("should NOT display the alert component when no error is received.", () => {
-    const { container } = render(<Sandbox {...Sandbox.args} error={null} />);
+    const { container } = render(<Alert {...args} message={null} />);
 
     expect(container).toBeEmptyDOMElement();
   });
@@ -12,7 +16,7 @@ describe("Alert component", () => {
   it("should display an error when the error is in string format", () => {
     const error = "error in string format";
 
-    render(<Sandbox {...Sandbox.args} error={error} />);
+    render(<Alert {...args} message={error} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -24,7 +28,7 @@ describe("Alert component", () => {
   it("should display error(s) when the error is an array", () => {
     const arrayOfErrors = ["first error", "second error", "third error"];
     const joinedErrors = arrayOfErrors.map((error) => error).join("");
-    render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+    render(<Alert {...args} message={arrayOfErrors} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -41,7 +45,7 @@ describe("Alert component", () => {
         { name: "third error", path: "/path", message: "message" }
       ]
     };
-    render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+    render(<Alert {...args} message={arrayOfErrors} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -52,7 +56,7 @@ describe("Alert component", () => {
 
   it("should display an error message when the error is a standard error", () => {
     const standardError = { message: "first error" };
-    render(<Sandbox {...Sandbox.args} error={standardError} />);
+    render(<Alert {...args} message={standardError} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -63,7 +67,7 @@ describe("Alert component", () => {
 
   it("should display error(s) message(s) when the error is a joi validation error", () => {
     const joiValidationError = { name: "ValidationError", details: [{ message: "message 1" }, { message: "message 2" }] };
-    render(<Sandbox {...Sandbox.args} error={joiValidationError} />);
+    render(<Alert {...args} message={joiValidationError} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -76,7 +80,7 @@ describe("Alert component", () => {
   it("should display a custom error message that asks to reload the form when a conflict error occurs in a form", () => {
     const error = { _id: "some id", display: "some value" };
     const messageReturned = "Another user has saved this form already. Please reload and re-apply your changes.";
-    render(<Sandbox {...Sandbox.args} error={error} />);
+    render(<Alert {...args} message={error} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -87,7 +91,7 @@ describe("Alert component", () => {
 
   it("should display an error message by default when the error format does not match any of the conditions of the formatError() handler", () => {
     const messageError: string = "An error occurred. See console logs for details.";
-    render(<Sandbox {...Sandbox.args} error={true} />);
+    render(<Alert {...args} message={true} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
diff --git a/packages/react-formio/src/molecules/alert/Alert.stories.tsx b/packages/react-formio/src/molecules/alert/Alert.stories.tsx
new file mode 100644
index 0000000..03ca06e
--- /dev/null
+++ b/packages/react-formio/src/molecules/alert/Alert.stories.tsx
@@ -0,0 +1,39 @@
+import { Alert } from "./Alert";
+
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app.
+ *
+ * ```tsx
+ * import {Alert} from "@tsed/react-formio/molecules/alert/Alert";
+ *
+ * <Alert type="danger">
+ *   Message
+ * </Alert>
+ * ```
+ */
+export default {
+  title: "Alert",
+  component: Alert,
+  argTypes: {
+    message: {
+      control: {
+        type: "text"
+      }
+    },
+    type: {
+      control: {
+        type: "select",
+        options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+      }
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+};
+
+export const Sandbox = {
+  args: {
+    type: "danger",
+    message: "error placeholder"
+  }
+};
diff --git a/packages/react-formio/src/components/alert/alert.component.tsx b/packages/react-formio/src/molecules/alert/Alert.tsx
similarity index 86%
rename from packages/react-formio/src/components/alert/alert.component.tsx
rename to packages/react-formio/src/molecules/alert/Alert.tsx
index 9f3d3d0..edfc833 100644
--- a/packages/react-formio/src/components/alert/alert.component.tsx
+++ b/packages/react-formio/src/molecules/alert/Alert.tsx
@@ -1,4 +1,10 @@
+import { PropsWithChildren } from "react";
+
 function formatError(error: any): any {
+  if (!error || (Array.isArray(error) && !error.length)) {
+    return "";
+  }
+
   if (typeof error === "string") {
     return error;
   }
@@ -42,18 +48,15 @@ function formatError(error: any): any {
 }
 
 export interface AlertProps {
-  error?: any | any[];
+  message?: string | any | string[];
   type?: string;
 }
 
-export function Alert({ error, type = "danger" }: AlertProps) {
-  if (!error || (Array.isArray(error) && !error.length)) {
-    return null;
-  }
-
+export function Alert({ children, message, type = "danger" }: PropsWithChildren<AlertProps>) {
   return (
     <div className={`alert alert-${type}`} role='alert'>
-      {formatError(error)}
+      {formatError(message)}
+      {children}
     </div>
   );
 }

From abfdaebeb5395460a108df077fd8e9698f4b29d5 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 09:41:53 +0100
Subject: [PATCH 04/12] refactor(react-formio): move Card in molecules

---
 .../components/form-access/formAccess.component.tsx   |  3 +--
 packages/react-formio/src/components/index.ts         |  1 -
 .../card/Card.spec.tsx}                               |  5 +++--
 .../card/Card.stories.tsx}                            | 11 +++++++++--
 .../card.component.tsx => molecules/card/Card.tsx}    |  0
 5 files changed, 13 insertions(+), 7 deletions(-)
 rename packages/react-formio/src/{components/card/card.component.spec.tsx => molecules/card/Card.spec.tsx} (74%)
 rename packages/react-formio/src/{components/card/card.stories.tsx => molecules/card/Card.stories.tsx} (52%)
 rename packages/react-formio/src/{components/card/card.component.tsx => molecules/card/Card.tsx} (100%)

diff --git a/packages/react-formio/src/components/form-access/formAccess.component.tsx b/packages/react-formio/src/components/form-access/formAccess.component.tsx
index f4baa3f..58b72bf 100644
--- a/packages/react-formio/src/components/form-access/formAccess.component.tsx
+++ b/packages/react-formio/src/components/form-access/formAccess.component.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
 import type { FormOptions, FormType, SubmissionType } from "../../interfaces";
-import { Card } from "../card/card.component";
+import { Card } from "../../molecules/card/Card";
 import { Form } from "../form/form.component";
 import {
   AccessRolesType,
@@ -70,7 +70,6 @@ function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit,
   return (
     <>
       <Form<AccessRolesType>
-        name={name}
         form={form[name]}
         submission={submissions[name]}
         onChange={({ data, isValid }) => {
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index cb5b4f8..de57560 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -1,5 +1,4 @@
 export * from "./actions-table/actionsTable.component";
-export * from "./card/card.component";
 export * from "./form/form.component";
 export * from "./form/useForm.hook";
 export * from "./form-access/formAccess.component";
diff --git a/packages/react-formio/src/components/card/card.component.spec.tsx b/packages/react-formio/src/molecules/card/Card.spec.tsx
similarity index 74%
rename from packages/react-formio/src/components/card/card.component.spec.tsx
rename to packages/react-formio/src/molecules/card/Card.spec.tsx
index 198d42a..e8a7ad0 100644
--- a/packages/react-formio/src/components/card/card.component.spec.tsx
+++ b/packages/react-formio/src/molecules/card/Card.spec.tsx
@@ -1,10 +1,11 @@
 import { render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./card.stories";
+import { Card } from "./Card";
+import { Sandbox } from "./Card.stories";
 
 describe("Card", () => {
   it("should render the card component", () => {
-    render(<Sandbox {...Sandbox.args} />);
+    render(<Card {...Sandbox.args} />);
 
     const title = screen.getByRole("heading");
     const body = screen.getByRole("article");
diff --git a/packages/react-formio/src/components/card/card.stories.tsx b/packages/react-formio/src/molecules/card/Card.stories.tsx
similarity index 52%
rename from packages/react-formio/src/components/card/card.stories.tsx
rename to packages/react-formio/src/molecules/card/Card.stories.tsx
index b397a43..30fdf51 100644
--- a/packages/react-formio/src/components/card/card.stories.tsx
+++ b/packages/react-formio/src/molecules/card/Card.stories.tsx
@@ -1,7 +1,14 @@
-import { Card } from "./card.component";
+import { Card } from "./Card";
 
+/**
+ * Cards contain content and actions about a single subject.
+ *
+ * ```ts
+ * import {Card} from "@tsed/react-formio/molecules/card/Card";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/Card",
+  title: "Card",
   component: Card,
   argTypes: {},
   parameters: {}
diff --git a/packages/react-formio/src/components/card/card.component.tsx b/packages/react-formio/src/molecules/card/Card.tsx
similarity index 100%
rename from packages/react-formio/src/components/card/card.component.tsx
rename to packages/react-formio/src/molecules/card/Card.tsx

From da55ccb27080e62fd1956dcc7d8bdf8427e267eb Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 10:15:50 +0100
Subject: [PATCH 05/12] refactor(react-formio): move
 InputTags,InputText,FormControl inside molecules

---
 .../form-control/formControl.stories.tsx      | 63 ------------
 .../form-edit/formParameters.component.tsx    |  4 +-
 .../src/components/form/form.stories.tsx      |  2 +-
 packages/react-formio/src/components/index.ts |  3 -
 .../input-tags/inputTags.stories.tsx          | 97 -------------------
 .../modal/removeModal.component.tsx           |  2 +-
 .../components/select/select.component.tsx    |  2 +-
 .../filters/defaultColumnFilter.component.tsx |  2 +-
 .../molecules/__fixtures__/useValue.hook.ts   | 14 +++
 .../forms/form-control/FormControl.spec.tsx}  | 17 ++--
 .../form-control/FormControl.stories.tsx      | 64 ++++++++++++
 .../forms/form-control/FormControl.tsx}       |  0
 .../forms/input-tags/InputTags.stories.tsx    | 95 ++++++++++++++++++
 .../forms/input-tags/InputTags.tsx}           |  2 +-
 .../forms/input-text/InputText.spec.tsx}      |  4 +-
 .../forms/input-text/InputText.stories.tsx}   | 29 +++---
 .../forms/input-text/InputText.tsx}           |  4 +-
 packages/tailwind-formio/styles/choices.css   |  2 +-
 18 files changed, 205 insertions(+), 201 deletions(-)
 delete mode 100644 packages/react-formio/src/components/form-control/formControl.stories.tsx
 delete mode 100644 packages/react-formio/src/components/input-tags/inputTags.stories.tsx
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/useValue.hook.ts
 rename packages/react-formio/src/{components/form-control/formControl.component.spec.tsx => molecules/forms/form-control/FormControl.spec.tsx} (81%)
 create mode 100644 packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
 rename packages/react-formio/src/{components/form-control/formControl.component.tsx => molecules/forms/form-control/FormControl.tsx} (100%)
 create mode 100644 packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
 rename packages/react-formio/src/{components/input-tags/inputTags.component.tsx => molecules/forms/input-tags/InputTags.tsx} (94%)
 rename packages/react-formio/src/{components/input-text/inputText.component.spec.tsx => molecules/forms/input-text/InputText.spec.tsx} (95%)
 rename packages/react-formio/src/{components/input-text/inputText.stories.tsx => molecules/forms/input-text/InputText.stories.tsx} (90%)
 rename packages/react-formio/src/{components/input-text/inputText.component.tsx => molecules/forms/input-text/InputText.tsx} (91%)

diff --git a/packages/react-formio/src/components/form-control/formControl.stories.tsx b/packages/react-formio/src/components/form-control/formControl.stories.tsx
deleted file mode 100644
index 31dda9a..0000000
--- a/packages/react-formio/src/components/form-control/formControl.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { iconClass } from "../../utils/iconClass";
-import { FormControl } from "./formControl.component";
-
-export default {
-  title: "@tsed/react-formio/FormControl",
-  component: FormControl,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    children: {
-      control: {
-        type: HTMLElement || HTMLCollection
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-Sandbox.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />
-};
-
-export const WithPrefix = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />,
-  prefix: <i className={iconClass(undefined, "calendar")} />
-};
-
-export const WithSuffix = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />,
-  suffix: <i className={iconClass(undefined, "calendar")} />
-};
-
-export const WithDescription = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-WithDescription.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />
-};
diff --git a/packages/react-formio/src/components/form-edit/formParameters.component.tsx b/packages/react-formio/src/components/form-edit/formParameters.component.tsx
index bbc5557..758e140 100644
--- a/packages/react-formio/src/components/form-edit/formParameters.component.tsx
+++ b/packages/react-formio/src/components/form-edit/formParameters.component.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
 
 import { FormType } from "../../interfaces/FormType";
-import { InputTags } from "../input-tags/inputTags.component";
-import { InputText } from "../input-text/inputText.component";
+import { InputTags } from "../../molecules/forms/input-tags/InputTags";
+import { InputText } from "../../molecules/forms/input-text/InputText";
 import { Select } from "../select/select.component";
 
 export const defaultDisplayChoices = [
diff --git a/packages/react-formio/src/components/form/form.stories.tsx b/packages/react-formio/src/components/form/form.stories.tsx
index 1ee3c4f..55b6db7 100644
--- a/packages/react-formio/src/components/form/form.stories.tsx
+++ b/packages/react-formio/src/components/form/form.stories.tsx
@@ -3,10 +3,10 @@ import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
 import { useEffect, useState } from "react";
 
 import { SubmissionType } from "../../interfaces";
+import { InputText } from "../../molecules/forms/input-text/InputText";
 import form from "../__fixtures__/form.fixture.json";
 import formFirstname from "../__fixtures__/form-firstname.fixture.json";
 import { useEditForm } from "../__fixtures__/useEditForm";
-import { InputText } from "../input-text/inputText.component";
 import { Form } from "./form.component";
 
 async function delay(number: number) {
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index de57560..b4a96b8 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -4,15 +4,12 @@ export * from "./form/useForm.hook";
 export * from "./form-access/formAccess.component";
 export * from "./form-action/formAction.component";
 export * from "./form-builder/formBuilder.component";
-export * from "./form-control/formControl.component";
 export * from "./form-edit/formCtas.component";
 export * from "./form-edit/formEdit.component";
 export * from "./form-edit/formParameters.component";
 export * from "./form-edit/useFormEdit.hook";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
-export * from "./input-tags/inputTags.component";
-export * from "./input-text/inputText.component";
 export * from "./loader/loader.component";
 export * from "./modal/modal.component";
 export * from "./modal/removeModal.component";
diff --git a/packages/react-formio/src/components/input-tags/inputTags.stories.tsx b/packages/react-formio/src/components/input-tags/inputTags.stories.tsx
deleted file mode 100644
index ef0b7f1..0000000
--- a/packages/react-formio/src/components/input-tags/inputTags.stories.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { InputTags } from "./inputTags.component";
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
-export default {
-  title: "@tsed/react-formio/InputTags",
-  component: InputTags,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "object"
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    },
-    description: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <InputTags {...args} />;
-};
-
-Sandbox.args = {
-  name: "name",
-  label: "Label",
-  value: ["test"],
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithPrefix = (args: any) => {
-  return <InputTags prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: [],
-  name: "name",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithSuffix = (args: any) => {
-  return <InputTags suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: [],
-  name: "name",
-  size: "",
-  placeholder: "Placeholder"
-};
diff --git a/packages/react-formio/src/components/modal/removeModal.component.tsx b/packages/react-formio/src/components/modal/removeModal.component.tsx
index 5aa4d05..2af8d63 100644
--- a/packages/react-formio/src/components/modal/removeModal.component.tsx
+++ b/packages/react-formio/src/components/modal/removeModal.component.tsx
@@ -1,8 +1,8 @@
 import classnames from "classnames";
 import { PropsWithChildren, useState } from "react";
 
+import { InputText } from "../../molecules/forms/input-text/InputText";
 import { iconClass } from "../../utils/iconClass";
-import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";
 
 function RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {
diff --git a/packages/react-formio/src/components/select/select.component.tsx b/packages/react-formio/src/components/select/select.component.tsx
index 83d989a..bb8f500 100644
--- a/packages/react-formio/src/components/select/select.component.tsx
+++ b/packages/react-formio/src/components/select/select.component.tsx
@@ -2,8 +2,8 @@ import Choices from "@formio/choices.js";
 import classnames from "classnames";
 import { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
 
+import { FormControl, FormControlProps } from "../../molecules/forms/form-control/FormControl";
 import { getEventValue } from "../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
 export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
   size?: string;
diff --git a/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.tsx b/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.tsx
index 1467920..61f0ff7 100644
--- a/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.tsx
+++ b/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { FilterProps } from "react-table";
 
-import { InputText } from "../../input-text/inputText.component";
+import { InputText } from "../../../molecules/forms/input-text/InputText";
 
 export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(
   props: FilterProps<D> & {
diff --git a/packages/react-formio/src/molecules/__fixtures__/useValue.hook.ts b/packages/react-formio/src/molecules/__fixtures__/useValue.hook.ts
new file mode 100644
index 0000000..96443ad
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/useValue.hook.ts
@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const useValue = (args: any) => {
+  const [value, setValue] = useState(args.value);
+
+  return {
+    ...args,
+    value,
+    onChange(name: string, value: any) {
+      setValue(value);
+      args.onChange(name, value);
+    }
+  };
+};
diff --git a/packages/react-formio/src/components/form-control/formControl.component.spec.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.spec.tsx
similarity index 81%
rename from packages/react-formio/src/components/form-control/formControl.component.spec.tsx
rename to packages/react-formio/src/molecules/forms/form-control/FormControl.spec.tsx
index 02fc0b3..fcb1ece 100644
--- a/packages/react-formio/src/components/form-control/formControl.component.spec.tsx
+++ b/packages/react-formio/src/molecules/forms/form-control/FormControl.spec.tsx
@@ -1,11 +1,12 @@
 import { render, screen } from "@testing-library/react";
 
-import { iconClass } from "../../utils/iconClass";
-import { Sandbox, WithDescription, WithPrefix, WithSuffix } from "./formControl.stories";
+import { iconClass } from "../../../utils/iconClass";
+import { FormControl } from "./FormControl";
+import { Sandbox } from "./FormControl.stories";
 
 describe("form-control", () => {
   it("should display form control component", () => {
-    render(<Sandbox {...Sandbox.args} name='test' />);
+    render(<FormControl {...Sandbox.args} name='test' />);
 
     const formGroup = screen.getByTestId("form-group-test") as HTMLFormElement;
 
@@ -14,7 +15,7 @@ describe("form-control", () => {
 
   it("should NOT display form-control component without a name attribute defined", () => {
     const name = "";
-    render(<Sandbox {...Sandbox.args} name={name} />);
+    render(<FormControl {...Sandbox.args} name={name} />);
 
     const formGroup = screen.queryByTestId(`form-group-${name}`) as HTMLFormElement;
 
@@ -22,7 +23,7 @@ describe("form-control", () => {
   });
 
   it("should display form-control component with className 'field-required' when the props 'required' is set to true", () => {
-    render(<Sandbox {...Sandbox.args} required={true} name='test' />);
+    render(<FormControl {...Sandbox.args} required={true} name='test' />);
 
     const formGroup = screen.getByTestId("form-group-test") as HTMLFormElement;
     const formControlLabel = screen.getByTestId(`form-control-label`) as HTMLLabelElement;
@@ -35,7 +36,7 @@ describe("form-control", () => {
   it("should display prefix", () => {
     const fontAwsomeCalendarIcon = "fa fa-calendar";
     const prefix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
-    render(<WithPrefix {...Sandbox.args} name='testPrefix' prefix={prefix} />);
+    render(<FormControl {...Sandbox.args} name='testPrefix' prefix={prefix} />);
 
     const formGroup = screen.getByTestId("form-group-testPrefix") as HTMLFormElement;
     const formControlPrefix = screen.getByTestId("form-control-prefix") as HTMLSpanElement;
@@ -49,7 +50,7 @@ describe("form-control", () => {
   it("should display suffix", () => {
     const fontAwsomeCalendarIcon = "fa fa-calendar";
     const suffix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
-    render(<WithSuffix {...Sandbox.args} name='testSuffix' suffix={suffix} />);
+    render(<FormControl {...Sandbox.args} name='testSuffix' suffix={suffix} />);
 
     const formGroup = screen.getByTestId("form-group-testSuffix") as HTMLFormElement;
     const formControlSuffix = screen.getByTestId("form-control-suffix") as HTMLSpanElement;
@@ -62,7 +63,7 @@ describe("form-control", () => {
 
   it("should display description", () => {
     const description = "test description";
-    render(<WithDescription {...Sandbox.args} name='testDescription' description={description} />);
+    render(<FormControl {...Sandbox.args} name='testDescription' description={description} />);
 
     const formGroup = screen.getByTestId("form-group-testDescription") as HTMLFormElement;
     const formControlDescription = screen.getByTestId("form-control-description") as HTMLDivElement;
diff --git a/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
new file mode 100644
index 0000000..b457bb3
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { iconClass } from "../../../utils/iconClass";
+import { FormControl } from "./FormControl";
+/**
+ * ```tsx
+ * import {FormControl} from "@tsed/react-formio/molecules/forms/form-control/FormControl";
+ * ```
+ */
+export default {
+  title: "forms/FormControl",
+  component: FormControl,
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    name: {
+      control: {
+        type: "text"
+      }
+    },
+    children: {
+      control: {
+        type: "object"
+      }
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+} satisfies Meta<typeof FormControl>;
+
+type Story = StoryObj<typeof FormControl>;
+
+export const Sandbox: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]"
+  }
+};
+
+export const Usage: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]",
+    prefix: <i className={iconClass(undefined, "calendar")} />
+  }
+};
+
+export const WithSuffix: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]",
+    suffix: <i className={iconClass(undefined, "calendar")} />
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]"
+  }
+};
diff --git a/packages/react-formio/src/components/form-control/formControl.component.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx
similarity index 100%
rename from packages/react-formio/src/components/form-control/formControl.component.tsx
rename to packages/react-formio/src/molecules/forms/form-control/FormControl.tsx
diff --git a/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx b/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
new file mode 100644
index 0000000..6895599
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { iconClass } from "../../../utils/iconClass";
+import { useValue } from "../../__fixtures__/useValue.hook";
+import { InputTags } from "./InputTags";
+
+/**
+ * ```tsx
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+ * ```
+ */
+export default {
+  title: "forms/InputTags",
+  component: InputTags,
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    name: {
+      control: {
+        type: "text"
+      }
+    },
+    value: {
+      control: {
+        type: "object"
+      }
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["sm", "normal"]
+      }
+    },
+    placeholder: {
+      control: {
+        type: "text"
+      }
+    },
+    choices: {
+      control: {
+        type: "object"
+      }
+    },
+    description: {
+      control: {
+        type: "text"
+      }
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+} satisfies Meta<typeof InputTags>;
+
+type Story = StoryObj<typeof InputTags>;
+
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: ["test"],
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+export const WithPrefix: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <InputTags prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+  },
+  args: {
+    label: "Label",
+    value: [],
+    name: "name",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+export const WithSuffix: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <InputTags suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+  },
+  args: {
+    label: "Label",
+    value: [],
+    name: "name",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
diff --git a/packages/react-formio/src/components/input-tags/inputTags.component.tsx b/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
similarity index 94%
rename from packages/react-formio/src/components/input-tags/inputTags.component.tsx
rename to packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
index 6d27e31..bcd2f4e 100644
--- a/packages/react-formio/src/components/input-tags/inputTags.component.tsx
+++ b/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
@@ -2,7 +2,7 @@ import Choices from "@formio/choices.js";
 import uniq from "lodash/uniq";
 import { useEffect, useRef } from "react";
 
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
+import { FormControl, FormControlProps } from "../form-control/FormControl";
 
 export interface InputTagsProps<T = any> extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
   value?: T;
diff --git a/packages/react-formio/src/components/input-text/inputText.component.spec.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.spec.tsx
similarity index 95%
rename from packages/react-formio/src/components/input-text/inputText.component.spec.tsx
rename to packages/react-formio/src/molecules/forms/input-text/InputText.spec.tsx
index 7644493..b9e8c86 100644
--- a/packages/react-formio/src/components/input-text/inputText.component.spec.tsx
+++ b/packages/react-formio/src/molecules/forms/input-text/InputText.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { InputText } from "./inputText.component";
-import { Usage } from "./inputText.stories";
+import { InputText } from "./InputText";
+import { Usage } from "./InputText.stories";
 
 describe("input-text", () => {
   it("should display the input-text component", () => {
diff --git a/packages/react-formio/src/components/input-text/inputText.stories.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
similarity index 90%
rename from packages/react-formio/src/components/input-text/inputText.stories.tsx
rename to packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
index c0c88bb..31e4a43 100644
--- a/packages/react-formio/src/components/input-text/inputText.stories.tsx
+++ b/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
@@ -1,27 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, within } from "@storybook/test";
-import { useState } from "react";
 
-import { iconClass } from "../../utils/iconClass";
-import { InputText } from "./inputText.component";
+import { iconClass } from "../../../utils/iconClass";
+import { useValue } from "../../__fixtures__/useValue.hook";
+import { InputText } from "./InputText";
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
+/**
+ * Text Fields let users enter and edit text.
+ *
+ * ```tsx
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/InputText",
+  title: "forms/InputText",
   component: InputText,
   argTypes: {
     label: {
diff --git a/packages/react-formio/src/components/input-text/inputText.component.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.tsx
similarity index 91%
rename from packages/react-formio/src/components/input-text/inputText.component.tsx
rename to packages/react-formio/src/molecules/forms/input-text/InputText.tsx
index 2534ff5..ea7b6fb 100644
--- a/packages/react-formio/src/components/input-text/inputText.component.tsx
+++ b/packages/react-formio/src/molecules/forms/input-text/InputText.tsx
@@ -2,8 +2,8 @@ import classnames from "classnames";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
-import { getEventValue } from "../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
+import { getEventValue } from "../../../utils/getEventValue";
+import { FormControl, FormControlProps } from "../form-control/FormControl";
 
 export interface InputTextProps<Data = any> extends FormControlProps<Data> {
   type?: string;
diff --git a/packages/tailwind-formio/styles/choices.css b/packages/tailwind-formio/styles/choices.css
index 91cab86..5b40ac4 100644
--- a/packages/tailwind-formio/styles/choices.css
+++ b/packages/tailwind-formio/styles/choices.css
@@ -201,7 +201,7 @@
     }
 
     .choices__item {
-      @apply inline-block align-middle rounded py-1 px-2.5 text-xs font-semibold mr-1 mb-1 bg-primary-500 border-1 border-solid border-primary-600 text-white ;
+      @apply inline-flex align-middle rounded py-1 px-2.5 text-xs font-semibold mr-1 mb-1 bg-primary-500 border-1 border-solid border-primary-600 text-white ;
       word-break: break-all;
       box-sizing: border-box;
 

From 471566840d9a2cabe506ce88e0b352f5efa5a891 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 10:29:58 +0100
Subject: [PATCH 06/12] refactor(react-formio): move Select inside molecules

---
 packages/react-formio-container/package.json  |   3 +-
 .../src/views/formPreview.view.tsx            |   5 +-
 .../src/views/submission.view.tsx             |  11 +-
 .../actions-table/actionsTable.component.tsx  |   2 +-
 .../form-edit/formParameters.component.tsx    |   2 +-
 packages/react-formio/src/components/index.ts |   1 -
 .../pagination/pagination.component.tsx       |   2 +-
 .../src/components/select/select.stories.tsx  | 173 ------------------
 .../filters/selectColumnFilter.component.tsx  |   2 +-
 .../forms/select/Select.spec.tsx}             |  21 ++-
 .../molecules/forms/select/Select.stories.tsx | 167 +++++++++++++++++
 .../forms/select/Select.tsx}                  |   4 +-
 packages/redux-utils/package.json             |   3 +-
 packages/tailwind-formio/package.json         |   4 +-
 tools/typescript/package.json                 |   5 +-
 tools/vitest/package.json                     |   4 +-
 16 files changed, 211 insertions(+), 198 deletions(-)
 delete mode 100644 packages/react-formio/src/components/select/select.stories.tsx
 rename packages/react-formio/src/{components/select/select.component.spec.tsx => molecules/forms/select/Select.spec.tsx} (74%)
 create mode 100644 packages/react-formio/src/molecules/forms/select/Select.stories.tsx
 rename packages/react-formio/src/{components/select/select.component.tsx => molecules/forms/select/Select.tsx} (93%)

diff --git a/packages/react-formio-container/package.json b/packages/react-formio-container/package.json
index 13eef75..3dfbf9f 100644
--- a/packages/react-formio-container/package.json
+++ b/packages/react-formio-container/package.json
@@ -97,5 +97,6 @@
     "tooltip.js": {
       "optional": false
     }
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/react-formio-container/src/views/formPreview.view.tsx b/packages/react-formio-container/src/views/formPreview.view.tsx
index be4f0dd..4dc5e81 100644
--- a/packages/react-formio-container/src/views/formPreview.view.tsx
+++ b/packages/react-formio-container/src/views/formPreview.view.tsx
@@ -1,4 +1,5 @@
-import { Card, Form } from "@tsed/react-formio";
+import { Form, FormType } from "@tsed/react-formio";
+import { Card } from "@tsed/react-formio/molecules/card/Card";
 
 import { useForm } from "../hooks";
 
@@ -6,7 +7,7 @@ export function FormPreviewView({ form, i18n }: ReturnType<typeof useForm>) {
   return (
     <div className={"p-10 bg-gray-500"}>
       <Card label={form.title || ""} className={"shadow"}>
-        <Form form={form} options={{ i18n }} />
+        <Form form={form as FormType} options={{ i18n }} />
       </Card>
     </div>
   );
diff --git a/packages/react-formio-container/src/views/submission.view.tsx b/packages/react-formio-container/src/views/submission.view.tsx
index 6fc795c..47e49ae 100644
--- a/packages/react-formio-container/src/views/submission.view.tsx
+++ b/packages/react-formio-container/src/views/submission.view.tsx
@@ -1,4 +1,4 @@
-import { Form, iconClass, Loader, RemoveModal, useTooltip } from "@tsed/react-formio";
+import { Form, FormType, iconClass, Loader, RemoveModal, useTooltip } from "@tsed/react-formio";
 import classnames from "classnames";
 import { useParams } from "react-router";
 
@@ -62,7 +62,14 @@ export function SubmissionComponent(props: ReturnType<typeof useSubmission>) {
           </button>
         </div>
       </h2>
-      <Form form={form} submission={submission as any} onSubmit={saveSubmission} onFormReady={onFormReady} url={url} options={{ i18n }} />
+      <Form
+        form={form as FormType}
+        submission={submission as any}
+        onSubmit={saveSubmission}
+        onFormReady={onFormReady}
+        url={url}
+        options={{ i18n }}
+      />
       {submissionAction === "delete" && (
         <RemoveModalComponent
           i18n={i18n}
diff --git a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx b/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
index 6c50a0e..48e6bf5 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
+++ b/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
@@ -3,8 +3,8 @@ import noop from "lodash/noop";
 import { useState } from "react";
 
 import { ActionType } from "../../interfaces";
+import { Select } from "../../molecules/forms/select/Select";
 import { iconClass } from "../../utils/iconClass";
-import { Select } from "../select/select.component";
 import { TableProps } from "../table/hooks/useCustomTable.hook";
 import { Table } from "../table/table.component";
 
diff --git a/packages/react-formio/src/components/form-edit/formParameters.component.tsx b/packages/react-formio/src/components/form-edit/formParameters.component.tsx
index 758e140..1af52e5 100644
--- a/packages/react-formio/src/components/form-edit/formParameters.component.tsx
+++ b/packages/react-formio/src/components/form-edit/formParameters.component.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import { FormType } from "../../interfaces/FormType";
 import { InputTags } from "../../molecules/forms/input-tags/InputTags";
 import { InputText } from "../../molecules/forms/input-text/InputText";
-import { Select } from "../select/select.component";
+import { Select } from "../../molecules/forms/select/Select";
 
 export const defaultDisplayChoices = [
   { label: "Form", value: "form" },
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index b4a96b8..25adf07 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -14,7 +14,6 @@ export * from "./loader/loader.component";
 export * from "./modal/modal.component";
 export * from "./modal/removeModal.component";
 export * from "./pagination/pagination.component";
-export * from "./select/select.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table";
 export * from "./tabs/tabs.component";
diff --git a/packages/react-formio/src/components/pagination/pagination.component.tsx b/packages/react-formio/src/components/pagination/pagination.component.tsx
index 95f06e9..3819f43 100644
--- a/packages/react-formio/src/components/pagination/pagination.component.tsx
+++ b/packages/react-formio/src/components/pagination/pagination.component.tsx
@@ -1,7 +1,7 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
-import { Select } from "../select/select.component";
+import { Select } from "../../molecules/forms/select/Select";
 import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";
 
 function PaginationButton(
diff --git a/packages/react-formio/src/components/select/select.stories.tsx b/packages/react-formio/src/components/select/select.stories.tsx
deleted file mode 100644
index 6488e8f..0000000
--- a/packages/react-formio/src/components/select/select.stories.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { Select } from "./select.component";
-
-const choices = [
-  { label: "label1", value: "value1" },
-  { label: "label2", value: "value2" }
-];
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
-export default {
-  title: "@tsed/react-formio/Select",
-  component: Select,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "select",
-        options: choices
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    layout: {
-      control: {
-        type: "select",
-        options: ["html5", "choicesjs"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-Sandbox.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const Choicesjs = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-Choicesjs.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const ChoicesjsPrefix = (args: any) => {
-  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-ChoicesjsPrefix.args = {
-  label: "Label",
-  name: "name",
-  value: "",
-  size: "",
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const WithPrefix = (args: any) => {
-  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const WithSuffix = (args: any) => {
-  return <Select suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const TypeMultiple = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-TypeMultiple.args = {
-  label: "Label",
-  name: "name",
-  value: [],
-  size: "",
-  multiple: true,
-  placeholder: "Placeholder",
-  description: "Select multiple values",
-  choices
-};
-
-export const ChoicesjsMultiple = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-ChoicesjsMultiple.args = {
-  label: "Label",
-  value: [],
-  size: "",
-  multiple: true,
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const Sizing = (args: any) => {
-  return <Select suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-Sizing.args = {
-  label: "Label",
-  value: "",
-  size: "sm",
-  placeholder: "Placeholder",
-  description: "Use dollars!",
-  choices
-};
diff --git a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx b/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
index 9369f56..bd5f94a 100644
--- a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
+++ b/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
@@ -1,6 +1,6 @@
 import { FilterProps } from "react-table";
 
-import { Select } from "../../select/select.component";
+import { Select } from "../../../molecules/forms/select/Select";
 
 export function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
   const { column } = props;
diff --git a/packages/react-formio/src/components/select/select.component.spec.tsx b/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
similarity index 74%
rename from packages/react-formio/src/components/select/select.component.spec.tsx
rename to packages/react-formio/src/molecules/forms/select/Select.spec.tsx
index d6b4e2d..93ddda6 100644
--- a/packages/react-formio/src/components/select/select.component.spec.tsx
+++ b/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
@@ -1,17 +1,22 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Choicesjs, Sandbox } from "./select.stories";
+import { Select } from "./Select";
+import { Choicesjs, Usage } from "./Select.stories";
+const choices = [
+  { label: "label1", value: "value1" },
+  { label: "label2", value: "value2" }
+];
 
 describe("Select", () => {
   describe("select component Usage version", () => {
     it("should render the select component", () => {
-      render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
+      render(<Select {...Usage.args} choices={choices} name={"test-sandbox"} />);
 
       expect(screen.getByTestId("select_test-sandbox")).toBeInTheDocument();
     });
 
     it("should render the select component with a different size", () => {
-      render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
+      render(<Select {...Usage.args} choices={choices} size='small' name={"test-sandbox"} />);
       const select = screen.getByTestId("select_test-sandbox");
       expect(select).toBeInTheDocument();
       expect(select).toHaveClass("form-control-small");
@@ -25,7 +30,7 @@ describe("Select", () => {
 
       const placeHolderTest = "Placeholder test";
 
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+      render(<Select {...Usage.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
 
       expect(screen.getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
       expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
@@ -39,7 +44,7 @@ describe("Select", () => {
       ];
       const placeHolderTest = "Placeholder test";
 
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+      render(<Select {...Usage.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
       const option = screen.getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
 
       expect(option.selected).toBeTruthy();
@@ -53,7 +58,7 @@ describe("Select", () => {
       const placeHolderTest = "Placeholder test";
       const onChange = vi.fn();
 
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
+      render(<Select {...Usage.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
 
       fireEvent.change(screen.getByTestId("select_test-sandbox"), {
         target: { value: "value1" }
@@ -74,9 +79,7 @@ describe("Select", () => {
       ];
       const placeHolderTest = "Placeholder test";
 
-      render(
-        <Choicesjs {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />
-      );
+      render(<Select {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />);
 
       expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
     });
diff --git a/packages/react-formio/src/molecules/forms/select/Select.stories.tsx b/packages/react-formio/src/molecules/forms/select/Select.stories.tsx
new file mode 100644
index 0000000..9ee076b
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/Select.stories.tsx
@@ -0,0 +1,167 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { iconClass } from "../../../utils/iconClass";
+import { useValue } from "../../__fixtures__/useValue.hook";
+import { Select } from "./Select";
+
+const choices = [
+  { label: "label1", value: "value1" },
+  { label: "label2", value: "value2" }
+];
+
+/**
+ * Select components are used for collecting user provided information from a list of options.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * ```
+ */
+export default {
+  title: "forms/Select",
+  component: Select,
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    name: {
+      control: {
+        type: "text"
+      }
+    },
+    value: {
+      control: {
+        type: "select",
+        options: choices
+      }
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["sm", "normal"]
+      }
+    },
+    layout: {
+      control: {
+        type: "select",
+        options: ["html5", "choicesjs"]
+      }
+    },
+    placeholder: {
+      control: {
+        type: "text"
+      }
+    },
+    choices: {
+      control: {
+        type: "object"
+      }
+    }
+  },
+  parameters: {},
+  render(args: any) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <Select {...useValue(args)} />;
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    choices
+  }
+};
+/**
+ * Use Choice.js to render the Select component.
+ */
+export const Choicesjs: Story = {
+  args: {
+    label: "Label",
+    value: "",
+    size: "",
+    layout: "choicesjs",
+    placeholder: "Placeholder",
+    choices
+  }
+};
+
+export const ChoicesjsPrefix: Story = {
+  args: {
+    prefix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    name: "name",
+    value: "",
+    size: "",
+    layout: "choicesjs",
+    placeholder: "Placeholder",
+    choices
+  }
+};
+
+export const WithPrefix: Story = {
+  args: {
+    prefix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    choices
+  }
+};
+
+export const WithSuffix: Story = {
+  args: {
+    suffix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    choices
+  }
+};
+
+export const TypeMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    choices
+  }
+};
+
+export const ChoicesjsMultiple: Story = {
+  args: {
+    label: "Label",
+    value: [],
+    size: "",
+    multiple: true,
+    layout: "choicesjs",
+    placeholder: "Placeholder",
+    choices
+  }
+};
+
+export const Sizing: Story = {
+  args: {
+    suffix: <i className={iconClass(undefined, "dollar")} />,
+    label: "Label",
+    value: "",
+    size: "sm",
+    placeholder: "Placeholder",
+    description: "Use dollars!",
+    choices
+  }
+};
diff --git a/packages/react-formio/src/components/select/select.component.tsx b/packages/react-formio/src/molecules/forms/select/Select.tsx
similarity index 93%
rename from packages/react-formio/src/components/select/select.component.tsx
rename to packages/react-formio/src/molecules/forms/select/Select.tsx
index bb8f500..ebca4fb 100644
--- a/packages/react-formio/src/components/select/select.component.tsx
+++ b/packages/react-formio/src/molecules/forms/select/Select.tsx
@@ -2,8 +2,8 @@ import Choices from "@formio/choices.js";
 import classnames from "classnames";
 import { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
 
-import { FormControl, FormControlProps } from "../../molecules/forms/form-control/FormControl";
-import { getEventValue } from "../../utils/getEventValue";
+import { getEventValue } from "../../../utils/getEventValue";
+import { FormControl, FormControlProps } from "../form-control/FormControl";
 
 export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
   size?: string;
diff --git a/packages/redux-utils/package.json b/packages/redux-utils/package.json
index d4cccb4..08532d8 100644
--- a/packages/redux-utils/package.json
+++ b/packages/redux-utils/package.json
@@ -27,5 +27,6 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "redux": "^4.0.5"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/tailwind-formio/package.json b/packages/tailwind-formio/package.json
index dab95c2..e507c33 100644
--- a/packages/tailwind-formio/package.json
+++ b/packages/tailwind-formio/package.json
@@ -49,5 +49,7 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "dependencies": {},
+  "peerDependencies": {}
 }
diff --git a/tools/typescript/package.json b/tools/typescript/package.json
index d1b85f1..d8c5f83 100644
--- a/tools/typescript/package.json
+++ b/tools/typescript/package.json
@@ -7,5 +7,8 @@
   "main": "index.js",
   "exports": {
     "./tsconfig.web.json": "./tsconfig.web.json"
-  }
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {}
 }
diff --git a/tools/vitest/package.json b/tools/vitest/package.json
index 3948f07..8cbb71a 100644
--- a/tools/vitest/package.json
+++ b/tools/vitest/package.json
@@ -14,5 +14,7 @@
   },
   "scripts": {
     "generate": "node index.js"
-  }
+  },
+  "dependencies": {},
+  "peerDependencies": {}
 }

From 4893f05fdde062b6daa64c45429712f76a289814 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 10:48:27 +0100
Subject: [PATCH 07/12] refactor(react-formio): move Loader inside molecules

---
 .storybook/main.ts                            |  1 -
 .../src/views/formExport.view.tsx             |  3 +-
 packages/react-formio/src/components/index.ts |  1 -
 .../src/components/loader/loader.stories.tsx  | 16 ------
 .../loader/Loader.spec.tsx}                   |  6 +--
 .../src/molecules/loader/Loader.stories.tsx   | 51 +++++++++++++++++++
 .../loader/Loader.tsx}                        |  4 +-
 7 files changed, 58 insertions(+), 24 deletions(-)
 delete mode 100644 packages/react-formio/src/components/loader/loader.stories.tsx
 rename packages/react-formio/src/{components/loader/loader.component.spec.tsx => molecules/loader/Loader.spec.tsx} (79%)
 create mode 100644 packages/react-formio/src/molecules/loader/Loader.stories.tsx
 rename packages/react-formio/src/{components/loader/loader.component.tsx => molecules/loader/Loader.tsx} (67%)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8ef62ef..f1456bc 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -29,7 +29,6 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-mdx-gfm",
     "@storybook/addon-links",
-    "@storybook/addon-interactions",
     "@chromatic-com/storybook",
     "storybook-addon-mock"
   ],
diff --git a/packages/react-formio-container/src/views/formExport.view.tsx b/packages/react-formio-container/src/views/formExport.view.tsx
index e41644e..660f6e6 100644
--- a/packages/react-formio-container/src/views/formExport.view.tsx
+++ b/packages/react-formio-container/src/views/formExport.view.tsx
@@ -1,4 +1,5 @@
-import { Card, iconClass } from "@tsed/react-formio";
+import { iconClass } from "@tsed/react-formio";
+import { Card } from "@tsed/react-formio/molecules/card/Card";
 
 import { UseFormProps } from "../hooks/useForm.hook";
 import { useFormExport } from "../hooks/useFormExport";
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index 25adf07..fdcffed 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -10,7 +10,6 @@ export * from "./form-edit/formParameters.component";
 export * from "./form-edit/useFormEdit.hook";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
-export * from "./loader/loader.component";
 export * from "./modal/modal.component";
 export * from "./modal/removeModal.component";
 export * from "./pagination/pagination.component";
diff --git a/packages/react-formio/src/components/loader/loader.stories.tsx b/packages/react-formio/src/components/loader/loader.stories.tsx
deleted file mode 100644
index 29768d8..0000000
--- a/packages/react-formio/src/components/loader/loader.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Loader } from "./loader.component";
-
-export default {
-  title: "@tsed/react-formio/Loader",
-  component: Loader,
-  argTypes: {},
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Loader {...args} />;
-};
-
-Sandbox.args = {
-  isActive: true
-};
diff --git a/packages/react-formio/src/components/loader/loader.component.spec.tsx b/packages/react-formio/src/molecules/loader/Loader.spec.tsx
similarity index 79%
rename from packages/react-formio/src/components/loader/loader.component.spec.tsx
rename to packages/react-formio/src/molecules/loader/Loader.spec.tsx
index f8158a8..7868b50 100644
--- a/packages/react-formio/src/components/loader/loader.component.spec.tsx
+++ b/packages/react-formio/src/molecules/loader/Loader.spec.tsx
@@ -1,10 +1,10 @@
 import { render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./loader.stories";
+import { Loader } from "./Loader";
 
 describe("Loader", () => {
   it("should render a component (when isActive = true)", () => {
-    render(<Sandbox isActive={true} />);
+    render(<Loader isActive={true} />);
 
     const icon = screen.getByTestId("icon_radio-circle");
 
@@ -13,7 +13,7 @@ describe("Loader", () => {
   });
 
   it("should render a component (when isActive = false)", () => {
-    render(<Sandbox isActive={false} />);
+    render(<Loader isActive={false} />);
 
     const icon = screen.queryByTestId("icon_radio-circle");
 
diff --git a/packages/react-formio/src/molecules/loader/Loader.stories.tsx b/packages/react-formio/src/molecules/loader/Loader.stories.tsx
new file mode 100644
index 0000000..61b6d50
--- /dev/null
+++ b/packages/react-formio/src/molecules/loader/Loader.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import tailwind from "@tsed/tailwind-formio";
+
+import { Loader } from "./Loader";
+console.log(Object.keys(tailwind.templates.tailwind.ICONS));
+/**
+ * Component to display loader
+ *
+ * ```tsx
+ * import {Loader} from "@tsed/react-formio/molecules/loader/Loader";
+ * ```
+ */
+export default {
+  title: "Loader",
+  component: Loader,
+  argTypes: {
+    isActive: {
+      control: {
+        type: "boolean"
+      }
+    },
+    color: {
+      control: {
+        type: "text"
+      }
+    },
+    icon: {
+      control: {
+        type: "select",
+        options: Object.keys(tailwind.templates.tailwind.ICONS)
+      }
+    },
+    className: {
+      control: {
+        type: "text"
+      }
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+} satisfies Meta<typeof Loader>;
+
+type Story = StoryObj<typeof Loader>;
+
+export const Usage: Story = {
+  args: {
+    icon: "radio-circle",
+    color: "text-blue",
+    isActive: true
+  }
+};
diff --git a/packages/react-formio/src/components/loader/loader.component.tsx b/packages/react-formio/src/molecules/loader/Loader.tsx
similarity index 67%
rename from packages/react-formio/src/components/loader/loader.component.tsx
rename to packages/react-formio/src/molecules/loader/Loader.tsx
index f82d6a2..032f1e2 100644
--- a/packages/react-formio/src/components/loader/loader.component.tsx
+++ b/packages/react-formio/src/molecules/loader/Loader.tsx
@@ -10,7 +10,7 @@ export interface LoaderProps {
   className?: string;
 }
 
-export function Loader({ isActive, color = "blue", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
+export function Loader({ isActive, color = "text-primary", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
   if (isActive) {
     return (
       <div
@@ -19,7 +19,7 @@ export function Loader({ isActive, color = "blue", icon = "radio-circle", classN
           className
         )}
       >
-        <span data-testid={`icon_${icon}`} color={color} className={`text-11xl ${iconClass(undefined, icon, true)}`} />
+        <span data-testid={`icon_${icon}`} className={`text-8xl ${color} ${iconClass(undefined, icon, true)}`} />
       </div>
     );
   }

From ff49dc04c63ab046412eff87f953d8bddf50db1c Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 11:57:57 +0100
Subject: [PATCH 08/12] refactor(react-formio): move Modal inside
 molecules/organisms

---
 .storybook/main.ts                            |   8 +-
 packages/react-formio/src/components/index.ts |   2 -
 .../src/components/modal/modal.stories.tsx    | 190 ------------------
 .../src/molecules/loader/Loader.stories.tsx   |   2 +-
 .../modal/Modal.spec.tsx}                     | 135 ++++++++++++-
 .../src/molecules/modal/Modal.stories.tsx     | 178 ++++++++++++++++
 .../modal/Modal.tsx}                          |   0
 .../organisms/modal/RemoveModal.stories.tsx   |  61 ++++++
 .../modal/RemoveModal.tsx}                    |   2 +-
 9 files changed, 376 insertions(+), 202 deletions(-)
 delete mode 100644 packages/react-formio/src/components/modal/modal.stories.tsx
 rename packages/react-formio/src/{components/modal/modal.component.spec.tsx => molecules/modal/Modal.spec.tsx} (50%)
 create mode 100644 packages/react-formio/src/molecules/modal/Modal.stories.tsx
 rename packages/react-formio/src/{components/modal/modal.component.tsx => molecules/modal/Modal.tsx} (100%)
 create mode 100644 packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
 rename packages/react-formio/src/{components/modal/removeModal.component.tsx => organisms/modal/RemoveModal.tsx} (96%)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index f1456bc..9b10c6f 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -10,10 +10,10 @@ const config: StorybookConfig = {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"
     },
-    // {
-    //   titlePrefix: "@tsed/react-formio/Organisms",
-    //   directory: "../packages/react-formio/src/organisms/**/*.stories.@(js|jsx|ts|tsx)"
-    // },
+    {
+      titlePrefix: "Organisms",
+      directory: "../packages/react-formio/src/organisms"
+    },
     "../packages/react-formio/src/components/**/*.mdx",
     "../packages/react-formio/src/components/**/*.stories.@(js|jsx|ts|tsx)",
     "../packages/react-formio/src/components/**/*.story.@(js|jsx|ts|tsx)",
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index fdcffed..c4b4f67 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -10,8 +10,6 @@ export * from "./form-edit/formParameters.component";
 export * from "./form-edit/useFormEdit.hook";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
-export * from "./modal/modal.component";
-export * from "./modal/removeModal.component";
 export * from "./pagination/pagination.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table";
diff --git a/packages/react-formio/src/components/modal/modal.stories.tsx b/packages/react-formio/src/components/modal/modal.stories.tsx
deleted file mode 100644
index 3eb42df..0000000
--- a/packages/react-formio/src/components/modal/modal.stories.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { Modal, ModalProps, useModal } from "./modal.component";
-import { RemoveModal, RemoveModalProps } from "./removeModal.component";
-
-export default {
-  title: "@tsed/react-formio/Modal",
-  component: Modal,
-  argTypes: {
-    onSubmit: {
-      title: {
-        control: {
-          type: "text"
-        }
-      },
-      control: {
-        action: "onSubmit"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: ModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <Modal {...args} {...modal}>
-        <div className={"p-5"} style={{ height: "900px" }}>
-          Hello body
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-Sandbox.args = {};
-
-export const WithTitle = (args: ModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <Modal {...args} {...modal}>
-        <div className={"p-5"} style={{ height: "900px" }}>
-          Hello body
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-WithTitle.args = {
-  title: "Modal title"
-};
-
-export const WithFooter = (args: ModalProps) => {
-  const modal = useModal();
-
-  function ModalFooter({ closeModal, onSubmit }: any) {
-    return (
-      <div className={"flex items-center justify-center bg-white p-2"}>
-        <button
-          data-testid='customSubmitModal'
-          className={"btn btn-primary mx-1"}
-          onClick={(e) => {
-            onSubmit(e);
-            closeModal();
-          }}
-        >
-          Save
-        </button>
-
-        <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
-          Close
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <Modal {...args} {...modal} footer={ModalFooter}>
-        <div className={"px-5"} style={{ height: "900px" }}>
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-WithFooter.args = {
-  title: "Modal title"
-};
-
-export const WithRemoveModal = (args: RemoveModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <RemoveModal
-        {...args}
-        i18n={(f) => f}
-        show={modal.show}
-        onSubmit={modal.closeModal}
-        onClose={modal.closeModal}
-        closeModal={modal.closeModal}
-      />
-    </div>
-  );
-};
-
-WithRemoveModal.args = {
-  valueToCompare: "value",
-  itemType: "form"
-};
diff --git a/packages/react-formio/src/molecules/loader/Loader.stories.tsx b/packages/react-formio/src/molecules/loader/Loader.stories.tsx
index 61b6d50..beb9e6c 100644
--- a/packages/react-formio/src/molecules/loader/Loader.stories.tsx
+++ b/packages/react-formio/src/molecules/loader/Loader.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import tailwind from "@tsed/tailwind-formio";
 
 import { Loader } from "./Loader";
-console.log(Object.keys(tailwind.templates.tailwind.ICONS));
+
 /**
  * Component to display loader
  *
diff --git a/packages/react-formio/src/components/modal/modal.component.spec.tsx b/packages/react-formio/src/molecules/modal/Modal.spec.tsx
similarity index 50%
rename from packages/react-formio/src/components/modal/modal.component.spec.tsx
rename to packages/react-formio/src/molecules/modal/Modal.spec.tsx
index 1d81b7f..533bcfb 100644
--- a/packages/react-formio/src/components/modal/modal.component.spec.tsx
+++ b/packages/react-formio/src/molecules/modal/Modal.spec.tsx
@@ -1,13 +1,127 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { WithFooter, WithTitle } from "./modal.stories";
+import { Modal, useModal } from "./Modal";
+
+function WithTitle(props: any) {
+  const modal = useModal();
+
+  return (
+    <div>
+      <div>
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
+          Open modal
+        </button>
+      </div>
+      <Modal {...props} {...modal}>
+        <div className={"p-5"} style={{ height: "900px" }}>
+          Hello body
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+function WithFooter(args: any) {
+  const modal = useModal();
+
+  function ModalFooter({ closeModal, onSubmit }: any) {
+    return (
+      <div className={"flex items-center justify-center bg-white p-2"}>
+        <button
+          data-testid='customSubmitModal'
+          className={"btn btn-primary mx-1"}
+          onClick={(e) => {
+            onSubmit(e);
+            closeModal();
+          }}
+        >
+          Save
+        </button>
+
+        <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
+          Close
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div>
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
+          Open modal
+        </button>
+      </div>
+      <Modal {...args} {...modal} footer={ModalFooter}>
+        <div className={"px-5"} style={{ height: "900px" }}>
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+        </div>
+      </Modal>
+    </div>
+  );
+}
 
 describe("Modal", () => {
   describe("WithTitle", () => {
     it("should display the modal when we click on the button", async () => {
       const onClose = vi.fn();
 
-      render(<WithTitle {...WithTitle.args} onClose={onClose} />);
+      render(<WithTitle title='Modal title' onClose={onClose} />);
 
       expect(screen.queryByTestId("modalTitle")).toBeFalsy();
       expect(screen.queryByTestId("modalBody")).toBeFalsy();
@@ -34,7 +148,13 @@ describe("Modal", () => {
 
   describe("WithFooter", () => {
     it("should display the modal when we click on the button", async () => {
-      render(<WithFooter {...WithFooter.args} />);
+      render(
+        <WithFooter
+          {...{
+            title: "Modal title"
+          }}
+        />
+      );
 
       expect(screen.queryByTestId("modalTitle")).toBeFalsy();
       expect(screen.queryByTestId("modalBody")).toBeFalsy();
@@ -59,7 +179,14 @@ describe("Modal", () => {
     it("should call the onSubmit listener", async () => {
       const onSubmit = vi.fn();
 
-      render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
+      render(
+        <WithFooter
+          {...{
+            title: "Modal title"
+          }}
+          onSubmit={onSubmit}
+        />
+      );
 
       fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
diff --git a/packages/react-formio/src/molecules/modal/Modal.stories.tsx b/packages/react-formio/src/molecules/modal/Modal.stories.tsx
new file mode 100644
index 0000000..e09b81c
--- /dev/null
+++ b/packages/react-formio/src/molecules/modal/Modal.stories.tsx
@@ -0,0 +1,178 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Modal, ModalProps, useModal } from "./Modal";
+
+/**
+ * The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/modal/Modal";
+ * ```
+ */
+export default {
+  title: "Modal",
+  component: Modal,
+  argTypes: {
+    onSubmit: {
+      title: {
+        control: {
+          type: "text"
+        }
+      },
+      control: {
+        action: "onSubmit"
+      }
+    }
+  },
+  parameters: {},
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal}>
+          <div className={"p-5"} style={{ height: "900px" }}>
+            Hello body
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Modal>;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Sandbox: Story = {};
+
+export const WithTitle: Story = {
+  render: (args: ModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal}>
+          <div className={"p-5"} style={{ height: "900px" }}>
+            Hello body
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  args: {
+    title: "Modal title"
+  }
+};
+
+export const WithFooter = {
+  render: (args: ModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    function ModalFooter({ closeModal, onSubmit }: any) {
+      return (
+        <div className={"flex items-center justify-center bg-white p-2"}>
+          <button
+            data-testid='customSubmitModal'
+            className={"btn btn-primary mx-1"}
+            onClick={(e) => {
+              onSubmit(e);
+              closeModal();
+            }}
+          >
+            Save
+          </button>
+
+          <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
+            Close
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal} footer={ModalFooter}>
+          <div className={"px-5"} style={{ height: "900px" }}>
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  args: {
+    title: "Modal title"
+  }
+};
diff --git a/packages/react-formio/src/components/modal/modal.component.tsx b/packages/react-formio/src/molecules/modal/Modal.tsx
similarity index 100%
rename from packages/react-formio/src/components/modal/modal.component.tsx
rename to packages/react-formio/src/molecules/modal/Modal.tsx
diff --git a/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx b/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
new file mode 100644
index 0000000..9806301
--- /dev/null
+++ b/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { useModal } from "../../molecules/modal/Modal";
+import { RemoveModal, RemoveModalProps } from "./RemoveModal";
+
+/**
+ * Remove modal display a danger message and ask user to confirm action before executing the action.
+ *
+ * ```tsx
+ * import {RemoveModal} from "@tsed/react-formio/organisms/modal/RemoveModal";
+ * ```
+ */
+export default {
+  title: "RemoveModal",
+  component: RemoveModal,
+  argTypes: {
+    onSubmit: {
+      title: {
+        control: {
+          type: "text"
+        }
+      },
+      control: {
+        action: "onSubmit"
+      }
+    }
+  },
+  parameters: {},
+  render: (args: RemoveModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <RemoveModal
+          {...args}
+          i18n={(f) => f}
+          show={modal.show}
+          onSubmit={modal.closeModal}
+          onClose={modal.closeModal}
+          closeModal={modal.closeModal}
+        />
+      </div>
+    );
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof RemoveModal>;
+
+type Story = StoryObj<typeof RemoveModal>;
+
+export const Usage: Story = {
+  args: {
+    valueToCompare: "value",
+    itemType: "form"
+  }
+};
diff --git a/packages/react-formio/src/components/modal/removeModal.component.tsx b/packages/react-formio/src/organisms/modal/RemoveModal.tsx
similarity index 96%
rename from packages/react-formio/src/components/modal/removeModal.component.tsx
rename to packages/react-formio/src/organisms/modal/RemoveModal.tsx
index 2af8d63..265fbad 100644
--- a/packages/react-formio/src/components/modal/removeModal.component.tsx
+++ b/packages/react-formio/src/organisms/modal/RemoveModal.tsx
@@ -2,8 +2,8 @@ import classnames from "classnames";
 import { PropsWithChildren, useState } from "react";
 
 import { InputText } from "../../molecules/forms/input-text/InputText";
+import { Modal, ModalProps } from "../../molecules/modal/Modal";
 import { iconClass } from "../../utils/iconClass";
-import { Modal, ModalProps } from "./modal.component";
 
 function RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {
   return (

From d138696e143d4fb3e39da037cfffa59109511c87 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 7 Jan 2025 13:55:09 +0100
Subject: [PATCH 09/12] refactor(react-formio): move Pagination inside
 molecules

---
 packages/react-formio/src/components/index.ts |  1 -
 .../pagination/pagination.stories.tsx         | 40 -------------------
 .../table/hooks/useCustomTable.hook.tsx       |  2 +-
 .../src/components/table/table.component.tsx  |  2 +-
 .../pagination/Pagination.spec.tsx}           |  2 +-
 .../pagination/Pagination.stories.tsx         | 35 ++++++++++++++++
 .../pagination/Pagination.tsx}                |  4 +-
 7 files changed, 40 insertions(+), 46 deletions(-)
 delete mode 100644 packages/react-formio/src/components/pagination/pagination.stories.tsx
 rename packages/react-formio/src/{components/pagination/pagination.component.spec.tsx => molecules/pagination/Pagination.spec.tsx} (98%)
 create mode 100644 packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
 rename packages/react-formio/src/{components/pagination/pagination.component.tsx => molecules/pagination/Pagination.tsx} (96%)

diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index c4b4f67..9ac75ff 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -10,7 +10,6 @@ export * from "./form-edit/formParameters.component";
 export * from "./form-edit/useFormEdit.hook";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
-export * from "./pagination/pagination.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table";
 export * from "./tabs/tabs.component";
diff --git a/packages/react-formio/src/components/pagination/pagination.stories.tsx b/packages/react-formio/src/components/pagination/pagination.stories.tsx
deleted file mode 100644
index a042d69..0000000
--- a/packages/react-formio/src/components/pagination/pagination.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { Pagination } from "./pagination.component";
-
-export default {
-  title: "@tsed/react-formio/Pagination",
-  component: Pagination,
-
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
-
-  useEffect(() => {
-    args.gotoPage && args.gotoPage(currentPageIndex);
-  }, [currentPageIndex]);
-
-  return (
-    <div>
-      <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
-    </div>
-  );
-};
-
-Sandbox.args = {
-  pageSizes: [10, 25, 50, 100],
-  pageCount: 50,
-  pageIndex: 1
-  // gotoPage,
-  // canPreviousPage,
-  // previousPage,
-  // nextPage,
-  // canNextPage,
-  // pageCount,
-  // pageIndex,
-  // pageOptions,
-  // pageSize,
-  // setPageSize,
-};
diff --git a/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx b/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx
index 9077794..37139e4 100644
--- a/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx
+++ b/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx
@@ -15,7 +15,7 @@ import {
 } from "react-table";
 
 import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
-import { Pagination as DefaultPagination } from "../../pagination/pagination.component";
+import { Pagination as DefaultPagination } from "../../../molecules/pagination/Pagination";
 import { DefaultArrowSort } from "../components/defaultArrowSort.component";
 import { DefaultCellHeader, DefaultCellHeaderProps } from "../components/defaultCellHeader.component";
 import { DefaultRow, DefaultRowProps } from "../components/defaultRow.component";
diff --git a/packages/react-formio/src/components/table/table.component.tsx b/packages/react-formio/src/components/table/table.component.tsx
index 84b4888..5122949 100644
--- a/packages/react-formio/src/components/table/table.component.tsx
+++ b/packages/react-formio/src/components/table/table.component.tsx
@@ -1,7 +1,7 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
-import { PaginationProps } from "../pagination/pagination.component";
+import { PaginationProps } from "../../molecules/pagination/Pagination";
 import { DrapNDropContainer } from "./components/dragNDropContainer";
 import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";
 
diff --git a/packages/react-formio/src/components/pagination/pagination.component.spec.tsx b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
similarity index 98%
rename from packages/react-formio/src/components/pagination/pagination.component.spec.tsx
rename to packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
index a4a1f3a..94333e9 100644
--- a/packages/react-formio/src/components/pagination/pagination.component.spec.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./pagination.stories";
+import { Sandbox } from "./Pagination.stories";
 
 describe("Pagination", () => {
   it("should render the pagination component", () => {
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx b/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
new file mode 100644
index 0000000..df57069
--- /dev/null
+++ b/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+
+import { Pagination } from "./Pagination";
+
+export default {
+  title: "Pagination",
+  component: Pagination,
+  parameters: {},
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      args.gotoPage && args.gotoPage(currentPageIndex);
+    }, [currentPageIndex]);
+
+    return (
+      <div>
+        <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Pagination>;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Sandbox: Story = {
+  args: {
+    pageSizes: [10, 25, 50, 100],
+    pageCount: 50,
+    pageIndex: 1
+  }
+};
diff --git a/packages/react-formio/src/components/pagination/pagination.component.tsx b/packages/react-formio/src/molecules/pagination/Pagination.tsx
similarity index 96%
rename from packages/react-formio/src/components/pagination/pagination.component.tsx
rename to packages/react-formio/src/molecules/pagination/Pagination.tsx
index 3819f43..46abd5f 100644
--- a/packages/react-formio/src/components/pagination/pagination.component.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.tsx
@@ -1,8 +1,8 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
-import { Select } from "../../molecules/forms/select/Select";
-import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";
+import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../../components/table/utils/getPageNumbers";
+import { Select } from "../forms/select/Select";
 
 function PaginationButton(
   props: PropsWithChildren<

From cff996afe1652a24f28de93966998c6b69dc84fb Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 10 Jan 2025 08:49:20 +0100
Subject: [PATCH 10/12] refactor(react-formio): move Tabs inside molecules

---
 .../src/views/form.routes.tsx                 |   2 +-
 .../src/views/form.view.tsx                   |   4 +-
 .../src/views/formAction.view.tsx             |   3 +-
 .../src/views/submission.view.tsx             |   4 +-
 packages/react-formio/src/components/index.ts |   1 -
 .../tabs/tabs.component.stories.tsx           | 127 ----------------
 .../molecules/pagination/Pagination.spec.tsx  |  28 ++--
 .../pagination/Pagination.stories.tsx         |   7 +
 .../tabs/Tabs.spec.tsx}                       |   8 +-
 .../src/molecules/tabs/Tabs.stories.tsx       | 141 ++++++++++++++++++
 .../tabs/Tabs.tsx}                            |   0
 11 files changed, 178 insertions(+), 147 deletions(-)
 delete mode 100644 packages/react-formio/src/components/tabs/tabs.component.stories.tsx
 rename packages/react-formio/src/{components/tabs/tabs.component.spec.tsx => molecules/tabs/Tabs.spec.tsx} (93%)
 create mode 100644 packages/react-formio/src/molecules/tabs/Tabs.stories.tsx
 rename packages/react-formio/src/{components/tabs/tabs.component.tsx => molecules/tabs/Tabs.tsx} (100%)

diff --git a/packages/react-formio-container/src/views/form.routes.tsx b/packages/react-formio-container/src/views/form.routes.tsx
index 79fc6b0..8cbd521 100644
--- a/packages/react-formio-container/src/views/form.routes.tsx
+++ b/packages/react-formio-container/src/views/form.routes.tsx
@@ -1,4 +1,4 @@
-import type { TabsItemProps } from "@tsed/react-formio";
+import type { TabsItemProps } from "@tsed/react-formio/molecules/tabs/Tabs";
 import { AuthState, checkRoleFormAccess, FormType } from "@tsed/react-formio-stores";
 import { ComponentType } from "react";
 
diff --git a/packages/react-formio-container/src/views/form.view.tsx b/packages/react-formio-container/src/views/form.view.tsx
index 1ffabb0..6a0cc98 100644
--- a/packages/react-formio-container/src/views/form.view.tsx
+++ b/packages/react-formio-container/src/views/form.view.tsx
@@ -1,5 +1,7 @@
-import { Loader, RemoveModal, Tabs } from "@tsed/react-formio";
 import { Alert } from "@tsed/react-formio/molecules/alert/Alert";
+import { Loader } from "@tsed/react-formio/molecules/loader/Loader";
+import { Tabs } from "@tsed/react-formio/molecules/tabs/Tabs";
+import { RemoveModal } from "@tsed/react-formio/organisms/modal/RemoveModal";
 import { Route, Switch, useParams } from "react-router";
 
 import { useForm } from "../hooks/useForm.hook";
diff --git a/packages/react-formio-container/src/views/formAction.view.tsx b/packages/react-formio-container/src/views/formAction.view.tsx
index 68708b7..15924f6 100644
--- a/packages/react-formio-container/src/views/formAction.view.tsx
+++ b/packages/react-formio-container/src/views/formAction.view.tsx
@@ -1,4 +1,5 @@
-import { FormAction, iconClass, RemoveModal, useTooltip } from "@tsed/react-formio";
+import { FormAction, iconClass, useTooltip } from "@tsed/react-formio";
+import { RemoveModal } from "@tsed/react-formio/organisms/modal/RemoveModal";
 import classnames from "classnames";
 import { useParams } from "react-router";
 
diff --git a/packages/react-formio-container/src/views/submission.view.tsx b/packages/react-formio-container/src/views/submission.view.tsx
index 47e49ae..75427aa 100644
--- a/packages/react-formio-container/src/views/submission.view.tsx
+++ b/packages/react-formio-container/src/views/submission.view.tsx
@@ -1,4 +1,6 @@
-import { Form, FormType, iconClass, Loader, RemoveModal, useTooltip } from "@tsed/react-formio";
+import { Form, FormType, iconClass, useTooltip } from "@tsed/react-formio";
+import { Loader } from "@tsed/react-formio/molecules/loader/Loader";
+import { RemoveModal } from "@tsed/react-formio/organisms/modal/RemoveModal";
 import classnames from "classnames";
 import { useParams } from "react-router";
 
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index 9ac75ff..79b2e07 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -12,4 +12,3 @@ export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table";
-export * from "./tabs/tabs.component";
diff --git a/packages/react-formio/src/components/tabs/tabs.component.stories.tsx b/packages/react-formio/src/components/tabs/tabs.component.stories.tsx
deleted file mode 100644
index d8d24e3..0000000
--- a/packages/react-formio/src/components/tabs/tabs.component.stories.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useState } from "react";
-
-import { Tabs } from "./tabs.component";
-
-const useTabs = (args: any) => {
-  const [current, onClick] = useState(args.value);
-
-  return {
-    ...args,
-    current,
-    onClick
-  };
-};
-
-export default {
-  title: "@tsed/react-formio/Tabs",
-  component: Tabs,
-  argTypes: {},
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  const tabs = useTabs(args);
-
-  return (
-    <div className={"border-gray-300 border-1 shadow"}>
-      <Tabs {...tabs} i18n={(f) => f}>
-        <div className={"p-5"}>{tabs?.current?.action}</div>
-      </Tabs>
-    </div>
-  );
-};
-
-Sandbox.args = {
-  items: [
-    {
-      action: "back",
-      exact: true,
-      icon: "chevron-left",
-      back: true
-    },
-    {
-      action: "edit",
-      exact: true,
-      icon: "edit",
-      label: "Edit"
-    },
-    {
-      action: "submissions",
-      exact: false,
-      icon: "data",
-      label: "Data"
-    },
-    {
-      action: "preview",
-      exact: true,
-      icon: "test-tube",
-      label: "Preview"
-    },
-    {
-      action: "actions",
-      exact: false,
-      icon: "paper-plane",
-      label: "Actions"
-    },
-    {
-      action: "access",
-      exact: true,
-      icon: "lock",
-      label: "Access"
-    },
-    {
-      action: "export",
-      exact: true,
-      icon: "download",
-      label: "Export"
-    },
-    {
-      action: "delete",
-      exact: true,
-      icon: "trash",
-      label: "Delete",
-      roles: ["administrator", "owner"]
-    }
-  ]
-};
-
-function AddButton({ onCreate }: any) {
-  return (
-    <div>
-      <button onClick={onCreate}>+</button>
-    </div>
-  );
-}
-
-function HeaderChildren() {
-  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
-}
-
-export const WithCloseable = (args: any) => {
-  args.value = args.value === undefined ? 0 : args.value;
-  const tabs = useTabs(args);
-
-  return (
-    <div className={"border-gray-300 border-1 shadow"}>
-      <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
-        <div className={"p-5"}>{tabs?.current?.action}</div>
-      </Tabs>
-    </div>
-  );
-};
-
-WithCloseable.args = {
-  reverse: true,
-  items: [
-    {
-      exact: true,
-      action: 0,
-      label: "Test (0)"
-    },
-    {
-      exact: true,
-      action: 1,
-      label: "Test (1)"
-    }
-  ]
-};
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
index 94333e9..f30eb08 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
@@ -1,10 +1,16 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./Pagination.stories";
+import { Pagination } from "./Pagination";
+
+const args: any = {
+  pageSizes: [10, 25, 50, 100],
+  pageCount: 50,
+  pageIndex: 1
+};
 
 describe("Pagination", () => {
   it("should render the pagination component", () => {
-    render(<Sandbox {...Sandbox.args} />);
+    render(<Pagination {...args} />);
 
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const allBtnBlocks = paginationBtn.map((bloc) => bloc.textContent);
@@ -18,7 +24,7 @@ describe("Pagination", () => {
 
   it("should call previousPage() callback", () => {
     const previousPageSpy = vi.fn();
-    render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
+    render(<Pagination {...args} previousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
@@ -29,7 +35,7 @@ describe("Pagination", () => {
 
   it("should call nextPage() callback", () => {
     const nextPageSpy = vi.fn();
-    render(<Sandbox nextPage={nextPageSpy} canNextPage={true} />);
+    render(<Pagination {...args} nextPage={nextPageSpy} canNextPage={true} />);
 
     fireEvent.click(screen.getByText(/Next/i));
 
@@ -40,7 +46,7 @@ describe("Pagination", () => {
     const gotoPageSpy = vi.fn();
     let page: number;
 
-    render(<Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />);
+    render(<Pagination {...args} gotoPage={gotoPageSpy} />);
 
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const buttonsPage = paginationBtn.filter((btn) => btn.textContent !== "Previous" && btn.textContent !== "Next");
@@ -57,7 +63,7 @@ describe("Pagination", () => {
 
   it("should have Previous button disabled and not clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
+    render(<Pagination canPreviousPage={false} previousPage={previousPageSpy} {...args} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -68,7 +74,7 @@ describe("Pagination", () => {
 
   it("should have Previous button NOT disabled and clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
+    render(<Pagination {...args} canPreviousPage={true} previousPage={previousPageSpy} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -79,7 +85,7 @@ describe("Pagination", () => {
 
   it("should have Next button disabled and not clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
+    render(<Pagination canNextPage={false} nextPage={nextPageSpy} {...args} />);
 
     const nextButton = screen.getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
@@ -89,7 +95,7 @@ describe("Pagination", () => {
 
   it("should have Next button NOT disabled and clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
+    render(<Pagination canNextPage={true} nextPage={nextPageSpy} {...args} />);
     const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
@@ -99,7 +105,7 @@ describe("Pagination", () => {
   it("should correctly render select component", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} />);
+    render(<Pagination {...args} pageSizes={pageSizes} />);
     const selectComp = screen.getByTestId("select_page");
     const selectChilds = Array.prototype.map.call(selectComp, function (child) {
       return +child.textContent;
@@ -112,7 +118,7 @@ describe("Pagination", () => {
   it("should display total length", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} totalLength={1000} />);
+    render(<Pagination {...args} pageSizes={pageSizes} totalLength={1000} />);
 
     expect(screen.getByTestId("pagination-total-items")).toHaveTextContent("1,000 items");
   });
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx b/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
index df57069..7018f20 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
@@ -3,6 +3,13 @@ import { useEffect, useState } from "react";
 
 import { Pagination } from "./Pagination";
 
+/**
+ * Pagination component
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/pagination/Pagination";
+ * ```
+ */
 export default {
   title: "Pagination",
   component: Pagination,
diff --git a/packages/react-formio/src/components/tabs/tabs.component.spec.tsx b/packages/react-formio/src/molecules/tabs/Tabs.spec.tsx
similarity index 93%
rename from packages/react-formio/src/components/tabs/tabs.component.spec.tsx
rename to packages/react-formio/src/molecules/tabs/Tabs.spec.tsx
index b174e02..5e4cb06 100644
--- a/packages/react-formio/src/components/tabs/tabs.component.spec.tsx
+++ b/packages/react-formio/src/molecules/tabs/Tabs.spec.tsx
@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { expect, vi } from "vitest";
 
-import { Tabs } from "./tabs.component";
-import { Sandbox } from "./tabs.component.stories";
+import { Tabs } from "./Tabs";
+import { Sandbox } from "./Tabs.stories";
 
-describe("tabs", () => {
+describe("<Tabs>", () => {
   it("should display the tabs component and children", () => {
     const items = [
       {
@@ -21,7 +21,7 @@ describe("tabs", () => {
       }
     ];
 
-    render(<Sandbox {...Sandbox.args} items={items} />);
+    render(<Tabs {...Sandbox.args} items={items} />);
 
     const tabsComponent = screen.getByTestId("tabs-comp");
 
diff --git a/packages/react-formio/src/molecules/tabs/Tabs.stories.tsx b/packages/react-formio/src/molecules/tabs/Tabs.stories.tsx
new file mode 100644
index 0000000..b81004c
--- /dev/null
+++ b/packages/react-formio/src/molecules/tabs/Tabs.stories.tsx
@@ -0,0 +1,141 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import { Tabs } from "./Tabs";
+
+const useTabs = (args: any) => {
+  const [current, onClick] = useState(args.value);
+
+  return {
+    ...args,
+    current,
+    onClick
+  };
+};
+
+/**
+ * Tabs component
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/tabs/Tabs";
+ * ```
+ */
+export default {
+  title: "Tabs",
+  component: Tabs,
+  argTypes: {},
+  parameters: {},
+  render: (args: any) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const tabs = useTabs(args);
+
+    return (
+      <div className={"border-gray-300 border-1 shadow"}>
+        <Tabs {...tabs} i18n={(f) => f}>
+          <div className={"p-5"}>{tabs?.current?.action}</div>
+        </Tabs>
+      </div>
+    );
+  }
+} satisfies Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Sandbox: Story = {
+  args: {
+    items: [
+      {
+        action: "back",
+        exact: true,
+        icon: "chevron-left",
+        back: true
+      },
+      {
+        action: "edit",
+        exact: true,
+        icon: "edit",
+        label: "Edit"
+      },
+      {
+        action: "submissions",
+        exact: false,
+        icon: "data",
+        label: "Data"
+      },
+      {
+        action: "preview",
+        exact: true,
+        icon: "test-tube",
+        label: "Preview"
+      },
+      {
+        action: "actions",
+        exact: false,
+        icon: "paper-plane",
+        label: "Actions"
+      },
+      {
+        action: "access",
+        exact: true,
+        icon: "lock",
+        label: "Access"
+      },
+      {
+        action: "export",
+        exact: true,
+        icon: "download",
+        label: "Export"
+      },
+      {
+        action: "delete",
+        exact: true,
+        icon: "trash",
+        label: "Delete",
+        roles: ["administrator", "owner"]
+      }
+    ]
+  }
+};
+
+function AddButton({ onCreate }: any) {
+  return (
+    <div>
+      <button onClick={onCreate}>+</button>
+    </div>
+  );
+}
+
+function HeaderChildren() {
+  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
+}
+
+export const WithCloseable = {
+  render: (args: any) => {
+    args.value = args.value === undefined ? 0 : args.value;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const tabs = useTabs(args);
+
+    return (
+      <div className={"border-gray-300 border-1 shadow"}>
+        <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
+          <div className={"p-5"}>{tabs?.current?.action}</div>
+        </Tabs>
+      </div>
+    );
+  },
+  args: {
+    reverse: true,
+    items: [
+      {
+        exact: true,
+        action: 0,
+        label: "Test (0)"
+      },
+      {
+        exact: true,
+        action: 1,
+        label: "Test (1)"
+      }
+    ]
+  }
+};
diff --git a/packages/react-formio/src/components/tabs/tabs.component.tsx b/packages/react-formio/src/molecules/tabs/Tabs.tsx
similarity index 100%
rename from packages/react-formio/src/components/tabs/tabs.component.tsx
rename to packages/react-formio/src/molecules/tabs/Tabs.tsx

From 49dd96b560adcaefaf2c26098a0e865a2550f616 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 10 Jan 2025 09:00:10 +0100
Subject: [PATCH 11/12] refactor(react-formio): move Table inside molecules

---
 .../actions-table/actionsTable.component.tsx  |    3 +-
 .../forms-table/formsTable.component.tsx      |    5 +-
 packages/react-formio/src/components/index.ts |    1 -
 .../submissionsTable.component.tsx            |    4 +-
 .../src/components/table/index.ts             |   15 -
 .../react-formio/src/interfaces/Operation.ts  |    2 +-
 .../molecules/__fixtures__/form-actions.json  |  240 ++
 .../__fixtures__/form-firstname.fixture.json  |  256 ++
 .../molecules/__fixtures__/form-schema.json   |  469 ++++
 .../__fixtures__/form-submissions.json        |  142 ++
 .../__fixtures__/form-wizard.fixture.json     | 2042 ++++++++++++++++
 .../molecules/__fixtures__/form.fixture.json  | 2067 +++++++++++++++++
 .../src/molecules/pagination/Pagination.tsx   |    2 +-
 .../table/Table.stories.tsx}                  |    2 +-
 .../table/Table.tsx}                          |    4 +-
 .../table/components/DefaultArrowSort.tsx}    |    0
 .../table/components/DefaultCell.tsx}         |    0
 .../table/components/DefaultCellHeader.tsx}   |    0
 .../components/DefaultCellOperations.tsx}     |    2 +-
 .../table/components/DefaultCells.tsx}        |    2 +-
 .../components/DefaultOperationButton.tsx}    |    0
 .../table/components/DefaultRow.tsx}          |    4 +-
 .../table/components/DragNDropContainer.tsx}  |    0
 .../filters/DefaultColumnFilter.spec.tsx}     |    2 +-
 .../table/filters/DefaultColumnFilter.tsx}    |    0
 .../filters/SelectColumnFilter.spec.tsx}      |    2 +-
 .../table/filters/SelectColumnFilter.tsx}     |    0
 .../table/filters/SliderColumnFilter.tsx}     |    4 +-
 .../table/hooks/useCustomTable.tsx}           |   10 +-
 .../table/hooks/useDragnDropRow.ts}           |    2 +-
 .../table/hooks/useOperations.tsx}            |    2 +-
 .../react-formio/src/molecules/table/index.ts |   15 +
 .../table/utils/getPageNumbers.ts             |    0
 .../table/utils/mapFormToColumns.tsx          |   16 +-
 .../table/utils/swapElements.spec.ts          |    0
 .../table/utils/swapElements.ts               |    0
 36 files changed, 5261 insertions(+), 54 deletions(-)
 delete mode 100644 packages/react-formio/src/components/table/index.ts
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/form-actions.json
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/form-firstname.fixture.json
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/form-schema.json
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/form-submissions.json
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/form-wizard.fixture.json
 create mode 100644 packages/react-formio/src/molecules/__fixtures__/form.fixture.json
 rename packages/react-formio/src/{components/table/table.stories.tsx => molecules/table/Table.stories.tsx} (98%)
 rename packages/react-formio/src/{components/table/table.component.tsx => molecules/table/Table.tsx} (97%)
 rename packages/react-formio/src/{components/table/components/defaultArrowSort.component.tsx => molecules/table/components/DefaultArrowSort.tsx} (100%)
 rename packages/react-formio/src/{components/table/components/defaultCell.component.tsx => molecules/table/components/DefaultCell.tsx} (100%)
 rename packages/react-formio/src/{components/table/components/defaultCellHeader.component.tsx => molecules/table/components/DefaultCellHeader.tsx} (100%)
 rename packages/react-formio/src/{components/table/components/defaultCellOperations.component.tsx => molecules/table/components/DefaultCellOperations.tsx} (97%)
 rename packages/react-formio/src/{components/table/components/defaultCells.component.tsx => molecules/table/components/DefaultCells.tsx} (91%)
 rename packages/react-formio/src/{components/table/components/defaultOperationButton.component.tsx => molecules/table/components/DefaultOperationButton.tsx} (100%)
 rename packages/react-formio/src/{components/table/components/defaultRow.component.tsx => molecules/table/components/DefaultRow.tsx} (93%)
 rename packages/react-formio/src/{components/table/components/dragNDropContainer.tsx => molecules/table/components/DragNDropContainer.tsx} (100%)
 rename packages/react-formio/src/{components/table/filters/defaultColumnFilter.component.spec.tsx => molecules/table/filters/DefaultColumnFilter.spec.tsx} (92%)
 rename packages/react-formio/src/{components/table/filters/defaultColumnFilter.component.tsx => molecules/table/filters/DefaultColumnFilter.tsx} (100%)
 rename packages/react-formio/src/{components/table/filters/selectColumnFilter.component.spec.tsx => molecules/table/filters/SelectColumnFilter.spec.tsx} (96%)
 rename packages/react-formio/src/{components/table/filters/selectColumnFilter.component.tsx => molecules/table/filters/SelectColumnFilter.tsx} (100%)
 rename packages/react-formio/src/{components/table/filters/sliderColumnFilter.component.tsx => molecules/table/filters/SliderColumnFilter.tsx} (81%)
 rename packages/react-formio/src/{components/table/hooks/useCustomTable.hook.tsx => molecules/table/hooks/useCustomTable.tsx} (94%)
 rename packages/react-formio/src/{components/table/hooks/useDragnDropRow.hook.ts => molecules/table/hooks/useDragnDropRow.ts} (97%)
 rename packages/react-formio/src/{components/table/hooks/useOperations.hook.tsx => molecules/table/hooks/useOperations.tsx} (92%)
 create mode 100644 packages/react-formio/src/molecules/table/index.ts
 rename packages/react-formio/src/{components => molecules}/table/utils/getPageNumbers.ts (100%)
 rename packages/react-formio/src/{components => molecules}/table/utils/mapFormToColumns.tsx (58%)
 rename packages/react-formio/src/{components => molecules}/table/utils/swapElements.spec.ts (100%)
 rename packages/react-formio/src/{components => molecules}/table/utils/swapElements.ts (100%)

diff --git a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx b/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
index 48e6bf5..8df3646 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
+++ b/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
@@ -4,9 +4,8 @@ import { useState } from "react";
 
 import { ActionType } from "../../interfaces";
 import { Select } from "../../molecules/forms/select/Select";
+import { Table, type TableProps } from "../../molecules/table";
 import { iconClass } from "../../utils/iconClass";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
 
 export type ActionsTableProps = Omit<TableProps<ActionType>, "columns"> & {
   onAddAction?: (actionName: string) => void;
diff --git a/packages/react-formio/src/components/forms-table/formsTable.component.tsx b/packages/react-formio/src/components/forms-table/formsTable.component.tsx
index 1bc7511..33cab21 100644
--- a/packages/react-formio/src/components/forms-table/formsTable.component.tsx
+++ b/packages/react-formio/src/components/forms-table/formsTable.component.tsx
@@ -1,8 +1,5 @@
 import { FormType } from "../../interfaces";
-import { DefaultColumnFilter } from "../table/filters/defaultColumnFilter.component";
-import { SelectColumnFilter } from "../table/filters/selectColumnFilter.component";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
+import { DefaultColumnFilter, SelectColumnFilter, Table, TableProps } from "../../molecules/table";
 import { FormsCell as DefaultFormCell } from "./components/formCell.component";
 
 export type FormsTableProps = Omit<TableProps<FormType>, "columns"> & {
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
index 79b2e07..6104041 100644
--- a/packages/react-formio/src/components/index.ts
+++ b/packages/react-formio/src/components/index.ts
@@ -11,4 +11,3 @@ export * from "./form-edit/useFormEdit.hook";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
 export * from "./submissions-table/submissionsTable.component";
-export * from "./table";
diff --git a/packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx b/packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx
index 9c51dc8..d2dbcf7 100644
--- a/packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx
+++ b/packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx
@@ -1,7 +1,5 @@
 import { FormType, SubmissionType } from "../../interfaces";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
-import { mapFormToColumns } from "../table/utils/mapFormToColumns";
+import { mapFormToColumns, Table, type TableProps } from "../../molecules/table";
 
 export type SubmissionsTableProps = Omit<TableProps<SubmissionType>, "columns"> & {
   form?: FormType;
diff --git a/packages/react-formio/src/components/table/index.ts b/packages/react-formio/src/components/table/index.ts
deleted file mode 100644
index 07ac65e..0000000
--- a/packages/react-formio/src/components/table/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from "./components/defaultArrowSort.component";
-export * from "./components/defaultCell.component";
-export * from "./components/defaultCellHeader.component";
-export * from "./components/defaultCellHeader.component";
-export * from "./components/defaultCellOperations.component";
-export * from "./components/defaultOperationButton.component";
-export * from "./filters/defaultColumnFilter.component";
-export * from "./filters/selectColumnFilter.component";
-export * from "./filters/sliderColumnFilter.component";
-export * from "./hooks/useCustomTable.hook";
-export * from "./hooks/useOperations.hook";
-export * from "./table.component";
-export * from "./utils/getPageNumbers";
-export * from "./utils/mapFormToColumns";
-export * from "./utils/swapElements";
diff --git a/packages/react-formio/src/interfaces/Operation.ts b/packages/react-formio/src/interfaces/Operation.ts
index cca02eb..b3fc222 100644
--- a/packages/react-formio/src/interfaces/Operation.ts
+++ b/packages/react-formio/src/interfaces/Operation.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { OperationButtonProps } from "../components/table/components/defaultOperationButton.component";
+import type { OperationButtonProps } from "../molecules/table";
 
 export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;
 export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
diff --git a/packages/react-formio/src/molecules/__fixtures__/form-actions.json b/packages/react-formio/src/molecules/__fixtures__/form-actions.json
new file mode 100644
index 0000000..e7384cb
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/form-actions.json
@@ -0,0 +1,240 @@
+[
+  {
+    "name": "webhook",
+    "title": "Webhook (Premium)",
+    "description": "Allows you to trigger an external interface.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "webhook",
+      "title": "Webhook (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sql",
+    "title": "SQL Query",
+    "description": "Allows you to execute a remote SQL Query.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "sql",
+      "title": "SQL Query"
+    }
+  },
+  {
+    "name": "role",
+    "title": "Role Assignment",
+    "description": "Provides the Role Assignment capabilities.",
+    "priority": 1,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 1,
+      "name": "role",
+      "title": "Role Assignment"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "resetpass",
+    "title": "Reset Password",
+    "description": "Provides a way to reset a password field.",
+    "defaults": {
+      "handler": ["after", "before"],
+      "method": ["form", "create"],
+      "priority": 0,
+      "name": "resetpass",
+      "title": "Reset Password"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "save",
+    "title": "Save Submission",
+    "description": "Saves the submission into the database.",
+    "priority": 10,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create", "update"],
+      "priority": 10,
+      "name": "save",
+      "title": "Save Submission"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "login",
+    "title": "Login",
+    "description": "Provides a way to login to the application.",
+    "priority": 2,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 2,
+      "name": "login",
+      "title": "Login"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "office365contact",
+    "title": "Office 365 Contacts (Premium)",
+    "description": "Allows you to integrate into your Office 365 Contacts.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365contact",
+      "title": "Office 365 Contacts (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "office365calendar",
+    "title": "Office 365 Calendar (Premium)",
+    "description": "Allows you to integrate into your Office 365 Calendar.",
+    "premium": true,
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365calendar",
+      "title": "Office 365 Calendar (Premium)"
+    }
+  },
+  {
+    "name": "hubspotContact",
+    "title": "Hubspot Contact (Premium)",
+    "description": "Allows you to change contact fields in hubspot.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "hubspotContact",
+      "title": "Hubspot Contact (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "oauth",
+    "title": "OAuth (Premium)",
+    "description": "Provides OAuth authentication behavior to this form.",
+    "priority": 20,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["form", "create"],
+      "priority": 20,
+      "name": "oauth",
+      "title": "OAuth (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "ldap",
+    "title": "LDAP Login (Premium)",
+    "description": "Provides ldap login.",
+    "priority": 3,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 3,
+      "name": "ldap",
+      "title": "LDAP Login (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "googlesheet",
+    "title": "Google Sheets (Premium)",
+    "description": "Allows you to integrate data into Google sheets.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "googlesheet",
+      "title": "Google Sheets (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sqlconnector",
+    "title": "SQL Connector (Premium)",
+    "description": "Allows you to execute a remote SQL Query via Resquel.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "sqlconnector",
+      "title": "SQL Connector (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "jira",
+    "title": "Jira (Premium)",
+    "description": "Allows you to create issues within Jira.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "jira",
+      "title": "Jira (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "group",
+    "title": "Group Assignment (Premium)",
+    "premium": true,
+    "description": "Provides the Group Assignment capabilities.",
+    "priority": 5,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 5,
+      "name": "group",
+      "title": "Group Assignment (Premium)"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "twilioSMS",
+    "title": "Twilio SMS (Premium)",
+    "premium": true,
+    "description": "Allows you to send SMS to phone numbers.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "twilioSMS",
+      "title": "Twilio SMS (Premium)"
+    }
+  }
+]
diff --git a/packages/react-formio/src/molecules/__fixtures__/form-firstname.fixture.json b/packages/react-formio/src/molecules/__fixtures__/form-firstname.fixture.json
new file mode 100644
index 0000000..9ef826b
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/form-firstname.fixture.json
@@ -0,0 +1,256 @@
+{
+  "type": "form",
+  "display": "form",
+  "tags": [],
+  "components": [
+    {
+      "label": "First name",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "displayMask": "",
+      "applyMaskOn": "change",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "truncateMultipleSpaces": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateWhenHidden": false,
+      "errorLabel": "",
+      "errors": "",
+      "key": "firstName",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "dataGridLabel": false,
+      "input": true,
+      "refreshOn": "",
+      "addons": [],
+      "inputType": "text",
+      "defaultValue": ""
+    },
+    {
+      "label": "Last name",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "displayMask": "",
+      "applyMaskOn": "change",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "truncateMultipleSpaces": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateWhenHidden": false,
+      "errorLabel": "",
+      "errors": "",
+      "key": "lastName",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "dataGridLabel": false,
+      "input": true,
+      "refreshOn": "",
+      "addons": [],
+      "inputType": "text",
+      "defaultValue": ""
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "key": "submit",
+      "size": "md",
+      "block": false,
+      "action": "submit",
+      "disableOnInvalid": true,
+      "theme": "primary",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "customClass": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": null,
+      "protected": false,
+      "unique": false,
+      "persistent": false,
+      "hidden": false,
+      "clearOnHide": true,
+      "refreshOn": "",
+      "redrawOn": "",
+      "tableView": false,
+      "modalEdit": false,
+      "labelPosition": "top",
+      "description": "",
+      "errorLabel": "",
+      "tooltip": "",
+      "hideLabel": false,
+      "tabindex": "",
+      "disabled": false,
+      "autofocus": false,
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "widget": {
+        "type": "input"
+      },
+      "attributes": {},
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "custom": "",
+        "customPrivate": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": ""
+      },
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "allowCalculateOverride": false,
+      "encrypted": false,
+      "showCharCount": false,
+      "showWordCount": false,
+      "properties": {},
+      "allowMultipleMasks": false,
+      "leftIcon": "",
+      "rightIcon": "",
+      "dataGridLabel": true,
+      "addons": []
+    }
+  ]
+}
diff --git a/packages/react-formio/src/molecules/__fixtures__/form-schema.json b/packages/react-formio/src/molecules/__fixtures__/form-schema.json
new file mode 100644
index 0000000..44b170b
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/form-schema.json
@@ -0,0 +1,469 @@
+{
+  "_id": "5e972ae7a1a692917cf54f9e",
+  "type": "resource",
+  "tags": ["common", "products"],
+  "owner": null,
+  "components": [
+    {
+      "autofocus": false,
+      "input": true,
+      "tableView": true,
+      "inputType": "text",
+      "inputMask": "",
+      "label": "Id",
+      "key": "id",
+      "placeholder": "Enter the product id",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": "",
+      "protected": false,
+      "unique": false,
+      "persistent": true,
+      "hidden": false,
+      "clearOnHide": true,
+      "spellcheck": true,
+      "validate": {
+        "required": true,
+        "minLength": 4,
+        "pattern": "",
+        "custom": "",
+        "customPrivate": false
+      },
+      "conditional": {
+        "show": "",
+        "eq": ""
+      },
+      "labelPosition": "top",
+      "inputFormat": "plain",
+      "tags": [],
+      "properties": {},
+      "id": "gsjot",
+      "type": "textfield"
+    },
+    {
+      "autofocus": false,
+      "input": true,
+      "tableView": true,
+      "inputType": "text",
+      "inputMask": "",
+      "label": "Label",
+      "key": "label",
+      "placeholder": "Enter a label for this product",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": "",
+      "protected": false,
+      "unique": false,
+      "persistent": true,
+      "hidden": false,
+      "clearOnHide": true,
+      "spellcheck": true,
+      "validate": {
+        "required": true,
+        "minLength": "",
+        "maxLength": "",
+        "pattern": "",
+        "custom": "",
+        "customPrivate": false
+      },
+      "conditional": {
+        "show": "",
+        "eq": ""
+      },
+      "labelPosition": "top",
+      "inputFormat": "plain",
+      "tags": [],
+      "properties": {},
+      "id": "toa61c",
+      "type": "textfield"
+    },
+    {
+      "label": "Preferred locale",
+      "labelPosition": "top",
+      "widget": "choicesjs",
+      "placeholder": "Choose a preferred locale for the product",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "alwaysEnabled": false,
+      "tableView": false,
+      "multiple": false,
+      "dataSrc": "resource",
+      "defaultValue": "en-US",
+      "valueProperty": "data.locale",
+      "template": "<span>{{ item.data.locale }}</span>",
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "select": false,
+        "custom": "",
+        "customPrivate": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "locale",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": "",
+        "when": "",
+        "eq": ""
+      },
+      "dataGridLabel": false,
+      "indexeddb": {
+        "database": "",
+        "table": "",
+        "filter": ""
+      },
+      "lazyLoad": false,
+      "selectValues": "",
+      "disableLimit": false,
+      "searchField": "data.locale__regex",
+      "filter": "",
+      "sort": "",
+      "refreshOn": "",
+      "clearOnRefresh": false,
+      "addResource": false,
+      "addResourceLabel": "",
+      "reference": false,
+      "authenticate": false,
+      "redrawOn": "",
+      "minSearch": 0,
+      "limit": 100,
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "selectFields": "",
+      "id": "eo6ekb",
+      "type": "select",
+      "data": {
+        "resource": "5e972ae7a1a692917cf54f9d",
+        "headers": [
+          {
+            "key": "",
+            "value": ""
+          }
+        ],
+        "json": "",
+        "url": "",
+        "custom": "",
+        "values": []
+      }
+    },
+    {
+      "label": "Prefered date format",
+      "labelPosition": "top",
+      "widget": "choicesjs",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "alwaysEnabled": false,
+      "tableView": true,
+      "multiple": false,
+      "dataSrc": "values",
+      "defaultValue": "YYYY-MM-DD",
+      "valueProperty": "",
+      "dataType": "",
+      "template": "<span>{{ item.label }}</span>",
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "allowCalculateOverride": false,
+      "products": [],
+      "categoryServices": [],
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "dateFormat",
+      "tags": "",
+      "properties": {},
+      "conditional": {
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "relavi": [],
+      "minSearch": 0,
+      "limit": 100,
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "redrawOn": "",
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "clearOnRefresh": false,
+      "lazyLoad": true,
+      "filter": "",
+      "searchField": "",
+      "authenticate": false,
+      "selectFields": "",
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "e80eyzn",
+      "type": "select",
+      "data": {
+        "values": [
+          {
+            "label": "2019-10-01",
+            "value": "YYYY-MM-DD"
+          },
+          {
+            "label": "01/10/2019",
+            "value": "DD/MM/YYYY"
+          },
+          {
+            "label": "10/01/2019",
+            "value": "MM/DD/YYYY"
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      }
+    },
+    {
+      "label": "Prefered time format",
+      "labelPosition": "top",
+      "widget": "choicesjs",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "alwaysEnabled": false,
+      "tableView": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "defaultValue": "hh:mm:ss a",
+      "valueProperty": "",
+      "dataType": "",
+      "template": "<span>{{ item.label }}</span>",
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "allowCalculateOverride": false,
+      "products": [],
+      "categoryServices": [],
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "timeFormat",
+      "tags": "",
+      "properties": {},
+      "conditional": {
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "relavi": [],
+      "minSearch": 0,
+      "limit": 100,
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "redrawOn": "",
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "clearOnRefresh": false,
+      "lazyLoad": true,
+      "filter": "",
+      "searchField": "",
+      "authenticate": false,
+      "selectFields": "",
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "el4mm17",
+      "type": "select",
+      "data": {
+        "values": [
+          {
+            "label": "03:25:50 pm",
+            "value": "hh:mm:ss a"
+          },
+          {
+            "label": "15:25:50",
+            "value": "HH:mm:ss"
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      }
+    },
+    {
+      "autofocus": false,
+      "input": true,
+      "label": "Save product",
+      "tableView": false,
+      "key": "submit",
+      "size": "md",
+      "leftIcon": "",
+      "rightIcon": "",
+      "block": false,
+      "action": "submit",
+      "disableOnInvalid": false,
+      "theme": "primary",
+      "tags": [],
+      "conditional": {
+        "show": "",
+        "eq": ""
+      },
+      "properties": {},
+      "id": "9byuwa",
+      "type": "button"
+    }
+  ],
+  "display": "form",
+  "title": "Products",
+  "name": "products",
+  "path": "products",
+  "created": "2020-04-15T12:47:41.000Z",
+  "modified": "2020-04-15T15:40:23.647Z",
+  "access": [
+    {
+      "roles": ["5e97026c50bcd9815878809a", "5e97026c50bcd98158788099", "5e97026c50bcd98158788098"],
+      "type": "read_all"
+    }
+  ],
+  "submissionAccess": [
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "create_all"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099", "5e97026c50bcd9815878809a"],
+      "type": "read_all"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "update_all"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "delete_all"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "create_own"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "read_own"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "update_own"
+    },
+    {
+      "roles": ["5e97026c50bcd98158788098", "5e97026c50bcd98158788099"],
+      "type": "delete_own"
+    }
+  ],
+  "machineName": "products"
+}
diff --git a/packages/react-formio/src/molecules/__fixtures__/form-submissions.json b/packages/react-formio/src/molecules/__fixtures__/form-submissions.json
new file mode 100644
index 0000000..6b991f7
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/form-submissions.json
@@ -0,0 +1,142 @@
+[
+  {
+    "_id": "5e972ae8a1a692917cf55006",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "MPEC",
+      "label": "Michès Playa Esmeralda"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.718Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf55007",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "CARC",
+      "label": "La Caravelle"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.724Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf55008",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "MAUC",
+      "label": "La Pointe aux Canonniers"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.728Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf55009",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "CFAC",
+      "label": "Cefalù"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.732Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf5500a",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "MPAC",
+      "label": "Marrakech la Palmeraie"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.737Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf5500b",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "COLC",
+      "label": "Columbus Isle"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.741Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf5500c",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "ALHC_WINTER",
+      "label": "Alpe d'Huez (winter)"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.746Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf5500d",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "ARPC_WINTER",
+      "label": "Les Arcs Panorama (winter)"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.750Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf5500e",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "GMAC_WINTER",
+      "label": "Grand Massif Samoëns Morillon (winter)"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.754Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  },
+  {
+    "_id": "5e972ae8a1a692917cf5500f",
+    "owner": null,
+    "roles": [],
+    "data": {
+      "id": "TVCC",
+      "label": "Tignes Val Claret"
+    },
+    "access": [],
+    "externalIds": [],
+    "created": "2020-04-15T12:47:42.000Z",
+    "modified": "2020-04-15T15:40:24.759Z",
+    "form": "5e972ae7a1a692917cf54f9e"
+  }
+]
diff --git a/packages/react-formio/src/molecules/__fixtures__/form-wizard.fixture.json b/packages/react-formio/src/molecules/__fixtures__/form-wizard.fixture.json
new file mode 100644
index 0000000..3325852
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/form-wizard.fixture.json
@@ -0,0 +1,2042 @@
+{
+  "display": "wizard",
+  "components": [
+    {
+      "label": "Text Field",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": true,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "textField",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "input": true,
+      "refreshOn": "",
+      "inputType": "text",
+      "id": "eqb1o4r",
+      "defaultValue": ""
+    },
+    {
+      "label": "Text Area",
+      "labelPosition": "top",
+      "placeholder": "Placeholder",
+      "description": "description",
+      "tooltip": "tooltip",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "editor": "",
+      "autoExpand": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "html",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "minWords": "",
+        "maxWords": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "textArea",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "fixedSize": true,
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "attributes": {},
+      "type": "textarea",
+      "rows": 3,
+      "wysiwyg": false,
+      "input": true,
+      "refreshOn": "",
+      "allowMultipleMasks": false,
+      "mask": false,
+      "inputType": "text",
+      "inputMask": "",
+      "id": "e4jsrqc",
+      "defaultValue": ""
+    },
+    {
+      "label": "Number",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "delimiter": false,
+      "requireDecimal": false,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "min": "",
+        "max": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "step": "any",
+        "integer": ""
+      },
+      "errorLabel": "",
+      "key": "number",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "number",
+      "input": true,
+      "unique": false,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ex8zh8u",
+      "defaultValue": null
+    },
+    {
+      "label": "Password",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "case": "",
+      "redrawOn": "",
+      "clearOnHide": true,
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "password",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "password",
+      "input": true,
+      "multiple": false,
+      "defaultValue": null,
+      "protected": true,
+      "unique": false,
+      "persistent": true,
+      "refreshOn": "",
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "encrypted": false,
+      "allowMultipleMasks": false,
+      "inputType": "text",
+      "inputFormat": "plain",
+      "inputMask": "",
+      "id": "etqa5pm"
+    },
+    {
+      "label": "Checkbox",
+      "description": "description",
+      "tooltip": "tooltip",
+      "shortcut": "",
+      "inputType": "checkbox",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "defaultValue": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "checkbox",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "checkbox",
+      "name": "",
+      "value": "",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "labelPosition": "right",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "dataGridLabel": true,
+      "id": "em8ln2m"
+    },
+    {
+      "label": "Select Boxes",
+      "labelPosition": "top",
+      "optionsLabelPosition": "right",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "inline": false,
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "values": [
+        {
+          "label": "label",
+          "value": "label",
+          "shortcut": ""
+        },
+        {
+          "label": "lol",
+          "value": "lol",
+          "shortcut": ""
+        }
+      ],
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "minSelectedCountMessage": "",
+      "maxSelectedCountMessage": "",
+      "key": "selectBoxes",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "selectboxes",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "checkbox",
+      "fieldSet": false,
+      "id": "esa4upt",
+      "defaultValue": {
+        "": false
+      }
+    },
+    {
+      "label": "Radio",
+      "labelPosition": "top",
+      "optionsLabelPosition": "right",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "inline": false,
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "values": [
+        {
+          "label": "data",
+          "value": "data",
+          "shortcut": ""
+        },
+        {
+          "label": "label",
+          "value": "label",
+          "shortcut": ""
+        }
+      ],
+      "dataType": "",
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "radio",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "radio",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "radio",
+      "fieldSet": false,
+      "id": "edh7o6o",
+      "defaultValue": ""
+    },
+    {
+      "label": "Select",
+      "labelPosition": "top",
+      "widget": "choicesjs",
+      "placeholder": "placeholder",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "uniqueOptions": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "data": {
+        "values": [
+          {
+            "label": "label",
+            "value": "label"
+          },
+          {
+            "label": "save",
+            "value": "save"
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      },
+      "valueProperty": "",
+      "dataType": "",
+      "idPath": "id",
+      "template": "<span>{{ item.label }}</span>",
+      "refreshOn": "",
+      "refreshOnBlur": "",
+      "clearOnRefresh": false,
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "useExactSearch": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "select",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "select",
+      "indexeddb": {
+        "filter": {}
+      },
+      "selectFields": "",
+      "searchField": "",
+      "minSearch": 0,
+      "filter": "",
+      "limit": 100,
+      "redrawOn": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "lazyLoad": true,
+      "authenticate": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "ebqtqd6",
+      "defaultValue": ""
+    },
+    {
+      "label": "Select",
+      "labelPosition": "top",
+      "widget": "html5",
+      "placeholder": "placeholder",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "uniqueOptions": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "data": {
+        "values": [
+          {
+            "label": "",
+            "value": ""
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      },
+      "valueProperty": "",
+      "dataType": "",
+      "idPath": "id",
+      "template": "<span>{{ item.label }}</span>",
+      "refreshOn": "",
+      "refreshOnBlur": "",
+      "clearOnRefresh": false,
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "useExactSearch": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "select1",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "select",
+      "indexeddb": {
+        "filter": {}
+      },
+      "selectFields": "",
+      "searchField": "",
+      "minSearch": 0,
+      "filter": "",
+      "limit": 100,
+      "redrawOn": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "lazyLoad": true,
+      "authenticate": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "em8m4qk",
+      "defaultValue": ""
+    },
+    {
+      "label": "Email",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "kickbox": {
+        "enabled": false
+      },
+      "errorLabel": "",
+      "key": "email",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "email",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "email",
+      "inputMask": "",
+      "id": "epj8sj28",
+      "defaultValue": null
+    },
+    {
+      "label": "Url",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "url",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "url",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "url",
+      "inputMask": "",
+      "id": "exw9p4",
+      "defaultValue": null
+    },
+    {
+      "label": "Phone Number",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "(999) 999-9999",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "minLength": "",
+        "maxLength": "",
+        "pattern": ""
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "phoneNumber",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "phoneNumber",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "inputType": "tel",
+      "id": "e2c7lpl",
+      "defaultValue": null
+    },
+    {
+      "label": "Tags",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "delimeter": ",",
+      "maxTags": 0,
+      "storeas": "string",
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "tags",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "tags",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "refreshOn": "",
+      "widget": {
+        "type": "input"
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ejc82t",
+      "defaultValue": null
+    },
+    {
+      "label": "Address",
+      "labelPosition": "top",
+      "enableManualMode": false,
+      "disableClearIcon": false,
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "provider": "google",
+      "manualModeViewString": "",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "address",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "address",
+      "switchToManualModeLabel": "Can't find address? Switch to manual mode.",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "widget": null,
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "tree": true,
+      "components": [
+        {
+          "label": "Address 1",
+          "tableView": false,
+          "key": "address1",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eecfg6h"
+        },
+        {
+          "label": "Address 2",
+          "tableView": false,
+          "key": "address2",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eajhpuu"
+        },
+        {
+          "label": "City",
+          "tableView": false,
+          "key": "city",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "efpnrca7"
+        },
+        {
+          "label": "State",
+          "tableView": false,
+          "key": "state",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eu3kksv"
+        },
+        {
+          "label": "Country",
+          "tableView": false,
+          "key": "country",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "el39cu9"
+        },
+        {
+          "label": "Zip Code",
+          "tableView": false,
+          "key": "zip",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "epyac4"
+        }
+      ],
+      "providerOptions": {
+        "params": {
+          "key": "fze",
+          "region": ""
+        }
+      },
+      "id": "er02e2gb",
+      "defaultValue": {}
+    },
+    {
+      "label": "Date / Time",
+      "labelPosition": "top",
+      "displayInTimezone": "viewer",
+      "useLocaleSettings": false,
+      "allowInput": true,
+      "format": "yyyy-MM-dd hh:mm a",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "enableDate": true,
+      "enableMinDateInput": false,
+      "datePicker": {
+        "minDate": null,
+        "maxDate": null,
+        "disable": "",
+        "disableFunction": "",
+        "disableWeekends": false,
+        "disableWeekdays": false,
+        "showWeeks": true,
+        "startingDay": 0,
+        "initDate": "",
+        "minMode": "day",
+        "maxMode": "year",
+        "yearRows": 4,
+        "yearColumns": 5
+      },
+      "enableMaxDateInput": false,
+      "enableTime": true,
+      "timePicker": {
+        "showMeridian": true,
+        "hourStep": 1,
+        "minuteStep": 1,
+        "readonlyInput": false,
+        "mousewheel": true,
+        "arrowkeys": true
+      },
+      "multiple": false,
+      "defaultValue": "",
+      "defaultDate": "",
+      "customOptions": {},
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "dateTime",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "datetime",
+      "timezone": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "widget": {
+        "type": "calendar",
+        "displayInTimezone": "viewer",
+        "locale": "en",
+        "useLocaleSettings": false,
+        "allowInput": true,
+        "mode": "single",
+        "enableTime": true,
+        "noCalendar": false,
+        "format": "yyyy-MM-dd hh:mm a",
+        "hourIncrement": 1,
+        "minuteIncrement": 1,
+        "minDate": null,
+        "disabledDates": "",
+        "disableWeekends": false,
+        "disableWeekdays": false,
+        "disableFunction": "",
+        "maxDate": null
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "datepickerMode": "day",
+      "id": "el9idgl"
+    },
+    {
+      "label": "Day",
+      "hideInputLabels": false,
+      "inputsLabelPosition": "top",
+      "description": "",
+      "useLocaleSettings": false,
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "fields": {
+        "day": {
+          "type": "number",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        },
+        "month": {
+          "type": "select",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        },
+        "year": {
+          "type": "number",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        }
+      },
+      "dayFirst": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "maxDate": "",
+      "minDate": "",
+      "unique": false,
+      "errorLabel": "",
+      "validate": {
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "required": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "key": "day",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "day",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "refreshOn": "",
+      "labelPosition": "top",
+      "widget": null,
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ecgefls",
+      "defaultValue": "00/00/0000"
+    },
+    {
+      "label": "Currency",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "currency": "USD",
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "min": "",
+        "max": "",
+        "step": "any",
+        "integer": ""
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "currency",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "currency",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "delimiter": true,
+      "id": "em22wkd",
+      "defaultValue": null
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "key": "submit",
+      "size": "md",
+      "block": false,
+      "action": "submit",
+      "disableOnInvalid": true,
+      "theme": "primary",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "customClass": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": null,
+      "protected": false,
+      "unique": false,
+      "persistent": false,
+      "hidden": false,
+      "clearOnHide": true,
+      "refreshOn": "",
+      "redrawOn": "",
+      "tableView": false,
+      "modalEdit": false,
+      "labelPosition": "top",
+      "description": "",
+      "errorLabel": "",
+      "tooltip": "",
+      "hideLabel": false,
+      "tabindex": "",
+      "disabled": false,
+      "autofocus": false,
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "widget": {
+        "type": "input"
+      },
+      "attributes": {},
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "custom": "",
+        "customPrivate": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": ""
+      },
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "allowCalculateOverride": false,
+      "encrypted": false,
+      "showCharCount": false,
+      "showWordCount": false,
+      "properties": {},
+      "allowMultipleMasks": false,
+      "leftIcon": "",
+      "rightIcon": "",
+      "dataGridLabel": true,
+      "id": "e08gq3l"
+    }
+  ]
+}
diff --git a/packages/react-formio/src/molecules/__fixtures__/form.fixture.json b/packages/react-formio/src/molecules/__fixtures__/form.fixture.json
new file mode 100644
index 0000000..66cc6aa
--- /dev/null
+++ b/packages/react-formio/src/molecules/__fixtures__/form.fixture.json
@@ -0,0 +1,2067 @@
+{
+  "type": "form",
+  "tags": [],
+  "components": [
+    {
+      "label": "Text Field",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": true,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "textField",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "input": true,
+      "refreshOn": "",
+      "inputType": "text",
+      "id": "eqb1o4r",
+      "defaultValue": ""
+    },
+    {
+      "label": "Text Area",
+      "labelPosition": "top",
+      "placeholder": "Placeholder",
+      "description": "description",
+      "tooltip": "tooltip",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "editor": "",
+      "autoExpand": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "html",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "minWords": "",
+        "maxWords": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "textArea",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "fixedSize": true,
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "attributes": {},
+      "type": "textarea",
+      "rows": 3,
+      "wysiwyg": false,
+      "input": true,
+      "refreshOn": "",
+      "allowMultipleMasks": false,
+      "mask": false,
+      "inputType": "text",
+      "inputMask": "",
+      "id": "e4jsrqc",
+      "defaultValue": ""
+    },
+    {
+      "label": "Number",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "delimiter": false,
+      "requireDecimal": false,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "min": "",
+        "max": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "step": "any",
+        "integer": ""
+      },
+      "errorLabel": "",
+      "key": "number",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "number",
+      "input": true,
+      "unique": false,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ex8zh8u",
+      "defaultValue": null
+    },
+    {
+      "label": "Password",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "case": "",
+      "redrawOn": "",
+      "clearOnHide": true,
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "password",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "password",
+      "input": true,
+      "multiple": false,
+      "defaultValue": null,
+      "protected": true,
+      "unique": false,
+      "persistent": true,
+      "refreshOn": "",
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "encrypted": false,
+      "allowMultipleMasks": false,
+      "inputType": "text",
+      "inputFormat": "plain",
+      "inputMask": "",
+      "id": "etqa5pm"
+    },
+    {
+      "label": "Checkbox",
+      "description": "description",
+      "tooltip": "tooltip",
+      "shortcut": "",
+      "inputType": "checkbox",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "defaultValue": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "checkbox",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "checkbox",
+      "name": "",
+      "value": "",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "labelPosition": "right",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "dataGridLabel": true,
+      "id": "em8ln2m"
+    },
+    {
+      "label": "Select Boxes",
+      "labelPosition": "top",
+      "optionsLabelPosition": "right",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "inline": false,
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "values": [
+        {
+          "label": "label",
+          "value": "label",
+          "shortcut": ""
+        },
+        {
+          "label": "lol",
+          "value": "lol",
+          "shortcut": ""
+        }
+      ],
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "minSelectedCountMessage": "",
+      "maxSelectedCountMessage": "",
+      "key": "selectBoxes",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "selectboxes",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "checkbox",
+      "fieldSet": false,
+      "id": "esa4upt",
+      "defaultValue": {
+        "": false
+      }
+    },
+    {
+      "label": "Radio",
+      "labelPosition": "top",
+      "optionsLabelPosition": "right",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "inline": false,
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "values": [
+        {
+          "label": "data",
+          "value": "data",
+          "shortcut": ""
+        },
+        {
+          "label": "label",
+          "value": "label",
+          "shortcut": ""
+        }
+      ],
+      "dataType": "",
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "errorLabel": "",
+      "key": "radio",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "radio",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "unique": false,
+      "refreshOn": "",
+      "widget": null,
+      "validateOn": "change",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "radio",
+      "fieldSet": false,
+      "id": "edh7o6o",
+      "defaultValue": ""
+    },
+    {
+      "label": "Select",
+      "labelPosition": "top",
+      "widget": "choicesjs",
+      "placeholder": "placeholder",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "uniqueOptions": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "data": {
+        "values": [
+          {
+            "label": "label",
+            "value": "label"
+          },
+          {
+            "label": "save",
+            "value": "save"
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      },
+      "valueProperty": "",
+      "dataType": "",
+      "idPath": "id",
+      "template": "<span>{{ item.label }}</span>",
+      "refreshOn": "",
+      "refreshOnBlur": "",
+      "clearOnRefresh": false,
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "useExactSearch": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "select",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "select",
+      "indexeddb": {
+        "filter": {}
+      },
+      "selectFields": "",
+      "searchField": "",
+      "minSearch": 0,
+      "filter": "",
+      "limit": 100,
+      "redrawOn": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "lazyLoad": true,
+      "authenticate": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "ebqtqd6",
+      "defaultValue": ""
+    },
+    {
+      "label": "Select",
+      "labelPosition": "top",
+      "widget": "html5",
+      "placeholder": "placeholder",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "uniqueOptions": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "dataSrc": "values",
+      "data": {
+        "values": [
+          {
+            "label": "",
+            "value": ""
+          }
+        ],
+        "resource": "",
+        "json": "",
+        "url": "",
+        "custom": ""
+      },
+      "valueProperty": "",
+      "dataType": "",
+      "idPath": "id",
+      "template": "<span>{{ item.label }}</span>",
+      "refreshOn": "",
+      "refreshOnBlur": "",
+      "clearOnRefresh": false,
+      "searchEnabled": true,
+      "selectThreshold": 0.3,
+      "readOnlyValue": false,
+      "customOptions": {},
+      "useExactSearch": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "select1",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "select",
+      "indexeddb": {
+        "filter": {}
+      },
+      "selectFields": "",
+      "searchField": "",
+      "minSearch": 0,
+      "filter": "",
+      "limit": 100,
+      "redrawOn": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "lazyLoad": true,
+      "authenticate": false,
+      "searchThreshold": 0.3,
+      "fuseOptions": {
+        "include": "score",
+        "threshold": 0.3
+      },
+      "id": "em8m4qk",
+      "defaultValue": ""
+    },
+    {
+      "label": "Email",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "kickbox": {
+        "enabled": false
+      },
+      "errorLabel": "",
+      "key": "email",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "email",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "email",
+      "inputMask": "",
+      "id": "epj8sj28",
+      "defaultValue": null
+    },
+    {
+      "label": "Url",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "url",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "url",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "inputType": "url",
+      "inputMask": "",
+      "id": "exw9p4",
+      "defaultValue": null
+    },
+    {
+      "label": "Phone Number",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "(999) 999-9999",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "minLength": "",
+        "maxLength": "",
+        "pattern": ""
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "phoneNumber",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "phoneNumber",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "inputType": "tel",
+      "id": "e2c7lpl",
+      "defaultValue": null
+    },
+    {
+      "label": "Tags",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "delimeter": ",",
+      "maxTags": 0,
+      "storeas": "string",
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "tags",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "tags",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "refreshOn": "",
+      "widget": {
+        "type": "input"
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ejc82t",
+      "defaultValue": null
+    },
+    {
+      "label": "Address",
+      "labelPosition": "top",
+      "enableManualMode": false,
+      "disableClearIcon": false,
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "provider": "google",
+      "manualModeViewString": "",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "address",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "address",
+      "switchToManualModeLabel": "Can't find address? Switch to manual mode.",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "widget": null,
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "tree": true,
+      "components": [
+        {
+          "label": "Address 1",
+          "tableView": false,
+          "key": "address1",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eecfg6h"
+        },
+        {
+          "label": "Address 2",
+          "tableView": false,
+          "key": "address2",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eajhpuu"
+        },
+        {
+          "label": "City",
+          "tableView": false,
+          "key": "city",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "efpnrca7"
+        },
+        {
+          "label": "State",
+          "tableView": false,
+          "key": "state",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "eu3kksv"
+        },
+        {
+          "label": "Country",
+          "tableView": false,
+          "key": "country",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "el39cu9"
+        },
+        {
+          "label": "Zip Code",
+          "tableView": false,
+          "key": "zip",
+          "type": "textfield",
+          "input": true,
+          "customConditional": "show = _.get(instance, 'parent.manualMode', false);",
+          "placeholder": "",
+          "prefix": "",
+          "customClass": "",
+          "suffix": "",
+          "multiple": false,
+          "defaultValue": null,
+          "protected": false,
+          "unique": false,
+          "persistent": true,
+          "hidden": false,
+          "clearOnHide": true,
+          "refreshOn": "",
+          "redrawOn": "",
+          "modalEdit": false,
+          "labelPosition": "top",
+          "description": "",
+          "errorLabel": "",
+          "tooltip": "",
+          "hideLabel": false,
+          "tabindex": "",
+          "disabled": false,
+          "autofocus": false,
+          "dbIndex": false,
+          "customDefaultValue": "",
+          "calculateValue": "",
+          "calculateServer": false,
+          "widget": {
+            "type": "input"
+          },
+          "attributes": {},
+          "validateOn": "change",
+          "validate": {
+            "required": false,
+            "custom": "",
+            "customPrivate": false,
+            "strictDateValidation": false,
+            "multiple": false,
+            "unique": false,
+            "minLength": "",
+            "maxLength": "",
+            "pattern": ""
+          },
+          "conditional": {
+            "show": null,
+            "when": null,
+            "eq": ""
+          },
+          "overlay": {
+            "style": "",
+            "left": "",
+            "top": "",
+            "width": "",
+            "height": ""
+          },
+          "allowCalculateOverride": false,
+          "encrypted": false,
+          "showCharCount": false,
+          "showWordCount": false,
+          "properties": {},
+          "allowMultipleMasks": false,
+          "mask": false,
+          "inputType": "text",
+          "inputFormat": "plain",
+          "inputMask": "",
+          "spellcheck": true,
+          "id": "epyac4"
+        }
+      ],
+      "providerOptions": {
+        "params": {
+          "key": "fze",
+          "region": ""
+        }
+      },
+      "id": "er02e2gb",
+      "defaultValue": {}
+    },
+    {
+      "label": "Date / Time",
+      "labelPosition": "top",
+      "displayInTimezone": "viewer",
+      "useLocaleSettings": false,
+      "allowInput": true,
+      "format": "yyyy-MM-dd hh:mm a",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "enableDate": true,
+      "enableMinDateInput": false,
+      "datePicker": {
+        "minDate": null,
+        "maxDate": null,
+        "disable": "",
+        "disableFunction": "",
+        "disableWeekends": false,
+        "disableWeekdays": false,
+        "showWeeks": true,
+        "startingDay": 0,
+        "initDate": "",
+        "minMode": "day",
+        "maxMode": "year",
+        "yearRows": 4,
+        "yearColumns": 5
+      },
+      "enableMaxDateInput": false,
+      "enableTime": true,
+      "timePicker": {
+        "showMeridian": true,
+        "hourStep": 1,
+        "minuteStep": 1,
+        "readonlyInput": false,
+        "mousewheel": true,
+        "arrowkeys": true
+      },
+      "multiple": false,
+      "defaultValue": "",
+      "defaultDate": "",
+      "customOptions": {},
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateOn": "change",
+      "errorLabel": "",
+      "key": "dateTime",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "datetime",
+      "timezone": "",
+      "input": true,
+      "prefix": "",
+      "suffix": "",
+      "refreshOn": "",
+      "widget": {
+        "type": "calendar",
+        "displayInTimezone": "viewer",
+        "locale": "en",
+        "useLocaleSettings": false,
+        "allowInput": true,
+        "mode": "single",
+        "enableTime": true,
+        "noCalendar": false,
+        "format": "yyyy-MM-dd hh:mm a",
+        "hourIncrement": 1,
+        "minuteIncrement": 1,
+        "minDate": null,
+        "disabledDates": "",
+        "disableWeekends": false,
+        "disableWeekdays": false,
+        "disableFunction": "",
+        "maxDate": null
+      },
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "datepickerMode": "day",
+      "id": "el9idgl"
+    },
+    {
+      "label": "Day",
+      "hideInputLabels": false,
+      "inputsLabelPosition": "top",
+      "description": "",
+      "useLocaleSettings": false,
+      "tooltip": "",
+      "customClass": "",
+      "tabindex": "",
+      "hidden": false,
+      "hideLabel": false,
+      "autofocus": false,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "fields": {
+        "day": {
+          "type": "number",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        },
+        "month": {
+          "type": "select",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        },
+        "year": {
+          "type": "number",
+          "placeholder": "",
+          "hide": false,
+          "required": false
+        }
+      },
+      "dayFirst": false,
+      "persistent": true,
+      "protected": false,
+      "dbIndex": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "maxDate": "",
+      "minDate": "",
+      "unique": false,
+      "errorLabel": "",
+      "validate": {
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "required": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "key": "day",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "day",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "refreshOn": "",
+      "labelPosition": "top",
+      "widget": null,
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "id": "ecgefls",
+      "defaultValue": "00/00/0000"
+    },
+    {
+      "label": "Currency",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": false,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "currency": "USD",
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false,
+        "min": "",
+        "max": "",
+        "step": "any",
+        "integer": ""
+      },
+      "unique": false,
+      "errorLabel": "",
+      "key": "currency",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "currency",
+      "input": true,
+      "refreshOn": "",
+      "showCharCount": false,
+      "showWordCount": false,
+      "allowMultipleMasks": false,
+      "delimiter": true,
+      "id": "em22wkd",
+      "defaultValue": null
+    },
+    {
+      "label": "Edit Grid",
+      "tableView": false,
+      "rowDrafts": false,
+      "key": "editGrid",
+      "type": "editgrid",
+      "displayAsTable": false,
+      "input": true,
+      "components": [
+        {
+          "label": "Currency",
+          "mask": false,
+          "spellcheck": true,
+          "tableView": true,
+          "currency": "USD",
+          "inputFormat": "plain",
+          "key": "currency",
+          "type": "currency",
+          "input": true,
+          "delimiter": true
+        }
+      ]
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "key": "submit",
+      "size": "md",
+      "block": false,
+      "action": "submit",
+      "disableOnInvalid": true,
+      "theme": "primary",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "customClass": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": null,
+      "protected": false,
+      "unique": false,
+      "persistent": false,
+      "hidden": false,
+      "clearOnHide": true,
+      "refreshOn": "",
+      "redrawOn": "",
+      "tableView": false,
+      "modalEdit": false,
+      "labelPosition": "top",
+      "description": "",
+      "errorLabel": "",
+      "tooltip": "",
+      "hideLabel": false,
+      "tabindex": "",
+      "disabled": false,
+      "autofocus": false,
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "widget": {
+        "type": "input"
+      },
+      "attributes": {},
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "custom": "",
+        "customPrivate": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": ""
+      },
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "allowCalculateOverride": false,
+      "encrypted": false,
+      "showCharCount": false,
+      "showWordCount": false,
+      "properties": {},
+      "allowMultipleMasks": false,
+      "leftIcon": "",
+      "rightIcon": "",
+      "dataGridLabel": true,
+      "id": "e08gq3l"
+    }
+  ],
+  "display": "form"
+}
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.tsx b/packages/react-formio/src/molecules/pagination/Pagination.tsx
index 46abd5f..7fb5787 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.tsx
@@ -1,8 +1,8 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
-import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../../components/table/utils/getPageNumbers";
 import { Select } from "../forms/select/Select";
+import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table";
 
 function PaginationButton(
   props: PropsWithChildren<
diff --git a/packages/react-formio/src/components/table/table.stories.tsx b/packages/react-formio/src/molecules/table/Table.stories.tsx
similarity index 98%
rename from packages/react-formio/src/components/table/table.stories.tsx
rename to packages/react-formio/src/molecules/table/Table.stories.tsx
index 2cb3340..350735b 100644
--- a/packages/react-formio/src/components/table/table.stories.tsx
+++ b/packages/react-formio/src/molecules/table/Table.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { mapPagination } from "../../utils/mapPagination";
 import FormType from "../__fixtures__/form-schema.json";
 import formSubmissions from "../__fixtures__/form-submissions.json";
-import { Table } from "./table.component";
+import { Table } from "./Table";
 import { mapFormToColumns } from "./utils/mapFormToColumns";
 
 export default {
diff --git a/packages/react-formio/src/components/table/table.component.tsx b/packages/react-formio/src/molecules/table/Table.tsx
similarity index 97%
rename from packages/react-formio/src/components/table/table.component.tsx
rename to packages/react-formio/src/molecules/table/Table.tsx
index 5122949..c2f7f8e 100644
--- a/packages/react-formio/src/components/table/table.component.tsx
+++ b/packages/react-formio/src/molecules/table/Table.tsx
@@ -2,8 +2,8 @@ import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
 import { PaginationProps } from "../../molecules/pagination/Pagination";
-import { DrapNDropContainer } from "./components/dragNDropContainer";
-import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";
+import { DrapNDropContainer } from "./components/DragNDropContainer";
+import { TableProps, useCustomTable } from "./hooks/useCustomTable";
 
 export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
   const {
diff --git a/packages/react-formio/src/components/table/components/defaultArrowSort.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultArrowSort.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/components/defaultArrowSort.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultArrowSort.tsx
diff --git a/packages/react-formio/src/components/table/components/defaultCell.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultCell.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/components/defaultCell.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultCell.tsx
diff --git a/packages/react-formio/src/components/table/components/defaultCellHeader.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultCellHeader.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/components/defaultCellHeader.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultCellHeader.tsx
diff --git a/packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultCellOperations.tsx
similarity index 97%
rename from packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultCellOperations.tsx
index 05935c2..3c20524 100644
--- a/packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx
+++ b/packages/react-formio/src/molecules/table/components/DefaultCellOperations.tsx
@@ -1,4 +1,4 @@
-import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
+import { DefaultOperationButton, OperationButtonProps } from "./DefaultOperationButton";
 
 export interface DefaultCellOperationsProps {
   operations: (OperationButtonProps & {
diff --git a/packages/react-formio/src/components/table/components/defaultCells.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultCells.tsx
similarity index 91%
rename from packages/react-formio/src/components/table/components/defaultCells.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultCells.tsx
index e59315d..69ea617 100644
--- a/packages/react-formio/src/components/table/components/defaultCells.component.tsx
+++ b/packages/react-formio/src/molecules/table/components/DefaultCells.tsx
@@ -1,6 +1,6 @@
 import { Row } from "react-table";
 
-import type { ExtendedCell } from "../hooks/useCustomTable.hook";
+import type { ExtendedCell } from "../hooks/useCustomTable";
 
 export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {
   return (
diff --git a/packages/react-formio/src/components/table/components/defaultOperationButton.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultOperationButton.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/components/defaultOperationButton.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultOperationButton.tsx
diff --git a/packages/react-formio/src/components/table/components/defaultRow.component.tsx b/packages/react-formio/src/molecules/table/components/DefaultRow.tsx
similarity index 93%
rename from packages/react-formio/src/components/table/components/defaultRow.component.tsx
rename to packages/react-formio/src/molecules/table/components/DefaultRow.tsx
index 5305ff4..c61a4fe 100644
--- a/packages/react-formio/src/components/table/components/defaultRow.component.tsx
+++ b/packages/react-formio/src/molecules/table/components/DefaultRow.tsx
@@ -4,8 +4,8 @@ import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { Row } from "react-table";
 
 import { iconClass } from "../../../utils/iconClass";
-import { useDndRow } from "../hooks/useDragnDropRow.hook";
-import { DefaultCells } from "./defaultCells.component";
+import { useDndRow } from "../hooks/useDragnDropRow";
+import { DefaultCells } from "./DefaultCells";
 
 export interface DefaultRowProps<Data extends object = {}>
   extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "onClick" | "onDrag" | "onDrop"> {
diff --git a/packages/react-formio/src/components/table/components/dragNDropContainer.tsx b/packages/react-formio/src/molecules/table/components/DragNDropContainer.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/components/dragNDropContainer.tsx
rename to packages/react-formio/src/molecules/table/components/DragNDropContainer.tsx
diff --git a/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.spec.tsx b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
similarity index 92%
rename from packages/react-formio/src/components/table/filters/defaultColumnFilter.component.spec.tsx
rename to packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
index 77b655b..ecdf5c5 100644
--- a/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.spec.tsx
+++ b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
 
-import { DefaultColumnFilter } from "./defaultColumnFilter.component";
+import { DefaultColumnFilter } from "./DefaultColumnFilter";
 
 describe("DefaultColumnFilter", () => {
   it("should display text-field and handle change", async () => {
diff --git a/packages/react-formio/src/components/table/filters/defaultColumnFilter.component.tsx b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/filters/defaultColumnFilter.component.tsx
rename to packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.tsx
diff --git a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
similarity index 96%
rename from packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx
rename to packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
index 97ebdae..5a1d0c0 100644
--- a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx
+++ b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { SelectColumnFilter } from "./selectColumnFilter.component";
+import { SelectColumnFilter } from "./SelectColumnFilter";
 
 describe("SelectColumnFilter", () => {
   it("should display select with choices", async () => {
diff --git a/packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.tsx
similarity index 100%
rename from packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx
rename to packages/react-formio/src/molecules/table/filters/SelectColumnFilter.tsx
diff --git a/packages/react-formio/src/components/table/filters/sliderColumnFilter.component.tsx b/packages/react-formio/src/molecules/table/filters/SliderColumnFilter.tsx
similarity index 81%
rename from packages/react-formio/src/components/table/filters/sliderColumnFilter.component.tsx
rename to packages/react-formio/src/molecules/table/filters/SliderColumnFilter.tsx
index e55b64e..ac66e1d 100644
--- a/packages/react-formio/src/components/table/filters/sliderColumnFilter.component.tsx
+++ b/packages/react-formio/src/molecules/table/filters/SliderColumnFilter.tsx
@@ -1,8 +1,8 @@
-import { FilterProps } from "react-table";
+import type { FilterProps } from "react-table";
 
 export function SliderColumnFilter<D extends Record<string, unknown> = {}>({
   column: { filterValue, setFilter, preFilteredRows, id }
-}: FilterProps<D>) {
+}: FilterProps<D> & { column: { filterValue: any; setFilter: any; preFilteredRows: any[]; id: string } }) {
   let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
   let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
 
diff --git a/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx b/packages/react-formio/src/molecules/table/hooks/useCustomTable.tsx
similarity index 94%
rename from packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx
rename to packages/react-formio/src/molecules/table/hooks/useCustomTable.tsx
index 37139e4..bc65fdd 100644
--- a/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx
+++ b/packages/react-formio/src/molecules/table/hooks/useCustomTable.tsx
@@ -16,12 +16,12 @@ import {
 
 import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
 import { Pagination as DefaultPagination } from "../../../molecules/pagination/Pagination";
-import { DefaultArrowSort } from "../components/defaultArrowSort.component";
-import { DefaultCellHeader, DefaultCellHeaderProps } from "../components/defaultCellHeader.component";
-import { DefaultRow, DefaultRowProps } from "../components/defaultRow.component";
-import { DefaultColumnFilter } from "../filters/defaultColumnFilter.component";
+import { DefaultArrowSort } from "../components/DefaultArrowSort";
+import { DefaultCellHeader, DefaultCellHeaderProps } from "../components/DefaultCellHeader";
+import { DefaultRow, DefaultRowProps } from "../components/DefaultRow";
+import { DefaultColumnFilter } from "../filters/DefaultColumnFilter";
 import { swapElements } from "../utils/swapElements";
-import { useOperations } from "./useOperations.hook";
+import { useOperations } from "./useOperations";
 
 export interface ExtraColumnProps {
   colspan?: number;
diff --git a/packages/react-formio/src/components/table/hooks/useDragnDropRow.hook.ts b/packages/react-formio/src/molecules/table/hooks/useDragnDropRow.ts
similarity index 97%
rename from packages/react-formio/src/components/table/hooks/useDragnDropRow.hook.ts
rename to packages/react-formio/src/molecules/table/hooks/useDragnDropRow.ts
index a885635..d24e08d 100644
--- a/packages/react-formio/src/components/table/hooks/useDragnDropRow.hook.ts
+++ b/packages/react-formio/src/molecules/table/hooks/useDragnDropRow.ts
@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { useDrag, useDrop } from "react-dnd";
 
-import { DefaultRowProps } from "../components/defaultRow.component";
+import { DefaultRowProps } from "../components/DefaultRow";
 
 const DND_ITEM_TYPE = "row";
 
diff --git a/packages/react-formio/src/components/table/hooks/useOperations.hook.tsx b/packages/react-formio/src/molecules/table/hooks/useOperations.tsx
similarity index 92%
rename from packages/react-formio/src/components/table/hooks/useOperations.hook.tsx
rename to packages/react-formio/src/molecules/table/hooks/useOperations.tsx
index 3be669a..162b324 100644
--- a/packages/react-formio/src/components/table/hooks/useOperations.hook.tsx
+++ b/packages/react-formio/src/molecules/table/hooks/useOperations.tsx
@@ -2,7 +2,7 @@ import { type ComponentType, type FunctionComponent } from "react";
 import { Hooks } from "react-table";
 
 import { Operation } from "../../../interfaces";
-import { DefaultCellOperations } from "../components/defaultCellOperations.component";
+import { DefaultCellOperations } from "../components/DefaultCellOperations";
 
 export type UseOperationsHookProps = {
   CellOperations?: FunctionComponent | ComponentType<{}>;
diff --git a/packages/react-formio/src/molecules/table/index.ts b/packages/react-formio/src/molecules/table/index.ts
new file mode 100644
index 0000000..3591de5
--- /dev/null
+++ b/packages/react-formio/src/molecules/table/index.ts
@@ -0,0 +1,15 @@
+export * from "./components/DefaultArrowSort";
+export * from "./components/DefaultCell";
+export * from "./components/DefaultCellHeader";
+export * from "./components/DefaultCellHeader";
+export * from "./components/DefaultCellOperations";
+export * from "./components/DefaultOperationButton";
+export * from "./filters/DefaultColumnFilter";
+export * from "./filters/SelectColumnFilter";
+export * from "./filters/SliderColumnFilter";
+export * from "./hooks/useCustomTable";
+export * from "./hooks/useOperations";
+export * from "./Table";
+export * from "./utils/getPageNumbers";
+export * from "./utils/mapFormToColumns";
+export * from "./utils/swapElements";
diff --git a/packages/react-formio/src/components/table/utils/getPageNumbers.ts b/packages/react-formio/src/molecules/table/utils/getPageNumbers.ts
similarity index 100%
rename from packages/react-formio/src/components/table/utils/getPageNumbers.ts
rename to packages/react-formio/src/molecules/table/utils/getPageNumbers.ts
diff --git a/packages/react-formio/src/components/table/utils/mapFormToColumns.tsx b/packages/react-formio/src/molecules/table/utils/mapFormToColumns.tsx
similarity index 58%
rename from packages/react-formio/src/components/table/utils/mapFormToColumns.tsx
rename to packages/react-formio/src/molecules/table/utils/mapFormToColumns.tsx
index 74c50cc..8a62768 100644
--- a/packages/react-formio/src/components/table/utils/mapFormToColumns.tsx
+++ b/packages/react-formio/src/molecules/table/utils/mapFormToColumns.tsx
@@ -1,16 +1,14 @@
-import { Components } from "formiojs";
-import FormioUtils from "formiojs/utils";
+import { Components, Utils } from "formiojs";
 
-import { FormType } from "../../../interfaces";
-import { ComponentType } from "../../../interfaces/ComponentType";
-import { DefaultCell } from "../components/defaultCell.component";
-import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
-import { ExtendedColumn } from "../hooks/useCustomTable.hook";
+import type { ComponentType, FormType } from "../../../interfaces";
+import { DefaultCell } from "../components/DefaultCell";
+import { SelectColumnFilter } from "../filters/SelectColumnFilter";
+import { ExtendedColumn } from "../hooks/useCustomTable";
 
 export function mapFormToColumns(form: FormType): ExtendedColumn[] {
   const columns: ExtendedColumn[] = [];
 
-  FormioUtils.eachComponent(form.components, (component: ComponentType) => {
+  Utils.eachComponent(form.components, (component: ComponentType) => {
     if (component.tableView && component.key) {
       const cmp: any = Components.create(component, {}, null, true);
 
@@ -22,7 +20,7 @@ export function mapFormToColumns(form: FormType): ExtendedColumn[] {
       };
 
       if (component.type === "select" && component.dataSrc === "values") {
-        column.Filter = SelectColumnFilter;
+        (column as any).Filter = SelectColumnFilter;
         (column as any).choices = component.data.values;
       }
 
diff --git a/packages/react-formio/src/components/table/utils/swapElements.spec.ts b/packages/react-formio/src/molecules/table/utils/swapElements.spec.ts
similarity index 100%
rename from packages/react-formio/src/components/table/utils/swapElements.spec.ts
rename to packages/react-formio/src/molecules/table/utils/swapElements.spec.ts
diff --git a/packages/react-formio/src/components/table/utils/swapElements.ts b/packages/react-formio/src/molecules/table/utils/swapElements.ts
similarity index 100%
rename from packages/react-formio/src/components/table/utils/swapElements.ts
rename to packages/react-formio/src/molecules/table/utils/swapElements.ts

From c74c4c5a892b0416ef249d3f24a00965899c415d Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 10 Jan 2025 09:37:21 +0100
Subject: [PATCH 12/12] refactor(react-formio): move all formio component under
 organisms

BREAKING CHANGE: use appropriate link to import components (tree shaking)
---
 .storybook/main.ts                            |   12 +-
 packages/react-formio-container/package.json  |    3 +-
 .../src/views/formAccess.view.tsx             |    2 +-
 .../src/views/formAction.view.tsx             |    4 +-
 .../src/views/formActions.view.tsx            |    2 +-
 .../src/views/formEdit.view.tsx               |    2 +-
 .../src/views/formExport.view.tsx             |    2 +-
 .../src/views/formPreview.view.tsx            |    3 +-
 .../src/views/formSettings.view.tsx           |    2 +-
 .../src/views/forms.view.tsx                  |    2 +-
 .../src/views/submission.view.tsx             |    5 +-
 .../src/views/submissions.view.tsx            |    2 +-
 packages/react-formio/readme.md               |   41 +-
 packages/react-formio/src/components/index.ts |   13 -
 packages/react-formio/src/index.ts            |    6 +-
 .../src/molecules/alert/Alert.spec.tsx        |    6 -
 .../molecules/forms/select/Select.spec.tsx    |    3 -
 .../src/molecules/table/Table.stories.tsx     |    2 +-
 .../__fixtures__/WrapComponent.tsx            |    0
 .../__fixtures__/form-actions.json            |    0
 .../__fixtures__/form-firstname.fixture.json  |    0
 .../__fixtures__/form-schema.json             |    0
 .../__fixtures__/form-submissions.json        |    0
 .../__fixtures__/form-wizard.fixture.json     |    0
 .../__fixtures__/form.fixture.json            |    0
 .../__fixtures__/useEditForm.tsx              |    0
 .../__fixtures__/utils.ts                     |    0
 .../form/Form.spec.tsx}                       |    2 +-
 .../form/Form.stories.tsx}                    |    8 +-
 .../form/Form.tsx}                            |    2 +-
 .../form/access/FormAccess.schema.ts}         |    2 +-
 .../form/access/FormAccess.stories.tsx}       |   10 +-
 .../form/access/FormAccess.tsx}               |    8 +-
 .../form/access/FormAccess.utils.spec.ts}     |    4 +-
 .../form/access/FormAccess.utils.ts}          |    5 +-
 .../form/action/FormAction.stories.tsx}       |   10 +-
 .../form/action/FormAction.tsx}               |    4 +-
 .../form/builder/FormBuilder.stories.tsx}     |   13 +-
 .../form/builder/FormBuilder.tsx}             |    2 +-
 .../form/builder/FormEdit.reducer.ts}         |    2 +-
 .../form/builder/FormEdit.stories.tsx}        |   12 +-
 .../form/builder/FormEdit.tsx}                |   12 +-
 .../form/builder/FormEditCtas.tsx}            |    6 +-
 .../form/builder/FormParameters.tsx}          |    8 +-
 .../form/builder/useFormBuilder.ts}           |    2 +-
 .../form/builder/useFormEdit.ts}              |    4 +-
 .../settings/FormSettings.component.spec.tsx} |    4 +-
 .../form/settings/FormSettings.schema.ts}     |    2 +-
 .../form/settings/FormSettings.stories.tsx}   |   10 +-
 .../form/settings/FormSettings.tsx}           |    8 +-
 .../form/settings/FormSettings.utils.spec.ts} |    2 +-
 .../form/settings/FormSettings.utils.ts}      |    2 +-
 .../{components => organisms}/form/types.ts   |    0
 .../form/useForm.ts}                          |    0
 .../organisms/modal/RemoveModal.stories.tsx   |    2 +-
 .../table/actions/ActionsTable.spec.tsx}      |    4 +-
 .../table/actions/ActionsTable.stories.tsx}   |   11 +-
 .../table/actions/ActionsTable.tsx}           |    8 +-
 .../table/actions}/__fixtures__/data.json     |    0
 .../table/forms/FormsTable.stories.tsx}       |   10 +-
 .../table/forms/FormsTable.tsx}               |    6 +-
 .../table/forms/components/FormCell.tsx}      |    6 +-
 .../submissions/SubmissionsTable.stories.tsx} |   15 +-
 .../table/submissions/SubmissionsTable.tsx}   |    4 +-
 packages/redux-utils/package.json             |    3 +-
 packages/tailwind-formio/package.json         |    4 +-
 .../tailwind-formio/src/stories/tailwind.mdx  |    2 +-
 .../src/templates/stories/builder.stories.jsx | 1917 -----------------
 .../stories/form-integration.stories.jsx      |  227 --
 .../src/templates/stories/form.stories.jsx    |  466 ----
 .../src/templates/stories/wizard.stories.jsx  | 1917 -----------------
 stories/Form.mdx                              |    2 +-
 stories/FormBuilder.mdx                       |    2 +-
 stories/FormEdit.mdx                          |    2 +-
 stories/FormTable.mdx                         |    2 +-
 stories/Getting-started.mdx                   |   25 +-
 stories/SubmissionsTable.mdx                  |    2 +-
 tools/typescript/package.json                 |    5 +-
 tools/vitest/package.json                     |    4 +-
 79 files changed, 209 insertions(+), 4693 deletions(-)
 delete mode 100644 packages/react-formio/src/components/index.ts
 rename packages/react-formio/src/{components => organisms}/__fixtures__/WrapComponent.tsx (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/form-actions.json (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/form-firstname.fixture.json (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/form-schema.json (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/form-submissions.json (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/form-wizard.fixture.json (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/form.fixture.json (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/useEditForm.tsx (100%)
 rename packages/react-formio/src/{components => organisms}/__fixtures__/utils.ts (100%)
 rename packages/react-formio/src/{components/form/form.component.spec.tsx => organisms/form/Form.spec.tsx} (96%)
 rename packages/react-formio/src/{components/form/form.stories.tsx => organisms/form/Form.stories.tsx} (99%)
 rename packages/react-formio/src/{components/form/form.component.tsx => organisms/form/Form.tsx} (92%)
 rename packages/react-formio/src/{components/form-access/formAccess.schema.ts => organisms/form/access/FormAccess.schema.ts} (99%)
 rename packages/react-formio/src/{components/form-access/formAccess.stories.tsx => organisms/form/access/FormAccess.stories.tsx} (90%)
 rename packages/react-formio/src/{components/form-access/formAccess.component.tsx => organisms/form/access/FormAccess.tsx} (97%)
 rename packages/react-formio/src/{components/form-access/formAccess.utils.spec.ts => organisms/form/access/FormAccess.utils.spec.ts} (98%)
 rename packages/react-formio/src/{components/form-access/formAccess.utils.ts => organisms/form/access/FormAccess.utils.ts} (95%)
 rename packages/react-formio/src/{components/form-action/formAction.stories.tsx => organisms/form/action/FormAction.stories.tsx} (98%)
 rename packages/react-formio/src/{components/form-action/formAction.component.tsx => organisms/form/action/FormAction.tsx} (95%)
 rename packages/react-formio/src/{components/form-builder/formBuilder.stories.tsx => organisms/form/builder/FormBuilder.stories.tsx} (91%)
 rename packages/react-formio/src/{components/form-builder/formBuilder.component.tsx => organisms/form/builder/FormBuilder.tsx} (98%)
 rename packages/react-formio/src/{components/form-edit/formEdit.reducer.ts => organisms/form/builder/FormEdit.reducer.ts} (97%)
 rename packages/react-formio/src/{components/form-edit/formEdit.stories.tsx => organisms/form/builder/FormEdit.stories.tsx} (97%)
 rename packages/react-formio/src/{components/form-edit/formEdit.component.tsx => organisms/form/builder/FormEdit.tsx} (83%)
 rename packages/react-formio/src/{components/form-edit/formCtas.component.tsx => organisms/form/builder/FormEditCtas.tsx} (93%)
 rename packages/react-formio/src/{components/form-edit/formParameters.component.tsx => organisms/form/builder/FormParameters.tsx} (90%)
 rename packages/react-formio/src/{components/form-builder/useFormBuilder.hook.ts => organisms/form/builder/useFormBuilder.ts} (99%)
 rename packages/react-formio/src/{components/form-edit/useFormEdit.hook.ts => organisms/form/builder/useFormEdit.ts} (94%)
 rename packages/react-formio/src/{components/form-settings/formSettings.component.spec.tsx => organisms/form/settings/FormSettings.component.spec.tsx} (93%)
 rename packages/react-formio/src/{components/form-settings/formSettings.schema.ts => organisms/form/settings/FormSettings.schema.ts} (96%)
 rename packages/react-formio/src/{components/form-settings/formSettings.stories.tsx => organisms/form/settings/FormSettings.stories.tsx} (83%)
 rename packages/react-formio/src/{components/form-settings/formSettings.component.tsx => organisms/form/settings/FormSettings.tsx} (91%)
 rename packages/react-formio/src/{components/form-settings/formSettings.utils.spec.ts => organisms/form/settings/FormSettings.utils.spec.ts} (97%)
 rename packages/react-formio/src/{components/form-settings/formSettings.utils.ts => organisms/form/settings/FormSettings.utils.ts} (91%)
 rename packages/react-formio/src/{components => organisms}/form/types.ts (100%)
 rename packages/react-formio/src/{components/form/useForm.hook.ts => organisms/form/useForm.ts} (100%)
 rename packages/react-formio/src/{components/actions-table/actionsTable.component.spec.tsx => organisms/table/actions/ActionsTable.spec.tsx} (94%)
 rename packages/react-formio/src/{components/actions-table/actionsTable.stories.tsx => organisms/table/actions/ActionsTable.stories.tsx} (90%)
 rename packages/react-formio/src/{components/actions-table/actionsTable.component.tsx => organisms/table/actions/ActionsTable.tsx} (87%)
 rename packages/react-formio/src/{components/actions-table => organisms/table/actions}/__fixtures__/data.json (100%)
 rename packages/react-formio/src/{components/forms-table/formsTable.stories.tsx => organisms/table/forms/FormsTable.stories.tsx} (95%)
 rename packages/react-formio/src/{components/forms-table/formsTable.component.tsx => organisms/table/forms/FormsTable.tsx} (86%)
 rename packages/react-formio/src/{components/forms-table/components/formCell.component.tsx => organisms/table/forms/components/FormCell.tsx} (87%)
 rename packages/react-formio/src/{components/submissions-table/submissionsTable.stories.tsx => organisms/table/submissions/SubmissionsTable.stories.tsx} (79%)
 rename packages/react-formio/src/{components/submissions-table/submissionsTable.component.tsx => organisms/table/submissions/SubmissionsTable.tsx} (80%)
 delete mode 100644 packages/tailwind-formio/src/templates/stories/builder.stories.jsx
 delete mode 100644 packages/tailwind-formio/src/templates/stories/form-integration.stories.jsx
 delete mode 100644 packages/tailwind-formio/src/templates/stories/form.stories.jsx
 delete mode 100644 packages/tailwind-formio/src/templates/stories/wizard.stories.jsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 9b10c6f..28f0f00 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -6,6 +6,10 @@ const config: StorybookConfig = {
   stories: [
     "../stories/Getting-started.mdx",
     "../stories/**/*.mdx",
+    {
+      titlePrefix: "Styling",
+      directory: "../packages/tailwind-formio"
+    },
     {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"
@@ -13,13 +17,7 @@ const config: StorybookConfig = {
     {
       titlePrefix: "Organisms",
       directory: "../packages/react-formio/src/organisms"
-    },
-    "../packages/react-formio/src/components/**/*.mdx",
-    "../packages/react-formio/src/components/**/*.stories.@(js|jsx|ts|tsx)",
-    "../packages/react-formio/src/components/**/*.story.@(js|jsx|ts|tsx)",
-    "../packages/tailwind-formio/src/**/*.mdx",
-    "../packages/tailwind-formio/src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../packages/tailwind-formio/src/**/*.story.@(js|jsx|ts|tsx)"
+    }
   ],
 
   addons: [
diff --git a/packages/react-formio-container/package.json b/packages/react-formio-container/package.json
index 3dfbf9f..13eef75 100644
--- a/packages/react-formio-container/package.json
+++ b/packages/react-formio-container/package.json
@@ -97,6 +97,5 @@
     "tooltip.js": {
       "optional": false
     }
-  },
-  "dependencies": {}
+  }
 }
diff --git a/packages/react-formio-container/src/views/formAccess.view.tsx b/packages/react-formio-container/src/views/formAccess.view.tsx
index 9631469..9cf1319 100644
--- a/packages/react-formio-container/src/views/formAccess.view.tsx
+++ b/packages/react-formio-container/src/views/formAccess.view.tsx
@@ -1,4 +1,4 @@
-import { FormAccess } from "@tsed/react-formio";
+import { FormAccess } from "@tsed/react-formio/organisms/form/access/FormAccess";
 
 import { useForm } from "../hooks/useForm.hook";
 
diff --git a/packages/react-formio-container/src/views/formAction.view.tsx b/packages/react-formio-container/src/views/formAction.view.tsx
index 15924f6..d2f5d1c 100644
--- a/packages/react-formio-container/src/views/formAction.view.tsx
+++ b/packages/react-formio-container/src/views/formAction.view.tsx
@@ -1,5 +1,7 @@
-import { FormAction, iconClass, useTooltip } from "@tsed/react-formio";
+import { useTooltip } from "@tsed/react-formio/hooks/useTooltip";
+import { FormAction } from "@tsed/react-formio/organisms/form/action/FormAction";
 import { RemoveModal } from "@tsed/react-formio/organisms/modal/RemoveModal";
+import { iconClass } from "@tsed/react-formio/utils/iconClass";
 import classnames from "classnames";
 import { useParams } from "react-router";
 
diff --git a/packages/react-formio-container/src/views/formActions.view.tsx b/packages/react-formio-container/src/views/formActions.view.tsx
index 06a4d29..07f710b 100644
--- a/packages/react-formio-container/src/views/formActions.view.tsx
+++ b/packages/react-formio-container/src/views/formActions.view.tsx
@@ -1,4 +1,4 @@
-import { ActionsTable } from "@tsed/react-formio";
+import { ActionsTable } from "@tsed/react-formio/organisms/table/actions/ActionsTable";
 import { Route, Switch } from "react-router";
 
 import { useActions, UseActionsProps } from "../hooks/useActions.hook";
diff --git a/packages/react-formio-container/src/views/formEdit.view.tsx b/packages/react-formio-container/src/views/formEdit.view.tsx
index c4bba2f..12a581f 100644
--- a/packages/react-formio-container/src/views/formEdit.view.tsx
+++ b/packages/react-formio-container/src/views/formEdit.view.tsx
@@ -1,4 +1,4 @@
-import { FormEdit } from "@tsed/react-formio";
+import { FormEdit } from "@tsed/react-formio/organisms/form/builder/FormEdit";
 import classnames from "classnames";
 
 import { useForm } from "../hooks/useForm.hook";
diff --git a/packages/react-formio-container/src/views/formExport.view.tsx b/packages/react-formio-container/src/views/formExport.view.tsx
index 660f6e6..963a4ff 100644
--- a/packages/react-formio-container/src/views/formExport.view.tsx
+++ b/packages/react-formio-container/src/views/formExport.view.tsx
@@ -1,5 +1,5 @@
-import { iconClass } from "@tsed/react-formio";
 import { Card } from "@tsed/react-formio/molecules/card/Card";
+import { iconClass } from "@tsed/react-formio/utils/iconClass";
 
 import { UseFormProps } from "../hooks/useForm.hook";
 import { useFormExport } from "../hooks/useFormExport";
diff --git a/packages/react-formio-container/src/views/formPreview.view.tsx b/packages/react-formio-container/src/views/formPreview.view.tsx
index 4dc5e81..f0d93c6 100644
--- a/packages/react-formio-container/src/views/formPreview.view.tsx
+++ b/packages/react-formio-container/src/views/formPreview.view.tsx
@@ -1,5 +1,6 @@
-import { Form, FormType } from "@tsed/react-formio";
+import type { FormType } from "@tsed/react-formio";
 import { Card } from "@tsed/react-formio/molecules/card/Card";
+import { Form } from "@tsed/react-formio/organisms/form/Form";
 
 import { useForm } from "../hooks";
 
diff --git a/packages/react-formio-container/src/views/formSettings.view.tsx b/packages/react-formio-container/src/views/formSettings.view.tsx
index b22ca86..4cff583 100644
--- a/packages/react-formio-container/src/views/formSettings.view.tsx
+++ b/packages/react-formio-container/src/views/formSettings.view.tsx
@@ -1,4 +1,4 @@
-import { FormSettings } from "@tsed/react-formio";
+import { FormSettings } from "@tsed/react-formio/organisms/form/settings/FormSettings";
 
 import { useForm } from "../hooks/useForm.hook";
 
diff --git a/packages/react-formio-container/src/views/forms.view.tsx b/packages/react-formio-container/src/views/forms.view.tsx
index bb0832f..7fc4085 100644
--- a/packages/react-formio-container/src/views/forms.view.tsx
+++ b/packages/react-formio-container/src/views/forms.view.tsx
@@ -1,5 +1,5 @@
-import { FormsTable } from "@tsed/react-formio";
 import { Alert } from "@tsed/react-formio/molecules/alert/Alert";
+import { FormsTable } from "@tsed/react-formio/organisms/table/forms/FormsTable";
 
 import { useForms, UseFormsProps } from "../hooks/useForms.hook";
 
diff --git a/packages/react-formio-container/src/views/submission.view.tsx b/packages/react-formio-container/src/views/submission.view.tsx
index 75427aa..4661596 100644
--- a/packages/react-formio-container/src/views/submission.view.tsx
+++ b/packages/react-formio-container/src/views/submission.view.tsx
@@ -1,6 +1,9 @@
-import { Form, FormType, iconClass, useTooltip } from "@tsed/react-formio";
+import type { FormType } from "@tsed/react-formio";
+import { useTooltip } from "@tsed/react-formio/hooks/useTooltip";
 import { Loader } from "@tsed/react-formio/molecules/loader/Loader";
+import { Form } from "@tsed/react-formio/organisms/form/Form";
 import { RemoveModal } from "@tsed/react-formio/organisms/modal/RemoveModal";
+import { iconClass } from "@tsed/react-formio/utils/iconClass";
 import classnames from "classnames";
 import { useParams } from "react-router";
 
diff --git a/packages/react-formio-container/src/views/submissions.view.tsx b/packages/react-formio-container/src/views/submissions.view.tsx
index 599eafb..df28a2d 100644
--- a/packages/react-formio-container/src/views/submissions.view.tsx
+++ b/packages/react-formio-container/src/views/submissions.view.tsx
@@ -1,4 +1,4 @@
-import { SubmissionsTable } from "@tsed/react-formio";
+import { SubmissionsTable } from "@tsed/react-formio/organisms/table/submissions/SubmissionsTable";
 import { Route, Switch } from "react-router";
 
 import { UseSubmissionProps } from "../hooks/useSubmission.hook";
diff --git a/packages/react-formio/readme.md b/packages/react-formio/readme.md
index 702b406..72b255f 100644
--- a/packages/react-formio/readme.md
+++ b/packages/react-formio/readme.md
@@ -37,24 +37,24 @@ See our [storybook](https://formio.tsed.io/?path=/docs/getting-started--docs) to
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](https://formio.tsed.io/?path=story/reactformio-actionstable--sandbox),
-- [FormAccess](https://formio.tsed.io/?path=story/reactformio-formaccess--sandbox),
-- [FormAction](https://formio.tsed.io/?path=story/reactformio-formaction--sandbox),
-- [Form](https://formio.tsed.io/?path=docs/documentation-form--docs),
-- [FormBuilder](https://formio.tsed.io/?path=docs/documentation-formbuilder--docs),
-- [FormEdit](https://formio.tsed.io/?path=docs/documentation-formedit--docs),
-- [FormsTable](https://formio.tsed.io/?path=docs/documentation-formstable--docs),
-- [InputTags](https://formio.tsed.io/?path=story/reactformio-inputtags--sandbox),
-- [InputText](https://formio.tsed.io/?path=story/reactformio-inputtext--sandbox),
-- [Pagination](https://formio.tsed.io/?path=story/reactformio-pagination--sandbox),
-- [Select](https://formio.tsed.io/?path=/story/reactformio-select--sandbox),
-- [SubmissionsTable](https://formio.tsed.io/?path=/docs/documentation-submissionstable--docs).
-- [Table](https://formio.tsed.io/?path=/story/reactformio-table--sandbox),
+- ActionsTable,
+- FormAccess,
+- FormAction,
+- Form,
+- FormBuilder,
+- FormEdit,
+- FormsTable,
+- InputTags,
+- InputText,
+- Pagination,
+- Select,
+- SubmissionsTable.
+- Table,
 - Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
 - TypeScript support.
 - Tailwind support.
 
-## Migrate from v1
+## Migrate to v2
 
 If you use redux actions from v1, you have to install `@tsed/redux-formio-stores` and remplace your imports:
 
@@ -63,6 +63,19 @@ If you use redux actions from v1, you have to install `@tsed/redux-formio-stores
 + import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";
 ```
 
+## Migrate to v3
+
+- `@tsed/react-formio` is now build only for ESM environment.
+- `@tsed/react-formio` use tree-shaking to reduce the bundle size, you have to import only what you need from the library.
+- `@tsed/react-formio` drop the support of TailwindCSS v2.
+
+Example:
+
+```diff
+- import { Form } from "@tsed/react-formio";
++ import { Form } from "@tsed/react-formio/organisms/form/Form";
+```
+
 ## Install
 
 `@tsed/react-formio` can be used on the server, or bundled for the client using an
diff --git a/packages/react-formio/src/components/index.ts b/packages/react-formio/src/components/index.ts
deleted file mode 100644
index 6104041..0000000
--- a/packages/react-formio/src/components/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export * from "./actions-table/actionsTable.component";
-export * from "./form/form.component";
-export * from "./form/useForm.hook";
-export * from "./form-access/formAccess.component";
-export * from "./form-action/formAction.component";
-export * from "./form-builder/formBuilder.component";
-export * from "./form-edit/formCtas.component";
-export * from "./form-edit/formEdit.component";
-export * from "./form-edit/formParameters.component";
-export * from "./form-edit/useFormEdit.hook";
-export * from "./form-settings/formSettings.component";
-export * from "./forms-table/formsTable.component";
-export * from "./submissions-table/submissionsTable.component";
diff --git a/packages/react-formio/src/index.ts b/packages/react-formio/src/index.ts
index 5e59943..3741b25 100644
--- a/packages/react-formio/src/index.ts
+++ b/packages/react-formio/src/index.ts
@@ -2,6 +2,7 @@ import Webform from "formiojs/Webform";
 import WebformBuilder from "formiojs/WebformBuilder";
 import Wizard from "formiojs/Wizard";
 import WizardBuilder from "formiojs/WizardBuilder";
+
 export {
   Webform,
   WebformBuilder,
@@ -10,10 +11,5 @@ export {
   // editFormUtils,
 };
 
-export * from "./components";
-export * from "./hooks/useTooltip";
 export * from "./interfaces";
-export * from "./utils/iconClass";
-export * from "./utils/mapPagination";
-export * from "./utils/stopPropagationWrapper";
 export { Components, Formio, Templates, Utils } from "formiojs";
diff --git a/packages/react-formio/src/molecules/alert/Alert.spec.tsx b/packages/react-formio/src/molecules/alert/Alert.spec.tsx
index 2f005c6..0011876 100644
--- a/packages/react-formio/src/molecules/alert/Alert.spec.tsx
+++ b/packages/react-formio/src/molecules/alert/Alert.spec.tsx
@@ -7,12 +7,6 @@ const args = {
 };
 
 describe("Alert component", () => {
-  it("should NOT display the alert component when no error is received.", () => {
-    const { container } = render(<Alert {...args} message={null} />);
-
-    expect(container).toBeEmptyDOMElement();
-  });
-
   it("should display an error when the error is in string format", () => {
     const error = "error in string format";
 
diff --git a/packages/react-formio/src/molecules/forms/select/Select.spec.tsx b/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
index 93ddda6..71c5539 100644
--- a/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
+++ b/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
@@ -64,9 +64,6 @@ describe("Select", () => {
         target: { value: "value1" }
       });
 
-      const option = screen.getByRole("option", { name: "test1" }) as HTMLOptionElement;
-
-      expect(option.selected).toBeTruthy();
       expect(onChange).toHaveBeenCalledWith("test-sandbox", "value1");
     });
   });
diff --git a/packages/react-formio/src/molecules/table/Table.stories.tsx b/packages/react-formio/src/molecules/table/Table.stories.tsx
index 350735b..be5aafe 100644
--- a/packages/react-formio/src/molecules/table/Table.stories.tsx
+++ b/packages/react-formio/src/molecules/table/Table.stories.tsx
@@ -7,7 +7,7 @@ import { Table } from "./Table";
 import { mapFormToColumns } from "./utils/mapFormToColumns";
 
 export default {
-  title: "@tsed/react-formio/Table",
+  title: "Table",
   component: Table,
   argTypes: {},
   parameters: {}
diff --git a/packages/react-formio/src/components/__fixtures__/WrapComponent.tsx b/packages/react-formio/src/organisms/__fixtures__/WrapComponent.tsx
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/WrapComponent.tsx
rename to packages/react-formio/src/organisms/__fixtures__/WrapComponent.tsx
diff --git a/packages/react-formio/src/components/__fixtures__/form-actions.json b/packages/react-formio/src/organisms/__fixtures__/form-actions.json
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/form-actions.json
rename to packages/react-formio/src/organisms/__fixtures__/form-actions.json
diff --git a/packages/react-formio/src/components/__fixtures__/form-firstname.fixture.json b/packages/react-formio/src/organisms/__fixtures__/form-firstname.fixture.json
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/form-firstname.fixture.json
rename to packages/react-formio/src/organisms/__fixtures__/form-firstname.fixture.json
diff --git a/packages/react-formio/src/components/__fixtures__/form-schema.json b/packages/react-formio/src/organisms/__fixtures__/form-schema.json
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/form-schema.json
rename to packages/react-formio/src/organisms/__fixtures__/form-schema.json
diff --git a/packages/react-formio/src/components/__fixtures__/form-submissions.json b/packages/react-formio/src/organisms/__fixtures__/form-submissions.json
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/form-submissions.json
rename to packages/react-formio/src/organisms/__fixtures__/form-submissions.json
diff --git a/packages/react-formio/src/components/__fixtures__/form-wizard.fixture.json b/packages/react-formio/src/organisms/__fixtures__/form-wizard.fixture.json
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/form-wizard.fixture.json
rename to packages/react-formio/src/organisms/__fixtures__/form-wizard.fixture.json
diff --git a/packages/react-formio/src/components/__fixtures__/form.fixture.json b/packages/react-formio/src/organisms/__fixtures__/form.fixture.json
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/form.fixture.json
rename to packages/react-formio/src/organisms/__fixtures__/form.fixture.json
diff --git a/packages/react-formio/src/components/__fixtures__/useEditForm.tsx b/packages/react-formio/src/organisms/__fixtures__/useEditForm.tsx
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/useEditForm.tsx
rename to packages/react-formio/src/organisms/__fixtures__/useEditForm.tsx
diff --git a/packages/react-formio/src/components/__fixtures__/utils.ts b/packages/react-formio/src/organisms/__fixtures__/utils.ts
similarity index 100%
rename from packages/react-formio/src/components/__fixtures__/utils.ts
rename to packages/react-formio/src/organisms/__fixtures__/utils.ts
diff --git a/packages/react-formio/src/components/form/form.component.spec.tsx b/packages/react-formio/src/organisms/form/Form.spec.tsx
similarity index 96%
rename from packages/react-formio/src/components/form/form.component.spec.tsx
rename to packages/react-formio/src/organisms/form/Form.spec.tsx
index 0f5cab9..c8d12e3 100644
--- a/packages/react-formio/src/components/form/form.component.spec.tsx
+++ b/packages/react-formio/src/organisms/form/Form.spec.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { Form } from "./form.component";
+import { Form } from "./Form";
 
 async function createFixture(props: any = {}) {
   const onSubmit = vi.fn();
diff --git a/packages/react-formio/src/components/form/form.stories.tsx b/packages/react-formio/src/organisms/form/Form.stories.tsx
similarity index 99%
rename from packages/react-formio/src/components/form/form.stories.tsx
rename to packages/react-formio/src/organisms/form/Form.stories.tsx
index 55b6db7..c6230f3 100644
--- a/packages/react-formio/src/components/form/form.stories.tsx
+++ b/packages/react-formio/src/organisms/form/Form.stories.tsx
@@ -7,7 +7,7 @@ import { InputText } from "../../molecules/forms/input-text/InputText";
 import form from "../__fixtures__/form.fixture.json";
 import formFirstname from "../__fixtures__/form-firstname.fixture.json";
 import { useEditForm } from "../__fixtures__/useEditForm";
-import { Form } from "./form.component";
+import { Form } from "./Form";
 
 async function delay(number: number) {
   return new Promise((resolve) => {
@@ -20,9 +20,13 @@ async function delay(number: number) {
  * form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
  * prop with an url to the form definition, usually a form.io server. The other is to pass the `form` prop with the json
  * definition and optionally a `url` prop with the location of the form.
+ *
+ * ```tsx
+ * import {Form} from "@tsed/react-formio/organisms/form/Form";
+ * ```
  */
 export default {
-  title: "@tsed/react-formio/Form",
+  title: "form/Form",
   component: Form,
   argTypes: {
     form: {
diff --git a/packages/react-formio/src/components/form/form.component.tsx b/packages/react-formio/src/organisms/form/Form.tsx
similarity index 92%
rename from packages/react-formio/src/components/form/form.component.tsx
rename to packages/react-formio/src/organisms/form/Form.tsx
index c207ce3..a2a0a58 100755
--- a/packages/react-formio/src/components/form/form.component.tsx
+++ b/packages/react-formio/src/organisms/form/Form.tsx
@@ -1,5 +1,5 @@
 import { JSON } from "../../interfaces";
-import { useForm, UseFormProps } from "./useForm.hook";
+import { useForm, UseFormProps } from "./useForm";
 
 class CSSProperties {}
 
diff --git a/packages/react-formio/src/components/form-access/formAccess.schema.ts b/packages/react-formio/src/organisms/form/access/FormAccess.schema.ts
similarity index 99%
rename from packages/react-formio/src/components/form-access/formAccess.schema.ts
rename to packages/react-formio/src/organisms/form/access/FormAccess.schema.ts
index ac3e492..e6f2052 100644
--- a/packages/react-formio/src/components/form-access/formAccess.schema.ts
+++ b/packages/react-formio/src/organisms/form/access/FormAccess.schema.ts
@@ -1,4 +1,4 @@
-import type { ComponentType, FormType } from "../../interfaces";
+import type { ComponentType, FormType } from "../../../interfaces";
 
 export function getRoleComponent({ label, key, description, choices, data }: any): ComponentType {
   return {
diff --git a/packages/react-formio/src/components/form-access/formAccess.stories.tsx b/packages/react-formio/src/organisms/form/access/FormAccess.stories.tsx
similarity index 90%
rename from packages/react-formio/src/components/form-access/formAccess.stories.tsx
rename to packages/react-formio/src/organisms/form/access/FormAccess.stories.tsx
index c8403a6..1dd2dbd 100644
--- a/packages/react-formio/src/components/form-access/formAccess.stories.tsx
+++ b/packages/react-formio/src/organisms/form/access/FormAccess.stories.tsx
@@ -1,10 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
-import { FormAccess } from "./formAccess.component";
+import { FormAccess } from "./FormAccess";
 
+/**
+ *
+ * ```tsx
+ * import {FormAccess} from "@tsed/react-formio/organisms/form-access/FormAccess";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/FormAccess",
+  title: "form/access/FormAccess",
   component: FormAccess,
   argTypes: {
     onSubmit: { action: "onSubmit" }
diff --git a/packages/react-formio/src/components/form-access/formAccess.component.tsx b/packages/react-formio/src/organisms/form/access/FormAccess.tsx
similarity index 97%
rename from packages/react-formio/src/components/form-access/formAccess.component.tsx
rename to packages/react-formio/src/organisms/form/access/FormAccess.tsx
index 58b72bf..67612b3 100644
--- a/packages/react-formio/src/components/form-access/formAccess.component.tsx
+++ b/packages/react-formio/src/organisms/form/access/FormAccess.tsx
@@ -1,8 +1,8 @@
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
-import type { FormOptions, FormType, SubmissionType } from "../../interfaces";
-import { Card } from "../../molecules/card/Card";
-import { Form } from "../form/form.component";
+import type { FormOptions, FormType, SubmissionType } from "../../../interfaces";
+import { Card } from "../../../molecules/card/Card";
+import { Form } from "../../form/Form";
 import {
   AccessRolesType,
   dataAccessToSubmissions,
@@ -12,7 +12,7 @@ import {
   SubmissionAccessType,
   submissionsToDataAccess,
   updateSubmissions
-} from "./formAccess.utils";
+} from "./FormAccess.utils";
 
 export interface FormAccessProps {
   form: Partial<FormType>;
diff --git a/packages/react-formio/src/components/form-access/formAccess.utils.spec.ts b/packages/react-formio/src/organisms/form/access/FormAccess.utils.spec.ts
similarity index 98%
rename from packages/react-formio/src/components/form-access/formAccess.utils.spec.ts
rename to packages/react-formio/src/organisms/form/access/FormAccess.utils.spec.ts
index 581e353..9e1e514 100644
--- a/packages/react-formio/src/components/form-access/formAccess.utils.spec.ts
+++ b/packages/react-formio/src/organisms/form/access/FormAccess.utils.spec.ts
@@ -1,11 +1,11 @@
-import { FormType } from "../../interfaces";
+import type { FormType } from "../../../interfaces";
 import {
   dataAccessToSubmissions,
   getFormAccess,
   SubmissionAccessType,
   submissionsToDataAccess,
   updateSubmissions
-} from "./formAccess.utils";
+} from "./FormAccess.utils";
 
 const roles: any[] = [
   {
diff --git a/packages/react-formio/src/components/form-access/formAccess.utils.ts b/packages/react-formio/src/organisms/form/access/FormAccess.utils.ts
similarity index 95%
rename from packages/react-formio/src/components/form-access/formAccess.utils.ts
rename to packages/react-formio/src/organisms/form/access/FormAccess.utils.ts
index b57201a..1eb3f74 100644
--- a/packages/react-formio/src/components/form-access/formAccess.utils.ts
+++ b/packages/react-formio/src/organisms/form/access/FormAccess.utils.ts
@@ -2,9 +2,8 @@ import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
 
-import { ComponentType, FormType, SubmissionType } from "../../interfaces";
-import { RoleType } from "../../interfaces/RoleType";
-import { getAccessPermissionForm, getSubmissionPermissionForm } from "./formAccess.schema";
+import type { ComponentType, FormType, RoleType, SubmissionType } from "../../../interfaces";
+import { getAccessPermissionForm, getSubmissionPermissionForm } from "./FormAccess.schema";
 
 export interface Choice {
   label: string;
diff --git a/packages/react-formio/src/components/form-action/formAction.stories.tsx b/packages/react-formio/src/organisms/form/action/FormAction.stories.tsx
similarity index 98%
rename from packages/react-formio/src/components/form-action/formAction.stories.tsx
rename to packages/react-formio/src/organisms/form/action/FormAction.stories.tsx
index 65fe119..094a834 100644
--- a/packages/react-formio/src/components/form-action/formAction.stories.tsx
+++ b/packages/react-formio/src/organisms/form/action/FormAction.stories.tsx
@@ -1,7 +1,13 @@
-import { FormAction } from "./formAction.component";
+import { FormAction } from "./FormAction";
 
+/**
+ *
+ * ```tsx
+ * import {FormAction} from "@tsed/react-formio/organisms/form/action/FormAction";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/FormAction",
+  title: "form/action/FormAction",
   component: FormAction,
   argTypes: {
     onSubmit: { action: "onSubmit" },
diff --git a/packages/react-formio/src/components/form-action/formAction.component.tsx b/packages/react-formio/src/organisms/form/action/FormAction.tsx
similarity index 95%
rename from packages/react-formio/src/components/form-action/formAction.component.tsx
rename to packages/react-formio/src/organisms/form/action/FormAction.tsx
index a790bc6..4a3ab5c 100644
--- a/packages/react-formio/src/components/form-action/formAction.component.tsx
+++ b/packages/react-formio/src/organisms/form/action/FormAction.tsx
@@ -1,8 +1,8 @@
 import FormioUtils from "formiojs/utils";
 import { PropsWithChildren, ReactElement } from "react";
 
-import { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from "../../interfaces";
-import { Form } from "../form/form.component";
+import { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from "../../../interfaces";
+import { Form } from "../../form/Form";
 
 function mapData(options: any, defaults: ActionDefaultsType): any {
   return {
diff --git a/packages/react-formio/src/components/form-builder/formBuilder.stories.tsx b/packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx
similarity index 91%
rename from packages/react-formio/src/components/form-builder/formBuilder.stories.tsx
rename to packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx
index 7ad4e7c..4dce634 100644
--- a/packages/react-formio/src/components/form-builder/formBuilder.stories.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import form from "../__fixtures__/form.fixture.json";
-import formWizard from "../__fixtures__/form-wizard.fixture.json";
-import { FormBuilder } from "./formBuilder.component";
+import form from "../../__fixtures__/form.fixture.json";
+import formWizard from "../../__fixtures__/form-wizard.fixture.json";
+import { FormBuilder } from "./FormBuilder";
 
 /**
  * The [FormBuilder](/story/reactformio-formbuilder--sandbox) class can be used to embed a form builder directly in your React application.
@@ -11,9 +11,14 @@ import { FormBuilder } from "./formBuilder.component";
  *
  * Please note that the [FormBuilder](/story/reactformio-formbuilder--sandbox) component does not load and save from/to an url.
  * You must handle the form definition loading and saving yourself or use the [FormEdit](/docs/documentation-formedit--docs) component.
+ *
+ * ```tsx
+ * import {FormBuilder} from "@tsed/react-formio/organisms/form/builder/FormBuilder";
+ * ```
+ *
  */
 export default {
-  title: "@tsed/react-formio/FormBuilder",
+  title: "form/builder/FormBuilder",
   component: FormBuilder,
   argTypes: {
     display: {
diff --git a/packages/react-formio/src/components/form-builder/formBuilder.component.tsx b/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
similarity index 98%
rename from packages/react-formio/src/components/form-builder/formBuilder.component.tsx
rename to packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
index 48a4733..6ae7a37 100755
--- a/packages/react-formio/src/components/form-builder/formBuilder.component.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties } from "react";
 
-import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder.hook";
+import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder";
 
 export function FormBuilder({
   className = "",
diff --git a/packages/react-formio/src/components/form-edit/formEdit.reducer.ts b/packages/react-formio/src/organisms/form/builder/FormEdit.reducer.ts
similarity index 97%
rename from packages/react-formio/src/components/form-edit/formEdit.reducer.ts
rename to packages/react-formio/src/organisms/form/builder/FormEdit.reducer.ts
index a04a93f..fd4bf44 100644
--- a/packages/react-formio/src/components/form-edit/formEdit.reducer.ts
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.reducer.ts
@@ -2,7 +2,7 @@ import camelCase from "lodash/camelCase";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 
-import { FormType } from "../../interfaces";
+import type { FormType } from "../../../interfaces";
 
 export const hasChanged = (form: Partial<FormType>, value: Partial<FormType>): boolean => !isEqual(form, value);
 
diff --git a/packages/react-formio/src/components/form-edit/formEdit.stories.tsx b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
similarity index 97%
rename from packages/react-formio/src/components/form-edit/formEdit.stories.tsx
rename to packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
index c6ecd81..22a6be8 100644
--- a/packages/react-formio/src/components/form-edit/formEdit.stories.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
@@ -1,10 +1,16 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { FormEdit } from "./formEdit.component";
-import { defaultDisplayChoices } from "./formParameters.component";
+import { FormEdit } from "./FormEdit";
+import { defaultDisplayChoices } from "./FormParameters";
 
+/**
+ *
+ * ```tsx
+ * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/FormEdit";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/FormEdit",
+  title: "form/builder/FormEdit",
   component: FormEdit,
   argTypes: {
     form: {
diff --git a/packages/react-formio/src/components/form-edit/formEdit.component.tsx b/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
similarity index 83%
rename from packages/react-formio/src/components/form-edit/formEdit.component.tsx
rename to packages/react-formio/src/organisms/form/builder/FormEdit.tsx
index 725d6a2..c9fba41 100644
--- a/packages/react-formio/src/components/form-edit/formEdit.component.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
@@ -1,9 +1,9 @@
-import { FormOptions } from "../../interfaces/FormOptions";
-import { FormBuilder } from "../form-builder/formBuilder.component";
-import { FormBuilderEvents } from "../form-builder/useFormBuilder.hook";
-import { FormEditCTAs } from "./formCtas.component";
-import { FormParameters } from "./formParameters.component";
-import { useFormEdit, UseFormEditHookProps } from "./useFormEdit.hook";
+import type { FormOptions } from "../../../interfaces";
+import { FormBuilder } from "./FormBuilder";
+import { FormEditCTAs } from "./FormEditCtas";
+import { FormParameters } from "./FormParameters";
+import { FormBuilderEvents } from "./useFormBuilder";
+import { useFormEdit, UseFormEditHookProps } from "./useFormEdit";
 
 export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
   options?: FormOptions;
diff --git a/packages/react-formio/src/components/form-edit/formCtas.component.tsx b/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
similarity index 93%
rename from packages/react-formio/src/components/form-edit/formCtas.component.tsx
rename to packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
index 7c220ff..3a74ed3 100644
--- a/packages/react-formio/src/components/form-edit/formCtas.component.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
 
-import { useTooltip } from "../../hooks/useTooltip";
-import { FormOptions } from "../../interfaces";
-import { iconClass } from "../../utils/iconClass";
+import { useTooltip } from "../../../hooks/useTooltip";
+import type { FormOptions } from "../../../interfaces";
+import { iconClass } from "../../../utils/iconClass";
 
 export interface FormEditCTAsProps extends Record<string, unknown> {
   saveText?: string;
diff --git a/packages/react-formio/src/components/form-edit/formParameters.component.tsx b/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
similarity index 90%
rename from packages/react-formio/src/components/form-edit/formParameters.component.tsx
rename to packages/react-formio/src/organisms/form/builder/FormParameters.tsx
index 1af52e5..f8a9aa4 100644
--- a/packages/react-formio/src/components/form-edit/formParameters.component.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
@@ -1,9 +1,9 @@
 import { ReactElement } from "react";
 
-import { FormType } from "../../interfaces/FormType";
-import { InputTags } from "../../molecules/forms/input-tags/InputTags";
-import { InputText } from "../../molecules/forms/input-text/InputText";
-import { Select } from "../../molecules/forms/select/Select";
+import type { FormType } from "../../../interfaces";
+import { InputTags } from "../../../molecules/forms/input-tags/InputTags";
+import { InputText } from "../../../molecules/forms/input-text/InputText";
+import { Select } from "../../../molecules/forms/select/Select";
 
 export const defaultDisplayChoices = [
   { label: "Form", value: "form" },
diff --git a/packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts b/packages/react-formio/src/organisms/form/builder/useFormBuilder.ts
similarity index 99%
rename from packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts
rename to packages/react-formio/src/organisms/form/builder/useFormBuilder.ts
index 2b03f98..9cbc062 100644
--- a/packages/react-formio/src/components/form-builder/useFormBuilder.hook.ts
+++ b/packages/react-formio/src/organisms/form/builder/useFormBuilder.ts
@@ -2,7 +2,7 @@ import { FormBuilder as FormioFormBuilder } from "formiojs";
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect, useRef, useState } from "react";
 
-import type { ComponentType, FormOptions, FormType } from "../../interfaces";
+import type { ComponentType, FormOptions, FormType } from "../../../interfaces";
 
 interface BuilderConstructor {
   new (element: HTMLDivElement, form: FormType, options: FormOptions): FormioFormBuilder;
diff --git a/packages/react-formio/src/components/form-edit/useFormEdit.hook.ts b/packages/react-formio/src/organisms/form/builder/useFormEdit.ts
similarity index 94%
rename from packages/react-formio/src/components/form-edit/useFormEdit.hook.ts
rename to packages/react-formio/src/organisms/form/builder/useFormEdit.ts
index 016e90a..718ed1d 100644
--- a/packages/react-formio/src/components/form-edit/useFormEdit.hook.ts
+++ b/packages/react-formio/src/organisms/form/builder/useFormEdit.ts
@@ -1,8 +1,8 @@
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect, useReducer } from "react";
 
-import type { FormType } from "../../interfaces";
-import { createInitialState, hasChanged, reducer } from "./formEdit.reducer";
+import type { FormType } from "../../../interfaces";
+import { createInitialState, hasChanged, reducer } from "./FormEdit.reducer";
 
 export interface UseFormEditHookProps extends Record<string, unknown> {
   form?: Partial<FormType>;
diff --git a/packages/react-formio/src/components/form-settings/formSettings.component.spec.tsx b/packages/react-formio/src/organisms/form/settings/FormSettings.component.spec.tsx
similarity index 93%
rename from packages/react-formio/src/components/form-settings/formSettings.component.spec.tsx
rename to packages/react-formio/src/organisms/form/settings/FormSettings.component.spec.tsx
index 4a862e4..3423f57 100644
--- a/packages/react-formio/src/components/form-settings/formSettings.component.spec.tsx
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.component.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { FormSettings } from "./formSettings.component";
-import { Sandbox } from "./formSettings.stories";
+import { FormSettings } from "./FormSettings";
+import { Sandbox } from "./FormSettings.stories";
 
 describe("FormSettings", () => {
   it("should render form settings", () => {
diff --git a/packages/react-formio/src/components/form-settings/formSettings.schema.ts b/packages/react-formio/src/organisms/form/settings/FormSettings.schema.ts
similarity index 96%
rename from packages/react-formio/src/components/form-settings/formSettings.schema.ts
rename to packages/react-formio/src/organisms/form/settings/FormSettings.schema.ts
index a32c37c..9c0dac6 100644
--- a/packages/react-formio/src/components/form-settings/formSettings.schema.ts
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.schema.ts
@@ -1,4 +1,4 @@
-import { FormType } from "../../interfaces";
+import type { FormType } from "../../../interfaces";
 
 export function getFormSettingsSchema(): FormType {
   return {
diff --git a/packages/react-formio/src/components/form-settings/formSettings.stories.tsx b/packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx
similarity index 83%
rename from packages/react-formio/src/components/form-settings/formSettings.stories.tsx
rename to packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx
index 8c1702d..35eb186 100644
--- a/packages/react-formio/src/components/form-settings/formSettings.stories.tsx
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx
@@ -1,7 +1,13 @@
-import { FormSettings } from "./formSettings.component";
+import { FormSettings } from "./FormSettings";
 
+/**
+ *
+ * ```tsx
+ * import {FormSettings} from "@tsed/react-formio/organisms/form/settings/FormSettings";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/FormSettings",
+  title: "form/settings/FormSettings",
   component: FormSettings,
   argTypes: {
     onSubmit: { action: "onSubmit" },
diff --git a/packages/react-formio/src/components/form-settings/formSettings.component.tsx b/packages/react-formio/src/organisms/form/settings/FormSettings.tsx
similarity index 91%
rename from packages/react-formio/src/components/form-settings/formSettings.component.tsx
rename to packages/react-formio/src/organisms/form/settings/FormSettings.tsx
index 487ab41..1df4b02 100644
--- a/packages/react-formio/src/components/form-settings/formSettings.component.tsx
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.tsx
@@ -2,10 +2,10 @@ import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
 import { useEffect, useState } from "react";
 
-import type { ChangedSubmission, FormOptions, FormType } from "../../interfaces";
-import { Form } from "../form/form.component";
-import { getFormSettingsSchema } from "./formSettings.schema";
-import { formSettingsToSubmission, FormSettingsType, submissionToFormSettings } from "./formSettings.utils";
+import type { ChangedSubmission, FormOptions, FormType } from "../../../interfaces";
+import { Form } from "../../form/Form";
+import { getFormSettingsSchema } from "./FormSettings.schema";
+import { formSettingsToSubmission, FormSettingsType, submissionToFormSettings } from "./FormSettings.utils";
 
 export interface FormSettingsProps {
   form: Partial<FormType>;
diff --git a/packages/react-formio/src/components/form-settings/formSettings.utils.spec.ts b/packages/react-formio/src/organisms/form/settings/FormSettings.utils.spec.ts
similarity index 97%
rename from packages/react-formio/src/components/form-settings/formSettings.utils.spec.ts
rename to packages/react-formio/src/organisms/form/settings/FormSettings.utils.spec.ts
index 059dbbb..4fadffb 100644
--- a/packages/react-formio/src/components/form-settings/formSettings.utils.spec.ts
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.utils.spec.ts
@@ -1,4 +1,4 @@
-import { formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
+import { formSettingsToSubmission, submissionToFormSettings } from "./FormSettings.utils";
 
 describe("FormSettings utils", () => {
   describe("submissionToDataSettings()", () => {
diff --git a/packages/react-formio/src/components/form-settings/formSettings.utils.ts b/packages/react-formio/src/organisms/form/settings/FormSettings.utils.ts
similarity index 91%
rename from packages/react-formio/src/components/form-settings/formSettings.utils.ts
rename to packages/react-formio/src/organisms/form/settings/FormSettings.utils.ts
index 8174610..e719da3 100644
--- a/packages/react-formio/src/components/form-settings/formSettings.utils.ts
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.utils.ts
@@ -1,6 +1,6 @@
 import cloneDeep from "lodash/cloneDeep";
 
-import { FormType, SubmissionType } from "../../interfaces";
+import { FormType, SubmissionType } from "../../../interfaces";
 
 export type FormSettingsType = {
   action: string;
diff --git a/packages/react-formio/src/components/form/types.ts b/packages/react-formio/src/organisms/form/types.ts
similarity index 100%
rename from packages/react-formio/src/components/form/types.ts
rename to packages/react-formio/src/organisms/form/types.ts
diff --git a/packages/react-formio/src/components/form/useForm.hook.ts b/packages/react-formio/src/organisms/form/useForm.ts
similarity index 100%
rename from packages/react-formio/src/components/form/useForm.hook.ts
rename to packages/react-formio/src/organisms/form/useForm.ts
diff --git a/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx b/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
index 9806301..e260586 100644
--- a/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
+++ b/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
@@ -11,7 +11,7 @@ import { RemoveModal, RemoveModalProps } from "./RemoveModal";
  * ```
  */
 export default {
-  title: "RemoveModal",
+  title: "model/RemoveModal",
   component: RemoveModal,
   argTypes: {
     onSubmit: {
diff --git a/packages/react-formio/src/components/actions-table/actionsTable.component.spec.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
similarity index 94%
rename from packages/react-formio/src/components/actions-table/actionsTable.component.spec.tsx
rename to packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
index 4546c85..4d35e88 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.component.spec.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
@@ -1,9 +1,9 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import availableActions from "../__fixtures__/form-actions.json";
+import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
-import { ActionsTable } from "./actionsTable.component";
+import { ActionsTable } from "./ActionsTable";
 
 const args: any = {
   data: data,
diff --git a/packages/react-formio/src/components/actions-table/actionsTable.stories.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
similarity index 90%
rename from packages/react-formio/src/components/actions-table/actionsTable.stories.tsx
rename to packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
index cc54429..3a458f3 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
@@ -1,12 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
-import availableActions from "../__fixtures__/form-actions.json";
+import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
-import { ActionsTable } from "./actionsTable.component";
+import { ActionsTable } from "./ActionsTable";
 
+/**
+ * ```tsx
+ * import {ActionsTable} from "@tsed/react-formio/organisms/table/actions/ActionsTable";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/ActionsTable",
+  title: "table/actions/ActionsTable",
   component: ActionsTable,
   argTypes: {
     data: {
diff --git a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
similarity index 87%
rename from packages/react-formio/src/components/actions-table/actionsTable.component.tsx
rename to packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
index 8df3646..57ffb03 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
@@ -2,10 +2,10 @@ import classnames from "classnames";
 import noop from "lodash/noop";
 import { useState } from "react";
 
-import { ActionType } from "../../interfaces";
-import { Select } from "../../molecules/forms/select/Select";
-import { Table, type TableProps } from "../../molecules/table";
-import { iconClass } from "../../utils/iconClass";
+import { ActionType } from "../../../interfaces";
+import { Select } from "../../../molecules/forms/select/Select";
+import { Table, type TableProps } from "../../../molecules/table";
+import { iconClass } from "../../../utils/iconClass";
 
 export type ActionsTableProps = Omit<TableProps<ActionType>, "columns"> & {
   onAddAction?: (actionName: string) => void;
diff --git a/packages/react-formio/src/components/actions-table/__fixtures__/data.json b/packages/react-formio/src/organisms/table/actions/__fixtures__/data.json
similarity index 100%
rename from packages/react-formio/src/components/actions-table/__fixtures__/data.json
rename to packages/react-formio/src/organisms/table/actions/__fixtures__/data.json
diff --git a/packages/react-formio/src/components/forms-table/formsTable.stories.tsx b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
similarity index 95%
rename from packages/react-formio/src/components/forms-table/formsTable.stories.tsx
rename to packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
index 740b9ad..56af3a1 100644
--- a/packages/react-formio/src/components/forms-table/formsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
@@ -1,9 +1,15 @@
 import tailwind from "@tsed/tailwind-formio";
 
-import { FormsTable } from "./formsTable.component";
+import { FormsTable } from "./FormsTable";
 
+/**
+ *
+ * ```tsx
+ * import {FormsTable} from "@tsed/react-formio/organisms/table/forms/FormsTable";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/FormsTable",
+  title: "table/forms/FormsTable",
   component: FormsTable,
   argTypes: {
     icon: {
diff --git a/packages/react-formio/src/components/forms-table/formsTable.component.tsx b/packages/react-formio/src/organisms/table/forms/FormsTable.tsx
similarity index 86%
rename from packages/react-formio/src/components/forms-table/formsTable.component.tsx
rename to packages/react-formio/src/organisms/table/forms/FormsTable.tsx
index 33cab21..ba182c7 100644
--- a/packages/react-formio/src/components/forms-table/formsTable.component.tsx
+++ b/packages/react-formio/src/organisms/table/forms/FormsTable.tsx
@@ -1,6 +1,6 @@
-import { FormType } from "../../interfaces";
-import { DefaultColumnFilter, SelectColumnFilter, Table, TableProps } from "../../molecules/table";
-import { FormsCell as DefaultFormCell } from "./components/formCell.component";
+import type { FormType } from "../../../interfaces";
+import { DefaultColumnFilter, SelectColumnFilter, Table, TableProps } from "../../../molecules/table";
+import { FormsCell as DefaultFormCell } from "./components/FormCell";
 
 export type FormsTableProps = Omit<TableProps<FormType>, "columns"> & {
   icon?: string;
diff --git a/packages/react-formio/src/components/forms-table/components/formCell.component.tsx b/packages/react-formio/src/organisms/table/forms/components/FormCell.tsx
similarity index 87%
rename from packages/react-formio/src/components/forms-table/components/formCell.component.tsx
rename to packages/react-formio/src/organisms/table/forms/components/FormCell.tsx
index 65a6034..808cebc 100644
--- a/packages/react-formio/src/components/forms-table/components/formCell.component.tsx
+++ b/packages/react-formio/src/organisms/table/forms/components/FormCell.tsx
@@ -2,9 +2,9 @@ import classnames from "classnames";
 import moment from "moment";
 import { CellProps } from "react-table";
 
-import { FormType } from "../../../interfaces";
-import { iconClass } from "../../../utils/iconClass";
-import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
+import type { FormType } from "../../../../interfaces";
+import { iconClass } from "../../../../utils/iconClass";
+import { stopPropagationWrapper } from "../../../../utils/stopPropagationWrapper";
 
 export function FormsCell(props: CellProps<FormType> & { icon: string; i18n: (f: string) => string }) {
   const {
diff --git a/packages/react-formio/src/components/submissions-table/submissionsTable.stories.tsx b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
similarity index 79%
rename from packages/react-formio/src/components/submissions-table/submissionsTable.stories.tsx
rename to packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
index 9254c24..012a5c7 100644
--- a/packages/react-formio/src/components/submissions-table/submissionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
@@ -1,12 +1,17 @@
 import { useState } from "react";
 
-import { mapPagination } from "../../utils/mapPagination";
-import FormType from "../__fixtures__/form-schema.json";
-import formSubmissions from "../__fixtures__/form-submissions.json";
-import { SubmissionsTable } from "./submissionsTable.component";
+import { mapPagination } from "../../../utils/mapPagination";
+import FormType from "../../__fixtures__/form-schema.json";
+import formSubmissions from "../../__fixtures__/form-submissions.json";
+import { SubmissionsTable } from "./SubmissionsTable";
 
+/**
+ * ```tsx
+ * import {SubmissionsTable} from "@tsed/react-formio/organisms/table/submissions/SubmissionsTable";
+ * ```
+ */
 export default {
-  title: "@tsed/react-formio/SubmissionsTable",
+  title: "table/submissions/SubmissionsTable",
   component: SubmissionsTable,
   argTypes: {
     form: {
diff --git a/packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.tsx
similarity index 80%
rename from packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx
rename to packages/react-formio/src/organisms/table/submissions/SubmissionsTable.tsx
index d2dbcf7..45bf3d1 100644
--- a/packages/react-formio/src/components/submissions-table/submissionsTable.component.tsx
+++ b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.tsx
@@ -1,5 +1,5 @@
-import { FormType, SubmissionType } from "../../interfaces";
-import { mapFormToColumns, Table, type TableProps } from "../../molecules/table";
+import type { FormType, SubmissionType } from "../../../interfaces";
+import { mapFormToColumns, Table, type TableProps } from "../../../molecules/table";
 
 export type SubmissionsTableProps = Omit<TableProps<SubmissionType>, "columns"> & {
   form?: FormType;
diff --git a/packages/redux-utils/package.json b/packages/redux-utils/package.json
index 08532d8..d4cccb4 100644
--- a/packages/redux-utils/package.json
+++ b/packages/redux-utils/package.json
@@ -27,6 +27,5 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "redux": "^4.0.5"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/packages/tailwind-formio/package.json b/packages/tailwind-formio/package.json
index e507c33..dab95c2 100644
--- a/packages/tailwind-formio/package.json
+++ b/packages/tailwind-formio/package.json
@@ -49,7 +49,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "dependencies": {},
-  "peerDependencies": {}
+  }
 }
diff --git a/packages/tailwind-formio/src/stories/tailwind.mdx b/packages/tailwind-formio/src/stories/tailwind.mdx
index 67968c1..ad512c2 100644
--- a/packages/tailwind-formio/src/stories/tailwind.mdx
+++ b/packages/tailwind-formio/src/stories/tailwind.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Documentation/Tailwind"/>
+<Meta title="Tailwind"/>
 
 <style>{`
 .sbdocs-wrapper {
diff --git a/packages/tailwind-formio/src/templates/stories/builder.stories.jsx b/packages/tailwind-formio/src/templates/stories/builder.stories.jsx
deleted file mode 100644
index 5cde4f5..0000000
--- a/packages/tailwind-formio/src/templates/stories/builder.stories.jsx
+++ /dev/null
@@ -1,1917 +0,0 @@
-import FormioFormBuilder from "formiojs/FormBuilder.js";
-import React, { useEffect, useRef } from "react";
-
-function WrapperFormBuilder({ options, form }) {
-  const ref = useRef();
-
-  const initializeBuilder = (form, options) => {
-    options = Object.assign({}, options);
-    form = Object.assign({}, form);
-
-    const builder = new FormioFormBuilder(ref.current, form, options);
-    builder.ready.then(() => {
-      // onChange();
-      // builderEvents.forEach(({name, action}) => builder.instance.on(name, action));
-    });
-
-    return builder;
-  };
-
-  useEffect(() => {
-    const builder = initializeBuilder(form, options);
-    return () => builder.instance.destroy(true);
-  }, [form, options]);
-
-  return (
-    <div>
-      <div ref={ref} />
-    </div>
-  );
-}
-
-export default {
-  title: "Formiojs/FormBuilder",
-  component: WrapperFormBuilder,
-  argTypes: {
-    display: {
-      control: {
-        type: "select",
-        options: ["form", "wizard"]
-      }
-    },
-    template: {
-      control: {
-        type: "select",
-        options: ["tailwind", "bootstrap", "semantic"]
-      }
-    },
-    iconset: {
-      control: {
-        type: "select",
-        options: ["bx", "fa"]
-      }
-    },
-    form: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
-    }
-  }
-};
-
-export const Sandbox = (args) => {
-  return <WrapperFormBuilder form={{ ...args.form, display: args.display }} options={{ template: args.template, iconset: args.iconset }} />;
-};
-
-Sandbox.args = {
-  form: {
-    _id: "6023f8fe4b1a2ab9a3aae096",
-    type: "form",
-    tags: [],
-    owner: "5d0797a382461b6656d2c790",
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      },
-      {
-        label: "Text Area",
-        labelPosition: "top",
-        placeholder: "Placeholder",
-        description: "description",
-        tooltip: "tooltip",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        editor: "",
-        autoExpand: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "html",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          minWords: "",
-          maxWords: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textArea",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        fixedSize: true,
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        attributes: {},
-        type: "textarea",
-        rows: 3,
-        wysiwyg: false,
-        input: true,
-        refreshOn: "",
-        allowMultipleMasks: false,
-        mask: false,
-        inputType: "text",
-        inputMask: "",
-        id: "e4jsrqc",
-        defaultValue: ""
-      },
-      {
-        label: "Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        delimiter: false,
-        requireDecimal: false,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          min: "",
-          max: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          step: "any",
-          integer: ""
-        },
-        errorLabel: "",
-        key: "number",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "number",
-        input: true,
-        unique: false,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ex8zh8u",
-        defaultValue: null
-      },
-      {
-        label: "Password",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        case: "",
-        redrawOn: "",
-        clearOnHide: true,
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "password",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "password",
-        input: true,
-        multiple: false,
-        defaultValue: null,
-        protected: true,
-        unique: false,
-        persistent: true,
-        refreshOn: "",
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        encrypted: false,
-        allowMultipleMasks: false,
-        inputType: "text",
-        inputFormat: "plain",
-        inputMask: "",
-        id: "etqa5pm"
-      },
-      {
-        label: "Checkbox",
-        description: "description",
-        tooltip: "tooltip",
-        shortcut: "",
-        inputType: "checkbox",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        defaultValue: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "checkbox",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "checkbox",
-        name: "",
-        value: "",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        labelPosition: "right",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        dataGridLabel: true,
-        id: "em8ln2m"
-      },
-      {
-        label: "Select Boxes",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "label", value: "label", shortcut: "" },
-          {
-            label: "lol",
-            value: "lol",
-            shortcut: ""
-          }
-        ],
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        minSelectedCountMessage: "",
-        maxSelectedCountMessage: "",
-        key: "selectBoxes",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "selectboxes",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "checkbox",
-        fieldSet: false,
-        id: "esa4upt",
-        defaultValue: { "": false }
-      },
-      {
-        label: "Radio",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "data", value: "data", shortcut: "" },
-          {
-            label: "label",
-            value: "label",
-            shortcut: ""
-          }
-        ],
-        dataType: "",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "radio",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "radio",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "radio",
-        fieldSet: false,
-        id: "edh7o6o",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "choicesjs",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [
-            { label: "label", value: "label" },
-            { label: "save", value: "save" }
-          ],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "ebqtqd6",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "html5",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [{ label: "", value: "" }],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select1",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "em8m4qk",
-        defaultValue: ""
-      },
-      {
-        label: "Email",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        kickbox: { enabled: false },
-        errorLabel: "",
-        key: "email",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "email",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "email",
-        inputMask: "",
-        id: "epj8sj28",
-        defaultValue: null
-      },
-      {
-        label: "Url",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "url",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "url",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "url",
-        inputMask: "",
-        id: "exw9p4",
-        defaultValue: null
-      },
-      {
-        label: "Phone Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "(999) 999-9999",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          minLength: "",
-          maxLength: "",
-          pattern: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "phoneNumber",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "phoneNumber",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        inputType: "tel",
-        id: "e2c7lpl",
-        defaultValue: null
-      },
-      {
-        label: "Tags",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        delimeter: ",",
-        maxTags: 0,
-        storeas: "string",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "tags",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "tags",
-        input: true,
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        widget: { type: "input" },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ejc82t",
-        defaultValue: null
-      },
-      {
-        label: "Address",
-        labelPosition: "top",
-        enableManualMode: false,
-        disableClearIcon: false,
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        provider: "google",
-        manualModeViewString: "",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "address",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "address",
-        switchToManualModeLabel: "Can't find address? Switch to manual mode.",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        tree: true,
-        components: [
-          {
-            label: "Address 1",
-            tableView: false,
-            key: "address1",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eecfg6h"
-          },
-          {
-            label: "Address 2",
-            tableView: false,
-            key: "address2",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eajhpuu"
-          },
-          {
-            label: "City",
-            tableView: false,
-            key: "city",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "efpnrca7"
-          },
-          {
-            label: "State",
-            tableView: false,
-            key: "state",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eu3kksv"
-          },
-          {
-            label: "Country",
-            tableView: false,
-            key: "country",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "el39cu9"
-          },
-          {
-            label: "Zip Code",
-            tableView: false,
-            key: "zip",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "epyac4"
-          }
-        ],
-        providerOptions: { params: { key: "fze", region: "" } },
-        id: "er02e2gb",
-        defaultValue: {}
-      },
-      {
-        label: "Date / Time",
-        labelPosition: "top",
-        displayInTimezone: "viewer",
-        useLocaleSettings: false,
-        allowInput: true,
-        format: "yyyy-MM-dd hh:mm a",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        enableDate: true,
-        enableMinDateInput: false,
-        datePicker: {
-          minDate: null,
-          maxDate: null,
-          disable: "",
-          disableFunction: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          showWeeks: true,
-          startingDay: 0,
-          initDate: "",
-          minMode: "day",
-          maxMode: "year",
-          yearRows: 4,
-          yearColumns: 5
-        },
-        enableMaxDateInput: false,
-        enableTime: true,
-        timePicker: {
-          showMeridian: true,
-          hourStep: 1,
-          minuteStep: 1,
-          readonlyInput: false,
-          mousewheel: true,
-          arrowkeys: true
-        },
-        multiple: false,
-        defaultValue: "",
-        defaultDate: "",
-        customOptions: {},
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "dateTime",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "datetime",
-        timezone: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: {
-          type: "calendar",
-          displayInTimezone: "viewer",
-          locale: "en",
-          useLocaleSettings: false,
-          allowInput: true,
-          mode: "single",
-          enableTime: true,
-          noCalendar: false,
-          format: "yyyy-MM-dd hh:mm a",
-          hourIncrement: 1,
-          minuteIncrement: 1,
-          minDate: null,
-          disabledDates: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          disableFunction: "",
-          maxDate: null
-        },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        datepickerMode: "day",
-        id: "el9idgl"
-      },
-      {
-        label: "Day",
-        hideInputLabels: false,
-        inputsLabelPosition: "top",
-        description: "",
-        useLocaleSettings: false,
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        fields: {
-          day: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          month: {
-            type: "select",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          year: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          }
-        },
-        dayFirst: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        maxDate: "",
-        minDate: "",
-        unique: false,
-        errorLabel: "",
-        validate: {
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          required: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        key: "day",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "day",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        labelPosition: "top",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ecgefls",
-        defaultValue: "00/00/0000"
-      },
-      {
-        label: "Currency",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        currency: "USD",
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          min: "",
-          max: "",
-          step: "any",
-          integer: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "currency",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "currency",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        delimiter: true,
-        id: "em22wkd",
-        defaultValue: null
-      },
-      {
-        type: "button",
-        label: "Submit",
-        key: "submit",
-        size: "md",
-        block: false,
-        action: "submit",
-        disableOnInvalid: true,
-        theme: "primary",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        customClass: "",
-        suffix: "",
-        multiple: false,
-        defaultValue: null,
-        protected: false,
-        unique: false,
-        persistent: false,
-        hidden: false,
-        clearOnHide: true,
-        refreshOn: "",
-        redrawOn: "",
-        tableView: false,
-        modalEdit: false,
-        labelPosition: "top",
-        description: "",
-        errorLabel: "",
-        tooltip: "",
-        hideLabel: false,
-        tabindex: "",
-        disabled: false,
-        autofocus: false,
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        widget: { type: "input" },
-        attributes: {},
-        validateOn: "change",
-        validate: {
-          required: false,
-          custom: "",
-          customPrivate: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        conditional: { show: null, when: null, eq: "" },
-        overlay: { style: "", left: "", top: "", width: "", height: "" },
-        allowCalculateOverride: false,
-        encrypted: false,
-        showCharCount: false,
-        showWordCount: false,
-        properties: {},
-        allowMultipleMasks: false,
-        leftIcon: "",
-        rightIcon: "",
-        dataGridLabel: true,
-        id: "e08gq3l"
-      }
-    ],
-    revisions: "",
-    _vid: 0,
-    title: "text-field",
-    display: "form",
-    access: [
-      {
-        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
-        type: "read_all"
-      }
-    ],
-    submissionAccess: [],
-    controller: "",
-    properties: {},
-    settings: {},
-    name: "textField",
-    path: "textfield",
-    project: "5d0797bc872fc7d140559857",
-    created: "2021-02-10T15:17:18.028Z",
-    modified: "2021-02-10T21:38:52.325Z",
-    machineName: "tcspjwhsevrzpcd:textField"
-  },
-  display: "form",
-  template: "tailwind",
-  iconset: "bx"
-};
diff --git a/packages/tailwind-formio/src/templates/stories/form-integration.stories.jsx b/packages/tailwind-formio/src/templates/stories/form-integration.stories.jsx
deleted file mode 100644
index a7d0fce..0000000
--- a/packages/tailwind-formio/src/templates/stories/form-integration.stories.jsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import { expect, userEvent, waitFor, within } from "@storybook/test";
-import React from "react";
-
-import formFirstname from "./__fixtures__/form-firstname.fixture.json";
-import { useEditForm } from "./__fixtures__/useEditForm.jsx";
-import { WrapperForm } from "./__fixtures__/WrapperForm.jsx";
-
-async function delay(number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, number);
-  });
-}
-
-function EditView(props) {
-  const { loading, form, data, onSubmit } = useEditForm(props);
-
-  if (loading) {
-    return <div data-testid='loading'>Loading...</div>;
-  }
-
-  return (
-    <div className='flex flex-col space-y-5'>
-      <WrapperForm form={form} submission={{ data }} onAsyncSubmit={onSubmit} />
-
-      <div className='flex flex-col space-y-5'>
-        <strong>Preview:</strong>
-        <pre className='bg-gray-200 p-5 rounded-sm text-sm'>
-          <code>{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      </div>
-    </div>
-  );
-}
-
-/**
- * The form component is the primary component of the system. It is what takes the form definition (json) and renders the
- * form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
- * prop with an url to the form definition, usually a form.io server. The other is to pass the `form` prop with the json
- * definition and optionally a `url` prop with the location of the form.
- */
-export default {
-  title: "Formiojs/Integration/Form",
-  component: EditView,
-  argTypes: {
-    model: {
-      control: {
-        type: "text"
-      }
-    },
-    submissionId: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  tags: ["autodocs"]
-};
-
-/**
- * Fetch submission data from a server then use the custom `onAsyncSubmit` event to update the submission
- * data on a non form.io server.
- *
- * Formio support `form.action` property to send the form data to a custom server.
- * But here we want to handle the submission data manually and perform some custom action before sending the data to the server.
- */
-export const FetchSubmissionWithCustomAction = {
-  args: {
-    model: "Test",
-    submissionId: "1"
-  },
-  parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "PUT",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      }
-    ]
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("loading")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-    let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
-
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
-
-    await waitFor(() => {
-      expect(firstnameInput).toHaveValue("Jane");
-    });
-
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
-
-    await waitFor(() => {
-      expect(lastNameInput).toHaveValue("Smith");
-    });
-
-    let submitButton = canvas.getByRole("button", { name: "Submit" });
-
-    userEvent.click(submitButton);
-
-    await delay(1000);
-
-    await waitFor(() => {
-      submitButton = canvas.getByRole("button", { name: "Submit" });
-      expect(submitButton.children).toHaveLength(1);
-    });
-  }
-};
-
-export const ErrorOnSubmitServer = {
-  args: {
-    model: "Test2",
-    submissionId: "2"
-  },
-  parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test2",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "PUT",
-        status: 400,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("loading")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-    let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
-
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
-
-    await waitFor(() => {
-      expect(firstnameInput).toHaveValue("Jane");
-    });
-
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
-
-    await waitFor(() => {
-      expect(lastNameInput).toHaveValue("Smith");
-    });
-
-    let submitButton = canvas.getByRole("button", { name: "Submit" });
-
-    userEvent.click(submitButton);
-
-    await delay(1000);
-
-    await waitFor(async () => {
-      expect(canvas.getByText("Please fix the following errors before submitting.")).toBeInTheDocument();
-    });
-  }
-};
diff --git a/packages/tailwind-formio/src/templates/stories/form.stories.jsx b/packages/tailwind-formio/src/templates/stories/form.stories.jsx
deleted file mode 100644
index 4ee7aab..0000000
--- a/packages/tailwind-formio/src/templates/stories/form.stories.jsx
+++ /dev/null
@@ -1,466 +0,0 @@
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
-import { InputText } from "@tsed/react-formio";
-import React, { useEffect, useState } from "react";
-
-import form from "./__fixtures__/form.fixtures.js";
-import formFirstname from "./__fixtures__/form-firstname.fixture.json";
-import { WrapperForm } from "./__fixtures__/WrapperForm.jsx";
-
-async function delay(number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, number);
-  });
-}
-
-/**
- * The form component is the primary component of the system. It is what takes the form definition (json) and renders the
- * form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
- * prop with an url to the form definition, usually a form.io server. The other is to pass the `form` prop with the json
- * definition and optionally a `url` prop with the location of the form.
- */
-export default {
-  title: "Formiojs/Form",
-  component: WrapperForm,
-  argTypes: {
-    form: {
-      description:
-        "Instead of loading a form from the `src` url, you can preload the form definition and pass it in with the `form` prop. You should also set `url` if you are using any advanced components like file upload or oauth.",
-      control: {
-        type: "object"
-      }
-    },
-    src: {
-      description:
-        "The src of the form definition. This is commonly from a form.io server. When using src, the form will automatically submit the data to that url as well.",
-      control: {
-        type: "text"
-      }
-    },
-    submission: {
-      description:
-        "Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form.",
-      control: {
-        type: "object"
-      }
-    },
-    options: {
-      description:
-        "An options object that can pass options to the formio.js Form that is rendered. You can set options such as `readOnly`, `noAlerts` or `hide`. There are [many options to be found in the formio.js library](https://github.com/formio/formio.js/wiki/Form-Renderer#options).",
-      control: {
-        type: "object"
-      }
-    },
-    onFormReady: {
-      description:
-        "A callback function that gets called when the form has rendered. It is useful for accessing the underlying @formio/js Webform instance.",
-      action: "onFormReady"
-    },
-    onPrevPage: {
-      description: 'A callback function for Wizard forms that gets called when the "Previous" button is pressed.',
-      action: "onPrevPage"
-    },
-    onNextPage: {
-      description: 'A callback function for Wizard forms that gets called when the "Next" button is pressed.',
-      action: "onNextPage"
-    },
-    onCancelSubmit: {
-      description: "A callback function that gets called when the submission has been canceled.",
-      action: "onCancelSubmit"
-    },
-    onCancelComponent: {
-      description: "A callback function that gets called when a component has been canceled.",
-      action: "onCancelComponent"
-    },
-    // FIXME adding this event causes the story to fail
-    // onChange: {
-    //   description: "A callback function that gets called when a value in the submission has changed.",
-    //   action: "onChange"
-    // },
-    onCustomEvent: {
-      description: 'A callback function that is triggered from a button component configured with "Event" type.',
-      action: "onCustomEvent"
-    },
-    // FIXME adding this event causes the story to fail
-    // onComponentChange: {
-    //   description: "A callback function that gets called when a specific component changes.",
-    //   action: "onComponentChange"
-    // },
-    onSubmit: {
-      description:
-        "A callback function that gets called when the submission has started. If src is not a Form.io server URL, this will be the final submit event.",
-      action: "onSubmit"
-    },
-    onSubmitDone: {
-      description:
-        "A callback function that gets called when the submission has successfully been made to the server. This will only fire if src is set to a Form.io server URL.",
-      action: "onSubmitDone"
-    },
-    onSubmitError: {
-      description: "A callback function that gets called when an error occurs during submission (e.g. a validation error).",
-      action: "onSubmitError"
-    },
-    onFormLoad: {
-      description: "A callback function that gets called when the form is finished loading.",
-      action: "onFormLoad"
-    },
-    onError: {
-      description: "A callback function that gets called when an error occurs during submission (e.g. a validation error).",
-      action: "onError"
-    },
-    onRender: {
-      description:
-        "A callback function that gets called when the form is finished rendering. param will depend on the form and display type.",
-      action: "onRender"
-    },
-    onAttach: {
-      description: "Event",
-      action: "onAttach"
-    },
-    onBuild: {
-      description: "Event",
-      action: "onBuild"
-    },
-    onInitialized: {
-      description: "Event",
-      action: "onInitialized"
-    },
-    onLanguageChanged: {
-      description: "Event",
-      action: "onLanguageChanged"
-    },
-    onBeforeSetSubmission: {
-      description: "Event",
-      action: "onBeforeSetSubmission"
-    },
-    onSaveDraftBegin: {
-      description: "Event",
-      action: "onSaveDraftBegin"
-    },
-    onSaveDraft: {
-      description: "Event",
-      action: "onSaveDraft"
-    },
-    onRestoreDraft: {
-      description: "Event",
-      action: "onRestoreDraft"
-    },
-    onSubmissionDeleted: {
-      description: "Event",
-      action: "onSubmissionDeleted"
-    },
-    onRequestDone: {
-      description: "Event",
-      action: "onRequestDone"
-    },
-    otherEvents: {
-      description:
-        'A "catch-all" prop for subscribing to other events (for a complete list, see [our documentation](https://help.form.io/developers/form-development/form-renderer#form-events)).',
-      control: {
-        type: "object"
-      }
-    }
-  },
-  tags: ["autodocs"]
-};
-/**
- * Form with `form` property.
- */
-export const BasicUsageUsingForm = {
-  args: {
-    form,
-    onFormReady: fn(),
-    options: {
-      template: "tailwind",
-      iconset: "bx"
-    }
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    expect(args.onFormReady).toHaveBeenCalled();
-
-    expect(canvas.getByRole("textbox", { name: "Text Field" })).toBeInTheDocument();
-  }
-};
-/**
- * Form with `src` property.
- */
-export const BasicUsageUsingSrc = {
-  args: {
-    src: "https://example.form.io/example",
-    options: {
-      template: "tailwind",
-      iconset: "bx"
-    }
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    expect(canvas.getByRole("textbox", { name: "First Name" })).toBeInTheDocument();
-  }
-};
-/**
- * Form with `submission` property.
- */
-export const WithSubmissionData = {
-  args: {
-    form: formFirstname,
-    options: {
-      template: "tailwind",
-      iconset: "bx"
-    },
-    submission: {
-      data: {
-        firstName: "John",
-        lastName: "Doe"
-      }
-    }
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    const firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-    const lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
-
-    expect(firstnameInput).toHaveValue("John");
-    expect(lastNameInput).toHaveValue("Doe");
-  }
-};
-/**
- * Form with `onSubmit` property.
- */
-export const WithOnSubmit = {
-  render(args) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [data, setData] = useState(() => args.submission.data);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      setData(args.submission.data);
-    }, [args.submission]);
-
-    return (
-      <>
-        <WrapperForm
-          {...args}
-          submission={{
-            data: data
-          }}
-          onSubmit={(submission) => {
-            setTimeout(() => {
-              setData(submission.data);
-            }, 1000);
-          }}
-        />
-        <div className='flex flex-col space-y-5 pt-5'>
-          <strong>Preview:</strong>
-          <pre className='bg-gray-200 p-5 rounded-sm text-sm'>
-            <code>{JSON.stringify(data, null, 2)}</code>
-          </pre>
-
-          <InputText
-            name={"raw-firstName"}
-            label={"Raw First name"}
-            value={data.firstName}
-            onChange={(_, value) => setData({ ...data, firstName: value })}
-          />
-        </div>
-      </>
-    );
-  },
-  args: {
-    form: formFirstname,
-    options: {
-      template: "tailwind",
-      iconset: "bx"
-    },
-    submission: {
-      data: {
-        firstName: "John",
-        lastName: "Doe"
-      }
-    }
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-    let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
-
-    expect(firstnameInput).toHaveValue("John");
-    expect(lastNameInput).toHaveValue("Doe");
-
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
-
-    await waitFor(() => {
-      expect(firstnameInput).toHaveValue("Jane");
-    });
-
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
-
-    await waitFor(() => {
-      expect(lastNameInput).toHaveValue("Smith");
-    });
-
-    let submitButton = canvas.getByRole("button", { name: "Submit" });
-
-    userEvent.click(submitButton);
-
-    await delay(1200);
-
-    firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-    lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
-
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Endo", { delay: 100 });
-
-    await delay(1100);
-
-    await waitFor(() => {
-      expect(lastNameInput).toHaveValue("Endo");
-    });
-
-    submitButton = canvas.getByRole("button", { name: "Submit" });
-
-    userEvent.click(submitButton);
-
-    await delay(1200);
-
-    const rawFirstNameInput = canvas.getByRole("textbox", { name: "Raw First name" });
-
-    await waitFor(() => {
-      expect(rawFirstNameInput).toHaveValue("Jane");
-    });
-
-    userEvent.clear(rawFirstNameInput);
-
-    await delay(100);
-
-    userEvent.type(rawFirstNameInput, "Romeo", { delay: 100 });
-
-    await waitFor(() => {
-      expect(rawFirstNameInput).toHaveValue("Romeo");
-    });
-
-    firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-
-    await waitFor(() => {
-      expect(firstnameInput).toHaveValue("Romeo");
-    });
-  }
-};
-/**
- * Form with custom validation hook
- */
-export const CustomValidation = {
-  parameters: {
-    mockData: [
-      {
-        url: "https://test.dev/todos/1",
-        method: "GET",
-        status: 500,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
-  },
-  args: {
-    form: formFirstname,
-    options: {
-      hooks: {
-        async customValidation(submission, callback) {
-          const response = await fetch("https://test.dev/todos/1", {
-            headers: {
-              Accept: "application/json",
-              "Content-Type": "application/json"
-            },
-            method: "GET"
-          });
-
-          const responseData = await response.json();
-
-          if (response.ok) {
-            callback(null);
-          } else {
-            callback(responseData);
-          }
-        }
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toBeInTheDocument();
-    });
-
-    await waitFor(() => {
-      expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
-    });
-
-    let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
-    let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
-
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
-
-    await waitFor(() => {
-      expect(firstnameInput).toHaveValue("Jane");
-    });
-
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
-
-    await waitFor(() => {
-      expect(lastNameInput).toHaveValue("Smith");
-    });
-
-    let submitButton = canvas.getByRole("button", { name: "Submit" });
-
-    userEvent.click(submitButton);
-
-    await waitFor(async () => {
-      expect(canvas.getByText("Please fix the following errors before submitting.")).toBeInTheDocument();
-    });
-  }
-};
diff --git a/packages/tailwind-formio/src/templates/stories/wizard.stories.jsx b/packages/tailwind-formio/src/templates/stories/wizard.stories.jsx
deleted file mode 100644
index 214c400..0000000
--- a/packages/tailwind-formio/src/templates/stories/wizard.stories.jsx
+++ /dev/null
@@ -1,1917 +0,0 @@
-import FormioFormBuilder from "formiojs/FormBuilder";
-import React, { useEffect, useRef } from "react";
-
-function WrapperFormBuilder({ options, form }) {
-  const ref = useRef();
-
-  const initializeBuilder = (form, options) => {
-    options = Object.assign({}, options);
-    form = Object.assign({}, form);
-
-    const builder = new FormioFormBuilder(ref.current, form, options);
-    builder.ready.then(() => {
-      // onChange();
-      // builderEvents.forEach(({name, action}) => builder.instance.on(name, action));
-    });
-
-    return builder;
-  };
-
-  useEffect(() => {
-    const builder = initializeBuilder(form, options);
-    return () => builder.instance.destroy(true);
-  }, [form, options]);
-
-  return (
-    <div>
-      <div ref={ref} />
-    </div>
-  );
-}
-
-export default {
-  title: "Formiojs/Wizard",
-  component: WrapperFormBuilder,
-  argTypes: {
-    display: {
-      control: {
-        type: "select",
-        options: ["form", "wizard"]
-      }
-    },
-    template: {
-      control: {
-        type: "select",
-        options: ["tailwind", "bootstrap", "semantic"]
-      }
-    },
-    iconset: {
-      control: {
-        type: "select",
-        options: ["bx", "fa"]
-      }
-    },
-    form: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
-    }
-  }
-};
-
-export const Sandbox = (args) => {
-  return <WrapperFormBuilder form={{ ...args.form, display: args.display }} options={{ template: args.template, iconset: args.iconset }} />;
-};
-
-Sandbox.args = {
-  form: {
-    _id: "6023f8fe4b1a2ab9a3aae096",
-    type: "form",
-    tags: [],
-    owner: "5d0797a382461b6656d2c790",
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      },
-      {
-        label: "Text Area",
-        labelPosition: "top",
-        placeholder: "Placeholder",
-        description: "description",
-        tooltip: "tooltip",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        editor: "",
-        autoExpand: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "html",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          minWords: "",
-          maxWords: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textArea",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        fixedSize: true,
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        attributes: {},
-        type: "textarea",
-        rows: 3,
-        wysiwyg: false,
-        input: true,
-        refreshOn: "",
-        allowMultipleMasks: false,
-        mask: false,
-        inputType: "text",
-        inputMask: "",
-        id: "e4jsrqc",
-        defaultValue: ""
-      },
-      {
-        label: "Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        delimiter: false,
-        requireDecimal: false,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          min: "",
-          max: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          step: "any",
-          integer: ""
-        },
-        errorLabel: "",
-        key: "number",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "number",
-        input: true,
-        unique: false,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ex8zh8u",
-        defaultValue: null
-      },
-      {
-        label: "Password",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        case: "",
-        redrawOn: "",
-        clearOnHide: true,
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "password",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "password",
-        input: true,
-        multiple: false,
-        defaultValue: null,
-        protected: true,
-        unique: false,
-        persistent: true,
-        refreshOn: "",
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        encrypted: false,
-        allowMultipleMasks: false,
-        inputType: "text",
-        inputFormat: "plain",
-        inputMask: "",
-        id: "etqa5pm"
-      },
-      {
-        label: "Checkbox",
-        description: "description",
-        tooltip: "tooltip",
-        shortcut: "",
-        inputType: "checkbox",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        defaultValue: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "checkbox",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "checkbox",
-        name: "",
-        value: "",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        labelPosition: "right",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        dataGridLabel: true,
-        id: "em8ln2m"
-      },
-      {
-        label: "Select Boxes",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "label", value: "label", shortcut: "" },
-          {
-            label: "lol",
-            value: "lol",
-            shortcut: ""
-          }
-        ],
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        minSelectedCountMessage: "",
-        maxSelectedCountMessage: "",
-        key: "selectBoxes",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "selectboxes",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "checkbox",
-        fieldSet: false,
-        id: "esa4upt",
-        defaultValue: { "": false }
-      },
-      {
-        label: "Radio",
-        labelPosition: "top",
-        optionsLabelPosition: "right",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        inline: false,
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        values: [
-          { label: "data", value: "data", shortcut: "" },
-          {
-            label: "label",
-            value: "label",
-            shortcut: ""
-          }
-        ],
-        dataType: "",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        errorLabel: "",
-        key: "radio",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "radio",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        unique: false,
-        refreshOn: "",
-        widget: null,
-        validateOn: "change",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "radio",
-        fieldSet: false,
-        id: "edh7o6o",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "choicesjs",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [
-            { label: "label", value: "label" },
-            { label: "save", value: "save" }
-          ],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "ebqtqd6",
-        defaultValue: ""
-      },
-      {
-        label: "Select",
-        labelPosition: "top",
-        widget: "html5",
-        placeholder: "placeholder",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        uniqueOptions: false,
-        autofocus: false,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        dataSrc: "values",
-        data: {
-          values: [{ label: "", value: "" }],
-          resource: "",
-          json: "",
-          url: "",
-          custom: ""
-        },
-        valueProperty: "",
-        dataType: "",
-        idPath: "id",
-        template: "<span>{{ item.label }}</span>",
-        refreshOn: "",
-        refreshOnBlur: "",
-        clearOnRefresh: false,
-        searchEnabled: true,
-        selectThreshold: 0.3,
-        readOnlyValue: false,
-        customOptions: {},
-        useExactSearch: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "select1",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "select",
-        indexeddb: { filter: {} },
-        selectFields: "",
-        searchField: "",
-        minSearch: 0,
-        filter: "",
-        limit: 100,
-        redrawOn: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        lazyLoad: true,
-        authenticate: false,
-        searchThreshold: 0.3,
-        fuseOptions: { include: "score", threshold: 0.3 },
-        id: "em8m4qk",
-        defaultValue: ""
-      },
-      {
-        label: "Email",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        kickbox: { enabled: false },
-        errorLabel: "",
-        key: "email",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "email",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "email",
-        inputMask: "",
-        id: "epj8sj28",
-        defaultValue: null
-      },
-      {
-        label: "Url",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "url",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "url",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        inputType: "url",
-        inputMask: "",
-        id: "exw9p4",
-        defaultValue: null
-      },
-      {
-        label: "Phone Number",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "(999) 999-9999",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          minLength: "",
-          maxLength: "",
-          pattern: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "phoneNumber",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "phoneNumber",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        inputType: "tel",
-        id: "e2c7lpl",
-        defaultValue: null
-      },
-      {
-        label: "Tags",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        delimeter: ",",
-        maxTags: 0,
-        storeas: "string",
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "tags",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "tags",
-        input: true,
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        widget: { type: "input" },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ejc82t",
-        defaultValue: null
-      },
-      {
-        label: "Address",
-        labelPosition: "top",
-        enableManualMode: false,
-        disableClearIcon: false,
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        provider: "google",
-        manualModeViewString: "",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "address",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "address",
-        switchToManualModeLabel: "Can't find address? Switch to manual mode.",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        tree: true,
-        components: [
-          {
-            label: "Address 1",
-            tableView: false,
-            key: "address1",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eecfg6h"
-          },
-          {
-            label: "Address 2",
-            tableView: false,
-            key: "address2",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eajhpuu"
-          },
-          {
-            label: "City",
-            tableView: false,
-            key: "city",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "efpnrca7"
-          },
-          {
-            label: "State",
-            tableView: false,
-            key: "state",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "eu3kksv"
-          },
-          {
-            label: "Country",
-            tableView: false,
-            key: "country",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "el39cu9"
-          },
-          {
-            label: "Zip Code",
-            tableView: false,
-            key: "zip",
-            type: "textfield",
-            input: true,
-            customConditional: "show = _.get(instance, 'parent.manualMode', false);",
-            placeholder: "",
-            prefix: "",
-            customClass: "",
-            suffix: "",
-            multiple: false,
-            defaultValue: null,
-            protected: false,
-            unique: false,
-            persistent: true,
-            hidden: false,
-            clearOnHide: true,
-            refreshOn: "",
-            redrawOn: "",
-            modalEdit: false,
-            labelPosition: "top",
-            description: "",
-            errorLabel: "",
-            tooltip: "",
-            hideLabel: false,
-            tabindex: "",
-            disabled: false,
-            autofocus: false,
-            dbIndex: false,
-            customDefaultValue: "",
-            calculateValue: "",
-            calculateServer: false,
-            widget: { type: "input" },
-            attributes: {},
-            validateOn: "change",
-            validate: {
-              required: false,
-              custom: "",
-              customPrivate: false,
-              strictDateValidation: false,
-              multiple: false,
-              unique: false,
-              minLength: "",
-              maxLength: "",
-              pattern: ""
-            },
-            conditional: { show: null, when: null, eq: "" },
-            overlay: { style: "", left: "", top: "", width: "", height: "" },
-            allowCalculateOverride: false,
-            encrypted: false,
-            showCharCount: false,
-            showWordCount: false,
-            properties: {},
-            allowMultipleMasks: false,
-            mask: false,
-            inputType: "text",
-            inputFormat: "plain",
-            inputMask: "",
-            spellcheck: true,
-            id: "epyac4"
-          }
-        ],
-        providerOptions: { params: { key: "fze", region: "" } },
-        id: "er02e2gb",
-        defaultValue: {}
-      },
-      {
-        label: "Date / Time",
-        labelPosition: "top",
-        displayInTimezone: "viewer",
-        useLocaleSettings: false,
-        allowInput: true,
-        format: "yyyy-MM-dd hh:mm a",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        enableDate: true,
-        enableMinDateInput: false,
-        datePicker: {
-          minDate: null,
-          maxDate: null,
-          disable: "",
-          disableFunction: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          showWeeks: true,
-          startingDay: 0,
-          initDate: "",
-          minMode: "day",
-          maxMode: "year",
-          yearRows: 4,
-          yearColumns: 5
-        },
-        enableMaxDateInput: false,
-        enableTime: true,
-        timePicker: {
-          showMeridian: true,
-          hourStep: 1,
-          minuteStep: 1,
-          readonlyInput: false,
-          mousewheel: true,
-          arrowkeys: true
-        },
-        multiple: false,
-        defaultValue: "",
-        defaultDate: "",
-        customOptions: {},
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        validateOn: "change",
-        errorLabel: "",
-        key: "dateTime",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "datetime",
-        timezone: "",
-        input: true,
-        prefix: "",
-        suffix: "",
-        refreshOn: "",
-        widget: {
-          type: "calendar",
-          displayInTimezone: "viewer",
-          locale: "en",
-          useLocaleSettings: false,
-          allowInput: true,
-          mode: "single",
-          enableTime: true,
-          noCalendar: false,
-          format: "yyyy-MM-dd hh:mm a",
-          hourIncrement: 1,
-          minuteIncrement: 1,
-          minDate: null,
-          disabledDates: "",
-          disableWeekends: false,
-          disableWeekdays: false,
-          disableFunction: "",
-          maxDate: null
-        },
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        datepickerMode: "day",
-        id: "el9idgl"
-      },
-      {
-        label: "Day",
-        hideInputLabels: false,
-        inputsLabelPosition: "top",
-        description: "",
-        useLocaleSettings: false,
-        tooltip: "",
-        customClass: "",
-        tabindex: "",
-        hidden: false,
-        hideLabel: false,
-        autofocus: false,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        fields: {
-          day: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          month: {
-            type: "select",
-            placeholder: "",
-            hide: false,
-            required: false
-          },
-          year: {
-            type: "number",
-            placeholder: "",
-            hide: false,
-            required: false
-          }
-        },
-        dayFirst: false,
-        persistent: true,
-        protected: false,
-        dbIndex: false,
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        maxDate: "",
-        minDate: "",
-        unique: false,
-        errorLabel: "",
-        validate: {
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          required: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        key: "day",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "day",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        suffix: "",
-        multiple: false,
-        refreshOn: "",
-        labelPosition: "top",
-        widget: null,
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        id: "ecgefls",
-        defaultValue: "00/00/0000"
-      },
-      {
-        label: "Currency",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: false,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        currency: "USD",
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: false,
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false,
-          min: "",
-          max: "",
-          step: "any",
-          integer: ""
-        },
-        unique: false,
-        errorLabel: "",
-        key: "currency",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "currency",
-        input: true,
-        refreshOn: "",
-        showCharCount: false,
-        showWordCount: false,
-        allowMultipleMasks: false,
-        delimiter: true,
-        id: "em22wkd",
-        defaultValue: null
-      },
-      {
-        type: "button",
-        label: "Submit",
-        key: "submit",
-        size: "md",
-        block: false,
-        action: "submit",
-        disableOnInvalid: true,
-        theme: "primary",
-        input: true,
-        placeholder: "",
-        prefix: "",
-        customClass: "",
-        suffix: "",
-        multiple: false,
-        defaultValue: null,
-        protected: false,
-        unique: false,
-        persistent: false,
-        hidden: false,
-        clearOnHide: true,
-        refreshOn: "",
-        redrawOn: "",
-        tableView: false,
-        modalEdit: false,
-        labelPosition: "top",
-        description: "",
-        errorLabel: "",
-        tooltip: "",
-        hideLabel: false,
-        tabindex: "",
-        disabled: false,
-        autofocus: false,
-        dbIndex: false,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        widget: { type: "input" },
-        attributes: {},
-        validateOn: "change",
-        validate: {
-          required: false,
-          custom: "",
-          customPrivate: false,
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        conditional: { show: null, when: null, eq: "" },
-        overlay: { style: "", left: "", top: "", width: "", height: "" },
-        allowCalculateOverride: false,
-        encrypted: false,
-        showCharCount: false,
-        showWordCount: false,
-        properties: {},
-        allowMultipleMasks: false,
-        leftIcon: "",
-        rightIcon: "",
-        dataGridLabel: true,
-        id: "e08gq3l"
-      }
-    ],
-    revisions: "",
-    _vid: 0,
-    title: "text-field",
-    display: "form",
-    access: [
-      {
-        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
-        type: "read_all"
-      }
-    ],
-    submissionAccess: [],
-    controller: "",
-    properties: {},
-    settings: {},
-    name: "textField",
-    path: "textfield",
-    project: "5d0797bc872fc7d140559857",
-    created: "2021-02-10T15:17:18.028Z",
-    modified: "2021-02-10T21:38:52.325Z",
-    machineName: "tcspjwhsevrzpcd:textField"
-  },
-  display: "wizard",
-  template: "tailwind",
-  iconset: "bx"
-};
diff --git a/stories/Form.mdx b/stories/Form.mdx
index d7454ce..1435163 100644
--- a/stories/Form.mdx
+++ b/stories/Form.mdx
@@ -1,5 +1,5 @@
 import {Canvas, Meta} from '@storybook/blocks'
-import {BasicUsageWithForm, BasicUsageWithSrc, CustomValidation} from '../packages/react-formio/src/components/form/form.stories'
+import {BasicUsageWithForm, BasicUsageWithSrc, CustomValidation} from '../packages/react-formio/src/organisms/form/Form.stories'
 
 <Meta title="Documentation/Form"/>
 
diff --git a/stories/FormBuilder.mdx b/stories/FormBuilder.mdx
index aacf469..08880af 100644
--- a/stories/FormBuilder.mdx
+++ b/stories/FormBuilder.mdx
@@ -1,5 +1,5 @@
 import {Canvas, Meta} from '@storybook/blocks'
-import * as FormBuilderStories from '../packages/react-formio/src/components/form-builder/formBuilder.stories'
+import * as FormBuilderStories from '../packages/react-formio/src/organisms/form/builder/FormBuilder.stories'
 
 <Meta title="Documentation/FormBuilder"/>
 
diff --git a/stories/FormEdit.mdx b/stories/FormEdit.mdx
index 088cc56..1d61f5e 100644
--- a/stories/FormEdit.mdx
+++ b/stories/FormEdit.mdx
@@ -1,5 +1,5 @@
 import {Canvas, Meta} from '@storybook/blocks'
-import * as FormEditStories from '../packages/react-formio/src/components/form-edit/formEdit.stories'
+import * as FormEditStories from '../packages/react-formio/src/organisms/form/builder/FormEdit.stories'
 
 <Meta title="Documentation/FormEdit"/>
 
diff --git a/stories/FormTable.mdx b/stories/FormTable.mdx
index b11b5e6..0c79547 100644
--- a/stories/FormTable.mdx
+++ b/stories/FormTable.mdx
@@ -1,5 +1,5 @@
 import {Canvas, Meta} from '@storybook/blocks'
-import * as FormsTableStories from '../packages/react-formio/src/components/forms-table/formsTable.stories'
+import * as FormsTableStories from '../packages/react-formio/src/organisms/table/forms/FormsTable.stories'
 
 <Meta title="Documentation/FormsTable"/>
 
diff --git a/stories/Getting-started.mdx b/stories/Getting-started.mdx
index 31be64b..6a47800 100644
--- a/stories/Getting-started.mdx
+++ b/stories/Getting-started.mdx
@@ -1,5 +1,5 @@
 import {Canvas, Meta} from '@storybook/blocks'
-import * as FormBuilderStories from '../packages/react-formio/src/components/form-builder/formBuilder.stories'
+import * as FormBuilderStories from '../packages/react-formio/src/organisms/form/builder/FormBuilder.stories'
 
 <Meta title="Getting started" />
 
@@ -48,9 +48,9 @@ See our [storybook](https://formio.tsed.io/) to see all available components.
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](/story/reactformio-actionstable--sandbox),
-- [FormAccess](/story/reactformio-formaccess--sandbox),
-- [FormAction](/story/reactformio-formaction--sandbox),
+- [ActionsTable](/story/organisms-table-actions-actionstable--sandbox),
+- [FormAccess](/story/organisms-form-access-formaccess--sandbox),
+- [FormAction](/story/organisms-form-action-formaction--sandbox),
 - [Form](/docs/documentation-form--docs),
 - [FormBuilder](/docs/documentation-formbuilder--docs),
 - [FormEdit](/docs/documentation-formedit--docs),
@@ -65,15 +65,28 @@ Many components are provided to build your own backoffice based on Formio.js API
 - TypeScript support.
 - Tailwind support.
 
-## Migrate from v1
+## Migrate to v2
 
-If you use redux actions from v1, you have to install `@tsed/redux-formio-stores` and remplace your imports:
+If you use redux actions with v2, you have to install `@tsed/redux-formio-stores` and remplace your imports:
 
 ```diff
 - import { defaultFormioReducer, formsReducer } from "@tsed/react-formio";
 + import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";
 ```
 
+## Migrate to v3
+
+- `@tsed/react-formio` is now build only for ESM environment.
+- `@tsed/react-formio` use tree-shaking to reduce the bundle size, you have to import only what you need from the library.
+- `@tsed/react-formio` drop the support of TailwindCSS v2.
+
+Example:
+
+```diff
+- import { Form } from "@tsed/react-formio";
++ import { Form } from "@tsed/react-formio/organisms/form/Form";
+```
+
 ## Install
 
 `@tsed/react-formio` can be used on the server, or bundled for the client using an
diff --git a/stories/SubmissionsTable.mdx b/stories/SubmissionsTable.mdx
index 8468c67..7fc0a70 100644
--- a/stories/SubmissionsTable.mdx
+++ b/stories/SubmissionsTable.mdx
@@ -1,5 +1,5 @@
 import {Canvas, Meta} from '@storybook/blocks'
-import * as SubmissionsTableStories from '../packages/react-formio/src/components/submissions-table/submissionsTable.stories'
+import * as SubmissionsTableStories from '../packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories'
 
 <Meta title="Documentation/SubmissionsTable"/>
 
diff --git a/tools/typescript/package.json b/tools/typescript/package.json
index d8c5f83..d1b85f1 100644
--- a/tools/typescript/package.json
+++ b/tools/typescript/package.json
@@ -7,8 +7,5 @@
   "main": "index.js",
   "exports": {
     "./tsconfig.web.json": "./tsconfig.web.json"
-  },
-  "dependencies": {},
-  "devDependencies": {},
-  "peerDependencies": {}
+  }
 }
diff --git a/tools/vitest/package.json b/tools/vitest/package.json
index 8cbb71a..3948f07 100644
--- a/tools/vitest/package.json
+++ b/tools/vitest/package.json
@@ -14,7 +14,5 @@
   },
   "scripts": {
     "generate": "node index.js"
-  },
-  "dependencies": {},
-  "peerDependencies": {}
+  }
 }