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

package/src/registry/inbuilt-components/control-templates.ts

@@ -0,0 +1,57 @@
+import { type ControlTemplate } from '../../types';
+
+export const controlTemplates: Array<ControlTemplate> = [
+  {
+    name: 'drug',
+    datasource: {
+      name: 'drug_datasource',
+      config: {
+        class: '8d490dfc-c2cc-11de-8d13-0010c6dffd0f',
+      },
+    },
+  },
+  {
+    name: 'select-concept-answers',
+    datasource: {
+      name: 'select_concept_answers_datasource',
+      config: {
+        concept: '',
+      },
+    },
+  },
+  {
+    name: 'encounter-provider',
+    datasource: {
+      name: 'provider_datasource',
+    },
+  },
+  {
+    name: 'encounter-role',
+    datasource: {
+      name: 'encounter_role_datasource',
+    },
+  },
+  {
+    name: 'encounter-location',
+    datasource: {
+      name: 'location_datasource',
+    },
+  },
+  {
+    name: 'problem',
+    datasource: {
+      name: 'problem_datasource',
+      config: {
+        class: [
+          '8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+          '8d492954-c2cc-11de-8d13-0010c6dffd0f',
+          '8d492b2a-c2cc-11de-8d13-0010c6dffd0f',
+        ],
+      },
+    },
+  },
+];
+
+export const getControlTemplate = (name: string) => {
+  return controlTemplates.find((template) => template.name === name);
+};

package/src/registry/inbuilt-components/inbuiltControls.ts

@@ -0,0 +1,99 @@
+import ObsGroup from '../../components/group/obs-group.component';
+import ContentSwitcher from '../../components/inputs/content-switcher/content-switcher.component';
+import DateField from '../../components/inputs/date/date.component';
+import FixedValue from '../../components/inputs/fixed-value/fixed-value.component';
+import Markdown from '../../components/inputs/markdown/markdown.component';
+import MultiSelect from '../../components/inputs/multi-select/multi-select.component';
+import NumberField from '../../components/inputs/number/number.component';
+import Radio from '../../components/inputs/radio/radio.component';
+import Dropdown from '../../components/inputs/select/dropdown.component';
+import TextArea from '../../components/inputs/text-area/text-area.component';
+import TextField from '../../components/inputs/text/text.component';
+import Toggle from '../../components/inputs/toggle/toggle.component';
+import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
+import WorkspaceLauncher from '../../components/inputs/workspace-launcher/workspace-launcher.component';
+import Repeat from '../../components/repeat/repeat.component';
+import File from '../../components/inputs/file/file.component';
+import { type FormFieldInputProps } from '../../types';
+import { type RegistryItem } from '../registry';
+import { controlTemplates } from './control-templates';
+import { templateToComponentMap } from './template-component-map';
+
+/**
+ * @internal
+ */
+
+export const inbuiltControls: Array<RegistryItem<React.ComponentType<FormFieldInputProps>>> = [
+  {
+    name: 'text',
+    component: TextField,
+  },
+  {
+    name: 'textarea',
+    component: TextArea,
+  },
+  {
+    name: 'select',
+    component: Dropdown,
+  },
+  {
+    name: 'checkbox',
+    component: MultiSelect,
+  },
+  {
+    name: 'radio',
+    component: Radio,
+  },
+  {
+    name: 'date',
+    component: DateField,
+  },
+  {
+    name: 'datetime',
+    component: DateField,
+  },
+  {
+    name: 'number',
+    component: NumberField,
+  },
+  {
+    name: 'content-switcher',
+    component: ContentSwitcher,
+  },
+  {
+    name: 'toggle',
+    component: Toggle,
+  },
+  {
+    name: 'workspace-launcher',
+    component: WorkspaceLauncher,
+  },
+  {
+    name: 'group',
+    component: ObsGroup,
+  },
+  {
+    name: 'repeating',
+    component: Repeat,
+  },
+  {
+    name: 'markdown',
+    component: Markdown,
+  },
+  {
+    name: 'fixed-value',
+    component: FixedValue,
+  },
+  {
+    name: 'ui-select-extended',
+    component: UiSelectExtended,
+  },
+  {
+    name: 'file',
+    component: File,
+  },
+  ...controlTemplates.map((template) => ({
+    name: template.name,
+    component: templateToComponentMap.find((component) => component.name === template.name).baseControlComponent,
+  })),
+];

