@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

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

@@ -1,4 +1,7 @@
-import type { FormOptions } from "../../../interfaces";
+import classnames from "classnames";
+import type { CSSProperties } from "react";
+
+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";
@@ -7,7 +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?: CSSProperties;
 }
 
 export function FormEdit({
@@ -17,6 +23,8 @@ export function FormEdit({
   enableTags,
   onSubmit: initialOnSubmit,
   onCopy: initialOnCopy,
+  className,
+  style,
   ...props
 }: FormEditProps) {
   const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({
@@ -28,13 +36,12 @@ 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");
-  console.log(FormParameters, FormBuilder, FormEditCTAs);
+
   return (
-    <div className='form-edit-container'>
+    <div className={classnames("form-edit-container", className)} style={style}>
       <div className='form-edit'>
         <FormParameters
           enableTags={enableTags}
@@ -43,10 +50,11 @@ export function FormEdit({
           key={`form-settings-${form._id}`}
           form={form}
           onChange={setChange}
+          layout={props.layout}
         />
         <FormEditCTAs
           key={`form-edit-ctas-${form._id}`}
-          options={options}
+          options={props.options}
           hasRedo={hasRedo}
           hasUndo={hasUndo}
           disabled={!(isValid && hasChanged)}
@@ -63,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/FormParameters.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 
 import type { FormType } from "../../../interfaces";
-import { InputTags } from "../../../molecules/forms/input-tags/InputTags";
+import { InputTags as DefaultInputTags } from "../../../molecules/forms/input-tags/InputTags";
 import { InputText as DefaultInputText } from "../../../molecules/forms/input-text/InputText";
 import { Select as DefaultSelect } from "../../../molecules/forms/select/Select";
 import { getComponent, registerComponent } from "../../../registries/components";
@@ -13,13 +13,14 @@ export const defaultDisplayChoices = [
 ];
 
 export interface FormParametersProps {
-  onChange?: (name: string, value: any) => void;
+  onChange?: (name: string | undefined, value: any) => void;
   form: Partial<FormType>;
   typeChoices?: { label: string; value: any }[];
   displayChoices?: { label: string; value: any }[];
   enableTags?: boolean;
   className?: string;
   baseUrl?: string;
+  layout?: "html5" | "choicesjs" | "react";
   readonly?: Record<string, boolean>;
 }
 
@@ -31,12 +32,14 @@ export function FormParameters({
   displayChoices = defaultDisplayChoices,
   className = "",
   readonly = {},
+  layout,
   baseUrl = window.location.origin
 }: FormParametersProps): ReactElement {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
 
   const InputText = getComponent<typeof DefaultInputText>("InputText");
   const Select = getComponent<typeof DefaultSelect>("Select");
+  const InputTags = getComponent<typeof DefaultInputTags>("InputTags");
 
   return (
     <div className={`form-edit__settings ${className}`}>
@@ -83,6 +86,7 @@ export function FormParameters({
       </div>
       <div>
         <Select
+          layout={layout}
           label={"Display as"}
           name={"display"}
           disabled={readonly["display"]}
@@ -93,12 +97,12 @@ export function FormParameters({
       </div>
       {hasTypeChoices && (
         <div>
-          <Select label={"Type"} name={"type"} value={form.type} options={typeChoices} onChange={onChange} />
+          <Select layout={layout} label={"Type"} name={"type"} value={form.type} options={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
         <div>
-          <InputTags label={"Tags"} name={"tags"} value={form.tags} onChange={onChange} />
+          <InputTags layout={layout} label={"Tags"} name={"tags"} value={form.tags} onChange={onChange} />
         </div>
       )}
     </div>

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

@@ -3,7 +3,11 @@ import "../../../molecules/button/Button";
 import "../../../molecules/forms/input-text/InputText";
 import "../../../molecules/forms/select/Select";
 import "../../../molecules/forms/select/components/HtmlSelect";
+import "../../../molecules/forms/select/components/ChoicesSelect";
+import "../../../molecules/forms/select/components/ReactSelect";
 import "../../../molecules/forms/input-tags/InputTags";
+import "../../../molecules/forms/input-tags/components/ReactTags";
+import "../../../molecules/forms/input-tags/components/ChoicesTags";
 
 export * from "./FormBuilder";
 export * from "./FormEdit";

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 },
@@ -124,7 +125,11 @@ export function useFormBuilder({ components, display, options = {}, onBuilderRea
             onBuilderReady && onBuilderReady(builderRef.current);
           })
           .catch((er) => {
-            console.error(er);
+            console.error({
+              event: "FORM_BUILDER_RECREATE_ERROR",
+              message: er.message,
+              stack: er.stack
+            });
           });
       } else if (components !== currentComponents) {
         builderRef.current.form = {

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

@@ -28,7 +28,7 @@ export function useFormEdit(props: UseFormEditHookProps) {
   };
 
   useEffect(() => {
-    if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {
+    if (props.form && (current?._id !== props.form._id || current.modified !== props.form.modified)) {
       dispatchFormAction({ type: "replaceForm", value: props.form });
     }
   }, [props.form]);
@@ -43,8 +43,8 @@ export function useFormEdit(props: UseFormEditHookProps) {
   const undo = () => dispatchFormAction({ type: "undo" });
   const reset = () => dispatchFormAction({ type: "reset" });
 
-  const setChange = (path: string, value: any) => {
-    formChange({ ...current, [path]: value });
+  const setChange = (path: string | undefined, value: any) => {
+    formChange({ ...current, [path!]: value });
   };
 
   return {

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

@@ -0,0 +1,68 @@
+import "../../../molecules/card/Card.js";
+import "../../../atoms/icon/Icon.js";
+
+import { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FormExport } from "./FormExport.js";
+
+/**
+ * FormExport component displays options to export form schema and submissions
+ */
+export default {
+  title: "form/export/FormExport",
+  component: FormExport,
+  argTypes: {
+    i18n: {
+      description: "Internationalization function"
+    },
+    onClick: {
+      action: "clicked",
+      description: "Callback when an export button is clicked"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Component that displays options to export form schema as JSON and form submissions as JSON or CSV."
+      }
+    }
+  }
+} satisfies Meta<typeof FormExport>;
+
+type Story = StoryObj<typeof FormExport>;
+
+/**
+ * Default view with form type set to "form"
+ */
+export const Usage: Story = {
+  args: {
+    i18n: {},
+    onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
+  }
+};
+
+/**
+ * View with form type set to "resource"
+ */
+export const Resource: Story = {
+  args: {
+    i18n: {},
+    onClick: (action: string, format: string) => console.log(`Action: ${action}, Format: ${format}`)
+  }
+};
+
+/**
+ * View with custom i18n function
+ */
+export const Translated: Story = {
+  args: {
+    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}`)
+  }
+};

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

@@ -0,0 +1,61 @@
+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?: FormOptions["i18n"];
+  onClick?: (action: "export:form" | "export:submissions", format: "json" | "csv") => void;
+}
+
+export function FormExport({ onClick, ...props }: FormExportProps) {
+  const FCard = getComponent<typeof Card>("Card");
+  const { t } = useI18n(props?.i18n);
+
+  return (
+    <div>
+      <div className={"flex gap-3"}>
+        <div className={"sm:w-1/2"}>
+          <FCard
+            label={
+              (
+                <span className={"flex items-center"}>
+                  <Icon name={"detail"} className={"mr-1 text-secondary"} /> {t(`Export schema`)}
+                </span>
+              ) as any
+            }
+          >
+            <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"} /> {t(`Json`)}
+              </button>
+            </div>
+          </FCard>
+        </div>
+        <div className={"sm:w-1/2"}>
+          <FCard
+            label={
+              (
+                <span className={"flex items-center"}>
+                  <Icon name={"data"} className={"mr-1 text-secondary"} /> {t(`Export submissions`)}
+                </span>
+              ) as any
+            }
+          >
+            <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"} /> {t(`Json`)}
+              </button>
+              <button className={"btn btn-primary"} onClick={() => onClick?.("export:submissions", "csv")}>
+                <Icon name={"spreadsheet"} className={"mr-1"} /> {t(`Csv`)}
+              </button>
+            </div>
+          </FCard>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import "../../../molecules/card/Card.js";
+import "../Form.js";
+
+import { Meta, StoryObj } from "@storybook/react-vite";
+
+import formFirstname from "../../__fixtures__/form-firstname.fixture.json";
+import { FormPreview } from "./FormPreview.js";
+
+/**
+ * FormPreview component displays a form preview inside a card with a background
+ */
+export default {
+  title: "form/preview/FormPreview",
+  component: FormPreview,
+  argTypes: {
+    form: {
+      description: "The form object to preview",
+      control: "object"
+    },
+    i18n: {
+      description: "Internationalization function"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Component that displays a form preview inside a card with a background."
+      }
+    }
+  }
+} satisfies Meta<typeof FormPreview>;
+
+type Story = StoryObj<typeof FormPreview>;
+
+/**
+ * Basic form preview with a simple form
+ */
+export const Usage: Story = {
+  args: {
+    form: formFirstname as any,
+    i18n: {}
+  }
+};
+
+/**
+ * Form preview with custom translations
+ */
+export const Translated: Story = {
+  args: {
+    form: formFirstname as any,
+    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

@@ -0,0 +1,23 @@
+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?: FormOptions["i18n"];
+}
+
+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={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"
-  },
-  options: { template: "tailwind", iconset: "bx" }
+  } as any,
+  options: { template: "tailwind", iconset: "lu" }
 };

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/modal/RemoveModal.stories.tsx

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

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

@@ -1,6 +1,7 @@
 import "../../../molecules/forms/select/all.ts";
+import "../../../molecules/table/all.ts";
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import availableActions from "../../__fixtures__/form-actions.json";
@@ -44,12 +45,13 @@ describe("ActionsTable", () => {
 
     const btn = screen.getByTestId("action-table-add");
     const cells = screen.getAllByRole("cell");
-    const options = screen.getAllByRole("option");
+    const options = within(screen.getByTestId("action-table-select")).getAllByRole("option");
 
     expect(btn).toHaveProperty("disabled");
     expect(btn.innerHTML).toMatch("Add action");
     expect(cells[0].innerHTML).toMatch("Save Submission");
-    expect(options.length).toEqual(availableActions.length + 1);
+
+    expect(options.length).toEqual(17);
 
     expect(options[0].innerHTML).toMatch("Select an action");
     expect(options[1].innerHTML).toMatch("Webhook (Premium)");
@@ -70,9 +72,9 @@ describe("ActionsTable", () => {
     render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
     const btn = screen.getByTestId("action-table-add");
-    const select = screen.getByRole("combobox");
+    const select = screen.getByTestId("action-table-select");
 
-    await userEvent.selectOptions(select, String(args.availableActions[1].value));
+    await userEvent.selectOptions(select, "sql");
 
     fireEvent.click(btn);