feat(react-formio): register FormBuilder, FormEdit, etc to the contai…

…ner components

.storybook/main.ts

@@ -10,6 +10,10 @@ const config: StorybookConfig = {
       titlePrefix: "Styling",
       directory: "../packages/tailwind-formio"
     },
+    {
+      titlePrefix: "Atoms",
+      directory: "../packages/react-formio/src/atoms"
+    },
     {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"

package.json

@@ -7,12 +7,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TypedProject/tsed-formio.git"
+    "url": "https://github.com/tsedio/tsed-formio.git"
   },
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio",
   "scripts": {
     "configure": "monorepo ci configure",
     "test": "lerna run test --stream",

packages/react-formio-container/package.json

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

packages/react-formio-stores/src/stores/auth/auth.reducers.ts

@@ -1,4 +1,4 @@
-import type { FormType, RoleType, SubmissionType } from "@tsed/react-formio";
+import { FormType, JSON, RoleType, SubmissionType } from "@tsed/react-formio";
 import { createReducer } from "@tsed/redux-utils";
 
 import {
@@ -14,7 +14,7 @@ import {
 } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 
-export interface AuthState<User = any> {
+export interface AuthState<User extends { [key: string]: JSON } = any> {
   init: boolean;
   isActive: boolean;
   user: null | SubmissionType<User>;

packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
 import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { fn } from "@storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -95,24 +95,6 @@ export const Usage: Story = {
     value: "option-1",
     options,
     onChange: fn()
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const select = canvas.getByTestId("select_name");
-
-    await expect(select).toBeInTheDocument();
-    await expect(select).toHaveValue("option-1");
-
-    await userEvent.selectOptions(select, "option-2");
-
-    await expect(select).toHaveValue("option-2");
-    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
-
-    const label = canvas.getByTestId("form-group-name");
-
-    await expect(label).toBeInTheDocument();
-    await expect(label).toHaveTextContent("Label");
   }
 };
 
@@ -125,19 +107,6 @@ export const WithPlaceholder: Story = {
     placeholder: "Select an option",
     options,
     onChange: fn()
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const select = canvas.getByTestId("select_name");
-
-    await expect(select).toBeInTheDocument();
-    await expect(select).toHaveValue("");
-
-    await userEvent.selectOptions(select, "option-2");
-
-    await expect(select).toHaveValue("option-2");
-    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
   }
 };
 /**
@@ -150,19 +119,6 @@ export const WithPlaceholderAndRequired: Story = {
     options,
     required: true,
     onChange: fn()
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const select = canvas.getByTestId("select_name");
-
-    await expect(select).toBeInTheDocument();
-    await expect(select).toHaveValue("");
-
-    await userEvent.selectOptions(select, "option-2");
-
-    await expect(select).toHaveValue("option-2");
-    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
   }
 };
 /**

packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx

@@ -17,8 +17,8 @@ export function HTMLSelect({ name, id = name, size, value, multiple, onChange, o
 
   return (
     <select
-      {...(props as any)}
       data-testid={`select_${name}`}
+      {...(props as any)}
       className={cx("form-control", size && `form-control-${size}`)}
       name={name}
       id={id}

packages/react-formio/src/molecules/pagination/Pagination.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Pagination } from "./Pagination";
+import { Pagination } from "./all";
 
 const args: any = {
   pageSizes: [10, 25, 50, 100],

packages/react-formio/src/molecules/pagination/all.ts

@@ -1,2 +1,3 @@
+import "../forms/select/all.ts";
 export * from "./Pagination";
 export * from "./PaginationButton";

packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx

@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { act, fireEvent, render, screen } from "@testing-library/react";
 
 import { DefaultColumnFilter } from "./DefaultColumnFilter";

packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx

@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { render, screen } from "@testing-library/react";
 
 import { SelectColumnFilter } from "./SelectColumnFilter";

packages/react-formio/src/organisms/form/builder/FormBuilder.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 
+import { registerComponent } from "../../../registries/components";
 import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder";
 
 export function FormBuilder({
@@ -23,3 +24,5 @@ export function FormBuilder({
     </div>
   );
 }
+
+registerComponent("FormBuilder", FormBuilder);

packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx

@@ -1,13 +1,43 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { FormEdit } from "./FormEdit";
+import { FormEdit, FormParameters } from "./all";
 import { defaultDisplayChoices } from "./FormParameters";
-
+console.log(FormParameters);
 /**
+ * Form Edit component to edit form schema using the form builder.
+ *
+ * ## Usage
  *
  * ```tsx
+ * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/all";
+ *
+ * or
+ *
+ * // register needed components
+ * import "@tsed/react-formio/atoms/icon/Icon";
+ * import "@tsed/react-formio/molecules/button/Button";
+ * import "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * import "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect";
+ * import "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+ * import "@tsed/react-formio/organisms/form/builder/FormParameters";
+ * import "@tsed/react-formio/organisms/form/builder/FormBuilder";
+ * import "@tsed/react-formio/organisms/form/builder/FormEditCtas";
+ *
+ * // use FormEdit component
  * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/FormEdit";
  * ```
+ *
+ * ## Override FormEdit
+ *
+ * This component is registered with the name `FormEdit` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("FormEdit", MyFormEditComponent);
+ * registerComponent("FormEditCtas", MyFormEditCtasComponent);
+ * registerComponent("FormBuilder", MyFormBuilderComponent);
+ * registerComponent("FormParameters", MyFormParametersComponent);
+ * ```
  */
 export default {
   title: "form/builder/FormEdit",

packages/react-formio/src/organisms/form/builder/FormEdit.tsx

@@ -1,7 +1,8 @@
 import type { FormOptions } from "../../../interfaces";
-import { FormBuilder } from "./FormBuilder";
-import { FormEditCTAs } from "./FormEditCtas";
-import { FormParameters } from "./FormParameters";
+import { getComponent } from "../../../registries/components";
+import { FormBuilder as DefaultFormBuilder } from "./FormBuilder";
+import { FormEditCTAs as DefaultFormEditCTAs } from "./FormEditCtas";
+import { FormParameters as DefaultFormParameters } from "./FormParameters";
 import { FormBuilderEvents } from "./useFormBuilder";
 import { useFormEdit, UseFormEditHookProps } from "./useFormEdit";
 
@@ -28,7 +29,10 @@ export function FormEdit({
   });
 
   const { options = {} } = props;
-
+  const FormParameters = getComponent<typeof DefaultFormParameters>("FormParameters");
+  const FormBuilder = getComponent<typeof DefaultFormBuilder>("FormBuilder");
+  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
+  console.log(FormParameters, FormBuilder, FormEditCTAs);
   return (
     <div className='form-edit-container'>
       <div className='form-edit'>

packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx

@@ -1,8 +1,10 @@
 import { ReactElement } from "react";
 
+import { Icon as DefaultIcon } from "../../../atoms/icon/Icon";
 import { useTooltip } from "../../../hooks/useTooltip";
 import type { FormOptions } from "../../../interfaces";
-import { iconClass } from "../../../utils/iconClass";
+import { Button as DefaultButton } from "../../../molecules/button/Button";
+import { getComponent, registerComponent } from "../../../registries/components";
 
 export interface FormEditCTAsProps extends Record<string, unknown> {
   saveText?: string;
@@ -55,40 +57,41 @@ export function FormEditCTAs({
     title: t("Reset all changes")
   });
 
+  const Button = getComponent<typeof DefaultButton>("Button");
+  const Icon = getComponent<typeof DefaultIcon>("Icon");
+
   return (
     <div className={"form-edit__actions"}>
       <div>
-        <button
-          className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
-          disabled={disabled}
-          onClick={() => !disabled && onSubmit && onSubmit()}
-        >
-          <i className={`mr-1 ${iconClass(options.iconset, "save")}`} />
+        <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>
+          <Icon name='save' iconset={options.iconset} />
           {saveText}
-        </button>
+        </Button>
 
         <div>
-          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo && onUndo()} ref={undoTooltipRef}>
-            <i className={iconClass(options.iconset, "undo")} />
-          </button>
+          <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>
+            <Icon name='undo' iconset={options.iconset} />
+          </Button>
 
-          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo && onRedo()} ref={redoTooltipRef}>
-            <i className={iconClass(options.iconset, "redo")} />
-          </button>
+          <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>
+            <Icon name='redo' iconset={options.iconset} />
+          </Button>
         </div>
 
         <div>
           {onCopy && (
-            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef!}>
-              <i className={iconClass(options.iconset, "copy")} />
-            </button>
+            <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>
+              <Icon name='copy' iconset={options.iconset} />
+            </Button>
           )}
 
-          <button className={`btn btn-light btn-reset`} onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
-            <i className={iconClass(options.iconset, "reset")} />
-          </button>
+          <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
+            <Icon name='reset' iconset={options.iconset} />
+          </Button>
         </div>
       </div>
     </div>
   );
 }
