npm - @aehrc/smart-forms-renderer - Versions diffs - 1.0.0-alpha.37 → 1.0.0-alpha.38 - Mend

@aehrc/smart-forms-renderer 1.0.0-alpha.37 → 1.0.0-alpha.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/hooks/useParseXhtml.js +48 -3
package/lib/hooks/useParseXhtml.js.map +1 -1
package/package.json +1 -1
package/src/hooks/useParseXhtml.tsx +61 -3
package/src/stories/assets/questionnaires/QAdvancedTextApperance.ts +88 -2
package/src/stories/sdc/AdvancedTextAppearance.stories.tsx +14 -6
package/src/stories/sdc/BehaviorOther.stories.tsx +1 -8
package/src/stories/storybookWrappers/BuildFormWrapperForStorybook.tsx +2 -1
package/src/stories/storybookWrappers/TestCssSheet.css +17 -0

package/lib/hooks/useParseXhtml.js CHANGED Viewed

@@ -39,6 +39,17 @@ export function useParseXhtml(qItem) {
                         return _jsx(_Fragment, {});
                     }
                 }
+                // Extract external CSS styles from class attributes
+                // To use this, define your stylesheet where you are calling <BaseRenderer/> in your app
+                if (domNode.name === 'div' && domNode.attribs.class) {
+                    const classNames = domNode.attribs.class.split(/\s+/);
+                    classNames.forEach((className) => {
+                        const classStyles = getStylesFromClass(className);
+                        if (classStyles) {
+                            extractedStyles = Object.assign(Object.assign({}, extractedStyles), classStyles);
+                        }
+                    });
+                }
                 // Extract styles from the root div for group-level styling
                 if (domNode.name === 'div' &&
                     !domNode.attribs.class &&
@@ -53,9 +64,7 @@ export function useParseXhtml(qItem) {
                                     const [property, value] = style.split(':');
                                     if (property && value) {
                                         // Convert kebab-case to camelCase for React
-                                        const propName = property
-                                            .trim()
-                                            .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                                        const propName = convertKebabToCamelCase(property);
                                         styleObj[propName] = value.trim();
                                     }
                                 }
@@ -103,4 +112,40 @@ export function useParseXhtml(qItem) {
         };
     }, [qItem]);
 }