package/src/registry/inbuilt-components/inbuiltDataSources.ts

@@ -0,0 +1,41 @@
+import { type DataSource } from '../../types';
+import { type RegistryItem } from '../registry';
+import { ConceptDataSource } from '../../datasources/concept-data-source';
+import { LocationDataSource } from '../../datasources/location-data-source';
+import { ProviderDataSource } from '../../datasources/provider-datasource';
+import { SelectConceptAnswersDatasource } from '../../datasources/select-concept-answers-datasource';
+import { EncounterRoleDataSource } from '../../datasources/encounter-role-datasource';
+
+/**
+ * @internal
+ */
+export const inbuiltDataSources: Array<RegistryItem<DataSource<any>>> = [
+  {
+    name: 'location_datasource',
+    component: new LocationDataSource(),
+  },
+  {
+    name: 'drug_datasource',
+    component: new ConceptDataSource(),
+  },
+  {
+    name: 'problem_datasource',
+    component: new ConceptDataSource(),
+  },
+  {
+    name: 'select_concept_answers_datasource',
+    component: new SelectConceptAnswersDatasource(),
+  },
+  {
+    name: 'provider_datasource',
+    component: new ProviderDataSource(),
+  },
+  {
+    name: 'encounter_role_datasource',
+    component: new EncounterRoleDataSource(),
+  },
+];
+
+export const validateInbuiltDatasource = (name: string) => {
+  return inbuiltDataSources.some((datasource) => datasource.name === name);
+};

package/src/registry/inbuilt-components/inbuiltFieldValueAdapters.ts

@@ -0,0 +1,64 @@
+import { type RegistryItem } from '../..';
+import { ControlAdapter } from '../../adapters/control-adapter';
+import { EncounterDatetimeAdapter } from '../../adapters/encounter-datetime-adapter';
+import { EncounterLocationAdapter } from '../../adapters/encounter-location-adapter';
+import { EncounterProviderAdapter } from '../../adapters/encounter-provider-adapter';
+import { EncounterRoleAdapter } from '../../adapters/encounter-role-adapter';
+import { InlineDateAdapter } from '../../adapters/inline-date-adapter';
+import { ObsAdapter } from '../../adapters/obs-adapter';
+import { ObsCommentAdapter } from '../../adapters/obs-comment-adapter';
+import { OrdersAdapter } from '../../adapters/orders-adapter';
+import { PatientIdentifierAdapter } from '../../adapters/patient-identifier-adapter';
+import { ProgramStateAdapter } from '../../adapters/program-state-adapter';
+import { type FormFieldValueAdapter } from '../../types';
+
+export const inbuiltFieldValueAdapters: RegistryItem<FormFieldValueAdapter>[] = [
+  {
+    type: 'obs',
+    component: ObsAdapter,
+  },
+  {
+    type: 'control',
+    component: ControlAdapter,
+  },
+  {
+    type: 'obsGroup',
+    component: ObsAdapter,
+  },
+  {
+    type: 'testOrder',
+    component: OrdersAdapter,
+  },
+  {
+    type: 'programState',
+    component: ProgramStateAdapter,
+  },
+  {
+    type: 'encounterLocation',
+    component: EncounterLocationAdapter,
+  },
+  {
+    type: 'encounterProvider',
+    component: EncounterProviderAdapter,
+  },
+  {
+    type: 'encounterRole',
+    component: EncounterRoleAdapter,
+  },
+  {
+    type: 'obsComment',
+    component: ObsCommentAdapter,
+  },
+  {
+    type: 'encounterDatetime',
+    component: EncounterDatetimeAdapter,
+  },
+  {
+    type: 'inlineDate',
+    component: InlineDateAdapter,
+  },
+  {
+    type: 'patientIdentifier',
+    component: PatientIdentifierAdapter,
+  },
+];

package/src/registry/inbuilt-components/inbuiltTransformers.ts

@@ -0,0 +1,10 @@
+import { DefaultFormSchemaTransformer } from '../../transformers/default-schema-transformer';
+import { type FormSchemaTransformer } from '../../types';
+import { type RegistryItem } from '../registry';
+
+export const inbuiltFormTransformers: Array<RegistryItem<FormSchemaTransformer>> = [
+  {
+    name: 'DefaultFormSchemaTransformer',
+    component: DefaultFormSchemaTransformer,
+  },
+];

