feat(react-formio): register FormBuilder, FormEdit, etc to the container components

Author: Romakita

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

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

packages/react-formio/src/organisms/form/builder/all.ts

@@ -0,0 +1,13 @@
+import "../../../atoms/icon/Icon";
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/Select";
+import "../../../molecules/forms/select/components/HtmlSelect";
+import "../../../molecules/forms/input-tags/InputTags";
+
+export * from "./FormBuilder";
+export * from "./FormEdit";
+export * from "./FormEditCtas";
+export * from "./FormParameters";
+export * from "./useFormBuilder";
+export * from "./useFormEdit";

packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx

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

packages/react-formio/src/organisms/table/actions/ActionsTable.tsx

@@ -37,7 +37,7 @@ export function ActionsTable({
           data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
-          choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
+          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
           onChange={(name: string, action: string) => setAction(action)}
         />
         <div className={"pl-3"}>

packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx

@@ -1,3 +1,8 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+
 import tailwind from "@tsed/tailwind-formio";
 
 import { FormsTable } from "./FormsTable";

packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx

@@ -1,3 +1,8 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+
 import { useState } from "react";
 
 import { mapPagination } from "../../../utils/mapPagination";