@abgov/jsonforms-components 0.0.1

package/src/lib/layouts/HorizontalLayoutControl.tsx

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

@@ -0,0 +1,28 @@
+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/layouts/index.ts

@@ -0,0 +1,3 @@
+export * from './HorizontalLayoutControl';
+export * from './VerticalLayoutControl';
+export * from './GroupControl';

package/src/lib/util/layout.tsx

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

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

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

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

@@ -0,0 +1,20 @@
+{
+  "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

@@ -0,0 +1,19 @@
+{
+  "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

@@ -0,0 +1,20 @@
+{
+  "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"
+  ]
+}