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

package/src/contexts/FormioContext.tsx

@@ -0,0 +1,96 @@
+import { Formio as ImportedFormio } from "@formio/js";
+import { createContext, useEffect, useState } from "react";
+
+type BaseConfigurationArgs = {
+  baseUrl?: string;
+  projectUrl?: string;
+  Formio?: typeof ImportedFormio;
+};
+
+const useBaseConfiguration = ({ baseUrl, projectUrl, Formio }: BaseConfigurationArgs) => {
+  if (!Formio) {
+    if (baseUrl) {
+      ImportedFormio.setBaseUrl(baseUrl);
+    }
+    if (projectUrl) {
+      ImportedFormio.setProjectUrl(projectUrl);
+    }
+    return {
+      Formio: ImportedFormio,
+      baseUrl: ImportedFormio.baseUrl,
+      projectUrl: ImportedFormio.projectUrl
+    };
+  }
+
+  if (baseUrl) {
+    Formio.setBaseUrl(baseUrl);
+  }
+  if (projectUrl) {
+    Formio.setProjectUrl(projectUrl);
+  }
+
+  return {
+    Formio,
+    baseUrl: Formio.baseUrl,
+    projectUrl: Formio.projectUrl
+  };
+};
+
+const useAuthentication = ({ Formio }: { Formio: typeof ImportedFormio }) => {
+  const [token, setToken] = useState(Formio.getToken() || null);
+  const [isAuthenticated, setIsAuthenticated] = useState(!!token);
+
+  useEffect(() => {
+    const handleUserEvent = async (user: unknown) => {
+      if (user) {
+        setToken(Formio.getToken());
+        setIsAuthenticated(true);
+      } else if (isAuthenticated) {
+        await Formio.logout();
+        setToken(null);
+        setIsAuthenticated(false);
+      }
+    };
+
+    const handleStaleToken = async () => {
+      if (isAuthenticated) {
+        const user = await Formio.currentUser();
+        if (!user) {
+          setToken(null);
+          setIsAuthenticated(false);
+        }
+      }
+    };
+
+    Formio.events.on("formio.user", handleUserEvent);
+    handleStaleToken();
+
+    return () => {
+      Formio.events.off("formio.user", handleUserEvent);
+    };
+  }, [isAuthenticated, Formio]);
+
+  const logout = async () => {
+    await Formio.logout();
+    setToken(null);
+    setIsAuthenticated(false);
+  };
+
+  return { token, setToken, isAuthenticated, logout };
+};
+
+export const FormioContext = createContext<(ReturnType<typeof useBaseConfiguration> & ReturnType<typeof useAuthentication>) | null>(null);
+
+export function FormioProvider({
+  children,
+  baseUrl,
+  projectUrl,
+  Formio
+}: {
+  children: React.ReactNode;
+} & BaseConfigurationArgs) {
+  const baseConfig = useBaseConfiguration({ baseUrl, projectUrl, Formio });
+  const auth = useAuthentication({ Formio: baseConfig.Formio });
+  const formio = { ...baseConfig, ...auth };
+  return <FormioContext.Provider value={formio}>{children}</FormioContext.Provider>;
+}

package/src/hooks/useFormioContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { FormioContext } from "../contexts/FormioContext";
+
+export function useFormioContext() {
+  const context = useContext(FormioContext);
+
+  if (!context) {
+    throw new Error("useFormioContext must be used within a FormioProvider component.");
+  }
+
+  return context;
+}

package/src/hooks/useI18n.ts

@@ -0,0 +1,9 @@
+import type { FormOptions } from "../interfaces/index.js";
+
+export function useI18n(labels?: FormOptions["i18n"]) {
+  return {
+    t: (key: string, defaultValue: string = key) => {
+      return labels?.[key] || defaultValue;
+    }
+  };
+}

package/src/index.ts

@@ -1,15 +1,19 @@
-import Webform from "formiojs/Webform";
-import WebformBuilder from "formiojs/WebformBuilder";
-import Wizard from "formiojs/Wizard";
-import WizardBuilder from "formiojs/WizardBuilder";
-
+export * from "./interfaces";
 export {
+  Builders,
+  Components,
+  DefaultEvaluator,
+  Displays,
+  EventEmitter,
+  Form,
+  FormBuilder,
+  Formio,
+  Licenses,
+  Providers,
+  registerModule,
+  Templates,
+  useModule,
+  Utils,
   Webform,
-  WebformBuilder,
-  Wizard,
-  WizardBuilder
-  // editFormUtils,
-};
-
-export * from "./interfaces";
-export { Components, Formio, Templates, Utils } from "formiojs";
+  Widgets
+} from "@formio/js";

package/src/interfaces/ComponentType.ts

@@ -1,3 +1,3 @@
-import { ExtendedComponentSchema } from "formiojs";
+import type { Component } from "@formio/core";
 
-export type ComponentType = ExtendedComponentSchema;
+export type ComponentType = Omit<Component, "components"> & { components?: ComponentType[] } & { title?: string } & Record<string, unknown>;

package/src/interfaces/FormBuilderOptions.ts

@@ -0,0 +1,9 @@
+import { FormBuilder } from "@formio/js";
+
+import type { FormOptions } from "./FormOptions.js";
+
+export type FormBuilderOptions = FormBuilder["options"] & {
+  template?: string;
+  iconset?: string;
+  i18n?: FormOptions["i18n"];
+};

package/src/interfaces/FormOptions.ts

