@olaboot/esm-form-engine-lib 4.1.0

package/dist/hooks/useFormFieldsMeta.js

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { codedTypes } from "../constants.js";
+import { findConceptByReference } from "../utils/form-helper.js";
+export function useFormFieldsMeta(rawFormFields, concepts) {
+    const formFields = useMemo(()=>{
+        if (rawFormFields.length && concepts?.length) {
+            return rawFormFields.map((field)=>{
+                const matchingConcept = findConceptByReference(field.questionOptions.concept, concepts);
+                field.questionOptions.concept = matchingConcept ? matchingConcept.uuid : field.questionOptions.concept;
+                field.label = field.label ? field.label : matchingConcept?.display;
+                if (codedTypes.includes(field.questionOptions.rendering) && !field.questionOptions.answers?.length && matchingConcept?.conceptClass?.display === 'Question' && matchingConcept?.answers?.length) {
+                    field.questionOptions.answers = matchingConcept.answers.map((answer)=>{
+                        return {
+                            concept: answer?.uuid,
+                            label: answer?.display
+                        };
+                    });
+                }
+                field.meta = {
+                    ...field.meta || {},
+                    concept: matchingConcept
+                };
+                if (field.questionOptions.answers) {
+                    field.questionOptions.answers = field.questionOptions.answers.map((answer)=>{
+                        const matchingAnswerConcept = findConceptByReference(answer.concept, concepts);
+                        return {
+                            ...answer,
+                            concept: matchingAnswerConcept ? matchingAnswerConcept.uuid : answer.concept,
+                            label: answer.label ? answer.label : matchingAnswerConcept?.display
+                        };
+                    });
+                }
+                return field;
+            });
+        }
+        return rawFormFields ?? [];
+    }, [
+        concepts,
+        rawFormFields
+    ]);
+    return formFields;
+}

package/dist/hooks/useFormJson.d.ts

@@ -0,0 +1,19 @@
+import { type FormSchema, type PreFilledQuestions } from '../types';
+export declare function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: string, formSessionIntent: string, preFilledQuestions?: PreFilledQuestions): {
+    formJson: FormSchema;
+    isLoading: boolean;
+    formError: Error;
+};
+/**
+ * Fetches a form JSON schema from OpenMRS and recursively fetches its subForms if they available.
+ *
+ * If `rawFormJson` is provided, it will be used as the raw form JSON object. Otherwise, the form JSON will be fetched from OpenMRS using the `formIdentifier` parameter.
+ *
+ * @param rawFormJson The raw form JSON object to be used if `formIdentifier` is not provided.
+ * @param formIdentifier The UUID or name of the form to be fetched from OpenMRS if `rawFormJson` is not provided.
+ * @param formSessionIntent An optional parameter that represents the current intent.
+ * @param preFilledQuestions An optional parameter that represents the pre-filled questions.
+ * @returns A well-built form object that might include subForms.
+ */
+export declare function loadFormJson(formIdentifier: string, rawFormJson?: FormSchema, formSessionIntent?: string, preFilledQuestions?: PreFilledQuestions): Promise<FormSchema>;
+//# sourceMappingURL=useFormJson.d.ts.map

package/dist/hooks/useFormJson.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormJson.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormJson.ts"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,UAAU,EAA0C,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAOxI,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,MAAM,EACzB,kBAAkB,CAAC,EAAE,kBAAkB;;;;EAqCxC;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,YAAY,CAChC,cAAc,EAAE,MAAM,EACtB,WAAW,CAAC,EAAE,UAAU,EACxB,iBAAiB,CAAC,EAAE,MAAM,EAC1B,kBAAkB,CAAC,EAAE,kBAAkB,GACtC,OAAO,CAAC,UAAU,CAAC,CAwBrB"}

package/dist/hooks/useFormJson.js

