@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/{components/form-edit/formEdit.stories.tsx → organisms/form/builder/FormEdit.stories.tsx}

@@ -1,53 +1,105 @@
-import { FormEdit } from "./formEdit.component";
-import { defaultDisplayChoices } from "./formParameters.component";
+import { Meta, StoryObj } from "@storybook/react";
 
+import { FormEdit } from "./all";
+import { defaultDisplayChoices } from "./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: "ReactFormio/FormEdit",
+  title: "form/builder/FormEdit",
   component: FormEdit,
   argTypes: {
     form: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     typeChoices: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     displayChoices: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
-      control: {
-        type: "object"
-      }
+      description:
+        "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
+      control: "object"
     },
     enableTags: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     onSubmit: { action: "onSubmit" },
-    onChange: { action: "onChange" },
-    onCopy: { action: "onCopy" }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
+    onCopy: { action: "onCopy" },
+    onBuilderReady: {
+      description:
+        "A callback function that gets called when the form builder has rendered. It is useful for accessing the underlying @formio/js FormBuilder instance.",
+      action: "onBuilderReady"
+    },
+    onChange: {
+      description: "A callback function that gets called when the form being built has changed.",
+      action: "onChange"
+    },
+    onSaveComponent: {
+      description: "A callback function that gets called when a component is saved in the builder.",
+      action: "onSaveComponent"
+    },
+    onEditComponent: {
+      description: "A callback function that gets called when a component is edited in the builder.",
+      action: "onEditComponent"
+    },
+    onUpdateComponent: {
+      description: "A callback function that gets called when a component is updated in the builder.",
+      action: "onUpdateComponent"
+    },
+    onDeleteComponent: {
+      description: "A callback function that gets called when a component is deleted in the builder.",
+      action: "onDeleteComponent"
+    },
+    layout: {
+      control: "radio",
+      options: ["choicesjs", "react"]
     }
-  }
-};
-
-export const Sandbox = {
-  render: ({ form, typeChoices, displayChoices, enableTags, options }: any) => {
-    return <FormEdit form={form} typeChoices={typeChoices} displayChoices={displayChoices} enableTags={enableTags} options={options} />;
   },
+  parameters: {}
+} satisfies Meta<typeof FormEdit>;
+
+type Story = StoryObj<typeof FormEdit>;
+
+export const EditWebForm: Story = {
   args: {
+    layout: "react",
     typeChoices: [
       { label: "Form", value: "form" },
       { label: "Resources", value: "resource" }
@@ -151,14 +203,11 @@ export const Sandbox = {
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"
-    }
+    } as any
   }
 };
 
