sdc-qrf 0.0.1

package/src/components.tsx

@@ -0,0 +1,212 @@
+import classNames from 'classnames';
+import fhirpath from 'fhirpath';
+import _ from 'lodash';
+import isEqual from 'lodash/isEqual';
+import { ReactChild, useEffect, useContext, useMemo, useRef } from 'react';
+
+import { QuestionnaireItem } from 'shared/src/contrib/aidbox';
+
+import { useQuestionnaireResponseFormContext } from '.';
+import { QRFContext } from './context';
+import { ItemContext, QRFContextData, QuestionItemProps, QuestionItemsProps } from './types';
+import {
+    calcContext,
+    getBranchItems,
+    getEnabledQuestions,
+    wrapAnswerValue,
+    removeDisabledAnswers,
+} from './utils';
+
+export function usePreviousValue<T = any>(value: T) {
+    const prevValue = useRef<T>();
+
+    useEffect(() => {
+        prevValue.current = value;
+
+        return () => {
+            prevValue.current = undefined;
+        };
+    });
+
+    return prevValue.current;
+}
+
+export function QuestionItems(props: QuestionItemsProps) {
+    const { questionItems, parentPath, context } = props;
+    const { formValues } = useQuestionnaireResponseFormContext();
+    const cleanValues = removeDisabledAnswers(context.questionnaire.item!, formValues);
+
+    return (
+        <>
+            {getEnabledQuestions(questionItems, parentPath, cleanValues).map((item, index) => {
+                return (
+                    <div className={classNames('questionFormItem', item.linkId)}>
+                        <QuestionItem
+                            key={index}
+                            questionItem={item}
+                            context={context}
+                            parentPath={parentPath}
+                        />
+                    </div>
+                );
+            })}
+        </>
+    );
+}
+
+export function QuestionItem(props: QuestionItemProps) {
+    const { questionItem, context: initialContext, parentPath } = props;
+    const {
+        questionItemComponents,
+        customWidgets,
+        groupItemComponent,
+        itemControlQuestionItemComponents,
+        itemControlGroupItemComponents,
+    } = useContext(QRFContext);
+    const { formValues, setFormValues } = useQuestionnaireResponseFormContext();
+
+    const { type, linkId, calculatedExpression, variable, repeats, itemControl } = questionItem;
+    const fieldPath = useMemo(() => [...parentPath, linkId!], [parentPath, linkId]);
+
+    // TODO: how to do when item is not in QR (e.g. default element of repeatable group)
+    const branchItems = getBranchItems(
+        fieldPath,
+        initialContext.questionnaire,
+        initialContext.resource,
+    );
+    const context =
+        type === 'group'
+            ? branchItems.qrItems.map((curQRItem) =>
+                  calcContext(initialContext, variable, branchItems.qItem, curQRItem),
+              )
+            : calcContext(initialContext, variable, branchItems.qItem, branchItems.qrItems[0]!);
+    const prevAnswers = usePreviousValue(_.get(formValues, fieldPath));
+
+    useEffect(() => {
+        if (!isGroupItem(questionItem, context) && calculatedExpression) {
+            // TODO: Add support for x-fhir-query
+            if (calculatedExpression.language === 'text/fhirpath') {
+                const newValues = fhirpath.evaluate(
+                    context.context || {},
+                    calculatedExpression.expression!,
+                    context as ItemContext,
+                );
+                const newAnswers = newValues.length
+                    ? repeats
+                        ? newValues.map((answer: any) => ({ value: wrapAnswerValue(type, answer) }))
+                        : [{ value: wrapAnswerValue(type, newValues[0]) }]
+                    : undefined;
+
+                if (!isEqual(newAnswers, prevAnswers)) {
+                    setFormValues(_.set(_.cloneDeep(formValues), fieldPath, newAnswers));
+                }
+            }
+        }
+    }, [
+        setFormValues,
+        formValues,
+        calculatedExpression,
+        context,
+        parentPath,
+        repeats,
+        type,
+        questionItem,
+        prevAnswers,
+        fieldPath,
+    ]);
+
+    if (isGroupItem(questionItem, context)) {
+        if (itemControl) {
+            if (
+                !itemControlGroupItemComponents ||
+                !itemControlGroupItemComponents[itemControl?.coding?.[0]?.code!]
+            ) {
+                console.warn(`QRF: Unsupported group itemControl '${itemControl?.coding?.[0]
+                    ?.code!}'. 
+                Please define 'itemControlGroupWidgets' for '${itemControl?.coding?.[0]?.code!}'`);
+
+                return null;
+            }
+
+            const Component = itemControlGroupItemComponents[itemControl?.coding?.[0]?.code!]!;
+
+            return (
+                <Component context={context} parentPath={parentPath} questionItem={questionItem} />
+            );
+        }
+        if (!groupItemComponent) {
+            console.warn(`QRF: groupWidget is not specified but used in questionnaire.`);
+
+            return null;
+        }
+
+        const GroupWidgetComponent = groupItemComponent;
+
+        return (
+            <GroupWidgetComponent
+                context={context}
+                parentPath={parentPath}
+                questionItem={questionItem}
+            />
+        );
+    }
+
+    if (itemControl) {
+        if (
+            !itemControlQuestionItemComponents ||
+            !itemControlQuestionItemComponents[itemControl.coding?.[0]?.code!]
+        ) {
+            console.warn(
+                `QRF: Unsupported itemControl '${itemControl?.coding?.[0]?.code!}'.
+Please define 'itemControlWidgets' for '${itemControl?.coding?.[0]?.code!}'`,
+            );
+
+            return null;
+        }
+
+        const Component = itemControlQuestionItemComponents[itemControl?.coding?.[0]?.code!]!;
+
+        return <Component context={context} parentPath={parentPath} questionItem={questionItem} />;
+    }
+
+    // TODO: deprecate!
+    if (customWidgets && linkId && linkId in customWidgets) {
+        console.warn(
+            `QRF: 'customWidgets' are deprecated, use 'Questionnaire.item.itemControl' instead`,
+        );
+
+        if (type === 'group') {
+            console.error(`QRF: Use 'itemControl' for group custom widgets`);
+            return null;
+        }
+
+        const Component = customWidgets[linkId]!;
+
+        return <Component context={context} parentPath={parentPath} questionItem={questionItem} />;
+    }
+
+    if (type in questionItemComponents) {
+        const Component = questionItemComponents[type]!;
+
+        return <Component context={context} parentPath={parentPath} questionItem={questionItem} />;
+    }
+
+    console.error(`QRF: Unsupported item type '${type}'`);
+
+    return null;
+}
+
+export function QuestionnaireResponseFormProvider({
+    children,
+    ...props
+}: QRFContextData & { children: ReactChild }) {
+    return <QRFContext.Provider value={props}>{children}</QRFContext.Provider>;
+}
+
+/* Helper that resolves right context type */
+function isGroupItem(
+    questionItem: QuestionnaireItem,
+    context: ItemContext | ItemContext[],
+): context is ItemContext[] {
+    return questionItem.type === 'group';
+}

