@configuratorware/configurator-frontendgui 1.28.0-beta.1 → 1.28.1

package/README.md

@@ -1,17 +1,38 @@
 # configurator-frontendgui
 
 ## 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:3001/identifier:softshell_designer_2d
+1. Install NodeJs `> 8.x`
+1. `npm install` - when using NodeJs `>= 13.x`: `npm install --legacy-peer-deps`
+1. `npm start`
+1. Open http://localhost:3001/identifier:softshell_designer_2d
 1. 'hostsByNodeEnv.development' in src/App/configuration.js is configurable  
     thus allowing to use e.g. your local api
 
+
 ## 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`
+1. `npm run build`
 
 ## Start storybook in project 
-1. `pnpm run storybook`
+1. `npm run storybook`
 1. `storybook starts on http://localhost:9001/` 
 
+## Structuring package.json
+- dependencies section
+    - contains several packages that are normally dev dependencies, but they are needed to compile the package when 
+      it's installed as a dependency in the client projects 
+      (see the [Usage as a dependency](#usage-as-a-dependency) section)
+    - **important:** if you add any package that's being used in the packaging process, it should be listed here 
+      (see the "package" scripts in [package.json](package.json))
+- devDependencies section
+    - all the packages that are needed for the development and deployment process listed here
+    - **important:** the packages that are needed for the packaging process should go into the dependencies section
+      because this is the only way to get them installed before running the install script in the owner project
+- peerDependencies section
+    - list of all the packages that are needed for the development and deployment process of the client projects 
+      that use this package as a dependency
+    - **important:** currently this list is minimal, it does not tell what to use for testing or linting, 
+      since the client project may contain only configuration data without any additional custom implementation
+      
 ## [Guidelines for automated testing](docs/TestingGuidelines.md)

package/babel.config.js

@@ -0,0 +1,46 @@
+module.exports = function(api) {
+    const presets = [
+        '@babel/preset-env',
+        '@babel/preset-typescript',
+        '@babel/preset-react', // Transpile React components to JavaScript
+    ];
+
+    const plugins = [
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-syntax-dynamic-import',
+
+        [
+            require.resolve('babel-plugin-module-resolver'),
+            {
+                root: ['./src'],
+            },
+        ],
+    ];
+
+    const ignore = [];
+
+    if (api.env('development')) {
+        plugins.push('react-hot-loader/babel'); // Enables React code to work with HMR.
+        api.cache(true);
+    } else if (api.env('production')) {
+        ignore.push(
+            '**/__tests__', // ignore the whole test directory
+            '**/*.test.js', // ignore test files only
+            '**/__mocks__'
+        );
+        api.cache(false);
+    } else if (api.env('test')) {
+        // makes possible to import ES modules (by transforming them to CommonJS)
+        // in node's current LTS version (12.x) ES modules are only experimental,
+        // for the current status check https://nodejs.org/docs/latest/api/esm.html#esm_modules_ecmascript_modules
+        plugins.push(['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }]);
+        api.cache(true);
+    }
+
+    return {
+        presets,
+        plugins,
+        ignore,
+    };
+};

package/package.json

@@ -1,20 +1,44 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.28.0-beta.1",
+  "version": "1.28.1",
   "license": "UNLICENSED",
   "private": false,
-  "main": "./index.js",
+  "main": "./lib/index.js",
+  "files": [
+    "App",
+    "Framework",
+    "Resources",
+    "src",
+    "scripts",
+    "babel.config.js",
+    "tsconfig.json",
+    "public/translations",
+    "public/favicon.ico",
+    "public/invoke.js",
+    "public/DesignerPreviewWidgetDemo.html",
+    "public/ConfigurationMessagingDemo.html"
+  ],
   "dependencies": {
+    "@babel/cli": "^7.13.14",
+    "@babel/core": "^7.13.14",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.28.0-beta.1",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
     "@hot-loader/react-dom": "^17.0.1",
-    "@material-ui/core": "^4.12.2",
+    "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@tweenjs/tween.js": "^17.6.0",
     "axios": "^0.21.1",
+    "babel-plugin-module-resolver": "^4.1.0",
     "clsx": "^1.1.1",
     "console-polyfill": "^0.3.0",
+    "cross-env": "^7.0.3",
     "css-element-queries": "^1.2.3",
     "fontfaceobserver": "^2.1.0",
     "hyphenated-de": "^1.2.0",
@@ -32,34 +56,73 @@
     "react-file-drop": "^0.2.8",
     "react-hot-loader": "^4.13.0",
     "react-hyphen": "^1.4.0",
-    "react-intersection-observer": "^8.32.0",
-    "react-redux": "^7.2.4",
+    "react-intersection-observer": "^8.31.0",
+    "react-redux": "^7.2.3",
     "react-redux-i18n": "^1.9.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.28.0-beta.1",
-    "redhotmagma-visualization": "1.28.0-beta.1",
-    "redux": "^4.1.0",
+    "redhotmagma-graphics-editor": "1.28.1",
+    "redhotmagma-visualization": "1.28.1",
+    "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
+    "rimraf": "^3.0.2",
     "showdown": "^1.9.1",
     "storage-factory": "^0.2.0",
     "typeface-roboto": "^1.1.13",
     "url-search-params-polyfill": "^8.1.1",
     "uuid": "^3.4.0"
   },
-  "peerDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.13.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
+  "devDependencies": {
+    "@sambego/storybook-state": "^2.0.1",
+    "@storybook/addon-actions": "^6.2.1",
+    "@storybook/addon-essentials": "^6.2.1",
+    "@storybook/addon-links": "^6.2.1",
+    "@storybook/builder-webpack5": "^6.2.1",
+    "@storybook/react": "^6.2.1",
+    "@types/jest": "^26.0.22",
+    "@types/lodash": "^4.14.168",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "css-loader": "^5.2.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "husky": "^3.1.0",
+    "jest": "^26.6.3",
+    "jest-environment-enzyme": "^7.1.2",
+    "jest-enzyme": "^7.1.2",
+    "jsdom": "^16.5.2",
+    "lint-staged": "^9.5.0",
+    "mini-css-extract-plugin": "^1.4.0",
+    "node-sass": "^5.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "prettier": "^1.19.1",
+    "redux-mock-store": "^1.5.4",
+    "resolve-url-loader": "^3.1.2",
+    "sass-loader": "^11.0.1",
+    "sinon": "^10.0.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "ts-jest": "^26.5.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.28.0",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "peerDependencies": {
     "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^1.4.0",
@@ -74,7 +137,26 @@
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
+    "start": "webpack serve --port 3001 --host 0.0.0.0",
+    "start:dev": "webpack-dev-server --port 3333 --config dev/webpack.config.js",
+    "build": "webpack --config webpack.production.config.js",
+    "package": "npm run package:clean && npm run package:compile && npm run package:copy && npm run package:after",
+    "package:clean": "rimraf ./lib",
+    "package:compile": "cross-env NODE_ENV=production babel ./src --out-dir ./lib --extensions .ts,.tsx,.js,.jsx",
+    "package:copy": "node ./scripts/cpPath.js ./src ./lib \"\\.(scss|eot|svg|ttf|woff|woff2|png)$\"",
+    "package:install-packages": "node ./packages/install.js",
+    "package:after": "node ./scripts/moveLibToPackageRoot.js",
     "copy-public": "node ./scripts/cpPublic.js",
-    "install": "npm run copy-public"
+    "install": "npm run package && npm run copy-public",
+    "build:test": "npm run build && http-server -P http://localhost:10030",
+    "build:profile": "webpack --config webpack.production.config.js --profile --json > stats.json",
+    "storybook": "start-storybook -p 6006",
+    "test": "jest",
+    "test:dev": "jest --watch",
+    "analyze": "npm run build:profile && webpack-bundle-analyzer stats.json ./public",
+    "lint": "eslint ./ --ext .js,.jsx",
+    "lint-ci": "eslint ./ --ext .js,.jsx -c .eslintrc.ci.json --quiet",
+    "lint-fix": "eslint ./ --ext .js,.jsx --fix",
+    "build-storybook": "build-storybook"
   }
-}
+}

package/public/ConfigurationMessagingDemo.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <style>
+        html, body {
+            margin: 0;
+            display: flex;
+        }
+    </style>
+    <meta charset="UTF-8">
+    <title>Test for configurator messaging</title>
+</head>
+<body>
+<script>
+    window.addEventListener('message', (event) => {
+        const data = event.data;
+        console.log('message posted from the embedded page', data);
+
+        const method = data.method;
+        const code = data.code;
+
+        switch (method) {
+            case 'configurationsaved': {
+                console.log('the user clicked the save button in the top right corner, and received the following code: ' + code);
+                // do other actions here
+                break;
+            }
+            case 'addtocart': {
+                console.log('the user clicked the "add to cart" button in the bottom right corner, and received the following code: ' + code);
+                // do other actions here
+                break;
+            }
+            default: {
+                console.log('unhandled or unknown method: ' + method);
+            }
+        }
+    });
+
+    function onButtonClicked() {
+        const options = document.getElementById('input_switch_options').value;
+        if (options) {
+            document.getElementById('configurator_page').contentWindow.postMessage({type: 'switch_options', options });
+        }
+    }
+</script>
+<iframe src="/identifier:softshell_creatordesigner_2d" id="configurator_page" style="width: 80vw; height: 100vh; border: 0;"></iframe>
+<div style="width: 20vw; height: 100vh;">
+
+    <textarea type="text" style="width: 17vw; height: 40vw; margin: 1vw" id="input_switch_options">
+        [{"identifier":"softshell_body","selectedoptions":[{"identifier":"softshell_navy","amount":1}]},{"identifier":"softshell_hood","selectedoptions":[{"identifier":"softshell_lime"}]}]
+    </textarea>
+    <button style="margin-left: 6vw" onclick="onButtonClicked()">Switch Options</button>
+</div>
+</body>
+</html>

package/scripts/cpPath.js

@@ -0,0 +1,135 @@
+/* eslint no-console: 0 */
+
+/**
+ * This script is made to copy specific files with their folder structure
+ *
+ * usage: node ./scripts/cpPath.js src dst [filterRegExp]
+ *
+ * @author boda@redhotmagma.de
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { mkDirDeep, walkDir } = require('./utils/fileSystem');
+
+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 copyWithParent(src, dst) {
+    if (typeof dst === 'function') {
+        dst = dst(src);
+    }
+    mkDirDeep(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(relativeSrc, content) {
+    const src = path.resolve(relativeSrc).replace(/\\/g, '/');
+    if (!content || !content.match) {
+        console.log('Strange file: ' + src);
+        return content;
+    }
+    const replaceImports = content.match(/@import ['"][^.~].+/g);
+    let output = content;
+    if (replaceImports) {
+        console.log('Resolving imports in sass file: ' + src);
+        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('  ' + pathToImport + ' -> ' + resolverPath);
+                const resolvedImport = replaceImports[i].replace(
+                    /(@import ['"])[^'"]+(.*)/,
+                    '$1' + resolverPath + '$2'
+                );
+                output = output.replace(replaceImports[i], resolvedImport);
+            }
+        }
+    }
+    return output;
+}
+
+console.log(
+    '\x1b[37m\x1b[42m%s\x1b[0m',
+    'Copying files from ' + src + ' to ' + dst + (reg ? ' with filter: ' + reg : ' without filter')
+);
+
+walkDir(src, function(f) {
+    if (reg === null || (reg && reg.test(f))) {
+        copyWithParent(f, function(path) {
+            return dst + path.replace(src, '');
+        });
+    }
+});

package/scripts/cpPublic.js

@@ -23,8 +23,8 @@
 
 const path = require('path');
 
-const { cpDirDeep, testMatchers } = require('@configuratorware/scripts/utils/fileSystem');
-const { isDependency } = require('@configuratorware/scripts/utils/process');
+const { cpDirDeep, testMatchers } = require('./utils/fileSystem');
+const { isDependency } = require('./utils/process');
 
 // keep existing files listed below
 const test = testMatchers.keepIfExists(/favicon\.ico$/);
@@ -38,5 +38,5 @@ if (isDependency()) {
     const src = path.resolve(__dirname, '../public');
     const dst = path.resolve(__dirname, '../../../../public');
 
-    cpDirDeep(src, dst, { testFn: test });
+    cpDirDeep(src, dst, test);
 }

package/scripts/getDefaultWebpackConfig.js

@@ -6,7 +6,7 @@ const path = require('path');
 const webpack = require('webpack');
 const fs = require('fs');
 
-const { version } = require('../package.json');
+const version = require('../package.json').version;
 
 function getConfig(mode, dirname) {
     try {
@@ -84,8 +84,7 @@ function getConfig(mode, dirname) {
                     'process.env.FRONTENDGUI_VERSION': JSON.stringify(version),
                 });
 
-                return {
-                    ...commonConfig,
+                return Object.assign({}, commonConfig, {
                     mode: 'development',
                     cache: true,
                     devtool: 'eval-cheap-module-source-map',
@@ -133,21 +132,20 @@ function getConfig(mode, dirname) {
                     },
                     plugins: [env, new webpack.HotModuleReplacementPlugin()],
                     resolve: Object.assign({}, commonConfig.resolve, {
-                        ...commonConfig.resolve,
                         alias: {
-                            ...commonConfig.resolve.alias,
-                            'react-dom': path.resolve(dirname, 'node_modules/@hot-loader/react-dom'),
+                            'react-dom': '@hot-loader/react-dom',
                         },
                     }),
                     optimization: {
                         moduleIds: 'named',
                     },
-                };
+                });
             }
 
             case 'prod': {
                 const TerserPlugin = require('terser-webpack-plugin');
                 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+                const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
                 const env = new webpack.DefinePlugin({
                     'process.env.NODE_ENV': JSON.stringify('production'),
@@ -158,6 +156,8 @@ function getConfig(mode, dirname) {
                     filename: 'bundle.css',
                 });
 
+                const optimizeCss = new OptimizeCSSAssetsPlugin({});
+
                 const minimizer = new TerserPlugin({
                     parallel: true,
                     terserOptions: {
@@ -167,8 +167,7 @@ function getConfig(mode, dirname) {
                     },
                 });
 
-                return {
-                    ...commonConfig,
+                return Object.assign({}, commonConfig, {
                     mode: 'production',
                     devtool: 'source-map',
                     devServer: {
@@ -205,11 +204,11 @@ function getConfig(mode, dirname) {
                             },
                         ].concat(commonRules),
                     },
-                    plugins: [env, extractSass],
+                    plugins: [env, extractSass, optimizeCss],
                     optimization: {
                         minimizer: [minimizer],
                     },
-                };
+                });
             }
         }
     } catch (e) {

package/scripts/moveLibToPackageRoot.js

@@ -0,0 +1,40 @@
+/* eslint no-console: 0 */
+
+/**
+ * This script is made to copy the compiled source from lib to the root folder
+ *
+ * Runs only when installing this package as a dependency in client projects
+ *
+ * usage: node ./scripts/moveLibToPackageRoot.js
+ *
+ * @author boda@redhotmagma.de
+ */
+
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+
+const { isDependency } = require('./utils/process');
+const { walkDir } = require('./utils/fileSystem');
+
+if (isDependency()) {
+    console.log('\x1b[37m\x1b[42m%s\x1b[0m', 'Moving content of lib into the root package directory');
+
+    const src = path.resolve('./lib');
+    const dst = path.resolve('./');
+    walkDir(src, function(file) {
+        const relativePath = file.replace(src, '');
+        const tp = path.resolve(dst + relativePath);
+        if (fs.statSync(file).isFile()) {
+            fs.createReadStream(file).pipe(fs.createWriteStream(tp));
+        } else {
+            fs.mkdirSync(tp);
+        }
+    });
+
+    rimraf(src, function(err) {
+        if (err) {
+            console.log('Error occured while clearing the directory: ' + src, err);
+        }
+    });
+}

package/scripts/rmDir.js

@@ -0,0 +1,29 @@
+/* eslint no-console: 0 */
+
+const fs = require('fs');
+
+let dir = process.argv[2];
+
+if (!dir) {
+    throw new Error('src must be an existing directory');
+}
+
+function rmDir(dirPath) {
+    try {
+        const files = fs.readdirSync(dirPath);
+        if (files.length > 0) {
+            for (let f of files) {
+                const filePath = dirPath + '/' + f;
+                if (fs.statSync(filePath).isFile()) fs.unlinkSync(filePath);
+                else rmDir(filePath);
+            }
+        }
+        fs.rmdirSync(dirPath);
+    } catch (e) {
+        return;
+    }
+}
+
+console.log('\x1b[32m%s\x1b[0m', 'Removing dir: ' + dir);
+
+rmDir(dir);