+function getStylesFromClass(className) {
+    if (!className) {
+        return null;
+    }
+    const selector = className.startsWith('.') ? className : `.${className}`;
+    for (const sheet of document.styleSheets) {
+        try {
+            const rules = sheet.cssRules;
+            for (const rule of rules) {
+                if (rule instanceof CSSStyleRule && rule.selectorText === selector) {
+                    const computedStyles = {};
+                    const style = rule.style;
+                    for (let i = 0; i < style.length; i++) {
+                        const property = style[i];
+                        // Convert propertyName from kebab-case to camelCase for React
+                        const propNameCamelCase = convertKebabToCamelCase(property);
+                        computedStyles[propNameCamelCase] = style.getPropertyValue(property);
+                    }
+                    return computedStyles;
+                }
+            }
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'SecurityError') {
+                console.warn(`Unable to access stylesheet due to CORS restrictions: Skipping sheet ${sheet.href}. Add crossorigin="anonymous" to the stylesheet link if you want to bypass this warning.`, sheet.href);
+                continue;
+            }
+            console.warn(`Error accessing stylesheet ${sheet.href}`, error);
+        }
+    }
+    return null;
+}
+// Convert kebab-case to camelCase for React
+function convertKebabToCamelCase(property) {
+    return property.trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
 //# sourceMappingURL=useParseXhtml.js.map

package/lib/hooks/useParseXhtml.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useParseXhtml.js","sourceRoot":"","sources":["../../src/hooks/useParseXhtml.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,OAAO,IAAI,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAQxF,MAAM,UAAU,aAAa,CAAC,KAAwB;IACpD,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,EAAE,CAAC;YAC/C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,uCAAuC;QACvC,IAAI,eAAmD,CAAC;QAExD,MAAM,gBAAgB,GAAG;YACvB,iEAAiE;YACjE,OAAO,EAAE,CAAC,OAA8E,EAAE,EAAE;gBAC1F,IAAI,CAAC,OAAO,CAAC,OAAO;oBAAE,OAAO;gBAE7B,qCAAqC;gBACrC,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAChF,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;oBAC9C,IAAI,YAAY,EAAE,CAAC;wBACjB,2EAA2E;wBAC3E,OAAO,mBAAK,CAAC;oBACf,CAAC;gBACH,CAAC;gBAED,2DAA2D;gBAC3D,IACE,OAAO,CAAC,IAAI,KAAK,KAAK;oBACtB,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;oBACtB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,EACvC,CAAC;oBACD,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;wBAC1B,IAAI,CAAC;4BACH,iCAAiC;4BACjC,MAAM,QAAQ,GAA2B,EAAE,CAAC;4BAC5C,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;4BACvC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gCACpC,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;oCACjB,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oCAC3C,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAC;wCACtB,4CAA4C;wCAC5C,MAAM,QAAQ,GAAG,~~QAAQ;6CACtB~~,~~IAAI,EAAE;6CACN,OAAO,~~CAAC,~~WAAW~~,~~EAAE,~~CAAC,CAAC~~,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC~~;~~wCAC7D~~,QAAQ,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;oCACpC,CAAC;gCACH,CAAC;4BACH,CAAC,CAAC,CAAC;4BAEH,iDAAiD;4BACjD,eAAe,GAAG,QAAQ,CAAC;wBAC7B,CAAC;wBAAC,OAAO,KAAK,EAAE,CAAC;4BACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;wBAC9C,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;oBACpB,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;wBAC9B,gCAAgC;wBAChC,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;wBAEpC,IAAI,YAAY,CAAC;wBACjB,IAAI,OAAO,EAAE,CAAC;4BACZ,YAAY,GAAG,GAAG,EAAE;gCAClB,IAAI,CAAC;oCACH,0EAA0E;oCAC1E,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,yBAAyB,CAAC,EAAE,CAAC;wCACzD,MAAM,EAAE,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC;wCACjC,EAAE,EAAE,CAAC;oCACP,CAAC;yCAAM,CAAC;wCACN,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;oCAC9C,CAAC;gCACH,CAAC;gCAAC,OAAO,KAAK,EAAE,CAAC;oCACf,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;gCACnD,CAAC;4BACH,CAAC,CAAC;wBACJ,CAAC;wBACD,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;wBAE/B,OAAO,CACL,iCACM,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,IACtC,OAAO,EAAE,YAAY,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,YAC1E,UAAU,CAAC,OAAO,CAAC,QAAQ,EAAE,gBAA0C,CAAC,IAClE,CACV,CAAC;oBACJ,CAAC;gBACH,CAAC;YACH,CAAC;SACF,CAAC;QAEF,MAAM,aAAa,GAAG,SAAS,CAAC,WAAW,EAAE,gBAA0C,CAAC,CAAC;QAEzF,OAAO;YACL,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,eAAe;SACxB,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC"}
1	+ {"version":3,"file":"useParseXhtml.js","sourceRoot":"","sources":["../../src/hooks/useParseXhtml.tsx"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "1.0.0-alpha.37",
+  "version": "1.0.0-alpha.38",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

package/src/hooks/useParseXhtml.tsx CHANGED Viewed

@@ -52,6 +52,18 @@ export function useParseXhtml(qItem: QuestionnaireItem): ParsedXhtml | null {
           }
         }
+        // Extract external CSS styles from class attributes
+        // To use this, define your stylesheet where you are calling <BaseRenderer/> in your app
+        if (domNode.name === 'div' && domNode.attribs.class) {
+          const classNames = domNode.attribs.class.split(/\s+/);
+          classNames.forEach((className) => {
+            const classStyles = getStylesFromClass(className);
+            if (classStyles) {
+              extractedStyles = { ...extractedStyles, ...classStyles };
+            }
+          });
+        }
         // Extract styles from the root div for group-level styling
         if (
           domNode.name === 'div' &&
@@ -68,9 +80,7 @@ export function useParseXhtml(qItem: QuestionnaireItem): ParsedXhtml | null {
                   const [property, value] = style.split(':');
                   if (property && value) {
                     // Convert kebab-case to camelCase for React
-                    const propName = property
-                      .trim()
-                      .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                    const propName = convertKebabToCamelCase(property);
                     styleObj[propName] = value.trim();
                   }
                 }
@@ -127,3 +137,51 @@ export function useParseXhtml(qItem: QuestionnaireItem): ParsedXhtml | null {
     };
   }, [qItem]);
 }
