Merge pull request #543 from epam/505-add-miew-react-package

Add miew-react package

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 build/
 coverage/
+packages/miew-react/dist/
 .nyc_output/
 .sonar/
 .idea/

packages/app/jest.config.js

@@ -1,14 +1,19 @@
+/* eslint-env node */
 module.exports = {
   verbose: true,
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "https://localhost",
+  },
   transform: {
-    "^.+\\.jsx?$": "./tools/babel-jest-wrapper.js",
+    "^.+\\.[jt]sx?$": ["babel-jest", { rootMode: "upward" }],
   },
   reporters: [["jest-simple-dot-reporter", { color: true }]],
   collectCoverageFrom: ["src/**/*.jsx"],
   moduleDirectories: ["node_modules"],
   coverageReporters: ["lcov", "text-summary"],
   coverageDirectory: "coverage",
   moduleNameMapper: {
-    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
+    "^.+\\.[sp]?css$": "babel-jest",
   },
 };

packages/app/package.json

@@ -41,7 +41,7 @@
     "classnames": "^2.5.1",
     "jquery": "^3.5.1",
     "jquery.terminal": "^2.20.1",
-    "miew": "0.9.0",
+    "miew": "workspace:^",
     "react": "^16.13.1",
     "react-bootstrap": "^2.9.0",
     "react-dom": "^16.13.1",
@@ -61,7 +61,8 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.33.2",
     "html-webpack-plugin": "^5.6.0",
-    "jest": "^26.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-simple-dot-reporter": "^1.0.5",
     "mini-css-extract-plugin": "^2.8.0",
     "npm-run-all": "^4.1.5",

packages/lib/package.json

@@ -6,8 +6,10 @@
   "main": "dist/Miew.js",
   "module": "dist/Miew.module.js",
   "style": "dist/Miew.min.css",
