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

package/src/components/actions-table/actionsTable.stories.tsx

@@ -1,5 +1,8 @@
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
 
+import availableActions from "../__fixtures__/form-actions.json";
+import data from "./__fixtures__/data.json";
 import { ActionsTable } from "./actionsTable.component";
 
 export default {
@@ -21,11 +24,6 @@ export default {
         type: "boolean"
       }
     },
-    isEmpty: {
-      control: {
-        type: "boolean"
-      }
-    },
     disableFilters: {
       control: {
         type: "boolean"
@@ -36,296 +34,80 @@ export default {
         type: "boolean"
       }
     },
-    tags: {
-      control: {
-        type: "object"
-      }
-    },
     onAddAction: {
       action: "onAddAction"
     }
   },
   parameters: {}
-};
+} satisfies Meta<typeof ActionsTable>;
 
-export const Sandbox = (args: any) => {
-  return <ActionsTable {...args} data={args.isEmpty ? [] : args.data} />;
-};
+type Story = StoryObj<typeof ActionsTable>;
 
-Sandbox.args = {
-  icon: "server",
-  availableActions: [
-    {
-      name: "email",
-      title: "Email",
-      description: "Allows you to email people on submission.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "email",
-        title: "Email"
-      }
-    },
-    {
-      name: "webhook",
-      title: "Webhook (Premium)",
-      description: "Allows you to trigger an external interface.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "webhook",
-        title: "Webhook (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "sql",
-      title: "SQL Query",
-      description: "Allows you to execute a remote SQL Query.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "sql",
-        title: "SQL Query"
-      }
-    },
-    {
-      name: "role",
-      title: "Role Assignment",
-      description: "Provides the Role Assignment capabilities.",
-      priority: 1,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 1,
-        name: "role",
-        title: "Role Assignment"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "resetpass",
-      title: "Reset Password",
-      description: "Provides a way to reset a password field.",
-      defaults: {
-        handler: ["after", "before"],
-        method: ["form", "create"],
-        priority: 0,
-        name: "resetpass",
-        title: "Reset Password"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      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 }
-    },
-    {
-      name: "login",
-      title: "Login",
-      description: "Provides a way to login to the application.",
-      priority: 2,
-      defaults: {
-        handler: ["before"],
-        method: ["create"],
-        priority: 2,
-        name: "login",
-        title: "Login"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "office365contact",
-      title: "Office 365 Contacts (Premium)",
-      description: "Allows you to integrate into your Office 365 Contacts.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "office365contact",
-        title: "Office 365 Contacts (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "office365calendar",
-      title: "Office 365 Calendar (Premium)",
-      description: "Allows you to integrate into your Office 365 Calendar.",
-      premium: true,
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "office365calendar",
-        title: "Office 365 Calendar (Premium)"
-      }
-    },
-    {
-      name: "hubspotContact",
-      title: "Hubspot Contact (Premium)",
-      description: "Allows you to change contact fields in hubspot.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "hubspotContact",
-        title: "Hubspot Contact (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "oauth",
-      title: "OAuth (Premium)",
-      description: "Provides OAuth authentication behavior to this form.",
-      priority: 20,
-      defaults: {
-        handler: ["after"],
-        method: ["form", "create"],
-        priority: 20,
-        name: "oauth",
-        title: "OAuth (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "ldap",
-      title: "LDAP Login (Premium)",
-      description: "Provides ldap login.",
-      priority: 3,
-      defaults: {
-        handler: ["before"],
-        method: ["create"],
-        priority: 3,
-        name: "ldap",
-        title: "LDAP Login (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "googlesheet",
-      title: "Google Sheets (Premium)",
-      description: "Allows you to integrate data into Google sheets.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "googlesheet",
-        title: "Google Sheets (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "sqlconnector",
-      title: "SQL Connector (Premium)",
-      description: "Allows you to execute a remote SQL Query via Resquel.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "sqlconnector",
-        title: "SQL Connector (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "jira",
-      title: "Jira (Premium)",
-      description: "Allows you to create issues within Jira.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "jira",
-        title: "Jira (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "group",
-      title: "Group Assignment (Premium)",
-      premium: true,
-      description: "Provides the Group Assignment capabilities.",
-      priority: 5,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 5,
-        name: "group",
-        title: "Group Assignment (Premium)"
+export const Sandbox: Story = {
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("action-table-select");
+    const addButton = canvas.getByTestId("action-table-add");
+
+    expect(addButton).toHaveAttribute("disabled");
+
+    await userEvent.selectOptions(select, "save", {
+      delay: 100
+    });
+
+    await userEvent.click(addButton);
+
+    expect(args.onAddAction).toHaveBeenCalledWith("save");
+
+    const editButton = await canvas.getByRole("button", { name: /Operation button: Edit/i });
+    const deleteButton = await canvas.getByRole("button", { name: /Operation button: delete/i });
+
+    expect(editButton).toBeInTheDocument();
+    expect(deleteButton).toBeInTheDocument();
+
+    await userEvent.click(editButton);
+
+    expect(args.onClick).toHaveBeenCalledWith(
+      args.data[0],
+      args.operations!.find(({ action }) => action === "edit")
+    );
+
+    await userEvent.click(deleteButton);
+
+    expect(args.onClick).toHaveBeenCalledWith(
+      args.data[0],
+      args.operations!.find(({ action }) => action === "delete")
+    );
+  },
+  args: {
+    onAddAction: fn(),
+    onClick: fn(),
+    availableActions: availableActions.map(({ name, title }) => ({
+      label: title,
+      value: name
+    })),
+    data: data as never,
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit",
+        permissionsResolver() {
+          return true;
+        }
       },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "twilioSMS",
-      title: "Twilio SMS (Premium)",
-      premium: true,
-      description: "Allows you to send SMS to phone numbers.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "twilioSMS",
-        title: "Twilio SMS (Premium)"
-      }
-    }
-  ].map(({ name, title }) => ({
-    label: title,
-    value: name
-  })),
-  data: [
-    {
-      _id: "602967600685b2158b24e99a",
-      handler: ["before"],
-      method: ["create", "update"],
-      priority: 10,
-      name: "save",
-      title: "Save Submission",
-      form: "602967600685b24dbe24e999",
-      machineName: "tcspjwhsevrzpcd:testForm:save"
-    }
-  ],
-  operations: [
-    {
-      title: "Edit",
-      action: "edit",
-      alias: "row",
-      path: "/resources/:resourceId/submissions/:submissionId",
-      icon: "edit",
-      permissionsResolver() {
-        return true;
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver() {
+          return true;
+        }
       }
-    },
-    {
-      action: "delete",
-      path: "/resources/:resourceId/submissions/:submissionId/delete",
-      icon: "trash",
-      buttonType: "danger",
-      permissionsResolver() {
-        return true;
-      }
-    }
-  ]
+    ]
+  }
 };

