@configuratorware/configurator-admingui 1.28.0-beta.2 → 1.28.2

package/README.md

@@ -1,9 +1,10 @@
 # configurator-admingui
 
-## Setup for development
-1. Follow the "preparation", "install" and "start development" steps in frontend/README.md
-1. Open the core app in the browser: http://localhost:3000
+## Setup for Development
+1. Install NodeJs `> 8.x`
+1. `npm install` - when using NodeJs `>= 13.x`: `npm install --legacy-peer-deps`
+1. `npm start`
 
 ## Ready to build the artifacts
-- run `pnpm build` from project scope (does not build workspace dependencies automatically)
-- or run `pnpm build` from workspace root
+1. `npm install` - when using NodeJs `>= 13.x`: `npm install --legacy-peer-deps`
+1. `npm run build`

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('./scripts/getDefaultBabelConfig').getConfig();

package/package.json

@@ -1,64 +1,128 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.28.0-beta.2",
+  "version": "1.28.2",
   "license": "UNLICENSED",
   "private": false,
+  "files": [
+    "src",
+    "lib",
+    "scripts",
+    "public/favicon.ico",
+    "babel.config.js"
+  ],
+  "exports": {
+    ".": "./lib/index.js",
+    "./": "./lib/",
+    "./scripts/": "./scripts/"
+  },
+  "devDependencies": {
+    "@testing-library/cypress": "^7.0.4",
+    "@types/jest": "^24.0.6",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "cypress": "^6.6.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.9.1",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^2.0.1",
+    "husky": "^3.0.5",
+    "jest": "^24.8.0",
+    "jest-environment-enzyme": "^7.0.2",
+    "jest-enzyme": "^7.0.2",
+    "jsdom": "^15.1.0",
+    "lint-staged": "^9.2.5",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.14.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "prettier": "^1.17.1",
+    "react-addons-test-utils": "^15.6.2",
+    "react-test-renderer": "^16.7.0",
+    "rimraf": "^2.6.3",
+    "sass-loader": "^7.1.0",
+    "sinon": "^7.2.2",
+    "start-server-and-test": "^1.12.0",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.2.1",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@hot-loader/react-dom": "^16.14.0",
-    "@material-ui/core": "^3.9.4",
-    "@material-ui/icons": "^3.0.2",
-    "@tweenjs/tween.js": "^17.6.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "@hot-loader/react-dom": "^16.11.0",
+    "@material-ui/core": "^3.8.2",
+    "@material-ui/icons": "^3.0.1",
+    "@tweenjs/tween.js": "^17.3.0",
     "array-move": "^3.0.1",
     "axios": "^0.21.1",
     "clsx": "^1.1.1",
-    "css-element-queries": "^1.2.3",
-    "downshift": "^3.4.8",
-    "lodash": "^4.17.21",
+    "cross-env": "^5.2.0",
+    "css-element-queries": "^1.1.1",
+    "downshift": "^3.1.12",
+    "file-loader": "^3.0.1",
+    "lodash": "^4.17.20",
     "monaco-editor": "^0.20.0",
-    "monaco-editor-webpack-plugin": "^1.9.1",
-    "prop-types": "^15.7.2",
-    "qs": "^6.10.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "monaco-editor-webpack-plugin": "^1.9.0",
+    "prop-types": "^15.6.2",
+    "qs": "^6.6.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "react-file-drop": "^0.2.8",
-    "react-hot-loader": "^4.13.0",
-    "react-i18nify": "^1.11.18",
+    "react-hot-loader": "^4.6.3",
+    "react-i18nify": "^1.11.14",
     "react-mde": "^11.5.0",
-    "react-redux": "^7.2.4",
+    "react-redux": "^7.2.3",
     "react-redux-i18n": "^1.9.3",
-    "react-router": "^3.2.6",
-    "react-sortable-hoc": "^1.11.0",
-    "redhotmagma-visualization": "1.28.0-beta.2",
-    "redux": "^4.1.0",
+    "react-router": "^3.0.2",
+    "react-sortable-hoc": "^1.3.1",
+    "redhotmagma-visualization": "1.28.2",
+    "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
     "showdown": "^1.9.1",
-    "url-search-params-polyfill": "^5.1.0",
+    "url-loader": "^1.1.2",
+    "url-search-params-polyfill": "^5.0.0",
     "validate.js": "^0.12.0"
   },
   "peerDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
+    "terser-webpack-plugin": "^1.2.1",
     "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.2.1",
