Merge branch 'master' of https://github.com/epam/ketcher into 197-att…

…achment-points-should-be-within-r-group-brackets

.eslintrc.json

@@ -7,8 +7,11 @@
     "plugin:@typescript-eslint/recommended",
     "prettier"
   ],
+  "plugins": ["prettier"],
   "parser": "@typescript-eslint/parser",
   "rules": {
+    "linebreak-style": ["error", "unix"],
+    "prettier/prettier": "error",
     "@typescript-eslint/no-non-null-assertion": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "object-shorthand": "error",
@@ -24,6 +27,8 @@
     "@typescript-eslint/no-use-before-define": [
       "error",
       { "functions": false, "typedefs": false }
-    ]
+    ],
+    "no-duplicate-imports": "error",
+    "no-alert": "error"
   }
 }

.github/CODEOWNERS

@@ -0,0 +1 @@
+/ketcher-autotests/ @AleksandraSmolianinova @Ustianskii @Vehemen @Zhirnoff

.github/pull_request_template.md

@@ -10,3 +10,4 @@
 - [ ] branch name doesn't contain '#'
 - [ ] PR is linked with the issue
 - [ ] base branch (master or release/xx) is correct
+- [ ] task status changed to "Code review"

.gitignore

@@ -8,6 +8,15 @@ node_modules
 # testing
 /coverage
 
+# autotests
+.env
+/ketcher-autotests/.env
+/ketcher-autotests/test-results/
+/ketcher-autotests/playwright-report/
+/ketcher-autotests/playwright/.cache/
+/ketcher-autotests/**/*win32.png
+/ketcher-autotests/**/*darwin.png
+
 # production
 build
 dist
@@ -23,6 +32,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.vscode
 /.idea
 
 .pnp.*

.prettierrc.js

@@ -1,4 +1,6 @@
 module.exports = {
   ...require('prettier-config-standard'),
-  bracketSameLine: false
-}
+  bracketSameLine: false,
+  semi: true,
+  trailingComma: 'all',
+};

example/config/webpack.config.js

@@ -2,38 +2,38 @@ const {
   override,
   addBundleVisualizer,
   addWebpackModuleRule,
-  addWebpackPlugin
-} = require('customize-cra')
-const webpack = require('webpack')
-const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
-const GitRevisionPlugin = require('git-revision-webpack-plugin')
+  addWebpackPlugin,
+} = require('customize-cra');
+const webpack = require('webpack');
+const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
+const GitRevisionPlugin = require('git-revision-webpack-plugin');
 
-const gitRevisionPlugin = new GitRevisionPlugin()
-const applicationVersion = gitRevisionPlugin.version().split('-')[0]
+const gitRevisionPlugin = new GitRevisionPlugin();
+const applicationVersion = gitRevisionPlugin.version().split('-')[0];
 const envVariables = {
   MODE: process.env.MODE,
   API_PATH: process.env.REACT_APP_API_PATH,
   ENABLE_POLYMER_EDITOR: !!process.env.ENABLE_POLYMER_EDITOR,
-  KETCHER_ENABLE_REDUX_LOGGER: JSON.stringify(false)
-}
+  KETCHER_ENABLE_REDUX_LOGGER: JSON.stringify(false),
+};
 
 module.exports = override(
   addBundleVisualizer({}, true),
   addWebpackModuleRule({
     test: /\.js$/,
     enforce: 'pre',
     loader: 'source-map-loader',
-    exclude: /node_modules/
+    exclude: /node_modules/,
   }),
   addWebpackPlugin(new webpack.EnvironmentPlugin(envVariables)),
   addWebpackPlugin(
     new HtmlReplaceWebpackPlugin([
       {
         pattern: '@@version',
-        replacement: applicationVersion
-      }
-    ])
-  )
-)
+        replacement: applicationVersion,
+      },
+    ]),
+  ),
+);
 
-module.exports.envVariables = envVariables
+module.exports.envVariables = envVariables;

example/package.json

