NFDI4Chem · vcnainala · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,19 +9,19 @@
     "lib"
   ],
   "volta": {
-    "node": "20.2.0"
+    "node": "22.14.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.11.0",
-    "@blueprintjs/icons": "^5.11.0",
-    "@emotion/react": "^11.13.0",
+    "@blueprintjs/core": "^5.17.5",
+    "@blueprintjs/icons": "^5.19.1",
+    "@emotion/styled": "^11.14.0",
     "fifo-logger": "^1.0.0",
-    "filelist-utils": "^1.11.1",
-    "nmr-load-save": "^0.37.0",
-    "nmr-processing": "^12.12.0",
-    "nmrium": "^0.59.0",
-    "react-science": "^6.0.0",
-    "vite-plugin-pwa": "^0.20.1"
+    "filelist-utils": "^1.11.3",
+    "nmr-load-save": "^3.1.2",
+    "nmr-processing": "^16.0.1",
+    "nmrium": "^0.60.1-pre.1741337420",
+    "react-science": "^14.0.0",
+    "vite-plugin-pwa": "^0.21.1"
   },
   "scripts": {
     "start": "vite --host localhost --port 3000  --open",
@@ -39,28 +39,28 @@
     "test-e2e-server": "serve -l tcp://localhost:3000 build"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.24.8",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@playwright/test": "^1.46.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.26.3",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@playwright/test": "^1.51.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-cheminfo-react": "^13.0.0",
-    "eslint-config-cheminfo-typescript": "^15.0.0",
+    "eslint": "^9.21.0",
+    "eslint-config-cheminfo-react": "^15.0.0",
+    "eslint-config-cheminfo-typescript": "^17.0.0",
     "jest": "^29.7.0",
-    "prettier": "3.3.3",
+    "prettier": "3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.0",
-    "serve": "^14.2.3",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "react-router-dom": "^7.3.0",
+    "serve": "^14.2.4",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.1"
   }