+
+registerComponent("FormEditCTAs", FormEditCTAs);

packages/react-formio/src/organisms/form/builder/FormParameters.tsx

@@ -2,8 +2,9 @@ import { ReactElement } from "react";
 
 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";
+import { InputText as DefaultInputText } from "../../../molecules/forms/input-text/InputText";
+import { Select as DefaultSelect } from "../../../molecules/forms/select/Select";
+import { getComponent, registerComponent } from "../../../registries/components";
 
 export const defaultDisplayChoices = [
   { label: "Form", value: "form" },
@@ -34,6 +35,9 @@ export function FormParameters({
 }: FormParametersProps): ReactElement {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
 
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const Select = getComponent<typeof DefaultSelect>("Select");
+
   return (
     <div className={`form-edit__settings ${className}`}>
       <div>
@@ -43,7 +47,7 @@ export function FormParameters({
           name={"title"}
           required={true}
           value={form.title}
-          disabled={!!readonly["title"]}
+          disabled={readonly["title"]}
           onChange={onChange}
         />
       </div>
@@ -53,7 +57,7 @@ export function FormParameters({
           placeholder='Enter the form machine name'
           name={"name"}
           required={true}
-          disabled={!!readonly["name"]}
+          disabled={readonly["name"]}
           value={form.name}
           onChange={onChange}
         />
@@ -72,7 +76,7 @@ export function FormParameters({
           }
           required={true}
           value={form.path}
-          disabled={!!readonly["path"]}
+          disabled={readonly["path"]}
           style={{ textTransform: "lowercase", width: "120px" }}
           onChange={onChange}
         />
@@ -81,15 +85,15 @@ export function FormParameters({
         <Select
           label={"Display as"}
           name={"display"}
-          disabled={!!readonly["display"]}
+          disabled={readonly["display"]}
           value={form.display}
-          choices={displayChoices}
+          options={displayChoices}
           onChange={onChange}
         />
       </div>
       {hasTypeChoices && (
         <div>
-          <Select label={"Type"} name={"type"} value={form.type} choices={typeChoices} onChange={onChange} />
+          <Select label={"Type"} name={"type"} value={form.type} options={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
@@ -100,3 +104,5 @@ export function FormParameters({
     </div>
   );
 }
+
+registerComponent("FormParameters", FormParameters);