@@ -0,0 +1,198 @@
+import { useEffect, useState } from "react";
+import { isTrue } from "../utils/boolean-utils.js";
+import { applyFormIntent } from "../utils/forms-loader.js";
+import { fetchOpenMRSForm, fetchClobData } from "../api/index.js";
+import { getRegisteredFormSchemaTransformers } from "../registry/registry.js";
+import { formEngineAppName } from "../globals.js";
+export function useFormJson(formUuid, rawFormJson, encounterUuid, formSessionIntent, preFilledQuestions) {
+    const [formJson, setFormJson] = useState(null);
+    const [error, setError] = useState(validateFormsArgs(formUuid, rawFormJson));
+    useEffect(()=>{
+        const abortController = new AbortController();
+        const setFormJsonWithTranslations = (formJson)=>{
+            if (formJson?.translations) {
+                const language = window.i18next.language;
+                window.i18next.addResourceBundle(language, formEngineAppName, formJson.translations, true, true);
+            }
+            setFormJson(formJson);
+        };
+        loadFormJson(formUuid, rawFormJson, formSessionIntent, preFilledQuestions).then((formJson)=>{
+            setFormJsonWithTranslations({
+                ...formJson,
+                encounter: encounterUuid
+            });
+        }).catch((error)=>{
+            if (error.name !== 'AbortError') {
+                console.error(error);
+                setError(new Error('Error loading form JSON: ' + error.message));
+            }
+        });
+        return ()=>{
+            abortController.abort();
+        };
+    }, [
+        formSessionIntent,
+        formUuid,
+        rawFormJson,
+        encounterUuid
+    ]);
+    return {
+        formJson,
+        isLoading: !formJson && !error,
+        formError: error
+    };
+}
+/**
+ * Fetches a form JSON schema from OpenMRS and recursively fetches its subForms if they available.
+ *
+ * If `rawFormJson` is provided, it will be used as the raw form JSON object. Otherwise, the form JSON will be fetched from OpenMRS using the `formIdentifier` parameter.
+ *
+ * @param rawFormJson The raw form JSON object to be used if `formIdentifier` is not provided.
+ * @param formIdentifier The UUID or name of the form to be fetched from OpenMRS if `rawFormJson` is not provided.
+ * @param formSessionIntent An optional parameter that represents the current intent.
+ * @param preFilledQuestions An optional parameter that represents the pre-filled questions.
+ * @returns A well-built form object that might include subForms.
+ */ export async function loadFormJson(formIdentifier, rawFormJson, formSessionIntent, preFilledQuestions) {
+    const openmrsFormResponse = await fetchOpenMRSForm(formIdentifier);
+    const clobDataResponse = await fetchClobData(openmrsFormResponse);
+    const transformers = await getRegisteredFormSchemaTransformers();
+    const formJson = clobDataResponse ? {
+        ...clobDataResponse,
+        uuid: openmrsFormResponse.uuid
+    } : parseFormJson(rawFormJson);
+    // Sub forms
+    const subFormRefs = extractSubFormRefs(formJson);
+    const subForms = await loadSubForms(subFormRefs, formSessionIntent);
+    updateFormJsonWithSubForms(formJson, subForms);
+    // Form components
+    const formComponentsRefs = getReferencedForms(formJson);
+    const resolvedFormComponents = await loadFormComponents(formComponentsRefs);
+    const formNameToAliasMap = formComponentsRefs.reduce((acc, form)=>{
+        acc[form.formName] = form.alias;
+        return acc;
+    }, {});
+    const formComponents = mapFormComponents(resolvedFormComponents);
+    updateFormJsonWithComponents(formJson, formComponents, formNameToAliasMap);
+    return refineFormJson(formJson, transformers, formSessionIntent, preFilledQuestions);
+}
+function extractSubFormRefs(formJson) {
+    return formJson.pages.filter((page)=>page.isSubform && !page.subform.form && page.subform?.name).map((page)=>page.subform?.name);
+}
+async function loadSubForms(subFormRefs, formSessionIntent) {
+    return Promise.all(subFormRefs.map((subForm)=>loadFormJson(subForm, null, formSessionIntent)));
+}
+function updateFormJsonWithSubForms(formJson, subForms) {
+    subForms.forEach((subForm)=>{
+        const matchingPage = formJson.pages.find((page)=>page.subform?.name === subForm.name);
+        if (matchingPage) {
+            matchingPage.subform.form = subForm;
+        }
+    });
+}
+function validateFormsArgs(formUuid, rawFormJson) {
+    if (!formUuid && !rawFormJson) {
+        return new Error('InvalidArgumentsErr: Neither formUuid nor formJson was provided');
+    }
+    if (formUuid && rawFormJson) {
+        return new Error('InvalidArgumentsErr: Both formUuid and formJson cannot be provided at the same time.');
+    }
+}
+/**
+ * Refines the input form JSON object by parsing it, removing inline sub forms, applying form schema transformers, setting the encounter type, and applying form intents if provided.
+ * @param {any} formJson - The input form JSON object or string.
+ * @param {string} [formSessionIntent] - The optional form session intent.
+ * @param {PreFilledQuestions} [preFilledQuestions] - The optional pre-filled questions.
+ * @returns {FormSchema} - The refined form JSON object of type FormSchema.
+ */ function refineFormJson(formJson, schemaTransformers = [], formSessionIntent, preFilledQuestions) {
+    removeInlineSubForms(formJson, formSessionIntent);
+    // apply form schema transformers
+    schemaTransformers.reduce((draftForm, transformer)=>transformer.transform(draftForm, preFilledQuestions), formJson);
+    setEncounterType(formJson);
+    return applyFormIntent(formSessionIntent, formJson);
+}
+/**
+ * Parses the input form JSON and returns a deep copy of the object.
+ * @param {any} formJson - The input form JSON object or string.
+ * @returns {FormSchema} - The parsed form JSON object of type FormSchema.
+ */ function parseFormJson(formJson) {
+    return typeof formJson === 'string' ? JSON.parse(formJson) : JSON.parse(JSON.stringify(formJson));
+}
+/**
+ * Removes inline sub forms from the form JSON and replaces them with their pages if the encounter type matches.
+ * @param {FormSchema} formJson - The input form JSON object of type FormSchema.
+ * @param {string} formSessionIntent - The form session intent.
+ */ function removeInlineSubForms(formJson, formSessionIntent) {
+    for(let i = formJson.pages.length - 1; i >= 0; i--){
+        const page = formJson.pages[i];
+        if (isTrue(page.isSubform) && !isTrue(page.isHidden) && page.subform?.form?.encounterType === formJson.encounterType) {
+            const nonSubformPages = page.subform.form.pages.filter((page)=>!isTrue(page.isSubform));
+            formJson.pages.splice(i, 1, ...refineFormJson(page.subform.form, [], formSessionIntent).pages);
+        }
+    }
+}
+/**
+ * Sets the encounter type for the form JSON if it's provided through the `encounter` attribute.
+ * @param {FormSchema} formJson - The input form JSON object of type FormSchema.
+ */ function setEncounterType(formJson) {
+    if (formJson.encounter && typeof formJson.encounter === 'string' && !formJson.encounterType) {
+        formJson.encounterType = formJson.encounter;
+        delete formJson.encounter;
+    }
+}
+/**
+ * Functions to support reusable Form Components
+ */ function getReferencedForms(formJson) {
+    const referencedForms = formJson?.referencedForms;
+    if (!referencedForms) {
+        return [];
+    }
+    return referencedForms;
+}
+async function loadFormComponents(formComponentRefs) {
+    return Promise.all(formComponentRefs.map((formComponent)=>loadFormJson(formComponent.formName, null, null)));
+}
+function mapFormComponents(formComponents) {
+    const formComponentsMap = new Map();
+    formComponents.forEach((formComponent)=>{
+        formComponentsMap.set(formComponent.name, formComponent);
+    });
+    return formComponentsMap;
+}
+function updateFormJsonWithComponents(formJson, formComponents, formNameToAliasMap) {
+    formComponents.forEach((component, targetFormName)=>{
+        //loop through pages and search sections for reference key
+        formJson.pages.forEach((page)=>{
+            if (page.sections) {
+                page.sections.forEach((section)=>{
+                    if (section.reference && (section.reference.form === targetFormName || section.reference.form === formNameToAliasMap[targetFormName])) {
+                        // resolve referenced component section
+                        let resolvedFormSection = getReferencedFormSection(section, component);
+                        // add resulting referenced component section to section
+                        Object.assign(section, resolvedFormSection);
+                    }
+                });
+            }
+        });
+    });
+}
+function getReferencedFormSection(formSection, formComponent) {
+    let referencedFormSection;
+    // search for component page and section reference from component
+    let matchingComponentPage = formComponent.pages.filter((page)=>page.label === formSection.reference.page);
+    if (matchingComponentPage.length > 0) {
+        let matchingComponentSection = matchingComponentPage[0].sections.filter((componentSection)=>componentSection.label === formSection.reference.section);
+        if (matchingComponentSection.length > 0) {
+            referencedFormSection = matchingComponentSection[0];
+        }
+    }
+    return filterExcludedQuestions(referencedFormSection, formSection.reference);
+}
+function filterExcludedQuestions(formSection, reference) {
+    if (reference?.excludeQuestions) {
+        const excludeQuestions = reference.excludeQuestions;
+        formSection.questions = formSection.questions.filter((question)=>{
+            return !excludeQuestions.includes(question.id);
+        });
+    }
+    return formSection;
+}

