(refactor) Reorganize project structure and imports

.gitignore

@@ -79,6 +79,7 @@ dist/
 .editorconfig
 
 .idea
+.vscode
 .turbo
 /test-results/
 /playwright-report/

jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
     '^dexie$': '<rootDir>/node_modules/dexie',
     '^react-i18next$': '<rootDir>/__mocks__/react-i18next.js',
   },
-  setupFilesAfterEnv: ['<rootDir>/src/tools/setup-tests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/tools/setup-tests.ts'],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['<rootDir>/e2e'],
 };

package.json

@@ -19,7 +19,7 @@
     "verify": "turbo run lint typescript coverage --color",
     "coverage": "yarn test --coverage --passWithNoTests",
     "postinstall": "husky install",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' --config ./i18next-parser.config.js",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' --config ./tools/i18next-parser.config.js",
     "ci:bump-form-engine-lib": "yarn up @openmrs/esm-form-engine-lib@next"
   },
   "files": [

src/components/action-buttons/action-buttons.component.tsx

@@ -1,16 +1,15 @@
 import React, { useCallback, useState } from 'react';
 import { Button, InlineLoading } from '@carbon/react';
 import { useParams } from 'react-router-dom';
+import { showModal, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import SaveFormModal from '../interactive-builder/modals/save-form/save-form.modal';
+import { handleFormValidation } from '../../resources/form-validator.resource';
+import { publishForm, unpublishForm } from '../../resources/forms.resource';
+import { useForm } from '@hooks/useForm';
 import type { IMarker } from 'react-ace';
 import type { TFunction } from 'react-i18next';
-import { showModal, showSnackbar, useConfig } from '@openmrs/esm-framework';
-
-import { handleFormValidation } from '../../form-validator.resource';
-import { publishForm, unpublishForm } from '../../forms.resource';
-import { useForm } from '../../hooks/useForm';
-import SaveFormModal from '../modals/save-form.modal';
 import type { ConfigObject } from '../../config-schema';
-import type { Schema } from '../../types';
+import type { Schema } from '@types';
 import styles from './action-buttons.scss';
 
 interface ActionButtonsProps {

src/components/audit-details/audit-details.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatDatetime, parseDate } from '@openmrs/esm-framework';
 import { StructuredListWrapper, StructuredListRow, StructuredListCell, StructuredListBody } from '@carbon/react';
-import type { EncounterType } from '../../types';
+import type { EncounterType } from '@types';
 
 interface AuditDetailsProps {
   form: FormGroupData;

src/components/dashboard/dashboard.component.tsx

@@ -34,15 +34,15 @@ import {
   useLayoutType,
   usePagination,
 } from '@openmrs/esm-framework';
-import type { ConfigObject } from '../../config-schema';
-import type { Form as TypedForm } from '../../types';
-import { deleteForm } from '../../forms.resource';
-import { FormBuilderPagination } from '../pagination';
-import { useClobdata } from '../../hooks/useClobdata';
-import { useForms } from '../../hooks/useForms';
 import EmptyState from '../empty-state/empty-state.component';
 import ErrorState from '../error-state/error-state.component';
 import Header from '../header/header.component';
+import { deleteForm } from '@resources/forms.resource';
+import { FormBuilderPagination } from '../pagination';
+import { useClobdata } from '@hooks/useClobdata';
+import { useForms } from '../../hooks/useForms';
+import type { ConfigObject } from '../../config-schema';
+import type { Form as TypedForm } from '@types';
 import styles from './dashboard.scss';
 
 type Mutator = KeyedMutator<{

src/components/dashboard/dashboard.test.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { type FetchResponse, navigate, openmrsFetch, showModal } from '@openmrs/esm-framework';
-import { renderWithSwr, waitForLoadingToFinish } from '../../tools/test-helpers';
-import { deleteForm } from '../../forms.resource';
 import Dashboard from './dashboard.component';
+import { renderWithSwr, waitForLoadingToFinish } from '@tools/test-helpers';
+import { deleteForm } from '@resources/forms.resource';
 
 type OpenmrsFetchResponse = Promise<
   FetchResponse<{

src/components/form-editor/form-editor.component.tsx

@@ -19,20 +19,20 @@ import { ArrowLeft, Maximize, Minimize, Download } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { type TFunction, useTranslation } from 'react-i18next';
 import { ConfigurableLink, showModal, useConfig } from '@openmrs/esm-framework';
-import type { IMarker } from 'react-ace';
-import type { FormSchema } from '@openmrs/esm-form-engine-lib';
-import type { Schema } from '../../types';
-import { useClobdata } from '../../hooks/useClobdata';
-import { useForm } from '../../hooks/useForm';
-import { handleFormValidation } from '../../form-validator.resource';
-import { type ConfigObject } from '../../config-schema';
 import ActionButtons from '../action-buttons/action-buttons.component';
 import AuditDetails from '../audit-details/audit-details.component';
 import FormRenderer from '../form-renderer/form-renderer.component';
 import Header from '../header/header.component';
 import InteractiveBuilder from '../interactive-builder/interactive-builder.component';
 import SchemaEditor from '../schema-editor/schema-editor.component';
 import ValidationMessage from '../validation-info/validation-info.component';
+import { handleFormValidation } from '@resources/form-validator.resource';
+import { useClobdata } from '@hooks/useClobdata';
+import { useForm } from '@hooks/useForm';
+import type { IMarker } from 'react-ace';
+import type { FormSchema } from '@openmrs/esm-form-engine-lib';
+import type { Schema } from '@types';
+import type { ConfigObject } from '../../config-schema';
 import styles from './form-editor.scss';
 
 interface ErrorProps {

src/components/form-editor/restore-draft-schema.modal.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
-import { type Schema } from '../../types';
+import { type Schema } from '@types';
 import styles from '../modals.scss';
 
 interface RestoreDraftSchemaModalProps {

src/components/interactive-builder/draggable-question.component.tsx → src/components/interactive-builder/draggable/draggable-question.component.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { CopyButton, IconButton } from '@carbon/react';
 import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
 import { showModal } from '@openmrs/esm-framework';
-import type { Question, Schema } from '../../types';
+import type { Question, Schema } from '@types';
 import styles from './draggable-question.scss';
 
 interface DraggableQuestionProps {

src/components/interactive-builder/draggable-question.scss → src/components/interactive-builder/draggable/draggable-question.scss

@@ -1,6 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "@carbon/type";
+@use '@carbon/type';
 
 .buttonsContainer {
   display: flex;
@@ -28,7 +28,7 @@
   @extend .dragContainer;
   box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   background-color: rgba(255, 255, 255, 0.552);
-  transform: scale(.75);
+  transform: scale(0.75);
 }
 
 .dragIcon {

src/components/interactive-builder/editable-value.component.tsx → src/components/interactive-builder/editable/editable-value.component.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import ValueEditor from './value-editor.component';
+import ValueEditor from '../value-editor/value-editor.component';
 import styles from './editable-value.scss';
 
 interface EditableValueProps {

src/components/interactive-builder/editable-value.scss → src/components/interactive-builder/editable/editable-value.scss

@@ -1,4 +1,4 @@
-@use "@carbon/type";
+@use '@carbon/type';
 
 .schemaLabel {
   @include type.type-style('heading-03');
@@ -9,7 +9,7 @@
   margin: 0.5rem 0rem;
 
   &:after {
-    content: "";
+    content: '';
     display: block;
     width: 2rem;
     padding-top: 0.188rem;
@@ -19,4 +19,4 @@
 
 .sectionLabel {
   @include type.type-style('heading-02');
-}
+}

src/components/interactive-builder/interactive-builder.component.tsx

@@ -1,16 +1,16 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext, KeyboardSensor, MouseSensor, closestCorners, useSensor, useSensors } from '@dnd-kit/core';
 import { Accordion, AccordionItem, Button, IconButton, InlineLoading } from '@carbon/react';
 import { Add, TrashCan } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { showModal, showSnackbar } from '@openmrs/esm-framework';
+import DraggableQuestion from './draggable/draggable-question.component';
+import Droppable from './droppable/droppable-container.component';
+import EditableValue from './editable/editable-value.component';
+import type { DragEndEvent } from '@dnd-kit/core';
 import type { FormSchema } from '@openmrs/esm-form-engine-lib';
-import type { Schema, Question } from '../../types';
-import DraggableQuestion from './draggable-question.component';
-import Droppable from './droppable-container.component';
-import EditableValue from './editable-value.component';
+import type { Schema, Question } from '@types';
 import styles from './interactive-builder.scss';
 
 interface ValidationError {

src/components/interactive-builder/delete-page.modal.tsx → src/components/interactive-builder/modals/delete-page/delete-page.modal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import type { Schema } from '../../types';
+import type { Schema } from '@types';
 import styles from '../modals.scss';
 
 interface DeletePageModalProps {

src/components/interactive-builder/delete-question.modal.tsx → src/components/interactive-builder/modals/delete-question/delete-question.modal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import type { Question, Schema } from '../../types';
+import type { Question, Schema } from '@types';
 import styles from '../modals.scss';
 
 interface DeleteQuestionModal {

src/components/interactive-builder/delete-section.modal.tsx → src/components/interactive-builder/modals/delete-section/delete-section.modal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import type { Schema } from '../../types';
+import type { Schema } from '@types';
 import styles from '../modals.scss';
 
 interface DeleteSectionModal {

src/components/interactive-builder/new-form.modal.tsx → src/components/interactive-builder/modals/new-form/new-form.modal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import type { Schema } from '../../types';
+import type { Schema } from '@types';
 import styles from '../modals.scss';
 
 interface NewFormModalProps {

src/components/interactive-builder/page.modal.tsx → src/components/interactive-builder/modals/new-page/page.modal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import type { Schema } from '../../types';
+import type { Schema } from '@types';
 import styles from '../modals.scss';
 
 interface PageModalProps {

src/components/interactive-builder/section.modal.tsx → src/components/interactive-builder/modals/new-section/section.modal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import type { Schema } from '../../types';
+import type { Schema } from '@types';
 import styles from '../modals.scss';
 
 interface SectionModalProps {

src/components/interactive-builder/question-form/question-types/inputs/obs/obs-type-question.component.tsx → src/components/interactive-builder/modals/question/question-form/question-types/inputs/obs/obs-type-question.component.tsx

@@ -14,9 +14,9 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useDebounce } from '@openmrs/esm-framework';
 import { ArrowUpRight } from '@carbon/react/icons';
-import { useConceptLookup } from '../../../../../../hooks/useConceptLookup';
-import { useConceptId } from '../../../../../../hooks/useConceptName';
-import type { Concept, ConceptMapping, DatePickerType, ComponentProps } from '../../../../../../types';
+import { useConceptLookup } from '../../../../../../../../hooks/useConceptLookup';
+import { useConceptId } from '../../../../../../../../hooks/useConceptId';
+import type { Concept, ConceptMapping, ComponentProps, DatePickerType } from '../../../../../../../../types';
 import styles from './obs-type-question.scss';
 
 interface AnswerItem {

src/components/interactive-builder/question-form/question-types/inputs/patient-identifier/patient-identifier-type-question.component.tsx → src/components/interactive-builder/modals/question/question-form/question-types/inputs/patient-identifier/patient-identifier-type-question.component.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FormLabel, InlineNotification, ComboBox, InlineLoading } from '@carbon/react';
-import { usePatientIdentifierTypes } from '../../../../../../hooks/usePatientIdentifierTypes';
-import { usePatientIdentifierName } from '../../../../../../hooks/usePatientIdentifierName';
-import type { ComponentProps, PatientIdentifierType } from '../../../../../../types';
+import { usePatientIdentifierTypes } from '@hooks/usePatientIdentifierTypes';
+import { usePatientIdentifierName } from '@hooks/usePatientIdentifierName';
+import type { ComponentProps, PatientIdentifierType } from '@types';
 import styles from './patient-identifier-type-question.scss';
 
 const PatientIdentifierTypeQuestion: React.FC<ComponentProps> = ({ formField, setFormField }) => {
@@ -31,6 +31,8 @@ const PatientIdentifierTypeQuestion: React.FC<ComponentProps> = ({ formField, se
     });
   };
 
+  const convertItemsToString = useCallback((item: PatientIdentifierType) => item?.display ?? '', []);
+
   return (
     <div>
       <FormLabel className={styles.label}>
@@ -55,7 +57,7 @@ const PatientIdentifierTypeQuestion: React.FC<ComponentProps> = ({ formField, se
           )}
           id="patientIdentifierTypeLookup"
           items={patientIdentifierTypes}
-          itemToString={(item: PatientIdentifierType) => item?.display}
+          itemToString={convertItemsToString}
           onChange={handlePatientIdentifierTypeChange}
           placeholder={t('choosePatientIdentifierType', 'Choose a patient identifier type')}
           selectedItem={selectedPatientIdetifierType}

src/components/interactive-builder/question-form/question-types/inputs/program-state/program-state-type-question.component.tsx → src/components/interactive-builder/modals/question/question-form/question-types/inputs/program-state/program-state-type-question.component.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SelectSkeleton, Stack, ComboBox, InlineNotification, MultiSelect, Tag } from '@carbon/react';
-import { usePrograms, useProgramWorkStates } from '../../../../../../hooks/useProgramStates';
-import type { ProgramWorkflow, Program, ComponentProps } from '../../../../../../types';
+import { usePrograms, useProgramWorkStates } from '@hooks/useProgramStates';
+import type { ProgramWorkflow, Program, ComponentProps } from '@types';
 import type { ProgramState } from '@openmrs/esm-form-engine-lib';
 import styles from './program-state-type-question.scss';
 

src/components/interactive-builder/question-form/question-types/question-type.component.tsx → src/components/interactive-builder/modals/question/question-form/question-types/question-type.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ObsTypeQuestion, ProgramStateTypeQuestion, PatientIdentifierTypeQuestion } from './inputs';
-import type { QuestionType, ComponentProps } from '../../../../types';
+import type { QuestionType, ComponentProps } from '@types';
 
 const componentMap: Partial<Record<QuestionType, React.FC<ComponentProps>>> = {
   obs: ObsTypeQuestion,

src/components/interactive-builder/question-form/question/question.component.tsx → src/components/interactive-builder/modals/question/question-form/question/question.component.tsx

@@ -5,8 +5,8 @@ import RenderTypeComponent from '../rendering-types/rendering-type.component';
 import QuestionTypeComponent from '../question-types/question-type.component';
 import RequiredLabel from '../required-label/required-label.component';
 import type { FormField, RenderType } from '@openmrs/esm-form-engine-lib';
-import type { ComponentProps } from '../../../../types';
-import { questionTypes, renderTypeOptions, renderingTypes } from '../../../../constants';
+import type { ComponentProps } from '@types';
+import { questionTypes, renderTypeOptions, renderingTypes } from '@constants';
 import styles from './question.scss';
 
 interface QuestionProps extends ComponentProps {

src/components/interactive-builder/question-form/rendering-types/inputs/date/date.component.tsx → src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import type { DatePickerTypeOption, ComponentProps } from '../../../../../../types';
+import type { DatePickerTypeOption, ComponentProps } from '@types';
 
 const Date: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();

src/components/interactive-builder/question-form/rendering-types/inputs/number/number.component.tsx → src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextInput } from '@carbon/react';
 import type { FormField } from '@openmrs/esm-form-engine-lib';
-import type { ComponentProps } from '../../../../../../types';
+import type { ComponentProps } from '@types';
 
 const Number: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();

src/components/interactive-builder/question-form/rendering-types/inputs/text-area/textarea.component.tsx → src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { NumberInput } from '@carbon/react';
 import type { FormField } from '@openmrs/esm-form-engine-lib';
-import type { ComponentProps } from '../../../../../../types';
+import type { ComponentProps } from '@types';
 
 const TextArea: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();

src/components/interactive-builder/question-form/rendering-types/inputs/text/text.component.tsx → src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text/text.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextInput } from '@carbon/react';
 import type { FormField } from '@openmrs/esm-form-engine-lib';
-import type { ComponentProps } from '../../../../../../types';
+import type { ComponentProps } from '@types';
 
 const Text: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();

src/components/interactive-builder/question-form/rendering-types/inputs/toggle/toggle.component.tsx → src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/toggle/toggle.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextInput } from '@carbon/react';
 import type { FormField } from '@openmrs/esm-form-engine-lib';
-import type { ComponentProps } from '../../../../../../types';
+import type { ComponentProps } from '@types';
 
 const Toggle: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();

src/components/interactive-builder/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.component.tsx → src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import type { FormField } from '@openmrs/esm-form-engine-lib';
-import type { ComponentProps } from '../../../../../../types';
+import type { ComponentProps } from '@types';
 
 const UiSelectExtended: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();