+function getStylesFromClass(className: string): Record<string, string> | null {
+  if (!className) {
+    return null;
+  }
+  const selector = className.startsWith('.') ? className : `.${className}`;
+  for (const sheet of document.styleSheets) {
+    try {
+      const rules = sheet.cssRules;
+      for (const rule of rules) {
+        if (rule instanceof CSSStyleRule && rule.selectorText === selector) {
+          const computedStyles: Record<string, string> = {};
+          const style = rule.style;
+          for (let i = 0; i < style.length; i++) {
+            const property = style[i];
+            // Convert propertyName from kebab-case to camelCase for React
+            const propNameCamelCase = convertKebabToCamelCase(property);
+            computedStyles[propNameCamelCase] = style.getPropertyValue(property);
+          }
+          return computedStyles;
+        }
+      }
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'SecurityError') {
+        console.warn(
+          `Unable to access stylesheet due to CORS restrictions: Skipping sheet ${sheet.href}. Add crossorigin="anonymous" to the stylesheet link if you want to bypass this warning.`,
+          sheet.href
+        );
+        continue;
+      }
+      console.warn(`Error accessing stylesheet ${sheet.href}`, error);
+    }
+  }
+  return null;
+}
+// Convert kebab-case to camelCase for React
+function convertKebabToCamelCase(property: string): string {
+  return property.trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}

package/src/stories/assets/questionnaires/QAdvancedTextApperance.ts CHANGED Viewed

@@ -244,7 +244,7 @@ export const qHidden: Questionnaire = {
   ]
 };