package/dist/hooks/useFormJson.test.js

@@ -0,0 +1,194 @@
+import { act, renderHook } from "@testing-library/react";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { when } from "jest-when";
+import { useFormJson } from "./useFormJson.js";
+import { artComponentBody, artComponentSkeleton, formComponentBody, formComponentSkeleton, miniFormBody, miniFormSkeleton, nestedForm1Body, nestedForm1Skeleton, nestedForm2Body, nestedForm2Skeleton, preclinicReviewComponentBody, preclinicReviewComponentSkeleton } from "__mocks__/forms";
+const MINI_FORM_NAME = 'Mini Form';
+const MINI_FORM_UUID = '112d73b4-79e5-4be8-b9ae-d0840f00d4cf';
+const MINI_FORM_SCHEMA_VALUE_REF = '6bd7ba90-d2d6-4f81-9f09-7d1f23346a1c';
+const PARENT_FORM_NAME = 'Nested Form One';
+const PARENT_FORM_UUID = 'af7c1fe6-d669-414e-b066-e9733f0de7a8';
+const PARENT_FORM_SCHEMA_VALUE_REF = '1ad1fccc-d279-46a0-8980-1d91afd6ba67';
+const SUB_FORM_NAME = 'Nested Form Two';
+const SUB_FORM_UUID = '8304e5ff-6324-4863-ac51-8fcbc6812b13';
+const SUB_FORM_SCHEMA_VALUE_REF = 'ca52a95c-8bb4-4a9f-a0cf-f0df437592da';
+const COMPONENT_FORM_NAME = 'Form Component';
+const COMPONENT_FORM_UUID = 'af7c1fe6-d669-414e-b066-e9733f0de7b8';
+const COMPONENT_FORM_SCHEMA_VALUE_REF = '74d06044-850f-11ee-b9d1-0242ac120002';
+const COMPONENT_ART = 'component_art';
+const COMPONENT_ART_UUID = '2f063f32-7f8a-11ee-b962-0242ac120002';
+const COMPONENT_ART_SCHEMA_VALUE_REF = '74d06044-850f-11ee-b9d1-0242ac120003';
+const COMPONENT_PRECLINIC_REVIEW = 'component_preclinic-review';
+const COMPONENT_PRECLINIC_REVIEW_UUID = '2f063f32-7f8a-11ee-b962-0242ac120004';
+const COMPONENT_PRECLINIC_REVIEW_SCHEMA_VALUE_REF = '74d06044-850f-11ee-b9d1-0242ac120004';
+const NON_EXISTENT_FORM_NAME = 'non-existent-form';
+// Base setup
+const mockOpenmrsFetch = openmrsFetch;
+mockOpenmrsFetch.mockImplementation(jest.fn());
+// parent form
+when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_NAME)).mockResolvedValue({
+    data: {
+        results: [
+            nestedForm1Skeleton
+        ]
+    }
+});
+when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_UUID)).mockResolvedValue({
+    data: nestedForm1Skeleton
+});
+when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({
+    data: nestedForm1Body
+});
+// sub form
+when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_NAME)).mockResolvedValue({
+    data: {
+        results: [
+            nestedForm2Skeleton
+        ]
+    }
+});
+when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_UUID)).mockResolvedValue({
+    data: nestedForm2Skeleton
+});
+when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({
+    data: nestedForm2Body
+});
+// mini form
+when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_NAME)).mockResolvedValue({
+    data: {
+        results: [
+            miniFormSkeleton
+        ]
+    }
+});
+when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_UUID)).mockResolvedValue({
+    data: miniFormSkeleton
+});
+when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({
+    data: miniFormBody
+});
+// form components
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_FORM_NAME)).mockResolvedValue({
+    data: {
+        results: [
+            formComponentSkeleton
+        ]
+    }
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_FORM_UUID)).mockResolvedValue({
+    data: formComponentSkeleton
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({
+    data: formComponentBody
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_ART)).mockResolvedValue({
+    data: {
+        results: [
+            artComponentSkeleton
+        ]
+    }
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_ART_UUID)).mockResolvedValue({
+    data: artComponentSkeleton
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_ART_SCHEMA_VALUE_REF)).mockResolvedValue({
+    data: artComponentBody
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_PRECLINIC_REVIEW)).mockResolvedValue({
+    data: {
+        results: [
+            preclinicReviewComponentSkeleton
+        ]
+    }
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_PRECLINIC_REVIEW_UUID)).mockResolvedValue({
+    data: preclinicReviewComponentSkeleton
+});
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_PRECLINIC_REVIEW_SCHEMA_VALUE_REF)).mockResolvedValue({
+    data: preclinicReviewComponentBody
+});
+when(mockOpenmrsFetch).calledWith(buildPath(NON_EXISTENT_FORM_NAME)).mockResolvedValue({
+    data: {
+        results: []
+    }
+});
+describe('useFormJson', ()=>{
+    it('should fetch basic form by name', async ()=>{
+        let hook = null;
+        await act(async ()=>{
+            hook = renderHook(()=>useFormJson(MINI_FORM_NAME, null, null, null));
+        });
+        expect(hook.result.current.isLoading).toBe(false);
+        expect(hook.result.current.formError).toBe(undefined);
+        expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME);
+    });
+    it('should fetch basic form by UUID', async ()=>{
+        let hook = null;
+        await act(async ()=>{
+            hook = renderHook(()=>useFormJson(MINI_FORM_UUID, null, null, null));
+        });
+        expect(hook.result.current.isLoading).toBe(false);
+        expect(hook.result.current.formError).toBe(undefined);
+        expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME);
+    });
+    it('should load form with nested subforms', async ()=>{
+        let hook = null;
+        await act(async ()=>{
+            hook = renderHook(()=>useFormJson(PARENT_FORM_NAME, null, null, null));
+        });
+        expect(hook.result.current.isLoading).toBe(false);
+        expect(hook.result.current.formError).toBe(undefined);
+        expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME);
+        // verify subforms
+        verifyEmbeddedForms(hook.result.current.formJson);
+    });
+    it('should load subforms for raw form json', async ()=>{
+        let hook = null;
+        await act(async ()=>{
+            hook = renderHook(()=>useFormJson(null, nestedForm1Body, null, null));
+        });
+        expect(hook.result.current.isLoading).toBe(false);
+        expect(hook.result.current.formError).toBe(undefined);
+        expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME);
+        // verify subforms
+        verifyEmbeddedForms(hook.result.current.formJson);
+    });
+    it('should load form components in combined raw form json', async ()=>{
+        let hook = null;
+        await act(async ()=>{
+            hook = renderHook(()=>useFormJson(null, formComponentBody, null, null));
+        });
+        expect(hook.result.current.isLoading).toBe(false);
+        expect(hook.result.current.formError).toBe(undefined);
+        expect(hook.result.current.formJson.name).toBe(COMPONENT_FORM_NAME);
+        // verify form components have been loaded
+        verifyFormComponents(hook.result.current.formJson);
+    });
+    it('should return an error when the form is not found', async ()=>{
+        const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(()=>{});
+        let hook = null;
+        await act(async ()=>{
+            hook = renderHook(()=>useFormJson(NON_EXISTENT_FORM_NAME, null, null, null));
+        });
+        // verify
+        expect(hook.result.current.isLoading).toBe(false);
+        expect(hook.result.current.formError.message).toBe('Error loading form JSON: Form with ID "non-existent-form" was not found');
+        expect(hook.result.current.formJson).toBe(null);
+        mockConsoleError.mockRestore();
+    });
+});
+function buildPath(path) {
+    return when((url)=>url.includes(path));
+}
+function verifyEmbeddedForms(formJson) {
+    // assert that the nestedForm2's (level one subform) pages have been aligned with the parent because they share the same encounterType
+    expect(formJson.pages.length).toBe(3);
+    // the mini form (it's not flattened into the parent form because it has a different encounterType)
+    const nestedSubform = formJson.pages[2].subform.form;
+    expect(nestedSubform.name).toBe(MINI_FORM_NAME);
+    expect(nestedSubform.pages.length).toBe(1);
+}
+function verifyFormComponents(formJson) {
+    // assert that alias has been replaced with the actual component
+    expect(formJson.pages.length).toBe(2);
+}

