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

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

package/src/{components/modal/removeModal.component.tsx → organisms/modal/RemoveModal.tsx}

@@ -1,9 +1,9 @@
 import classnames from "classnames";
 import { PropsWithChildren, useState } from "react";
 
+import { InputText } from "../../molecules/forms/input-text/InputText";
+import { Modal, ModalProps } from "../../molecules/modal/Modal";
 import { iconClass } from "../../utils/iconClass";
-import { InputText } from "../input-text/inputText.component";
-import { Modal, ModalProps } from "./modal.component";
 
 function RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {
   return (

package/src/{components/actions-table/actionsTable.component.spec.tsx → organisms/table/actions/ActionsTable.spec.tsx}

@@ -1,9 +1,12 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import "../../../molecules/forms/select/all.ts";
+import "../../../molecules/table/all.ts";
+
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import availableActions from "../__fixtures__/form-actions.json";
+import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
-import { ActionsTable } from "./actionsTable.component";
+import { ActionsTable } from "./ActionsTable";
 
 const args: any = {
   data: data,
@@ -42,12 +45,13 @@ describe("ActionsTable", () => {
 
     const btn = screen.getByTestId("action-table-add");
     const cells = screen.getAllByRole("cell");
-    const options = screen.getAllByRole("option");
+    const options = within(screen.getByTestId("action-table-select")).getAllByRole("option");
 
     expect(btn).toHaveProperty("disabled");
     expect(btn.innerHTML).toMatch("Add action");
     expect(cells[0].innerHTML).toMatch("Save Submission");
-    expect(options.length).toEqual(availableActions.length + 1);
+
+    expect(options.length).toEqual(17);
 
     expect(options[0].innerHTML).toMatch("Select an action");
     expect(options[1].innerHTML).toMatch("Webhook (Premium)");
@@ -68,9 +72,9 @@ describe("ActionsTable", () => {
     render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
     const btn = screen.getByTestId("action-table-add");
-    const select = screen.getByRole("combobox");
+    const select = screen.getByTestId("action-table-select");
 
-    await userEvent.selectOptions(select, String(args.availableActions[1].value));
+    await userEvent.selectOptions(select, "sql");
 
     fireEvent.click(btn);
 

package/src/{components/actions-table/actionsTable.stories.tsx → organisms/table/actions/ActionsTable.stories.tsx}

@@ -1,39 +1,37 @@
+import "../../../molecules/forms/select/all.ts";
+import "../../../molecules/table/all.ts";
+
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
-import availableActions from "../__fixtures__/form-actions.json";
+import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
-import { ActionsTable } from "./actionsTable.component";
+import { ActionsTable } from "./ActionsTable";
 
+/**
+ * ```tsx
+ * import {ActionsTable} from "@tsed/react-formio/organisms/table/actions/ActionsTable";
+ * ```
+ */
 export default {
-  title: "ReactFormio/ActionsTable",
+  title: "table/actions/ActionsTable",
   component: ActionsTable,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
-    },
-    isLoading: {
-      control: {
-        type: "boolean"
-      }
-    },
-    disableFilters: {
-      control: {
-        type: "boolean"
-      }
-    },
-    disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "object"
     },
+    // isLoading: {
+    //   control: "boolean"
+    // },
+    // disableFilters: {
+    //   control: "boolean"
+    // },
+    // disablePagination: {
+    //   control: "boolean"
+    // },
     onAddAction: {
       action: "onAddAction"
     }

package/src/{components/actions-table/actionsTable.component.tsx → organisms/table/actions/ActionsTable.tsx}

@@ -1,45 +1,38 @@
+import { ColumnDef } from "@tanstack/react-table";
 import classnames from "classnames";
 import noop from "lodash/noop";
 import { useState } from "react";
 
-import { ActionSchema } from "../../interfaces";
-import { iconClass } from "../../utils/iconClass";
-import { Select } from "../select/select.component";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
+import { ActionType } from "../../../interfaces";
+import { Select } from "../../../molecules/forms/select/Select";
+import { Table, type TableProps } from "../../../molecules/table/Table";
+import { iconClass } from "../../../utils/iconClass";
 
-export type ActionsTableProps = Omit<TableProps<ActionSchema>, "columns"> & {
+export type ActionsTableProps = Omit<TableProps<ActionType>, "columns"> & {
   onAddAction?: (actionName: string) => void;
   availableActions?: { label: string; value: string }[];
 };
 
-export function ActionsTable({
-  disableFilters = true,
-  disablePagination = true,
-  availableActions = [],
-  onAddAction = noop,
-  ...props
-}: ActionsTableProps) {
+export function ActionsTable({ availableActions = [], onAddAction = noop, ...props }: ActionsTableProps) {
   const { i18n = (f: string) => f } = props;
   const [currentAction, setAction] = useState("");
 
-  const columns = [
+  const columns: ColumnDef<ActionType>[] = [
     {
-      Header: i18n("Actions"),
-      accessor: "title",
-      id: "title"
+      header: i18n("Action"),
+      accessorKey: "title"
     }
   ];
 
   return (
-    <Table {...props} disableFilters={disableFilters} disablePagination={disablePagination} columns={columns}>
+    <Table {...props} columns={columns}>
       <div className={"pagination-group"}>
         <Select
           data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
-          choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
-          onChange={(name: string, action: string) => setAction(action)}
+          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
+          onChange={(_, action) => setAction(action)}
         />
         <div className={"pl-3"}>
           <button

package/src/{components/forms-table/formsTable.stories.tsx → organisms/table/forms/FormsTable.stories.tsx}

@@ -1,51 +1,48 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/forms/form-control/FormControl";
+import "../../../molecules/pagination/all";
+import "../../../molecules/table/all";
+
 import tailwind from "@tsed/tailwind-formio";
 
-import { FormsTable } from "./formsTable.component";
+import { FormsTable } from "./FormsTable";
 
+/**
+ *
+ * ```tsx
+ * import {FormsTable} from "@tsed/react-formio/organisms/table/forms/FormsTable";
+ * ```
+ */
 export default {
-  title: "ReactFormio/FormsTable",
+  title: "table/forms/FormsTable",
   component: FormsTable,
   argTypes: {
     icon: {
-      control: {
-        type: "select",
-        options: Object.keys(tailwind.templates.tailwind.ICONS)
-      }
+      control: "select",
+      options: Object.keys(tailwind.templates.tailwind.ICONS)
     },
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     isLoading: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     isEmpty: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disableFilters: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     tags: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {}