@abgov/jsonforms-components 0.0.1 → 1.2.0

package/src/lib/Controls/Inputs/InputTimeControl.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { CellProps, WithClassname, ControlProps, isTimeControl, RankedTester, rankWith } from '@jsonforms/core';
-import { GoAInputTime } from '@abgov/react-components-new';
-import { WithInputProps } from './type';
-import { withJsonFormsControlProps } from '@jsonforms/react';
-import { GoAInputBaseControl } from './InputBaseControl';
-import { checkFieldValidity, isValidDate } from '../../util/stringUtils';
-type GoAInputTimeProps = CellProps & WithClassname & WithInputProps;
-
-export const GoATimeInput = (props: GoAInputTimeProps): JSX.Element => {
-  // eslint-disable-next-line
-  const { data, config, id, enabled, uischema, isValid, path, handleChange, schema, label } = props;
-  const appliedUiSchemaOptions = { ...config, ...uischema?.options };
-  const placeholder = appliedUiSchemaOptions?.placeholder || schema?.description || '';
-  const errorsFormInput = checkFieldValidity(props as ControlProps);
-
-  return (
-    <GoAInputTime
-      error={errorsFormInput.length > 0}
-      name={appliedUiSchemaOptions?.name || `${id || label}-input`}
-      value={data}
-      step={1}
-      width="100%"
-      disabled={!enabled}
-      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
-      onBlur={(name: string, value: string) => {
-        handleChange(path, value);
-      }}
-      // Dont use handleChange in the onChange event, use the keyPress or onBlur.
-      // If you use it onChange along with keyPress event it will cause a
-      // side effect that causes the validation to render when it shouldnt.
-      onChange={(name, value) => {}}
-      onKeyPress={(name: string, value: string, key: string) => {
-        if (!(key === 'Tab' || key === 'Shift')) {
-          handleChange(path, value);
-        }
-      }}
-      {...uischema?.options?.componentProps}
-    />
-  );
-};
-
-export const GoATimeControl = (props: ControlProps) => <GoAInputBaseControl {...props} input={GoATimeInput} />;
-
-export const GoATimeControlTester: RankedTester = rankWith(4, isTimeControl);
-export const GoAInputTimeControl = withJsonFormsControlProps(GoATimeControl);

package/src/lib/Controls/Inputs/inputControl.spec.ts

@@ -1,84 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { GoADateInput, errMalformedDate } from './InputDateControl';
-import { GoAInputDateProps } from './InputDateControl';
-import { ControlElement } from '@jsonforms/core';
-
-const theDate = {
-  theDate: '',
-};
-
-const dateSchema = {
-  type: 'object',
-  properties: {
-    theDate: {
-      type: 'string',
-      format: 'date',
-    },
-  },
-};
-
-const uiSchema = (min: string, max: string): ControlElement => {
-  return {
-    type: 'Control',
-    scope: '#/properties/theDate',
-    label: 'Date control test',
-    options: {
-      componentProps: {
-        min: min,
-        max: max,
-      },
-    },
-  };
-};
-
-const staticProps: GoAInputDateProps = {
-  uischema: uiSchema('2023-02-01', '2025-02-01'),
-  schema: dateSchema,
-  rootSchema: dateSchema,
-  handleChange: () => {},
-  enabled: true,
-  label: 'Date control test',
-  id: 'My ID',
-  config: {},
-  path: '',
-  errors: '',
-  data: theDate.theDate,
-  visible: true,
-  isValid: true,
-};
-
-describe('input control tests', () => {
-  describe('input date control tests', () => {
-    it('can render valid date', () => {
-      const props = { ...staticProps, uischema: uiSchema('2023-02-01', '2025-02-01') };
-      const component = render(GoADateInput(props));
-      expect(component.getByTestId('My ID-input')).toBeInTheDocument();
-    });
-
-    it('can detect malformed max dates in schema', () => {
-      const props = { ...staticProps, uischema: uiSchema('2023-02-01', '2025a/02-01') };
-      const component = render(GoADateInput(props));
-      expect(component.getByText(errMalformedDate(props.uischema.scope, 'Max'))).toBeInTheDocument();
-    });
-
-    it('can detect malformed min dates in schema', () => {
-      const props = { ...staticProps, uischema: uiSchema('2023b/02-01', '2025-02-01') };
-      const component = render(GoADateInput(props));
-      expect(component.getByText(errMalformedDate(props.uischema.scope, 'Min'))).toBeInTheDocument();
-    });
-
-    it('will reformat non-standard min dates', () => {
-      const props = { ...staticProps, uischema: uiSchema('2023/02-01', '2025-02-01') };
-      const component = render(GoADateInput(props));
-      expect(component.getByTestId('My ID-input')).toBeInTheDocument();
-    });
-
-    it('will reformat non-standard max', () => {
-      const props = { ...staticProps, uischema: uiSchema('2023-02-01', '2025/02-01') };
-      const component = render(GoADateInput(props));
-      expect(component.getByTestId('My ID-input')).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { GoAButton, GoAModal, GoAButtonGroup } from '@abgov/react-components-new';
-import { DeleteDialogContent } from './styled-components';
-
-export interface DeleteDialogProps {
-  open: boolean;
-  onConfirm(): void;
-  onCancel(): void;
-  title: string;
-  message: string;
-}
-
-export interface WithDeleteDialogSupport {
-  openDeleteDialog(path: string, data: number): void;
-}
-
-export const DeleteDialog = React.memo(function DeleteDialog({
-  open,
-  onConfirm,
-  onCancel,
-  title,
-  message,
-}: DeleteDialogProps) {
-  return (
-    <GoAModal open={open} key={1} testId="object-array-modal" heading={title}>
-      <DeleteDialogContent data-testid="object-array-modal-content">{message}</DeleteDialogContent>
-      <GoAButtonGroup alignment="end">
-        <GoAButton
-          type="secondary"
-          testId="object-array-modal-button"
-          onClick={() => {
-            onCancel();
-          }}
-        >
-          Cancel
-        </GoAButton>
-        <GoAButton
-          type="primary"
-          testId="object-array-confirm-button"
-          onClick={() => {
-            onConfirm();
-          }}
-        >
-          Delete
-        </GoAButton>
-      </GoAButtonGroup>
-    </GoAModal>
-  );
-});

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

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

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

@@ -1,368 +0,0 @@
-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/styled-components.tsx

@@ -1,13 +0,0 @@
-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;
-`;