+  "types": "types/index.d.ts",
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "types/**/*"
   ],
   "repository": {
     "type": "git",

packages/lib/src/Miew.js

@@ -894,9 +894,13 @@ Miew.prototype.enableHotKeys = function (enabled) {
  * @private
  */
 Miew.prototype._onResize = function () {
+  const gfx = this._gfx;
+  if (!gfx) {
+    return;
+  }
+
   this._needRender = true;
 
-  const gfx = this._gfx;
   gfx.width = this._container.clientWidth;
   gfx.height = this._container.clientHeight;
 

packages/lib/types/Miew.d.ts

@@ -0,0 +1,10 @@
+export class Miew {
+  constructor(options?: any);
+  init(): boolean;
+  run(): void;
+  load(source: string | File, opts: object): Promise<string | null>;
+  setOptions(opts: string | object): void;
+  exportCML(): string | null;
+}
+
+export default Miew;

packages/lib/types/index.d.ts

@@ -0,0 +1 @@
+export { Miew, default } from './Miew';

packages/miew-react/.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = unset
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

packages/miew-react/.eslintrc.js

@@ -0,0 +1,18 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['coverage', 'dist'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+};

packages/miew-react/.npmignore

@@ -0,0 +1,2 @@
+*
+!dist/*

packages/miew-react/.prettierignore

@@ -0,0 +1,2 @@
+coverage
+dist

packages/miew-react/.prettierrc.js

@@ -0,0 +1,8 @@
+/* eslint-env node */
+const os = require('os');
+
+module.exports = {
+  printWidth: 100,
+  singleQuote: true,
+  endOfLine: os.EOL === '\n' ? 'lf' : 'crlf',
+};

packages/miew-react/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2015-2024 [EPAM Systems, Inc.](https://www.epam.com/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/miew-react/README.md

@@ -0,0 +1,49 @@
+# miew-react
+
+[![npm version](https://img.shields.io/npm/v/miew-react)](https://www.npmjs.com/package/miew-react)
+[![Downloads](https://img.shields.io/npm/dm/miew-react)](https://www.npmjs.com/package/miew-react)
+[![License](https://img.shields.io/badge/MIT%20-blue.svg)](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2015–2024 [EPAM Systems, Inc.](https://www.epam.com/)
+
+Miew is a high performance web library for advanced visualization and manipulation of molecular structures.
+
+For more details please look at the following [link](https://github.com/epam/miew).
+
+The miew-react package contains only the functionality necessary to define components. It is used together with [miew](https://www.npmjs.com/package/miew).
+
+## Installation
+
+The miew-react library is available as an [NPM](https://www.npmjs.com/) package. Install it either with NPM:
+
+```sh
+npm install --save miew-react
+```
+
+or [Yarn](https://yarnpkg.com/):
+
+```sh
+yarn add miew-react
+```
+
+## Usage
+
+```js
+import Viewer from 'miew-react';
+
+const MyComponent = () => {
+  return <Viewer />;
+};
+```
+
+### Props
+
+Imported component accepts the following optional props:
+
+- **onInit**: a callback function which recieves an instance of Miew, and called after initialization of Miew instance inside the Viewer component. With a help of this prop you can access Miew methods and fields.
+- **options**: an object containing representation settings for Miew and initial structure to be shown (all the fields are also optional, when not provided, default settings are applied)
+- **theme**: ignored
+
+## License
+
+[MIT](LICENSE.md)

packages/miew-react/__mocks__/miew.js

@@ -0,0 +1,10 @@
+export default class Miew {
+  init() {
+    return true;
+  }
+  term() {}
+  run() {}
+  load() {
+    return Promise.resolve('molecule');
+  }
+}

packages/miew-react/jest.config.js

@@ -0,0 +1,16 @@
+/* eslint-env node */
+module.exports = {
+  verbose: true,
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'https://localhost',
+  },
+  transform: {
+    '^.+\\.[jt]sx?$': ['babel-jest', { rootMode: 'upward' }],
+  },
+  moduleNameMapper: {
+    '^.+\\.[sp]?css$': 'babel-jest',
+  },
+  reporters: [['jest-simple-dot-reporter', { color: true }]],
+  coverageReporters: ['lcov', 'text-summary'],
+};

packages/miew-react/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "miew-react",
+  "version": "1.1.0-dev",
+  "description": "Miew - 3D Molecular Viewer (React component)",
+  "author": "EPAM Systems, Inc.",
+  "homepage": "https://github.com/epam/miew#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/epam/miew.git",
+    "directory": "packages/miew-react"
+  },
+  "bugs": {
+    "url": "https://github.com/epam/miew/issues"
+  },
+  "keywords": [
+    "molecule",
+    "visualizer",
+    "chemistry"
+  ],
+  "packageManager": "[email protected]",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*"
+  ],
+  "scripts": {
+    "ci": "run-s lint test-cover build",
+    "lint": "prettier . --check && eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint-fix": "prettier . --write; eslint . --ext js,jsx --fix",
+    "test": "jest",
+    "test-cover": "jest --coverage",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "miew": "workspace:^"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.20",
+    "@testing-library/react": "^16.0.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-simple-dot-reporter": "^1.0.5",
+    "ncp": "^2.0.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^7.3.3",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/miew-react/src/Viewer.jsx

@@ -0,0 +1,44 @@
+import Miew from 'miew';
+import React, { useLayoutEffect, useRef } from 'react';
+import styles from './Viewer.module.scss';
+import 'miew/dist/Miew.css';
+
+function createMiewRef(miewRef, options, onInit) {
+  if (!miewRef.current) {
+    const miew = new Miew(options);
+    if (miew.init()) {
+      miewRef.current = miew;
+      miew.run();
+
+      if (typeof onInit === 'function') {
+        onInit(miew);
+      }
+    }
+  }
+}
+
+function destroyMiewRef(miewRef) {
+  if (miewRef.current) {
+    miewRef.current.term();
+  }
+  miewRef.current = null;
+}
+
+// eslint-disable-next-line react/prop-types
+export default function Viewer({ onInit, options }) {
+  const miewRef = useRef();
+  const rootRef = useRef();
+
+  useLayoutEffect(() => {
+    // eslint-disable-next-line react/prop-types
+    const settings = { axes: false, fps: false, ...options?.settings };
+    createMiewRef(miewRef, { ...options, container: rootRef.current, settings }, onInit);
+    return () => destroyMiewRef(miewRef);
+  }, [onInit, options]);
+
+  return (
+    <div className={styles.root} ref={rootRef}>
+      Viewer
+    </div>
+  );
+}

packages/miew-react/src/Viewer.module.scss

@@ -0,0 +1,5 @@
+.root {
+  width: 100%;
+  height: 100%;
+  background-color: maroon; /* !!! debugging, don't commit !!! */
+}

packages/miew-react/src/Viewer.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import Viewer from './Viewer';
+
+describe('Viewer', () => {
+  it('renders "Viewer" text', () => {
+    render(<Viewer />);
+    expect(screen.getByText('Viewer')).toBeDefined();
+  });
+});

packages/miew-react/src/index.js

@@ -0,0 +1 @@
+export { default } from './Viewer';

packages/miew-react/types/Viewer.d.ts

@@ -0,0 +1,14 @@
+import { Miew } from 'miew';
+
+declare type ViewerProps = {
+  onInit?: (miew: Miew) => void;
+  options?: { [key: string]: any };
+  theme?: any;
+};
+
+declare const Viewer: ({
+  onInit,
+  options,
+  theme,
+}: ViewerProps) => import('@emotion/react/jsx-runtime').JSX.Element;
+export default Viewer;

packages/miew-react/types/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Viewer';