package/src/registry/inbuilt-components/inbuiltValidators.ts

@@ -0,0 +1,33 @@
+import { conditionalAnsweredValidator } from '../../validators/conditional-answered-validator';
+import { type FormFieldValidator } from '../../types';
+import { DateValidator } from '../../validators/date-validator';
+import { DefaultValueValidator } from '../../validators/default-value-validator';
+import { FieldValidator } from '../../validators/form-validator';
+import { ExpressionValidator } from '../../validators/js-expression-validator';
+import { type RegistryItem } from '../registry';
+
+/**
+ * @internal
+ */
+export const inbuiltValidators: Array<RegistryItem<FormFieldValidator>> = [
+  {
+    name: 'default_value',
+    component: DefaultValueValidator,
+  },
+  {
+    name: 'form_field',
+    component: FieldValidator,
+  },
+  {
+    name: 'date',
+    component: DateValidator,
+  },
+  {
+    name: 'js_expression',
+    component: ExpressionValidator,
+  },
+  {
+    name: 'conditionalAnswered',
+    component: conditionalAnsweredValidator,
+  },
+];

package/src/registry/inbuilt-components/template-component-map.ts

@@ -0,0 +1,28 @@
+import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
+
+export const templateToComponentMap = [
+  {
+    name: 'drug',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'problem',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'encounter-provider',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'encounter-location',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'select-concept-answers',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'encounter-role',
+    baseControlComponent: UiSelectExtended,
+  },
+];

package/src/registry/registry.test.ts

@@ -0,0 +1,20 @@
+import { getRegisteredControl } from './registry';
+import MultiSelect from '../components/inputs/multi-select/multi-select.component';
+import Number from '../components/inputs/number/number.component';
+
+describe.skip('registry', () => {
+  it('should load the NumberField component with alias "numeric"', async () => {
+    const result = await getRegisteredControl('numeric');
+    expect(result).toEqual(Number);
+  });
+
+  it('should load the MultiSelect component with alias "multiCheckbox"', async () => {
+    const result = await getRegisteredControl('multiCheckbox');
+    expect(result).toEqual(MultiSelect);
+  });
+
+  it('should return undefined if no matching component is found', async () => {
+    const result = await getRegisteredControl('unknown');
+    expect(result).toBeUndefined();
+  });
+});

package/src/registry/registry.ts