@@ -57,7 +57,7 @@
     "@welldone-software/why-did-you-render": "^4.3.1",
     "cross-env": "^7.0.3",
     "customize-cra": "^1.0.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.44.0",
     "git-revision-webpack-plugin": "^3.0.6",
     "html-replace-webpack-plugin": "^2.5.6",
     "npm-run-all": "^4.1.5",

example/src/App.tsx

@@ -1,55 +1,55 @@
-import 'ketcher-react/dist/index.css'
+import 'ketcher-react/dist/index.css';
 
-import { ButtonsConfig, Editor } from 'ketcher-react'
+import { ButtonsConfig, Editor } from 'ketcher-react';
 import {
   Ketcher,
   RemoteStructServiceProvider,
-  StructServiceProvider
-} from 'ketcher-core'
-import { ErrorModal } from './ErrorModal'
-import { PolymerToggler } from './PolymerToggler'
-import { useState } from 'react'
+  StructServiceProvider,
+} from 'ketcher-core';
+import { ErrorModal } from './ErrorModal';
+import { PolymerToggler } from './PolymerToggler';
+import { useState } from 'react';
 
 const getHiddenButtonsConfig = (): ButtonsConfig => {
-  const searchParams = new URLSearchParams(window.location.search)
-  const hiddenButtons = searchParams.get('hiddenControls')
+  const searchParams = new URLSearchParams(window.location.search);
+  const hiddenButtons = searchParams.get('hiddenControls');
 
-  if (!hiddenButtons) return {}
+  if (!hiddenButtons) return {};
 
   return hiddenButtons.split(',').reduce((acc, button) => {
-    if (button) acc[button] = { hidden: true }
+    if (button) acc[button] = { hidden: true };
 
-    return acc
-  }, {})
-}
+    return acc;
+  }, {});
+};
 
 let structServiceProvider: StructServiceProvider =
   new RemoteStructServiceProvider(
-    process.env.API_PATH || process.env.REACT_APP_API_PATH
-  )
+    process.env.API_PATH || process.env.REACT_APP_API_PATH,
+  );
 if (process.env.MODE === 'standalone') {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { StandaloneStructServiceProvider } = require('ketcher-standalone')
+  const { StandaloneStructServiceProvider } = require('ketcher-standalone');
   structServiceProvider =
-    new StandaloneStructServiceProvider() as StructServiceProvider
+    new StandaloneStructServiceProvider() as StructServiceProvider;
 }
 
-const enablePolymerEditor = process.env.ENABLE_POLYMER_EDITOR === 'true'
+const enablePolymerEditor = process.env.ENABLE_POLYMER_EDITOR === 'true';
 
-type PolymerType = () => JSX.Element | null
+type PolymerType = () => JSX.Element | null;
 
-let PolymerEditor: PolymerType = () => null
+let PolymerEditor: PolymerType = () => null;
 if (enablePolymerEditor) {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { Editor } = require('ketcher-polymer-editor-react')
-  PolymerEditor = Editor as PolymerType
+  const { Editor } = require('ketcher-polymer-editor-react');
+  PolymerEditor = Editor as PolymerType;
 }
 
 const App = () => {
-  const hiddenButtonsConfig = getHiddenButtonsConfig()
-  const [hasError, setHasError] = useState(false)
-  const [errorMessage, setErrorMessage] = useState('')
-  const [showPolymerEditor, setShowPolymerEditor] = useState(false)
+  const hiddenButtonsConfig = getHiddenButtonsConfig();
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [showPolymerEditor, setShowPolymerEditor] = useState(false);
 
   return showPolymerEditor ? (
     <>
@@ -60,38 +60,38 @@ const App = () => {
     <>
       <Editor
         errorHandler={(message: string) => {
-          setHasError(true)
-          setErrorMessage(message.toString())
+          setHasError(true);
+          setErrorMessage(message.toString());
         }}
         buttons={hiddenButtonsConfig}
         staticResourcesUrl={process.env.PUBLIC_URL}
         structServiceProvider={structServiceProvider}
         onInit={(ketcher: Ketcher) => {
-          window.ketcher = ketcher
+          window.ketcher = ketcher;
           window.parent.postMessage(
             {
-              eventType: 'init'
+              eventType: 'init',
             },
-            '*'
-          )
+            '*',
+          );
         }}
       />
       {enablePolymerEditor && <PolymerToggler toggle={setShowPolymerEditor} />}
       {hasError && (
         <ErrorModal
           message={errorMessage}
           close={() => {
-            setHasError(false)
+            setHasError(false);
 
             // Focus on editor after modal is closed
             const cliparea: HTMLElement | null =
-              document.querySelector('.cliparea')
-            cliparea?.focus()
+              document.querySelector('.cliparea');
+            cliparea?.focus();
           }}
         />
       )}
     </>
-  )
-}
+  );
+};
 