@@ -1,14 +1,8 @@
-import type { EventEmitter2 } from "eventemitter2";
+import { EventEmitter, Form } from "@formio/js";
 
-export interface FormOptions {
-  iconset?: string;
-  readOnly?: boolean;
-  noAlerts?: boolean;
-  i18n?: (f: string) => string;
-  template?: string;
-  saveDraft?: boolean;
-  events?: EventEmitter2;
-  hooks?: {
-    customValidation?: Function;
-  };
-}
+import type { FormType } from "./FormType.js";
+
+export type FormOptions = Form["options"] & {
+  events?: EventEmitter;
+  currentForm?: FormType;
+};

package/src/interfaces/FormType.ts

@@ -1,13 +1,7 @@
-import type { ComponentType } from "./ComponentType";
+import type { Form } from "@formio/core";
 
-export type FormType = {
-  _id?: string;
-  title?: string;
-  name?: string;
-  machineName?: string;
+import type { ComponentType } from "./ComponentType.js";
+
+export type FormType = Omit<Form, "components"> & {
   components: ComponentType[];
-  tags?: string[];
-  action?: string;
-  properties?: Record<string, any>;
-  [key: string]: any;
-};
+} & Record<string, unknown>;

package/src/interfaces/SubmissionType.ts

@@ -1,18 +1,19 @@
-import type { ComponentType } from "./ComponentType";
+import type { Component, Submission } from "@formio/core";
 
 export type JSON = unknown | string | number | boolean | null | undefined | JSON[] | { [key: string]: JSON };
 
-export interface SubmissionType<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends Record<string, JSON> {
-  _id?: string;
+export type SubmissionType<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<Partial<Submission>, "data"> & {
   data: Data;
-  metadata?: { [key: string]: JSON };
-  state?: string;
-}
+};
 
-export interface ChangedSubmission<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends SubmissionType<Data> {
+export interface ChangedSubmission<
+  Data extends { [key: string]: JSON } = {
+    [key: string]: JSON;
+  }
+> extends SubmissionType<Data> {
   data: Data;
   changed?: {
-    component: ComponentType;
+    component: Component;
     instance: any;
     value: unknown;
   } & Record<string, JSON>;

package/src/interfaces/index.ts

@@ -1,6 +1,7 @@
 export * from "./ActionType";
 export * from "./ColumnIdentifier";
 export * from "./ComponentType";
+export * from "./FormBuilderOptions";
 export * from "./FormOptions";
 export * from "./FormType";
 export * from "./Operation";

package/src/molecules/button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Icon } from "../../atoms/icon/Icon";
 import { Button, BUTTON_VARIANTS } from "./Button";

package/src/molecules/forms/form-control/FormControl.spec.tsx

@@ -1,9 +1,12 @@
+import { Formio } from "@formio/js";
 import { render, screen } from "@testing-library/react";
 
 import { iconClass } from "../../../utils/iconClass";
 import { FormControl } from "./FormControl";
 import { Sandbox } from "./FormControl.stories";
 
+Formio.setProjectUrl("https://api.form.io");
+
 describe("form-control", () => {
   it("should display form control component", () => {
     render(<FormControl {...Sandbox.args} name='test' />);
@@ -34,7 +37,7 @@ describe("form-control", () => {
   });
 
   it("should display prefix", () => {
-    const fontAwsomeCalendarIcon = "fa fa-calendar";
+    const fontAwsomeCalendarIcon = "bi bi-calendar";
     const prefix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
     render(<FormControl {...Sandbox.args} name='testPrefix' before={prefix} />);
 
@@ -48,7 +51,7 @@ describe("form-control", () => {
   });
 
   it("should display suffix", () => {
-    const fontAwsomeCalendarIcon = "fa fa-calendar";
+    const fontAwsomeCalendarIcon = "bi bi-calendar";
     const suffix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
     render(<FormControl {...Sandbox.args} name='testSuffix' after={suffix} />);
 

package/src/molecules/forms/form-control/FormControl.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../utils/iconClass";
 import { FormControl } from "./FormControl";

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

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

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/input-tags/components/ReactTags.stories.tsx

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { type CreatableProps } from "react-select/creatable";
 
 import { iconClass } from "../../../../utils/iconClass";

package/src/molecules/forms/input-text/InputText.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../utils/iconClass";
 import { useValue } from "../../__fixtures__/useValue.hook";

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

@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

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/forms/select/components/HtmlSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./HtmlSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/forms/select/components/ReactSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "../all";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import tailwind from "@tsed/tailwind-formio";
 
 import { Loader } from "./Loader";

package/src/molecules/modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Modal, ModalProps, useModal } from "./Modal";
 

package/src/molecules/pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import "../forms/select/all";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { useEffect, useState } from "react";
 
 import { Pagination } from "./all";

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>
@@ -95,15 +96,14 @@ export function Pagination(props: PaginationProps) {
           multiple={false}
           layout={props.layout}
           onChange={(_, value) => {
-            console.log("On page change", value);
             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>
@@ -111,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

@@ -1,7 +1,7 @@
 import "./all";
 
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { SubmissionType } from "../../interfaces";
 import FormType from "../__fixtures__/form-schema.json";
@@ -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/filters/SelectFilter.tsx

@@ -9,7 +9,7 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
   const Select = getComponent<typeof DefaultSelect>("Select");
   const columnFilterValue = header.column.getFilterValue();
   const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
-  console.log(uniqValues);
+
   const opts =
     options.layout === "choicesjs"
       ? {

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}`;