@@ -0,0 +1,261 @@
+import {
+  type DataSource,
+  type FormFieldValidator,
+  type FormSchemaTransformer,
+  type PostSubmissionAction,
+} from '../types';
+import { getGlobalStore } from '@openmrs/esm-framework';
+import { FormsStore } from '../constants';
+import { inbuiltControls } from './inbuilt-components/inbuiltControls';
+import { inbuiltValidators } from './inbuilt-components/inbuiltValidators';
+import { inbuiltDataSources } from './inbuilt-components/inbuiltDataSources';
+import { getControlTemplate } from './inbuilt-components/control-templates';
+import { inbuiltPostSubmissionActions } from './inbuilt-components/InbuiltPostSubmissionActions';
+import { inbuiltFormTransformers } from './inbuilt-components/inbuiltTransformers';
+import { type FormFieldInputProps, type FormFieldValueAdapter } from '../types';
+import { inbuiltFieldValueAdapters } from './inbuilt-components/inbuiltFieldValueAdapters';
+
+/**
+ * @internal
+ */
+export interface RegistryItem<T> {
+  // Do we need this?
+  name?: string;
+  component: T;
+  type?: string;
+  /**
+   * @deprecated
+   */
+  alias?: string;
+}
+
+export interface ComponentRegistration<T> {
+  name: string;
+  load: () => Promise<{ default: T }>;
+}
+
+export interface CustomControlRegistration extends ComponentRegistration<React.ComponentType<FormFieldInputProps>> {
+  type: string;
+  alias?: string;
+}
+
+export interface FieldValueAdapterRegistration extends ComponentRegistration<FormFieldValueAdapter> {
+  type: string;
+}
+
+export interface FormsRegistryStoreState {
+  controls: CustomControlRegistration[];
+  fieldValidators: ComponentRegistration<FormFieldValidator>[];
+  fieldValueAdapters: FieldValueAdapterRegistration[];
+  postSubmissionActions: ComponentRegistration<PostSubmissionAction>[];
+  dataSources: ComponentRegistration<DataSource<any>>[];
+  expressionHelpers: Record<string, Function>;
+  formSchemaTransformers: ComponentRegistration<FormSchemaTransformer>[];
+}
+
+interface FormRegistryCache {
+  validators: Record<string, FormFieldValidator>;
+  controls: Record<string, React.ComponentType<FormFieldInputProps>>;
+  fieldValueAdapters: Record<string, FormFieldValueAdapter>;
+  postSubmissionActions: Record<string, PostSubmissionAction>;
+  dataSources: Record<string, DataSource<any>>;
+  formSchemaTransformers: Record<string, FormSchemaTransformer>;
+}
+
+const registryCache: FormRegistryCache = {
+  validators: {},
+  controls: {},
+  fieldValueAdapters: {},
+  postSubmissionActions: {},
+  dataSources: {},
+  formSchemaTransformers: {},
+};
+
+// Registers
+
+export function registerControl(registration: CustomControlRegistration) {
+  getFormsStore().controls.push(registration);
+}
+
+export function registerPostSubmissionAction(registration: ComponentRegistration<PostSubmissionAction>) {
+  getFormsStore().postSubmissionActions.push(registration);
+}
+
+export function registerFieldValueAdapter(registration: FieldValueAdapterRegistration) {
+  getFormsStore().fieldValueAdapters.push(registration);
+}
+
+export function registerFieldValidator(registration: ComponentRegistration<FormFieldValidator>) {
+  getFormsStore().fieldValidators.push(registration);
+}
+
+export function registerCustomDataSource(registration: ComponentRegistration<DataSource<any>>) {
+  getFormsStore().dataSources.push(registration);
+}
+
+export function registerExpressionHelper(name: string, fn: Function) {
+  getFormsStore().expressionHelpers[name] = fn;
+}
+
+export function registerFormSchemaTransformers(registration: ComponentRegistration<FormSchemaTransformer>) {
+  const store = getFormsStore();
+  const existingIndex = store.formSchemaTransformers.findIndex((reg) => reg.name === registration.name);
+
+  if (existingIndex !== -1) {
+    // If registration with the same name exists, override it
+    store.formSchemaTransformers[existingIndex] = registration;
+  } else {
+    store.formSchemaTransformers.push(registration);
+  }
+}
+
+// Getters
+
+/**
+ * A convenience function that returns the appropriate control for a given rendering type.
+ */
+export async function getRegisteredControl(renderType: string) {
+  if (registryCache.controls[renderType]) {
+    return registryCache.controls[renderType];
+  }
+  let component = inbuiltControls.find(
+    (control) => control.name === renderType || control?.alias === renderType,
+  )?.component;
+  // if undefined, try serching through the registered custom controls
+  if (!component) {
+    const importedControl = await getFormsStore()
+      .controls.find((control) => control.name === renderType || control?.alias === renderType)
+      ?.load?.();
+    component = importedControl?.default;
+  }
+  registryCache.controls[renderType] = component;
+  return component;
+}
+
+export async function getRegisteredFieldValueAdapter(type: string): Promise<FormFieldValueAdapter> {
+  if (registryCache.fieldValueAdapters[type]) {
+    return registryCache.fieldValueAdapters[type];
+  }
+  let adapter = inbuiltFieldValueAdapters.find((adapter) => adapter.type === type)?.component;
+  // if undefined, try searching through the registered custom handlers
+  if (!adapter) {
+    const adapterImport = await getFormsStore()
+      .fieldValueAdapters.find((adapter) => adapter.type === type)
+      ?.load?.();
+    adapter = adapterImport?.default;
+  }
+  registryCache.fieldValueAdapters[type] = adapter;
+  return adapter;
+}
+
+export async function getRegisteredFormSchemaTransformers(): Promise<FormSchemaTransformer[]> {
+  const transformers = [];
+
+  const cachedTransformers = registryCache.formSchemaTransformers;
+  if (Object.keys(cachedTransformers).length) {
+    return Object.values(cachedTransformers);
+  }
+
+  const formTransformersFromStore = getFormsStore().formSchemaTransformers || [];
+  const customTransformers = await Promise.all(
+    formTransformersFromStore.map(async (transformer) => {
+      const transformerImport = await transformer.load?.();
+      return transformerImport?.default;
+    }),
+  );
+  transformers.push(...customTransformers.filter((transformer) => transformer !== undefined));
+
+  transformers.push(...inbuiltFormTransformers.map((inbuiltTransformer) => inbuiltTransformer.component));
+
+  transformers.forEach((transformer) => {
+    const inbuiltTransformer = inbuiltFormTransformers.find((t) => t.component === transformer);
+    registryCache.formSchemaTransformers[inbuiltTransformer.name] = transformer;
+  });
+
+  return transformers;
+}
+
+export async function getRegisteredPostSubmissionAction(actionId: string) {
+  const cachedAction = registryCache.postSubmissionActions[actionId];
+  if (cachedAction) {
+    return cachedAction;
+  }
+
+  const inbuiltRegistration = inbuiltPostSubmissionActions.find((registration) => registration.name === actionId);
+
+  if (inbuiltRegistration) {
+    const lazy = inbuiltRegistration.load;
+    const actionImport = await lazy();
+    registryCache.postSubmissionActions[actionId] = actionImport.default;
+    return actionImport.default;
+  }
+
+  const formsStoreRegistration = getFormsStore().postSubmissionActions.find(
+    (registration) => registration.name === actionId,
+  );
+
+  if (formsStoreRegistration) {
+    const lazy = formsStoreRegistration.load;
+    const actionImport = await lazy();
+    registryCache.postSubmissionActions[actionId] = actionImport.default;
+    return actionImport.default;
+  } else {
+    console.error(`No loader found for PostSubmissionAction registration of id: ${actionId}`);
+  }
+
+  return null;
+}
+
+export async function getRegisteredValidator(name: string): Promise<FormFieldValidator> {
+  if (registryCache.validators[name]) {
+    return registryCache.validators[name];
+  }
+  let validator = inbuiltValidators.find((validator) => validator.name === name)?.component;
+  if (!validator) {
+    const validatorImport = await getFormsStore()
+      .fieldValidators.find((validator) => validator.name === name)
+      ?.load?.();
+    validator = validatorImport?.default;
+  }
+  registryCache.validators[name] = validator;
+  return validator;
+}
+
+export async function getRegisteredDataSource(name: string): Promise<DataSource<any>> {
+  if (registryCache.dataSources[name]) {
+    return registryCache.dataSources[name];
+  }
+  let ds = inbuiltDataSources.find((dataSource) => dataSource.name === name)?.component;
+  if (!ds) {
+    const template = getControlTemplate(name);
+    if (template) {
+      ds = inbuiltDataSources.find((dataSource) => dataSource.name === template.datasource.name)?.component;
+    } else {
+      const dataSourceImport = await getFormsStore()
+        .dataSources.find((ds) => ds.name === name)
+        ?.load?.();
+      if (!dataSourceImport) {
+        throw new Error('Datasource not found');
+      }
+      ds = dataSourceImport.default;
+    }
+  }
+  registryCache.dataSources[name] = ds;
+  return ds;
+}
+
+export function getRegisteredExpressionHelpers() {
+  return getFormsStore().expressionHelpers;
+}
+
+function getFormsStore(): FormsRegistryStoreState {
+  return getGlobalStore<FormsRegistryStoreState>(FormsStore, {
+    controls: [],
+    postSubmissionActions: [],
+    expressionHelpers: {},
+    fieldValidators: [],
+    fieldValueAdapters: [],
+    dataSources: [],
+    formSchemaTransformers: [],
+  }).getState();
+}

package/src/routes.json

@@ -0,0 +1 @@
+{}

package/src/setupI18n.ts

@@ -0,0 +1,16 @@
+import { moduleName } from './globals';
+
+function loadResourcesFromFile() {
+  const lang = window.i18next.language;
+  import(/* webpackMode: "lazy" */ `../translations/${lang}.json`)
+    .then((json) => {
+      const data = json ?? {};
+      window?.i18next?.addResourceBundle?.(lang, moduleName, data);
+    })
+    .catch((err) => console.error(err));
+}
+
+export default function setupFormEngineLibI18n() {
+  loadResourcesFromFile();
+  window.i18next?.on?.('languageChanged', loadResourcesFromFile);
+}

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom';
+import 'jest-when';
+
+// https://github.com/jsdom/jsdom/issues/1695
+window.HTMLElement.prototype.scrollIntoView = function () {};