npm - @abgov/jsonforms-components - Versions diffs - 1.3.1 → 1.4.0 - Mend

@abgov/jsonforms-components 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/index.esm.js CHANGED Viewed

@@ -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,10 +3862,15 @@ 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 [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 = () => {
     console.log('submitted', data);
@@ -3850,6 +3906,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 +3973,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 +3999,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 +4011,7 @@ const FormStepper = ({
                     children: "Edit"
                   })]
                 }), jsx(Grid, {
-                  children: renderFormFields(category.elements, data)
+                  children: renderFormFields(category.elements, data, requiredFields)
                 })]
               }, index);
             })

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.3.1",
+  "version": "1.4.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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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