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

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 { 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,