package/dist/hooks/useFormStateHelpers.d.ts

@@ -0,0 +1,15 @@
+import { type Dispatch } from 'react';
+import { type FormField, type FormSchema } from '../types';
+import { type Action } from '../components/renderer/form/state';
+export declare function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: FormField[]): {
+    addFormField: (field: FormField) => void;
+    updateFormField: (field: FormField) => void;
+    getFormField: (fieldId: string) => FormField;
+    removeFormField: (fieldId: string) => void;
+    setInvalidFields: (fields: FormField[]) => void;
+    addInvalidField: (field: FormField) => void;
+    removeInvalidField: (fieldId: string) => void;
+    setForm: (formJson: FormSchema) => void;
+    setDeletedFields: (fields: FormField[]) => void;
+};
+//# sourceMappingURL=useFormStateHelpers.d.ts.map

package/dist/hooks/useFormStateHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormStateHelpers.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormStateHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAe,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE;0BAC5C,SAAS;6BAIxC,SAAS;4BAmBP,MAAM;+BAM4B,MAAM;+BAIN,SAAS,EAAE;6BAIb,SAAS;kCAIJ,MAAM;wBAIhB,UAAU;+BAIH,SAAS,EAAE;EAe1D"}

package/dist/hooks/useFormStateHelpers.js

