@abgov/jsonforms-components 0.0.1

package/src/lib/ErrorHandling/controlValildation.spec.ts

@@ -0,0 +1,57 @@
+import { errMalformedScope, errMissingScope, errUnknownScope, getUISchemaErrors } from './schemaValidation';
+
+const dataSchema = {
+  type: 'object',
+  properties: {
+    firstName: {
+      type: 'string',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+  },
+};
+
+const validControl = {
+  type: 'Control',
+  scope: '#/properties/firstName',
+};
+
+const malformedScope = {
+  type: 'Control',
+  scope: '#properties/firstName',
+};
+
+const unknownScope = {
+  type: 'Control',
+  scope: '#/properties/ouch/unknown/scope',
+};
+
+const missingScope = {
+  type: 'Control',
+};
+
+describe('check error processing', () => {
+  describe('control validation', () => {
+    it('ignores valid control schema', () => {
+      const err = getUISchemaErrors(validControl, dataSchema);
+      expect(err).toBe(null);
+    });
+
+    it('has malformed scope', () => {
+      const err = getUISchemaErrors(malformedScope, dataSchema);
+      expect(err).toBe(errMalformedScope(malformedScope.scope));
+    });
+
+    it('has unknown scope', () => {
+      const err = getUISchemaErrors(unknownScope, dataSchema);
+      expect(err).toBe(errUnknownScope(unknownScope.scope));
+    });
+
+    it('has missing scope', () => {
+      const err = getUISchemaErrors(missingScope, dataSchema);
+      expect(err).toBe(errMissingScope);
+    });
+  });
+});

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

@@ -0,0 +1,185 @@
+import {
+  hasElements,
+  hasVariant,
+  isCategorization,
+  isControlWithNoScope,
+  isEmptyElements,
+  isKnownType,
+  isLayoutType,
+  isScopedPrefixed,
+  isValidScope,
+} from './errorCheck';
+
+const dataSchema = {
+  type: 'object',
+  properties: {
+    firstName: {
+      type: 'string',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+  },
+};
+
+// Note: The number in the description is the element index, and it
+// is used to refer to the element in the unit tests.  Please keep them
+// up to date.
+const uiSchema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/firstName',
+      description: 'valid scope test (0)',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/lastName',
+      description: 'missing property test (1)',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/birthDate',
+      description: 'Date test (2)',
+      options: {
+        componentProps: {
+          name: 'Calendar name',
+          min: '2023-02-01',
+          max: '2025-02-01',
+        },
+      },
+    },
+    {
+      type: 'Bob',
+      scope: 'properties/bob',
+      description: 'malformed scope test (3)',
+    },
+    {
+      type: 'Control',
+      description: 'missing scope test (4)',
+    },
+    {
+      type: 'HorizontalLayout',
+      description: 'Layout with no elements (5)',
+    },
+    {
+      type: 'VerticalLayout',
+      elements: [],
+      description: 'Layout with empty elements (6)',
+    },
+    {
+      type: 'Categorization',
+      description: 'Valid Categorization (7)',
+      elements: [
+        {
+          type: 'Category',
+          elements: [
+            {
+              type: 'Category',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/firstName',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      options: {
+        variant: 'stepper',
+      },
+    },
+  ],
+};
+
+describe('check error processing', () => {
+  describe('data schema', () => {
+    it('parses correctly', () => {
+      expect(dataSchema).toEqual(
+        expect.objectContaining({
+          type: 'object',
+          properties: expect.objectContaining({
+            firstName: expect.objectContaining({ type: 'string' }),
+          }),
+        })
+      );
+    });
+  });
+
+  describe('ui schema', () => {
+    it('parses correctly', () => {
+      expect(uiSchema).toEqual(
+        expect.objectContaining({
+          type: 'VerticalLayout',
+          elements: expect.arrayContaining([
+            expect.objectContaining({ scope: expect.stringContaining('#/properties/firstName') }),
+            expect.objectContaining({ scope: expect.stringContaining('#/properties/birthDate') }),
+          ]),
+        })
+      );
+    });
+  });
+
+  describe('testing scope', () => {
+    it('can verify valid scope', () => {
+      const isValid = isValidScope(uiSchema.elements[0], dataSchema);
+      expect(isValid).toBe(true);
+    });
+
+    it('can detect missing property', () => {
+      const isValid = isValidScope(uiSchema.elements[1], dataSchema);
+      expect(isValid).toBe(false);
+    });
+
+    it('can detect malformed scope', () => {
+      const isValid = isScopedPrefixed(uiSchema.elements[3].scope as string);
+      expect(isValid).toBe(false);
+    });
+
+    it('can detect missing scope', () => {
+      const isValid = isControlWithNoScope(uiSchema.elements[4]);
+      expect(isValid).toBe(true);
+    });
+  });
+
+  describe('testing layout', () => {
+    it('can verify a valid layout', () => {
+      const isValid = isLayoutType(uiSchema);
+      expect(isValid).toBe(true);
+    });
+
+    it('can verify layout has elements', () => {
+      const isValid = hasElements(uiSchema);
+      expect(isValid).toBe(true);
+    });
+
+    it('can detect layout without elements', () => {
+      const subSchema = uiSchema.elements[5];
+      const isValid = isKnownType(subSchema) && hasElements(subSchema);
+      expect(isValid).toBe(false);
+    });
+
+    it('can detect layout with an empty set of elements', () => {
+      const subSchema = uiSchema.elements[6];
+      const isValid = isKnownType(subSchema) && isEmptyElements(subSchema);
+      expect(isValid).toBe(true);
+    });
+  });
+
+  describe('testing categorization', () => {
+    it('can verify categorization', () => {
+      const subSchema = uiSchema.elements[7];
+      const isValid = isCategorization(subSchema);
+      expect(isValid).toBe(true);
+    });
+
+    it('can detect categorization variant', () => {
+      const subSchema = uiSchema.elements[7];
+      const isValid = hasVariant(subSchema);
+      expect(isValid).toBe(true);
+    });
+  });
+});

package/src/lib/ErrorHandling/errorCheck.tsx

@@ -0,0 +1,86 @@
+import { JsonSchema, UISchemaElement, hasType, isControl } from '@jsonforms/core';
+
+export const isNullSchema = (schema: unknown): boolean => {
+  return schema === undefined || schema === null;
+};
+
+export const isValidScope = (uiSchema: UISchemaElement, schema: JsonSchema): boolean => {
+  if (!('scope' in uiSchema)) {
+    return false;
+  }
+  const scopeComponents = (uiSchema.scope as string).split('/');
+  // get rid of the '#' at the beginning of scope
+  scopeComponents.shift();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let obj = schema as any;
+  // iterate through the schema to ensure each property exists
+  for (const key of scopeComponents) {
+    if (obj && typeof obj === 'object' && key in obj) {
+      obj = obj[key];
+    } else {
+      return false;
+    }
+  }
+  return true;
+};
+
+export const isLayoutType = (schema: UISchemaElement): boolean => {
+  return (
+    hasType(schema, 'VerticalLayout') ||
+    hasType(schema, 'HorizontalLayout') ||
+    hasType(schema, 'Categorization') ||
+    hasType(schema, 'Group')
+  );
+};
+
+export const isKnownType = (schema: UISchemaElement): boolean => {
+  return (
+    hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema)
+  );
+};
+
+export const isListWithDetail = (schema: UISchemaElement): boolean => {
+  return hasType(schema, 'ListWithDetail');
+};
+
+export const isScopedPrefixed = (scope: string): boolean => {
+  const scopeComponents = scope.split('/');
+  return scopeComponents.length > 1 && scopeComponents[0] === '#';
+};
+
+export const isEmptyObject = (schema: object): boolean => {
+  return Object.keys(schema).length === 0;
+};
+
+export const isControlWithNoScope = (uiSchema: UISchemaElement): boolean => {
+  return 'type' in uiSchema && uiSchema.type === 'Control' && !('scope' in uiSchema);
+};
+
+export const isCategorization = (uiSchema: UISchemaElement): boolean => {
+  return uiSchema.type === 'Categorization';
+};
+
+export const hasElements = (schema: object): boolean => {
+  return 'elements' in schema && Array.isArray(schema.elements);
+};
+
+export const isEmptyElements = (schema: object): boolean => {
+  return (
+    'elements' in schema &&
+    schema.elements !== undefined &&
+    schema.elements !== null &&
+    Object.keys(schema.elements).length === 0
+  );
+};
+
+export const hasVariant = (schema: UISchemaElement): boolean => {
+  return 'options' in schema && schema.options !== undefined && schema.options !== null && 'variant' in schema.options;
+};
+
+export const isValidJsonObject = (schema: JsonSchema): boolean => {
+  return (
+    (typeof schema === 'object' && Object.keys(schema).length === 0) ||
+    ('properties' in schema && (('type' in schema && schema.type === 'object') || !('type' in schema)))
+  );
+};

package/src/lib/ErrorHandling/layoutValildation.spec.ts

@@ -0,0 +1,47 @@
+import { errNoElements, getUISchemaErrors } from './schemaValidation';
+
+const dataSchema = {
+  type: 'object',
+  properties: {
+    firstName: {
+      type: 'string',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+  },
+};
+
+const validLayout = {
+  type: 'VerticalLayout',
+  elements: [{ type: 'Control', scope: '#/properties/firstName' }],
+};
+
+const hasNoElements = {
+  type: 'HorizontalLayout',
+};
+
+const hasEmptyElement = {
+  type: 'HorizontalLayout',
+  elements: [],
+};
+
+describe('check error processing', () => {
+  describe('layout validation', () => {
+    it('ignores valid layout schema', () => {
+      const err = getUISchemaErrors(validLayout, dataSchema);
+      expect(err).toBe(null);
+    });
+
+    it('has no elements', () => {
+      const err = getUISchemaErrors(hasNoElements, dataSchema);
+      expect(err).toBe(errNoElements(hasNoElements.type));
+    });
+
+    it('has empty elements', () => {
+      const err = getUISchemaErrors(hasEmptyElement, dataSchema);
+      expect(err).toBe(errNoElements(hasEmptyElement.type));
+    });
+  });
+});

package/src/lib/ErrorHandling/otherValildation.spec.ts

@@ -0,0 +1,74 @@
+import { UISchemaElement } from '@jsonforms/core';
+import {
+  errMissingScope,
+  errMissingType,
+  errUnknownScope,
+  errUnknownType,
+  getUISchemaErrors,
+} from './schemaValidation';
+
+const dataSchema = {
+  type: 'object',
+  properties: {
+    firstName: {
+      type: 'string',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+  },
+};
+
+const missingType = {
+  elements: [{ type: 'Control', scope: '#/properties/firstName' }],
+};
+
+const unknownType = {
+  type: 'BobsYerUncle',
+  elements: [{ type: 'Control', scope: '#/properties/firstName' }],
+};
+
+const validListWithDetails = {
+  type: 'ListWithDetail',
+  scope: '#/properties/firstName',
+};
+const listWithDetailsNoScope = {
+  type: 'ListWithDetail',
+};
+
+const listWithDetailsInvalidScope = {
+  type: 'ListWithDetail',
+  scope: '#/properties/Yabadabadooo',
+};
+
+describe('check error processing', () => {
+  describe('type validation', () => {
+    it('detects missing type', () => {
+      const err = getUISchemaErrors(missingType as unknown as UISchemaElement, dataSchema);
+      expect(err).toBe(errMissingType);
+    });
+
+    it('detects unknown type', () => {
+      const err = getUISchemaErrors(unknownType, dataSchema);
+      expect(err).toBe(errUnknownType(unknownType.type));
+    });
+  });
+
+  describe('List with Detail validation', () => {
+    it('likes valid ListWithDetails', () => {
+      const err = getUISchemaErrors(validListWithDetails, dataSchema);
+      expect(err).toBe(null);
+    });
+
+    it('detects no scope', () => {
+      const err = getUISchemaErrors(listWithDetailsNoScope, dataSchema);
+      expect(err).toBe(errMissingScope);
+    });
+
+    it('detects unknown scope', () => {
+      const err = getUISchemaErrors(listWithDetailsInvalidScope, dataSchema);
+      expect(err).toBe(errUnknownScope(listWithDetailsInvalidScope.scope));
+    });
+  });
+});

package/src/lib/ErrorHandling/schemaValidation.ts

@@ -0,0 +1,115 @@
+import { JsonSchema, UISchemaElement, hasType, isCategorization, isControl, isLayout } from '@jsonforms/core';
+import {
+  hasElements,
+  hasVariant,
+  isControlWithNoScope,
+  isEmptyElements,
+  isEmptyObject,
+  isKnownType,
+  isLayoutType,
+  isListWithDetail,
+  isNullSchema,
+  isScopedPrefixed,
+  isValidScope,
+} from './errorCheck';
+
+export const errCategorizationHasNonCategories = "Each element of 'Categorizations' must be of type 'Category'";
+export const errCategorizationHasNoElements = 'A Categorization must contain Categories.';
+export const errNoElements = (type: string) => `A ${type} must contain elements.`;
+export const errCategorizationHasNoVariant = 'A Categorization must contain Options with a variant.';
+export const errMissingScope = 'A Control must have a scope';
+export const errMalformedScope = (scope: string): string => `Scope ${scope} must be prefixed with '#/'.`;
+export const errUnknownScope = (scope: string): string => `Failed to render: unknown scope ${scope}`;
+export const errMissingType = 'UI schema element must have a type';
+export const errUnknownType = (type: string) => `Unknown schema type: ${type}. (Names are case sensitive)`;
+
+export const getUISchemaErrors = (uiSchema: UISchemaElement, schema: JsonSchema): string | null => {
+  // Sometimes the UISchema is null.  Ignore those cases, as all checks are done on the UIschema.
+  if (isNullSchema(uiSchema)) {
+    return null;
+  }
+
+  // silently ignore empty objects
+  if (isEmptyObject(uiSchema)) {
+    return '';
+  }
+
+  // Check control elements
+  if (isControl(uiSchema) && hasType(uiSchema, 'Control')) {
+    if (!isScopedPrefixed(uiSchema.scope)) {
+      return errMalformedScope(uiSchema.scope);
+    }
+    if (!isValidScope(uiSchema, schema)) {
+      return errUnknownScope(uiSchema.scope);
+    }
+  }
+
+  // isControl will fail if scope is not present, so make the test explicit...
+  if (isControlWithNoScope(uiSchema)) {
+    return errMissingScope;
+  }
+
+  if (isListWithDetail(uiSchema)) {
+    if ('scope' in uiSchema) {
+      const scope = uiSchema.scope as string;
+      if (!isValidScope(uiSchema, schema)) {
+        return errUnknownScope(scope);
+      }
+    } else {
+      return errMissingScope;
+    }
+  }
+
+  // Make an explicit check for Categorization, as this requires Category elements.
+  // Is layout will fail if some of these conditions are not met, so we do that
+  // check later.
+  if (isCategorization(uiSchema)) {
+    if (!hasElements(uiSchema)) {
+      return errCategorizationHasNoElements;
+    }
+
+    if (!hasVariant(uiSchema)) {
+      return errCategorizationHasNoVariant;
+    }
+
+    // ensure each element has type Category, and that each category
+    // has elements
+    if (isLayout(uiSchema)) {
+      const invalidCategorizations: string[] = [];
+      const invalidCategories: UISchemaElement[] = [];
+      (uiSchema.elements as UISchemaElement[]).forEach((e) => {
+        if (e.type !== 'Category') {
+          invalidCategorizations.push(e.type);
+        }
+        if (!hasElements(e) || isEmptyElements(e)) {
+          invalidCategories.push(e);
+        }
+      });
+      if (invalidCategorizations.length > 0) {
+        return errCategorizationHasNonCategories;
+      }
+      if (invalidCategories.length > 0) {
+        return errNoElements('Category');
+      }
+    }
+  }
+
+  // Check layout
+  if (isLayoutType(uiSchema)) {
+    if (!hasElements(uiSchema)) {
+      return errNoElements(uiSchema.type);
+    }
+    if (isEmptyElements(uiSchema)) {
+      return errNoElements(uiSchema.type);
+    }
+  }
+
+  if (!isKnownType(uiSchema)) {
+    if (uiSchema.type === undefined || uiSchema.type.length < 1) {
+      return errMissingType;
+    }
+    return errUnknownType(uiSchema.type);
+  }
+
+  return null;
+};

package/src/lib/common/Grid.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+export const Grid = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: stretch;
+`;
+
+interface GridItemProps {
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+
+  hSpacing?: number;
+  vSpacing?: number;
+}
+
+export const GridItem = styled.div<GridItemProps>`
+  margin-bottom: ${(props: GridItemProps) => `${props.vSpacing ?? 0}rem`};
+
+  > .goa-card {
+    height: 100% !important;
+    width: 100% !important;
+  }
+
+  > img {
+    width: 100%;
+  }
+
+  flex: 0 1
+    ${(props: GridItemProps) =>
+      props.sm === 12 || props.sm === undefined
+        ? '100%'
+        : `calc(${(100 * (props?.sm ?? 12)) / 12}% - ${props.hSpacing ?? 0}rem)`};
+
+  @media (min-width: 768px) {
+    flex-basis: ${(props: GridItemProps) =>
+      props.md === 12 ? '100%' : `calc(${(100 * (props?.md ?? props.sm ?? 12)) / 12}% - ${props.hSpacing ?? 0}rem)`};
+  }
+  @media (min-width: 1024px) {
+    flex-basis: ${(props: GridItemProps) =>
+      props.lg === 12
+        ? '100%'
+        : `calc(${(100 * (props?.lg ?? props?.md ?? props.sm ?? 12)) / 12}% - ${props.hSpacing ?? 0}rem)`};
+  }
+  @media (min-width: 1280px) {
+    flex-basis: ${(props: GridItemProps) =>
+      props.xl === 12
+        ? '100%'
+        : `calc(${(100 * (props?.xl ?? props?.md ?? props.sm ?? 12)) / 12}% - ${props.hSpacing ?? 0}rem)`};
+  }
+`;

package/src/lib/jsonforms-components.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/lib/jsonforms-components.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import JsonformsComponents from './jsonforms-components';
+
+describe('JsonformsComponents', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<JsonformsComponents />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/jsonforms-components.tsx

@@ -0,0 +1,14 @@
+import styles from './jsonforms-components.module.scss';
+
+/* eslint-disable-next-line */
+export interface JsonformsComponentsProps {}
+
+export function JsonformsComponents(props: JsonformsComponentsProps) {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to JsonformsComponents!</h1>
+    </div>
+  );
+}
+
+export default JsonformsComponents;

package/src/lib/layouts/GroupControl.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { GoAContainer } from '@abgov/react-components-new';
+import { GroupLayout, LayoutProps, RankedTester, rankWith, uiTypeIs, withIncreasedRank } from '@jsonforms/core';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { renderLayoutElements } from '../util/layout';
+import { Hidden } from '@mui/material';
+
+export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
+
+const GoAGroupControlComponent = (props: LayoutProps): JSX.Element => {
+  const { uischema, schema, path, enabled, renderers, cells, visible } = props;
+  const group = uischema as GroupLayout;
+
+  return (
+    <Hidden xsUp={!visible}>
+      <GoAContainer {...group.options} {...uischema?.options?.componentProps}>
+        {renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)}
+      </GoAContainer>
+    </Hidden>
+  );
+};
+
+export const GoAGroupLayoutTester: RankedTester = withIncreasedRank(1, groupTester);
+
+export const GoAGroupControl = withJsonFormsLayoutProps(GoAGroupControlComponent);