@abgov/jsonforms-components 0.0.1 → 1.1.0

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import { isBooleanControl, RankedTester, rankWith, ControlProps, optionIs, and } from '@jsonforms/core';
-import { withJsonFormsControlProps } from '@jsonforms/react';
-import { Hidden } from '@mui/material';
-import { GoARadioGroup, GoARadioItem, GoAFormItem } from '@abgov/react-components-new';
-import { GoAInputBaseControl } from './InputBaseControl';
-import { checkFieldValidity, getLabelText } from '../../util/stringUtils';
-
-export const BooleanRadioComponent = ({
-  data,
-  visible,
-  enabled,
-  uischema,
-  handleChange,
-  path,
-  config,
-  label,
-  required,
-  errors,
-  description,
-}: ControlProps) => {
-  const appliedUiSchemaOptions = { ...config, ...uischema?.options };
-  const TrueValue = appliedUiSchemaOptions?.textForTrue || 'Yes';
-  const FalseValue = appliedUiSchemaOptions?.textForFalse || 'No';
-  const EnableDescription = appliedUiSchemaOptions?.enableDescription === true;
-  const TrueDescription = description || appliedUiSchemaOptions?.descriptionForTrue;
-  const FalseDescription = description || appliedUiSchemaOptions?.descriptionForFalse;
-  const BaseTestId = appliedUiSchemaOptions?.testId || `${path}-boolean-radio-jsonform`;
-  const errorsFormInput = checkFieldValidity({
-    data,
-    uischema,
-    label,
-    required,
-    errors,
-  } as ControlProps);
-
-  return (
-    <Hidden xsUp={!visible}>
-      <GoARadioGroup
-        error={errorsFormInput.length > 0}
-        name={`${label}`}
-        value={data === true ? TrueValue : data === false ? FalseValue : null}
-        disabled={!enabled}
-        testId={BaseTestId}
-        onChange={(_name, value) => {
-          if (value === TrueValue) {
-            handleChange(path, true);
-          }
-          if (value === FalseValue) {
-            handleChange(path, false);
-          }
-        }}
-        {...uischema?.options?.componentProps}
-      >
-        <GoARadioItem
-          value={TrueValue}
-          testId={`${BaseTestId}-yes-option`}
-          description={EnableDescription ? TrueDescription : null}
-        />
-        <GoARadioItem
-          value={FalseValue}
-          testId={`${BaseTestId}-no-option`}
-          description={EnableDescription ? FalseDescription : null}
-        />
-      </GoARadioGroup>
-    </Hidden>
-  );
-};
-export const BooleanRadioControl = (props: ControlProps) => (
-  <GoAInputBaseControl {...{ ...props }} input={BooleanRadioComponent} />
-);
-
-export const GoABooleanRadioControlTester: RankedTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
-export const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import { CellProps, WithClassname, ControlProps, isDateControl, RankedTester, rankWith } from '@jsonforms/core';
-import { GoAInputDate } from '@abgov/react-components-new';
-import { WithInputProps } from './type';
-import { withJsonFormsControlProps } from '@jsonforms/react';
-import { GoAInputBaseControl } from './InputBaseControl';
-import { checkFieldValidity, getLabelText, isValidDate } from '../../util/stringUtils';
-import { MessageControl } from '../../ErrorHandling/MessageControl';
-
-export type GoAInputDateProps = CellProps & WithClassname & WithInputProps;
-export const errMalformedDate = (scope: string, type: string): string => {
-  return `${type}-date for variable '${scope}' has an incorrect format.`;
-};
-
-const standardizeDate = (date: Date | string): string | undefined => {
-  try {
-    const stdDate = new Date(date).toISOString().substring(0, 10);
-    return stdDate;
-  } catch (e) {
-    const err = e as Error;
-    return undefined;
-  }
-};
-
-const isValidDateFormat = (date: string): boolean => {
-  const standardized = standardizeDate(date);
-  return standardized !== undefined;
-};
-
-const invalidDateFormat = (scope: string, type: string): JSX.Element => {
-  return MessageControl(errMalformedDate(scope, type));
-};
-
-const reformatDateProps = (props: object): object => {
-  if (props) {
-    if ('min' in props && typeof props.min === 'string') {
-      props['min'] = standardizeDate(props.min);
-    }
-    if ('max' in props && typeof props.max === 'string') {
-      props['max'] = standardizeDate(props.max as string);
-    }
-  }
-  return props;
-};
-
-export const GoADateInput = (props: GoAInputDateProps): JSX.Element => {
-  const { data, config, id, enabled, uischema, path, handleChange, label } = props;
-  const appliedUiSchemaOptions = { ...config, ...uischema?.options };
-
-  const minDate = uischema?.options?.componentProps?.min;
-  if (minDate && !isValidDateFormat(minDate)) {
-    return invalidDateFormat(uischema.scope, 'Min');
-  }
-
-  const maxDate = uischema?.options?.componentProps?.max;
-  if (maxDate && !isValidDateFormat(maxDate)) {
-    return invalidDateFormat(uischema.scope, 'Max');
-  }
-
-  return (
-    <GoAInputDate
-      error={checkFieldValidity(props as ControlProps).length > 0}
-      width="100%"
-      name={appliedUiSchemaOptions?.name || `${id || label}-input`}
-      value={standardizeDate(data) || ''}
-      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
-      disabled={!enabled}
-      // Don't 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 shouldn't.
-      onChange={(name, value) => {}}
-      onKeyPress={(name: string, value: Date | string, key: string) => {
-        if (!(key === 'Tab' || key === 'Shift')) {
-          value = standardizeDate(value) || '';
-          handleChange(path, value);
-        }
-      }}
-      onBlur={(name: string, value: Date | string) => {
-        value = standardizeDate(value) || '';
-        handleChange(path, value);
-      }}
-      {...reformatDateProps(uischema?.options?.componentProps)}
-    />
-  );
-};
-
-export const GoADateControl = (props: ControlProps) => <GoAInputBaseControl {...props} input={GoADateInput} />;
-
-export const GoADateControlTester: RankedTester = rankWith(4, isDateControl);
-export const GoAInputDateControl = withJsonFormsControlProps(GoADateControl);

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import { CellProps, WithClassname, ControlProps, isDateTimeControl, RankedTester, rankWith } from '@jsonforms/core';
-import { GoAInputDateTime } 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 GoAInputDateTimeProps = CellProps & WithClassname & WithInputProps;
-
-export const GoADateTimeInput = (props: GoAInputDateTimeProps): JSX.Element => {
-  // eslint-disable-next-line
-  const { data, config, id, enabled, uischema, isValid, path, errors, handleChange, schema, label } = props;
-
-  const appliedUiSchemaOptions = { ...config, ...uischema?.options };
-
-  return (
-    <GoAInputDateTime
-      error={checkFieldValidity(props as ControlProps).length > 0}
-      width="100%"
-      name={appliedUiSchemaOptions?.name || `${id || label}-input`}
-      value={data ? new Date(data).toISOString() : ''}
-      testId={appliedUiSchemaOptions?.testId || `${id}-input`}
-      disabled={!enabled}
-      // 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')) {
-          value = isValidDate(value) ? new Date(value)?.toISOString() : '';
-          handleChange(path, value);
-        }
-      }}
-      onBlur={(name: string, value: string) => {
-        value = isValidDate(value) ? new Date(value).toISOString() : '';
-        handleChange(path, value);
-      }}
-      {...uischema?.options?.componentProps}
-    />
-  );
-};
-
-export const GoADateTimeControl = (props: ControlProps) => <GoAInputBaseControl {...props} input={GoADateTimeInput} />;
-
-export const GoADateTimeControlTester: RankedTester = rankWith(2, isDateTimeControl);
-export const GoAInputDateTimeControl = withJsonFormsControlProps(GoADateTimeControl);

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

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

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

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

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

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

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

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