Skip to content

Commit 75b3547

Browse files
authored
Merge pull request #241 from NFDI4Chem/upgrade-nmrium-beta-v061
feat: upgrade NMRium to beta version 0.61
2 parents e4d824c + 6bcd1b3 commit 75b3547

15 files changed

Lines changed: 9374 additions & 13416 deletions

package-lock.json

Lines changed: 6715 additions & 9880 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@
99
"lib"
1010
],
1111
"volta": {
12-
"node": "20.2.0"
12+
"node": "22.14.0"
1313
},
1414
"dependencies": {
15-
"@blueprintjs/core": "^5.11.0",
16-
"@blueprintjs/icons": "^5.11.0",
17-
"@emotion/react": "^11.13.0",
15+
"@blueprintjs/core": "^5.17.5",
16+
"@blueprintjs/icons": "^5.19.1",
17+
"@emotion/styled": "^11.14.0",
1818
"fifo-logger": "^1.0.0",
19-
"filelist-utils": "^1.11.1",
20-
"nmr-load-save": "^0.37.0",
21-
"nmr-processing": "^12.12.0",
22-
"nmrium": "^0.59.0",
23-
"react-science": "^6.0.0",
24-
"vite-plugin-pwa": "^0.20.1"
19+
"filelist-utils": "^1.11.3",
20+
"nmr-load-save": "^3.1.2",
21+
"nmr-processing": "^16.0.1",
22+
"nmrium": "^0.60.1-pre.1741337420",
23+
"react-science": "^14.0.0",
24+
"vite-plugin-pwa": "^0.21.1"
2525
},
2626
"scripts": {
2727
"start": "vite --host localhost --port 3000 --open",
@@ -39,28 +39,28 @@
3939
"test-e2e-server": "serve -l tcp://localhost:3000 build"
4040
},
4141
"devDependencies": {
42-
"@babel/plugin-transform-modules-commonjs": "^7.24.8",
43-
"@babel/preset-react": "^7.24.7",
44-
"@babel/preset-typescript": "^7.24.7",
45-
"@playwright/test": "^1.46.0",
42+
"@babel/plugin-transform-modules-commonjs": "^7.26.3",
43+
"@babel/preset-react": "^7.26.3",
44+
"@babel/preset-typescript": "^7.26.0",
45+
"@playwright/test": "^1.51.0",
4646
"@simbathesailor/use-what-changed": "^2.0.0",
47-
"@types/jest": "^29.5.12",
47+
"@types/jest": "^29.5.14",
4848
"@types/node": "^22.2.0",
4949
"@types/react": "^18.3.3",
5050
"@types/react-dom": "^18.3.0",
5151
"@types/react-router-dom": "^5.3.3",
52-
"@vitejs/plugin-react-swc": "^3.7.0",
52+
"@vitejs/plugin-react-swc": "^3.8.0",
5353
"cross-env": "^7.0.3",
54-
"eslint": "^8.57.0",
55-
"eslint-config-cheminfo-react": "^13.0.0",
56-
"eslint-config-cheminfo-typescript": "^15.0.0",
54+
"eslint": "^9.21.0",
55+
"eslint-config-cheminfo-react": "^15.0.0",
56+
"eslint-config-cheminfo-typescript": "^17.0.0",
5757
"jest": "^29.7.0",
58-
"prettier": "3.3.3",
58+
"prettier": "3.5.3",
5959
"react": "^18.3.1",
6060
"react-dom": "^18.3.1",
61-
"react-router-dom": "^6.26.0",
62-
"serve": "^14.2.3",
63-
"typescript": "^5.5.4",
64-
"vite": "^5.4.0"
61+
"react-router-dom": "^7.3.0",
62+
"serve": "^14.2.4",
63+
"typescript": "^5.8.2",
64+
"vite": "^6.2.1"
6565
}
66-
}
66+
}

playwright.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { PlaywrightTestConfig, devices, ViewportSize } from '@playwright/test';
1+
import { devices } from '@playwright/test';
2+
import type { ViewportSize , PlaywrightTestConfig} from '@playwright/test';
23

