fhir-react 2.0.0 → 2.0.1-beta.10

package/jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
     //   lines: 70,
     // },
   },
-  moduleDirectories: ['node_modules', 'src'],
+  moduleDirectories: ['node_modules'],
   moduleNameMapper: {
     '.*\\.(css|less|styl|scss|sass)$': '<rootDir>/jest/mocks/cssModule.js',
     '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
@@ -24,4 +24,12 @@ module.exports = {
   },
   // testRegex: 'tests/.*\\.test\\.js$',
   snapshotSerializers: [],
+  testEnvironment: 'jsdom',
+  setupFiles: ['<rootDir>/jest.setup.js'],
+  transform: {
+    "\\.[jt]sx?$": ["babel-jest", { "extends": "./.babelrc", "plugins": ["babel-plugin-transform-import-meta"] }]
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!(@nivo|d3-.*)/)",
+  ],
 };

package/jest.setup.js

@@ -0,0 +1,3 @@
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver; 

package/package.json

@@ -1,25 +1,23 @@
 {
   "name": "fhir-react",
-  "version": "2.0.0",
+  "version": "2.0.1-beta.10",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@nivo/core": "^0.78.0",
-    "@nivo/pie": "^0.78.0",
-    "@popperjs/core": "^2.11.2",
-    "@storybook/addons": "^6.5.13",
+    "@nivo/core": "^0.84.0",
+    "@nivo/pie": "^0.84.0",
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.1.3",
     "dompurify": "^2.3.6",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "marked": "^3.0.8",
     "md5": "^2.3.0",
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "svg-url-loader": "^7.1.1"
   },
   "scripts": {
@@ -61,56 +59,66 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.2",
-    "@babel/plugin-proposal-do-expressions": "^7.16.7",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
-    "@babel/plugin-proposal-function-bind": "^7.16.7",
-    "@babel/plugin-proposal-function-sent": "^7.16.7",
-    "@babel/plugin-proposal-json-strings": "^7.16.7",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
-    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/plugin-proposal-pipeline-operator": "^7.17.6",
-    "@babel/plugin-proposal-throw-expressions": "^7.16.7",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/eslint-parser": "^7.28.6",
+    "@babel/plugin-proposal-decorators": "^7.29.0",
+    "@babel/plugin-proposal-do-expressions": "^7.28.6",
+    "@babel/plugin-proposal-export-default-from": "^7.27.1",
+    "@babel/plugin-proposal-function-bind": "^7.27.1",
+    "@babel/plugin-proposal-function-sent": "^7.27.1",
+    "@babel/plugin-proposal-pipeline-operator": "^7.28.6",
+    "@babel/plugin-proposal-throw-expressions": "^7.27.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/plugin-transform-class-properties": "^7.28.6",
+    "@babel/plugin-transform-export-namespace-from": "^7.27.1",
+    "@babel/plugin-transform-json-strings": "^7.28.6",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.28.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.28.6",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
+    "@babel/plugin-transform-numeric-separator": "^7.28.6",
+    "@babel/plugin-transform-object-rest-spread": "^7.28.6",
+    "@babel/plugin-transform-optional-chaining": "^7.28.6",
+    "@babel/plugin-transform-react-jsx": "^7.28.6",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@storybook/addons": "^6.5.13",
     "@storybook/addon-controls": "^6.5.13",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.13",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@testing-library/react": "^13.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-imports": "^2.0.0",
+    "babel-plugin-transform-import-meta": "^2.3.3",
+    "babel-preset-jest": "^29.6.3",
     "copy-webpack-plugin": "^5.1.2",
     "css-loader": "^3.6.0",
     "dedent": "^0.7.0",
-    "eslint": "^8.10.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.3",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "jest": "^24.9.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
     "mini-css-extract-plugin": "^1.6.2",
     "npm-check-updates": "^16.7.9",
     "prettier": "1.19.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.49.9",
     "sass-loader": "^10.2.0",
     "style-loader": "^2.0.0",
@@ -118,5 +126,9 @@
     "stylelint-config-standard": "^25.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
+  },
+  "overrides": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
-}
+}

package/src/components/resources/Observation/Observation.js

@@ -18,7 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 import { getResourceDate } from '../../../utils/getResourceDate';
-import Annotation from "../../datatypes/Annotation";
+import Annotation from '../../datatypes/Annotation';
 
 const Observation = ({
   fhirResource,

package/src/components/resources/Observation/Observation.test.js

@@ -132,7 +132,9 @@ describe('should render component correctly', () => {
     expect(getByTestId('issuedOn').textContent).toEqual('05/18/2016');
     expect(getByTestId('subject').textContent).toContain('Patient/infant');
     expect(queryByText(/373066001/g)).not.toBeNull();
-    expect(getByTestId('hasNote').textContent).toContain('Was exposed to second-hand smoke.');
+    expect(getByTestId('hasNote').textContent).toContain(
+      'Was exposed to second-hand smoke.',
+    );
   });
 
   test('should display not rounded value', () => {

package/webpack.config.js

@@ -3,7 +3,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-  mode: process.env.NODE_ENV,
+  mode: process.env.NODE_ENV ?? 'production',
   entry: ['./src/index.js'],
   output: {
     path: path.resolve(__dirname, 'build'),
@@ -49,7 +49,18 @@ module.exports = {
     ],
   },
   externals: {
-    react: 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+    react: {
+      amd: 'react', 
+      commonjs: 'react', 
+      module: 'react', 
+      umd: 'react'
+    }, // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+    'react-dom': {
+      amd: 'react-dom', 
+      commonjs: 'react-dom', 
+      module: 'react-dom', 
+      umd: 'react-dom'
+    },
   },
   plugins: [
     new MiniCssExtractPlugin({