@abgov/jsonforms-components 1.2.4 → 1.3.0

package/index.esm.js

@@ -3,8 +3,8 @@ 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 { Hidden, Typography, FormHelperText } from '@mui/material';
 import styled from 'styled-components';
-import { rankWith, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, uiTypeIs, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
-import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
+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';
+import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import React, { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
 import merge from 'lodash/merge';
 import axios from 'axios';
@@ -2407,24 +2407,23 @@ const GoAInputBaseControl = props => {
   });
 };
 
-/**
- *  Used internally by registered Controls, the MessageControl
- *  is used to display an error message if a component cannot be rendered
- *  due to input errors - typically from options.componentProps.
- *
- *  NOTE: The component itself is not, and should not, be registered.
- *
- * @param message the message to be displayed
- *
- * @returns component for displaying the message in the correct style
- */
-// TODO: Add styling
-const MessageControl = message => {
-  return jsx(GoACallout, {
-    type: "emergency",
-    children: message
-  });
+// Used locally for callout presentation
+const callout = props => {
+  const componentProps = Object.assign({
+    size: 'medium',
+    type: 'emergency',
+    message: 'unknown'
+  }, props);
+  return jsx(GoACallout, Object.assign({}, componentProps, {
+    children: componentProps.message
+  }));
 };
+const CalloutControl = props => {
+  var _a, _b;
+  return callout(((_b = (_a = props === null || props === void 0 ? void 0 : props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.componentProps) || {});
+};
+const GoACalloutControlTester = rankWith(1, uiTypeIs('Callout'));
+var GoACalloutControl = withJsonFormsRendererProps(CalloutControl);
 
 const errMalformedDate = (scope, type) => {
   return `${type}-date for variable '${scope}' has an incorrect format.`;
@@ -2442,7 +2441,9 @@ const isValidDateFormat = date => {
   return standardized !== undefined;
 };
 const invalidDateFormat = (scope, type) => {
-  return MessageControl(errMalformedDate(scope, type));
+  return callout({
+    message: errMalformedDate(scope, type)
+  });
 };
 const reformatDateProps = props => {
   if (props) {
@@ -4849,7 +4850,7 @@ const isLayoutType = schema => {
   return hasType(schema, 'VerticalLayout') || hasType(schema, 'HorizontalLayout') || hasType(schema, 'Categorization') || hasType(schema, 'Group');
 };
 const isKnownType = schema => {
-  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema);
+  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema) || hasType(schema, 'Callout');
 };
 const isListWithDetail = schema => {
   return hasType(schema, 'ListWithDetail');
@@ -4873,9 +4874,6 @@ const isEmptyElements = schema => {
 const hasVariant = schema => {
   return 'options' in schema && schema.options !== undefined && schema.options !== null && 'variant' in schema.options;
 };
-const isValidJsonObject = schema => {
-  return typeof schema === 'object' && Object.keys(schema).length === 0 || 'properties' in schema && ('type' in schema && schema.type === 'object' || !('type' in schema));
-};
 
 const errCategorizationHasNonCategories = "Each element of 'Categorizations' must be of type 'Category'";
 const errCategorizationHasNoElements = 'A Categorization must contain Categories.';
@@ -4967,15 +4965,6 @@ const getUISchemaErrors = (uiSchema, schema) => {
   return null;
 };
 
-const isValidJsonSchema = schema => {
-  if (isNullSchema(schema)) {
-    return '';
-  }
-  if (!isValidJsonObject(schema)) {
-    return 'Unable to render: json schema is not valid.';
-  }
-  return null;
-};
 // Some 'errors' need not be reported, but we want to handle them
 // here.  e.g.  A layout with empty elements should be quietly ignored.
 // this is handled by the errors !== '' check.
@@ -4984,17 +4973,11 @@ const ErrorControl = props => {
     schema,
     uischema
   } = props;
-  // Report data schema errors over ui schema ones, as errors in the former
-  // can cause cascading errors in the latter.
-  const dataSchemaErrors = isValidJsonSchema(schema);
-  if (dataSchemaErrors && dataSchemaErrors !== '') {
-    return jsx("p", {
-      children: dataSchemaErrors
-    });
-  }
   const uiSchemaErrors = getUISchemaErrors(uischema, schema);
   if (uiSchemaErrors && uiSchemaErrors !== '') {
-    return MessageControl(uiSchemaErrors);
+    return callout({
+      message: uiSchemaErrors
+    });
   }
   return jsx("span", {});
 };
@@ -5003,9 +4986,8 @@ const ErrorControl = props => {
  * one that must get used if there are any errors whatsoever.
  */
 const GoAErrorControlTester = rankWith(1000, (uischema, schema, context) => {
-  const validJsonSchema = isValidJsonSchema(schema);
   const validUiSchema = getUISchemaErrors(uischema, schema);
-  return validUiSchema != null || validJsonSchema != null;
+  return validUiSchema != null;
 });
 var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
 
@@ -5037,6 +5019,9 @@ const GoABaseRenderers = [
 }, {
   tester: GoATimeControlTester,
   renderer: GoAInputTimeControl
+}, {
+  tester: GoACalloutControlTester,
+  renderer: GoACalloutControl
 }, {
   tester: materialSliderControlTester,
   renderer: MaterialSliderControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.2.4",
+  "version": "1.3.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/Additional/GoACalloutControl.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RankedTester } from '@jsonforms/core';
+import { GoACalloutSize, GoACalloutType } from '@abgov/react-components-new';
+export interface CalloutProps {
+    size?: GoACalloutSize;
+    type?: GoACalloutType;
+    message?: string;
+}
+export declare const callout: (props: CalloutProps) => JSX.Element;
+export declare const GoACalloutControlTester: RankedTester;
+declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfJsonFormsRenderer>;
+export default _default;

package/src/lib/ErrorHandling/errorCheck.d.ts

@@ -11,4 +11,3 @@ export declare const isCategorization: (uiSchema: UISchemaElement) => boolean;
 export declare const hasElements: (schema: object) => boolean;
 export declare const isEmptyElements: (schema: object) => boolean;
 export declare const hasVariant: (schema: UISchemaElement) => boolean;
-export declare const isValidJsonObject: (schema: JsonSchema) => boolean;

package/src/lib/ErrorHandling/MessageControl.d.ts

@@ -1,12 +0,0 @@
-/**
- *  Used internally by registered Controls, the MessageControl
- *  is used to display an error message if a component cannot be rendered
- *  due to input errors - typically from options.componentProps.
- *
- *  NOTE: The component itself is not, and should not, be registered.
- *
- * @param message the message to be displayed
- *
- * @returns component for displaying the message in the correct style
- */
-export declare const MessageControl: (message: string) => JSX.Element;