@abgov/jsonforms-components 1.3.1 → 1.5.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAIconButton, GoAFileUploadInput, GoAModal, GoACircularProgress, GoAGrid, GoAContainer, GoAButtonGroup, GoADetails } from '@abgov/react-components';
+import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAGrid, GoAContainer, GoADetails } from '@abgov/react-components';
 import { Hidden, Typography, FormHelperText } from '@mui/material';
 import styled from 'styled-components';
 import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
@@ -3609,45 +3609,6 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
-var call = functionCall;
-var hasOwn = hasOwnProperty_1;
-var isPrototypeOf = objectIsPrototypeOf;
-var regExpFlags = regexpFlags$1;
-
-var RegExpPrototype$1 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
-    ? call(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn = defineBuiltIn$5;
-var anObject = anObject$9;
-var $toString = toString$5;
-var fails = fails$i;
-var getRegExpFlags = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var nativeToString = RegExpPrototype[TO_STRING];
-
-var NOT_GENERIC = fails(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn(RegExpPrototype, TO_STRING, function toString() {
-    var R = anObject(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
 let _$5 = t => t,
   _t$5,
   _t2$3;
@@ -3706,7 +3667,9 @@ let _$4 = t => t,
   _t4$1,
   _t5,
   _t6,
-  _t7;
+  _t7,
+  _t8,
+  _t9;
 const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
   display: flex;
   flex-direction: column;
@@ -3745,6 +3708,75 @@ styled.div(_t6 || (_t6 = _$4`
 styled.div(_t7 || (_t7 = _$4`
   margin-bottom: var(--goa-space-m);
 `));
+const ListWithDetail = styled.div(_t8 || (_t8 = _$4`
+  margin: var(--goa-space-s);
+  width: 100%;
+`));
+const ListWithDetailHeading = styled.h3(_t9 || (_t9 = _$4`
+  text-transform: capitalize;
+`));
+
+const getAllRequiredFields = schema => {
+  const requiredFields = [];
+  function findRequired(fields) {
+    if (fields && fields.required && Array.isArray(fields.required)) {
+      fields.required.forEach(field => {
+        requiredFields.push(field);
+      });
+    }
+    if (fields !== undefined && fields.properties) {
+      Object.keys(fields.properties).forEach(key => {
+        if (fields.properties) {
+          findRequired(fields.properties[key]);
+        }
+      });
+    } else if (fields && fields.type === 'array' && fields.items && typeof fields.items === 'object') {
+      const childItems = JSON.parse(JSON.stringify(fields.items));
+      findRequired(childItems);
+    }
+  }
+  findRequired(schema);
+  return requiredFields;
+};
+
+var call = functionCall;
+var hasOwn = hasOwnProperty_1;
+var isPrototypeOf = objectIsPrototypeOf;
+var regExpFlags = regexpFlags$1;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
+    ? call(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn = defineBuiltIn$5;
+var anObject = anObject$9;
+var $toString = toString$5;
+var fails = fails$i;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn(RegExpPrototype, TO_STRING, function toString() {
+    var R = anObject(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
 
 const resolveLabelFromScope = scope => {
   // eslint-disable-next-line no-useless-escape
@@ -3769,33 +3801,52 @@ const getFormFieldValue = (scope, data) => {
       }
       currentValue = currentValue[key];
     }
-    return typeof currentValue === 'object' ? '' : currentValue;
+    return Array.isArray(currentValue) ? currentValue[currentValue.length - 1] : typeof currentValue === 'object' ? '' : currentValue;
   } else {
     return '';
   }
 };
-const renderFormFields = (elements, data) => elements.map((element, index) => {
-  // const clonedElement = element;
+const renderFormFields = (elements, data,
+// eslint-disable-line @typescript-eslint/no-explicit-any
+requiredFields) => elements.map((element, index) => {
+  var _a;
   const clonedElement = JSON.parse(JSON.stringify(element));
+  const lastSegment = (_a = clonedElement.scope) === null || _a === void 0 ? void 0 : _a.split('/').pop();
   if (clonedElement.type === 'Control' && clonedElement.scope) {
     const label = resolveLabelFromScope(clonedElement.scope);
     if (!label) return null;
     const value = getFormFieldValue(clonedElement.scope, data ? data : {}).toString();
+    const asterisk = requiredFields.indexOf(lastSegment) !== -1 ? ' *' : '';
     return jsxs(GridItem, {
       md: 6,
       vSpacing: 1,
       hSpacing: 0.5,
       children: [jsxs("strong", {
-        children: [label, ":"]
-      }), " ", value]
+        children: [label, " ", asterisk + ':']
+      }), ' ', value]
     }, index);
-  } else if (clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.elements) {
+  } else if (clonedElement.type !== 'ListWithDetail' && (clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.elements)) {
     return jsx(React.Fragment, {
-      children: renderFormFields(clonedElement.elements, data)
+      children: renderFormFields(clonedElement.elements, data, requiredFields)
     }, index);
+  } else if (clonedElement.type === 'ListWithDetail' && data && data[lastSegment] && data[lastSegment].length > 0) {
+    const listData = data[lastSegment];
+    return jsxs(ListWithDetail, {
+      children: [jsxs(ListWithDetailHeading, {
+        children: [lastSegment, listData.length > 1 && 's']
+      }), jsx(Grid, {
+        children: listData.map((childData,
+        // eslint-disable-line @typescript-eslint/no-explicit-any
+        childIndex // eslint-disable-line @typescript-eslint/no-explicit-any
+        ) => jsx(React.Fragment, {
+          children: renderFormFields(clonedElement.elements, childData, requiredFields)
+        }, `${index}-${childIndex}`))
+      })]
+    });
   }
   return null;
 });
+
 const FormStepper = ({
   uischema,
   data,
@@ -3811,12 +3862,23 @@ const FormStepper = ({
   t
 }) => {
   const categorization = uischema;
-  const [step, setStep] = useState(0);
+  const rawCategories = JSON.parse(JSON.stringify(categorization));
+  const [step, setStep] = useState(1);
   const [isFormValid, setIsFormValid] = useState(false);
   const [showNextBtn, setShowNextBtn] = useState(true);
-  const categories = useMemo(() => categorization.elements.filter(category => isVisible(category, data, '', ajv)), [categorization, data, ajv]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [categories, setCategories] = useState(categorization.elements);
+  useEffect(() => {
+    const cates = categorization.elements.filter(category => isVisible(category, data, '', ajv));
+    setCategories(cates);
+  }, [categorization, data, ajv]);
   const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
   const handleSubmit = () => {
+    setIsOpen(true);
+    console.log('submitted', data);
+  };
+  const onSubmit = () => {
+    setIsOpen(false);
     console.log('submitted', data);
   };
   const CategoryLabels = useMemo(() => {
@@ -3850,6 +3912,26 @@ const FormStepper = ({
     }
     setPage(page);
   }
+  function setTab(page) {
+    const rawCategoryLabels = rawCategories.elements.map(category => category.label);
+    if (page > 1 && page <= rawCategoryLabels.length && rawCategoryLabels.length !== CategoryLabels.length) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const selectedTabLabel = rawCategoryLabels[page - 1];
+      const selectedTab = CategoryLabels.indexOf(selectedTabLabel);
+      const newStep = selectedTab !== -1 ? selectedTab : page;
+      page = newStep;
+    }
+    if (page > rawCategoryLabels.length && rawCategoryLabels.length !== CategoryLabels.length) {
+      page = page - 1;
+    }
+    setStep(page);
+    if (page < 1 || page > categories.length + 1) return;
+    if (categories.length + 1 === page) {
+      setShowNextBtn(false);
+    } else {
+      setShowNextBtn(true);
+    }
+  }
   function setPage(page) {
     setStep(page);
     if (page < 1 || page > categories.length + 1) return;
@@ -3897,11 +3979,11 @@ const FormStepper = ({
         testId: "form-stepper-test",
         step: step,
         onChange: step => {
-          setPage(step);
+          setTab(step);
         },
         children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
           return jsx(GoAFormStep, {
-            text: `${CategoryLabels[index]}${disabledCategoryMap[index] ? ' (disabled)' : ''}`,
+            text: `${CategoryLabels[index]}`,
             status: 'incomplete'
           }, `${CategoryLabels[index]}-tab`);
         }), jsx(GoAFormStep, {
@@ -3923,8 +4005,9 @@ const FormStepper = ({
             },
             children: "Summary"
           }), jsx(ReviewItem, {
-            children: categories.map((category, index) => {
+            children: categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
               const categoryLabel = category.label || category.i18n || 'Unknown Category';
+              const requiredFields = getAllRequiredFields(schema);
               return jsxs(ReviewItemSection, {
                 children: [jsxs(ReviewItemHeader, {
                   children: [jsx(ReviewItemTitle, {
@@ -3934,7 +4017,7 @@ const FormStepper = ({
                     children: "Edit"
                   })]
                 }), jsx(Grid, {
-                  children: renderFormFields(category.elements, data)
+                  children: renderFormFields(category.elements, data, requiredFields)
                 })]
               }, index);
             })
@@ -3963,6 +4046,23 @@ const FormStepper = ({
             children: "Submit"
           })
         })]
+      }), jsxs(GoAModal, {
+        testId: "submit-confirmation",
+        open: isOpen,
+        heading: 'Form Submitted',
+        width: "640px",
+        actions: jsx(GoAButtonGroup, {
+          alignment: "end",
+          children: jsx(GoAButton, {
+            type: "secondary",
+            testId: "submit-form",
+            onClick: onSubmit,
+            children: "Ok"
+          })
+        }),
+        children: [jsx("b", {
+          children: "Submit is a test for preview purposes"
+        }), "(i.e. no actual form is being submitted)"]
       })]
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/FormStepper/FormStepperControl.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
-import { Categorization, UISchemaElement, Category, StatePropsOfLayout } from '@jsonforms/core';
+import { StatePropsOfLayout } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
 import { AjvProps } from '@jsonforms/material-renderers';
 export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: any;
 }
-export declare const resolveLabelFromScope: (scope: string) => string | null;
-export declare const getFormFieldValue: (scope: string, data: object) => any;
-export declare const renderFormFields: (elements: UISchemaElement[] | (Category | Categorization)[], data: object) => (import("react/jsx-runtime").JSX.Element | null)[];
 export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
 export declare const flattenObject: (obj: Record<string, string>) => Record<string, string>;
 export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;

package/src/lib/Controls/FormStepper/MockData/mock-schema.d.ts

@@ -0,0 +1,2 @@
+import { JsonSchema4, JsonSchema7 } from '@jsonforms/core';
+export declare const Schema: JsonSchema4 | JsonSchema7;

package/src/lib/Controls/FormStepper/MockData/mock-ui-schema.d.ts

@@ -0,0 +1,283 @@
+export declare const MockUiSchema: {
+    type: string;
+    elements: ({
+        type: string;
+        scope: string;
+        rule?: undefined;
+        elements?: undefined;
+        options?: undefined;
+    } | {
+        type: string;
+        rule: {
+            effect: string;
+            condition: {
+                scope: string;
+                schema: {
+                    const: boolean;
+                };
+            };
+        };
+        elements: ({
+            type: string;
+            label: string;
+            elements: ({
+                type: string;
+                scope: string;
+                label?: undefined;
+                rule?: undefined;
+                options?: undefined;
+                elements?: undefined;
+            } | {
+                type: string;
+                label: string;
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+                options: {
+                    help: string;
+                    addButtonPosition?: undefined;
+                    addButtonText?: undefined;
+                };
+                scope?: undefined;
+                elements?: undefined;
+            } | {
+                type: string;
+                elements: ({
+                    type: string;
+                    rule: {
+                        effect: string;
+                        condition: {
+                            scope: string;
+                            schema: {
+                                const: boolean;
+                            };
+                        };
+                    };
+                    scope: string;
+                    elements?: undefined;
+                } | {
+                    type: string;
+                    scope: string;
+                    rule?: undefined;
+                    elements?: undefined;
+                } | {
+                    type: string;
+                    elements: {
+                        type: string;
+                        scope: string;
+                    }[];
+                    rule: {
+                        effect: string;
+                        condition: {
+                            scope: string;
+                            schema: {
+                                const: boolean;
+                            };
+                        };
+                    };
+                    scope?: undefined;
+                })[];
+                scope?: undefined;
+                label?: undefined;
+                rule?: undefined;
+                options?: undefined;
+            } | {
+                type: string;
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+                elements: ({
+                    type: string;
+                    scope: string;
+                    options?: undefined;
+                } | {
+                    type: string;
+                    scope: string;
+                    options: {
+                        enumContext: {
+                            key: string;
+                            url: string;
+                            values: string;
+                            location?: undefined;
+                            type?: undefined;
+                        };
+                    };
+                } | {
+                    type: string;
+                    scope: string;
+                    options: {
+                        enumContext: {
+                            key: string;
+                            url: string;
+                            location: string;
+                            type: string;
+                            values?: undefined;
+                        };
+                    };
+                })[];
+                scope?: undefined;
+                label?: undefined;
+                options?: undefined;
+            } | {
+                type: string;
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+                elements: ({
+                    type: string;
+                    scope: string;
+                    options: {
+                        autocomplete: boolean;
+                        enumContext: {
+                            key: string;
+                            location: string;
+                            url: string;
+                            values: string[];
+                        };
+                    };
+                } | {
+                    type: string;
+                    scope: string;
+                    options: {
+                        autocomplete: boolean;
+                        enumContext: {
+                            key: string;
+                            location?: undefined;
+                            url?: undefined;
+                            values?: undefined;
+                        };
+                    };
+                })[];
+                scope?: undefined;
+                label?: undefined;
+                options?: undefined;
+            } | {
+                type: string;
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+                scope: string;
+                options: {
+                    addButtonPosition: string;
+                    addButtonText: string;
+                    help?: undefined;
+                };
+                elements: {
+                    type: string;
+                    elements: {
+                        type: string;
+                        scope: string;
+                    }[];
+                }[];
+                label?: undefined;
+            })[];
+            i18n?: undefined;
+            rule?: undefined;
+        } | {
+            type: string;
+            i18n: string;
+            label: string;
+            elements: {
+                type: string;
+                elements: {
+                    type: string;
+                    scope: string;
+                }[];
+            }[];
+            rule: {
+                effect: string;
+                condition: {
+                    scope: string;
+                    schema: {
+                        const: boolean;
+                    };
+                };
+            };
+        } | {
+            type: string;
+            label: string;
+            elements: ({
+                type: string;
+                scope: string;
+                rule?: undefined;
+                options?: undefined;
+            } | {
+                type: string;
+                scope: string;
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+                options?: undefined;
+            } | {
+                type: string;
+                scope: string;
+                options: {
+                    format: string;
+                    multi?: undefined;
+                };
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+            } | {
+                type: string;
+                scope: string;
+                options: {
+                    multi: boolean;
+                    format?: undefined;
+                };
+                rule: {
+                    effect: string;
+                    condition: {
+                        scope: string;
+                        schema: {
+                            const: boolean;
+                        };
+                    };
+                };
+            })[];
+            i18n?: undefined;
+            rule?: undefined;
+        })[];
+        options: {
+            variant: string;
+            showNavButtons: boolean;
+        };
+        scope?: undefined;
+    })[];
+};

package/src/lib/Controls/FormStepper/styled-components.d.ts

@@ -5,3 +5,5 @@ export declare const ReviewItemTitle: import("styled-components").StyledComponen
 export declare const Anchor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ReviewListItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ReviewListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListWithDetail: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListWithDetailHeading: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/src/lib/Controls/FormStepper/util/GenerateFormFields.d.ts

@@ -0,0 +1,4 @@
+import { UISchemaElement, Category, Categorization } from '@jsonforms/core';
+export declare const resolveLabelFromScope: (scope: string) => string | null;
+export declare const getFormFieldValue: (scope: string, data: object) => any;
+export declare const renderFormFields: (elements: UISchemaElement[] | (Category | Categorization)[], data: any, requiredFields: string[]) => (import("react/jsx-runtime").JSX.Element | null)[];

package/src/lib/Controls/FormStepper/util/getRequiredFields.d.ts

@@ -0,0 +1,2 @@
+import { JsonSchema4, JsonSchema7 } from '@jsonforms/core';
+export declare const getAllRequiredFields: (schema: JsonSchema4 | JsonSchema7) => string[];