@tsed/react-formio 3.0.0-alpha.10 → 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/organisms/form/builder/FormEdit.tsx

@@ -1,3 +1,5 @@
+import classnames from "classnames";
+
 import type { FormOptions } from "../../../interfaces";
 import { getComponent } from "../../../registries/components";
 import { FormBuilder as DefaultFormBuilder } from "./FormBuilder";
@@ -9,6 +11,8 @@ 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({
@@ -18,6 +22,8 @@ export function FormEdit({
   enableTags,
   onSubmit: initialOnSubmit,
   onCopy: initialOnCopy,
+  className,
+  style,
   ...props
 }: FormEditProps) {
   const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({
@@ -35,7 +41,7 @@ export function FormEdit({
   const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
 
   return (
-    <div className='form-edit-container'>
+    <div className={classnames("form-edit-container", className)} style={style}>
       <div className='form-edit'>
         <FormParameters
           enableTags={enableTags}

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

@@ -28,7 +28,7 @@ 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]);

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