@@ -0,0 +1,83 @@
+import { useCallback } from "react";
+import { cloneDeep } from "lodash-es";
+import { updateFormSectionReferences } from "../utils/common-utils.js";
+export function useFormStateHelpers(dispatch, formFields) {
+    const addFormField = useCallback((field)=>{
+        dispatch({
+            type: 'ADD_FORM_FIELD',
+            value: field
+        });
+    }, []);
+    const updateFormField = useCallback((field)=>{
+        if (field.meta.groupId) {
+            const group = formFields.find((f)=>f.id === field.meta.groupId);
+            if (group) {
+                group.questions = group.questions.map((child)=>{
+                    if (child.id === field.id) {
+                        return field;
+                    }
+                    return child;
+                });
+                updateFormField(group);
+            }
+        }
+        dispatch({
+            type: 'UPDATE_FORM_FIELD',
+            value: cloneDeep(field)
+        });
+    }, [
+        formFields
+    ]);
+    const getFormField = useCallback((fieldId)=>{
+        return formFields.find((field)=>field.id === fieldId);
+    }, [
+        formFields.length
+    ]);
+    const removeFormField = useCallback((fieldId)=>{
+        dispatch({
+            type: 'REMOVE_FORM_FIELD',
+            value: fieldId
+        });
+    }, []);
+    const setInvalidFields = useCallback((fields)=>{
+        dispatch({
+            type: 'SET_INVALID_FIELDS',
+            value: fields
+        });
+    }, []);
+    const addInvalidField = useCallback((field)=>{
+        dispatch({
+            type: 'ADD_INVALID_FIELD',
+            value: field
+        });
+    }, []);
+    const removeInvalidField = useCallback((fieldId)=>{
+        dispatch({
+            type: 'REMOVE_INVALID_FIELD',
+            value: fieldId
+        });
+    }, []);
+    const setForm = useCallback((formJson)=>{
+        dispatch({
+            type: 'SET_FORM_JSON',
+            value: updateFormSectionReferences(formJson)
+        });
+    }, []);
+    const setDeletedFields = useCallback((fields)=>{
+        dispatch({
+            type: 'SET_DELETED_FIELDS',
+            value: fields
+        });
+    }, []);
+    return {
+        addFormField,
+        updateFormField,
+        getFormField,
+        removeFormField,
+        setInvalidFields,
+        addInvalidField,
+        removeInvalidField,
+        setForm,
+        setDeletedFields
+    };
+}

