fix: validation issues resolved

Author: vip-git

src/demo/examples/simple/ui-schema.json

@@ -2,7 +2,6 @@
   "ui:page": {
     "ui:layout": "tabs",
     "props": {
-      "tabIndex": 1,
       "ui:schemaErrors": true
     },
     "style": {

src/helpers/state-machine/form/actions/form.actions.ts

@@ -19,7 +19,7 @@ import { StateMachineInstance } from '../../types/form-state-machine.type';
  * @returns 
  */
 const useFormActions = ({
-  isStepperUI,
+  isPartialUI,
 }) => {
   const { 
     FORM_ACTIONS: actions, 
@@ -40,7 +40,7 @@ const useFormActions = ({
     const {
       uiSchema: currentUISchema,
     } = state.context;
-    const formValidCondition = isStepperUI(currentUISchema) ? state.value.formUI === FORM_STATE_ERROR_EVENTS.INVALID 
+    const formValidCondition = isPartialUI(currentUISchema) ? state.value.formUI === FORM_STATE_ERROR_EVENTS.INVALID 
       : Object.values(state.value).includes(FORM_STATE_ERROR_EVENTS.INVALID);  
 
     const PROPAGATE_ON_CHANGE_CONDITION = {
@@ -97,6 +97,7 @@ const useFormActions = ({
         formData: currentData,
         uiData: currentUIData,
         uiSchema: currentUISchema,
+        formSchemaXHR,
         validations,
         activeStep,
         hasError,
@@ -116,7 +117,8 @@ const useFormActions = ({
         stateMachineService,
         state,
         buttonDisabled,
-        isStepperUI,
+        isPartialUI,
+        formSchemaXHR,
       });
 
       if (!schemaErrors && !isError && hasError) {

src/helpers/state-machine/form/actions/index.ts

@@ -17,7 +17,7 @@ interface ExecuteFormActions {
 }
 
 const useActions = ({
-  isStepperUI,
+  isPartialUI,
 }) => {
   const [buttonDisabled, setButtonDisabled] = React.useState(false);
 
@@ -29,7 +29,7 @@ const useActions = ({
   const {
     getValidActionToExecute,
     executeFormActions,
-  } = useFormActions({ isStepperUI });
+  } = useFormActions({ isPartialUI });
 
   const executeAction = {
     [FORM_STATE_CONFIG.FORM_ACTIONS.DISABLE_FORM_SUBMIT]: () => setButtonDisabled(true),

src/helpers/state-machine/form/form-state.guards.ts

@@ -40,11 +40,14 @@ const GUARDS = {
             // console.log(er);
           }, 
         },
+        formSchemaXHR: context.formSchemaXHR,
         state: { context },
         buttonDisabled: false,
-        isStepperUI: (currentUISchema) => get(
+        isPartialUI: (currentUISchema) => get(
           currentUISchema, 'ui:page.ui:layout',
-        ) === 'steps',
+        ) === 'steps' || get(
+          currentUISchema, 'ui:page.ui:layout',
+        ) === 'tabs',
       });
       isSchemaValid = Array.isArray(schemaErrors) ? schemaErrors.length === 0 && !isError : !schemaErrors && !isError;
     }

src/helpers/state-machine/form/hooks/form-state-machine.hooks.ts

@@ -77,14 +77,16 @@ const useFormStateMachine = ({
   } : {};
   const givenFormInfo = !formStateMachine ? originalFormInfo : stateFormInfo;
   const [loadingState] = React.useState(null);
-  const isStepperUI = (uiSchema) => get(
+  const isPartialUI = (uiSchema) => get(
     uiSchema, 'ui:page.ui:layout',
-  ) === 'steps';
+  ) === 'steps' || get(
+    uiSchema, 'ui:page.ui:layout',
+  ) === 'tabs';
   const { 
     executeFormActionsByState,
     buttonDisabled,
   } = useFormActions({
-    isStepperUI,
+    isPartialUI,
   });
 
   const startMachine = (givenInfo: FormContext) => {
@@ -98,12 +100,13 @@ const useFormStateMachine = ({
         currentSchema: schema,
         currentUISchema: uiSchema,
         currentData: formData,
+        formSchemaXHR: {},
         validations,
         activeStep,
         stateMachineService,
         state: stateMachineService?.state,
         buttonDisabled,
-        isStepperUI,
+        isPartialUI,
       });
       formStateMachine = createStateMachine({
         uiSchema,
@@ -165,7 +168,7 @@ const useFormStateMachine = ({
     stateMachineService,
     buttonDisabled: givenFormInfo?.hasError || false,
     loadingState,
-    isStepperUI,
+    isPartialUI,
   };
 };
 

src/helpers/state-machine/form/mutations/form-state.mutations.ts

@@ -137,6 +137,7 @@ const FormMutations = {
     ),
   }),
   updateTabIndex: assign({
+    activeStep: (context: FormContext, event: EventObject & { tabIndex: number }) => event.tabIndex,
     uiSchema: (context: FormContext, event: EventObject & { tabIndex: number }) => ({
       ...context.uiSchema,
       'ui:page': {

src/helpers/state-machine/helpers/is-form-schema-state-valid.ts

@@ -18,11 +18,16 @@ const isFormSchemaStateValid = ({
   validation,
   buttonDisabled,
   stateMachineService,
+  formSchemaXHR = {},
+  isStepper,
 }) => {
   if (get(uiSchema, 'ui:page.props.ui:schemaErrors') 
   || !has(uiSchema, 'ui:page.props.ui:schemaErrors')) {
     try {
-      const transformedSchema = transformSchema(schema);
+      const transformedSchema = transformSchema({
+        ...schema,
+        ...formSchemaXHR,
+      });
       const ajv = new Ajv();
       const validate = ajv.compile(transformedSchema);
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -36,10 +41,12 @@ const isFormSchemaStateValid = ({
 
       const externalValidations = isFormInValid(validation);
       if (externalValidations && !buttonDisabled) {
-        stateMachineService.send(FORM_STATE_CONFIG.FORM_STATE_ERROR_EVENTS.ERROR, {
-          hasError: externalValidations,
-          validation,
-        });
+        if (stateMachineService && typeof stateMachineService.send === 'function') {
+          stateMachineService.send(FORM_STATE_CONFIG.FORM_STATE_ERROR_EVENTS.ERROR, {
+            hasError: externalValidations,
+            validation,
+          });
+        }
         return {
           schemaErrors: externalValidations,
           transformedSchema,
@@ -48,10 +55,12 @@ const isFormSchemaStateValid = ({
 
       if (!externalValidations && validate.errors && !buttonDisabled) {
         validate.errors.forEach((err) => {
-          stateMachineService.send(FORM_STATE_CONFIG.FORM_STATE_ERROR_EVENTS.ERROR, {
-            hasError: err,
-            validation,
-          });
+          if (stateMachineService && typeof stateMachineService.send === 'function') {
+            stateMachineService.send(FORM_STATE_CONFIG.FORM_STATE_ERROR_EVENTS.ERROR, {
+              hasError: err,
+              validation,
+            });
+          }
         });
         return {
           schemaErrors: validate.errors,
@@ -65,7 +74,20 @@ const isFormSchemaStateValid = ({
       };
     }
     catch (err) {
-      // console.log('err', err);
+      if (!isStepper) {
+        const transformedSchema = transformSchema({
+          ...schema,
+          ...formSchemaXHR,
+        });
+        return {
+          schemaErrors: [{
+            "rule": "schemaError",
+            "title": "Invalid Form Schema",
+            "message": String(err)
+          }],
+          transformedSchema,
+        };
+      }
     }
   }
 

src/helpers/validation/index.ts

@@ -13,7 +13,7 @@ export { default } from './get-validation-result';
    * @returns { Schema, data }
    */
 const getSchemaAndFormData = ({
-  isStepperUI,
+  isPartialUI,
   currentSchema: givenSchema,
   currentData: givenData,
   currentUISchema,
@@ -28,12 +28,12 @@ const getSchemaAndFormData = ({
       currentSchema.properties[stepName], 
       currentData[stepName],
     );
-    const schema = isStepperUI(currentUISchema) 
+    const schema = isPartialUI(currentUISchema) 
       ? {
         ...translatedSchema,
       }
       : currentSchema;
-    const data = isStepperUI(currentUISchema) ? currentData[stepName] : currentData;
+    const data = isPartialUI(currentUISchema) ? currentData[stepName] : currentData;
     return {
       schema,
       data,
@@ -59,7 +59,8 @@ export const hasSchemaErrors = ({
   stateMachineService,
   state,
   buttonDisabled,
-  isStepperUI,
+  isPartialUI,
+  formSchemaXHR,
 }) => {
   const validation = getValidationResult(
     currentSchema, 
@@ -77,7 +78,7 @@ export const hasSchemaErrors = ({
     currentSchema,
     currentUISchema,
     activeStep,
-    isStepperUI,
+    isPartialUI,
   });
 
   const { schemaErrors, transformedSchema } = isFormSchemaStateValid({
@@ -88,6 +89,13 @@ export const hasSchemaErrors = ({
     data,
     onError: state?.context?.effects?.onError,
     buttonDisabled,
+    formSchemaXHR,
+    isStepper: (
+      currentUISchema 
+      && currentUISchema['ui:page'] 
+      && currentUISchema['ui:page']['ui:layout'] 
+      && currentUISchema['ui:page']['ui:layout'] === 'steps'
+    )
   });
 
   return {