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

package/src/{components/form-edit/useFormEdit.hook.ts → organisms/form/builder/useFormEdit.ts}

@@ -1,16 +1,16 @@
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect, useReducer } from "react";
 
-import { FormSchema } from "../../interfaces/FormSchema";
-import { createInitialState, hasChanged, reducer } from "./formEdit.reducer";
+import type { FormType } from "../../../interfaces";
+import { createInitialState, hasChanged, reducer } from "./FormEdit.reducer";
 
 export interface UseFormEditHookProps extends Record<string, unknown> {
-  form?: Partial<FormSchema>;
+  form?: Partial<FormType>;
   typeChoices?: { label: string; value: any }[];
   displayChoices?: { label: string; value: any }[];
   enableTags?: boolean;
-  onSubmit?: (form: Partial<FormSchema>) => void;
-  onCopy?: (form: Partial<FormSchema>) => void;
+  onSubmit?: (form: Partial<FormType>) => void;
+  onCopy?: (form: Partial<FormType>) => void;
 }
 
 export function useFormEdit(props: UseFormEditHookProps) {
@@ -28,12 +28,12 @@ export function useFormEdit(props: UseFormEditHookProps) {
   };
 
   useEffect(() => {
-    if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {
+    if (props.form && (current?._id !== props.form._id || current.modified !== props.form.modified)) {
       dispatchFormAction({ type: "replaceForm", value: props.form });
     }
   }, [props.form]);
 
-  const formChange = (newForm: Partial<FormSchema>) => {
+  const formChange = (newForm: Partial<FormType>) => {
     if (hasChanged(current, { ...current, ...newForm })) {
       dispatchFormAction({ type: "formChange", value: newForm });
     }
@@ -43,8 +43,8 @@ export function useFormEdit(props: UseFormEditHookProps) {
   const undo = () => dispatchFormAction({ type: "undo" });
   const reset = () => dispatchFormAction({ type: "reset" });
 
-  const setChange = (path: string, value: any) => {
-    formChange({ ...current, [path]: value });
+  const setChange = (path: string | undefined, value: any) => {
+    formChange({ ...current, [path!]: value });
   };
 
   return {

package/src/organisms/form/exports/FormExport.stories.tsx

@@ -0,0 +1,71 @@
+import "../../../molecules/card/Card.js";
+import "../../../atoms/icon/Icon.js";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import { FormExport } from "./FormExport.js";
+
+/**
+ * FormExport component displays options to export form schema and submissions
+ */
+export default {
+  title: "form/export/FormExport",
+  component: FormExport,
+  argTypes: {
+    i18n: {
+      description: "Internationalization function"
+    },
+    onClick: {
+      action: "clicked",
+      description: "Callback when an export button is clicked"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Component that displays options to export form schema as JSON and form submissions as JSON or CSV."
+      }
+    }
+  }
+} satisfies Meta<typeof FormExport>;
+
+type Story = StoryObj<typeof FormExport>;
+
+/**
+ * Default view with form type set to "form"
+ */
+export const Usage: Story = {
+  args: {
+    i18n: (key: string) => key,
+    onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
+  }
+};
+
+/**
+ * View with form type set to "resource"
+ */
+export const Resource: Story = {
+  args: {
+    i18n: (key: string) => key,
+    onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
+  }
+};
+
+/**
+ * View with custom i18n function
+ */
+export const Translated: Story = {
+  args: {
+    i18n: (key: string) => {
+      const translations: Record<string, string> = {
+        "Export schema": "Exporter le schéma",
+        "Export the formIO schema:": "Exporter le schéma formIO :",
+        Json: "Json",
+        Csv: "Csv",
+        "Export form submissions": "Exporter les soumissions du formulaire"
+      };
+      return translations[key] || key;
+    },
+    onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
+  }
+};

package/src/organisms/form/exports/FormExport.tsx

@@ -0,0 +1,58 @@
+import { Icon } from "../../../atoms/icon/Icon.js";
+import type { Card } from "../../../molecules/card/Card.js";
+import { getComponent } from "../../../registries/components.js";
+
+export interface FormExportProps {
+  i18n?: (key: string) => string;
+  onClick?: (action: "export:form" | "export:submissions", format: "json" | "csv") => void;
+}
+
+export function FormExport({ i18n = (f: string) => f, onClick }: FormExportProps) {
+  const FCard = getComponent<typeof Card>("Card");
+
+  return (
+    <div>
+      <div className={"flex gap-3"}>
+        <div className={"sm:w-1/2"}>
+          <FCard
+            label={
+              (
+                <span className={"flex items-center"}>
+                  <Icon name={"detail"} className={"mr-1 text-secondary"} /> {i18n(`Export schema`)}
+                </span>
+              ) as any
+            }
+          >
+            <p className={"mb-5"}>{i18n("Export the formIO schema:")}</p>
+            <div className={"flex items-center justify-center"}>
+              <button className={"btn btn-primary"} onClick={() => onClick?.("export:form", "json")}>
+                <Icon name={"code"} className={"mr-1"} /> {i18n(`Json`)}
+              </button>
+            </div>
+          </FCard>
+        </div>
+        <div className={"sm:w-1/2"}>
+          <FCard
+            label={
+              (
+                <span className={"flex items-center"}>
+                  <Icon name={"data"} className={"mr-1 text-secondary"} /> {i18n(`Export submissions`)}
+                </span>
+              ) as any
+            }
+          >
+            <p className={"mb-5"}>{i18n("Export all submission as JSON or CSV:")}</p>
+            <div className={"flex items-center justify-center"}>
+              <button className={"btn btn-primary mr-4"} onClick={() => onClick?.("export:submissions", "json")}>
+                <Icon name={"code"} className={"mr-1"} /> {i18n(`Json`)}
+              </button>
+              <button className={"btn btn-primary"} onClick={() => onClick?.("export:submissions", "csv")}>
+                <Icon name={"spreadsheet"} className={"mr-1"} /> {i18n(`Csv`)}
+              </button>
+            </div>
+          </FCard>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/organisms/form/preview/FormPreview.stories.tsx

@@ -0,0 +1,61 @@
+import "../../../molecules/card/Card.js";
+import "../Form.js";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import formFirstname from "../../__fixtures__/form-firstname.fixture.json";
+import { FormPreview } from "./FormPreview.js";
+
+/**
+ * FormPreview component displays a form preview inside a card with a background
+ */
+export default {
+  title: "form/preview/FormPreview",
+  component: FormPreview,
+  argTypes: {
+    form: {
+      description: "The form object to preview",
+      control: "object"
+    },
+    i18n: {
+      description: "Internationalization function"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Component that displays a form preview inside a card with a background."
+      }
+    }
+  }
+} satisfies Meta<typeof FormPreview>;
+
+type Story = StoryObj<typeof FormPreview>;
+
+/**
+ * Basic form preview with a simple form
+ */
+export const Usage: Story = {
+  args: {
+    form: formFirstname as any,
+    i18n: (key: string) => key
+  }
+};
+
+/**
+ * Form preview with custom translations
+ */
+export const Translated: Story = {
+  args: {
+    form: formFirstname as any,
+    i18n: (key: string) => {
+      const translations: Record<string, string> = {
+        "Form with First Name": "Formulaire avec prénom",
+        "First name": "Prénom",
+        "Last name": "Nom de famille",
+        Submit: "Soumettre"
+      };
+      return translations[key] || key;
+    }
+  }
+};

package/src/organisms/form/preview/FormPreview.tsx

@@ -0,0 +1,21 @@
+import type { FormType } from "../../../interfaces/index.js";
+import type { Card } from "../../../molecules/card/Card.js";
+import { getComponent } from "../../../registries/components.js";
+import { Form } from "../Form.js";
+
+export interface FormPreviewProps {
+  form: FormType;
+  i18n?: (key: string) => string;
+}
+
+export function FormPreview({ form, i18n = (f) => f }: FormPreviewProps) {
+  const FCard = getComponent<typeof Card>("Card");
+
+  return (
+    <div className='p-10 bg-gray-500'>
+      <FCard label={i18n(form.title || "")} className={"shadow"}>
+        <Form form={form} options={{ i18n }} />
+      </FCard>
+    </div>
+  );
+}

package/src/{components/form-settings/formSettings.component.spec.tsx → organisms/form/settings/FormSettings.component.spec.tsx}

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { FormSettings } from "./formSettings.component";
-import { Sandbox } from "./formSettings.stories";
+import { FormSettings } from "./FormSettings";
+import { Sandbox } from "./FormSettings.stories";
 
 describe("FormSettings", () => {
   it("should render form settings", () => {

package/src/{components/form-settings/formSettings.schema.ts → organisms/form/settings/FormSettings.schema.ts}

@@ -1,6 +1,6 @@
-import { FormSchema } from "../../interfaces";
+import type { FormType } from "../../../interfaces";
 
-export function getFormSettingsSchema(): FormSchema {
+export function getFormSettingsSchema(): FormType {
   return {
     type: "form",
     tags: [],

package/src/{components/form-settings/formSettings.stories.tsx → organisms/form/settings/FormSettings.stories.tsx}

@@ -1,19 +1,21 @@
-import { FormSettings } from "./formSettings.component";
+import { FormSettings } from "./FormSettings";
 
+/**
+ *
+ * ```tsx
+ * import {FormSettings} from "@tsed/react-formio/organisms/form/settings/FormSettings";
+ * ```
+ */
 export default {
-  title: "ReactFormio/FormSettings",
+  title: "form/settings/FormSettings",
   component: FormSettings,
   argTypes: {
     onSubmit: { action: "onSubmit" },
     actionInfo: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {

package/src/{components/form-settings/formSettings.component.tsx → organisms/form/settings/FormSettings.tsx}

@@ -2,14 +2,13 @@ import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
 import { useEffect, useState } from "react";
 
-import { FormOptions, FormSchema } from "../../interfaces";
-import { Form } from "../form/form.component";
-import { ChangedSubmission } from "../form/useForm.hook";
-import { getFormSettingsSchema } from "./formSettings.schema";
-import { FormSettingsSchema, formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
+import type { ChangedSubmission, FormOptions, FormType } from "../../../interfaces";
+import { Form } from "../../form/Form";
+import { getFormSettingsSchema } from "./FormSettings.schema";
+import { formSettingsToSubmission, FormSettingsType, submissionToFormSettings } from "./FormSettings.utils";
 
 export interface FormSettingsProps {
-  form: Partial<FormSchema>;
+  form: Partial<FormType>;
   onSubmit?: Function;
   options?: FormOptions;
 }
@@ -19,7 +18,7 @@ function useFormSettings({ form: formDefinition, onSubmit = noop, options }: For
   const [isValid, setIsValid] = useState(true);
   const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));
 
-  const onChange = ({ data, isValid }: ChangedSubmission<FormSettingsSchema>) => {
+  const onChange = ({ data, isValid }: ChangedSubmission<FormSettingsType>) => {
     if (isValid) {
       setSubmission({ data });
     }
@@ -54,7 +53,7 @@ export function FormSettings(props: FormSettingsProps) {
 
   return (
     <div>
-      <Form form={form} submission={submission} onChange={onChange} options={options} />
+      <Form<FormSettingsType> form={form} submission={submission} onChange={onChange} options={options} />
 
       <button data-testid='submit' disabled={!isValid} className={"mt-5 btn btn-primary"} onClick={onSubmit} type={"submit"}>
         {i18n("Save settings")}

package/src/{components/form-settings/formSettings.utils.spec.ts → organisms/form/settings/FormSettings.utils.spec.ts}

@@ -1,4 +1,4 @@
-import { formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
+import { formSettingsToSubmission, submissionToFormSettings } from "./FormSettings.utils";
 
 describe("FormSettings utils", () => {
   describe("submissionToDataSettings()", () => {

package/src/{components/form-settings/formSettings.utils.ts → organisms/form/settings/FormSettings.utils.ts}

@@ -1,14 +1,14 @@
 import cloneDeep from "lodash/cloneDeep";
 
-import { FormSchema, Submission } from "../../interfaces";
+import { FormType, SubmissionType } from "../../../interfaces";
 
-export type FormSettingsSchema = {
+export type FormSettingsType = {
   action: string;
   tags: string[];
   properties: Record<string, any>;
 };
 
-export function formSettingsToSubmission(form: Partial<FormSchema>): Submission<FormSettingsSchema> {
+export function formSettingsToSubmission(form: Partial<FormType>): SubmissionType<FormSettingsType> {
   return {
     data: {
       action: form.action!,
@@ -18,7 +18,7 @@ export function formSettingsToSubmission(form: Partial<FormSchema>): Submission<
   };
 }
 
-export function submissionToFormSettings(form: Partial<FormSchema>, submission: Submission<FormSettingsSchema>): Partial<FormSchema> {
+export function submissionToFormSettings(form: Partial<FormType>, submission: SubmissionType<FormSettingsType>): Partial<FormType> {
   return {
     ...cloneDeep(form),
     tags: submission.data.tags,

package/src/organisms/form/types.ts

@@ -0,0 +1,8 @@
+import { ComponentType, JSON, SubmissionType } from "../../interfaces";
+
+export interface FormPageChangeProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
+  page: number;
+  submission: SubmissionType<Data>;
+}
+
+export type FormCustomEvent = { type: string; event: string; component: ComponentType; data: any };

package/src/organisms/form/useForm.ts

@@ -0,0 +1,223 @@
+import { EventEmitter2 } from "eventemitter2";
+import { Form } from "formiojs";
+import { type MutableRefObject, useEffect, useRef, useState } from "react";
+
+import type { ChangedSubmission, ComponentType, FormOptions, FormType, JSON, SubmissionType } from "../../interfaces";
+import { FormCustomEvent } from "./types";
+
+type Webform = any;
+type EventError = string | Error | Error[] | { message: string } | { message: string }[];
+
+export interface UseFormProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
+  src?: string;
+  url?: string;
+  form?: FormType;
+  submission?: SubmissionType<Data>;
+  // TODO: once events is typed correctly in @formio/js options, we can remove this override
+  options?: FormOptions;
+  FormClass?: any;
+  onFormReady?: (instance: Webform) => void;
+  onPrevPage?: (page: number, submission: SubmissionType<Data>) => void;
+  onNextPage?: (page: number, submission: SubmissionType<Data>) => void;
+  onCancelSubmit?: () => void;
+  onCancelComponent?: (component: ComponentType) => void;
+  onChange?: (value: ChangedSubmission<Data>, flags: any, modified: boolean) => void;
+  onCustomEvent?: (event: FormCustomEvent) => void;
+  onComponentChange?: (changed: { instance: Webform; component: Webform; value: any; flags: any }) => void;
+  onSubmit?: (submission: SubmissionType<Data>, saved?: boolean) => void;
+  onAsyncSubmit?: (submission: SubmissionType<Data>) => void;
+  onSubmitDone?: (submission: SubmissionType<Data>) => void;
+  onSubmitError?: (error: EventError) => void;
+  onFormLoad?: (form: JSON) => void;
+  onError?: (error: EventError | false) => void;
+  onRender?: (param: any) => void;
+  onAttach?: (param: any) => void;
+  onBuild?: (param: any) => void;
+  onFocus?: (instance: Webform) => void;
+  onBlur?: (instance: Webform) => void;
+  onInitialized?: () => void;
+  onLanguageChanged?: () => void;
+  onBeforeSetSubmission?: (submission: SubmissionType<Data>) => void;
+  onSaveDraftBegin?: () => void;
+  onSaveDraft?: (submission: SubmissionType<Data>) => void;
+  onRestoreDraft?: (submission: SubmissionType<Data> | null) => void;
+  onSubmissionDeleted?: (submission: SubmissionType<Data>) => void;
+  onRequestDone?: () => void;
+  otherEvents?: {
+    [event: string]: (...args: any[]) => void;
+  };
+}
+
+const getDefaultEmitter = () => {
+  return new EventEmitter2({
+    wildcard: false,
+    maxListeners: 0
+  });
+};
+
+function onAnyEvent<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(
+  handlers: Omit<UseFormProps<Data>, "src" | "url" | "form" | "submission" | "options" | "formReady" | "formioform" | "Formio">,
+  ...args: [string, ...any[]]
+) {
+  const [event, ...outputArgs] = args;
+
+  if (event.startsWith("formio.")) {
+    const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
+
+    if (funcName in handlers) {
+      (handlers as any)[funcName](...outputArgs);
+    }
+  }
+  if (handlers.otherEvents && handlers.otherEvents[event]) {
+    handlers.otherEvents[event](...outputArgs);
+  }
+}
+
+const createWebformInstance = async (
+  FormConstructor: any | undefined,
+  formSource: any,
+  element: HTMLDivElement,
+  options: FormOptions = {}
+) => {
+  if (!options?.events) {
+    options.events = getDefaultEmitter();
+  }
+
+  if (typeof formSource !== "string") {
+    formSource = structuredClone(formSource);
+  }
+
+  const promise = new FormConstructor(element, formSource, options);
+  const webform = await promise.ready;
+
+  webform.toJSON = () => ({ __WEBFORM__: true });
+
+  return webform;
+};
+
+// Define effective props (aka I want to rename these props but also maintain backwards compatibility)
+function getEffectiveProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseFormProps<Data>) {
+  const { FormClass = Form, form, src, url, options, submission, onFormReady, onAsyncSubmit, ...handlers } = props;
+
+  return {
+    FormClass,
+    formSource: form !== undefined ? form : src,
+    handlers,
+    options,
+    url,
+    submission,
+    onFormReady,
+    onAsyncSubmit
+  };
+}
+
+function createCustomValidation(customAction: any, ref: MutableRefObject<Webform | null>) {
+  return async (submission: SubmissionType, next: (error: null | Error) => void) => {
+    try {
+      const updatedSubmission = await customAction(submission);
+
+      next(null);
+
+      ref.current.onSubmit(updatedSubmission, true);
+    } catch (er: any) {
+      next(er.errors || er);
+    } finally {
+      ref.current.submissionInProcess = false;
+    }
+  };
+}
+
+export function useForm<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseFormProps<Data>) {
+  const webformRef = useRef<Webform | null>(null);
+  const renderElement = useRef<HTMLDivElement | null>(null);
+  const { formSource, FormClass, options, url, submission, handlers, onFormReady, onAsyncSubmit } = getEffectiveProps(props);
+
+  const [instanceIsReady, setInstanceIsReady] = useState(false);
+
+  useEffect(() => {
+    let ignore = false;
+    const createInstance = async () => {
+      if (renderElement.current === null) {
+        console.warn("Form element not found");
+        return;
+      }
+
+      if (typeof formSource === "undefined") {
+        console.warn("Form source not found");
+        return;
+      }
+
+      let opts = options || {};
+
+      if (onAsyncSubmit) {
+        opts.hooks = opts.hooks || {};
+        opts.hooks.customValidation = createCustomValidation(props.onAsyncSubmit, webformRef);
+      }
+
+      const webform = await createWebformInstance(FormClass, formSource, renderElement.current, options);
+
+      if (webform) {
+        if (ignore) {
+          webform.destroy(true);
+          return;
+        }
+
+        if (typeof formSource === "string") {
+          webform.src = formSource;
+        } else if (typeof formSource === "object") {
+          if (submission) {
+            webform.setSubmission(submission);
+          }
+
+          if (url) {
+            webform.url = url;
+          }
+        }
+
+        if (onFormReady) {
+          onFormReady(webform);
+        }
+
+        renderElement.current.className = "formio-form-ready";
+        webformRef.current = webform;
+        setInstanceIsReady(true);
+      } else {
+        console.warn("Failed to create form instance");
+      }
+    };
+
+    createInstance();
+
+    return () => {
+      ignore = true;
+      if (webformRef.current) {
+        webformRef.current.destroy(true);
+      }
+    };
+  }, [formSource, url]);
+
+  useEffect(() => {
+    if (instanceIsReady && webformRef.current && Object.keys(handlers).length > 0) {
+      webformRef.current.onAny((...args: [string, ...any[]]) => {
+        instanceIsReady && onAnyEvent(handlers, ...args);
+      });
+    }
+
+    return () => {
+      if (instanceIsReady && webformRef.current && Object.keys(handlers).length > 0) {
+        webformRef.current.offAny((...args: [string, ...any[]]) => onAnyEvent(handlers, ...args));
+      }
+    };
+  }, [instanceIsReady, handlers]);
+
+  useEffect(() => {
+    if (instanceIsReady && webformRef.current && submission) {
+      webformRef.current.setSubmission(submission);
+    }
+  }, [instanceIsReady, submission]);
+
+  return {
+    element: renderElement,
+    instance: webformRef.current
+  };
+}

package/src/organisms/modal/RemoveModal.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { useModal } from "../../molecules/modal/Modal";
+import { RemoveModal, RemoveModalProps } from "./RemoveModal";
+
+/**
+ * Remove modal display a danger message and ask user to confirm action before executing the action.
+ *
+ * ```tsx
+ * import {RemoveModal} from "@tsed/react-formio/organisms/modal/RemoveModal";
+ * ```
+ */
+export default {
+  title: "model/RemoveModal",
+  component: RemoveModal,
+  argTypes: {
+    onSubmit: {
+      title: {
+        control: "text"
+      },
+      control: {
+        action: "onSubmit"
+      }
+    }
+  },
+  parameters: {},
+  render: (args: RemoveModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <RemoveModal
+          {...args}
+          i18n={(f) => f}
+          show={modal.show}
+          onSubmit={modal.closeModal}
+          onClose={modal.closeModal}
+          closeModal={modal.closeModal}
+        />
+      </div>
+    );
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof RemoveModal>;
+
+type Story = StoryObj<typeof RemoveModal>;
+
+export const Usage: Story = {
+  args: {
+    valueToCompare: "value",
+    itemType: "form"
+  }
+};