rolled back tsup split for react-ui and use submitForm cb correctly

Author: eric-burel

packages/react-ui-bootstrap/components/form/elements/FormElement.tsx

@@ -1,20 +1,18 @@
 import React, { HTMLAttributes, PropsWithChildren } from "react";
-import { useFormContext } from '@vulcanjs/react-ui';
-import { Form } from 'react-bootstrap';
+import { useFormContext } from "@vulcanjs/react-ui";
+import { Form } from "react-bootstrap";
 
 // TODO: not sure of the expected props
 export const FormElement = /*Form*/ React.forwardRef<HTMLFormElement>(
-    ({ children, ...otherProps }: PropsWithChildren<any/*FormElementProps*/>, ref) => {
-        const { submitForm } = useFormContext();
-        return (
-            <Form
-                {...otherProps}
-                // @ts-ignore
-                onSubmit={submitForm}
-                ref={ref}
-            >
-                {children}
-            </Form>
-        );
-    }
-);
+  (
+    { children, ...otherProps }: PropsWithChildren<any /*FormElementProps*/>,
+    ref
+  ) => {
+    const { submitForm } = useFormContext();
+    return (
+      <Form {...otherProps} onSubmit={submitForm} ref={ref}>
+        {children}
+      </Form>
+    );
+  }
+);

packages/react-ui-lite/components/form/elements/FormSubmit.tsx

