@configuratorware/configurator-frontendgui 1.27.3-beta.1 → 1.27.3-beta.5

package/src/App/Screens/Configurator/Containers/Confirm.js

@@ -1,5 +1,5 @@
 import containerConnect from 'Framework/ComponentContainer';
-import Confirm from '../Components/Confirm/index';
+import Confirm from '../Components/Confirm';
 import { hideConfirm } from '../../../Reducers/Confirm/Actions';
 
 const mapStateToProps = ({ confirm }) => {

package/src/App/Screens/Configurator/Screen.js

@@ -11,7 +11,7 @@ import * as uiActions from 'App/Reducers/UI/Actions';
 import Error from '../../Shared/Containers/Error';
 import ErrorPage from '../../Error/ProductionErrorPage';
 import AlertMessages from 'App/Shared/Containers/AlertMessages';
-import LandscapeInformation from '../Configurator/Components/LandscapeInformation';
+import LandscapeInformation from './Components/LandscapeInformation';
 import Confirm from './Containers/Confirm';
 import SaveConfiguration from 'App/Shared/Containers/SaveConfiguration';
 import SendEmail from 'App/Shared/Containers/SendEmail';

package/src/App/Screens/Configurator/ThemeProvider.js

@@ -84,6 +84,7 @@ const defaultTheme = {
             lighter: '#C4C4C4',
         },
     },
+    tapHighlightColor: 'transparent',
     overrides: {
         MuiFormLabel: {
             root: {

package/src/App/Services/__tests__/DesignDataService.selectViewForComponent.test.js

@@ -178,57 +178,4 @@ describe('DesignDataService.selectViewForComponent', () => {
 
         expect(srv.selectDesignView).toHaveBeenCalledWith('front_view', { saveLast: false });
     });
-
-    it('calls selectDesignView with the identifier of lastSelectedDesignView if no creatorView is referenced by the selected component', () => {
-        const componentWithNoCreatorView = {
-            identifier: 'id1',
-            title: 'title1',
-            creatorView: null,
-        };
-
-        ServiceLocator.provide(
-            new (class StoreService {
-                static serviceName = 'StoreService';
-                state = {
-                    designArea: {
-                        filteredDesignAreas: mockDesignAreas,
-                        selectedDesignArea: {},
-                    },
-                    designView: {
-                        designViews: [
-                            { identifier: 'front_view' },
-                            { identifier: 'side_view' },
-                            { identifier: 'top_view' },
-                        ],
-                        selectedDesignView: {
-                            identifier: 'side_view',
-                        },
-                        lastSelectedDesignView: {
-                            identifier: 'top_view',
-                        },
-                    },
-                    configurator: {
-                        configuration: {
-                            optionclassifications: [
-                                componentWithNoCreatorView,
-                                {
-                                    identifier: 'id2',
-                                    title: 'title2',
-                                    creatorView: { identifier: 'side_view' },
-                                },
-                            ],
-                        },
-                    },
-                };
-                dispatch = v => v;
-            })()
-        );
-        const srv = new DesignDataService();
-
-        srv.selectDesignView = jest.fn();
-
-        srv.selectViewForComponent(componentWithNoCreatorView);
-
-        expect(srv.selectDesignView).toHaveBeenCalledWith('top_view', { saveLast: false });
-    });
 });

package/src/App/Shared/Containers/AlertMessages.js

@@ -1,5 +1,5 @@
 import { containerConnect } from 'Framework/ComponentContainer';
-import AlertDialog from '../Components/AlertDialog/index';
+import AlertDialog from '../Components/AlertDialog';
 import { Services } from 'App/ServiceLocator';
 import { t } from 'Framework/i18n';
 

package/src/App/Shared/Containers/AmountPrice/index.test.js

@@ -2,7 +2,7 @@ import AmountPrice, {
     createAmountPropsFromState,
     createPricePropsFromState,
     showProductVariantsForItem,
-} from '../AmountPrice';
+} from './index';
 import mountWithState from 'Utils/Test/mountWithState';
 import ServiceLocator from 'App/ServiceLocator';
 

package/src/App/Shared/Containers/Error.js

@@ -1,5 +1,5 @@
 import { containerConnect } from 'Framework/ComponentContainer';
-import AlertDialog from '../Components/AlertDialog/index';
+import AlertDialog from '../Components/AlertDialog';
 import { Services } from 'App/ServiceLocator';
 import { t } from 'Framework/i18n';
 

package/src/App/Shared/Containers/SaveConfiguration.js

@@ -1,7 +1,7 @@
 import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
 import containerConnect from 'Framework/ComponentContainer';
 import { Services } from 'App/ServiceLocator';