-    "url-loader": "^1.1.2"
+    "css-loader": "^2.1.0",
+    "node-sass": "^4.11.0"
   },
   "scripts": {
-    "copy-public": "node ./scripts/cpFavicon.js",
-    "install": "npm run copy-public"
+    "start": "webpack-dev-server --port 3000",
+    "build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 webpack --config webpack.production.config.js",
+    "test": "jest --no-cache --verbose",
+    "package": "npm run package:clean && npm run package:compile && npm run package:copy",
+    "package:clean": "rimraf ./lib",
+    "package:compile": "cross-env NODE_ENV=production babel ./src --out-dir ./lib",
+    "package:copy": "node ./scripts/cpFavicon.js && node ./scripts/cpPath.js ./src ./lib \"\\.(scss|eot|svg|ttf|woff|woff2)$\"",
+    "install": "npm run package",
+    "lint": "eslint ./ --ext .js,.jsx",
+    "lint-ci": "eslint ./ --ext .js,.jsx -c .eslintrc.ci.json --quiet",
+    "lint-fix": "eslint ./ --ext .js,.jsx --fix",
+    "cy:run": "cypress run",
+    "cy:ci": "start-server-and-test start http-get://localhost:3000 cy:run",
+    "cy:verify": "cypress verify",
+    "cy:info": "cypress info",
+    "cy:cache:list": "cypress cache list"
   }
-}
+}

package/scripts/cpPath.js

