Feat reorganize directories

.storybook/main.ts

@@ -6,9 +6,18 @@ 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: "Styling",
+      directory: "../packages/tailwind-formio"
+    },
+    {
+      titlePrefix: "Molecules",
+      directory: "../packages/react-formio/src/molecules"
+    },
+    {
+      titlePrefix: "Organisms",
+      directory: "../packages/react-formio/src/organisms"
+    }
   ],
 
   addons: [
@@ -18,7 +27,6 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-mdx-gfm",
     "@storybook/addon-links",
-    "@storybook/addon-interactions",
     "@chromatic-com/storybook",
     "storybook-addon-mock"
   ],

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

packages/react-formio-container/src/views/form.view.tsx

@@ -1,4 +1,7 @@
-import { Alert, 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";
@@ -13,7 +16,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>

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,4 +1,7 @@
-import { FormAction, iconClass, RemoveModal, 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,4 +1,5 @@
-import { Card, 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,12 +1,14 @@
-import { Card, Form } 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";
 
 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>
   );

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,4 +1,5 @@
-import { Alert, 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";
 
@@ -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"}

packages/react-formio-container/src/views/submission.view.tsx

@@ -1,4 +1,9 @@
-import { Form, iconClass, Loader, RemoveModal, 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";
 
@@ -62,7 +67,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}

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