-}
+}
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,4 +1,5 @@
-import { PlaywrightTestConfig, devices, ViewportSize } from '@playwright/test';
+import { devices } from '@playwright/test';
+import type { ViewportSize , PlaywrightTestConfig} from '@playwright/test';
 
 const viewportOverride: ViewportSize = {
   width: 1400,

diff --git a/src/NMRiumWrapper.tsx b/src/NMRiumWrapper.tsx
@@ -1,5 +1,7 @@
-import { NMRium, NMRiumData, NMRiumRefAPI, NMRiumChangeCb } from 'nmrium';
-import { useEffect, useState, useCallback, CSSProperties, useRef } from 'react';
+import type { NMRiumData, NMRiumRefAPI, NMRiumChangeCb } from 'nmrium';
+import { NMRium } from 'nmrium';
+import type { CSSProperties } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { RootLayout } from 'react-science/ui';
 
 import events from './events';
@@ -113,7 +115,6 @@ export default function NMRiumWrapper() {
 
   return (
     <RootLayout style={styles.container}>
-      {' '}
       {isFetchAllowedOriginsPending && (
         <div style={styles.loadingContainer}>
           <span>Loading .... </span>

diff --git a/src/demo/NMRiumWrapperDemo.tsx b/src/demo/NMRiumWrapperDemo.tsx
@@ -1,33 +1,31 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { NMRiumData } from 'nmrium';
-import Button from 'nmrium/lib/component/elements/Button';
+import styled from '@emotion/styled';
+import type { NMRiumData } from 'nmrium';
+import { Button } from 'react-science/ui';
 
 import NMRiumWrapper from '../NMRiumWrapper';
 import events from '../events';
 import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs';
 
 import jsonData from './data/test.json';
 
-const styles = {
-  container: css`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  `,
-  header: css`
-    height: 40px;
-    width: 100%;
-    padding: 5px;
-    display: flex;
-  `,
-};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const Header = styled.div`
+  height: 40px;
+  width: 100%;
+  padding: 5px;
+  display: flex;
+`;
 
 export default function NMRiumWrapperDemo() {
   return (
-    <div css={styles.container}>
-      <div id="header" css={styles.header}>
-        <Button.Done
+    <Container>
+      <Header>
+        <Button
           style={{ marginRight: '10px' }}
           onClick={() => {
             events.trigger('load', {
@@ -37,9 +35,9 @@ export default function NMRiumWrapperDemo() {
           }}
         >
           Test load from json
-        </Button.Done>
+        </Button>
 
-        <Button.Done
+        <Button
           style={{ marginRight: '10px' }}
           onClick={() => {
             events.trigger('load', {
@@ -56,9 +54,9 @@ export default function NMRiumWrapperDemo() {
           }}
         >
           Test Load from URLS
-        </Button.Done>
+        </Button>
 
-        <Button.Done
+        <Button
           style={{ marginRight: '10px' }}
           onClick={() => {
             events.trigger('load', {
@@ -70,8 +68,8 @@ export default function NMRiumWrapperDemo() {
           }}
         >
           Test Load URL without extension
-        </Button.Done>
-        <Button.Done
+        </Button>
+        <Button
           style={{ marginRight: '10px' }}
           onClick={() => {
             void loadFilesFromURLs([
@@ -88,8 +86,8 @@ export default function NMRiumWrapperDemo() {
           }}
         >
           Test Load Files
-        </Button.Done>
-        <Button.Done
+        </Button>
+        <Button
           className="logger-btn"
           onClick={() => {
             void loadFilesFromURLs(['../data/sample-with-error.zip']).then(
@@ -104,10 +102,10 @@ export default function NMRiumWrapperDemo() {
           }}
         >
           Test Logger
-        </Button.Done>
-      </div>
+        </Button>
+      </Header>
 
       <NMRiumWrapper />
-    </div>
+    </Container>
   );
 }
diff --git a/src/events/event.ts b/src/events/event.ts
@@ -1,4 +1,4 @@
-import { EventType, EventData } from './types';
+import type { EventType, EventData } from './types';
 
 const namespace = 'nmr-wrapper';
 

diff --git a/src/events/types.ts b/src/events/types.ts
@@ -1,6 +1,10 @@
-import { NMRiumData, NMRiumState } from 'nmrium';
-import { BlobObject } from 'nmrium/lib/component/utility/export';
+import type { NMRiumData, NMRiumState } from 'nmrium';
 
+interface BlobObject {
+  blob: Blob;
+  width: number;
+  height: number;
+}
 type EventType =
   | 'load'
   | 'data-change'

diff --git a/src/hooks/useLoadSpectra.ts b/src/hooks/useLoadSpectra.ts
@@ -1,13 +1,7 @@
 import { FifoLogger } from 'fifo-logger';
 import { fileCollectionFromFiles } from 'filelist-utils';
-import {
-  read,
-  readFromWebSource,
-  NmriumState,
-  CURRENT_EXPORT_VERSION,
-  ParsingOptions,
-  ViewState,
-} from 'nmr-load-save';
+import type { NmriumState, ParsingOptions, ViewState } from 'nmr-load-save';
+import { read, readFromWebSource, CURRENT_EXPORT_VERSION } from 'nmr-load-save';
 import { useCallback, useMemo, useState } from 'react';
 
 import events from '../events';
@@ -52,7 +46,7 @@ async function loadSpectraFromURLs(urls: string[]) {
     const refURL = new URL(url);
     const name = getFileNameFromURL(url);
     let path = refURL.pathname;
-    const hasExtension = name && name.includes('.');
+    const hasExtension = name?.includes('.');
     if (!hasExtension) {
       path = `${path}.zip`;
     }

diff --git a/src/hooks/usePreferences.ts b/src/hooks/usePreferences.ts
@@ -1,5 +1,5 @@
-import { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
-import { NMRiumWorkspace } from 'nmrium';
+import type { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
+import type { NMRiumWorkspace } from 'nmrium';
 import { useLayoutEffect, useState } from 'react';
 
 import { getNmrXivWorkspace } from '../workspaces/nmrxiv';

diff --git a/src/modal/AboutUsModal.tsx b/src/modal/AboutUsModal.tsx
@@ -1,34 +1,25 @@
-/** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useOnOff } from 'react-science/ui';
 
 import versionInfo from '../versionInfo';
 
-const styles = css`
-  button:focus {
-    outline: none;
-  }
-
-  .container {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  span.title {
-    font-weight: bold;
-    color: #ea580c;
-    font-size: 1.5em;
-  }
-
-  a {
-    color: #969696;
-  }
+const Title = styled.span`
+  font-weight: bold;
+  color: #ea580c;
+  font-size: 1.5em;
+`;
+const Container = styled.div`
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Link = styled.a`
+  color: #969696;
 
-  a:hover,
-  a:focus {
+  &:hover,
+  &:focus {
     color: #00bcd4;
   }
 `;
@@ -44,20 +35,20 @@ function AboutUsModal() {
         style={{ maxWidth: 1000 }}
         title="About NMRium react wrapper"
       >
-        <DialogBody css={styles}>
-          <div className="container">
-            <span className="title"> NMRium react wrapper</span>
+        <DialogBody>
+          <Container>
+            <Title> NMRium react wrapper</Title>
             <Separator />
             Version <VersionInfo />
             <Separator />
-            <a
+            <Link
               href="https://github.com/NFDI4Chem/nmrium-react-wrapper"
               target="_blank"
               rel="noreferrer"
             >
               GitHub ( https://github.com/NFDI4Chem/nmrium-react-wrapper )
-            </a>
-          </div>
+            </Link>
+          </Container>
         </DialogBody>
       </Dialog>
     </>
@@ -107,7 +98,7 @@ function InfoButton({ onClick }) {
         height: '25px',
         borderRadius: '25px',
         border: '0.55px solid #ea580c',
-        left: '5px',
+        left: '2px',
         bottom: '10px',
         position: 'absolute',
       }}

diff --git a/src/utilities/isArrayOfString.ts b/src/utilities/isArrayOfString.ts
@@ -1,4 +1,3 @@
-//eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isArrayOfString(data: any[]) {
   return data.every((url) => typeof url === 'string');
 }
diff --git a/src/utilities/loadFilesFromURLs.ts b/src/utilities/loadFilesFromURLs.ts
@@ -6,7 +6,7 @@ export function loadFilesFromURLs(urls: string[]): Promise<File[]> {
       .then((response) => response.arrayBuffer())
       .then((data) => {
         let name = getFileNameFromURL(url);
-        const hasExtension = name && name.includes('.');
+        const hasExtension = name?.includes('.');
         if (!hasExtension) {
           name = `${name}.zip`;
         }