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

package/src/components/inputs/select/dropdown.scss

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

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { type EncounterContext, FormContext } from '../../../form-context';
+import Dropdown from './dropdown.component';
+import { type FormField } from '../../../types';
+
+const question: FormField = {
+  label: 'Patient past program.',
+  type: 'obs',
+  questionOptions: {
+    rendering: 'select',
+    concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+    answers: [
+      {
+        label: 'HIV Care and Treatment',
+        value: '6ddd933a-e65c-4f35-8884-c555b50c55e1',
+      },
+      {
+        label: 'Oncology Screening and Diagnosis Program',
+        value: '12f7be3d-fb5d-47dc-b5e3-56c501be80a6',
+      },
+      {
+        label: 'Fight Malaria Initiative',
+        value: '14cd2628-8a33-4b93-9c10-43989950bba0',
+      },
+    ],
+  },
+  meta: {},
+  id: 'patient-past-program',
+};
+
+const encounterContext: EncounterContext = {
+  patient: {
+    id: '833db896-c1f0-11eb-8529-0242ac130003',
+  },
+  location: {
+    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003',
+  },
+  encounter: {
+    uuid: '873455da-3ec4-453c-b565-7c1fe35426be',
+    obs: [],
+  },
+  sessionMode: 'enter',
+  encounterDate: new Date(2020, 11, 29),
+  setEncounterDate: (value) => {},
+  encounterProvider: '2c95f6f5-788e-4e73-9079-5626911231fa',
+  setEncounterProvider: jest.fn,
+  setEncounterLocation: jest.fn,
+  encounterRole: '8cb3a399-d18b-4b62-aefb-5a0f948a3809',
+  setEncounterRole: jest.fn,
+};
+
+const renderForm = (initialValues) => {
+  render(<></>);
+};
+
+describe.skip('dropdown input field', () => {
+  afterEach(() => {
+    // teardown
+    question.meta = {};
+  });
+
+  it('should record new obs', async () => {
+    await renderForm({});
+    // setup
+    const dropdownWidget = screen.getByRole('combobox', { name: /Patient past program./ });
+
+    // assert initial values
+    await act(async () => {
+      expect(question.meta.submission).toBe(undefined);
+    });
+
+    // choose an option
+    fireEvent.click(dropdownWidget);
+    const fightMalariaOption = screen.getByText('Fight Malaria Initiative');
+    fireEvent.click(fightMalariaOption);
+
+    // verify
+    await act(async () => {
+      expect(question.meta.submission.newValue).toEqual({
+        concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+        formFieldNamespace: 'rfe-forms',
+        formFieldPath: 'rfe-forms-patient-past-program',
+        value: '14cd2628-8a33-4b93-9c10-43989950bba0',
+      });
+    });
+  });
+
+  it('should edit obs', async () => {
+    // setup
+    question.meta.previousValue = {
+      uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+      person: '833db896-c1f0-11eb-8529-0242ac130003',
+      obsDatetime: encounterContext.encounterDate,
+      concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+      location: { uuid: '41e6e516-c1f0-11eb-8529-0242ac130003' },
+      order: null,
+      groupMembers: [],
+      voided: false,
+      value: '6ddd933a-e65c-4f35-8884-c555b50c55e1',
+    };
+    await renderForm({ 'patient-past-program': question.meta.previousValue.value });
+    const dropdownWidget = screen.getByRole('combobox', { name: /Patient past program./ });
+
+    // do some edits
+    fireEvent.click(dropdownWidget);
+    const oncologyScreeningOption = screen.getByText('Oncology Screening and Diagnosis Program');
+    fireEvent.click(oncologyScreeningOption);
+
+    // verify
+    await act(async () => {
+      expect(question.meta.submission.newValue).toEqual({
+        uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+        value: '12f7be3d-fb5d-47dc-b5e3-56c501be80a6',
+        formFieldNamespace: 'rfe-forms',
+        formFieldPath: 'rfe-forms-patient-past-program',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,65 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, TextInput } from '@carbon/react';
+import styles from './text.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+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 FieldLabel from '../../field-label/field-label.component';
+
+const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [lastBlurredValue, setLastBlurredValue] = useState(null);
+  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' ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={value}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <>
+        <div className={styles.boldedLabel}>
+          <Layer>
+            <TextInput
+              id={field.id}
+              labelText={<FieldLabel field={field} />}
+              onChange={setFieldValue}
+              onBlur={onBlur}
+              name={field.id}
+              value={value}
+              disabled={field.isDisabled}
+              readOnly={isTrue(field.readonly)}
+              invalid={errors.length > 0}
+              invalidText={errors[0]?.message}
+              warn={warnings.length > 0}
+              warnText={warnings.length && warnings[0].message}
+              maxLength={field.questionOptions.max || TextInput.maxLength}
+            />
+          </Layer>
+        </div>
+      </>
+    )
+  );
+};
+
+export default TextField;

package/src/components/inputs/text/text.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;
+}
+
+:global(.cds--text-input__readonly-icon) {
+  display: none;
+}

package/src/components/inputs/text/text.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
+import { type EncounterContext } from '../../../form-context';
+import { type FormField } from '../../../types';
+
+const question: FormField = {
+  label: 'Patient Name',
+  id: 'patient-name',
+  type: 'obs',
+  questionOptions: {
+    rendering: 'text',
+    concept: 'your_concept_uuid_here',
+  },
+  meta: {},
+};
+
+const question2: FormField = {
+  label: 'Patient Name',
+  id: 'patient-name',
+  type: 'obs',
+  questionOptions: {
+    rendering: 'text',
+    concept: 'your_concept_uuid_here',
+  },
+  meta: {},
+};
+
+const encounterContext: EncounterContext = {
+  patient: {
+    id: '833db896-c1f0-11eb-8529-0242ac130003',
+  },
+  location: {
+    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003',
+  },
+  encounter: {
+    uuid: '873455da-3ec4-453c-b565-7c1fe35426be',
+    obs: [],
+  },
+  sessionMode: 'enter',
+  encounterDate: new Date(2020, 11, 29),
+  setEncounterDate: (value) => {},
+  encounterProvider: '2c95f6f5-788e-4e73-9079-5626911231fa',
+  setEncounterProvider: jest.fn,
+  setEncounterLocation: jest.fn,
+  encounterRole: '8cb3a399-d18b-4b62-aefb-5a0f948a3809',
+  setEncounterRole: jest.fn,
+};
+
+const renderForm = (intialValues) => {
+  render(<></>);
+};
+
+describe.skip('Text field input', () => {
+  afterEach(() => {
+    question.meta = {};
+  });
+
+  it('should record new obs', async () => {
+    await renderForm({});
+    const inputField = screen.getByLabelText('Patient Name');
+
+    await act(async () => {
+      expect(question.meta.submission).toBe(undefined);
+    });
+
+    fireEvent.change(inputField, { target: { value: 'John Doe' } });
+    fireEvent.blur(inputField);
+
+    await act(async () => {
+      expect(question.meta.submission.newValue).toEqual({
+        concept: 'your_concept_uuid_here',
+        formFieldNamespace: 'rfe-forms',
+        formFieldPath: 'rfe-forms-patient-name',
+        value: 'John Doe',
+      });
+    });
+  });
+
+  it('should edit obs', async () => {
+    question.meta.previousValue = {
+      person: '833db896-c1f0-11eb-8529-0242ac130003',
+      obsDatetime: encounterContext.encounterDate,
+      concept: 'your_concept_uuid_here',
+      location: { uuid: '41e6e516-c1f0-11eb-8529-0242ac130003' },
+      order: null,
+      groupMembers: [],
+      voided: false,
+      value: 'Initial Name',
+    };
+    await renderForm({ 'patient-name': question.meta.previousValue });
+    const inputField = screen.getByLabelText('Patient Name');
+
+    fireEvent.change(inputField, { target: { value: 'Updated Name' } });
+    fireEvent.blur(inputField);
+
+    await act(async () => {
+      expect(question.meta.submission.newValue).toEqual({
+        value: 'Updated Name',
+        formFieldNamespace: 'rfe-forms',
+        formFieldPath: 'rfe-forms-patient-name',
+      });
+    });
+  });
+});

package/src/components/inputs/text-area/text-area.component.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, TextArea as TextAreaInput } 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 styles from './text-area.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+
+const TextArea: 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' ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={value}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <div className={styles.boldedLabel}>
+        <Layer>
+          <TextAreaInput
+            id={field.id}
+            labelText={<FieldLabel field={field} />}
+            name={field.id}
+            onChange={setFieldValue}
+            onBlur={onBlur}
+            value={value || ''}
+            rows={field.questionOptions.rows || 4}
+            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 TextArea;

package/src/components/inputs/text-area/text-area.scss

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

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useMemo } from 'react';
+import { Toggle as ToggleInput } 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 { isEmpty } from '../../../validators/form-validator';
+import styles from './toggle.scss';
+import { useTranslation } from 'react-i18next';
+import { useFormProviderContext } from '../../../provider/form-provider';
+
+const Toggle: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const context = useFormProviderContext();
+
+  const handleChange = (value) => {
+    setFieldValue(value);
+  };
+
+  useEffect(() => {
+    // The toggle input doesn't support blank values
+    // by default, the value should be false
+    if (!field.meta?.previousValue && context.sessionMode == 'enter') {
+      context.formFieldAdapters[field.type].transformFieldValue(field, value ?? false, context);
+    }
+  }, []);
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(context.sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(
+        field.inlineRendering,
+        context.layoutType,
+        context.workspaceLayout,
+        context.sessionMode,
+      );
+    }
+    return false;
+  }, [context.sessionMode, field.readonly, field.inlineRendering, context.layoutType, context.workspaceLayout]);
+
+  return context.sessionMode == 'view' || context.sessionMode == 'embedded-view' ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={!isEmpty(value) ? context.formFieldAdapters[field.type].getDisplayValue(field, value) : value}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <div className={styles.boldedLabel}>
+        <ToggleInput
+          labelText={t(field.label)}
+          className={styles.boldedLabel}
+          id={field.id}
+          labelA={field.questionOptions.toggleOptions.labelFalse}
+          labelB={field.questionOptions.toggleOptions.labelTrue}
+          onToggle={handleChange}
+          toggled={!!value}
+          disabled={field.isDisabled}
+          readOnly={field.readonly}
+        />
+      </div>
+    )
+  );
+};
+
+export default Toggle;

package/src/components/inputs/toggle/toggle.scss

@@ -0,0 +1,12 @@
+@use '@carbon/colors';
+
+.boldedLabel label {
+  font-weight: 600;
+  color: colors.$black-100;
+
+  :global(.cds--toggle__label-text) {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: colors.$black-100;
+  }
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tooltip as CarbonTooltip } from '@carbon/react';
+import { Information } from '@carbon/react/icons';
+import { type FormField } from '../../../types';
+import { useTranslation } from 'react-i18next';
+
+import styles from './tooltip.scss';
+interface TooltipProps {
+  field: FormField;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ field }) => {
+  const { t } = useTranslation();
+  return (
+    <CarbonTooltip align="top" label={t(field.questionInfo)} description={t(field.questionInfo)}>
+      <button className={styles.tooltip} type="button" data-testid={field.id}>
+        <Information />
+      </button>
+    </CarbonTooltip>
+  );
+};
+
+export default Tooltip;

package/src/components/inputs/tooltip/tooltip.scss

@@ -0,0 +1,8 @@
+.tooltip {
+  border: none;
+  background-color: #f4f4f4;
+  z-index: 999;
+  margin-bottom: 0.2rem;
+  padding-left: 8px;
+  padding-top: 8px;
+}