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

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

@@ -0,0 +1,422 @@
+import "../../../molecules/card/Card.js";
+import "../Form.js";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+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",
+            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
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            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: "bx" }
+  }
+};
+
+/**
+ * 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",
+            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: "bx" }
+  }
+};
+
+/**
+ * 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",
+            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: "bx" }
+  }
+};

package/src/{components/form-action/formAction.component.tsx → organisms/form/actions/FormAction.tsx}

@@ -1,10 +1,10 @@
 import FormioUtils from "formiojs/utils";
 import { PropsWithChildren, ReactElement } from "react";
 
-import { ActionDefaultsSchema, ActionSchema, FormOptions, Submission } from "../../interfaces";
-import { Form } from "../form/form.component";
+import { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from "../../../interfaces";
+import { Form } from "../../form/Form";
 
-function mapData(options: any, defaults: ActionDefaultsSchema): any {
+function mapData(options: any, defaults: ActionDefaultsType): any {
   return {
     ...defaults,
     ...options
@@ -33,9 +33,9 @@ function mapSettingsForm({ action, ...settingsForm }: any): any {
 }
 
 export interface FormActionProps {
-  actionInfo: Partial<ActionSchema>;
-  submission?: Partial<Submission>;
-  onSubmit?: (submission: Submission<ActionSchema>) => void;
+  actionInfo: Partial<ActionType>;
+  submission?: Partial<SubmissionType>;
+  onSubmit?: (submission: SubmissionType<ActionType>) => void;
   options: FormOptions;
 }
 
@@ -51,7 +51,7 @@ export function FormAction({ actionInfo, children, onSubmit, options, ...props }
     <div>
       {children}
 
-      <Form form={form} submission={submission} onSubmit={onSubmit} options={options} />
+      <Form<ActionType> form={form} submission={submission} onSubmit={onSubmit} options={options} />
 
       {children}
     </div>

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

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import form from "../../__fixtures__/form.fixture.json";
+import formWizard from "../../__fixtures__/form-wizard.fixture.json";
+import { FormBuilder } from "./FormBuilder";
+
+/**
+ * The [FormBuilder](/story/reactformio-formbuilder--sandbox) class can be used to embed a form builder directly in your React application.
+ *
+ * Please note that you'll need to include the CSS for the form builder from formio.js as well.
+ *
+ * Please note that the [FormBuilder](/story/reactformio-formbuilder--sandbox) component does not load and save from/to an url.
+ * You must handle the form definition loading and saving yourself or use the [FormEdit](/docs/documentation-formedit--docs) component.
+ *
+ * ```tsx
+ * import {FormBuilder} from "@tsed/react-formio/organisms/form/builder/FormBuilder";
+ * ```
+ *
+ */
+export default {
+  title: "form/builder/FormBuilder",
+  component: FormBuilder,
+  argTypes: {
+    display: {
+      control: "select",
+      options: ["form", "wizard", "pdf"]
+    },
+    components: {
+      control: "object"
+    },
+    options: {
+      description:
+        "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
+      control: "object"
+    },
+    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"
+    }
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof FormBuilder>;
+
+type Story = StoryObj<typeof FormBuilder>;
+/**
+ * A traditional web form that is typically filled out by end-users from top to bottom
+ */
+export const WebForm: Story = {
+  args: {
+    display: form.display as any,
+    options: { template: "tailwind", iconset: "bx" },
+    components: form.components as any
+  }
+};
+/**
+ * This form configuration allows users to progress through the form in bite-size sections instead of presenting the entire form to the user.
+ * If you are creating a form containing many fields, this is a great option to improve the user experience.
+ */
+export const Wizard: Story = {
+  args: {
+    display: formWizard.display as any,
+    components: formWizard.components as any,
+    options: { template: "tailwind", iconset: "bx" }
+  }
+};
+/**
+ * PDF-First forms allow users to upload a PDF form and add overlay fields to the form, modernizing the traditional old and clunky PDF form.
+ * For a more in-depth guide on the PDF forms please navigate to the [following documentation](https://help.form.io/userguide/forms/pdf#introduction).
+ */
+export const Pdf: Story = {
+  args: {
+    display: "pdf",
+    components: [],
+    options: { template: "tailwind", iconset: "bx" }
+  }
+};

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

@@ -0,0 +1,28 @@
+import type { CSSProperties } from "react";
+
+import { registerComponent } from "../../../registries/components";
+import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder";
+
+export function FormBuilder({
+  className = "",
+  style = {},
+  ["data-testid"]: dataTestId = "formio-builder-container",
+  ...props
+}: UseFormBuilderProps & {
+  className?: string;
+  style?: CSSProperties;
+  ["data-testid"]?: string;
+}) {
+  const renderElement = useFormBuilder(props);
+
+  return (
+    <div style={style} className={className} data-testid={dataTestId}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+      <div ref={renderElement} onClick={(e) => e.stopPropagation()}>
+        <div />
+      </div>
+    </div>
+  );
+}
+
+registerComponent("FormBuilder", FormBuilder);

package/src/{components/form-edit/formEdit.reducer.ts → organisms/form/builder/FormEdit.reducer.ts}

@@ -2,15 +2,15 @@ import camelCase from "lodash/camelCase";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 
-import { FormSchema } from "../../interfaces";
+import type { FormType } from "../../../interfaces";
 
-export const hasChanged = (form: Partial<FormSchema>, value: Partial<FormSchema>): boolean => !isEqual(form, value);
+export const hasChanged = (form: Partial<FormType>, value: Partial<FormType>): boolean => !isEqual(form, value);
 
 export interface FormEditState {
-  past: Partial<FormSchema>[];
-  future: Partial<FormSchema>[];
-  current: Partial<FormSchema>;
-  original: Partial<FormSchema>;
+  past: Partial<FormType>[];
+  future: Partial<FormType>[];
+  current: Partial<FormType>;
+  original: Partial<FormType>;
 }
 
 export function createInitialState(props: any): FormEditState {