@abgov/jsonforms-components 1.26.2 → 1.27.1

package/README.md

@@ -11,241 +11,62 @@ Run `nx test jsonforms-components` to execute the unit tests via [Jest](https://
 ```
 - src
   - lib
-    - GoARenders
-      - <GoAComponent A Reducer>
-        ...
-      - <GoAComponent B Reducer>
-        ...
-```
-
-# GoA UI component JSON Forms UI Schema
+    - Additional
+    - Cells
+    - common
+    - Components
+    - Controls
+    - Context
+    - ErrorHandling
+    - layouts
+    - util
 
-[UI Schema](https://jsonforms.io/docs/uischema) in the JSON Forms defines the general layout of the forms generated. @abgov/jsonforms-components lib integrates the [GoA UI components](https://github.com/GovAlta/ui-components) form components by extending the "options" attribute in the UI Schema. Take GoAInput UI Schema as example:
-
-```
-    {
-      "type": "Control",
-      "scope": "#/properties/name",
-      "options": {
-        "GoAInput": {
-          "name": "Name",
-          "label": "Name",
-          "testId": ""
-          ...
-        }
-      }
-    }
 ```
 
-The presence of the "GoAInput" indicates we are going to use the GoAInput to render the input. The attributes in the "GoAInput" will be passed to the GoAInput as component properties.
-
-# JsonFormContextInstance
-
-To use the package, and the context surrounding it, it's best to import JsonFormContextInstance attach data to it
-
-Here are some sample api endpoints that work currently.
-
-```
-
-import { JsonFormContextInstance } from '@abgov/jsonforms-components';
-
-
-  useEffect(() => {
-    JsonFormContextInstance.addDataByUrl('dog-list', 'https://dog.ceo/api/breeds/list/all', processDogs);
-    JsonFormContextInstance.addDataByUrl(
-      'basketball-players',
-      'https://www.balldontlie.io/api/v1/players',
-      processPlayers
-    );
-    JsonFormContextInstance.addDataByUrl(
-      'car-brands',
-      'https://parallelum.com.br/fipe/api/v1/carros/marcas',
-      processCarBrands
-    );
-
-    JsonFormContextInstance.addFormContextData(
-      'countries',
-      Countries.map((country) => country.country)
-    );
-
-  }, []);
-
-  function processDogs(rawData): string[] {
-    return Object.keys(rawData.message);
-  }
-  function processPlayers(rawData): string[] {
-    return rawData.data.map((player) => `${player.first_name} ${player.last_name}`);
-  }
-  function processCarBrands(rawData): string[] {
-    return rawData.map((brand) => brand.nome);
-  }
-
-```
-
-Once you add them, you can add the following to any UI Schema control to create a dropdown that displays them
-
-```
-  "type": "Control",
-  "scope": "#/properties/carBrands",
-  "options": {
-    "enumContext": {
-      "key": "car-brands",
-```
+# Embedding ADSP Form service UI components in your application
 
-You also need to add the following to the data schema
+To use ADSP Forms service UI components add in JSON Forms into your application. You will have to include the following JSX markup and imports into your React components as an example.
 
 ```
- "carBrands": {
-    "type": "string",
-    "enum": [
-      ""
-    ]
- }
+import { JsonForms } from '@jsonforms/react';
+import {
+  GoARenderers,
+} from '@abgov/jsonforms-components';
 ```
 
-# Schemas only with no code changes
-
-To access the apis without making any code changes to add an api,
-
 ```
-import { JsonFormContextInstance } from '@abgov/jsonforms-components';
-
-const { jsonFormContext, baseEnumerator } = JsonFormContextInstance;
-
-return(
-  <jsonFormContext.Provider value={baseEnumerator}>
-    <JsonForms
-      schema={...}
-      uischema={...}
-      ...
-    />
-  />
-)
+      <JsonForms
+        schema={yourJSONDataSchema}
+        uischema={yourJSONUISchema}
+        data={data}
+        validationMode="ValidateAndShow"
+        renderers={GoARenderers}
+        onChange={onChange}
+      />
 ```
 
-Data Schema
-
-```
-  "carBrands": {
-    "type": "string",
-    "enum": [
-      ""
-    ]
-  },
-  "countries": {
-    "type": "string",
-    "enum": [
-      ""
-    ]
-  },
-  "dogBreeds": {
-    "type": "string",
-    "enum": [
-      ""
-    ]
-  },
-  "basketballPlayers": {
-    "type": "string",
-    "enum": [
-      ""
-    ]
-  }
-```
+# ADSP Form service UI components UI schema
 
-Ui Schema
+[UI Schema](https://jsonforms.io/docs/uischema) in the JSON Forms defines the general layout of the forms generated. @abgov/jsonforms-components lib integrates the [GoA UI components](https://github.com/GovAlta/ui-components) form components by extending the "options" attribute in the UI Schema. Take GoAInput UI Schema as example:
+https://govalta.github.io/adsp-monorepo/tutorials/form-service/building-forms.html
 
 ```
-{
-  "type": "HorizontalLayout",
-  "elements": [
     {
       "type": "Control",
-      "scope": "#/properties/carBrands",
-      "options": {
-        "enumContext": {
-          "key": "car-brands",
-          "url": "https://parallelum.com.br/fipe/api/v1/carros/marcas",
-          "values": "nome"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/dogBreeds",
-      "options": {
-        "enumContext": {
-          "key": "dog-list",
-          "url": "https://dog.ceo/api/breeds/list/all",
-          "location": "message",
-          "type": "keys"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/basketballPlayers",
-      "options": {
-        "enumContext": {
-          "key": "basketball-players",
-          "location": "data",
-          "url": "https://www.balldontlie.io/api/v1/players",
-          "values": [
-            "first_name",
-            "last_name"
-          ]
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/countries",
+      "scope": "#/properties/name",
       "options": {
-        "enumContext": {
-          "key": "countries"
+        "GoAInput": {
+          "name": "Name",
+          "label": "Name",
+          "testId": ""
+          ...
         }
       }
     }
-  ]
-}
-```
-
-Countries in this example comes locally.
-
-```
-import Countries from './countries';
-
---------
-
-export default [
-  { country: 'Russia', land_mass_km2: 17098242 },
-  { country: 'Canada', land_mass_km2: 9976140 },
-  ...
-]
 ```
 
-Another way to add data to ContextProvider (optional)
+The presence of the "GoAInput" indicates we are going to use the GoAInput to render the input. The attributes in the "GoAInput" will be passed to the GoAInput as component properties.
 
-```
-const animals = {
-  animals: [
-    { name: 'Elephant', type: 'Mammal', habitat: 'Land' },
-    { name: 'Penguin', type: 'Bird', habitat: 'Ice' },
-    { name: 'Kangaroo', type: 'Mammal', habitat: 'Grasslands' },
-    { name: 'Giraffe', type: 'Mammal', habitat: 'Savanna' },
-    { name: 'Octopus', type: 'Invertebrate', habitat: 'Ocean' },
-    { name: 'Cheetah', type: 'Mammal', habitat: 'Grasslands' },
-    { name: 'Koala', type: 'Mammal', habitat: 'Eucalyptus Forest' },
-    { name: 'Toucan', type: 'Bird', habitat: 'Rainforest' },
-    { name: 'Dolphin', type: 'Mammal', habitat: 'Ocean' },
-    { name: 'Arctic Fox', type: 'Mammal', habitat: 'Arctic Tundra' },
-  ],
-};
-
-
-  <ContextProvider data={[{ animals }]}
-    <JsonForms
-      ...
-    </>
-  </ContextProvider>
+For additional information and usage pertaining to the controls, layouts, steppers, please refer to the ADSP Form service guide which provides more in [depth information](https://govalta.github.io/adsp-monorepo/tutorials/form-service/form-service.html) on the usage.
 
-```
+Please refer to the [Cheat sheet](https://govalta.github.io/adsp-monorepo/tutorials/form-service/cheat-sheet.html) which contains schema examples for the different types of controls, steppers, layouts, etc that are currently available from ADSP Form service UI components that can used in your UI schema of your application.

package/index.esm.js

@@ -4496,6 +4496,9 @@ const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
   border-radius: var(--goa-border-radius-m);
   margin: var(--goa-space-2xs);
   padding: var(--goa-space-xs);
+  div:empty {
+    display: none;
+  }
 `));
 const ReviewItemSection = styled.div(_t2$2 || (_t2$2 = _$4`
   background-color: #f1f1f1;
@@ -4910,6 +4913,16 @@ const mapToVisibleStep = (step, allSteps, visibleSteps) => {
 };
 
 const summaryLabel = 'Summary';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getProperty = (obj, propName) => {
+  if (obj[propName] !== undefined) return obj[propName];
+  for (const key in obj) {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      const result = getProperty(obj[key], propName);
+      if (result !== undefined) return result;
+    }
+  }
+};
 const FormStepper = props => {
   var _a, _b, _c, _d, _e;
   const {
@@ -5086,7 +5099,20 @@ const FormStepper = props => {
                     })]
                   }), jsx(GoAGrid, {
                     minChildWidth: "600px",
-                    children: category.elements.map((element, index) => {
+                    children: category.elements.filter(field => {
+                      var _a, _b;
+                      const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
+                      if (conditionProps && data) {
+                        const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
+                        const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? void 0 : canHideControlParts.length) - 1];
+                        const isHidden = getProperty(data, canHideControl);
+                        if (!isHidden) {
+                          return field;
+                        }
+                      } else {
+                        return field;
+                      }
+                    }).map((element, index) => {
                       return jsx("div", {
                         children: jsx(JsonFormsDispatch, {
                           "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
@@ -5920,11 +5946,30 @@ const GoAArrayControlReviewRenderer = withJsonFormsArrayLayoutProps(ArrayBaseRev
 
 // eslint-disable-next-line
 const extractScopesFromUISchema = uischema => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f;
   const scopes = [];
+  // eslint-disable-next-line
+  if ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.elements) {
+    // eslint-disable-next-line
+    (_e = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.detail) === null || _d === void 0 ? void 0 : _d.elements) === null || _e === void 0 ? void 0 : _e.forEach(element => {
+      var _a;
+      if (element === null || element === void 0 ? void 0 : element.elements) {
+        // eslint-disable-next-line
+        (_a = element === null || element === void 0 ? void 0 : element.elements) === null || _a === void 0 ? void 0 : _a.forEach(internalElement => {
+          if (internalElement === null || internalElement === void 0 ? void 0 : internalElement.scope) {
+            scopes.push(internalElement === null || internalElement === void 0 ? void 0 : internalElement.scope);
+          }
+        });
+      } else {
+        if (element === null || element === void 0 ? void 0 : element.scope) {
+          scopes.push(element === null || element === void 0 ? void 0 : element.scope);
+        }
+      }
+    });
+  }
   if (uischema === null || uischema === void 0 ? void 0 : uischema.elements) {
     // eslint-disable-next-line
-    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.forEach(element => {
+    (_f = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _f === void 0 ? void 0 : _f.forEach(element => {
       var _a;
       if (element === null || element === void 0 ? void 0 : element.elements) {
         // eslint-disable-next-line
@@ -6000,7 +6045,7 @@ const ctxToNonEmptyCellProps = (ctx, ownProps) => {
   };
 };
 const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const {
     schema,
     errors,
@@ -6058,7 +6103,19 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
         renderers: renderers,
         cells: cells
       }, rowPath);
-    }), ((_b = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _b === void 0 ? void 0 : _b.length) > 0 && jsx(JsonFormsDispatch, {
+    }),
+    // eslint-disable-next-line
+    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map(element => {
+      return jsx(JsonFormsDispatch, {
+        "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+        schema: schema,
+        uischema: element,
+        path: rowPath,
+        enabled: enabled,
+        renderers: renderers,
+        cells: cells
+      }, rowPath);
+    }), ((_e = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _e === void 0 ? void 0 : _e.length) > 0 && jsx(JsonFormsDispatch, {
       schema: schema,
       uischema: uiSchemaElementsForNotDefined,
       path: rowPath,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.26.2",
+  "version": "1.27.1",
   "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

@@ -14,6 +14,7 @@ export interface FormStepperOptionProps {
     previousButtonLabel?: string;
     previousButtonType?: GoAButtonType;
 }
+export declare const getProperty: any;
 export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
 export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
 export default FormStepper;

package/src/lib/Controls/ObjectArray/ListWithDetailControl.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, Layout } from '@jsonforms/core';
 import { WithDeleteDialogSupport } from './DeleteDialog';
 export type ObjectArrayControlProps = ArrayLayoutProps & WithDeleteDialogSupport;
+export declare const extractScopesFromUISchema: (uischema: any) => string[];
 export interface EmptyListProps {
     numColumns: number;
     translations: ArrayTranslations;