@abgov/jsonforms-components 0.0.1

package/src/lib/Controls/FormStepper/FormStepperControl.tsx

@@ -0,0 +1,269 @@
+import React, { useMemo } from 'react';
+import { useState, useEffect } from 'react';
+import { GoAFormStepper, GoAFormStep, GoAPages, GoAButton } from '@abgov/react-components-new';
+import {
+  Categorization,
+  UISchemaElement,
+  deriveLabelForUISchemaElement,
+  Category,
+  StatePropsOfLayout,
+  isVisible,
+  isEnabled,
+} from '@jsonforms/core';
+
+import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps, useJsonForms } from '@jsonforms/react';
+import { AjvProps, withAjvProps } from '@jsonforms/material-renderers';
+import { JsonFormsDispatch } from '@jsonforms/react';
+import { Hidden } from '@mui/material';
+import { Grid, GridItem } from '../../common/Grid';
+import { ReviewItem, ReviewListItem, ReviewListWrapper } from './styled-components';
+
+export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
+  // eslint-disable-next-line
+  data: any;
+}
+
+export const FormStepper = ({
+  uischema,
+  data,
+  schema,
+  // eslint-disable-next-line
+  ajv,
+  path,
+  cells,
+  renderers,
+  config,
+  visible,
+  enabled,
+  t,
+}: CategorizationStepperLayoutRendererProps) => {
+  const categorization = uischema as Categorization;
+  const [step, setStep] = useState(0);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [showNextBtn, setShowNextBtn] = useState(true);
+  const categories = useMemo(
+    () => categorization.elements.filter((category) => isVisible(category, data, '', ajv)),
+    [categorization, data, ajv]
+  );
+  const disabledCategoryMap: boolean[] = categories.map((c) => !isEnabled(c, data, '', ajv));
+  const handleSubmit = () => {
+    console.log('submitted', data);
+  };
+
+  const CategoryLabels = useMemo(() => {
+    return categories.map((e: Category | Categorization) => deriveLabelForUISchemaElement(e, t));
+  }, [categories, t]);
+
+  useEffect(() => {}, [categories.length]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const vslidateFormData = (formData: Array<UISchemaElement>) => {
+    const validate = ajv.compile(schema);
+    return validate(formData);
+  };
+
+  useEffect(() => {
+    const valid = vslidateFormData(data);
+    setIsFormValid(valid);
+  }, [data, vslidateFormData]);
+
+  if (categories?.length < 1) {
+    // eslint-disable-next-line
+    return <></>;
+  }
+
+  function nextPage(page: number, disabled: boolean[]) {
+    page++;
+    while (page <= disabled.length && disabled[page - 1]) {
+      page++;
+    }
+    setPage(page);
+  }
+
+  function prevPage(page: number, disabled: boolean[]) {
+    page--;
+    while (page >= 0 && disabled[page - 1]) {
+      page--;
+    }
+    setPage(page);
+  }
+
+  function setPage(page: number) {
+    setStep(page);
+    if (page < 1 || page > categories.length + 1) return;
+    if (categories.length + 1 === page) {
+      setShowNextBtn(false);
+    } else {
+      setShowNextBtn(true);
+    }
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setStep(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const renderStepElements = (category: Category | Categorization, indexOfCategory: number) => {
+    return (
+      /*
+        [Mar-04-2024][Paul Li] the GoAPages internal state cannot handle the hidden/display well. We need extra hide/display control to it appropriately.
+       */
+      <Hidden xsUp={indexOfCategory !== step - 1}>
+        {category.elements.map((elementUiSchema, index) => {
+          return (
+            <JsonFormsDispatch
+              key={index}
+              schema={schema}
+              uischema={elementUiSchema}
+              renderers={renderers}
+              cells={cells}
+              path={path}
+              visible={visible}
+              enabled={enabled && !disabledCategoryMap[indexOfCategory]}
+            />
+          );
+        })}
+      </Hidden>
+    );
+  };
+
+  return (
+    <Hidden xsUp={!visible}>
+      <div id={`${path || `goa`}-form-stepper`} className="formStepper">
+        <GoAFormStepper
+          testId="form-stepper-test"
+          step={step}
+          onChange={(step) => {
+            setPage(step);
+          }}
+        >
+          {categories?.map((category, index) => {
+            return (
+              <GoAFormStep
+                key={`${CategoryLabels[index]}-tab`}
+                text={`${CategoryLabels[index]}${disabledCategoryMap[index] ? ' (disabled)' : ''}`}
+                status={'incomplete'}
+              />
+            );
+          })}
+          <GoAFormStep text="Review" status="incomplete" />
+        </GoAFormStepper>
+        <GoAPages current={step} mb="xl">
+          {categories?.map((category, index) => {
+            return (
+              <div data-testid={`step_${index}-content`} key={`${CategoryLabels[index]}`}>
+                {renderStepElements(category, index)}
+              </div>
+            );
+          })}
+          <div>
+            <h3 style={{ flex: 1 }}>Summary</h3>
+
+            <ReviewItem>
+              <div style={{ width: '100%' }}>
+                {data && Object.keys(data)?.length > 0 && (
+                  <Grid>
+                    {Object.keys(flattenObject(data)).map((key, ix) => {
+                      return (
+                        <GridItem key={ix} md={6} vSpacing={1} hSpacing={0.5}>
+                          <b>{key}</b> : <PreventControlElement key={ix} value={flattenObject(data)[key]} />
+                        </GridItem>
+                      );
+                    })}
+                  </Grid>
+                )}
+              </div>
+            </ReviewItem>
+          </div>
+        </GoAPages>
+        {step && step !== 0 && (
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            {step !== 1 ? (
+              <GoAButton
+                type="secondary"
+                disabled={disabledCategoryMap[step - 1] || !enabled}
+                onClick={() => prevPage(step, disabledCategoryMap)}
+              >
+                Previous
+              </GoAButton>
+            ) : (
+              <div></div>
+            )}
+            {step !== null && showNextBtn && (
+              <GoAButton
+                type="primary"
+                disabled={disabledCategoryMap[step - 1] || !enabled}
+                onClick={() => nextPage(step, disabledCategoryMap)}
+              >
+                Next
+              </GoAButton>
+            )}
+            {!showNextBtn && (
+              <div>
+                <GoAButton type="primary" onClick={handleSubmit} disabled={!isFormValid || !enabled}>
+                  Submit
+                </GoAButton>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </Hidden>
+  );
+};
+
+interface PreventControlElement {
+  value: unknown;
+}
+
+const PreventControlElement = (props: PreventControlElement): JSX.Element => {
+  if (typeof props?.value === 'string') return <span>{props.value}</span>;
+
+  if (Array.isArray(props?.value)) {
+    return (
+      <div>
+        {props.value.map((item, index) => {
+          return (
+            <ReviewListWrapper key={index}>
+              {item &&
+                Object.keys(item).map((key, innerIndex) => {
+                  if (typeof item[key] === 'string') {
+                    return (
+                      <ReviewListItem key={innerIndex}>
+                        {key}: {item[key]}
+                      </ReviewListItem>
+                    );
+                  }
+                  return (
+                    <ReviewListItem key={innerIndex}>
+                      {key}: {String(item[key])}
+                    </ReviewListItem>
+                  );
+                })}
+            </ReviewListWrapper>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // eslint-disable-next-line
+  return <></>;
+};
+
+export const flattenObject = (obj: Record<string, string>): Record<string, string> => {
+  const flattened = {} as Record<string, string>;
+
+  Object.keys(obj || {}).forEach((key) => {
+    const value = obj[key];
+
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      Object.assign(flattened, flattenObject(value));
+    } else {
+      flattened[key] = value;
+    }
+  });
+
+  return flattened;
+};
+
+export const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));

package/src/lib/Controls/FormStepper/FormStepperTester.tsx

@@ -0,0 +1,22 @@
+import { rankWith, RankedTester, uiTypeIs, and, optionIs, UISchemaElement, isCategorization } from '@jsonforms/core';
+
+// Ensure that all children (Category) have valid elements or things tend
+// to blow up. If not, the the error control will report the problem.
+const categoriesAreValid = (uischema: UISchemaElement): boolean => {
+  let isValid = true;
+  if ('type' in uischema && uischema.type === 'Categorization' && 'elements' in uischema) {
+    (uischema.elements as UISchemaElement[]).forEach((e) => {
+      if (e.type !== 'Category' || !('elements' in e)) {
+        isValid = false;
+      }
+    });
+  } else {
+    return false;
+  }
+  return isValid;
+};
+
+export const CategorizationRendererTester: RankedTester = rankWith(
+  2,
+  and(uiTypeIs('Categorization'), categoriesAreValid, optionIs('variant', 'stepper'))
+);

package/src/lib/Controls/FormStepper/index.tsx

@@ -0,0 +1,2 @@
+export * from './FormStepperControl';
+export * from './FormStepperTester';

package/src/lib/Controls/FormStepper/styled-components.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const ReviewItem = styled.div`
+  display: flex;
+  border: 1px solid grey;
+  border-radius: 5px;
+  margin: 5px;
+  padding: 10px;
+`;
+
+export const ReviewListItem = styled.div`
+  margin-left: 1rem;
+`;
+
+export const ReviewListWrapper = styled.div`
+  margin-bottom: 1rem;
+`;

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

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import { GoAFormItem } from '@abgov/react-components-new';
+import { ControlProps } from '@jsonforms/core';
+import { Hidden } from '@mui/material';
+import { checkFieldValidity, getLabelText } from '../../util/stringUtils';
+export type GoAInputType =
+  | 'text'
+  | 'password'
+  | 'email'
+  | 'number'
+  | 'date'
+  | 'datetime-local'
+  | 'month'
+  | 'range'
+  | 'search'
+  | 'tel'
+  | 'time'
+  | 'url'
+  | 'week';
+
+export interface WithInput {
+  //eslint-disable-next-line
+  input: any;
+  noLabel?: boolean;
+}
+
+export const GoAInputBaseControl = (props: ControlProps & WithInput): JSX.Element => {
+  // eslint-disable-next-line
+  const { id, description, errors, uischema, visible, config, label, input, required } = props;
+  const isValid = errors.length === 0;
+  const InnerComponent = input;
+  const labelToUpdate: string = getLabelText(uischema.scope, label || '');
+
+  let modifiedErrors = checkFieldValidity(props as ControlProps);
+
+  if (modifiedErrors === 'should be equal to one of the allowed values' && uischema?.options?.enumContext) {
+    modifiedErrors = '';
+  }
+
+  return (
+    <Hidden xsUp={!visible}>
+      <GoAFormItem
+        requirement={required ? 'required' : undefined}
+        error={modifiedErrors}
+        label={props?.noLabel === true ? '' : labelToUpdate}
+        helpText={typeof uischema?.options?.help === 'string' ? uischema?.options?.help : ''}
+      >
+        <InnerComponent {...props} />
+      </GoAFormItem>
+    </Hidden>
+  );
+};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { isBooleanControl, RankedTester, rankWith, ControlProps, isDescriptionHidden } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { Hidden } from '@mui/material';
+import { GoACheckbox } from '@abgov/react-components-new';
+import { GoAInputBaseControl } from './InputBaseControl';
+import { checkFieldValidity } from '../../util/stringUtils';
+
+export const BooleanComponent = ({
+  data,
+  visible,
+  enabled,
+  uischema,
+  handleChange,
+  path,
+  config,
+  label,
+  required,
+  errors,
+  description,
+}: ControlProps) => {
+  const appliedUiSchemaOptions = { ...config, ...uischema.options };
+
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    false,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+  const errorsFormInput = checkFieldValidity({
+    data,
+    uischema,
+    label,
+    required,
+    errors,
+  } as ControlProps);
+
+  let text = label + (required ? ' (required)' : '');
+
+  if (label && description) {
+    text = description;
+    if (required) {
+      text = `${description} ` + (required ? ' (required)' : '');
+    }
+  }
+
+  return (
+    <GoACheckbox
+      error={errorsFormInput.length > 0}
+      testId={`${path}-checkbox-test-id`}
+      disabled={!enabled}
+      text={text}
+      name={`${path}`}
+      checked={data}
+      onChange={(name: string, checked: boolean, value: string) => {
+        handleChange(path, checked);
+      }}
+      {...uischema?.options?.componentProps}
+    ></GoACheckbox>
+  );
+};
+export const BooleanControl = (props: ControlProps) => (
+  <GoAInputBaseControl {...{ ...props, noLabel: true }} input={BooleanComponent} />
+);
+
+export const GoABooleanControlTester: RankedTester = rankWith(2, isBooleanControl);
+export const GoABooleanControl = withJsonFormsControlProps(BooleanControl);

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

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

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

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