@abgov/jsonforms-components 0.0.1

package/src/lib/Controls/ObjectArray/ObjectArray.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from 'react';
+import {
+  ArrayLayoutProps,
+  RankedTester,
+  isObjectArrayControl,
+  isPrimitiveArrayControl,
+  or,
+  rankWith,
+  uiTypeIs,
+  and,
+} from '@jsonforms/core';
+import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
+import { ObjectArrayControl } from './ObjectListControl';
+import { Hidden } from '@mui/material';
+import { DeleteDialog } from './DeleteDialog';
+
+export const ArrayControl = (props: ArrayLayoutProps) => {
+  const [open, setOpen] = useState(false);
+  const [path, setPath] = useState<string>();
+  const [rowData, setRowData] = useState<number>(0);
+  const { removeItems, visible } = props;
+
+  const openDeleteDialog = useCallback(
+    (p: string, rowIndex: number) => {
+      setOpen(true);
+      setPath(p);
+      setRowData(rowIndex);
+    },
+    [setOpen, setPath, setRowData]
+  );
+  const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
+
+  // eslint-disable-next-line
+  const deleteConfirm = useCallback(() => {
+    const p = path?.substring(0, path.lastIndexOf('.'));
+    if (removeItems && p) {
+      removeItems(p, [rowData])();
+    }
+    setOpen(false);
+    // eslint-disable-next-line
+  }, [setOpen, path, rowData]);
+
+  return (
+    <Hidden xsUp={!visible}>
+      <ObjectArrayControl {...props} openDeleteDialog={openDeleteDialog} />
+      <DeleteDialog
+        open={open}
+        onCancel={deleteCancel}
+        onConfirm={deleteConfirm}
+        title={props.translations.deleteDialogTitle || ''}
+        message={props.translations.deleteDialogMessage || ''}
+      />
+    </Hidden>
+  );
+};
+
+export const GoAArrayControlTester: RankedTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
+export const GoAArrayControlRenderer = withJsonFormsArrayLayoutProps(ArrayControl);
+export const GoAListWithDetailsTester: RankedTester = rankWith(3, and(uiTypeIs('ListWithDetail')));

package/src/lib/Controls/ObjectArray/ObjectArrayToolBar.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ControlElement, createDefaultValue, JsonSchema, ArrayTranslations } from '@jsonforms/core';
+import { GoAButton } from '@abgov/react-components-new';
+
+export interface ObjectArrayToolbarProps {
+  numColumns: number;
+  errors: string;
+  label: string;
+  path: string;
+  uischema: ControlElement;
+  schema: JsonSchema;
+  rootSchema: JsonSchema;
+  enabled: boolean;
+  translations: ArrayTranslations;
+  // eslint-disable-next-line
+  addItem(path: string, value: any): () => void;
+}
+
+const ObjectArrayToolBar = React.memo(function TableToolbar({
+  numColumns,
+  errors,
+  label,
+  path,
+  addItem,
+  schema,
+  enabled,
+  translations,
+  rootSchema,
+  uischema,
+}: ObjectArrayToolbarProps) {
+  const buttonPosition = uischema?.options?.addButtonPosition || 'left';
+  return (
+    <>
+      {/* Note: Paul 2024-01-05: need to add the GoATooltip after the upgrade of the ui components */}
+      {/* <GoATooltip content={translations.addTooltip}> */}
+      <div style={{ textAlign: buttonPosition }}>
+        <GoAButton
+          disabled={!enabled}
+          testId={`object-array-toolbar-${label}`}
+          aria-label={translations.addAriaLabel}
+          onClick={addItem(path, createDefaultValue(schema, rootSchema))}
+        >
+          {uischema?.options?.addButtonText || 'Add'}
+        </GoAButton>
+      </div>
+      {/* </GoATooltip> */}
+    </>
+  );
+});
+
+export default ObjectArrayToolBar;

package/src/lib/Controls/ObjectArray/ObjectListControl.tsx

