fhir-react 2.0.1-beta.9 → 2.1.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "2.0.1-beta.9",
+  "version": "2.1.1-beta.1",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {
@@ -125,7 +125,8 @@
     "stylelint": "^14.5.3",
     "stylelint-config-standard": "^25.0.0",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^3.3.10",
+    "webpack-node-externals": "^3.0.0"
   },
   "overrides": {
     "react": "^18.3.1",

package/src/components/datatypes/Markdown/Markdown.js

@@ -9,7 +9,16 @@ const Markdown = props => {
   let html = null;
   try {
     const unsafeHTML = marked(markdown, { gfm: true });
-    html = DOMPurify.sanitize(unsafeHTML);
+    html = DOMPurify.sanitize(unsafeHTML, {
+      ALLOWED_TAGS: [
+        'p', 'br', 'strong', 'em', 'b', 'i', 'u', 's',
+        'code', 'pre', 'blockquote',
+        'ul', 'ol', 'li',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'a', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
+      ],
+      ALLOWED_ATTR: ['href', 'title', 'target', 'rel', 'class', 'id'],
+    });
   } catch {}
 
   const dangerouslySetInnerHTML = html ? { __html: html } : null;

package/src/components/resources/Claim/Claim.js

@@ -48,7 +48,7 @@ const dstu2DTO = fhirResource => {
     _get(fhirResource, 'payee.person');
   const careTeam = [];
   const priorityCoding = _get(fhirResource, 'priority');
-  const diagnosis = _get(fhirResource, 'diagnosis', []).map(diagnosis => {
+  const diagnosis = _get(fhirResource, 'diagnosis', [])?.map(diagnosis => {
     const coding = _get(diagnosis, 'diagnosis');
     const reference = null;
     const typeCoding = null;
@@ -61,7 +61,7 @@ const dstu2DTO = fhirResource => {
     accidentCoding || accidentDate
       ? { coding: accidentCoding, date: accidentDate }
       : null;
-  const insurance = _get(fhirResource, 'coverage', []).map(insurance => {
+  const insurance = _get(fhirResource, 'coverage', [])?.map(insurance => {
     const focal = insurance.focal;
     const coverage = insurance.coverage;
     const businessArrangement = insurance.businessArrangement;
@@ -82,13 +82,13 @@ const dstu2DTO = fhirResource => {
     if (level === 0) subItemProperty = 'detail';
     else if (level === 1) subItemProperty = 'subDetail';
     const subItems = subItemProperty
-      ? _get(item, subItemProperty, []).map(subItem =>
+      ? _get(item, subItemProperty, [])?.map(subItem =>
           mapItem(subItem, level + 1),
         )
       : [];
     return { sequence, service, quantity, factor, unitPrice, net, subItems };
   }
-  const items = _get(fhirResource, 'item').map(item => mapItem(item, 0));
+  const items = _get(fhirResource, 'item')?.map(item => mapItem(item, 0));
   return {
     status,
     typeCoding,
@@ -112,14 +112,14 @@ const stu3DTO = fhirResource => {
   const insurer = _get(fhirResource, 'insurer');
   const payeeCoding = _get(fhirResource, 'payee.type.coding[0]');
   const payeeParty = _get(fhirResource, 'payee.party');
-  const careTeam = _get(fhirResource, 'careTeam', []).map(team => {
+  const careTeam = _get(fhirResource, 'careTeam', [])?.map(team => {
     const provider = team.provider;
     const role = _get(team, 'role.coding[0]');
     const qualification = _get(team, 'role.coding[0]');
     return { provider, role, qualification };
   });
   const priorityCoding = _get(fhirResource, 'priority.coding[0]');
-  const diagnosis = _get(fhirResource, 'diagnosis', []).map(diagnosis => {
+  const diagnosis = _get(fhirResource, 'diagnosis', [])?.map(diagnosis => {
     const coding = _get(diagnosis, 'diagnosisCodeableConcept.coding[0]');
     const reference = _get(diagnosis, 'diagnosisReference');
     const typeCoding = _get(diagnosis, 'type[0].coding[0]');
@@ -132,7 +132,7 @@ const stu3DTO = fhirResource => {
     accidentCoding || accidentDate
       ? { coding: accidentCoding, date: accidentDate }
       : null;
-  const insurance = _get(fhirResource, 'insurance', []).map(insurance => {
+  const insurance = _get(fhirResource, 'insurance', [])?.map(insurance => {
     const focal = insurance.focal;
     const coverage = insurance.coverage;
     const businessArrangement = insurance.businessArrangement;
@@ -166,13 +166,13 @@ const stu3DTO = fhirResource => {
     if (level === 0) subItemProperty = 'detail';
     else if (level === 1) subItemProperty = 'subDetail';
     const subItems = subItemProperty
-      ? _get(item, subItemProperty, []).map(subItem =>
+      ? _get(item, subItemProperty, [])?.map(subItem =>
           mapItem(subItem, level + 1),
         )
       : [];
     return { sequence, service, quantity, factor, unitPrice, net, subItems };
   }
-  const items = _get(fhirResource, 'item').map(item => mapItem(item, 0));
+  const items = _get(fhirResource, 'item')?.map(item => mapItem(item, 0));
   return {
     status,
     typeCoding,
@@ -196,14 +196,14 @@ const r4DTO = fhirResource => {
   const insurer = _get(fhirResource, 'insurer');
   const payeeCoding = _get(fhirResource, 'payee.type.coding[0]');
   const payeeParty = _get(fhirResource, 'payee.party');
-  const careTeam = _get(fhirResource, 'careTeam', []).map(team => {
+  const careTeam = _get(fhirResource, 'careTeam', [])?.map(team => {
     const provider = team.provider;
     const role = _get(team, 'role.coding[0]');
     const qualification = _get(team, 'role.coding[0]');
     return { provider, role, qualification };
   });
   const priorityCoding = _get(fhirResource, 'priority.coding[0]');
-  const diagnosis = _get(fhirResource, 'diagnosis', []).map(diagnosis => {
+  const diagnosis = _get(fhirResource, 'diagnosis', [])?.map(diagnosis => {
     const coding = _get(diagnosis, 'diagnosisCodeableConcept.coding[0]');
     const reference = _get(diagnosis, 'diagnosisReference');
     const typeCoding = _get(diagnosis, 'type[0].coding[0]');
@@ -216,7 +216,7 @@ const r4DTO = fhirResource => {
     accidentCoding || accidentDate
       ? { coding: accidentCoding, date: accidentDate }
       : null;
-  const insurance = _get(fhirResource, 'insurance', []).map(insurance => {
+  const insurance = _get(fhirResource, 'insurance', [])?.map(insurance => {
     const focal = insurance.focal;
     const coverage = insurance.coverage;
     const businessArrangement = insurance.businessArrangement;
@@ -250,13 +250,13 @@ const r4DTO = fhirResource => {
     if (level === 0) subItemProperty = 'detail';
     else if (level === 1) subItemProperty = 'subDetail';
     const subItems = subItemProperty
-      ? _get(item, subItemProperty, []).map(subItem =>
+      ? _get(item, subItemProperty, [])?.map(subItem =>
           mapItem(subItem, level + 1),
         )
       : [];
     return { sequence, service, quantity, factor, unitPrice, net, subItems };
   }
-  const items = _get(fhirResource, 'item').map(item => mapItem(item, 0));
+  const items = _get(fhirResource, 'item')?.map(item => mapItem(item, 0));
   return {
     status,
     typeCoding,

package/src/components/resources/QuestionnaireResponse/Group.js

@@ -13,8 +13,7 @@ const Group = ({ data, prepareItems, isChild = false }) => {
   return data.map(prepareItems).map((item, i) => {
     const title =
       _get(item, 'title') ||
-      _get(item, 'text') ||
-      _get(item, '_linkId.fhir_comments.0');
+      _get(item, 'text');
 
     return (
       <ul

package/webpack.config.js

@@ -1,10 +1,11 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
   mode: process.env.NODE_ENV ?? 'production',
-  entry: ['./src/index.js'],
+  entry: './src/index.js',
   output: {
     path: path.resolve(__dirname, 'build'),
     filename: 'index.js',
@@ -48,6 +49,23 @@ module.exports = {
       },
     ],
   },
+  externals: [
+    nodeExternals({
+      allowlist: [
+        /^@nivo/,
+        /^lodash/,
+        /^bootstrap/,
+        '@popperjs/core',
+        'dompurify',
+        'marked',
+        'md5',
+        'pretty-bytes',
+        'prop-types',
+        'svg-url-loader',
+        'd3-shape',
+      ],
+    }),
+  ],
   plugins: [
     new MiniCssExtractPlugin({
       filename: 'style.css',