34
const viewportOverride: ViewportSize = {
45
width: 1400,

src/NMRiumWrapper.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { NMRium, NMRiumData, NMRiumRefAPI, NMRiumChangeCb } from 'nmrium';
2-
import { useEffect, useState, useCallback, CSSProperties, useRef } from 'react';
1+
import type { NMRiumData, NMRiumRefAPI, NMRiumChangeCb } from 'nmrium';
2+
import { NMRium } from 'nmrium';
3+
import type { CSSProperties } from 'react';
4+
import { useEffect, useState, useCallback, useRef } from 'react';
35
import { RootLayout } from 'react-science/ui';
46

57
import events from './events';
@@ -113,7 +115,6 @@ export default function NMRiumWrapper() {
113115

114116
return (
115117
<RootLayout style={styles.container}>
116-
{' '}
117118
{isFetchAllowedOriginsPending && (
118119
<div style={styles.loadingContainer}>
119120
<span>Loading .... </span>

src/demo/NMRiumWrapperDemo.tsx

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
1-
/** @jsxImportSource @emotion/react */
2-
import { css } from '@emotion/react';
3-
import { NMRiumData } from 'nmrium';
4-
import Button from 'nmrium/lib/component/elements/Button';
1+
import styled from '@emotion/styled';
2+
import type { NMRiumData } from 'nmrium';
3+
import { Button } from 'react-science/ui';
54

65
import NMRiumWrapper from '../NMRiumWrapper';
76
import events from '../events';
87
import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs';
98

109
import jsonData from './data/test.json';
1110

12-
const styles = {
13-
container: css`
14-
display: flex;
15-
flex-direction: column;
16-
height: 100%;
17-
`,
18-
header: css`
19-
height: 40px;
20-
width: 100%;
21-
padding: 5px;
22-
display: flex;
23-
`,
24-
};
11+
const Container = styled.div`
12+
display: flex;
13+
flex-direction: column;
14+
height: 100%;
15+
`;
16+
17+
const Header = styled.div`
18+
height: 40px;
19+
width: 100%;
20+
padding: 5px;
21+
display: flex;
22+
`;
2523

2624
export default function NMRiumWrapperDemo() {
2725
return (
28-
<div css={styles.container}>
29-
<div id="header" css={styles.header}>
30-
<Button.Done
26+
<Container>
27+
<Header>
28+
<Button
3129
style={{ marginRight: '10px' }}
3230
onClick={() => {
3331
events.trigger('load', {
@@ -37,9 +35,9 @@ export default function NMRiumWrapperDemo() {
3735
}}
3836
>
3937
Test load from json
40-
</Button.Done>
38+
</Button>
4139

42-
<Button.Done
40+
<Button
4341
style={{ marginRight: '10px' }}
4442
onClick={() => {
4543
events.trigger('load', {
@@ -56,9 +54,9 @@ export default function NMRiumWrapperDemo() {
5654
}}
5755
>
5856
Test Load from URLS
59-
</Button.Done>
57+
</Button>
6058

61-
<Button.Done
59+
<Button
6260
style={{ marginRight: '10px' }}
6361
onClick={() => {
6462
events.trigger('load', {
@@ -70,8 +68,8 @@ export default function NMRiumWrapperDemo() {
7068
}}
7169
>
7270
Test Load URL without extension
73-
</Button.Done>
74-
<Button.Done
71+
</Button>
72+
<Button
7573
style={{ marginRight: '10px' }}
7674
onClick={() => {
7775
void loadFilesFromURLs([
@@ -88,8 +86,8 @@ export default function NMRiumWrapperDemo() {
8886
}}
8987
>
9088
Test Load Files
91-
</Button.Done>
92-
<Button.Done
89+
</Button>
90+
<Button
9391
className="logger-btn"
9492
onClick={() => {
9593
void loadFilesFromURLs(['../data/sample-with-error.zip']).then(
@@ -104,10 +102,10 @@ export default function NMRiumWrapperDemo() {
104102
}}
105103
>
106104
Test Logger
107-
</Button.Done>
108-
</div>
105+
</Button>
106+
</Header>
109107

110108
<NMRiumWrapper />
111-
</div>
109+
</Container>
112110
);
113111
}

src/events/event.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EventType, EventData } from './types';
1+
import type { EventType, EventData } from './types';
22

33
const namespace = 'nmr-wrapper';
44

src/events/types.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import { NMRiumData, NMRiumState } from 'nmrium';
2-
import { BlobObject } from 'nmrium/lib/component/utility/export';
1+
import type { NMRiumData, NMRiumState } from 'nmrium';
32

3+
interface BlobObject {
4+
blob: Blob;
5+
width: number;
6+
height: number;
7+
}
48
type EventType =
59
| 'load'
610
| 'data-change'

src/hooks/useLoadSpectra.ts

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import { FifoLogger } from 'fifo-logger';
22
import { fileCollectionFromFiles } from 'filelist-utils';
3-
import {
4-
read,
5-
readFromWebSource,
6-
NmriumState,
7-
CURRENT_EXPORT_VERSION,
8-
ParsingOptions,
9-
ViewState,
10-
} from 'nmr-load-save';
3+
import type { NmriumState, ParsingOptions, ViewState } from 'nmr-load-save';
4+
import { read, readFromWebSource, CURRENT_EXPORT_VERSION } from 'nmr-load-save';
115
import { useCallback, useMemo, useState } from 'react';
126

137
import events from '../events';
@@ -52,7 +46,7 @@ async function loadSpectraFromURLs(urls: string[]) {
5246
const refURL = new URL(url);
5347
const name = getFileNameFromURL(url);
5448
let path = refURL.pathname;
55-
const hasExtension = name && name.includes('.');
49+
const hasExtension = name?.includes('.');
5650
if (!hasExtension) {
5751
path = `${path}.zip`;
5852
}

src/hooks/usePreferences.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
2-
import { NMRiumWorkspace } from 'nmrium';
1+
import type { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
2+
import type { NMRiumWorkspace } from 'nmrium';
33
import { useLayoutEffect, useState } from 'react';
44

55
import { getNmrXivWorkspace } from '../workspaces/nmrxiv';

src/modal/AboutUsModal.tsx

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
1-
/** @jsxImportSource @emotion/react */
21
import { Dialog, DialogBody } from '@blueprintjs/core';
3-
import { css } from '@emotion/react';
2+
import styled from '@emotion/styled';
43
import { useOnOff } from 'react-science/ui';
54

65
import versionInfo from '../versionInfo';
76

8-
const styles = css`
9-
button:focus {
10-
outline: none;
11-
}
12-
13-
.container {
14-
padding: 20px;
15-
display: flex;
16-
flex-direction: column;
17-
align-items: center;
18-
}
19-
20-
span.title {
21-
font-weight: bold;
22-
color: #ea580c;
23-
font-size: 1.5em;
24-
}
25-
26-
a {
27-
color: #969696;
28-
}
7+
const Title = styled.span`
8+
font-weight: bold;
9+
color: #ea580c;
10+
font-size: 1.5em;
11+
`;
12+
const Container = styled.div`
13+
padding: 20px;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
`;
18+
const Link = styled.a`
19+
color: #969696;
2920
30-
a:hover,
31-
a:focus {
21+
&:hover,
22+
&:focus {
3223
color: #00bcd4;
3324
}
3425
`;
@@ -44,20 +35,20 @@ function AboutUsModal() {
4435
style={{ maxWidth: 1000 }}
4536
title="About NMRium react wrapper"
4637
>
47-
<DialogBody css={styles}>
48-
<div className="container">
49-
<span className="title"> NMRium react wrapper</span>
38+
<DialogBody>
39+
<Container>
40+
<Title> NMRium react wrapper</Title>
5041
<Separator />
5142
Version <VersionInfo />
5243
<Separator />
53-
<a
44+
<Link
5445
href="https://github.com/NFDI4Chem/nmrium-react-wrapper"
5546
target="_blank"
5647
rel="noreferrer"
5748
>
5849
GitHub ( https://github.com/NFDI4Chem/nmrium-react-wrapper )
59-
</a>
60-
</div>
50+
</Link>
51+
</Container>
6152
</DialogBody>
6253
</Dialog>
6354
</>
@@ -107,7 +98,7 @@ function InfoButton({ onClick }) {
10798
height: '25px',
10899
borderRadius: '25px',
109100
border: '0.55px solid #ea580c',
110-
left: '5px',
101+
left: '2px',
111102
bottom: '10px',
112103
position: 'absolute',
113104
}}

0 commit comments

Comments
 (0)