@openmrs/esm-form-engine-lib 2.1.0-pre.1362

package/src/components/inputs/file/file.scss

@@ -0,0 +1,101 @@
+.label {
+  font-family: IBM Plex Sans;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px; /* 128.571% */
+  letter-spacing: 0.16px;
+  color: #000000;
+}
+
+.saveFile {
+  margin: 0;
+}
+
+.capturedImage {
+  width: 100%;
+}
+
+.caption {
+  display: flex;
+}
+
+.closeIcon {
+  margin: 0 1rem;
+}
+
+.uploadSelector {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.selectorButton {
+  margin-right: 1rem;
+}
+
+.caption {
+  display: flex;
+  margin-top: 5px;
+}
+
+.imageDescription {
+  margin-top: 5px;
+}
+
+.fileUploader {
+  background-color: rgb(255, 255, 255);
+  padding: 1rem;
+}
+
+.cameraUploader {
+  margin: 1rem 0;
+  background-color: white;
+  padding: 1rem;
+}
+
+.camButton {
+  margin-bottom: 1rem;
+}
+
+.cameraPreview {
+  margin-top: 1rem;
+}
+
+.imageContent {
+  padding: 0;
+  margin: 0;
+}
+
+.titleStyles {
+  color: #161616;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+  line-height: 1.2857;
+  margin-bottom: 0.5rem;
+}
+
+.descriptionStyles {
+  color: #525252;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+  line-height: 1.28572;
+  margin-bottom: 1rem;
+}
+
+.editModeImage {
+  background-color: white;
+  padding: 1rem;
+}
+
+.pdfThumbnail {
+  cursor: pointer;
+  background-color: gray;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 5rem;
+  height: 5rem;
+}

package/src/components/inputs/fixed-value/fixed-value.component.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { isEmpty } from '../../../validators/form-validator';
+import { type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+
+const FixedValue: React.FC<FormFieldInputProps> = ({ field, setFieldValue }) => {
+  const context = useFormProviderContext();
+
+  useEffect(() => {
+    if (!field.meta?.previousValue && !isEmpty(field.meta.fixedValue)) {
+      setFieldValue(field.meta.fixedValue);
+      context.formFieldAdapters[field.type].transformFieldValue(field, field.meta.fixedValue, context);
+    }
+  }, []);
+
+  return <></>;
+};
+
+export default FixedValue;

package/src/components/inputs/markdown/markdown-wrapper.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const MarkdownWrapper: React.FC<{ markdown: string | string[] }> = ({ markdown }) => {
+  return (
+    <ReactMarkdown
+      children={Array.isArray(markdown) ? markdown.join('\n') : markdown}
+      unwrapDisallowed={true}
+      allowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'strong', 'em']}
+    />
+  );
+};
+
+export default MarkdownWrapper;