-export default App
+export default App;

example/src/ErrorModal/ErrorModal.tsx

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
-import styles from './ErrorModal.module.css'
+import styles from './ErrorModal.module.css';
 
 interface ErrorModalProps {
-  message: string
-  close: () => void
+  message: string;
+  close: () => void;
 }
 
 const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
@@ -30,15 +30,15 @@ const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
           <button
             className={styles.ok}
             onClick={() => {
-              close()
+              close();
             }}
           >
             Close
           </button>
         </footer>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export { ErrorModal }
+export { ErrorModal };

example/src/ErrorModal/index.ts

@@ -1,2 +1,2 @@
-import { ErrorModal } from './ErrorModal'
-export { ErrorModal }
+import { ErrorModal } from './ErrorModal';
+export { ErrorModal };

example/src/PolymerToggler/PolymerToggler.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  ***************************************************************************/
 
-import styles from './PolymerToggler.module.css'
+import styles from './PolymerToggler.module.css';
 
 export interface PolymerTogglerProps {
-  toggle: (isEnabled: boolean) => void
+  toggle: (isEnabled: boolean) => void;
 }
 
 const PolymerToggler = ({ toggle }: PolymerTogglerProps): JSX.Element => {
@@ -26,7 +26,7 @@ const PolymerToggler = ({ toggle }: PolymerTogglerProps): JSX.Element => {
       <input type="checkbox" onChange={(e) => toggle(e.target.checked)} />
       <span className={styles.slider} />
     </label>
-  )
-}
+  );
+};
 
-export { PolymerToggler }
+export { PolymerToggler };

example/src/PolymerToggler/index.ts

@@ -1 +1 @@
-export * from './PolymerToggler'
+export * from './PolymerToggler';

example/src/index.tsx

@@ -1,10 +1,10 @@
-import 'react-app-polyfill/ie11'
-import 'react-app-polyfill/stable'
-import 'url-search-params-polyfill'
-import './index.css'
-import { createRoot } from 'react-dom/client'
-import App from './App'
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+import 'url-search-params-polyfill';
+import './index.css';
+import { createRoot } from 'react-dom/client';
+import App from './App';
 
-const container = document.getElementById('root')
-const root = createRoot(container as HTMLElement)
-root.render(<App />)
+const container = document.getElementById('root');
+const root = createRoot(container as HTMLElement);
+root.render(<App />);

example/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom/extend-expect';

example/src/typing.d.ts

@@ -1,25 +1,25 @@
-import { Ketcher } from 'ketcher-core'
+import { Ketcher } from 'ketcher-core';
 
 declare global {
   export interface IMessage {
-    eventType: string
-    data?: unknown
+    eventType: string;
+    data?: unknown;
   }
   export interface Window {
     postMessage(
       message: IMessage,
       targetOrigin: string,
-      transfer?: Transferable[] | undefined
-    ): void
+      transfer?: Transferable[] | undefined,
+    ): void;
 
-    ketcher?: Ketcher
+    ketcher?: Ketcher;
   }
 
   declare namespace NodeJS {
     export interface ProcessEnv {
-      API_PATH?: string
-      REACT_APP_API_PATH: string
-      PUBLIC_URL: string
+      API_PATH?: string;
+      REACT_APP_API_PATH: string;
+      PUBLIC_URL: string;
     }
   }
 }