-export const qRenderingXhtmlGroupPropagation: Questionnaire = {
+export const qRenderingXhtmlGroupPropagationNested: Questionnaire = {
   resourceType: 'Questionnaire',
   id: 'RenderingXhtmlGroupPropagation',
   name: 'RenderingXhtmlGroupPropagation',
@@ -330,7 +330,7 @@ export const qRenderingXhtmlGroupPropagation: Questionnaire = {
   ]
 };
-export const qRenderingXhtmlGroupPropagationCalcExpression: Questionnaire = {
+export const qRenderingXhtmlGroupPropagationInlineStyles: Questionnaire = {
   resourceType: 'Questionnaire',
   id: 'RenderingXhtmlGroupPropagationCalcExpression',
   name: 'RenderingXhtmlGroupPropagationCalcExpression',
@@ -415,3 +415,89 @@ export const qRenderingXhtmlGroupPropagationCalcExpression: Questionnaire = {
     }
   ]
 };
+export const qRenderingXhtmlGroupPropagationClassStyles: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'RenderingXhtmlGroupPropagationCalcExpression',
+  name: 'RenderingXhtmlGroupPropagationCalcExpression',
+  title: 'RenderingXhtmlGroupPropagationCalcExpression',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/advanced/text/rendering-xhtml-4',
+  extension: [
+    {
+      url: 'http://hl7.org/fhir/StructureDefinition/variable',
+      valueExpression: {
+        name: 'patientToRefer',
+        language: 'text/fhirpath',
+        expression:
+          "%resource.item.where(linkId='referral-group').item.where(linkId='referral-patient-picker').answer.value"
+      }
+    }
+  ],
+  item: [
+    {
+      linkId: 'referral-group',
+      text: 'Referral',
+      type: 'group',
+      item: [
+        {
+          linkId: 'referral-patient-picker',
+          text: 'Select patient to refer',
+          type: 'choice',
+          answerOption: [
+            {
+              valueString: 'Adam'
+            },
+            {
+              valueString: 'Alan'
+            },
+            {
+              valueString: 'Ben'
+            }
+          ]
+        },
+        {
+          linkId: 'referral-group-info',
+          type: 'group',
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+              valueString:
+                '<div class="group-custom-bg bold" role="status" xmlns="http://www.w3.org/1999/xhtml"><img alt="Information" src="https://www.digitalhealth.gov.au/chap/info.svg" /><div><h2>Consider a referral</h2></div></div>'
+            }
+          ],
+          item: [
+            {
+              linkId: '3-BasicExaminations-visiontest-Infopanel-referral4',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression',
+                    valueExpression: {
+                      description: "Display the patient's first name",
+                      language: 'text/fhirpath',
+                      expression:
+                        "'You may need a referral if ' + %patientToRefer + '\\'s screening result is abnormal, or you\\'re uncertain, and unable to test.'"
+                    }
+                  }
+                ]
+              },
+              type: 'display'
+            }
+          ],
+          enableWhen: [
+            {
+              question: 'referral-patient-picker',
+              operator: 'exists',
+              answerBoolean: true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

package/src/stories/sdc/AdvancedTextAppearance.stories.tsx CHANGED Viewed

@@ -25,8 +25,9 @@ import {
   qRenderingXhtmlBooleanItem,
   qRenderingXhtmlDisplayBase64ImageItem,
   qRenderingXhtmlDisplayListItem,
-  qRenderingXhtmlGroupPropagation,
-  qRenderingXhtmlGroupPropagationCalcExpression
+  qRenderingXhtmlGroupPropagationClassStyles,
+  qRenderingXhtmlGroupPropagationInlineStyles,
+  qRenderingXhtmlGroupPropagationNested
 } from '../assets/questionnaires';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -66,14 +67,21 @@ export const RenderingXHTMLDisplayBase64Image: Story = {
   }
 };
-export const RenderingXHTMLGroupPropagation: Story = {
+export const RenderingXHTMLGroupPropagationNested: Story = {
   args: {
-    questionnaire: qRenderingXhtmlGroupPropagation
+    questionnaire: qRenderingXhtmlGroupPropagationNested
   }
 };
-export const RenderingXHTMLGroupPropagationCalcExpression: Story = {
+export const RenderingXHTMLGroupPropagationInlineStyles: Story = {
+  args: {
+    questionnaire: qRenderingXhtmlGroupPropagationInlineStyles
+  }
+};
+export const RenderingXHTMLGroupPropagationClassStyles: Story = {
   args: {
-    questionnaire: qRenderingXhtmlGroupPropagationCalcExpression
+    questionnaire: qRenderingXhtmlGroupPropagationClassStyles
   }
 };

package/src/stories/sdc/BehaviorOther.stories.tsx CHANGED Viewed

@@ -26,8 +26,7 @@ import {
   qEnableWhenMultiCheckbox,
   qInitialRepeats,
   qInitialSingle,
-  qText,
-  qRenderingXhtmlGroupPropagation
+  qText
 } from '../assets/questionnaires'; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -96,9 +95,3 @@ export const Text: Story = {
     questionnaire: qText
   }
 };
-export const RenderingXhtmlGroupPropagation: Story = {
-  args: {
-    questionnaire: qRenderingXhtmlGroupPropagation
-  }
-};

package/src/stories/storybookWrappers/BuildFormWrapperForStorybook.tsx CHANGED Viewed

@@ -23,7 +23,8 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { useBuildForm } from '../../hooks';
 import useRendererQueryClient from '../../hooks/useRendererQueryClient';
 import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
+// This stylesheet is using for testing the RenderingXhtmlGroupPropagationClassStyles story
+import './TestCssSheet.css';
 // iframeResizerChild.js needs to be called at least once in the used storybook wrappers to be included in storybook-static
 import './iframeResizerChild';
 import RendererThemeProvider from '../../theme/RendererThemeProvider';

package/src/stories/storybookWrappers/TestCssSheet.css ADDED Viewed

@@ -0,0 +1,17 @@
+/* This stylesheet is using for testing the RenderingXhtmlGroupPropagationClassStyles story, it has no other use outside of this.
+ * It works by having a class defined in the XHTML, where the class references external styles from a stylesheet.
+ * Please import the stylesheet where you call the <BaseRenderer/> component.
+ *
+ * NOTE before using:
+ * The renderer support this, but it is recommended to define the styles inline in the XHTML.
+ * Using external styles means that the Questionnaire itself is not self-contained and the stylings are almost guaranteed to not work in other SDC implementations.
+ * For accurate guidance, see https://hl7.org/fhir/R4/narrative.html#:~:text=Authoring%20systems%20may,approach%20with%20care.
+ */
+.group-custom-bg {
+    background-color: #E9F2FF;
+}
+.bold {
+    font-weight: bold;
+}