-import SaveConfiguration from '../Components/SaveConfiguration/index';
+import SaveConfiguration from '../Components/SaveConfiguration';
 import { getShareUrl } from '../../Reducers/Configurator/Selectors';
 
 const mapStateToProps = ({ ui, configurator }) => ({

package/src/App/Translations.js

@@ -1,5 +1,5 @@
 import { use } from 'Framework/i18n';
-import { isProduction } from '../App/configuration';
+import { isProduction } from './configuration';
 export async function initLanguage(lang) {
     // ensure that the filename always has an underscore and no dash
     const fileKey = lang.replace('-', '_');

package/src/Framework/Components/Carousel/index.js

@@ -4,6 +4,14 @@ import _ from 'lodash';
 
 import './Styles.scss';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = theme => ({
+    carousel: {
+        tapHighlightColor: theme.tapHighlightColor,
+    },
+});
 
 class Carousel extends React.Component {
     static propTypes = {
@@ -131,18 +139,18 @@ class Carousel extends React.Component {
         }
     };
 
-    swiped = (e, deltaX, deltaY) => {
+    swiped = e => {
         // if it's vertical deltaY should be the bigger
-        if (this.props.vertical && Math.abs(deltaY) >= Math.abs(deltaX)) {
-            if (deltaY > 0) {
+        if (this.props.vertical && Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
+            if (e.deltaY > 0) {
                 this.next();
             } else {
                 this.prev();
             }
         }
         // if it's not vertical deltaX should be the bigger
-        else if (!this.props.vertical && Math.abs(deltaX) >= Math.abs(deltaY)) {
-            if (deltaX > 0) {
+        else if (!this.props.vertical && Math.abs(e.deltaX) >= Math.abs(e.deltaY)) {
+            if (e.deltaX > 0) {
                 this.next();
             } else {
                 this.prev();
@@ -169,6 +177,7 @@ class Carousel extends React.Component {
             nextActive,
             showArrows,
         } = this.state;
+        const { classes } = this.props;
         const className = [
             'carousel-wrapper',
             this.props.className,
@@ -181,7 +190,13 @@ class Carousel extends React.Component {
         return (
             <div className={className} ref="container">
                 <div className={'carousel'} ref="carousel" style={style}>
-                    {showArrows && <div className={prevClassName} ref="prev" onClick={this.prev} />}
+                    {showArrows && (
+                        <div
+                            className={clsx(classes.carousel, prevClassName)}
+                            ref="prev"
+                            onClick={this.prev}
+                        />
+                    )}
                     <Swipeable
                         className={'carousel-frame'}
                         trackMouse={true}
@@ -198,11 +213,17 @@ class Carousel extends React.Component {
                             })}
                         </div>
                     </Swipeable>
-                    {showArrows && <div className={nextClassName} ref="next" onClick={this.next} />}
+                    {showArrows && (
+                        <div
+                            className={clsx(classes.carousel, nextClassName)}
+                            ref="next"
+                            onClick={this.next}
+                        />
+                    )}
                 </div>
             </div>
         );
     }
 }
 
-export default Carousel;
+export default withStyles(styles, { name: 'Carousel' })(Carousel);

package/src/Framework/i18n.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import * as reactI18nify from 'react-i18nify';
 import Hyphen from 'react-hyphen';
 import { getConf } from '../App/configuration';
 
@@ -231,10 +230,10 @@ export function translateComponent(ComponentToTranslate, mapStateToProps, mapDis
 export const t = I18n.t.bind(I18n);
 
 export function useTranslationWithoutStore() {
-    reactI18nify.I18n.setTranslationsGetter(function() {
+    I18n.setTranslationsGetter(function() {
         return translations;
     });
-    reactI18nify.I18n.setLocaleGetter(function() {
+    I18n.setLocaleGetter(function() {
         return 'en-GB';
     });
 }

package/babel.config.js

@@ -1,46 +0,0 @@
-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/public/ConfigurationMessagingDemo.html

@@ -1,55 +0,0 @@
-<!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

@@ -1,135 +0,0 @@
-/* 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/moveLibToPackageRoot.js

@@ -1,40 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-/* 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);

package/scripts/updateLocalPackages.js

@@ -1,68 +0,0 @@
-/* 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/scripts/utils/process.js

@@ -1,19 +0,0 @@
-/**
- * These utils are made to simplify querying process information for the node scripts.
- *
- * @author boda@redhotmagma.de
- */
-
-/**
- * Checks if the current installation process is a dependency installation
- * @return {boolean}
- */
-function isDependency() {
-    // if the path of the initial directory contains 'node_modules', it's probably installed as a dependency
-    const { INIT_CWD } = process.env;
-    return INIT_CWD.indexOf('node_modules') !== -1;
-}
-
-module.exports = {
-    isDependency,
-};

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    // Target latest version of ECMAScript.
-    "target": "esnext",
-    // Search under node_modules for non-relative imports.
-    "moduleResolution": "node",
-    // Process & infer types from .js files.
-    "allowJs": true,
-    // Don't emit; allow Babel to transform files.
-    "noEmit": true,
-    // Enable strictest settings like strictNullChecks & noImplicitAny.
-    "strict": true,
-    // Disallow features that require cross-file information for emit.
-    "isolatedModules": true,
-    // Import non-ES modules as default imports.
-    "esModuleInterop": true
-  },
-  "include": [
-    "./src",
-    "./node_modules/redhotmagma-graphics-editor"
-  ]
-}