package/src/components/alert/alert.component.spec.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 
 import { Sandbox } from "./alert.stories";
 

package/src/components/alert/alert.component.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 function formatError(error: any): any {
   if (typeof error === "string") {
     return error;

package/src/components/alert/alert.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Alert } from "./alert.component";
 
 export default {

package/src/components/card/card.component.spec.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 
 import { Sandbox } from "./card.stories";
 

package/src/components/card/card.component.tsx

@@ -1,8 +1,7 @@
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 export interface CardProps {
-  children: React.ReactNode;
   label: string;
   className?: string;
 }

package/src/components/card/card.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Card } from "./card.component";
 
 export default {

package/src/components/form/form.component.spec.tsx

@@ -4,7 +4,7 @@ import { render } from "@testing-library/react";
 import { Form } from "./form.component";
 
 async function createFixture(props: any = {}) {
-  const onSubmit = jest.fn();
+  const onSubmit = vi.fn();
   const form = {
     type: "form",
     display: "form",

package/src/components/form/form.component.tsx

@@ -1,7 +1,6 @@
 import { Components } from "formiojs";
 import AllComponents from "formiojs/components";
 import PropTypes from "prop-types";
-import React from "react";
 
 import { useForm, UseFormHookProps } from "./useForm.hook";
 

package/src/components/form/form.stories.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import { Submission } from "../../interfaces";
 import form from "../__fixtures__/form.fixture.json";
 import { Form } from "./form.component";
 
@@ -123,7 +122,7 @@ export const Sandbox = {
 
 export const TriggerError = {
   render: (args: any) => {
-    const onAsyncSubmit = (submission: Submission) => {
+    const onAsyncSubmit = () => {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           reject(new Error("server error"));

package/src/components/form-access/formAccess.component.tsx

@@ -1,5 +1,4 @@
-import PropTypes from "prop-types";
-import React, { PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
 import type { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
@@ -24,7 +23,6 @@ export interface FormAccessProps {
 }
 
 function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormAccessProps) {
-  // eslint-disable-next-line no-undef
   const form = useMemo(() => getFormAccess(roles), [roles]);
 
   const [submissions, setSubmissions] = useState(() => dataAccessToSubmissions(formDefinition, form));
@@ -96,7 +94,7 @@ function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit,
   );
 }
 
-export function FormAccess(props: PropsWithChildren<FormAccessProps>): ReactElement {
+export function FormAccess(props: PropsWithChildren<FormAccessProps>) {
   const { type, form, submissions, options, onChange, onSubmit } = useFormAccess(props);
 
   return (
@@ -155,12 +153,3 @@ export function FormAccess(props: PropsWithChildren<FormAccessProps>): ReactElem
     </div>
   );
 }
-
-FormAccess.propTypes = {
-  type: PropTypes.string.isRequired,
-  form: PropTypes.object,
-  roles: PropTypes.any,
-  children: PropTypes.any,
-  options: PropTypes.any,
-  onSubmit: PropTypes.func
-};

package/src/components/form-access/formAccess.stories.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
 
 import { FormAccess } from "./formAccess.component";
 
@@ -6,17 +7,7 @@ export default {
   title: "ReactFormio/FormAccess",
   component: FormAccess,
   argTypes: {
-    onSubmit: { action: "onSubmit" },
-    actionInfo: {
-      control: {
-        type: "object"
-      }
-    },
-    options: {
-      control: {
-        type: "object"
-      }
-    }
+    onSubmit: { action: "onSubmit" }
   },
   parameters: {
     docs: {
@@ -25,45 +16,60 @@ export default {
       }
     }
   }
-};
+} satisfies Meta<typeof FormAccess>;
 
-export const Sandbox = (args: any) => {
-  // @ts-ignore
-  return <FormAccess {...args} options={{ template: "tailwind", iconset: "bx" }} />;
-};
+type Story = StoryObj<typeof FormAccess>;
 
-Sandbox.args = {
-  form: {
-    _id: "6023f8fe4b1a2ab9a3aae096",
-    type: "form",
-    tags: [],
-    owner: "5d0797a382461b6656d2c790",
-    access: [
-      {
-        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
-        type: "read_all"
-      }
-    ],
-    submissionAccess: [
-      {
-        roles: ["5d0797bc872fc747da559858"],
-        type: "read_all"
-      }
-    ],
-    controller: "",
-    properties: {},
-    settings: {},
-    name: "textField",
-    path: "textfield",
-    machineName: "tcspjwhsevrzpcd:textField"
+export const Sandbox: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Vérifiez que le bouton "Save access" est présent
+    const saveButtons = await canvas.getAllByRole("button", { name: /Save access/i });
+    const saveButton = saveButtons[0];
+
+    expect(saveButton).toBeInTheDocument();
+
+    // Simulez un clic sur le bouton "Save access"
+    await userEvent.click(saveButton);
+
+    // Vérifiez que l'action onSubmit a été appelée
+    expect(args.onSubmit).toHaveBeenCalled();
   },
-  roles: [
-    {
-      title: "Administrator",
-      _id: "5d0797bc872fc747da559858"
+  args: {
+    onSubmit: fn(),
+    form: {
+      _id: "6023f8fe4b1a2ab9a3aae096",
+      type: "form",
+      tags: [],
+      owner: "5d0797a382461b6656d2c790",
+      access: [
+        {
+          roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
+          type: "read_all"
+        }
+      ],
+      submissionAccess: [
+        {
+          roles: ["5d0797bc872fc747da559858"],
+          type: "read_all"
+        }
+      ],
+      controller: "",
+      properties: {},
+      settings: {},
+      name: "textField",
+      path: "textfield",
+      machineName: "tcspjwhsevrzpcd:textField"
     },
-    { title: "Authenticated", _id: "5d0797bc872fc71d05559859" },
-    { title: "Anonymous", _id: "5d0797bc872fc7da3b55985a" }
-  ],
-  options: { template: "tailwind", iconset: "bx" }
+    roles: [
+      {
+        title: "Administrator",
+        _id: "5d0797bc872fc747da559858"
+      },
+      { title: "Authenticated", _id: "5d0797bc872fc71d05559859" },
+      { title: "Anonymous", _id: "5d0797bc872fc7da3b55985a" }
+    ],
+    options: { template: "tailwind", iconset: "bx" }
+  }
 };

package/src/components/form-action/formAction.component.tsx

@@ -1,5 +1,5 @@
 import FormioUtils from "formiojs/utils";
-import React, { PropsWithChildren, ReactElement } from "react";
+import { PropsWithChildren, ReactElement } from "react";
 
 import { ActionDefaultsSchema, ActionSchema, FormOptions, Submission } from "../../interfaces";
 import { Form } from "../form/form.component";
@@ -11,6 +11,7 @@ function mapData(options: any, defaults: ActionDefaultsSchema): any {
   };
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function mapSettingsForm({ action, ...settingsForm }: any): any {
   FormioUtils.eachComponent(settingsForm.components, (component: any) => {
     const resourceExclude = "";

package/src/components/form-action/formAction.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormAction } from "./formAction.component";
 
 export default {

package/src/components/form-builder/formBuilder.component.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ComponentSchema } from "formiojs";
 import AllComponents from "formiojs/components";
 import Components from "formiojs/components/Components";
@@ -7,7 +5,7 @@ import FormioFormBuilder from "formiojs/FormBuilder";
 import cloneDeep from "lodash/cloneDeep";
 import noop from "lodash/noop";
 import PropTypes from "prop-types";
-import React from "react";
+import { Component } from "react";
 
 import { callLast } from "../../utils/callLast";
 
@@ -73,7 +71,7 @@ export interface FormBuilderProps {
   onPasteComponent?: Function;
 }
 
-export class FormBuilder extends React.Component<FormBuilderProps, any> {
+export class FormBuilder extends Component<FormBuilderProps, any> {
   static defaultProps = {
     options: {},
     onChange: noop,
@@ -180,6 +178,8 @@ export class FormBuilder extends React.Component<FormBuilderProps, any> {
     });
   }
 
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
   render() {
     return (
       <div