@tsed/react-formio 2.3.1 → 2.3.2

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/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 React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
 import type { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
@@ -96,7 +95,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 +154,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-control/formControl.component.tsx

@@ -1,12 +1,13 @@
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
+import React, { HTMLAttributes } from "react";
 
-export interface FormControlProps {
+export interface FormControlProps<Data = any> {
   name: string;
+  value?: Data;
   required?: boolean;
   label?: string;
   className?: string;
+  onChange?: (name: string, value: any) => void;
   description?: string | React.ComponentType | any;
   prefix?: JSX.Element | React.ComponentType | any;
   suffix?: JSX.Element | React.ComponentType | any;
@@ -55,11 +56,3 @@ export function FormControl({
     </div>
   );
 }
-
-FormControl.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  children: PropTypes.any,
-  required: PropTypes.bool,
-  description: PropTypes.any
-};

package/src/components/select/select.component.tsx

@@ -1,24 +1,20 @@
 import Choices from "@formio/choices.js";
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React, { ReactElement, useEffect, useRef } from "react";
+import React, { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
 
 import { getEventValue } from "../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
-export interface SelectProps<T = any> extends FormControlProps {
-  value?: any;
+export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
   size?: string;
-  onChange?: (name: string, value: any) => void;
   placeholder?: string;
-  choices: { label: string; value: T }[];
+  choices: { label: string; value: Data }[];
   layout?: "html5" | "choicesjs";
+  disabled?: boolean;
   multiple?: boolean;
-
-  [key: string]: any;
 }
 
-export function Select<T = any>({
+export function Select<Data = any>({
   name,
   label,
   size,
@@ -33,14 +29,14 @@ export function Select<T = any>({
   multiple,
   layout,
   ...props
-}: SelectProps<T>): ReactElement {
-  const ref = useRef<any>();
+}: SelectProps<Data>): ReactElement {
+  const ref = useRef<HTMLSelectElement>(null);
 
   useEffect(() => {
     let instance: any;
 
     if (layout === "choicesjs") {
-      instance = new Choices(ref.current, {
+      instance = new Choices(ref.current as unknown as HTMLInputElement, {
         removeItemButton: true,
         placeholderValue: placeholder
       });
@@ -67,8 +63,8 @@ export function Select<T = any>({
       {/* eslint-disable-next-line jsx-a11y/no-onchange */}
       <select
         ref={ref}
-        {...props}
         data-testid={`select_${name}`}
+        {...props}
         className={classnames("form-control", size && `form-control-${size}`)}
         name={name}
         id={name}
@@ -90,12 +86,3 @@ export function Select<T = any>({
     </FormControl>
   );
 }
-
-Select.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  choices: PropTypes.array.isRequired
-};

package/src/components/table/components/defaultCellOperations.component.tsx

@@ -1,19 +1,32 @@
 import React from "react";
 
-import { DefaultOperationButton } from "./defaultOperationButton.component";
+import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
 
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: any) {
+export interface DefaultCellOperationsProps {
+  operations: (OperationButtonProps & {
+    OperationButton: typeof DefaultOperationButton;
+    permissionsResolver?(data: unknown, ctx: any): boolean;
+  })[];
+  row: any;
+
+  onClick: (data: any, action: string) => void;
+  ctx: any;
+  i18n: (i18n: string) => string;
+}
+
+export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
   const data = row.original;
 
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }: any) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }: any) => {
+        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
+        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
           return (
             <OperationButton
               key={operation.action}
               {...operation}
+              data-testid={`operation-${index}-${operation.action}`}
               onClick={(action: string) => onClick(data, action)}
               data={data}
               i18n={i18n}