@@ -34,12 +34,6 @@ export const FormSubmit = ({
 }) => {
   const VulcanComponents = useVulcanComponents();
   const { clearForm, disabled } = useFormContext();
-  console.log(
-    "VULCAN",
-    VulcanComponents.Button,
-    VulcanComponents.FormattedMessage,
-    VulcanComponents.Icon
-  );
   return (
     <div className="form-submit">
       <VulcanComponents.Button

packages/react-ui-lite/components/form/tests/Form.stories.tsx

@@ -6,6 +6,7 @@ import {
   defaultFormComponents,
   Form,
   FormProps,
+  VulcanComponentsProvider,
 } from "@vulcanjs/react-ui";
 import { createModel } from "@vulcanjs/model";
 import * as models from "./fixtures/models";
@@ -14,10 +15,10 @@ import {
   basicFieldsSchema,
   withDefaultFieldSchema,
 } from "./fixtures/schemas";
-import { VulcanComponentsProvider } from "@vulcanjs/react-ui";
 import { action } from "@storybook/addon-actions";
 import { liteCoreComponents } from "../../VulcanComponents/liteVulcanComponents/coreComponents";
 import { liteFormComponents } from "../../VulcanComponents/liteVulcanComponents/formComponents";
+console.log("Form comps", defaultFormComponents, liteFormComponents);
 
 export default {
   component: Form,

packages/react-ui/components/PaginatedList/PaginatedList.jsx

@@ -34,7 +34,6 @@ export const PaginatedList = ({ className, options, Components }) => {
     ...useMultiResults,
   };
 
-  // console.log(Components)
 
   return (
     <Components.PaginatedListLayout {...props}>

packages/react-ui/components/VulcanComponents/Context.ts

@@ -4,7 +4,6 @@ import { Dummy } from "./Dummy";
 
 const dummyHandler = {
   get(target, property) {
-    //console.log("target", property);
     if (property in target) {
       return target[property];
     }

packages/react-ui/components/form/core/Form/Form.tsx

@@ -434,7 +434,7 @@ export const Form = (props: FormProps) => {
 
   const [currentValues, setCurrentValues] = useState<Object>({});
 
-  const submitFormContext = (formType: FormType) => (event /*newValues*/) => {
+  const submitFormContext = async (event /*newValues*/) => {
     /*
     TODO: previously this callback was updating the current values with new values after this call
     Need to check how this worked in Vulcan initially
@@ -446,7 +446,7 @@ export const Form = (props: FormProps) => {
     // TODO: previously, this was using a callback from setCurrentValues
     // this needs to be rearchitectured to work without, will need some check
     // https://stackoverflow.com/questions/56247433/how-to-use-setstate-callback-on-react-hooks
-    submitForm(formType)(event);
+    await submitForm(event);
   };
 
   // --------------------------------------------------------------------- //
@@ -659,12 +659,72 @@ export const Form = (props: FormProps) => {
     //Utils.scrollIntoView(".flash-message");
   };
 
-  /*
+  const getSubmitData = () => {
+    // complete the data with values from custom components
+    // note: it follows the same logic as SmartForm's getDocument method
+    let data = getData(
+      { replaceIntlFields: true, addExtraFields: false, mutableFields },
+      props,
+      {
+        currentDocument,
+        deletedValues,
+      },
+      { form: formRef.current, submitFormCallbacks }
+    );
+
+    // if there's a submit callback, run it
+    if (props.submitCallback) {
+      data = props.submitCallback(data) || data;
+    }
+    return data;
+  };
+  /** 
 
   Submit form handler
 
+  On success/failure, will call the relevant callbacks
+
   */
-  const submitForm = (formType: FormType) => async (event?: Event) => {
+  const submitFormCreate = async (event?: Event) => {
+    event && event.preventDefault();
+    event && event.stopPropagation();
+    const { contextName } = props;
+    // if form is disabled (there is already a submit handler running) don't do anything
+    if (disabled) {
+      return;
+    }
+    // clear errors and disable form while it's submitting
+    setErrors([]);
+    setDisabled(true);
+
+    const data = getSubmitData();
+
+    // create document form
+    try {
+      const result = await createDocument({
+        input: {
+          data,
+          contextName,
+        },
+      });
+      if (result.errors?.length) {
+        // TODO: previously got from meta, we could have more than 1 error
+        mutationErrorCallback(document, result.errors[0]);
+      } else {
+        newMutationSuccessCallback(result);
+      }
+    } catch (error) {
+      mutationErrorCallback(document, error);
+    }
+  };
+  /** 
+
+  Submit form handler
+
+  On success/failure, will call the relevant callbacks
+
+  */
+  const submitFormUpdate = async (event?: Event) => {
     event && event.preventDefault();
     event && event.stopPropagation();
 
@@ -681,59 +741,26 @@ export const Form = (props: FormProps) => {
 
     // complete the data with values from custom components
     // note: it follows the same logic as SmartForm's getDocument method
-    let data = getData(
-      { replaceIntlFields: true, addExtraFields: false, mutableFields },
-      props,
-      {
-        currentDocument,
-        deletedValues,
-      },
-      { form: formRef.current, submitFormCallbacks }
-    );
-
-    // if there's a submit callback, run it
-    if (props.submitCallback) {
-      data = props.submitCallback(data) || data;
-    }
-
-    if (formType === "new") {
-      // create document form
-      try {
-        const result = await createDocument({
-          input: {
-            data,
-            contextName,
-          },
-        });
-        if (result.errors?.length) {
-          // TODO: previously got from meta, we could have more than 1 error
-          mutationErrorCallback(document, result.errors[0]);
-        } else {
-          newMutationSuccessCallback(result);
-        }
-      } catch (error) {
-        mutationErrorCallback(document, error);
-      }
-    } else {
-      // update document form
-      try {
-        const documentId = currentDocument._id;
-        const result = await updateDocument({
-          input: {
-            id: documentId,
-            data,
-            contextName,
-          },
-        });
-        // TODO: handle more than 1 error
-        if (result.errors?.length) {
-          mutationErrorCallback(document, result.errors[0]);
-        } else {
-          editMutationSuccessCallback(result);
-        }
-      } catch (error) {
-        mutationErrorCallback(document, error);
+    const data = getSubmitData();
+
+    // update document form
+    try {
+      const documentId = currentDocument._id;
+      const result = await updateDocument({
+        input: {
+          id: documentId,
+          data,
+          contextName,
+        },
+      });
+      // TODO: handle more than 1 error
+      if (result.errors?.length) {
+        mutationErrorCallback(document, result.errors[0]);
+      } else {
+        editMutationSuccessCallback(result);
       }
+    } catch (error) {
+      mutationErrorCallback(document, error);
     }
   };
 
@@ -781,6 +808,15 @@ export const Form = (props: FormProps) => {
 
   const formType: "edit" | "new" = document ? "edit" : "new";
 
+  /** 
+
+  Submit form handler
+
+  On success/failure, will call the relevant callbacks
+
+  */
+  const submitForm = formType === "new" ? submitFormCreate : submitFormUpdate;
+
   // Fields computation
   const mutableFields =
     formType === "edit"
@@ -812,7 +848,7 @@ export const Form = (props: FormProps) => {
           clearForm,
           refetchForm,
           isChanged,
-          submitForm: submitFormContext(formType), //Change in name because we already have a function
+          submitForm: submitFormContext, //Change in name because we already have a function
           // called submitForm, but no reason for the user to know
           // about that
           addToDeletedValues: addToDeletedValues,

packages/react-ui/components/form/core/FormContainer.tsx

@@ -270,17 +270,6 @@ export const FormContainer = (props: FormContainerProps) => {
       skip: formType === "new",
     },
   };
-  /* debug
-  console.log(
-    "MUT",
-    (mutationFragment as any).loc.source.body,
-    mutationFragmentName
-  );
-  console.log(
-    "QUERY",
-    (queryFragment as any).loc.source.body,
-    queryFragmentName
-  );*/
   const { data, document, loading, refetch } = useSingle(queryOptions);
   if (formType !== "new") {
     debugForm(

packages/react-ui/components/form/core/FormContext.tsx

@@ -19,7 +19,7 @@ interface FormContextValue {
   // TODO: we deprecate this, it doesn't make sense to allow a child to setState this way
   // setFormState: Function;
   // FIXME: this type doesn't work, it doesn't necessarily have the event + it has to be defined
-  submitForm: Function; //React.HTMLAttributes<HTMLFormElement>["onSubmit"];
+  submitForm: (evt?: any) => Promise<void>; //React.HTMLAttributes<HTMLFormElement>["onSubmit"];
   throwError: Function;
   updateCurrentValues: Function;
   disabled: boolean;

packages/react-ui/index.ts

@@ -1,5 +1,5 @@
-export * from "./components/core";
-export * from "./components/form";
-export * from "./components/VulcanComponents";
-export * from "./components/VulcanCurrentUser";
-export * from "./componentsHelpers";
+export * from "./components/core/index.js";
+export * from "./components/form/index.js";
+export * from "./components/VulcanComponents/index.js";
+export * from "./components/VulcanCurrentUser/index.js";
+export * from "./componentsHelpers.js";

packages/react-ui/tsup.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "tsup";
+import { defineConfig, Format } from "tsup";
 import path from "path";
 
 const commonConfig = {
@@ -8,20 +8,51 @@ const commonConfig = {
   // dts: true,
   sourcemap: true,
   tsconfig: path.resolve(__dirname, "./tsconfig.build.json"),
+  outDir: "dist",
+  format: ["esm" as Format],
 };
 export default defineConfig([
+  /*
+  FIXME: this splitted config won't work with context
+  useVulcanComponents won't use the user-defined context, but it's own unitialized context for some reason
+  as if a context was bundled
+  Surprisingly, this won't happen with the old big bundle
+  {
+    entry: [
+      // TODO: get more granular for components, namely SmartForm
+      "./components/core/index.ts",
+      "./components/form/index.ts",
+      "./components/VulcanComponents/index.ts",
+      "./components/VulcanCurrentUser/index.ts",
+      "./componentsHelpers.tsx",
+    ],
+    ...commonConfig,
+    // For debugging, will output ESbuild metafile
+    // metafile: true,
+    esbuildOptions(options, context) {
+      // the directory structure will be the same as the source
+      options.outbase = "./";
+    },
+  },
+  {
+    entry: ["index.ts"],
+    ...commonConfig,
+    esbuildOptions(options, context) {
+      options.outbase = "./";
+    },
+    bundle: false,
+  },*/
   {
     entry: ["index.ts"],
     ...commonConfig,
-    format: ["esm"],
-    outDir: "dist",
+    esbuildOptions(options, context) {
+      options.outbase = "./";
+    },
   },
   // testing utils use a separated entry point
   {
     entry: ["testing.ts"],
     ...commonConfig,
-    format: ["esm"],
-    outDir: "dist",
   },
   /*
   There is no server/client specific code in this package yet,

yarn.lock

@@ -11042,7 +11042,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@vulcanjs/react-ui-lite@^0.7.2-alpha.5, @vulcanjs/react-ui-lite@workspace:packages/react-ui-lite":
+"@vulcanjs/react-ui-lite@^0.7.2-alpha.6, @vulcanjs/react-ui-lite@workspace:packages/react-ui-lite":
   version: 0.0.0-use.local
   resolution: "@vulcanjs/react-ui-lite@workspace:packages/react-ui-lite"
   dependencies:
@@ -37701,7 +37701,7 @@ __metadata:
     "@vulcanjs/mongo-apollo": ^0.7.2-alpha.3
     "@vulcanjs/react-hooks": ^0.7.2-alpha.3
     "@vulcanjs/react-ui": ^0.7.2-alpha.5
-    "@vulcanjs/react-ui-lite": ^0.7.2-alpha.5
+    "@vulcanjs/react-ui-lite": ^0.7.2-alpha.6
     "@vulcanjs/schema": ^0.7.2-alpha.3
     apollo-datasource-mongodb: ^0.5.2
     apollo-server: 3.9