package/src/components/inputs/markdown/markdown.component.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import MarkdownWrapper from './markdown-wrapper.component';
+import { type FormFieldInputProps } from '../../../types';
+
+const Markdown: React.FC<FormFieldInputProps> = ({ field }) => {
+  return !field.isHidden && <MarkdownWrapper markdown={field.value} />;
+};
+export default Markdown;

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { FilterableMultiSelect, Layer, Tag, CheckboxGroup, Checkbox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type FormFieldInputProps } from '../../../types';
+import { ValueEmpty } from '../../value/value.component';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { isTrue } from '../../../utils/boolean-utils';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './multi-select.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+
+const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [counter, setCounter] = useState(0);
+  const [initiallyCheckedQuestionItems, setInitiallyCheckedQuestionItems] = useState([]);
+  const isFirstRender = useRef(true);
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+
+  const selectOptions = field.questionOptions.answers
+    .filter((answer) => !answer.isHidden)
+    .map((answer, index) => ({
+      id: `${field.id}-${answer.concept}`,
+      concept: answer.concept,
+      label: answer.label,
+      key: index,
+      disabled: answer.disable?.isDisabled,
+    }));
+
+  const initiallySelectedQuestionItems = useMemo(() => {
+    if (value?.length && counter < 1) {
+      setCounter(counter + 1);
+      return selectOptions.filter((item) => value?.includes(item.concept));
+    }
+    return [];
+  }, [value]);
+
+  const handleSelectItemsChange = ({ selectedItems }) => {
+    const value = selectedItems.map((selectedItem) => {
+      return selectedItem.concept;
+    });
+    setFieldValue(value);
+  };
+
+  useEffect(() => {
+    if (isFirstRender.current && counter === 1) {
+      setInitiallyCheckedQuestionItems(initiallySelectedQuestionItems.map((item) => item.concept));
+      isFirstRender.current = false;
+    }
+  }, [initiallySelectedQuestionItems, isFirstRender]);
+
+  const handleSelectCheckbox = (val) => {
+    const value = val.concept;
+    const isChecked = initiallyCheckedQuestionItems.some((item) => item === value);
+    let updatedItems;
+    if (isChecked) {
+      updatedItems = initiallyCheckedQuestionItems.filter((item) => item !== value);
+    } else {
+      updatedItems = initiallyCheckedQuestionItems.some((val) => val === value)
+        ? initiallyCheckedQuestionItems.filter((item) => item !== value)
+        : [...initiallyCheckedQuestionItems, value];
+    }
+    setInitiallyCheckedQuestionItems(updatedItems);
+    setFieldValue(updatedItems);
+  };
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  const label = useMemo(() => {
+    return field.isRequired ? <FieldLabel field={field} /> : <span>{t(field.label)}</span>;
+  }, [field.isRequired, field.label, t]);
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' ? (
+    <div className={styles.formField}>
+      <FieldValueView
+        label={t(field.label)}
+        value={value ? formFieldAdapters[field.type]?.getDisplayValue(field, value) : value}
+        conceptName={field.meta?.concept?.display}
+        isInline={isInline}
+      />
+    </div>
+  ) : (
+    !field.isHidden && (
+      <>
+        <div className={styles.boldedLabel}>
+          <Layer>
+            {field.inlineMultiCheckbox ? (
+              <CheckboxGroup legendText={label} name={field.id}>
+                {field.questionOptions.answers?.map((value, index) => {
+                  return (
+                    <Checkbox
+                      key={value.concept}
+                      className={styles.checkbox}
+                      labelText={value.label}
+                      id={value.concept}
+                      onChange={() => {
+                        handleSelectCheckbox(value);
+                      }}
+                      name={value.concept}
+                      defaultChecked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
+                      checked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
+                      onBlur={onblur}
+                    />
+                  );
+                })}
+              </CheckboxGroup>
+            ) : (
+              <FilterableMultiSelect
+                placeholder={t('search', 'Search') + '...'}
+                onChange={handleSelectItemsChange}
+                id={t(field.label)}
+                items={selectOptions}
+                initialSelectedItems={initiallySelectedQuestionItems}
+                label={''}
+                titleText={label}
+                key={counter}
+                itemToString={(item) => (item ? item.label : ' ')}
+                disabled={field.isDisabled}
+                invalid={errors.length > 0}
+                invalidText={errors[0]?.message}
+                warn={warnings.length > 0}
+                warnText={warnings[0]?.message}
+                readOnly={field.readonly}
+              />
+            )}
+          </Layer>
+        </div>
+        <div className={styles.selectionDisplay}>
+          {value?.length && field.questionOptions.answers?.length > 5 ? (
+            <div className={styles.tagContainer}>
+              {formFieldAdapters[field.type]?.getDisplayValue(field, value)?.map((displayValue, index) => (
+                <Tag key={index} type="cool-gray">
+                  {displayValue}
+                </Tag>
+              ))}
+            </div>
+          ) : (
+            <ValueEmpty />
+          )}
+        </div>
+      </>
+    )
+  );
+};
+
+export default MultiSelect;

package/src/components/inputs/multi-select/multi-select.scss

