@abgov/jsonforms-components 0.0.1 → 1.1.0

package/src/lib/Controls/FileUploader/ContextMenu.tsx

@@ -1,50 +0,0 @@
-import React, { FC } from 'react';
-import { GoAButton, GoAIconButton, GoAIconType } from '@abgov/react-components-new';
-import styled from 'styled-components';
-
-interface ContextMenuIconProps {
-  type: GoAIconType;
-  testId?: string;
-  title?: string;
-  onClick?: () => void;
-  disabled?: boolean;
-}
-
-interface ContextMenuTextProps {
-  type?: GoAIconType;
-  testId?: string;
-  onClick?: () => void;
-}
-
-export const GoAContextMenuIcon: FC<ContextMenuIconProps> = (props) => {
-  return (
-    <GoAIconButton
-      icon={props.type}
-      onClick={props.onClick}
-      title={props.title}
-      testId={props.testId}
-      size="small"
-      disabled={props.disabled}
-    />
-  );
-};
-
-export const GoAContextMenuText: FC<ContextMenuTextProps> = (props) => {
-  return <GoAButton type="tertiary" onClick={props.onClick} testId={props.testId} size="compact" />;
-};
-
-export const GoAContextMenu = styled.div`
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  gap: 0.25rem;
-
-  > .goa-icon-button {
-    cursor: pointer;
-    border-radius: 0.25rem;
-    padding: 0.25rem;
-  }
-  > .goa-icon-button + .goa-icon-button {
-    margin-left: 0rem;
-  }
-`;

package/src/lib/Controls/FileUploader/FileUploaderControl.tsx

@@ -1,131 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { GoAFileUploadInput, GoAFormItem, GoACircularProgress, GoAModal } from '@abgov/react-components-new';
-import { WithClassname, ControlProps } from '@jsonforms/core';
-
-import styled from 'styled-components';
-import { JsonFormContext } from '../../Context';
-
-import { GoAContextMenu, GoAContextMenuIcon } from './ContextMenu';
-
-type FileUploaderLayoutRendererProps = ControlProps & WithClassname;
-
-export const FileUploader = ({ data, path, handleChange, uischema, ...props }: FileUploaderLayoutRendererProps) => {
-  const enumerators = useContext(JsonFormContext);
-  const uploadTriggerFunction = enumerators.functions.get('upload-file');
-  const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
-  const downloadTriggerFunction = enumerators.functions.get('download-file');
-  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
-  const deleteTriggerFunction = enumerators.functions.get('delete-file');
-  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
-  const fileListValue = enumerators.data.get('file-list');
-  // eslint-disable-next-line
-  const fileList = fileListValue && (fileListValue() as Record<string, any>);
-  const { required, label, i18nKeyPrefix } = props;
-
-  const propertyId = i18nKeyPrefix as string;
-
-  const variant = uischema?.options?.variant || 'button';
-
-  function uploadFile(file: File) {
-    if (uploadTrigger) {
-      handleChange(propertyId, ['Loading', Array.isArray(data) ? data[1] : data, file?.name]);
-      uploadTrigger(file, propertyId);
-    }
-  }
-  function downloadFile(file: File) {
-    if (downloadTrigger) {
-      downloadTrigger(file, propertyId);
-    }
-  }
-  function deleteFile(file: File) {
-    if (deleteTrigger) {
-      deleteTrigger(file, propertyId);
-    }
-  }
-
-  useEffect(() => {
-    // UseEffect is required because not having it causes a react update error, but
-    // it doesn't function correctly within jsonforms unless there is a minor delay here
-    const delayedFunction = () => {
-      if (fileList && Array.isArray(data) && data[1] !== fileList[propertyId]?.urn) {
-        handleChange(propertyId, fileList && fileList[propertyId]?.urn);
-      }
-    };
-
-    const timeoutId = setTimeout(delayedFunction, 1);
-    return () => clearTimeout(timeoutId);
-  }, [data, handleChange, fileList, propertyId]);
-
-  return (
-    <FileUploaderStyle id="file-upload" className="FileUploader">
-      {required ? (
-        <GoAFormItem label={label} requirement="required"></GoAFormItem>
-      ) : (
-        <div className="label">{props.label}</div>
-      )}
-
-      <div className="file-upload">
-        <GoAFileUploadInput variant={variant} onSelectFile={uploadFile} />
-      </div>
-      <div>
-        {Array.isArray(data) && data[0] === 'Loading' ? (
-          <GoAModal open={Array.isArray(data) && data[0] === 'Loading'}>
-            <div className="align-center">
-              <GoACircularProgress visible={true} message={`Uploading ${data[2]}`} size="large" />
-            </div>
-          </GoAModal>
-        ) : (
-          <div>
-            {fileList && fileList[props.i18nKeyPrefix as string] && (
-              <AttachmentBorder>
-                <div>{fileList && fileList[props.i18nKeyPrefix as string].filename}</div>
-                <GoAContextMenu>
-                  <GoAContextMenuIcon
-                    testId="download-icon"
-                    title="Download"
-                    type="download"
-                    onClick={() => downloadFile(fileList && fileList[props.i18nKeyPrefix as string])}
-                  />
-                  <GoAContextMenuIcon
-                    data-testid="delete-icon"
-                    title="Delete"
-                    type="trash"
-                    onClick={() => deleteFile(fileList && fileList[props.i18nKeyPrefix as string])}
-                  />
-                </GoAContextMenu>
-              </AttachmentBorder>
-            )}
-          </div>
-        )}
-      </div>
-    </FileUploaderStyle>
-  );
-};
-
-const AttachmentBorder = styled.div`
-  display: flex;
-  flex-direction: row;
-  border: 1px solid #dcdcdc;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  width: fit-content;
-  margin-top: 5px;
-`;
-
-const FileUploaderStyle = styled.div`
-  .label {
-    display: block;
-    font-weight: var(--goa-font-weight-bold);
-    color: var(--goa-color-text-default);
-    font-size: var(--goa-font-size-4);
-    padding: 0 0 0.5rem 0;
-  }
-
-  .align-center {
-    text-align-last: center;
-  }
-
-  .file-upload {
-    margin-bottom: 0.5rem;
-  }
-`;

package/src/lib/Controls/FileUploader/FileUploaderTester.tsx

@@ -1,3 +0,0 @@
-import { rankWith, RankedTester, schemaTypeIs, and, formatIs } from '@jsonforms/core';
-
-export const FileUploaderTester: RankedTester = rankWith(3, and(schemaTypeIs('string'), formatIs('file-urn')));

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

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-export const ReviewItem = styled.div`
-  display: flex;
-  width: 100%;
-  border: 1px solid grey;
-  border-radius: 5px;
-  margin: 5px;
-  padding: 10px;
-`;

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

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

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

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

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

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