-export const WithoutTypeChoices = {
-  render: (args: any) => {
-    return <FormEdit {...args} />;
-  },
+export const WithoutTypeChoices: Story = {
   args: {
     form: {
       type: "form",
@@ -256,17 +305,14 @@ export const WithoutTypeChoices = {
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"
-    },
+    } as any,
     displayChoices: defaultDisplayChoices,
     enableTags: true,
     options: { template: "tailwind", iconset: "bx" }
   }
 };
 
-export const WithoutTags = {
-  render: (args: any) => {
-    return <FormEdit {...args} />;
-  },
+export const WithoutTags: Story = {
   args: {
     form: {
       type: "form",
@@ -364,7 +410,7 @@ export const WithoutTags = {
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"
-    },
+    } as any,
     displayChoices: defaultDisplayChoices,
     enableTags: false,
     options: { template: "tailwind", iconset: "bx" }

package/src/organisms/form/builder/FormEdit.tsx

@@ -0,0 +1,81 @@
+import classnames from "classnames";
+
+import type { FormOptions } from "../../../interfaces";
+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";
+
+export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
+  options?: FormOptions;
+  layout?: "html5" | "choicesjs" | "react";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function FormEdit({
+  form: initialForm,
+  typeChoices,
+  displayChoices,
+  enableTags,
+  onSubmit: initialOnSubmit,
+  onCopy: initialOnCopy,
+  className,
+  style,
+  ...props
+}: FormEditProps) {
+  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({
+    form: initialForm,
+    typeChoices,
+    displayChoices,
+    enableTags,
+    onSubmit: initialOnSubmit,
+    onCopy: initialOnCopy
+  });
+
+  const { options = {} } = props;
+  const FormParameters = getComponent<typeof DefaultFormParameters>("FormParameters");
+  const FormBuilder = getComponent<typeof DefaultFormBuilder>("FormBuilder");
+  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
+
+  return (
+    <div className={classnames("form-edit-container", className)} style={style}>
+      <div className='form-edit'>
+        <FormParameters
+          enableTags={enableTags}
+          typeChoices={typeChoices}
+          displayChoices={displayChoices}
+          key={`form-settings-${form._id}`}
+          form={form}
+          onChange={setChange}
+          layout={props.layout}
+        />
+        <FormEditCTAs
+          key={`form-edit-ctas-${form._id}`}
+          options={options}
+          hasRedo={hasRedo}
+          hasUndo={hasUndo}
+          disabled={!(isValid && hasChanged)}
+          onRedo={redo}
+          onUndo={undo}
+          onReset={reset}
+          onCopy={onCopy}
+          onSubmit={onSubmit}
+        />
+      </div>
+
+      <FormBuilder
+        {...props}
+        key={`form-builder-${form._id}`}
+        components={form.components!}
+        display={form.display}
+        options={options}
+        onChange={(components) => {
+          setChange("components", components);
+        }}
+      />
+    </div>
+  );
+}

package/src/organisms/form/builder/FormEditCtas.tsx

@@ -0,0 +1,97 @@
+import { ReactElement } from "react";
+
+import { Icon as DefaultIcon } from "../../../atoms/icon/Icon";
+import { useTooltip } from "../../../hooks/useTooltip";
+import type { FormOptions } from "../../../interfaces";
+import { Button as DefaultButton } from "../../../molecules/button/Button";
+import { getComponent, registerComponent } from "../../../registries/components";
+
+export interface FormEditCTAsProps extends Record<string, unknown> {
+  saveText?: string;
+  options?: FormOptions;
+  hasUndo?: boolean;
+  hasRedo?: boolean;
+  disabled?: boolean;
+  onCopy?: () => void;
+  onSubmit?: () => void;
+  onReset?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+}
+
+export function FormEditCTAs({
+  saveText = "Save",
+  disabled,
+  options = {},
+  onCopy,
+  hasUndo,
+  hasRedo,
+  onUndo,
+  onRedo,
+  onReset,
+  onSubmit
+}: FormEditCTAsProps): ReactElement {
+  const { i18n: t = (t: string): string => t } = options;
+
+  const copyTooltipRef: any = useTooltip({
+    trigger: "hover",
+    placement: "top",
+    title: t("Copy")
+  });
+
+  const undoTooltipRef: any = useTooltip({
+    trigger: "hover",
+    placement: "top",
+    title: t("Undo last change")
+  });
+
+  const redoTooltipRef: any = useTooltip({
+    trigger: "hover",
+    placement: "top",
+    title: t("Redo last change")
+  });
+
+  const resetTooltipRef: any = useTooltip({
+    trigger: "hover",
+    placement: "top",
+    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 variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>
+          <Icon name='save' iconset={options.iconset} />
+          {saveText}
+        </Button>
+
+        <div>
+          <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>
+            <Icon name='undo' iconset={options.iconset} />
+          </Button>
+
+          <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>
+            <Icon name='redo' iconset={options.iconset} />
+          </Button>
+        </div>
+
+        <div>
+          {onCopy && (
+            <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>
+              <Icon name='copy' iconset={options.iconset} />
+            </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);

package/src/{components/form-edit/formParameters.component.tsx → organisms/form/builder/FormParameters.tsx}

@@ -1,10 +1,10 @@
-import PropTypes from "prop-types";
 import { ReactElement } from "react";
 
-import { FormSchema } from "../../interfaces/FormSchema";
-import { InputTags } from "../input-tags/inputTags.component";
-import { InputText } from "../input-text/inputText.component";
-import { Select } from "../select/select.component";
+import type { FormType } from "../../../interfaces";
+import { InputTags as DefaultInputTags } from "../../../molecules/forms/input-tags/InputTags";
+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" },
@@ -13,13 +13,14 @@ export const defaultDisplayChoices = [
 ];
 
 export interface FormParametersProps {
-  onChange?: (name: string, value: any) => void;
-  form: Partial<FormSchema>;
+  onChange?: (name: string | undefined, value: any) => void;
+  form: Partial<FormType>;
   typeChoices?: { label: string; value: any }[];
   displayChoices?: { label: string; value: any }[];
   enableTags?: boolean;
   className?: string;
   baseUrl?: string;
+  layout?: "html5" | "choicesjs" | "react";
   readonly?: Record<string, boolean>;
 }
 
@@ -31,35 +32,40 @@ export function FormParameters({
   displayChoices = defaultDisplayChoices,
   className = "",
   readonly = {},
+  layout,
   baseUrl = window.location.origin
 }: FormParametersProps): ReactElement {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
 
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const Select = getComponent<typeof DefaultSelect>("Select");
+  const InputTags = getComponent<typeof DefaultInputTags>("InputTags");
+
   return (
     <div className={`form-edit__settings ${className}`}>
-      <div className={"w-1/3"}>
+      <div>
         <InputText
           label={"Title"}
           placeholder='Enter the form title'
           name={"title"}
           required={true}
           value={form.title}
-          disabled={!!readonly["title"]}
+          disabled={readonly["title"]}
           onChange={onChange}
         />
       </div>
-      <div className={"w-1/3"}>
+      <div>
         <InputText
           label={"Name"}
           placeholder='Enter the form machine name'
           name={"name"}
           required={true}
-          disabled={!!readonly["name"]}
+          disabled={readonly["name"]}
           value={form.name}
           onChange={onChange}
         />
       </div>
-      <div className={"w-1/3"}>
+      <div>
         <InputText
           label={"Path"}
           placeholder='example'
@@ -73,40 +79,34 @@ export function FormParameters({
           }
           required={true}
           value={form.path}
-          disabled={!!readonly["path"]}
+          disabled={readonly["path"]}
           style={{ textTransform: "lowercase", width: "120px" }}
           onChange={onChange}
         />
       </div>
-      <div className={"w-1/3"}>
+      <div>
         <Select
+          layout={layout}
           label={"Display as"}
           name={"display"}
-          disabled={!!readonly["display"]}
+          disabled={readonly["display"]}
           value={form.display}
-          choices={displayChoices}
+          options={displayChoices}
           onChange={onChange}
         />
       </div>
       {hasTypeChoices && (
-        <div className={"w-1/3"}>
-          <Select label={"Type"} name={"type"} value={form.type} choices={typeChoices} onChange={onChange} />
+        <div>
+          <Select layout={layout} label={"Type"} name={"type"} value={form.type} options={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
-        <div className={"w-1/3"}>
-          <InputTags label={"Tags"} name={"tags"} value={form.tags} onChange={onChange} />
+        <div>
+          <InputTags layout={layout} label={"Tags"} name={"tags"} value={form.tags} onChange={onChange} />
         </div>
       )}
     </div>
   );
 }
 
-FormParameters.propTypes = {
-  onChange: PropTypes.func,
-  form: PropTypes.object,
-  enableTags: PropTypes.bool,
-  typeChoices: PropTypes.array,
-  displayChoices: PropTypes.array,
-  className: PropTypes.string
-};
+registerComponent("FormParameters", FormParameters);

package/src/organisms/form/builder/all.ts

@@ -0,0 +1,17 @@
+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/select/components/ChoicesSelect";
+import "../../../molecules/forms/select/components/ReactSelect";
+import "../../../molecules/forms/input-tags/InputTags";
+import "../../../molecules/forms/input-tags/components/ReactTags";
+import "../../../molecules/forms/input-tags/components/ChoicesTags";
+
+export * from "./FormBuilder";
+export * from "./FormEdit";
+export * from "./FormEditCtas";
+export * from "./FormParameters";
+export * from "./useFormBuilder";
+export * from "./useFormEdit";

package/src/organisms/form/builder/useFormBuilder.ts

@@ -0,0 +1,143 @@
+import { FormBuilder as FormioFormBuilder } from "formiojs";
+import cloneDeep from "lodash/cloneDeep";
+import { useEffect, useRef, useState } from "react";
+
+import type { ComponentType, FormOptions, FormType } from "../../../interfaces";
+
+interface BuilderConstructor {
+  new (element: HTMLDivElement, form: FormType, options: FormOptions): FormioFormBuilder;
+}
+
+const EVENTS = [
+  "addComponent",
+  "updateComponent",
+  "removeComponent",
+  "saveComponent",
+  "cancelComponent",
+  "moveComponent",
+  "editComponent",
+  "editJson",
+  "copyComponent",
+  "pasteComponent"
+];
+
+const EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
+
+async function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<FormioFormBuilder> {
+  const form = {
+    display,
+    components: [...components]
+  };
+
+  const builder = await new FormioFormBuilder(el, form, { ...options }).ready;
+
+  const handleEvent = (event: string) => {
+    return (...args: any[]) => {
+      events[event] && events[event](...args);
+
+      if (EVENTS_CHANGE.includes(event)) {
+        onChange(builder.form.components);
+      }
+    };
+  };
+
+  EVENTS.forEach((event) => builder.on(event, handleEvent(event)));
+
+  return builder;
+}
+export interface FormBuilderEvents {
+  onAddComponent?: Function;
+  onRemoveComponent?: Function;
+  onCancelComponent?: Function;
+  onMoveComponent?: Function;
+  onEditJson?: Function;
+  onCopyComponent?: Function;
+  onPasteComponent?: Function;
+  onBuilderReady?: (builder: FormioFormBuilder) => void;
+  onChange?: (components: ComponentType[]) => void;
+  onSaveComponent?: (
+    component: ComponentType,
+    original: ComponentType,
+    parent: ComponentType,
+    path: string,
+    index: number,
+    isNew: boolean,
+    originalComponentSchema: ComponentType
+  ) => void;
+  onEditComponent?: (component: ComponentType) => void;
+  onUpdateComponent?: (component: ComponentType) => void;
+  onDeleteComponent?: (component: ComponentType, parent: ComponentType, path: string, index: number) => void;
+}
+
+export interface UseFormBuilderProps extends FormBuilderEvents {
+  Builder?: BuilderConstructor;
+  components: ComponentType[];
+  display?: string;
+  options?: FormOptions;
+}
+
+export function useFormBuilder({ components, display, options = {}, onBuilderReady, onChange, ...props }: UseFormBuilderProps) {
+  const renderElement = useRef<HTMLDivElement>(null);
+  const builderRef = useRef<FormioFormBuilder | null>(null);
+  const [currentComponents, setCurrentComponents] = useState<ComponentType[]>(cloneDeep(components));
+  const events = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("on")));
+
+  useEffect(() => {
+    async function initializeBuilder() {
+      if (!renderElement.current) {
+        console.warn("FormBuilder render element not found, cannot render builder.");
+        return;
+      }
+
+      builderRef.current = await createBuilder(renderElement.current.firstChild as Element, {
+        display,
+        options: { ...options },
+        components: cloneDeep(components),
+        onChange: handleComponentsChange,
+        events
+      });
+
+      onBuilderReady && onBuilderReady(builderRef.current);
+    }
+
+    initializeBuilder().catch((er) => {
+      console.error(er);
+    });
+
+    return () => {
+      builderRef.current?.destroy();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (builderRef.current) {
+      if (display !== builderRef.current.form.display) {
+        createBuilder(renderElement.current!.firstChild as Element, {
+          display,
+          options: { ...options },
+          components: cloneDeep(components),
+          onChange: handleComponentsChange,
+          events
+        })
+          .then((builder) => {
+            builderRef.current = builder;
+            onBuilderReady && onBuilderReady(builderRef.current);
+          })
+          .catch((er) => {
+            console.error(er);
+          });
+      } else if (components !== currentComponents) {
+        builderRef.current.form = {
+          display,
+          components
+        };
+      }
+    }
+  }, [display, components]);
+
+  const handleComponentsChange = (newComponents: ComponentType[]) => {
+    setCurrentComponents(newComponents);
+    onChange && onChange(newComponents);
+  };
+  return renderElement;
+}