refactor(react-formio): move all formio component under organisms

BREAKING CHANGE: use appropriate link to import components (tree shaking)

.storybook/main.ts

@@ -6,20 +6,18 @@ const config: StorybookConfig = {
   stories: [
     "../stories/Getting-started.mdx",
     "../stories/**/*.mdx",
+    {
+      titlePrefix: "Styling",
+      directory: "../packages/tailwind-formio"
+    },
     {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"
     },
     {
       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: [

packages/react-formio-container/package.json

@@ -97,6 +97,5 @@
     "tooltip.js": {
       "optional": false
     }
-  },
-  "dependencies": {}
+  }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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: {}

packages/react-formio/src/components/form/form.component.spec.tsx → 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();

packages/react-formio/src/components/form/form.stories.tsx → 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: {

packages/react-formio/src/components/form/form.component.tsx → 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 {}
 

packages/react-formio/src/components/form-access/formAccess.schema.ts → 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 {

packages/react-formio/src/components/form-access/formAccess.stories.tsx → 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" }

packages/react-formio/src/components/form-access/formAccess.component.tsx → 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>;

packages/react-formio/src/components/form-access/formAccess.utils.spec.ts → 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[] = [
   {

packages/react-formio/src/components/form-access/formAccess.utils.ts → 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;

packages/react-formio/src/components/form-action/formAction.stories.tsx → 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" },

packages/react-formio/src/components/form-action/formAction.component.tsx → 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 {

packages/react-formio/src/components/form-builder/formBuilder.stories.tsx → 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: {

packages/react-formio/src/components/form-builder/formBuilder.component.tsx → 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 = "",

packages/react-formio/src/components/form-edit/formEdit.reducer.ts → 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);