@abgov/jsonforms-components 0.0.1 → 1.2.0

package/src/lib/ErrorHandling/schemaValidation.ts

@@ -1,115 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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);

package/src/lib/layouts/HorizontalLayoutControl.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { LayoutProps, RankedTester, rankWith, uiTypeIs, HorizontalLayout } from '@jsonforms/core';
-import { LayoutRenderer, LayoutRendererProps } from '../util/layout';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
-
-export const materialHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('HorizontalLayout'));
-
-export const GoAHorizontalLayoutComponent = ({
-  uischema,
-  renderers,
-  cells,
-  schema,
-  path,
-  enabled,
-  visible,
-}: LayoutProps) => {
-  const layout = uischema as HorizontalLayout;
-  const childProps: LayoutRendererProps = {
-    elements: layout.elements,
-    schema,
-    path,
-    enabled,
-    direction: 'row',
-    visible,
-  };
-
-  return <LayoutRenderer {...childProps} renderers={renderers} cells={cells} />;
-};
-
-export const GoAHorizontalLayout = withJsonFormsLayoutProps(GoAHorizontalLayoutComponent, true);

package/src/lib/layouts/VerticalLayoutControl.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { LayoutProps, VerticalLayout } from '@jsonforms/core';
-import { LayoutRenderer, LayoutRendererProps } from '../util/layout';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
-
-export const GoAVerticalLayoutComponent = ({
-  uischema,
-  schema,
-  path,
-  enabled,
-  renderers,
-  cells,
-  visible,
-}: LayoutProps) => {
-  const verticalLayout = uischema as VerticalLayout;
-  const childProps: LayoutRendererProps = {
-    elements: verticalLayout.elements,
-    schema,
-    path,
-    enabled,
-    direction: 'column',
-    visible,
-  };
-
-  return <LayoutRenderer {...childProps} renderers={renderers} cells={cells} />;
-};
-
-export const GoAVerticalLayout = withJsonFormsLayoutProps(GoAVerticalLayoutComponent, true);

package/src/lib/util/layout.tsx

@@ -1,68 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import React from 'react';
-
-import type { UISchemaElement } from '@jsonforms/core';
-import {
-  JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry,
-  JsonSchema,
-  OwnPropsOfRenderer,
-} from '@jsonforms/core';
-import { JsonFormsDispatch } from '@jsonforms/react';
-import { GoAGrid } from '@abgov/react-components-new';
-import { Hidden } from '@mui/material';
-
-export const renderLayoutElements = (
-  elements: UISchemaElement[],
-  schema?: JsonSchema,
-  path?: string,
-  enabled?: boolean,
-  renderers?: JsonFormsRendererRegistryEntry[],
-  cells?: JsonFormsCellRendererRegistryEntry[]
-) => {
-  return elements.map((child, index) => (
-    <div key={index}>
-      <JsonFormsDispatch
-        uischema={child}
-        schema={schema}
-        key={path}
-        path={path}
-        enabled={enabled}
-        renderers={renderers}
-        cells={cells}
-      />
-    </div>
-  ));
-};
-
-export interface LayoutRendererProps extends OwnPropsOfRenderer {
-  elements: UISchemaElement[];
-  direction: 'row' | 'column';
-}
-
-export const LayoutRenderer = ({
-  elements,
-  schema,
-  path,
-  enabled,
-  direction,
-  renderers,
-  cells,
-  visible,
-}: LayoutRendererProps) => {
-  if (isEmpty(elements)) {
-    return null;
-  } else {
-    if (direction === 'row') {
-      return (
-        <Hidden xsUp={!visible}>
-          <GoAGrid minChildWidth="10ch">
-            {renderLayoutElements(elements, schema, path, enabled, renderers, cells)}
-          </GoAGrid>
-        </Hidden>
-      );
-    } else {
-      return <Hidden xsUp={!visible}>{renderLayoutElements(elements, schema, path, enabled, renderers, cells)}</Hidden>;
-    }
-  }
-};

package/src/lib/util/schemaUtils.ts

