@abgov/jsonforms-components 1.2.3 → 1.3.0

package/index.esm.js

@@ -2,14 +2,14 @@ import { withAjvProps, materialSliderControlTester, MaterialSliderControl, mater
 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 { 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 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';
+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';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import styled from 'styled-components';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
@@ -1739,6 +1739,12 @@ $$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
+let _$6 = t => t,
+  _t$6;
+const FormFieldWrapper = styled.div(_t$6 || (_t$6 = _$6`
+  margin-bottom: var(--goa-space-l);
+`));
+
 var anObject$3 = anObject$9;
 
 // `RegExp.prototype.flags` getter implementation
@@ -2389,34 +2395,35 @@ const GoAInputBaseControl = props => {
   }
   return jsx(Hidden, {
     xsUp: !visible,
-    children: jsx(GoAFormItem, {
-      requirement: required ? 'required' : undefined,
-      error: modifiedErrors,
-      label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
-      helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
-      children: jsx(InnerComponent, Object.assign({}, props))
+    children: jsx(FormFieldWrapper, {
+      children: jsx(GoAFormItem, {
+        requirement: required ? 'required' : undefined,
+        error: modifiedErrors,
+        label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
+        helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
+        children: jsx(InnerComponent, Object.assign({}, 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.`;
@@ -2434,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) {
@@ -4704,7 +4713,7 @@ const GoAGroupControlComponent = props => {
   const group = uischema;
   return jsx(Hidden, {
     xsUp: !visible,
-    children: jsx(GoAContainer, Object.assign({}, group.options, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps, {
+    children: jsx(GoAContainer, Object.assign({}, (_a = group.options) === null || _a === void 0 ? void 0 : _a.componentProps, {
       children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
     }))
   });
@@ -4841,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');
@@ -4865,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.';
@@ -4959,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.
@@ -4976,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", {});
 };
@@ -4995,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);
 
@@ -5029,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.3",
+  "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/Controls/Inputs/style-component.d.ts

@@ -0,0 +1 @@
+export declare const FormFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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/layouts/GroupControl.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LayoutProps, RankedTester } from '@jsonforms/core';
 export declare const groupTester: RankedTester;
+export declare const GoAGroupControlComponent: (props: LayoutProps) => JSX.Element;
 export declare const GoAGroupLayoutTester: RankedTester;
 export declare const GoAGroupControl: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;

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;