@@ -0,0 +1,152 @@
+/* eslint-disable no-console */
+
+/**
+ * This script is created to copy specific files with their folder structure
+ * usage: node copyWithFolder.js src dst [filterRegExp]
+ * @author boda@redhotmagma.de
+ */
+
+const fs = require('fs');
+
+let src = null;
+let dst = null;
+let reg = null;
+
+process.argv.forEach(function(val, index) {
+    switch (index) {
+        case 2:
+            src = val;
+            break;
+        case 3:
+            dst = val;
+            break;
+        case 4:
+            reg = new RegExp(val);
+    }
+});
+
+if (!src || !fs.existsSync(src)) {
+    throw new Error('src must be an existing directory');
+}
+if (!dst || !fs.existsSync(dst)) {
+    throw new Error('dst must be an existing directory');
+}
+
+function walk(path, cb) {
+    try {
+        const files = fs.readdirSync(path);
+        for (const f of files) {
+            const cf = path + '/' + f;
+            const s = fs.lstatSync(cf);
+            cb(cf);
+            s.isDirectory() && walk(cf, cb);
+        }
+    } catch (e) {
+        return;
+    }
+}
+
+function copyWithParent(src, dst) {
+    if (typeof dst === 'function') {
+        dst = dst(src);
+    }
+    createDirDeep(dst.replace(/\/[^/]+$/, ''));
+    console.log(src + ' -> ' + dst);
+    const fileExt = src.replace(/.+\.([\w]+)$/, '$1');
+    switch (fileExt) {
+        case 'scss':
+            fs.readFile(src, 'utf8', function read(err, data) {
+                if (err) {
+                    throw err;
+                }
+                const modifiedContent = prepareSassFile(src, data);
+                fs.writeFile(dst, modifiedContent, 'utf8', function write(err) {
+                    if (err) {
+                        throw err;
+                    }
+                });
+            });
+            break;
+        default:
+            fs.createReadStream(src).pipe(fs.createWriteStream(dst));
+    }
+}
+
+function prepareSassFile(src, content) {
+    if (!content || !content.match) {
+        return content;
+    }
+    const replaceImports = content.match(/@import ['"][^.~].+/g);
+    let output = content;
+    if (replaceImports) {
+        const pathUp =
+            '..' +
+            src
+                .match(/src\/.+/)[0]
+                .match(/\//g)
+                .splice(1)
+                .join('..');
+        for (let i in replaceImports) {
+            const pathToImport = replaceImports[i].replace(/@import ['"][/]?([^'"]+).*/, '$1');
+            const resolverPath = pathUp + pathToImport;
+
+            const srcPathDir = src.replace(/\/[^/]+$/, '/');
+            const relativeImportPath = srcPathDir + pathToImport;
+            const rootImportPath = srcPathDir + resolverPath;
+
+            let resolveRootImport = false;
+            try {
+                fs.accessSync(relativeImportPath);
+            } catch (err) {
+                try {
+                    fs.accessSync(relativeImportPath + '.scss');
+                } catch (err) {
+                    try {
+                        fs.accessSync(rootImportPath);
+                        resolveRootImport = true;
+                    } catch (err) {
+                        try {
+                            fs.accessSync(rootImportPath + '.scss');
+                            resolveRootImport = true;
+                        } catch (err) {
+                            throw 'Cannot resolve import path: ' + replaceImports[i] + ' in ' + src;
+                        }
+                    }
+                }
+            }
+            if (resolveRootImport) {
+                console.log('Resolved root import in ' + src + ': ' + pathToImport + ' -> ' + resolverPath);
+                const resolvedImport = replaceImports[i].replace(
+                    /(@import ['"])[^'"]+(.*)/,
+                    '$1' + resolverPath + '$2'
+                );
+                output = output.replace(replaceImports[i], resolvedImport);
+            }
+        }
+    }
+    return output;
+}
+
+function createDirDeep(path) {
+    const ps = path.split('/');
+    let dir = ps.splice(0, 1);
+    for (const p of ps) {
+        dir = [dir, p].join('/');
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir);
+        }
+    }
+}
+
+console.log(
+    '\x1b[32m%s\x1b[0m',
+    'Copying files from ' + src + ' to ' + dst + (reg ? ' with filter: ' + reg : ' without filter')
+);
+
+walk(src, function(f) {
+    if (reg === null || (reg && reg.test(f))) {
+        copyWithParent(f, function(path) {
+            return dst + path.replace(src, '');
+        });
+    }
+});

package/scripts/getDefaultWebpackConfig.js

@@ -27,7 +27,7 @@ const moduleRules = [
     },
     {
         test: /\.ttf$/,
-        loader: 'url-loader?limit=16384&name=fonts/[name].[hash].[ext]',
+        loader: 'url-loader?limit=16384&name=images/[name].[hash].[ext]',
     },
 ];
 

package/scripts/updateLocalPackages.js

@@ -0,0 +1,68 @@
+/* eslint no-console: 0 */
+
+/**
+ * A tool to copy local modifications of local packages (graphics editor and visualization component)
+ * over to the node_modules of this project in order to test them in the integrated environment.
+ * This script is made only for development purposes, does not replace the package version update in package.json.
+ *
+ * It uses the configuration file localPackages.json (should be placed in the project root)
+ * Example for localPackages.json:
+ * {
+ *   "visualization": {                      // alias of the package
+ *     "path": "../visualization_component", // location in the local file system, relative to the project path
+ *     "name": "redhotmagma-visualization"   // name of the package in package.json
+ *   },
+ *   ...
+ * }
+ * Usage of the script:
+ * node .\scripts\updateLocalPackages.js               // update all local dependencies listed in localPackages.json
+ * node .\scripts\updateLocalPackages.js visualization // update only a single package identified by its alias
+ *
+ * @author boda@redhotmagma.de (2019.09.24)
+ */
+
+const { resolve } = require('path');
+const { cpDirDeep } = require('./utils/fileSystem');
+
+const _alias = process.argv[2];
+
+try {
+    let items = require('../localPackages.json');
+    if (_alias && _alias.length) {
+        const selectedItem = items[_alias];
+        if (!selectedItem) {
+            console.log('Package not found:', _alias);
+            console.log('Available packages:');
+            console.table(items);
+            process.exit(0);
+        } else {
+            items = { [_alias]: selectedItem };
+        }
+    }
+    // eslint-disable-next-line no-unused-vars
+    for (let [alias, { path, name }] of Object.entries(items)) {
+        console.log(`Updating package: ${name} -> ${path}`);
+        updatePackage({ name, path });
+    }
+} catch (e) {
+    console.error(e);
+}
+
+function updatePackage(options = {}) {
+    const { name, path, buildScript = 'npm run package', libDir = 'lib' } = options;
+    const cwd = process.cwd();
+    const projectPath = resolve(cwd, path);
+    const packagePath = resolve(cwd, 'node_modules', name);
+    try {
+        const { exec } = require('child_process');
+        const childProcess = exec(buildScript, { cwd: projectPath });
+        childProcess.stdout.pipe(process.stdout);
+        childProcess.stderr.pipe(process.stderr);
+        childProcess.on('close', code => {
+            console.log(`child process exited with code ${code}`);
+            cpDirDeep(resolve(projectPath, libDir), packagePath);
+        });
+    } catch (e) {
+        console.error(e);
+    }
+}

package/src/App/Main.js

@@ -13,6 +13,7 @@ import LocaleSwitch from '../Components/LocaleSwitch';
 import ProfileButton from '../Components/ProfileButton';
 import AppBar from '../Components/AppBar';
 import LicenseInfo from '../Components/LicenseInfo';
+import networkConfig from './Config/network';
 
 const styles = {
     toolbarButtonContainer: {
@@ -51,7 +52,7 @@ class Main extends Component {
             window.addEventListener('beforeunload', function(e) {
                 // the custom message won't be shown according to this:
                 // https://www.chromestatus.com/features/5349061406228480
-                const confirmationMessage = 'Do you want to leave this site?';
+                var confirmationMessage = 'Do you want to leave this site?';
                 e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
                 return confirmationMessage; // Gecko, WebKit, Chrome <34
             });