@@ -0,0 +1,25 @@
+@use '@carbon/colors';
+
+.boldedLabel label,
+legend > span {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.selectionDisplay {
+  margin-top: 0.125rem;
+}
+
+.tagContainer {
+  margin: 0.5rem 0;
+}
+
+.checkbox label {
+  color: colors.$black-100 !important;
+  font-weight: 500 !important;
+}

package/src/components/inputs/multi-select/multi-select.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
+import { type FormSchema } from '../../../types';
+import { mockPatient } from '__mocks__/patient.mock';
+import { mockSessionDataResponse } from '__mocks__/session.mock';
+import { mockVisit } from '__mocks__/visit.mock';
+import multiSelectFormSchema from '__mocks__/forms/rfe-forms/multi-select-form.json';
+import FormEngine from '../../../form-engine.component';
+global.ResizeObserver = require('resize-observer-polyfill');
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseSession = jest.mocked(useSession);
+const mockUsePatient = jest.mocked(usePatient);
+
+const visit = mockVisit;
+const patientUUID = '8673ee4f-e2ab-4077-ba55-4980f408773e';
+
+jest.mock('../../../api', () => {
+  const originalModule = jest.requireActual('../../../api');
+
+  return {
+    ...originalModule,
+    getPreviousEncounter: jest.fn().mockImplementation(() => Promise.resolve(null)),
+    getConcept: jest.fn().mockImplementation(() => Promise.resolve(null)),
+    getLatestObs: jest.fn().mockImplementation(() => Promise.resolve({ valueNumeric: 60 })),
+    saveEncounter: jest.fn(),
+    createProgramEnrollment: jest.fn(),
+  };
+});
+
+const renderForm = async () => {
+  await act(() =>
+    render(
+      <FormEngine
+        formJson={multiSelectFormSchema as unknown as FormSchema}
+        formUUID={null}
+        patientUUID={patientUUID}
+        formSessionIntent={undefined}
+        visit={visit}
+      />,
+    ),
+  );
+};
+
+describe.skip('MultiSelect Component', () => {
+  beforeEach(() => {
+    mockOpenmrsFetch.mockResolvedValue({
+      data: { results: [{ ...multiSelectFormSchema }] },
+    } as unknown as FetchResponse);
+
+    mockUseSession.mockReturnValue(mockSessionDataResponse.data);
+
+    mockUsePatient.mockReturnValue({
+      isLoading: false,
+      patient: mockPatient,
+      patientUuid: mockPatient.id,
+      error: null,
+    });
+  });
+
+  it('renders correctly', async () => {
+    await renderForm();
+    expect(screen.getByRole('combobox', { name: /Patient covered by NHIF/i })).toBeInTheDocument();
+    expect(screen.getByText('Was this visit scheduled?')).toBeInTheDocument();
+  });
+
+  it('should disable checkbox option if the field value depends on evaluates the expression to true', async () => {
+    const user = userEvent.setup();
+    await renderForm();
+
+    await user.click(screen.getByRole('combobox', { name: /Patient covered by NHIF/i }));
+    await user.click(screen.getByRole('option', { name: /no/i }));
+
+    await user.click(screen.getByText('Was this visit scheduled?'));
+    expect(screen.getByRole('option', { name: /Unscheduled visit early/i })).toHaveAttribute('disabled');
+  });
+
+  it('should enable checkbox option if the field value depends on evaluates the expression to false', async () => {
+    const user = userEvent.setup();
+    await renderForm();
+
+    await user.click(screen.getByRole('combobox', { name: /patient covered by nhif/i }));
+    await user.click(screen.getByRole('option', { name: /yes/i }));
+
+    await user.click(screen.getByText('Was this visit scheduled?'));
+    expect(screen.getByRole('option', { name: /Unscheduled visit early/i })).not.toHaveAttribute('disabled');
+  });
+});

package/src/components/inputs/number/number.component.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo, useState } from 'react';
+import { Layer, NumberInput } from '@carbon/react';
+import classNames from 'classnames';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import FieldValueView from '../../value/view/field-value-view.component';
+import { type FormFieldInputProps } from '../../../types';
+import styles from './number.scss';
+import { useTranslation } from 'react-i18next';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+
+const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [lastBlurredValue, setLastBlurredValue] = useState(value);
+  const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+
+  const onBlur = (event) => {
+    event.preventDefault();
+    if (lastBlurredValue != value) {
+      setLastBlurredValue(value);
+    }
+  };
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' ? (
+    <div className={styles.formField}>
+      <FieldValueView
+        label={t(field.label)}
+        value={value}
+        conceptName={field.meta?.concept?.display}
+        isInline={isInline}
+      />
+    </div>
+  ) : (
+    <Layer>
+      <NumberInput
+        id={field.id}
+        invalid={errors.length > 0}
+        invalidText={errors[0]?.message}
+        label={<FieldLabel field={field} />}
+        max={Number(field.questionOptions.max) || undefined}
+        min={Number(field.questionOptions.min) || undefined}
+        name={field.id}
+        value={field.value ?? ''}
+        onChange={setFieldValue}
+        onBlur={onBlur}
+        allowEmpty={true}
+        size="lg"
+        hideSteppers={true}
+        onWheel={(e) => e.target.blur()}
+        disabled={field.isDisabled}
+        readOnly={field.readonly}
+        className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
+        warn={warnings.length > 0}
+        warnText={warnings[0]?.message}
+        step={0.01}
+      />
+    </Layer>
+  );
+};
+
+export default NumberField;

