@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/organisms/form/actions/FormAction.stories.tsx

@@ -0,0 +1,426 @@
+import "../../../molecules/card/Card.js";
+import "../Form.js";
+
+import { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FormAction } from "./FormAction.js";
+
+/**
+ * FormAction component displays a form for configuring form action
+ *
+ * ```tsx
+ *  import {FormAction} from "@tsed/react-formio/organisms/form/action/FormAction";
+ * ```
+ */
+export default {
+  title: "form/action/FormAction",
+  component: FormAction,
+  argTypes: {
+    actionInfo: {
+      description: "Information about the action including defaults and settings form",
+      control: "object"
+    },
+    submission: {
+      description: "Submission data to fill the form",
+      control: "object"
+    },
+    onSubmit: {
+      action: "onSubmit",
+      description: "Callback when the form is submitted"
+    },
+    options: {
+      description: "Form options",
+      control: "object"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Component that displays a form for configuring form actions such as save, email, webhook, etc."
+      }
+    }
+  }
+} satisfies Meta<typeof FormAction>;
+
+type Story = StoryObj<typeof FormAction>;
+
+/**
+ * Basic save action configuration
+ */
+export const SaveAction: Story = {
+  args: {
+    actionInfo: {
+      name: "save",
+      title: "Save Submission",
+      description: "Saves the submission into the database.",
+      priority: 10,
+      defaults: {
+        handler: ["before"],
+        method: ["create", "update"],
+        priority: 10,
+        name: "save",
+        title: "Save Submission"
+      },
+      access: {
+        handler: false,
+        method: false
+      },
+      settingsForm: {
+        components: [
+          {
+            type: "hidden",
+            input: true,
+            key: "priority"
+          },
+          {
+            type: "hidden",
+            input: true,
+            key: "name"
+          },
+          {
+            type: "textfield",
+            input: true,
+            label: "Title",
+            key: "title"
+          },
+          {
+            type: "fieldset",
+            input: false,
+            tree: true,
+            legend: "Action Settings",
+            key: "settings",
+            components: [
+              {
+                input: false,
+                type: "container",
+                key: "settings",
+                components: [
+                  {
+                    type: "resourcefields",
+                    key: "resource",
+                    title: "Save submission to",
+                    placeholder: "This form",
+                    basePath: "/project/5d0797bc872fc7d140559857/form",
+                    form: "62b18b10fbbba513555c6c5e",
+                    required: false,
+                    input: true
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            input: false,
+            tree: false,
+            key: "conditions",
+            legend: "Action Execution",
+            components: [
+              {
+                type: "select",
+                input: true,
+                key: "handler",
+                label: "Handler",
+                placeholder: "Select which handler(s) you would like to trigger",
+                dataSrc: "json",
+                data: {
+                  json: '[{"name":"before","title":"Before"},{"name":"after","title":"After"}]'
+                },
+                template: "<span>{{ item.title }}</span>",
+                valueProperty: "name",
+                multiple: true
+              },
+              {
+                type: "select",
+                input: true,
+                label: "Methods",
+                key: "method",
+                placeholder: "Trigger action on method(s)",
+                dataSrc: "json",
+                data: {
+                  json: '[{"name":"create","title":"Create"},{"name":"update","title":"Update"},{"name":"read","title":"Read"},{"name":"delete","title":"Delete"},{"name":"index","title":"Index"}]'
+                },
+                template: "<span>{{ item.title }}</span>",
+                valueProperty: "name",
+                multiple: true
+              }
+            ]
+          },
+          {
+            type: "button",
+            input: true,
+            label: "Save Action",
+            key: "submit",
+            size: "md",
+            action: "submit",
+            disableOnInvalid: true,
+            theme: "primary"
+          }
+        ]
+      }
+    },
+    options: { template: "tailwind", iconset: "lu" }
+  }
+};
+
+/**
+ * Email action configuration
+ */
+export const EmailAction: Story = {
+  args: {
+    actionInfo: {
+      name: "email",
+      title: "Email",
+      description: "Sends an email when a form is submitted.",
+      priority: 0,
+      defaults: {
+        handler: ["after"],
+        method: ["create"],
+        priority: 0,
+        name: "email",
+        title: "Email"
+      },
+      access: {
+        handler: false,
+        method: false
+      },
+      settingsForm: {
+        components: [
+          {
+            type: "hidden",
+            input: true,
+            key: "priority"
+          },
+          {
+            type: "hidden",
+            input: true,
+            key: "name"
+          },
+          {
+            type: "textfield",
+            input: true,
+            label: "Title",
+            key: "title"
+          },
+          {
+            type: "fieldset",
+            input: false,
+            tree: true,
+            legend: "Email Settings",
+            key: "settings",
+            components: [
+              {
+                type: "textfield",
+                input: true,
+                label: "From",
+                key: "from",
+                placeholder: "no-reply@example.com",
+                defaultValue: "no-reply@example.com",
+                multiple: false
+              },
+              {
+                type: "textfield",
+                input: true,
+                label: "To",
+                key: "to",
+                placeholder: "user@example.com",
+                multiple: true
+              },
+              {
+                type: "textfield",
+                input: true,
+                label: "Subject",
+                key: "subject",
+                placeholder: "New submission for {{ form.title }}",
+                defaultValue: "New submission for {{ form.title }}"
+              },
+              {
+                type: "textarea",
+                input: true,
+                label: "Message",
+                key: "message",
+                placeholder: "{{ submission.data }}",
+                defaultValue: "{{ submission.data }}",
+                rows: 5
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            input: false,
+            tree: false,
+            key: "conditions",
+            legend: "Action Execution",
+            components: [
+              {
+                type: "select",
+                input: true,
+                key: "handler",
+                label: "Handler",
+                placeholder: "Select which handler(s) you would like to trigger",
+                dataSrc: "json",
+                data: {
+                  json: '[{"name":"before","title":"Before"},{"name":"after","title":"After"}]'
+                },
+                template: "<span>{{ item.title }}</span>",
+                valueProperty: "name",
+                multiple: true
+              },
+              {
+                type: "select",
+                input: true,
+                label: "Methods",
+                key: "method",
+                placeholder: "Trigger action on method(s)",
+                dataSrc: "json",
+                data: {
+                  json: '[{"name":"create","title":"Create"},{"name":"update","title":"Update"},{"name":"read","title":"Read"},{"name":"delete","title":"Delete"},{"name":"index","title":"Index"}]'
+                },
+                template: "<span>{{ item.title }}</span>",
+                valueProperty: "name",
+                multiple: true
+              }
+            ]
+          },
+          {
+            type: "button",
+            input: true,
+            label: "Save Action",
+            key: "submit",
+            size: "md",
+            action: "submit",
+            disableOnInvalid: true,
+            theme: "primary"
+          }
+        ]
+      }
+    },
+    options: { template: "tailwind", iconset: "lu" }
+  }
+};
+
+/**
+ * Webhook action configuration
+ */
+export const WebhookAction: Story = {
+  args: {
+    actionInfo: {
+      name: "webhook",
+      title: "Webhook",
+      description: "Sends a submission to a URL.",
+      priority: 0,
+      defaults: {
+        handler: ["after"],
+        method: ["create", "update"],
+        priority: 0,
+        name: "webhook",
+        title: "Webhook"
+      },
+      access: {
+        handler: false,
+        method: false
+      },
+      settingsForm: {
+        components: [
+          {
+            type: "hidden",
+            input: true,
+            key: "priority"
+          },
+          {
+            type: "hidden",
+            input: true,
+            key: "name"
+          },
+          {
+            type: "textfield",
+            input: true,
+            label: "Title",
+            key: "title"
+          },
+          {
+            type: "fieldset",
+            input: false,
+            tree: true,
+            legend: "Webhook Settings",
+            key: "settings",
+            components: [
+              {
+                type: "textfield",
+                input: true,
+                label: "URL",
+                key: "url",
+                placeholder: "https://example.com/webhook",
+                multiple: false
+              },
+              {
+                type: "select",
+                input: true,
+                label: "Method",
+                key: "webhookMethod",
+                placeholder: "Select HTTP method",
+                dataSrc: "values",
+                data: {
+                  values: [
+                    { label: "POST", value: "post" },
+                    { label: "PUT", value: "put" },
+                    { label: "PATCH", value: "patch" }
+                  ]
+                },
+                defaultValue: "post"
+              }
+            ]
+          },
+          {
+            type: "fieldset",
+            input: false,
+            tree: false,
+            key: "conditions",
+            legend: "Action Execution",
+            components: [
+              {
+                type: "select",
+                input: true,
+                key: "handler",
+                label: "Handler",
+                placeholder: "Select which handler(s) you would like to trigger",
+                dataSrc: "json",
+                data: {
+                  json: '[{"name":"before","title":"Before"},{"name":"after","title":"After"}]'
+                },
+                template: "<span>{{ item.title }}</span>",
+                valueProperty: "name",
+                multiple: true
+              },
+              {
+                type: "select",
+                input: true,
+                label: "Methods",
+                key: "method",
+                placeholder: "Trigger action on method(s)",
+                dataSrc: "json",
+                data: {
+                  json: '[{"name":"create","title":"Create"},{"name":"update","title":"Update"},{"name":"read","title":"Read"},{"name":"delete","title":"Delete"},{"name":"index","title":"Index"}]'
+                },
+                template: "<span>{{ item.title }}</span>",
+                valueProperty: "name",
+                multiple: true
+              }
+            ]
+          },
+          {
+            type: "button",
+            input: true,
+            label: "Save Action",
+            key: "submit",
+            size: "md",
+            action: "submit",
+            disableOnInvalid: true,
+            theme: "primary"
+          }
+        ]
+      }
+    },
+    options: { template: "tailwind", iconset: "lu" }
+  }
+};

package/src/organisms/form/{action → actions}/FormAction.tsx

@@ -1,4 +1,4 @@
-import FormioUtils from "formiojs/utils";
+import FormioUtils from "@formio/js/utils";
 import { PropsWithChildren, ReactElement } from "react";
 
 import { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from "../../../interfaces";
@@ -44,7 +44,7 @@ export function FormAction({ actionInfo, children, onSubmit, options, ...props }
     const submission = mapData(props.submission || {}, actionInfo.defaults!);
     const form = mapSettingsForm(actionInfo.settingsForm);
 
-    return { form, submission: { data: submission } };
+    return { form, submission: { data: submission } as SubmissionType<ActionType> };
   })();
 
   return (

package/src/organisms/form/builder/FormBuilder.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import form from "../../__fixtures__/form.fixture.json";
 import formWizard from "../../__fixtures__/form-wizard.fixture.json";
@@ -59,6 +59,9 @@ export default {
       action: "onDeleteComponent"
     }
   },
+  render(args) {
+    return <FormBuilder display={args.display} components={args.components} options={args.options} />;
+  },
   tags: ["autodocs"]
 } satisfies Meta<typeof FormBuilder>;
 
@@ -69,7 +72,7 @@ type Story = StoryObj<typeof FormBuilder>;
 export const WebForm: Story = {
   args: {
     display: form.display as any,
-    options: { template: "tailwind", iconset: "bx" },
+    options: { template: "tailwind", iconset: "lu" },
     components: form.components as any
   }
 };
@@ -81,7 +84,7 @@ export const Wizard: Story = {
   args: {
     display: formWizard.display as any,
     components: formWizard.components as any,
-    options: { template: "tailwind", iconset: "bx" }
+    options: { template: "tailwind", iconset: "lu" }
   }
 };
 /**
@@ -92,6 +95,6 @@ export const Pdf: Story = {
   args: {
     display: "pdf",
     components: [],
-    options: { template: "tailwind", iconset: "bx" }
+    options: { template: "tailwind", iconset: "lu" }
   }
 };

package/src/organisms/form/builder/FormEdit.reducer.spec.ts

@@ -0,0 +1,136 @@
+import cloneDeep from "lodash/cloneDeep";
+import { describe, expect, it } from "vitest";
+
+import type { FormType } from "../../../interfaces";
+import { createInitialState, type FormEditState, hasChanged, reducer } from "./FormEdit.reducer";
+
+const baseForm = (): Partial<FormType> => ({
+  title: "My Form",
+  name: "myForm",
+  path: "myform",
+  display: "form",
+  components: []
+});
+
+describe("FormEdit.reducer helpers", () => {
+  it("hasChanged: returns false when objects are equal", () => {
+    const a = baseForm();
+    const b = cloneDeep(a);
+
+    expect(hasChanged(a, b)).toBe(false);
+  });
+
+  it("hasChanged: returns true when objects differ", () => {
+    const a = baseForm();
+    const b = { ...a, title: "Other" };
+
+    expect(hasChanged(a, b)).toBe(true);
+  });
+
+  it("createInitialState: initializes with clones and empty history", () => {
+    const form = baseForm();
+    const state = createInitialState({ form });
+
+    expect(state.past).toEqual([]);
+    expect(state.future).toEqual([]);
+    expect(state.current).toEqual(form);
+    expect(state.original).toEqual(form);
+
+    // ensure deep clone (different references)
+    expect(state.current).not.toBe(form);
+    expect(state.original).not.toBe(form);
+  });
+});
+
+describe("FormEdit.reducer", () => {
+  const initState = (form: Partial<FormType> = baseForm()): FormEditState => createInitialState({ form });
+
+  it("formChange: updates state and pushes previous current into past when changed", () => {
+    const state = initState();
+    const next = reducer(state, { type: "formChange", value: { title: "Updated" } });
+
+    expect(next.current.title).toBe("Updated");
+    expect(next.past).toHaveLength(1);
+    expect(next.past[0]).toEqual(state.current);
+  });
+
+  it("formChange: updates name and path from title when no _id is set", () => {
+    const form = { ...baseForm(), _id: undefined } as any;
+    const state = initState(form);
+
+    const next = reducer(state, { type: "formChange", value: { title: "My New Title" } });
+
+    expect(next.current.title).toBe("My New Title");
+    // name/path should be derived from title via camelCase
+    expect(next.current.name).toBe("myNewTitle");
+    expect(next.current.path).toBe("mynewtitle");
+  });
+
+  it("formChange: does nothing when value has no changes", () => {
+    const state = initState();
+    const next = reducer(state, { type: "formChange", value: {} });
+
+    // state reference should be unchanged (no history push)
+    expect(next).toBe(state);
+  });
+
+  it("undo: reverts to previous state and moves current to future", () => {
+    let state = initState();
+    state = reducer(state, { type: "formChange", value: { title: "Step1" } });
+    state = reducer(state, { type: "formChange", value: { title: "Step2" } });
+
+    const afterUndo = reducer(state, { type: "undo" });
+
+    expect(afterUndo.current.title).toBe("Step1");
+    expect(afterUndo.future).toHaveLength(1);
+    expect(afterUndo.future[0].title).toBe("Step2");
+    expect(afterUndo.past).toHaveLength(1); // original current stored
+  });
+
+  it("redo: reapplies next state and moves current back to past", () => {
+    let state = initState();
+    state = reducer(state, { type: "formChange", value: { title: "Step1" } });
+    state = reducer(state, { type: "formChange", value: { title: "Step2" } });
+    state = reducer(state, { type: "undo" });
+
+    const afterRedo = reducer(state, { type: "redo" });
+
+    expect(afterRedo.current.title).toBe("Step2");
+    expect(afterRedo.past).toHaveLength(2); // original + step1
+    expect(afterRedo.future).toHaveLength(0);
+  });
+
+  it("reset: restores original form and adds current to past", () => {
+    // Ensure current has an _id so reset doesn't try to derive name/path from undefined action value
+    const state0 = initState({ ...baseForm(), _id: "123" } as any);
+    const state1 = reducer(state0, { type: "formChange", value: { title: "Changed" } });
+
+    const reset = reducer(state1, { type: "reset" });
+
+    expect(reset.current).toEqual(state0.original);
+    expect(reset.past).toHaveLength(2); // initial current, then changed
+  });
+
+  it("replaceForm: replaces current and original, clears history", () => {
+    let state = initState();
+    state = reducer(state, { type: "formChange", value: { title: "Changed" } });
+
+    const newForm: Partial<FormType> = { title: "Another", name: "another", path: "another", components: [] };
+    const replaced = reducer(state, { type: "replaceForm", value: newForm });
+
+    expect(replaced.current).toEqual(newForm);
+    expect(replaced.original).toEqual(newForm);
+    expect(replaced.past).toEqual([]);
+    expect(replaced.future).toEqual([]);
+  });
+
+  it("undo on empty past and redo on empty future: no changes", () => {
+    const state = initState();
+
+    const afterUndo = reducer(state, { type: "undo" });
+    expect(afterUndo).toBe(state);
+
+    const afterRedo = reducer(state, { type: "redo" });
+    expect(afterRedo).toBe(state);
+  });
+});

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

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
-import { FormEdit, FormParameters } from "./all";
+import { FormEdit } from "./all";
 import { defaultDisplayChoices } from "./FormParameters";
-console.log(FormParameters);
+
 /**
  * Form Edit component to edit form schema using the form builder.
  *
@@ -86,13 +86,18 @@ export default {
     onDeleteComponent: {
       description: "A callback function that gets called when a component is deleted in the builder.",
       action: "onDeleteComponent"
+    },
+    layout: {
+      control: "radio",
+      options: ["choicesjs", "react"]
     }
   },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
+  parameters: {},
+  args: {
+    options: {
+      template: "tailwind",
+      iconset: "lu",
+      noDefaultSubmitButton: true
     }
   }
 } satisfies Meta<typeof FormEdit>;
@@ -101,13 +106,13 @@ type Story = StoryObj<typeof FormEdit>;
 
 export const EditWebForm: Story = {
   args: {
+    layout: "react",
     typeChoices: [
       { label: "Form", value: "form" },
       { label: "Resources", value: "resource" }
     ],
     displayChoices: defaultDisplayChoices,
     enableTags: true,
-    options: { template: "tailwind", iconset: "bx" },
     form: {
       type: "form",
       tags: [],
@@ -308,8 +313,7 @@ export const WithoutTypeChoices: Story = {
       machineName: "tcspjwhsevrzpcd:textField"
     } as any,
     displayChoices: defaultDisplayChoices,
-    enableTags: true,
-    options: { template: "tailwind", iconset: "bx" }
+    enableTags: true
   }
 };
 
@@ -413,7 +417,6 @@ export const WithoutTags: Story = {
       machineName: "tcspjwhsevrzpcd:textField"
     } as any,
     displayChoices: defaultDisplayChoices,
-    enableTags: false,
-    options: { template: "tailwind", iconset: "bx" }
+    enableTags: false
   }
 };