@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/src/organisms/form/Form.tsx

@@ -0,0 +1,29 @@
+import { JSON } from "../../interfaces";
+import { useForm, UseFormProps } from "./useForm";
+
+class CSSProperties {}
+
+export interface FormProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseFormProps<Data> {
+  ["data-testid"]?: string;
+  /**
+   *
+   */
+  className?: string;
+
+  style?: CSSProperties;
+}
+
+export function Form<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  style,
+  className,
+  "data-testid": dataTestId = "formio-container",
+  ...props
+}: Partial<FormProps<Data>>) {
+  const { element } = useForm<Data>(props);
+
+  return (
+    <div>
+      <div data-testid={dataTestId} style={style} className={className} ref={element} />
+    </div>
+  );
+}

package/src/{components/form-access/formAccess.schema.ts → organisms/form/access/FormAccess.schema.ts}

@@ -1,8 +1,6 @@
-import { ExtendedComponentSchema } from "formiojs";
+import type { ComponentType, FormType } from "../../../interfaces";
 
-import { FormSchema } from "../../interfaces/FormSchema";
-
-export function getRoleComponent({ label, key, description, choices, data }: any): ExtendedComponentSchema {
+export function getRoleComponent({ label, key, description, choices, data }: any): ComponentType {
   return {
     label,
     key,
@@ -34,7 +32,7 @@ function toDescription(description: string, hr = true): string {
   return '<span class="text-sm">' + description + "</span> " + (hr ? '<hr class="mt-6 mb-5 border-gray-200 mx-20"/>' : "");
 }
 
-export function getSubmissionPermissionForm({ choices }: any): FormSchema {
+export function getSubmissionPermissionForm({ choices }: any): FormType {
   return {
     description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [
@@ -107,7 +105,7 @@ export function getSubmissionPermissionForm({ choices }: any): FormSchema {
   };
 }
 
-export function getAccessPermissionForm({ choices }: any): FormSchema {
+export function getAccessPermissionForm({ choices }: any): FormType {
   return {
     description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [

package/src/{components/form-access/formAccess.stories.tsx → organisms/form/access/FormAccess.stories.tsx}

@@ -1,10 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
-import { FormAccess } from "./formAccess.component";
+import { FormAccess } from "./FormAccess";
 
+/**
+ *
+ * ```tsx
+ * import {FormAccess} from "@tsed/react-formio/organisms/form-access/FormAccess";
+ * ```
+ */
 export default {
-  title: "ReactFormio/FormAccess",
+  title: "form/access/FormAccess",
   component: FormAccess,
   argTypes: {
     onSubmit: { action: "onSubmit" }

package/src/{components/form-access/formAccess.component.tsx → organisms/form/access/FormAccess.tsx}

@@ -1,22 +1,21 @@
-import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
+import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
-import type { FormOptions, FormSchema, Submission } from "../../interfaces";
-import { Card } from "../card/card.component";
-import { Form } from "../form/form.component";
-import { ChangedSubmission } from "../form/useForm.hook";
+import type { FormOptions, FormType, SubmissionType } from "../../../interfaces";
+import { Card } from "../../../molecules/card/Card";
+import { Form } from "../../form/Form";
 import {
-  AccessRoles,
+  AccessRolesType,
   dataAccessToSubmissions,
-  FormAccessSchema,
+  FormAccessType,
   getFormAccess,
   shouldUpdate,
-  SubmissionAccess,
+  SubmissionAccessType,
   submissionsToDataAccess,
   updateSubmissions
-} from "./formAccess.utils";
+} from "./FormAccess.utils";
 
 export interface FormAccessProps {
-  form: Partial<FormSchema>;
+  form: Partial<FormType>;
   roles: any;
   onSubmit?: Function;
   options?: FormOptions;
@@ -28,7 +27,7 @@ function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormA
   const [submissions, setSubmissions] = useState(() => dataAccessToSubmissions(formDefinition, form));
 
   const onChange = useCallback(
-    (type: string, submission: Submission<AccessRoles>) => {
+    (type: string, submission: SubmissionType<AccessRolesType>) => {
       updateSubmissions(type, submission, submissions, setSubmissions);
     },
     [submissions]
@@ -57,12 +56,12 @@ function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormA
 
 interface NamedFormAccessProps {
   name: "access" | "submissionAccess";
-  form: FormAccessSchema;
-  submissions: SubmissionAccess;
+  form: FormAccessType;
+  submissions: SubmissionAccessType;
   options: any;
   onSubmit: any;
 
-  onChange(name: "access" | "submissionAccess", submission: Submission<AccessRoles>): void;
+  onChange(name: "access" | "submissionAccess", submission: SubmissionType<AccessRolesType>): void;
 }
 
 function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit, children }: PropsWithChildren<NamedFormAccessProps>) {
@@ -70,12 +69,11 @@ function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit,
 
   return (
     <>
-      <Form
-        name={name}
+      <Form<AccessRolesType>
         form={form[name]}
         submission={submissions[name]}
-        onChange={({ data, isValid }: ChangedSubmission<AccessRoles>) => {
-          isValid && onChange(name, { data });
+        onChange={({ data, isValid }) => {
+          isValid && onChange(name, { data: data as unknown as AccessRolesType });
           setIsValid(isValid);
         }}
         options={options}

package/src/{components/form-access/formAccess.utils.spec.ts → organisms/form/access/FormAccess.utils.spec.ts}

@@ -1,5 +1,11 @@
-import { FormSchema } from "../../interfaces";
-import { dataAccessToSubmissions, getFormAccess, SubmissionAccess, submissionsToDataAccess, updateSubmissions } from "./formAccess.utils";
+import type { FormType } from "../../../interfaces";
+import {
+  dataAccessToSubmissions,
+  getFormAccess,
+  SubmissionAccessType,
+  submissionsToDataAccess,
+  updateSubmissions
+} from "./FormAccess.utils";
 
 const roles: any[] = [
   {
@@ -13,7 +19,7 @@ const roles: any[] = [
 describe("formAccess.utils", () => {
   describe("dataAccessToSubmissions()", () => {
     it("should map data access to form submissions", () => {
-      const data: FormSchema = {
+      const data: FormType = {
         _id: "id",
         components: [],
         access: [
@@ -60,7 +66,7 @@ describe("formAccess.utils", () => {
   });
   describe("submissionsToDataAccess()", () => {
     it("should map form submissions to data access", () => {
-      const submissions: SubmissionAccess = {
+      const submissions: SubmissionAccessType = {
         access: {
           data: {
             delete_all: [],
@@ -85,7 +91,7 @@ describe("formAccess.utils", () => {
         }
       };
 
-      const originalForm: FormSchema = {
+      const originalForm: FormType = {
         _id: "id",
         components: [],
         access: [
@@ -173,7 +179,7 @@ describe("formAccess.utils", () => {
 
   describe("updateSubmissions()", () => {
     it("should update submissions", () => {
-      const submissions: SubmissionAccess = {
+      const submissions: SubmissionAccessType = {
         access: {
           data: {
             delete_all: [],
@@ -239,7 +245,7 @@ describe("formAccess.utils", () => {
       });
     });
     it("should do nothing", () => {
-      const submissions: SubmissionAccess = {
+      const submissions: SubmissionAccessType = {
         access: {
           data: {
             delete_all: [],

package/src/{components/form-access/formAccess.utils.ts → organisms/form/access/FormAccess.utils.ts}

@@ -1,11 +1,9 @@
-import { ExtendedComponentSchema } from "formiojs";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
 
-import { FormSchema, Submission } from "../../interfaces";
-import { RoleSchema } from "../../interfaces/RoleSchema";
-import { getAccessPermissionForm, getSubmissionPermissionForm } from "./formAccess.schema";
+import type { ComponentType, FormType, RoleType, SubmissionType } from "../../../interfaces";
+import { getAccessPermissionForm, getSubmissionPermissionForm } from "./FormAccess.schema";
 
 export interface Choice {
   label: string;
@@ -17,19 +15,19 @@ export interface Access {
   type: string;
 }
 
-export type AccessRoles = Record<string, string[]>;
+export type AccessRolesType = Record<string, string[]>;
 
-export type FormAccessSchema = {
-  access: FormSchema;
-  submissionAccess: FormSchema;
+export type FormAccessType = {
+  access: FormType;
+  submissionAccess: FormType;
 };
 
-export type SubmissionAccess = {
-  access: Submission<AccessRoles>;
-  submissionAccess: Submission<AccessRoles>;
+export type SubmissionAccessType = {
+  access: SubmissionType<AccessRolesType>;
+  submissionAccess: SubmissionType<AccessRolesType>;
 };
 
-function rolesToChoices(roles: RoleSchema[]): Choice[] {
+function rolesToChoices(roles: RoleType[]): Choice[] {
   return Object.values(roles).map((role) => {
     return {
       label: role.title || "",
@@ -38,7 +36,7 @@ function rolesToChoices(roles: RoleSchema[]): Choice[] {
   });
 }
 
-function accessToHash(keys: (string | undefined)[] | undefined, access: Access[] = []): AccessRoles {
+function accessToHash(keys: (string | undefined)[] | undefined, access: Access[] = []): AccessRolesType {
   const hash = Object.values(access).reduce((o: any, role: any) => {
     o[role.type] = role.roles;
     return o;
@@ -52,7 +50,7 @@ function accessToHash(keys: (string | undefined)[] | undefined, access: Access[]
   }, {});
 }
 
-function hashToAccess(data: AccessRoles) {
+function hashToAccess(data: AccessRolesType) {
   const accessRoles: any[] = [];
 
   Object.entries(data).forEach(([accessType, roles]) => {
@@ -68,7 +66,7 @@ function hashToAccess(data: AccessRoles) {
   return accessRoles;
 }
 
-export function getFormAccess(roles: RoleSchema[]): FormAccessSchema {
+export function getFormAccess(roles: RoleType[]): FormAccessType {
   const choices = rolesToChoices(roles);
   const access = getAccessPermissionForm({ choices });
   const submissionAccess = getSubmissionPermissionForm({ choices });
@@ -79,8 +77,8 @@ export function getFormAccess(roles: RoleSchema[]): FormAccessSchema {
   };
 }
 
-export function dataAccessToSubmissions(form: Partial<FormSchema>, formAccess: FormAccessSchema): SubmissionAccess {
-  const getKeys = (components: ExtendedComponentSchema[]) => components.map(({ key }) => key);
+export function dataAccessToSubmissions(form: Partial<FormType>, formAccess: FormAccessType): SubmissionAccessType {
+  const getKeys = (components: ComponentType[]) => components.map(({ key }) => key);
 
   return {
     access: {
@@ -92,7 +90,7 @@ export function dataAccessToSubmissions(form: Partial<FormSchema>, formAccess: F
   };
 }
 
-export function submissionsToDataAccess(form: Partial<FormSchema>, submissions: SubmissionAccess): Partial<FormSchema> {
+export function submissionsToDataAccess(form: Partial<FormType>, submissions: SubmissionAccessType): Partial<FormType> {
   return {
     ...cloneDeep(form),
     access: hashToAccess(submissions.access.data),
@@ -100,11 +98,16 @@ export function submissionsToDataAccess(form: Partial<FormSchema>, submissions:
   };
 }
 
-export function shouldUpdate(type: string, submission: Submission<AccessRoles>, submissions: SubmissionAccess) {
+export function shouldUpdate(type: string, submission: SubmissionType<AccessRolesType>, submissions: SubmissionAccessType) {
   return !isEqual(submission.data, (submissions as any)[type].data);
 }
 
-export function updateSubmissions(type: string, submission: Submission<AccessRoles>, submissions: SubmissionAccess, cb: Function = noop) {
+export function updateSubmissions(
+  type: string,
+  submission: SubmissionType<AccessRolesType>,
+  submissions: SubmissionAccessType,
+  cb: Function = noop
+) {
   if (shouldUpdate(type, submission, submissions)) {
     submissions = {
       ...submissions,

package/src/{components/form-action/formAction.stories.tsx → organisms/form/action/FormAction.stories.tsx}

@@ -1,27 +1,25 @@
-import React from "react";
-
-import { FormAction } from "./formAction.component";
+import { FormAction } from "./FormAction";
 
+/**
+ *
+ * ```tsx
+ * import {FormAction} from "@tsed/react-formio/organisms/form/action/FormAction";
+ * ```
+ */
 export default {
-  title: "ReactFormio/FormAction",
+  title: "form/action/FormAction",
   component: FormAction,
   argTypes: {
     onSubmit: { action: "onSubmit" },
 
     type: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     form: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {

package/src/{components/form-action/formAction.component.tsx → organisms/form/action/FormAction.tsx}

@@ -1,10 +1,10 @@
 import FormioUtils from "formiojs/utils";
-import React, { PropsWithChildren, ReactElement } from "react";
+import { PropsWithChildren, ReactElement } from "react";
 
-import { ActionDefaultsSchema, ActionSchema, FormOptions, Submission } from "../../interfaces";
-import { Form } from "../form/form.component";
+import { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from "../../../interfaces";
+import { Form } from "../../form/Form";
 
-function mapData(options: any, defaults: ActionDefaultsSchema): any {
+function mapData(options: any, defaults: ActionDefaultsType): any {
   return {
     ...defaults,
     ...options
@@ -33,9 +33,9 @@ function mapSettingsForm({ action, ...settingsForm }: any): any {
 }
 
 export interface FormActionProps {
-  actionInfo: Partial<ActionSchema>;
-  submission?: Partial<Submission>;
-  onSubmit?: (submission: Submission<ActionSchema>) => void;
+  actionInfo: Partial<ActionType>;
+  submission?: Partial<SubmissionType>;
+  onSubmit?: (submission: SubmissionType<ActionType>) => void;
   options: FormOptions;
 }
 
@@ -51,7 +51,7 @@ export function FormAction({ actionInfo, children, onSubmit, options, ...props }
     <div>
       {children}
 
-      <Form form={form} submission={submission} onSubmit={onSubmit} options={options} />
+      <Form<ActionType> form={form} submission={submission} onSubmit={onSubmit} options={options} />
 
       {children}
     </div>

package/src/organisms/form/builder/FormBuilder.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import form from "../../__fixtures__/form.fixture.json";
+import formWizard from "../../__fixtures__/form-wizard.fixture.json";
+import { FormBuilder } from "./FormBuilder";
+
+/**
+ * The [FormBuilder](/story/reactformio-formbuilder--sandbox) class can be used to embed a form builder directly in your React application.
+ *
+ * Please note that you'll need to include the CSS for the form builder from formio.js as well.
+ *
+ * Please note that the [FormBuilder](/story/reactformio-formbuilder--sandbox) component does not load and save from/to an url.
+ * You must handle the form definition loading and saving yourself or use the [FormEdit](/docs/documentation-formedit--docs) component.
+ *
+ * ```tsx
+ * import {FormBuilder} from "@tsed/react-formio/organisms/form/builder/FormBuilder";
+ * ```
+ *
+ */
+export default {
+  title: "form/builder/FormBuilder",
+  component: FormBuilder,
+  argTypes: {
+    display: {
+      control: "select",
+      options: ["form", "wizard", "pdf"]
+    },
+    components: {
+      control: "object"
+    },
+    options: {
+      description:
+        "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
+      control: "object"
+    },
+    onBuilderReady: {
+      description:
+        "A callback function that gets called when the form builder has rendered. It is useful for accessing the underlying @formio/js FormBuilder instance.",
+      action: "onBuilderReady"
+    },
+    onChange: {
+      description: "A callback function that gets called when the form being built has changed.",
+      action: "onChange"
+    },
+    onSaveComponent: {
+      description: "A callback function that gets called when a component is saved in the builder.",
+      action: "onSaveComponent"
+    },
+    onEditComponent: {
+      description: "A callback function that gets called when a component is edited in the builder.",
+      action: "onEditComponent"
+    },
+    onUpdateComponent: {
+      description: "A callback function that gets called when a component is updated in the builder.",
+      action: "onUpdateComponent"
+    },
+    onDeleteComponent: {
+      description: "A callback function that gets called when a component is deleted in the builder.",
+      action: "onDeleteComponent"
+    }
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof FormBuilder>;
+
+type Story = StoryObj<typeof FormBuilder>;
+/**
+ * A traditional web form that is typically filled out by end-users from top to bottom
+ */
+export const WebForm: Story = {
+  args: {
+    display: form.display as any,
+    options: { template: "tailwind", iconset: "bx" },
+    components: form.components as any
+  }
+};
+/**
+ * This form configuration allows users to progress through the form in bite-size sections instead of presenting the entire form to the user.
+ * If you are creating a form containing many fields, this is a great option to improve the user experience.
+ */
+export const Wizard: Story = {
+  args: {
+    display: formWizard.display as any,
+    components: formWizard.components as any,
+    options: { template: "tailwind", iconset: "bx" }
+  }
+};
+/**
+ * PDF-First forms allow users to upload a PDF form and add overlay fields to the form, modernizing the traditional old and clunky PDF form.
+ * For a more in-depth guide on the PDF forms please navigate to the [following documentation](https://help.form.io/userguide/forms/pdf#introduction).
+ */
+export const Pdf: Story = {
+  args: {
+    display: "pdf",
+    components: [],
+    options: { template: "tailwind", iconset: "bx" }
+  }
+};

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

@@ -0,0 +1,28 @@
+import type { CSSProperties } from "react";
+
+import { registerComponent } from "../../../registries/components";
+import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder";
+
+export function FormBuilder({
+  className = "",
+  style = {},
+  ["data-testid"]: dataTestId = "formio-builder-container",
+  ...props
+}: UseFormBuilderProps & {
+  className?: string;
+  style?: CSSProperties;
+  ["data-testid"]?: string;
+}) {
+  const renderElement = useFormBuilder(props);
+
+  return (
+    <div style={style} className={className} data-testid={dataTestId}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+      <div ref={renderElement} onClick={(e) => e.stopPropagation()}>
+        <div />
+      </div>
+    </div>
+  );
+}
+
+registerComponent("FormBuilder", FormBuilder);

package/src/{components/form-edit/formEdit.reducer.ts → organisms/form/builder/FormEdit.reducer.ts}

@@ -2,15 +2,15 @@ import camelCase from "lodash/camelCase";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 
-import { FormSchema } from "../../interfaces";
+import type { FormType } from "../../../interfaces";
 
-export const hasChanged = (form: Partial<FormSchema>, value: Partial<FormSchema>): boolean => !isEqual(form, value);
+export const hasChanged = (form: Partial<FormType>, value: Partial<FormType>): boolean => !isEqual(form, value);
 
 export interface FormEditState {
-  past: Partial<FormSchema>[];
-  future: Partial<FormSchema>[];
-  current: Partial<FormSchema>;
-  original: Partial<FormSchema>;
+  past: Partial<FormType>[];
+  future: Partial<FormType>[];
+  current: Partial<FormType>;
+  original: Partial<FormType>;
 }
 
 export function createInitialState(props: any): FormEditState {