package/src/components/inputs/number/number.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+
+.boldedLabel label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.controlWidthConstrained {
+  max-width: 18rem;
+}

package/src/components/inputs/radio/radio.component.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FormGroup, RadioButtonGroup, RadioButton } from '@carbon/react';
+import { type FormFieldInputProps } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './radio.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+
+const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+
+  const handleChange = (value) => {
+    setFieldValue(value);
+  };
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' || isTrue(field.readonly) ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={value ? formFieldAdapters[field.type].getDisplayValue(field, value) : value}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <FormGroup
+        legendText={<FieldLabel field={field} />}
+        className={styles.boldedLegend}
+        disabled={field.isDisabled}
+        invalid={errors.length > 0}>
+        <RadioButtonGroup
+          name={field.id}
+          valueSelected={value}
+          onChange={handleChange}
+          orientation={field.questionOptions?.orientation || 'vertical'}>
+          {field.questionOptions.answers
+            .filter((answer) => !answer.isHidden)
+            .map((answer, index) => {
+              return (
+                <RadioButton
+                  id={`${field.id}-${answer.label}`}
+                  labelText={answer.label ?? ''}
+                  value={answer.concept}
+                  key={index}
+                  onClick={(e) => {
+                    if (value && e.target.checked) {
+                      e.target.checked = false;
+                      handleChange(null);
+                    } else {
+                      handleChange(answer.concept);
+                    }
+                  }}
+                />
+              );
+            })}
+        </RadioButtonGroup>
+        {(errors?.length > 0 || warnings?.length > 0) && (
+          <div>
+            <div className={styles.errorMessage}>
+              {errors.length > 0 ? errors[0].message : warnings.length > 0 ? warnings[0].message : null}
+            </div>
+          </div>
+        )}
+      </FormGroup>
+    )
+  );
+};
+
+export default Radio;

package/src/components/inputs/radio/radio.scss

@@ -0,0 +1,36 @@
+@use '@carbon/colors';
+
+.errorLegend legend {
+  color: colors.$red-60 !important;
+  font-weight: 600;
+}
+
+.boldedLegend legend {
+  color: colors.$black-100 !important;
+  font-weight: 600;
+}
+
+.warningLabel {
+  display: block;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-weight: 400;
+  color: colors.$gray-70;
+}
+
+.errorLabel {
+  display: block;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-weight: 400;
+  color: colors.$red-60;
+}
+
+.errorMessage {
+  display: block;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-weight: 400;
+  color: colors.$red-60;
+  font-size: 0.8rem;
+}

package/src/components/inputs/select/dropdown.component.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dropdown as DropdownInput, Layer } from '@carbon/react';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { isTrue } from '../../../utils/boolean-utils';
+import { type FormFieldInputProps } from '../../../types';
+import FieldValueView from '../../value/view/field-value-view.component';
+import FieldLabel from '../../field-label/field-label.component';
+
+import styles from './dropdown.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+
+const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+
+  const handleChange = useCallback(
+    (value) => {
+      setFieldValue(value);
+    },
+    [setFieldValue],
+  );
+
+  const itemToString = useCallback(
+    (item) => {
+      const answer = field.questionOptions.answers.find((opt) => (opt.value ? opt.value == item : opt.concept == item));
+      return answer?.label;
+    },
+    [field.questionOptions.answers],
+  );
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={value ? formFieldAdapters[field.type].getDisplayValue(field, value) : value}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <div className={styles.boldedLabel}>
+        <Layer>
+          <DropdownInput
+            id={field.id}
+            titleText={<FieldLabel field={field} />}
+            label={t('chooseAnOption', 'Choose an option')}
+            items={field.questionOptions.answers
+              .filter((answer) => !answer.isHidden)
+              .map((item) => item.value || item.concept)}
+            itemToString={itemToString}
+            selectedItem={value}
+            onChange={({ selectedItem }) => handleChange(selectedItem)}
+            disabled={field.isDisabled}
+            readOnly={field.readonly}
+            invalid={errors.length > 0}
+            invalidText={errors[0]?.message}
+            warn={warnings.length > 0}
+            warnText={warnings[0]?.message}
+          />
+        </Layer>
+      </div>
+    )
+  );
+};
+
+export default Dropdown;