@abgov/jsonforms-components 0.0.1

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

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import { ControlProps, isEnumControl, OwnPropsOfEnum, RankedTester, rankWith } from '@jsonforms/core';
+import { TranslateProps, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
+import { WithInputProps } from './type';
+import merge from 'lodash/merge';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { WithOptionLabel } from '@jsonforms/material-renderers';
+import { GoADropdown, GoADropdownItem } from '@abgov/react-components-new';
+import { EnumCellProps, WithClassname } from '@jsonforms/core';
+
+import { addDataByOptions, getData } from '../../Context';
+import { checkFieldValidity } from '../../util/stringUtils';
+
+type EnumSelectProp = EnumCellProps & WithClassname & TranslateProps & WithInputProps;
+
+export const EnumSelect = (props: EnumSelectProp): JSX.Element => {
+  const { data, id, enabled, errors, schema, path, handleChange, options, config, label, uischema } = props;
+  const { required } = props as ControlProps;
+
+  let enumData: unknown[] = schema?.enum || [];
+
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
+
+  const dataKey = uischema?.options?.enumContext?.key;
+
+  const url = uischema?.options?.enumContext?.url;
+  const location = uischema?.options?.enumContext?.location;
+  const type = uischema?.options?.enumContext?.type;
+  const values = uischema?.options?.enumContext?.values;
+
+  const errorsFormInput = checkFieldValidity(props as ControlProps);
+
+  useEffect(() => {
+    if (dataKey && url) {
+      addDataByOptions(dataKey, url, location, type, values);
+    }
+  }, [url, location, type, values, dataKey]);
+
+  if (dataKey && getData(dataKey)) {
+    const newData = getData(dataKey) as unknown[];
+
+    enumData = newData;
+  }
+
+  return (
+    <GoADropdown
+      error={errorsFormInput.length > 0}
+      name={`${label}`}
+      value={data}
+      disabled={!enabled}
+      relative={true}
+      key={`${id}-jsonform-key`}
+      testId={`${id || label}-jsonform`}
+      {...appliedUiSchemaOptions}
+      onChange={(name, value) => {
+        handleChange(path, value);
+      }}
+      {...uischema?.options?.componentProps}
+    >
+      {enumData?.map((item) => {
+        return <GoADropdownItem key={`json-form-dropdown-${item}`} value={`${item}`} label={`${item}`} />;
+      })}
+    </GoADropdown>
+  );
+};
+
+export const numControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
+  return <GoAInputBaseControl {...props} input={EnumSelect} />;
+};
+
+export const GoAEnumControlTester: RankedTester = rankWith(2, isEnumControl);
+
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export const GoAEnumControl = withJsonFormsEnumProps(withTranslateProps(numControl), true);

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

