feat:NMRium react wrapper info

.eslintignore

@@ -1,4 +1,7 @@
 dist
 node_modules
 public
-src/*.json
+build
+src/*.json
+vite.config.*
+lib

.github/workflows/dev-build.yml

@@ -39,6 +39,11 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v2
 
+    - name: Update version number
+      run: |
+          VERSION=${GITHUB_REF//*\/}
+          echo "export default { version: '$VERSION' };" > src/versionInfo.ts
+
     # Setup gcloud CLI
     - name: Setup CLI
       uses: google-github-actions/setup-gcloud@94337306dda8180d967a56932ceb4ddcf01edae7

.gitignore

@@ -26,3 +26,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+
+
+.eslintcache
+
+.vscode
+
+/test-results
+/playwright-report

.vscode/settings.json

@@ -0,0 +1 @@
+{}

package.json

@@ -15,8 +15,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "filelist-utils": "^1.10.2",
-    "nmr-load-save": "^0.17.3",
+    "nmr-load-save": "^0.18.0",
     "nmrium": "^0.43.1-pre.1692874523",
+    "react-science": "^0.26.2",
     "vite-plugin-pwa": "^0.16.4"
   },
   "scripts": {
@@ -25,7 +26,7 @@
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 vite build --outDir build",
     "build-no-minify": "cross-env NO_MINIFY=true npm run build",
     "test": "jest --coverage",
-    "eslint": "eslint src/* ",
+    "eslint": "eslint . --cache",
     "eslint-fix": "npm run eslint -- --fix",
     "compile": "tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json",
     "check-types": "tsc --project tsconfig.esm.json",
@@ -35,28 +36,28 @@
     "test-e2e-server": "serve -l tcp://localhost:3000 build"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+    "@babel/plugin-transform-modules-commonjs": "^7.22.11",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
     "@playwright/test": "^1.37.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/jest": "^29.5.4",
-    "@types/node": "^20.5.3",
+    "@types/node": "^20.5.8",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.47.0",
+    "eslint": "^8.48.0",
     "eslint-config-cheminfo-react": "^10.0.0",
     "eslint-config-cheminfo-typescript": "^12.0.4",
-    "jest": "^29.6.3",
-    "prettier": "3.0.2",
+    "jest": "^29.6.4",
+    "prettier": "3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "serve": "^14.2.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9"
   }
-}
+}

src/NMRiumWrapper.tsx

@@ -4,12 +4,15 @@
 import events from './events';
 import { useLoadSpectra } from './hooks/useLoadSpectra';
 import { usePreferences } from './hooks/usePreferences';
 import { useWhiteList } from './hooks/useWhiteList';
+import { RootLayout } from 'react-science/ui';
+import AboutUsModal from './modal/AboutUsModal';
 
 const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
   container: {
     height: '100%',
     width: '100%',
+    position: 'relative',
   },
 
   loadingContainer: {
@@ -102,13 +105,13 @@
   });
 
   return (
-    <div style={styles.container}>
-      {isLoading ||
-        (isFetchAllowedOriginsPending && (
-          <div style={styles.loadingContainer}>
-            <span>Loading .... </span>
-          </div>
-        ))}
+    <RootLayout style={styles.container}>
+      {' '}
+      {isFetchAllowedOriginsPending && (
+        <div style={styles.loadingContainer}>
+          <span>Loading .... </span>
+        </div>
+      )}
       <NMRium
         ref={nmriumRef}
         data={data}
@@ -117,7 +120,8 @@
         workspace={workspace}
         emptyText={defaultEmptyMessage}
       />
-    </div>
+      <AboutUsModal />
+    </RootLayout>
   );
 }
 

src/modal/AboutUsModal.tsx

@@ -0,0 +1,145 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { Modal, useOnOff } from 'react-science/ui';
+import versionInfo from '../versionInfo';
+
+const styles = css`
+  width: 30vw;
+  min-width: 400px;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+
+  button:focus {
+    outline: none;
+  }
+
+  .container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  span.title {
+    font-weight: bold;
+    color: #ea580c;
+    font-size: 2em;
+  }
+
+  a {
+    color: #969696;
+  }
+
+  a:hover,
+  a:focus {
+    color: #00bcd4;
+  }
+
+  .header {
+    span {
+      color: #464646;
+      font-size: 15px;
+      flex: 1;
+      user-select: none;
+    }
+  }
+`;
+
+function AboutUsModal() {
+  const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
+  return (
+    <>
+      <InfoButton onClick={openDialog} />
+      <Modal
+        hasCloseButton
+        isOpen={isOpenDialog}
+        onRequestClose={closeDialog}
+        maxWidth={1000}
+      >
+        <div css={styles}>
+          <Modal.Header>
+            <div className="header">
+              <span>About NMRium react wrapper</span>
+            </div>
+          </Modal.Header>
+          <div className="container">
+            <span className="title"> NMRium react wrapper</span>
+            <Separator />
+            Version <VersionInfo />
+            <Separator />
+            <a href="https://git.nmrium.org" target="_blank" rel="noreferrer">
+              GitHub ( https://git.nmrium.org )
+            </a>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default AboutUsModal;
+
+function VersionInfo() {
+  const { version } = versionInfo;
+  if (version === 'HEAD') {
+    return <>HEAD</>;
+  } else if (version.startsWith('git-')) {
+    return (
+      <a
+        href={`https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/${version.slice(
+          4,
+        )}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        git-{version.slice(4, 14)}
+      </a>
+    );
+  } else {
+    return (
+      <a
+        href={`https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/${version}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {version}
+      </a>
+    );
+  }
+}
+
+function InfoButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      style={{
+        fontSize: '13px',
+        textAlign: 'center',
+        width: '25px',
+        height: '25px',
+        borderRadius: '25px',
+        border: '0.55px solid #ea580c',
+        left: '5px',
+        bottom: '10px',
+        position: 'absolute',
+      }}
+    >
+      &#9432;
+    </button>
+  );
+}
+
+function Separator() {
+  return (
+    <span
+      style={{
+        borderBottom: '1px solid gray',
+        width: '15px',
+        height: '1px',
+        margin: '10px 0',
+      }}
+    />
+  );
+}

src/versionInfo.ts

@@ -0,0 +1 @@
+export default { version: 'HEAD' };

tsconfig.json

@@ -19,12 +19,11 @@
     "noImplicitAny": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "module": "node16",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
   },
   "include": [
     "src",