package/src/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { QRFContextData } from './types';
+
+export const QRFContext = createContext<QRFContextData>({} as any);

package/src/hooks.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { QRFContext } from './context';
+
+export function useQuestionnaireResponseFormContext() {
+    return useContext(QRFContext);
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './utils';
+export * from './hooks';
+export * from './components';

package/src/types.ts

@@ -0,0 +1,105 @@
+import { ComponentType } from 'react';
+
+import {
+    Observation,
+    ParametersParameter,
+    Questionnaire,
+    QuestionnaireItem,
+    QuestionnaireResponse,
+    QuestionnaireResponseItem,
+    QuestionnaireResponseItemAnswer,
+} from 'shared/src/contrib/aidbox';
+
+export type GroupItemComponent = ComponentType<GroupItemProps>;
+export type QuestionItemComponent = ComponentType<QuestionItemProps>;
+
+export type CustomWidgetsMapping = {
+    // [linkId: QuestionnaireItem['linkId']]: QuestionItemComponent;
+    [linkId: string]: QuestionItemComponent;
+};
+
+export type QuestionItemComponentMapping = {
+    // [type: QuestionnaireItem['type']]: QuestionItemComponent;
+    [type: string]: QuestionItemComponent;
+};
+
+export type ItemControlQuestionItemComponentMapping = {
+    [code: string]: QuestionItemComponent;
+};
+
+export type ItemControlGroupItemComponentMapping = {
+    [code: string]: GroupItemComponent;
+};
+
+export type ItemContext = {
+    resource: QuestionnaireResponse;
+    questionnaire: Questionnaire;
+    context: QuestionnaireResponseItem | QuestionnaireResponse;
+    qitem?: QuestionnaireItem;
+    [x: string]: any;
+};
+
+export interface QRFContextData {
+    questionItemComponents: QuestionItemComponentMapping;
+    groupItemComponent?: GroupItemComponent;
+    customWidgets?: CustomWidgetsMapping;
+    itemControlQuestionItemComponents?: ItemControlQuestionItemComponentMapping;
+    itemControlGroupItemComponents?: ItemControlGroupItemComponentMapping;
+    readOnly?: boolean;
+
+    formValues: FormItems;
+    setFormValues: (values: FormItems) => void;
+}
+
+export interface QuestionItemsProps {
+    questionItems: QuestionnaireItem[];
+
+    context: ItemContext;
+    parentPath: string[];
+}
+
+export interface QuestionItemProps {
+    questionItem: QuestionnaireItem;
+
+    context: ItemContext;
+    parentPath: string[];
+}
+
+export interface GroupItemProps {
+    questionItem: QuestionnaireItem;
+
+    context: ItemContext[];
+    parentPath: string[];
+}
+
+export type AnswerValue = Required<QuestionnaireResponseItemAnswer>['value'] &
+    Required<Observation>['value'];
+
+export interface RepeatableFormGroupItems {
+    question?: string;
+    items?: FormItems[];
+}
+
+interface NotRepeatableFormGroupItems {
+    question?: string;
+    items?: FormItems;
+}
+
+export type FormGroupItems = RepeatableFormGroupItems | NotRepeatableFormGroupItems;
+
+export interface FormAnswerItems<T = any> {
+    value: T;
+    question?: string;
+    items?: FormItems;
+}
+
+export type FormItems = Record<string, FormGroupItems | FormAnswerItems[]>;
+
+export interface QuestionnaireResponseFormData {
+    formValues: FormItems;
+    context: {
+        questionnaire: Questionnaire;
+        questionnaireResponse: QuestionnaireResponse;
+        launchContextParameters: ParametersParameter[];
+    };
+}