@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { ControlProps, isEnumControl, and, optionIs, OwnPropsOfEnum, RankedTester, rankWith } from '@jsonforms/core';
+import { TranslateProps, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
+import { WithInputProps } from './type';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { WithOptionLabel } from '@jsonforms/material-renderers';
+import { EnumCellProps, WithClassname } from '@jsonforms/core';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+import { addDataByOptions, getData } from '../../Context';
+
+type EnumSelectAutoCompleteProp = EnumCellProps & WithClassname & TranslateProps & WithInputProps;
+
+export const EnumSelectAutoComplete = (props: EnumSelectAutoCompleteProp): JSX.Element => {
+  const { data, schema, path, handleChange, uischema } = props;
+  let enumData = schema?.enum || [];
+
+  const dataKey = uischema?.options?.enumContext?.key;
+
+  const url = uischema?.options?.enumContext?.url;
+  const location = uischema?.options?.enumContext?.location;
+  const type = uischema?.options?.enumContext?.type;
+  const values = uischema?.options?.enumContext?.values;
+
+  const defaultProps = {
+    options: enumData,
+    getOptionLabel: (option: Array<string>) => option,
+  };
+
+  const [inputValue, setInputValue] = React.useState('');
+
+  useEffect(() => {
+    if (dataKey && url) {
+      addDataByOptions(dataKey, url, location, type, values);
+    }
+  }, [url, location, type, values, dataKey]);
+
+  if (dataKey && getData(dataKey)) {
+    const newData = getData(dataKey);
+    // eslint-disable-next-line
+    enumData = newData as any[];
+    defaultProps.options = enumData;
+  }
+
+  return (
+    <Autocomplete
+      {...defaultProps}
+      id="autocomplete"
+      getOptionLabel={(option) => option}
+      isOptionEqualToValue={(option, value) => option.id === value.id}
+      value={data || null}
+      onChange={(name, value) => {
+        handleChange(path, value);
+        setInputValue(value);
+      }}
+      renderInput={(params) => {
+        return <TextField {...params} variant="outlined" size="small" placeholder={schema?.description} />;
+      }}
+    />
+  );
+};
+
+const numControlAutoComplete = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
+  return <GoAInputBaseControl {...props} input={EnumSelectAutoComplete} />;
+};
+
+export const GoAEnumControlAutoCompleteTester: RankedTester = rankWith(
+  3,
+  and(isEnumControl, optionIs('autocomplete', true))
+);
+
+export const GoAEnumAutoCompleteControl = withJsonFormsEnumProps(withTranslateProps(numControlAutoComplete), true);

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ControlProps, isEnumControl, OwnPropsOfEnum, RankedTester, rankWith, optionIs, and } from '@jsonforms/core';
+import { TranslateProps, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
+import { WithInputProps } from './type';
+import merge from 'lodash/merge';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { WithOptionLabel } from '@jsonforms/material-renderers';
+import { GoARadioGroup, GoARadioItem } from '@abgov/react-components-new';
+import { EnumCellProps, WithClassname } from '@jsonforms/core';
+import { checkFieldValidity } from '../../util/stringUtils';
+
+type RadioGroupProp = EnumCellProps & WithClassname & TranslateProps & WithInputProps;
+
+export const RadioGroup = (props: RadioGroupProp): JSX.Element => {
+  const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, label, t } = props;
+  const enumData = schema?.enum || [];
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options, uischema, options);
+  const errorsFormInput = checkFieldValidity(props as ControlProps);
+
+  return (
+    <GoARadioGroup
+      error={errorsFormInput.length > 0}
+      name={`${options || appliedUiSchemaOptions.label}`}
+      testId={`${id || label}-jsonform-dropdown`}
+      value={data}
+      disabled={!enabled}
+      {...appliedUiSchemaOptions}
+      onChange={(name: string, value: string) => handleChange(path, value)}
+      {...uischema?.options?.componentProps}
+    >
+      {enumData.map((value) => {
+        return <GoARadioItem name={value} value={`${value}`} label={value} {...appliedUiSchemaOptions} />;
+      })}
+    </GoARadioGroup>
+  );
+};
+
+export const EnumRadioControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
+  return <GoAInputBaseControl {...props} input={RadioGroup} />;
+};
+
+export const GoAEnumRadioGroupControl = withJsonFormsEnumProps(withTranslateProps(EnumRadioControl), true);
+export const GoARadioGroupControlTester: RankedTester = rankWith(20, and(isEnumControl, optionIs('format', 'radio')));

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { CellProps, WithClassname, ControlProps, isIntegerControl, RankedTester, rankWith } from '@jsonforms/core';
+import { GoAInput, GoAInputNumber } 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 GoAInputIntegerProps = CellProps & WithClassname & WithInputProps;
+
+export const GoAInputInteger = (props: GoAInputIntegerProps): 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 InputValue = data && data !== undefined ? data : '';
+  const clonedSchema = JSON.parse(JSON.stringify(schema));
+  const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0;
+  const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
+  const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
+  const errorsFormInput = checkFieldValidity(props as ControlProps);
+
+  return (
+    <GoAInput
+      type="number"
+      error={errorsFormInput.length > 0}
+      width="100%"
+      disabled={!enabled}
+      value={InputValue}
+      step={StepValue}
+      min={MinValue}
+      max={MaxValue}
+      placeholder={placeholder}
+      name={appliedUiSchemaOptions?.name || `${id || label}-input`}
+      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
+      onKeyPress={(name: string, value: string, key: string) => {
+        if (!(key === 'Tab' || key === 'Shift')) {
+          let newValue: string | number = '';
+          if (value !== '') {
+            newValue = +value;
+          }
+
+          handleChange(path, newValue);
+        }
+      }}
+      onBlur={(name: string, value: string) => {
+        let newValue: string | number = '';
+        if (value !== '') {
+          newValue = +value;
+        }
+        handleChange(path, newValue);
+      }}
+      //Dont trigger the handleChange event on the onChange event as it will cause
+      //issue with the error message from displaying, use keyPress or the onBlur event instead
+      onChange={(name: string, value: string) => {}}
+      {...uischema?.options?.componentProps}
+    />
+  );
+};
+
+export const GoAIntegerControl = (props: ControlProps) => <GoAInputBaseControl {...props} input={GoAInputInteger} />;
+
+export const GoAIntegerControlTester: RankedTester = rankWith(2, isIntegerControl);
+export const GoAInputIntegerControl = withJsonFormsControlProps(GoAIntegerControl);

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  CellProps,
+  WithClassname,
+  ControlProps,
+  isStringControl,
+  RankedTester,
+  rankWith,
+  and,
+  optionIs,
+} from '@jsonforms/core';
+import { GoATextArea } from '@abgov/react-components-new';
+import { WithInputProps } from './type';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { checkFieldValidity } from '../../util/stringUtils';
+type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
+
+export const MultiLineText = (props: GoAInputTextProps): JSX.Element => {
+  // eslint-disable-next-line
+  const { data, config, id, enabled, uischema, path, handleChange, schema, label } = props;
+
+  const appliedUiSchemaOptions = { ...config, ...uischema?.options };
+  const placeholder = appliedUiSchemaOptions?.placeholder || schema?.description || '';
+  const errorsFormInput = checkFieldValidity(props as ControlProps);
+  const autoCapitalize =
+    uischema?.options?.componentProps?.autoCapitalize === true || uischema?.options?.autoCapitalize === true;
+
+  return (
+    <GoATextArea
+      error={errorsFormInput.length > 0}
+      value={data}
+      disabled={!enabled}
+      placeholder={placeholder}
+      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
+      name={`${label || path}-text-area`}
+      width={'100%'}
+      // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
+      // maxCount={schema.maxLength || 256}
+      onKeyPress={(name: string, value: string, key: string) => {
+        if (!(key === 'Tab' || key === 'Shift')) {
+          if (autoCapitalize === true) {
+            handleChange(path, value.toUpperCase());
+          } else {
+            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={() => {}}
+      {...uischema?.options?.componentProps}
+    />
+  );
+};
+
+export const MultiLineTextControlInput = (props: ControlProps) => (
+  <GoAInputBaseControl {...props} input={MultiLineText} />
+);
+
+export const MultiLineTextControlTester: RankedTester = rankWith(3, and(isStringControl, optionIs('multi', true)));
+export const MultiLineTextControl = withJsonFormsControlProps(MultiLineTextControlInput);

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { CellProps, WithClassname, ControlProps, isNumberControl, RankedTester, rankWith } from '@jsonforms/core';
+import { GoAInput } from '@abgov/react-components-new';
+import { WithInputProps } from './type';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { checkFieldValidity } from '../../util/stringUtils';
+type GoAInputNumberProps = CellProps & WithClassname & WithInputProps;
+
+export const GoANumberInput = (props: GoAInputNumberProps): 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 InputValue = data && data !== undefined ? data : '';
+  const clonedSchema = JSON.parse(JSON.stringify(schema));
+  const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0.01;
+  const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
+  const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
+  const errorsFormInput = checkFieldValidity(props as ControlProps);
+
+  return (
+    <GoAInput
+      type="number"
+      error={errorsFormInput.length > 0}
+      disabled={!enabled}
+      value={InputValue}
+      placeholder={placeholder}
+      step={StepValue}
+      min={MinValue}
+      max={MaxValue}
+      width="100%"
+      name={appliedUiSchemaOptions?.name || `${id || label}-input`}
+      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
+      onKeyPress={(name: string, value: string, key: string) => {
+        if (!(key === 'Tab' || key === 'Shift')) {
+          let newValue: string | number = '';
+          if (value !== '') {
+            newValue = +value;
+          }
+          handleChange(path, newValue);
+        }
+      }}
+      onBlur={(name: string, value: string) => {
+        let newValue: string | number = '';
+        if (value !== '') {
+          newValue = +value;
+        }
+        handleChange(path, newValue);
+      }}
+      //Dont trigger the handleChange event on the onChange event as it will cause
+      //issue with the error message from displaying, use keyPress or the onBlur event instead
+      onChange={(name: string, value: string) => {}}
+      {...uischema?.options?.componentProps}
+    />
+  );
+};
+
+export const GoANumberControl = (props: ControlProps) => <GoAInputBaseControl {...props} input={GoANumberInput} />;
+
+export const GoANumberControlTester: RankedTester = rankWith(2, isNumberControl);
+export const GoAInputNumberControl = withJsonFormsControlProps(GoANumberControl);

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { CellProps, WithClassname, ControlProps, isStringControl, RankedTester, rankWith } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { GoAInput, GoAFormItem } from '@abgov/react-components-new';
+import { WithInputProps } from './type';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { checkFieldValidity, getLabelText } from '../../util/stringUtils';
+
+type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
+
+export const GoAInputText = (props: GoAInputTextProps): JSX.Element => {
+  // eslint-disable-next-line
+  const { data, config, id, enabled, uischema, isValid, errors, path, handleChange, schema, label } = props;
+
+  const appliedUiSchemaOptions = { ...config, ...uischema?.options };
+  const placeholder = appliedUiSchemaOptions?.placeholder || schema?.description || '';
+
+  const errorsFormInput = checkFieldValidity(props as ControlProps);
+
+  const autoCapitalize =
+    uischema?.options?.componentProps?.autoCapitalize === true || uischema?.options?.autoCapitalize === true;
+
+  return (
+    <GoAInput
+      error={errorsFormInput.length > 0}
+      type={appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'}
+      disabled={!enabled}
+      value={data}
+      width={'100%'}
+      placeholder={placeholder}
+      // maxLength={appliedUiSchemaOptions?.maxLength}
+      name={appliedUiSchemaOptions?.name || `${id || label}-input`}
+      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
+      // 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: string, value: string) => {}}
+      onKeyPress={(name: string, value: string, key: string) => {
+        if (!(key === 'Tab' || key === 'Shift')) {
+          if (autoCapitalize === true) {
+            handleChange(path, value.toUpperCase());
+          } else {
+            handleChange(path, value);
+          }
+        }
+      }}
+      onBlur={(name: string, value: string) => {
+        if (autoCapitalize === true) {
+          handleChange(path, value.toUpperCase());
+        } else {
+          handleChange(path, value);
+        }
+      }}
+      {...uischema?.options?.componentProps}
+    />
+  );
+};
+
+export const GoATextControl = (props: ControlProps) => <GoAInputBaseControl {...props} input={GoAInputText} />;
+
+export const GoATextControlTester: RankedTester = rankWith(1, isStringControl);
+export const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);

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

@@ -0,0 +1,46 @@
+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/index.tsx

@@ -0,0 +1,13 @@
+export * from './InputBaseControl';
+export * from './InputTextControl';
+export * from './InputMultiLineTextControl';
+export * from './InputDateControl';
+export * from './InputNumberControl';
+export * from './InputIntegerControl';
+export * from './InputDateTimeControl';
+export * from './InputTimeControl';
+export * from './InputEnum';
+export * from './InputEnumAutoComplete';
+export * from './InputEnumRadios';
+export * from './InputBooleanControl';
+export * from './InputBooleanRadioControl';

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

@@ -0,0 +1,84 @@
+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/Inputs/type.ts

@@ -0,0 +1,3 @@
+export interface WithInputProps {
+  label?: string;
+}

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

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