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

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

@@ -1,14 +1,17 @@
 import { Icon } from "../../../atoms/icon/Icon.js";
+import { useI18n } from "../../../hooks/useI18n.js";
+import { FormOptions } from "../../../interfaces/FormOptions.js";
 import type { Card } from "../../../molecules/card/Card.js";
 import { getComponent } from "../../../registries/components.js";
 
 export interface FormExportProps {
-  i18n?: (key: string) => string;
+  i18n?: FormOptions["i18n"];
   onClick?: (action: "export:form" | "export:submissions", format: "json" | "csv") => void;
 }
 
-export function FormExport({ i18n = (f: string) => f, onClick }: FormExportProps) {
+export function FormExport({ onClick, ...props }: FormExportProps) {
   const FCard = getComponent<typeof Card>("Card");
+  const { t } = useI18n(props?.i18n);
 
   return (
     <div>
@@ -18,15 +21,15 @@ export function FormExport({ i18n = (f: string) => f, onClick }: FormExportProps
             label={
               (
                 <span className={"flex items-center"}>
-                  <Icon name={"detail"} className={"mr-1 text-secondary"} /> {i18n(`Export schema`)}
+                  <Icon name={"detail"} className={"mr-1 text-secondary"} /> {t(`Export schema`)}
                 </span>
               ) as any
             }
           >
-            <p className={"mb-5"}>{i18n("Export the formIO schema:")}</p>
+            <p className={"mb-5"}>{t("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`)}
+                <Icon name={"code"} className={"mr-1"} /> {t(`Json`)}
               </button>
             </div>
           </FCard>
@@ -36,18 +39,18 @@ export function FormExport({ i18n = (f: string) => f, onClick }: FormExportProps
             label={
               (
                 <span className={"flex items-center"}>
-                  <Icon name={"data"} className={"mr-1 text-secondary"} /> {i18n(`Export submissions`)}
+                  <Icon name={"data"} className={"mr-1 text-secondary"} /> {t(`Export submissions`)}
                 </span>
               ) as any
             }
           >
-            <p className={"mb-5"}>{i18n("Export all submission as JSON or CSV:")}</p>
+            <p className={"mb-5"}>{t("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`)}
+                <Icon name={"code"} className={"mr-1"} /> {t(`Json`)}
               </button>
               <button className={"btn btn-primary"} onClick={() => onClick?.("export:submissions", "csv")}>
-                <Icon name={"spreadsheet"} className={"mr-1"} /> {i18n(`Csv`)}
+                <Icon name={"spreadsheet"} className={"mr-1"} /> {t(`Csv`)}
               </button>
             </div>
           </FCard>

package/src/organisms/form/preview/FormPreview.stories.tsx

@@ -38,7 +38,7 @@ type Story = StoryObj<typeof FormPreview>;
 export const Usage: Story = {
   args: {
     form: formFirstname as any,
-    i18n: (key: string) => key
+    i18n: {}
   }
 };
 
@@ -48,14 +48,11 @@ export const Usage: Story = {
 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;
+    i18n: {
+      "Form with First Name": "Formulaire avec prénom",
+      "First name": "Prénom",
+      "Last name": "Nom de famille",
+      Submit: "Soumettre"
     }
   }
 };

package/src/organisms/form/preview/FormPreview.tsx

@@ -1,20 +1,22 @@
-import type { FormType } from "../../../interfaces/index.js";
+import { useI18n } from "../../../hooks/useI18n.js";
+import type { FormOptions, 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;
+  i18n?: FormOptions["i18n"];
 }
 
-export function FormPreview({ form, i18n = (f) => f }: FormPreviewProps) {
+export function FormPreview({ form, ...props }: FormPreviewProps) {
+  const { t } = useI18n(props?.i18n);
   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 label={t(form.title || "")} className={"shadow"}>
+        <Form form={form} options={{ i18n: props.i18n }} />
       </FCard>
     </div>
   );

package/src/organisms/form/settings/FormSettings.component.spec.tsx

@@ -51,7 +51,9 @@ describe("FormSettings", () => {
       <FormSettings
         {...Sandbox.args}
         options={{
-          i18n: (f: string) => f + " i18N"
+          i18n: {
+            "Save settings": "Save settings i18N"
+          }
         }}
       />
     );

package/src/organisms/form/settings/FormSettings.stories.tsx

@@ -56,6 +56,6 @@ Sandbox.args = {
     name: "textField",
     path: "textfield",
     machineName: "tcspjwhsevrzpcd:textField"
-  },
+  } as any,
   options: { template: "tailwind", iconset: "bx" }
 };

package/src/organisms/form/settings/FormSettings.tsx

@@ -2,6 +2,7 @@ import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
 import { useEffect, useState } from "react";
 
+import { useI18n } from "../../../hooks/useI18n.js";
 import type { ChangedSubmission, FormOptions, FormType } from "../../../interfaces";
 import { Form } from "../../form/Form";
 import { getFormSettingsSchema } from "./FormSettings.schema";
@@ -13,7 +14,7 @@ export interface FormSettingsProps {
   options?: FormOptions;
 }
 
-function useFormSettings({ form: formDefinition, onSubmit = noop, options }: FormSettingsProps) {
+function useFormSettings({ form: formDefinition, onSubmit = noop }: FormSettingsProps) {
   const form = getFormSettingsSchema();
   const [isValid, setIsValid] = useState(true);
   const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));
@@ -33,7 +34,6 @@ function useFormSettings({ form: formDefinition, onSubmit = noop, options }: For
   }, [formDefinition?._id]);
 
   return {
-    options,
     form,
     type: formDefinition.type,
     submission,
@@ -47,16 +47,16 @@ function useFormSettings({ form: formDefinition, onSubmit = noop, options }: For
 }
 
 export function FormSettings(props: FormSettingsProps) {
-  const { form, submission, options = {}, onChange, onSubmit, isValid } = useFormSettings(props);
+  const { form, submission, onChange, onSubmit, isValid } = useFormSettings(props);
 
-  const i18n = options.i18n || ((f: string) => f);
+  const { t } = useI18n(props?.options?.i18n);
 
   return (
     <div>
-      <Form<FormSettingsType> form={form} submission={submission} onChange={onChange} options={options} />
+      <Form<FormSettingsType> form={form} submission={submission} onChange={onChange} options={props.options} />
 
       <button data-testid='submit' disabled={!isValid} className={"mt-5 btn btn-primary"} onClick={onSubmit} type={"submit"}>
-        {i18n("Save settings")}
+        {t("Save settings")}
       </button>
     </div>
   );

package/src/organisms/form/useForm.ts

@@ -1,5 +1,5 @@
+import { Form } from "@formio/js";
 import { EventEmitter2 } from "eventemitter2";
-import { Form } from "formiojs";
 import { type MutableRefObject, useEffect, useRef, useState } from "react";
 
 import type { ChangedSubmission, ComponentType, FormOptions, FormType, JSON, SubmissionType } from "../../interfaces";
@@ -13,9 +13,8 @@ export interface UseFormProps<Data extends { [key: string]: JSON } = { [key: str
   url?: string;
   form?: FormType;
   submission?: SubmissionType<Data>;
-  // TODO: once events is typed correctly in @formio/js options, we can remove this override
   options?: FormOptions;
-  FormClass?: any;
+  FormClass?: typeof Form;
   onFormReady?: (instance: Webform) => void;
   onPrevPage?: (page: number, submission: SubmissionType<Data>) => void;
   onNextPage?: (page: number, submission: SubmissionType<Data>) => void;

package/src/organisms/table/actions/ActionsTable.tsx

@@ -3,7 +3,8 @@ import classnames from "classnames";
 import noop from "lodash/noop";
 import { useState } from "react";
 
-import { ActionType } from "../../../interfaces";
+import { useI18n } from "../../../hooks/useI18n.js";
+import { ActionType, type FormOptions } from "../../../interfaces";
 import { Select } from "../../../molecules/forms/select/Select";
 import { Table, type TableProps } from "../../../molecules/table/Table";
 import { iconClass } from "../../../utils/iconClass";
@@ -11,15 +12,16 @@ import { iconClass } from "../../../utils/iconClass";
 export type ActionsTableProps = Omit<TableProps<ActionType>, "columns"> & {
   onAddAction?: (actionName: string) => void;
   availableActions?: { label: string; value: string }[];
+  i18n?: FormOptions["i18n"];
 };
 
 export function ActionsTable({ availableActions = [], onAddAction = noop, ...props }: ActionsTableProps) {
-  const { i18n = (f: string) => f } = props;
+  const { t } = useI18n(props.i18n);
   const [currentAction, setAction] = useState("");
 
   const columns: ColumnDef<ActionType>[] = [
     {
-      header: i18n("Action"),
+      header: t("Action"),
       accessorKey: "title"
     }
   ];
@@ -31,7 +33,7 @@ export function ActionsTable({ availableActions = [], onAddAction = noop, ...pro
           data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
-          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
+          options={[{ label: t("Select an action"), value: "" }].concat(availableActions)}
           onChange={(_, action) => setAction(action)}
         />
         <div className={"pl-3"}>
@@ -42,7 +44,7 @@ export function ActionsTable({ availableActions = [], onAddAction = noop, ...pro
             onClick={() => currentAction && onAddAction(currentAction)}
             type={"submit"}
           >
-            <i className={classnames(iconClass(undefined, "plus"), "mr-1")} /> {i18n("Add action")}
+            <i className={classnames(iconClass(undefined, "plus"), "mr-1")} /> {t("Add action")}
           </button>
         </div>
       </div>

package/src/organisms/table/forms/FormsTable.tsx

@@ -2,6 +2,7 @@ import "./components/FormsCell.js";
 
 import { ColumnDef } from "@tanstack/react-table";
 
+import { useI18n } from "../../../hooks/useI18n.js";
 import type { FormType } from "../../../interfaces";
 import { Table, TableProps } from "../../../molecules/table/Table";
 import { getComponent } from "../../../registries/components.js";
@@ -11,15 +12,15 @@ export type FormsTableProps = Omit<TableProps<FormType>, "columns"> & {
   tags?: { label: string; value: string }[];
 };
 
-export function FormsTable({ ...props }: FormsTableProps) {
-  const { i18n = (f: string) => f, tags } = props;
+export function FormsTable({ tags, ...props }: FormsTableProps) {
+  const { t } = useI18n(props.i18n);
   const Cell = getComponent<typeof FormsCell>("FormsCell");
 
   const columns: ColumnDef<any>[] = [
     {
-      header: i18n("Title"),
+      header: t("Title"),
       accessorKey: "title",
-      cell: (context) => <Cell {...context} i18n={i18n} />,
+      cell: (context) => <Cell {...context} i18n={t} />,
       meta: {
         cellProps: {
           colSpan: 2
@@ -27,7 +28,7 @@ export function FormsTable({ ...props }: FormsTableProps) {
       }
     },
     {
-      header: i18n("Tags"),
+      header: t("Tags"),
       accessorKey: "tags",
       meta: {
         cellProps: {

package/src/organisms/table/submissions/SubmissionsTable.stories.tsx

@@ -78,7 +78,7 @@ export default {
   },
   args: {
     form: FormSchema as any,
-    data: formSubmissions,
+    data: formSubmissions as any[],
     operations: [
       {
         title: "Edit",
@@ -125,18 +125,15 @@ export const Empty: Story = {
  */
 export const Translated: Story = {
   args: {
-    i18n: (key: string) => {
-      const translations: Record<string, string> = {
-        "Search...": "Rechercher...",
-        "No results found": "Aucun résultat trouvé",
-        "Loading...": "Chargement...",
-        Page: "Page",
-        of: "sur",
-        rows: "lignes",
-        Edit: "Éditer",
-        Delete: "Supprimer"
-      };
-      return translations[key] || key;
+    i18n: {
+      "Search...": "Rechercher...",
+      "No results found": "Aucun résultat trouvé",
+      "Loading...": "Chargement...",
+      Page: "Page",
+      of: "sur",
+      rows: "lignes",
+      Edit: "Éditer",
+      Delete: "Supprimer"
     }
   }
 };

package/src/organisms/views/FormViews.stories.tsx

@@ -175,7 +175,7 @@ export const Usage: Story = {
         title: "Anonymous"
       }
     ],
-    i18n: (key: string) => key,
+    i18n: {},
     onAction: () => console.log("Action triggered")
   }
 };
@@ -203,21 +203,18 @@ export const Translated: Story = {
         title: "Anonymous"
       }
     ],
-    i18n: (key: string) => {
-      const translations: Record<string, string> = {
-        Edit: "Éditer",
-        Data: "Données",
-        Preview: "Aperçu",
-        Actions: "Actions",
-        Access: "Accès",
-        Export: "Exporter",
-        Settings: "Paramètres",
-        "Form with First Name": "Formulaire avec prénom",
-        "First name": "Prénom",
-        "Last name": "Nom de famille",
-        Submit: "Soumettre"
-      };
-      return translations[key] || key;
+    i18n: {
+      Edit: "Éditer",
+      Data: "Données",
+      Preview: "Aperçu",
+      Actions: "Actions",
+      Access: "Accès",
+      Export: "Exporter",
+      Settings: "Paramètres",
+      "Form with First Name": "Formulaire avec prénom",
+      "First name": "Prénom",
+      "Last name": "Nom de famille",
+      Submit: "Soumettre"
     },
     onAction: () => console.log("Action triggered")
   }

package/src/organisms/views/FormViews.tsx

@@ -1,4 +1,5 @@
-import type { FormType, JSON, PermissionsResolver } from "../../interfaces/index.js";
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions, FormType, JSON, PermissionsResolver } from "../../interfaces/index.js";
 import type { Tab as DefaultTab } from "../../molecules/tabs/Tab.js";
 import type { TabList as DefaultTabList } from "../../molecules/tabs/TabList.js";
 import type { TabPanel as DefaultTabPanel } from "../../molecules/tabs/TabPanel.js";
@@ -19,7 +20,7 @@ export type FormViewsProps<Data extends { [key: string]: JSON } = { [key: string
   availableActions: ActionsTableProps["availableActions"];
   actions: ActionsTableProps["data"];
   roles?: FormAccessProps["roles"];
-  i18n?: (key: string) => string;
+  i18n?: FormOptions["i18n"];
   onAction: () => void;
   permissionsResolver?: PermissionsResolver<Data>;
 };
@@ -71,8 +72,9 @@ export function FormViews<Data extends { [key: string]: JSON } = { [key: string]
   actions,
   permissionsResolver,
   submissions,
-  i18n = (f) => f
+  ...props
 }: FormViewsProps<Data>) {
+  const { t } = useI18n(props.i18n);
   const Tabs = getComponent<typeof DefaultTabs>("Tabs");
   const TabList = getComponent<typeof DefaultTabList>("TabList");
   const Tab = getComponent<typeof DefaultTab>("Tab");
@@ -85,42 +87,42 @@ export function FormViews<Data extends { [key: string]: JSON } = { [key: string]
     <Tabs>
       <TabList>
         <Tab value={0} icon='edit'>
-          {i18n("Edit")}
+          {t("Edit")}
         </Tab>
         <Tab value={1} icon='data'>
-          {i18n("Data")}
+          {t("Data")}
         </Tab>
         <Tab value={2} icon='test-tube'>
-          {i18n("Preview")}
+          {t("Preview")}
         </Tab>
         <Tab value={3} icon='paper-plane'>
-          {i18n("Actions")}
+          {t("Actions")}
         </Tab>
         <Tab value={4} icon='lock'>
-          {i18n("Access")}
+          {t("Access")}
         </Tab>
         <Tab value={5} icon='download'>
-          {i18n("Export")}
+          {t("Export")}
         </Tab>
         <Tab value={6} icon='cog'>
-          {i18n("Settings")}
+          {t("Settings")}
         </Tab>
       </TabList>
       <TabsBody>
         <TabPanel value={0} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>
-          <FormEdit form={form} options={{ i18n }} />
+          <FormEdit form={form} />
         </TabPanel>
         <TabPanel value={1}>
           <SubmissionsTable<Data>
             className={"border-top-0"}
             form={form as FormType}
             data={submissions}
-            i18n={i18n}
+            i18n={props.i18n}
             operations={submissionsOperations}
           />
         </TabPanel>
         <TabPanel value={2}>
-          <FormPreview form={form as FormType} i18n={i18n} />
+          <FormPreview form={form as FormType} i18n={props.i18n} />
         </TabPanel>
         <TabPanel value={3}>
           <ActionsTable
@@ -128,14 +130,14 @@ export function FormViews<Data extends { [key: string]: JSON } = { [key: string]
             availableActions={availableActions}
             data={actions}
             operations={actionsOperations as any}
-            i18n={i18n}
+            i18n={props.i18n}
           />
         </TabPanel>
         <TabPanel value={4} className='pt-3'>
-          <FormAccess form={form as FormType} roles={roles} options={{ i18n }} />
+          <FormAccess form={form as FormType} roles={roles} options={props} />
         </TabPanel>
         <TabPanel value={5} className='pt-3'>
-          <FormExport i18n={i18n} />
+          <FormExport i18n={props.i18n} />
         </TabPanel>
         <TabPanel value={6} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>
           <FormSettings form={form as FormType} options={{}} />

package/src/utils/iconClass.ts

@@ -1,6 +1,4 @@
-import * as formio from "formiojs";
-
-const { Templates } = formio;
+import { Templates } from "@formio/js";
 
 export function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {
   return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);

package/dist/typings.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=typings.d.js.map

package/dist/typings.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typings.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/src/typings.d.ts

@@ -1,3 +0,0 @@
-declare module "formiojs/*" {
-  export = {} as any;
-}