@tsed/react-formio 3.0.0-alpha.12 → 3.0.0-alpha.13

package/src/molecules/forms/input-tags/components/ChoicesTags.tsx

@@ -37,12 +37,12 @@ export function useChoiceTags<Data = string>(props: InputTagsProps<Data>) {
 
       instanceRef.current = instance;
 
-      instance.passedElement.element.addEventListener("addItem", (event: { detail: { value: unknown } }) => {
-        onAdd(event.detail.value as Data);
+      instance.passedElement.element.addEventListener("addItem", (event) => {
+        onAdd((event.target as any).value as Data);
       });
 
-      instance.passedElement.element.addEventListener("removeItem", (event: { detail: { value: unknown } }) => {
-        onDelete(event.detail.value as Data);
+      instance.passedElement.element.addEventListener("removeItem", (event) => {
+        onDelete((event.target as any).value as Data);
       });
     }
 

package/src/molecules/forms/select/components/ChoicesSelect.tsx

@@ -66,9 +66,9 @@ export function useChoices({
     if (choicesRef.current) {
       if (multiple) {
         choicesRef.current.clearStore();
-        choicesRef.current.setChoices(opts, "value", "label", true);
+        choicesRef.current.setChoices(opts as any, "value", "label", true);
       } else {
-        choicesRef.current.setChoices(opts, "value", "label", true);
+        choicesRef.current.setChoices(opts as any, "value", "label", true);
       }
     }
   }, [opts]);

package/src/molecules/pagination/Pagination.tsx

@@ -1,5 +1,7 @@
 import classnames from "classnames";
 
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions } from "../../interfaces/index.js";
 import { getComponent, registerComponent } from "../../registries/components";
 import type { Select as DefaultSelect } from "../forms/select/Select";
 import type { PaginationButton as DefaultPaginationButton } from "./PaginationButton";
@@ -16,8 +18,7 @@ export interface PaginationProps {
   pageSize: number;
   rowCount?: number;
   layout?: "html5" | "react" | "choicesjs";
-  i18n?: (f: string) => string;
-
+  i18n?: FormOptions["i18n"];
   onPageIndexChange: (pageIndex: number) => void;
   onClickPreviousPage: () => void;
   onClickNextPage: () => void;
@@ -38,9 +39,9 @@ export function Pagination(props: PaginationProps) {
     pageOptions,
     pageSize,
     onPageSizeChange,
-    rowCount,
-    i18n = (f: string) => f
+    rowCount
   } = props;
+  const { t } = useI18n(props.i18n);
 
   const pageNumbers = getPageNumbers({
     currentPage: pageIndex,
@@ -57,7 +58,7 @@ export function Pagination(props: PaginationProps) {
       <ul className='pagination mb-3 mr-3'>
         <li className={classnames("page-item", !canPreviousPage && "disabled")}>
           <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => onClickPreviousPage()}>
-            {i18n("Previous")}
+            {t("Previous")}
           </PaginationButton>
         </li>
 
@@ -82,7 +83,7 @@ export function Pagination(props: PaginationProps) {
 
         <li className={classnames("page-item", !canNextPage && "disabled")}>
           <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => onClickNextPage()}>
-            {i18n("Next")}
+            {t("Next")}
           </PaginationButton>
         </li>
       </ul>
@@ -98,11 +99,11 @@ export function Pagination(props: PaginationProps) {
             onPageSizeChange(+value);
           }}
         />
-        <span className={"ml-3"}>{i18n("items per page")}</span>
+        <span className={"ml-3"}>{t("items per page")}</span>
       </li>
       {pageOptions && (
         <li className={"mb-3 mr-3 flex items-center"}>
-          <span>{i18n("Page")}&nbsp;</span>
+          <span>{t("Page")}&nbsp;</span>
           <strong>
             {pageIndex + 1} of {pageOptions.length}
           </strong>
@@ -110,7 +111,7 @@ export function Pagination(props: PaginationProps) {
       )}
       {rowCount !== undefined && (
         <li className={"mb-3 flex items-center"} data-testid='pagination-total-items'>
-          {i18n("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(rowCount)}</strong> {i18n("items")}
+          {t("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(rowCount)}</strong> {t("items")}
         </li>
       )}
     </nav>

package/src/molecules/table/Table.stories.tsx

@@ -73,7 +73,7 @@ type Story = StoryObj<typeof Table<ProductSubmission>>;
 
 export const Usage: Story = {
   args: {
-    data: formSubmissions as ProductSubmission[],
+    data: formSubmissions as unknown as ProductSubmission[],
     columns: mapFormToColumns(FormType as any),
     operations: [
       {
@@ -93,7 +93,7 @@ export const Usage: Story = {
         }
       }
     ],
-    i18n: (f: string) => f,
+    i18n: {},
     onClick: fn(),
     onChange: fn()
   },
@@ -182,7 +182,7 @@ export const Usage: Story = {
 
 export const WithFilters: Story = {
   args: {
-    data: formSubmissions as ProductSubmission[],
+    data: formSubmissions as unknown as ProductSubmission[],
     columns: mapFormToColumns(FormType as any, [
       {
         accessorKey: "data.id",
@@ -212,14 +212,14 @@ export const WithFilters: Story = {
         }
       }
     ],
-    i18n: (f: string) => f,
+    i18n: {},
     onClick: fn()
   }
 };
 
 export const WithCustomCell: Story = {
   args: {
-    data: formSubmissions as ProductSubmission[],
+    data: formSubmissions as unknown as ProductSubmission[],
     columns: mapFormToColumns<ProductSubmission>(FormType as any, [
       {
         accessorKey: "data.id",
@@ -299,7 +299,7 @@ export const WithCustomCell: Story = {
         }
       }
     ],
-    i18n: (f: string) => f,
+    i18n: {},
     onClick: fn()
   }
 };

package/src/molecules/table/Table.tsx

@@ -90,7 +90,7 @@ export function Table<Data extends { [key: string]: JSON } = { [key: string]: JS
             pageIndex={pagination.pageIndex}
             pageSize={pagination.pageSize}
             pageSizes={props.pageSizes}
-            i18n={i18n}
+            i18n={props.i18n}
             pageCount={tableInstance.getPageCount()}
             rowCount={props.rowCount}
             onPageIndexChange={(page) => tableInstance.setPageIndex(page)}

package/src/molecules/table/hooks/useTable.tsx

@@ -12,7 +12,8 @@ import {
 } from "@tanstack/react-table";
 import { useEffect } from "react";
 
-import { type JSON, Operation } from "../../../interfaces";
+import { useI18n } from "../../../hooks/useI18n.js";
+import { type FormOptions, type JSON, Operation } from "../../../interfaces";
 import { getComponent } from "../../../registries/components";
 import type { DefaultCellOperations } from "../components/DefaultCellOperations";
 
@@ -20,7 +21,7 @@ export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: st
   extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
   operations: Operation<Data>[];
   metadata?: Record<string, unknown>;
-  i18n?: (i18n: string) => string;
+  i18n?: FormOptions["i18n"];
   onClick?: (data: any, operation: Operation<Data>) => void;
   manualFaceted?: boolean;
   onChange?: (query: TableState) => void;
@@ -29,7 +30,7 @@ export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: st
 
 export function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {
   const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
-  const i18n = props.i18n || ((f: string) => f);
+  const { t } = useI18n(props.i18n);
 
   // const [pagination, setPagination] = useState({
   //   pageIndex: 0, //initial page index
@@ -40,9 +41,9 @@ export function useTable<Data extends { [key: string]: JSON } = { [key: string]:
     ? ([
         {
           id: "operations",
-          header: i18n("Operations"),
+          header: t("Operations"),
           cell: (info) => (
-            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={i18n} />
+            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />
           )
         }
       ] satisfies ColumnDef<Data>[])
@@ -69,7 +70,7 @@ export function useTable<Data extends { [key: string]: JSON } = { [key: string]:
   }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);
 
   return {
-    i18n,
+    i18n: t,
     tableInstance
   };
 }

package/src/molecules/table/utils/mapFormToColumns.tsx

@@ -1,7 +1,7 @@
 import "../interfaces/extends";
 
+import { Components } from "@formio/js";
 import { ColumnDef, ColumnDefResolved, createColumnHelper } from "@tanstack/react-table";
-import { Components } from "formiojs";
 import cloneDeep from "lodash/cloneDeep";
 import get from "lodash/get";
 
@@ -25,14 +25,15 @@ export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefR
   const columnsFromComponents = form.components
     .flatMap((component) => {
       if (component.type === "tabs") {
-        return component.components.flatMap((subComponent: ComponentType) => subComponent.components);
+        return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);
       }
 
       return [component];
     })
-    .filter((component) => component.tableView)
-    .map((component: ComponentType) => {
-      const cmp: any = Components.create(component, {}, null, true);
+    .filter((component) => component?.tableView)
+    .map((c) => {
+      const component = c as ComponentType;
+      const cmp: any = Components.create(component, {}, null);
 
       const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
         return accessorKey === `data.${component.key}`;

package/src/molecules/tabs/TabsLegacy.stories.tsx

@@ -37,7 +37,7 @@ export default {
   render: (args: any) => {
     return (
       <div className={"border-gray-300 border-1 shadow"}>
-        <TabsLegacy {...args} i18n={(f) => f} />
+        <TabsLegacy {...args} />
       </div>
     );
   }

package/src/molecules/tabs/TabsLegacy.tsx

@@ -2,6 +2,8 @@ import "./all.js";
 
 import { CSSProperties, ReactNode } from "react";
 
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions } from "../../interfaces/index.js";
 import { getComponent } from "../../registries/components.js";
 import type { Tab as DefaultTab } from "./Tab.js";
 import type { TabList as DefaultTabList } from "./TabList.js";
@@ -23,7 +25,7 @@ export interface TabsLegacyProps extends Record<string, any> {
   className?: string;
   reverse?: boolean;
   onClick?: (item: TabsItemProps) => void;
-  i18n?: (f: string) => string;
+  i18n?: FormOptions["i18n"];
 }
 
 export function TabsLegacy({
@@ -34,7 +36,6 @@ export function TabsLegacy({
   AddButton,
   className,
   onClick,
-  i18n = (f) => f,
   reverse,
   after,
   ...additionalProps
@@ -45,6 +46,7 @@ export function TabsLegacy({
   const TabPanel = getComponent<typeof DefaultTabPanel>("TabPanel");
   const Tabs = getComponent<typeof DefaultTabs>("Tabs");
   const tabs = items.filter((item) => item.label || item.icon);
+  const { t } = useI18n(additionalProps.i18n);
 
   return (
     <Tabs className={className} style={style}>
@@ -62,7 +64,7 @@ export function TabsLegacy({
                 className={reverse ? "-reverse" : ""}
                 after={after}
               >
-                {i18n(item.label || "")}
+                {t(item.label || "")}
               </Tab>
             );
           })}

package/src/organisms/form/Form.stories.tsx

@@ -526,6 +526,8 @@ export const FetchSubmissionWithCustomAction: Story = {
       expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
     });
 
+    await delay(200);
+
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
@@ -639,6 +641,8 @@ export const ErrorOnSubmitServer: Story = {
       expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
     });
 
+    await delay(200);
+
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 

package/src/organisms/form/access/FormAccess.schema.ts

@@ -11,6 +11,7 @@ export function getRoleComponent({ label, key, description, choices, data }: any
     placeholder: "Select roles...",
     tooltip: "",
     multiple: true,
+    input: true,
     dataSrc: "values",
     defaultValue: "",
     data: {

package/src/organisms/form/access/FormAccess.stories.tsx

@@ -63,7 +63,9 @@ export const Sandbox: Story = {
       ],
       controller: "",
       properties: {},
-      settings: {},
+      settings: {
+        hideTitle: false
+      },
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"

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

@@ -88,6 +88,7 @@ export const SaveAction: Story = {
             input: false,
             tree: true,
             legend: "Action Settings",
+            key: "settings",
             components: [
               {
                 input: false,
@@ -101,7 +102,8 @@ export const SaveAction: Story = {
                     placeholder: "This form",
                     basePath: "/project/5d0797bc872fc7d140559857/form",
                     form: "62b18b10fbbba513555c6c5e",
-                    required: false
+                    required: false,
+                    input: true
                   }
                 ]
               }
@@ -205,6 +207,7 @@ export const EmailAction: Story = {
             input: false,
             tree: true,
             legend: "Email Settings",
+            key: "settings",
             components: [
               {
                 type: "textfield",
@@ -340,6 +343,7 @@ export const WebhookAction: Story = {
             input: false,
             tree: true,
             legend: "Webhook Settings",
+            key: "settings",
             components: [
               {
                 type: "textfield",

package/src/organisms/form/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/FormEdit.stories.tsx

@@ -92,7 +92,14 @@ export default {
       options: ["choicesjs", "react"]
     }
   },
-  parameters: {}
+  parameters: {},
+  args: {
+    options: {
+      template: "tailwind",
+      iconset: "bx",
+      noDefaultSubmitButton: true
+    }
+  }
 } satisfies Meta<typeof FormEdit>;
 
 type Story = StoryObj<typeof FormEdit>;
@@ -106,7 +113,6 @@ export const EditWebForm: Story = {
     ],
     displayChoices: defaultDisplayChoices,
     enableTags: true,
-    options: { template: "tailwind", iconset: "bx" },
     form: {
       type: "form",
       tags: [],
@@ -307,8 +313,7 @@ export const WithoutTypeChoices: Story = {
       machineName: "tcspjwhsevrzpcd:textField"
     } as any,
     displayChoices: defaultDisplayChoices,
-    enableTags: true,
-    options: { template: "tailwind", iconset: "bx" }
+    enableTags: true
   }
 };
 
@@ -412,7 +417,6 @@ export const WithoutTags: Story = {
       machineName: "tcspjwhsevrzpcd:textField"
     } as any,
     displayChoices: defaultDisplayChoices,
-    enableTags: false,
-    options: { template: "tailwind", iconset: "bx" }
+    enableTags: false
   }
 };

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

@@ -1,6 +1,7 @@
 import classnames from "classnames";
+import type { CSSProperties } from "react";
 
-import type { FormOptions } from "../../../interfaces";
+import type { FormBuilderOptions, FormOptions } from "../../../interfaces/index.js";
 import { getComponent } from "../../../registries/components";
 import { FormBuilder as DefaultFormBuilder } from "./FormBuilder";
 import { FormEditCTAs as DefaultFormEditCTAs } from "./FormEditCtas";
@@ -9,10 +10,10 @@ import { FormBuilderEvents } from "./useFormBuilder";
 import { useFormEdit, UseFormEditHookProps } from "./useFormEdit";
 
 export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
-  options?: FormOptions;
+  options?: FormBuilderOptions & FormOptions;
   layout?: "html5" | "choicesjs" | "react";
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 export function FormEdit({
@@ -35,7 +36,6 @@ export function FormEdit({
     onCopy: initialOnCopy
   });
 
-  const { options = {} } = props;
   const FormParameters = getComponent<typeof DefaultFormParameters>("FormParameters");
   const FormBuilder = getComponent<typeof DefaultFormBuilder>("FormBuilder");
   const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
@@ -54,7 +54,7 @@ export function FormEdit({
         />
         <FormEditCTAs
           key={`form-edit-ctas-${form._id}`}
-          options={options}
+          options={props.options}
           hasRedo={hasRedo}
           hasUndo={hasUndo}
           disabled={!(isValid && hasChanged)}
@@ -71,7 +71,7 @@ export function FormEdit({
         key={`form-builder-${form._id}`}
         components={form.components!}
         display={form.display}
-        options={options}
+        options={props.options}
         onChange={(components) => {
           setChange("components", components);
         }}

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

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 
 import { Icon as DefaultIcon } from "../../../atoms/icon/Icon";
+import { useI18n } from "../../../hooks/useI18n";
 import { useTooltip } from "../../../hooks/useTooltip";
-import type { FormOptions } from "../../../interfaces";
+import type { FormOptions } from "../../../interfaces/index.js";
 import { Button as DefaultButton } from "../../../molecules/button/Button";
 import { getComponent, registerComponent } from "../../../registries/components";
 
@@ -22,17 +23,16 @@ export interface FormEditCTAsProps extends Record<string, unknown> {
 export function FormEditCTAs({
   saveText = "Save",
   disabled,
-  options = {},
   onCopy,
   hasUndo,
   hasRedo,
   onUndo,
   onRedo,
   onReset,
-  onSubmit
+  onSubmit,
+  options
 }: FormEditCTAsProps): ReactElement {
-  const { i18n: t = (t: string): string => t } = options;
-
+  const { t } = useI18n(options?.i18n);
   const copyTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
@@ -64,29 +64,29 @@ export function FormEditCTAs({
     <div className={"form-edit__actions"}>
       <div>
         <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>
-          <Icon name='save' iconset={options.iconset} />
+          <Icon name='save' iconset={options?.iconset} />
           {saveText}
         </Button>
 
         <div>
           <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>
-            <Icon name='undo' iconset={options.iconset} />
+            <Icon name='undo' iconset={options?.iconset} />
           </Button>
 
           <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>
-            <Icon name='redo' iconset={options.iconset} />
+            <Icon name='redo' iconset={options?.iconset} />
           </Button>
         </div>
 
         <div>
           {onCopy && (
             <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>
-              <Icon name='copy' iconset={options.iconset} />
+              <Icon name='copy' iconset={options?.iconset} />
             </Button>
           )}
 
           <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
-            <Icon name='reset' iconset={options.iconset} />
+            <Icon name='reset' iconset={options?.iconset} />
           </Button>
         </div>
       </div>

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

@@ -1,11 +1,11 @@
-import { FormBuilder as FormioFormBuilder } from "formiojs";
+import { FormBuilder as FormioFormBuilder } from "@formio/js";
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect, useRef, useState } from "react";
 
-import type { ComponentType, FormOptions, FormType } from "../../../interfaces";
+import type { ComponentType, FormBuilderOptions, FormType } from "../../../interfaces";
 
 interface BuilderConstructor {
-  new (element: HTMLDivElement, form: FormType, options: FormOptions): FormioFormBuilder;
+  new (element: HTMLDivElement, form: FormType, options: FormBuilderOptions): FormioFormBuilder;
 }
 
 const EVENTS = [
@@ -29,7 +29,7 @@ async function createBuilder(el: Element, { components = [], display, options, o
     components: [...components]
   };
 
-  const builder = await new FormioFormBuilder(el, form, { ...options }).ready;
+  const builder = await new FormioFormBuilder(el as HTMLElement, form, { ...options }).ready;
 
   const handleEvent = (event: string) => {
     return (...args: any[]) => {
@@ -45,6 +45,7 @@ async function createBuilder(el: Element, { components = [], display, options, o
 
   return builder;
 }
+
 export interface FormBuilderEvents {
   onAddComponent?: Function;
   onRemoveComponent?: Function;
@@ -73,7 +74,7 @@ export interface UseFormBuilderProps extends FormBuilderEvents {
   Builder?: BuilderConstructor;
   components: ComponentType[];
   display?: string;
-  options?: FormOptions;
+  options?: FormBuilderOptions;
 }
 
 export function useFormBuilder({ components, display, options = {}, onBuilderReady, onChange, ...props }: UseFormBuilderProps) {
@@ -111,7 +112,7 @@ export function useFormBuilder({ components, display, options = {}, onBuilderRea
 
   useEffect(() => {
     if (builderRef.current) {
-      if (display !== builderRef.current.form.display) {
+      if (display !== (builderRef.current.form as FormType).display) {
         createBuilder(renderElement.current!.firstChild as Element, {
           display,
           options: { ...options },

package/src/organisms/form/exports/FormExport.stories.tsx

@@ -36,7 +36,7 @@ type Story = StoryObj<typeof FormExport>;
  */
 export const Usage: Story = {
   args: {
-    i18n: (key: string) => key,
+    i18n: {},
     onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
   }
 };
@@ -46,7 +46,7 @@ export const Usage: Story = {
  */
 export const Resource: Story = {
   args: {
-    i18n: (key: string) => key,
+    i18n: {},
     onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
   }
 };
@@ -56,15 +56,12 @@ export const Resource: Story = {
  */
 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;
+    i18n: {
+      "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"
     },
     onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
   }