package/dist/hooks/useFormWorkspaceSize.d.ts

@@ -0,0 +1,7 @@
+type WorkspaceSize = 'narrow' | 'wider' | 'extra-wide' | 'ultra-wide';
+/**
+ * This hook evaluates the size of the current workspace based on the width of the container element
+ */
+export declare function useFormWorkspaceSize(rootRef: React.RefObject<HTMLDivElement>): WorkspaceSize;
+export {};
+//# sourceMappingURL=useFormWorkspaceSize.d.ts.map

package/dist/hooks/useFormWorkspaceSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormWorkspaceSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormWorkspaceSize.ts"],"names":[],"mappings":"AAUA,KAAK,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,CAAC;AAEtE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,aAAa,CAoC5F"}

package/dist/hooks/useFormWorkspaceSize.js

@@ -0,0 +1,46 @@
+import { useLayoutEffect, useMemo, useState } from "react";
+import { pxToRem } from "../utils/common-utils.js";
+/**
+ * The width of the supported workspace variants in rem
+ */ const narrowWorkspaceWidth = 26.25;
+const widerWorkspaceWidth = 32.25;
+const extraWideWorkspaceWidth = 48.25;
+/**
+ * This hook evaluates the size of the current workspace based on the width of the container element
+ */ export function useFormWorkspaceSize(rootRef) {
+    // width in rem
+    const [containerWidth, setContainerWidth] = useState(0);
+    const size = useMemo(()=>{
+        if (containerWidth <= narrowWorkspaceWidth) {
+            return 'narrow';
+        } else if (containerWidth <= widerWorkspaceWidth) {
+            return 'wider';
+        } else if (containerWidth <= extraWideWorkspaceWidth) {
+            return 'extra-wide';
+        } else {
+            return 'ultra-wide';
+        }
+    }, [
+        containerWidth
+    ]);
+    useLayoutEffect(()=>{
+        const handleResize = ()=>{
+            const containerWidth = rootRef.current?.parentElement?.offsetWidth;
+            const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            containerWidth && setContainerWidth(pxToRem(containerWidth, rootFontSize));
+        };
+        handleResize();
+        const resizeObserver = new ResizeObserver((entries)=>{
+            handleResize();
+        });
+        if (rootRef.current?.parentElement) {
+            resizeObserver.observe(rootRef.current?.parentElement);
+        }
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        rootRef
+    ]);
+    return size;
+}