@@ -1,9 +0,0 @@
-export const parseSchema = (schema: string) => {
-  try {
-    return JSON.parse(schema);
-  } catch (e) {
-    const err = e as Error;
-    console.debug(err.message);
-    return {};
-  }
-};

package/src/lib/util/stringUtils.ts

@@ -1,98 +0,0 @@
-import { ControlProps, JsonSchema } from '@jsonforms/core';
-
-/**
- * Sets the first word to be capitalized so that it is sentence cased.
- * @param words
- * @returns sentence word string.
- */
-export const capitalizeFirstLetter = (words: string) => {
-  const value = words.charAt(0).toUpperCase() + words.slice(1).toLowerCase();
-  return value;
-};
-
-/**
- * Compares the scope name and the label to determine if it matches so that it can be sentence case.
- * @param scope - format eg: '#/properties/firstName'
- * @param label - The label text
- * @returns true if the scope and label matches, otherwise false
- */
-export const controlScopeMatchesLabel = (scope: string, label: string) => {
-  // Get the property name in the string from the scope
-  const splitIdName = scope.replace(' ', '').split('/')?.at(-1)?.toLowerCase() ?? '';
-  const labelWithNoSpaces = label.replace(' ', '').toLowerCase();
-  if (splitIdName === labelWithNoSpaces) {
-    return true;
-  }
-  return false;
-};
-
-/**
- * Gets the label text in sentence case
- * @param scope
- * @param label
- * @returns
- */
-export const getLabelText = (scope: string, label: string): string => {
-  let labelToUpdate: string = '';
-
-  if (controlScopeMatchesLabel(scope, label || '')) {
-    labelToUpdate = capitalizeFirstLetter(label || '');
-  } else {
-    labelToUpdate = label || '';
-  }
-
-  return labelToUpdate;
-};
-// This message is thrown when the isNotEmpty  is triggered by Ajv checkInput.ts configuration
-export const FIELD_REQUIRED = 'data should pass "isNotEmpty" keyword validation';
-
-const isEmptyBoolean = (schema: JsonSchema, data: unknown): boolean => {
-  return schema.type !== undefined && schema.type === 'boolean' && (data === null || data === undefined);
-};
-const isEmptyNumber = (schema: JsonSchema, data: unknown): boolean => {
-  return (
-    data === '' ||
-    data === undefined ||
-    data === null ||
-    ((schema.type === 'number' || schema.type === 'integer') && isNaN(+data))
-  );
-};
-/**
- * Check if a required, defined input value is valid. Returns an appropriate
- * error message if not.
- * @param props
- * @returns error message
- */
-export const checkFieldValidity = (props: ControlProps): string => {
-  const { data, errors: ajvErrors, required, label, uischema, schema } = props;
-  const labelToUpdate = getLabelText(uischema.scope, label);
-
-  if (required) {
-    if (data === undefined) return '';
-
-    if (schema) {
-      if (isEmptyBoolean(schema, data)) {
-        return `${labelToUpdate} is required`;
-      }
-
-      if (isEmptyNumber(schema, data)) {
-        return `${labelToUpdate} is required`;
-      }
-    }
-  }
-
-  return ajvErrors;
-};
-
-/**
- * Check if the date is a valid date/time
- */
-export const isValidDate = function (date: Date | string) {
-  if (date instanceof Date && isFinite(date.getTime())) {
-    return true;
-  } else if (typeof date === 'string' && date.length > 0) {
-    return true;
-  } else {
-    return false;
-  }
-};

package/src/lib/util/style-component.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const VerticalLayout = styled.div`
-  height: 70vh;
-  overflow-y: auto;
-  padding-left: 0.2rem;
-  padding-right: 0.2rem;
-`;

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node", "../../node_modules/@nx/react/typings/cssmodule.d.ts", "../../node_modules/@nx/react/typings/image.d.ts"]
-  },
-  "exclude": [
-    "jest.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}

package/tsconfig.spec.json

@@ -1,20 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "include": [
-    "jest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}