@olaboot/esm-form-engine-lib 4.1.0

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, NumberInput } from '@carbon/react';
+import { isEmpty } from '../../../validators/form-validator';
+import { isTrue } from '../../../utils/boolean-utils';
+import { type FormFieldInputProps } from '../../../types';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './number.scss';
+
+const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+
+  const numberValue = useMemo(() => {
+    if (isNaN(value)) {
+      return '';
+    }
+    return value ?? '';
+  }, [value]);
+
+  const getNumericValue = useCallback(
+    (value: string | number) => (typeof value === 'undefined' || isNaN(Number(value)) ? undefined : Number(value)),
+    [],
+  );
+
+  const handleChange = useCallback(
+    (event, { value }) => {
+      const parsedValue = getNumericValue(value);
+      setFieldValue(isNaN(parsedValue) ? undefined : parsedValue);
+    },
+    [setFieldValue, getNumericValue],
+  );
+
+  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 max = getNumericValue(field.questionOptions.max);
+  const min = getNumericValue(field.questionOptions.min);
+
+  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>
+  ) : (
+    !field.isHidden && (
+      <Layer>
+        <NumberInput
+          id={field.id}
+          invalid={errors.length > 0}
+          invalidText={errors[0]?.message}
+          label={<FieldLabel field={field} />}
+          max={max}
+          min={min}
+          name={field.id}
+          value={numberValue}
+          onChange={handleChange}
+          allowEmpty={true}
+          size="lg"
+          hideSteppers={field.hideSteppers ?? false}
+          disabled={field.isDisabled}
+          readOnly={isTrue(field.readonly)}
+          className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
+          warn={warnings.length > 0}
+          warnText={warnings[0]?.message}
+          step={field.questionOptions.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,81 @@
+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 { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './radio.scss';
+
+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}
+          readOnly={isTrue(field.readonly)}
+          orientation={field.questionOptions?.orientation || 'vertical'}>
+          {field.questionOptions.answers
+            .filter((answer) => !answer.isHidden)
+            .map((answer, index) => {
+              return (
+                <RadioButton
+                  id={`${field.id}-${answer.label}`}
+                  labelText={t(answer.label) ?? ''}
+                  value={answer.concept}
+                  key={index}
+                  onClick={(e: React.MouseEvent<HTMLInputElement>) => {
+                    if (value && (e.target as HTMLInputElement).checked) {
+                      (e.target as HTMLInputElement).checked = false;
+                      e.preventDefault();
+                      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,86 @@
+import React, { useCallback, useMemo } 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 { isEmpty } from '../../../validators/form-validator';
+import { NullSelectOption } from '../../../constants';
+import { type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldValueView from '../../value/view/field-value-view.component';
+import FieldLabel from '../../field-label/field-label.component';
+import styles from './dropdown.scss';
+
+const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+
+  const handleChange = useCallback(
+    ({ selectedItem }) => {
+      setFieldValue(selectedItem === NullSelectOption ? null : selectedItem);
+    },
+    [setFieldValue],
+  );
+
+  const itemToString = useCallback(
+    (item) => {
+      let answer = field.questionOptions.answers.find((opt) => {
+        return opt.value ? opt.value == item : opt.concept == item;
+      });
+      return answer ? t(answer.label) : '';
+    },
+    [field.questionOptions.answers, t],
+  );
+
+  const items = useMemo(() => {
+    const options = field.questionOptions.answers;
+    if (!options.some((option) => option.value === NullSelectOption)) {
+      options.unshift({
+        value: NullSelectOption,
+        label: t('chooseAnOption', 'Choose an option'),
+      });
+    }
+    return options.filter((option) => !option.isHidden).map((item) => item.value || item.concept);
+  }, [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
+            aria-label={t(field.label)}
+            disabled={field.isDisabled}
+            id={field.id}
+            invalid={errors.length > 0}
+            invalidText={errors[0]?.message}
+            items={items}
+            itemToString={itemToString}
+            label=""
+            onChange={handleChange}
+            readOnly={isTrue(field.readonly)}
+            selectedItem={isEmpty(value) ? NullSelectOption : value}
+            titleText={<FieldLabel field={field} />}
+            warn={warnings.length > 0}
+            warnText={warnings[0]?.message}
+          />
+        </Layer>
+      </div>
+    )
+  );
+};
+
+export default Dropdown;

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/text/text.component.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, TextInput } from '@carbon/react';
+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';
+import styles from './text.scss';
+
+const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+  const [lastBlurredValue, setLastBlurredValue] = useState(null);
+
+  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
+            disabled={field.isDisabled}
+            id={field.id}
+            invalid={errors.length > 0}
+            invalidText={errors[0]?.message}
+            labelText={<FieldLabel field={field} />}
+            maxCount={
+              field.questionOptions.max ? Number(field.questionOptions.max) : Number(field.questionOptions.maxLength)
+            }
+            name={field.id}
+            onBlur={onBlur}
+            onChange={(event) => {
+              setFieldValue(event.target.value);
+            }}
+            readOnly={isTrue(field.readonly)}
+            value={value ?? ''}
+            warn={warnings.length > 0}
+            warnText={warnings.length > 0 ? warnings[0].message : undefined}
+          />
+        </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-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 { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './text-area.scss';
+
+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={isTrue(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 { useTranslation } from 'react-i18next';
+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 { isEmpty } from '../../../validators/form-validator';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './toggle.scss';
+
+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?.initialValue?.omrsObject && 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={isTrue(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;
+  }
+}