@@ -0,0 +1,368 @@
+import isEmpty from 'lodash/isEmpty';
+import { JsonFormsStateContext, useJsonForms } from '@jsonforms/react';
+import range from 'lodash/range';
+import React from 'react';
+import { FormHelperText, Hidden, Typography } from '@mui/material';
+import {
+  ArrayLayoutProps,
+  ControlElement,
+  JsonSchema,
+  Paths,
+  JsonFormsRendererRegistryEntry,
+  JsonFormsCellRendererRegistryEntry,
+  ArrayTranslations,
+  UISchemaElement,
+  Layout,
+} from '@jsonforms/core';
+
+import { WithDeleteDialogSupport } from './DeleteDialog';
+import ObjectArrayToolBar from './ObjectArrayToolBar';
+import merge from 'lodash/merge';
+import { JsonFormsDispatch } from '@jsonforms/react';
+import { GoAGrid, GoAIconButton, GoAContainer } from '@abgov/react-components-new';
+import { ToolBarHeader, ObjectArrayTitle } from './styled-components';
+
+// eslint-disable-next-line
+const extractScopesFromUISchema = (uischema: any): string[] => {
+  const scopes: string[] = [];
+
+  if (uischema?.elements) {
+    // eslint-disable-next-line
+    uischema?.elements?.forEach((element: any) => {
+      if (element?.elements) {
+        // eslint-disable-next-line
+        element?.elements?.forEach((internalElement: any) => {
+          if (internalElement?.scope) {
+            scopes.push(internalElement?.scope);
+          }
+        });
+      }
+    });
+  }
+
+  return scopes;
+};
+
+const GenerateRows = (
+  Cell: React.ComponentType<OwnPropsOfNonEmptyCell>,
+  schema: JsonSchema,
+  rowPath: string,
+  enabled: boolean,
+  cells?: JsonFormsCellRendererRegistryEntry[],
+  uischema?: ControlElement
+) => {
+  if (schema.type === 'object') {
+    const props = {
+      schema,
+      rowPath,
+      enabled,
+      cells,
+      uischema,
+    };
+    return <Cell {...props} />;
+  } else {
+    // primitives
+    const props = {
+      schema,
+      rowPath,
+      cellPath: rowPath,
+      enabled,
+    };
+    return <Cell key={rowPath} {...props} />;
+  }
+};
+
+const getValidColumnProps = (scopedSchema: JsonSchema) => {
+  if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
+    return Object.keys(scopedSchema.properties).filter((prop) => scopedSchema.properties?.[prop].type !== 'array');
+  }
+  // primitives
+  return [''];
+};
+
+export interface EmptyListProps {
+  numColumns: number;
+  translations: ArrayTranslations;
+}
+
+const EmptyList = ({ numColumns, translations }: EmptyListProps) => (
+  <GoAGrid minChildWidth="30ch">
+    <Typography align="center">
+      <b>{translations.noDataMessage}</b>
+    </Typography>
+  </GoAGrid>
+);
+
+interface NonEmptyCellProps extends OwnPropsOfNonEmptyCell {
+  rootSchema?: JsonSchema;
+  errors: string;
+  enabled: boolean;
+}
+interface OwnPropsOfNonEmptyCell {
+  rowPath: string;
+  propName?: string;
+  schema: JsonSchema;
+  enabled: boolean;
+  renderers?: JsonFormsRendererRegistryEntry[];
+  cells?: JsonFormsCellRendererRegistryEntry[];
+  uischema?: ControlElement;
+}
+const ctxToNonEmptyCellProps = (ctx: JsonFormsStateContext, ownProps: OwnPropsOfNonEmptyCell): NonEmptyCellProps => {
+  const path = ownProps.rowPath + (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
+  const errors = '';
+  return {
+    uischema: ownProps.uischema,
+    rowPath: ownProps.rowPath,
+    schema: ownProps.schema,
+    rootSchema: ctx.core?.schema,
+    errors,
+    enabled: ownProps.enabled,
+    cells: ownProps.cells || ctx.cells,
+    renderers: ownProps.renderers || ctx.renderers,
+  };
+};
+
+interface NonEmptyRowComponentProps {
+  propName?: string;
+  schema: JsonSchema;
+  rootSchema?: JsonSchema;
+  rowPath: string;
+  errors: string;
+  enabled: boolean;
+  renderers?: JsonFormsRendererRegistryEntry[];
+  cells?: JsonFormsCellRendererRegistryEntry[];
+  isValid: boolean;
+  uischema?: ControlElement | Layout;
+}
+const NonEmptyCellComponent = React.memo(function NonEmptyCellComponent({
+  schema,
+  errors,
+  enabled,
+  renderers,
+  cells,
+  rowPath,
+  isValid,
+  uischema,
+}: NonEmptyRowComponentProps) {
+  const propNames = getValidColumnProps(schema);
+  const propScopes = (uischema as ControlElement)?.scope
+    ? propNames.map((name) => {
+        return `#/properties/${name}`;
+      })
+    : [];
+
+  const scopesInElements = extractScopesFromUISchema(uischema);
+  const scopesNotInElements = propScopes.filter((scope) => {
+    return !scopesInElements.includes(scope);
+  });
+
+  /* Create default elements for scope not defined in the uischema
+   * future work: merge the options
+   */
+  const uiSchemaElementsForNotDefined = {
+    type: uischema?.options?.defaultType || 'VerticalLayout',
+    elements: scopesNotInElements.map((scope) => {
+      return {
+        type: 'Control',
+        scope,
+      };
+    }),
+  };
+  return (
+    <>
+      {
+        // eslint-disable-next-line
+        (uischema as Layout)?.elements?.map((element: UISchemaElement) => {
+          return (
+            <JsonFormsDispatch
+              key={rowPath}
+              schema={schema}
+              uischema={element}
+              path={rowPath}
+              enabled={enabled}
+              renderers={renderers}
+              cells={cells}
+            />
+          );
+        })
+      }
+      <JsonFormsDispatch
+        schema={schema}
+        uischema={uiSchemaElementsForNotDefined}
+        path={rowPath}
+        enabled={enabled}
+        renderers={renderers}
+        cells={cells}
+      />
+      <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
+    </>
+  );
+});
+
+const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+  const isValid = isEmpty(emptyCellProps.errors);
+
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid} />;
+};
+
+interface NonEmptyRowProps {
+  childPath: string;
+  schema: JsonSchema;
+  rowIndex: number;
+  showSortButtons: boolean;
+  enabled: boolean;
+  cells?: JsonFormsCellRendererRegistryEntry[];
+  path: string;
+  translations: ArrayTranslations;
+  uischema: ControlElement;
+}
+
+const NonEmptyRowComponent = ({
+  childPath,
+  schema,
+  rowIndex,
+  openDeleteDialog,
+  enabled,
+  cells,
+  path,
+  translations,
+  uischema,
+}: NonEmptyRowProps & WithDeleteDialogSupport) => {
+  return (
+    <div key={childPath}>
+      {enabled ? (
+        <GoAContainer>
+          <GoAGrid minChildWidth="30ch">
+            <GoAIconButton
+              icon="trash"
+              aria-label={translations.removeAriaLabel}
+              onClick={() => openDeleteDialog(childPath, rowIndex)}
+            ></GoAIconButton>
+          </GoAGrid>
+          {GenerateRows(NonEmptyCell, schema, childPath, enabled, cells, uischema)}
+        </GoAContainer>
+      ) : null}
+    </div>
+  );
+};
+export const NonEmptyList = React.memo(NonEmptyRowComponent);
+interface TableRowsProp {
+  data: number;
+  path: string;
+  schema: JsonSchema;
+  uischema: ControlElement;
+  //eslint-disable-next-line
+  config?: any;
+  enabled: boolean;
+  cells?: JsonFormsCellRendererRegistryEntry[];
+  translations: ArrayTranslations;
+}
+const ObjectArrayList = ({
+  data,
+  path,
+  schema,
+  openDeleteDialog,
+  uischema,
+  config,
+  enabled,
+  cells,
+  translations,
+}: TableRowsProp & WithDeleteDialogSupport) => {
+  const isEmptyList = data === 0;
+
+  if (isEmptyList) {
+    return <EmptyList numColumns={getValidColumnProps(schema).length + 1} translations={translations} />;
+  }
+
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+
+  return (
+    <>
+      {range(data).map((index: number) => {
+        const childPath = Paths.compose(path, `${index}`);
+
+        return (
+          <NonEmptyList
+            key={childPath}
+            childPath={childPath}
+            rowIndex={index}
+            schema={schema}
+            openDeleteDialog={openDeleteDialog}
+            showSortButtons={appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons}
+            enabled={enabled}
+            cells={cells}
+            path={path}
+            uischema={uischema}
+            translations={translations}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+// eslint-disable-next-line
+export class ObjectArrayControl extends React.Component<ArrayLayoutProps & WithDeleteDialogSupport, any> {
+  // eslint-disable-next-line
+  addItem = (path: string, value: any) => this.props.addItem(path, value);
+  render() {
+    const {
+      label,
+      path,
+      schema,
+      rootSchema,
+      uischema,
+      errors,
+      openDeleteDialog,
+      visible,
+      enabled,
+      cells,
+      translations,
+      data,
+      config,
+      ...additionalProps
+    } = this.props;
+
+    const controlElement = uischema as ControlElement;
+    // eslint-disable-next-line
+    const listTitle = label || uischema.options?.title;
+
+    return (
+      <Hidden xsUp={!visible}>
+        <div>
+          <ToolBarHeader>
+            {listTitle && <ObjectArrayTitle>{listTitle}</ObjectArrayTitle>}
+            <ObjectArrayToolBar
+              errors={errors}
+              label={label}
+              addItem={this.addItem}
+              numColumns={0}
+              path={path}
+              uischema={controlElement}
+              schema={schema}
+              rootSchema={rootSchema}
+              enabled={enabled}
+              translations={translations}
+            />
+          </ToolBarHeader>
+          <div>
+            <ObjectArrayList
+              path={path}
+              schema={schema}
+              uischema={uischema}
+              enabled={enabled}
+              openDeleteDialog={openDeleteDialog}
+              translations={translations}
+              data={data}
+              cells={cells}
+              config={config}
+              {...additionalProps}
+            />
+          </div>
+        </div>
+      </Hidden>
+    );
+  }
+}

package/src/lib/Controls/ObjectArray/index.tsx

@@ -0,0 +1 @@
+export * from './ObjectArray';

package/src/lib/Controls/ObjectArray/styled-components.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const DeleteDialogContent = styled.div`
+  margin-bottom: 1rem;
+`;
+
+export const ToolBarHeader = styled.div`
+  margin-bottom: 1.5rem;
+`;
+
+export const ObjectArrayTitle = styled.h2`
+  margin-bottom: 1.5rem;
+`;

package/src/lib/Controls/index.tsx

@@ -0,0 +1,4 @@
+export * from './Inputs';
+export * from './FormStepper';
+export * from './FileUploader';
+export * from './ObjectArray';

package/src/lib/ErrorHandling/GoAErrorControl.tsx

@@ -0,0 +1,53 @@
+/**
+ * The error control is invoked whenever no other control can be found.  It is used to display
+ * an error to the developers indicating that they have misconfigured one or more of their schemas and
+ * that they need to take a close look.  It will attempt to provide information to guide the developer
+ * toward fixing the error.
+ */
+
+import React from 'react';
+import { ControlProps, JsonSchema, RankedTester, rankWith } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { isNullSchema, isValidJsonObject } from './errorCheck';
+import { getUISchemaErrors } from './schemaValidation';
+import { MessageControl } from './MessageControl';
+
+const isValidJsonSchema = (schema: JsonSchema): string | null => {
+  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.
+const ErrorControl = (props: ControlProps): JSX.Element => {
+  const { 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 <p>{dataSchemaErrors}</p>;
+  }
+  const uiSchemaErrors = getUISchemaErrors(uischema, schema);
+  if (uiSchemaErrors && uiSchemaErrors !== '') {
+    return MessageControl(uiSchemaErrors);
+  }
+  return <span />;
+};
+
+/**
+ * Note: by returning a rank of 1000, we are saying that this renderer is very important,
+ * one that must get used if there are any errors whatsoever.
+ */
+export const GoAErrorControlTester: RankedTester = rankWith(1000, (uischema, schema, context) => {
+  const validJsonSchema = isValidJsonSchema(schema);
+  const validUiSchema = getUISchemaErrors(uischema, schema);
+  return validUiSchema != null || validJsonSchema != null;
+});
+
+export default withJsonFormsControlProps(ErrorControl);

package/src/lib/ErrorHandling/MessageControl.tsx

@@ -0,0 +1,19 @@
+import { GoACallout } from '@abgov/react-components-new';
+import React from 'react';
+
+/**
+ *  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
+export const MessageControl = (message: string): JSX.Element => {
+  return <GoACallout type="emergency">{message}</GoACallout>;
+};

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

@@ -0,0 +1,98 @@
+import {
+  errCategorizationHasNoElements,
+  errCategorizationHasNoVariant,
+  errCategorizationHasNonCategories,
+  errNoElements,
+  getUISchemaErrors,
+} from './schemaValidation';
+
+const dataSchema = {
+  type: 'object',
+  properties: {
+    firstName: {
+      type: 'string',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+  },
+};
+
+const validCategorization = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      elements: [
+        {
+          type: 'Category',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/firstName',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  options: { variant: 'stepper' },
+};
+const categorizationWithNoCategories = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      elements: [{ type: 'Control', scope: '#/properties/firstName' }],
+    },
+    {
+      type: 'VerticalLayout',
+      elements: [{ type: 'Control', scope: '#/properties/birthDate' }],
+    },
+  ],
+  options: { variant: 'stepper' },
+};
+const categorizationWithNoElements = {
+  type: 'Categorization',
+  options: { variant: 'stepper' },
+};
+const categoryHasNoElements = {
+  type: 'Categorization',
+  elements: [{ type: 'Category' }],
+  options: { variant: 'stepper' },
+};
+const categorizationWithNoVariant = {
+  type: 'Categorization',
+  elements: [{ type: 'Category', elements: [] }],
+};
+
+describe('check error processing', () => {
+  describe('categorization validation', () => {
+    it('ignores valid categorizations', () => {
+      const err = getUISchemaErrors(validCategorization, dataSchema);
+      expect(err).toBe(null);
+    });
+
+    it('can detect non-category element', () => {
+      const err = getUISchemaErrors(categorizationWithNoCategories, dataSchema);
+      console.log(err);
+      expect(err).toMatch(errCategorizationHasNonCategories);
+    });
+
+    it('can detect categorization without elements', () => {
+      const err = getUISchemaErrors(categorizationWithNoElements, dataSchema);
+      expect(err).toMatch(errCategorizationHasNoElements);
+    });
+
+    it('can detect a Category with no elements', () => {
+      const err = getUISchemaErrors(categoryHasNoElements, dataSchema);
+      expect(err).toMatch(errNoElements('Category'));
+    });
+
+    it('can detect Categorization with no variant', () => {
+      const err = getUISchemaErrors(categorizationWithNoVariant, dataSchema);
+      expect(err).toMatch(errCategorizationHasNoVariant);
+    });
+  });
+});