kitchen-simulator 5.0.0-test.15 → 5.0.0-test.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.15",
+  "version": "5.0.0-test.17",
   "description": "It is a kitchen simulator.",
   "main": "src/_index.js",
   "module": "src/_index.js",
@@ -37,16 +37,8 @@
     "LICENSE",
 
     "src/components/_export.js",
-    "src/components/atoms",
-    "src/components/button",
-    "src/components/molecules",
-    "src/components/style",
-    "src/components/tutorial-view",
-    "src/components/viewer2d",
-    "src/components/viewer3d",
-    "src/components/content.jsx",
-    "src/components/catalog-view.jsx",
-    "src/components/project-configurator.jsx"
+    "src/components/viewer2d/*",
+    "src/components/viewer3d/*"
   ],
 
   "sideEffects": [

package/src/KitchenConfiguratorApp.jsx

@@ -22,7 +22,7 @@ import {
   Models as PlannerModels,
   Plugins as PlannerPlugins,
   reducer as PlannerReducer
-} from '../src/index';
+} from '../src/_index';
 import { Map } from 'immutable';
 import ReactGA from 'react-ga4';
 import { hotjar } from 'react-hotjar';

package/src/_KitchenConfigurator.jsx

@@ -1,7 +1,7 @@
 import Dialog from '@material-ui/core/Dialog';
 import axios from 'axios';
 import convert from 'convert-units';
-import { Plugins as PlannerPlugins } from './index';
+import { Plugins as PlannerPlugins } from './_index';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactGA from 'react-ga4';
@@ -20,11 +20,9 @@ import {
   TEXT_COLOR_NEUTRAL_1
 } from './constants';
 import { base64Decode, getPath } from './utils/helper';
-import actions from './actions/export';
+import actions from './actions/_export';
 import Catalog from './catalog/catalog';
 import { Content } from './components/_export';
-import jwtService from './components/login/jwtService';
-import './styles/export';
 import Translator from './translator/translator';
 import { objectsMap } from './utils/objects-utils';
 import { VERSION } from './version';
@@ -147,8 +145,6 @@ class KitchenConfigurator extends Component {
       ttclid: utmRequestData?.ttclid || 'ttclid'
     };
 
-    this.jwtCheck();
-
     this.openFloor = this.openFloor.bind(this);
     this.openCabinet = this.openCabinet.bind(this);
     this.openFinishing = this.openFinishing.bind(this);
@@ -298,46 +294,6 @@ class KitchenConfigurator extends Component {
     ).parentElement.parentElement.style.zIndex = 6;
   }
 
-  jwtCheck() {
-    jwtService.on('onAutoLogin', () => {
-      // this.props.showMessage({message: 'Logging in with JWT'});
-
-      /**
-       * Sign in and retrieve user data from Api
-       */
-      jwtService
-        .signInWithToken()
-        .then(user => {
-          //this.props.userActions.setUserData(user);
-          this.props.userActions.login(
-            user.id,
-            user.role,
-            jwtService.getAccessToken(),
-            this.utm
-          );
-          //this.props.showMessage(option)
-          //this.props.showMessage({message: 'Logged in with token data',  variant: 'success'});
-          //alert('Logged in with token data');
-        })
-        .catch(error => {
-          //this.props.showMessage({message: error});
-          this.setState({
-            isSnackBarOpen: true,
-            snackBarMessage: error
-          });
-        });
-    });
-
-    jwtService.on('onAutoLogout', message => {
-      if (message) {
-        //this.props.showMessage({message, variant: 'error'});
-      }
-      this.props.userActions.logout();
-    });
-
-    jwtService.init();
-  }
-
   getChildContext() {
     return {
       ...objectsMap(actions, actionNamespace => this.props[actionNamespace]),

package/src/_index.js

@@ -6,8 +6,8 @@ import _KitchenConfigurator from './_KitchenConfigurator';
 import Plugins from './plugins/export';
 import * as KitchenConfiguratorConstants from './constants';
 import * as KitchenConfiguratorSharedStyle from './shared-style';
-import KitchenConfiguratorComponents from './components/export';
-import KitchenConfiguratorActions from './actions/export';
+import KitchenConfiguratorComponents from './components/_export';
+import KitchenConfiguratorActions from './actions/_export';
 import KitchenConfiguratorReducers from './reducers/export';
 import KitchenConfiguratorClasses from './class/export';
 import ElementsFactories from './catalog/factories/export';

package/src/actions/_export.js

@@ -0,0 +1,35 @@
+import * as projectActions from './project-actions';
+import * as viewer2DActions from './viewer2d-actions';
+import * as viewer3DActions from './viewer3d-actions';
+import * as linesActions from './lines-actions';
+import * as holesActions from './holes-actions';
+import * as sceneActions from './scene-actions';
+import * as verticesActions from './vertices-actions';
+import * as itemsActions from './items-actions';
+import * as areaActions from './area-actions';
+import * as groupsActions from './groups-actions';
+export {
+  projectActions,
+  viewer2DActions,
+  viewer3DActions,
+  linesActions,
+  holesActions,
+  sceneActions,
+  verticesActions,
+  itemsActions,
+  areaActions,
+  groupsActions
+};
+
+export default {
+  projectActions,
+  viewer2DActions,
+  viewer3DActions,
+  linesActions,
+  holesActions,
+  sceneActions,
+  verticesActions,
+  itemsActions,
+  areaActions,
+  groupsActions
+};

package/src/components/atoms/Snackbar/index.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import Snackbar from '@material-ui/core/Snackbar';
-import { SnackbarContent } from '@material-ui/core/index';
-import Slide from '@material-ui/core/Slide';
-import { TEXT_COLOR_NEUTRAL_0 } from '../../../constants';
-
-const SnackBar = ({
-  message,
-  isOpen = false,
-  autoHideDuration = !!autoHideDuration ? autoHideDuration : 5000,
-  action = '',
-  handleClose,
-  snackBarColor = TEXT_COLOR_NEUTRAL_0,
-  style
-}) => {
-  return (
-    <Snackbar
-      style={style}
-      open={isOpen}
-      autoHideDuration={autoHideDuration}
-      handleClose={handleClose}
-      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      TransitionComponent={Slide}
-      onClose={handleClose}
-    >
-      <SnackbarContent
-        style={{ backgroundColor: snackBarColor }}
-        action={
-          action || (
-            <img
-              onClick={handleClose}
-              style={{ float: 'right', height: 24, cursor: 'pointer' }}
-              src="/assets/img/svg/close.svg"
-            />
-          )
-        }
-        message={<div dangerouslySetInnerHTML={{ __html: message }} />}
-      />
-    </Snackbar>
-  );
-};
-
-export default SnackBar;

package/src/components/atoms/radio-button/index.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { RadioWrapper } from './styles';
-
-const RadioButton = ({ label, checked = false, name, value, id, onChange }) => {
-  return (
-    <RadioWrapper onClick={() => onChange(value)}>
-      <input
-        type="radio"
-        id={id}
-        name={name}
-        defaultChecked={checked}
-        value={value}
-      />
-      <label htmlFor={id}>{label}</label>
-    </RadioWrapper>
-  );
-};
-
-export default RadioButton;

package/src/components/atoms/radio-button/styles.js

@@ -1,56 +0,0 @@
-import styled from 'styled-components';
-
-export const RadioWrapper = styled.div`
-  display: inline-block;
-  color: #fff;
-  margin-right: 10px;
-
-  [type='radio']:checked,
-  [type='radio']:not(:checked) {
-    position: absolute;
-    left: -9999px;
-  }
-  [type='radio']:checked + label,
-  [type='radio']:not(:checked) + label {
-    position: relative;
-    padding-left: 28px;
-    cursor: pointer;
-    line-height: 20px;
-    display: inline-block;
-  }
-  [type='radio']:checked + label:before,
-  [type='radio']:not(:checked) + label:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 18px;
-    height: 18px;
-    border: 1px solid #ddd;
-    border-radius: 100%;
-    background: #fff;
-  }
-  [type='radio']:checked + label:after,
-  [type='radio']:not(:checked) + label:after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    background: #000;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    border-radius: 100%;
-    -webkit-transition: all 0.2s ease;
-    transition: all 0.2s ease;
-  }
-  [type='radio']:not(:checked) + label:after {
-    opacity: 0;
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-  [type='radio']:checked + label:after {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-`;

package/src/components/button/MainButton.jsx

@@ -1,157 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import {
-  BG_COLOR_0,
-  BG_COLOR_1,
-  BG_COLOR_HOVER,
-  DEFAULT_FONT_FAMILY,
-  PRIMARY_GREEN_COLOR,
-  SECONDARY_PURPLE_COLOR,
-  SHADE_DARK_GREEN_COLOR,
-  SHADE_DARK_PURPLE_COLOR,
-  SHADE_LIGHT_GREEN_COLOR,
-  SHADE_LIGHT_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_4
-} from '../../constants';
-
-/*
-  variant: primary, secondary, tertiary(default), icon, close, pagenumber;
-  size: large, small(default);
-  disabled: true, false(default);
-  text: user definition;
-  icon: user definition;
-  endIcon: user definition;
-  onClick: user definition;
-  buttonStyle: user definition;
-  textStyle: user definition;
-  imgStyle: userdefinition;
-*/
-
-export default class MainButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    const { variant, text, size, icon, endIcon, disabled } = this.props;
-    let padding = '10px 20px';
-
-    if (size === 'large') {
-      if (variant === 'icon' || variant === 'pagenumber') padding = '10px';
-    } else {
-      if (variant === 'icon' || variant === 'pagenumber') padding = '5px';
-      else padding = '5px 10px';
-    }
-
-    const StyledButton = styled.button`
-      /* width: max-content; */
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: ${padding};
-      border: ${variant === 'primary' ? '0px solid' : '1px solid'};
-      cursor: ${disabled ? 'no-drop' : 'pointer'};
-      user-select: none;
-      background-color: ${variant === 'primary'
-        ? SECONDARY_PURPLE_COLOR
-        : BG_COLOR_1};
-      border-color: ${variant === 'primary' || variant === 'secondary'
-        ? SECONDARY_PURPLE_COLOR
-        : BG_COLOR_1};
-      border-radius: ${variant === 'icon' ? '50%' : '5px'};
-      outline: 0;
-      height: ${size === 'large' ? '40px' : '35px'};
-      width: ${variant === 'icon' || variant === 'pagenumber'
-        ? size === 'large'
-          ? '40px'
-          : '35px'
-        : 'max-content'};
-      :focus {
-        box-shadow: ${!disabled &&
-        `0px 0px 5px 2px ${SHADE_LIGHT_PURPLE_COLOR}`};
-      }
-      :hover {
-        background-color: ${!disabled &&
-        (variant === 'primary' ? SHADE_LIGHT_PURPLE_COLOR : BG_COLOR_0)};
-      }
-      :active {
-        background-color: ${!disabled &&
-        (variant === 'primary' ? SHADE_DARK_PURPLE_COLOR : BG_COLOR_0)};
-      }
-    `;
-
-    const StyledLabel = styled.span`
-      color: ${disabled
-        ? TEXT_COLOR_NEUTRAL_4
-        : variant === 'primary'
-        ? BG_COLOR_1
-        : SECONDARY_PURPLE_COLOR};
-      font-family: ${DEFAULT_FONT_FAMILY};
-      font-size: 13px;
-      font-weight: 600;
-      line-height: 18px;
-      text-align: center;
-    `;
-
-    const StyledImage = styled.img`
-      height: ${size === 'large' ? '20px' : '15px'};
-      width: ${size === 'large' ? '20px' : '15px'};
-      background-color: ${disabled
-        ? TEXT_COLOR_NEUTRAL_4
-        : variant !== 'primary'
-        ? SECONDARY_PURPLE_COLOR
-        : BG_COLOR_1};
-      -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
-      -webkit-mask-size: 90%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: center;
-    `;
-
-    if (variant === 'icon' && text)
-      console.log('If your variant is icon, you cannnot use text');
-    if (variant === 'icon' && endIcon)
-      console.log('If your variant is icon, you cannnot use endIcon');
-    if (variant === 'icon' && (icon || endIcon))
-      console.log(
-        'If your variant is pagenumber, you cannnot use icon or endIcon'
-      );
-    if (variant === 'close' && icon)
-      console.log('If your variant is close, you cannnot use icon');
-
-    return (
-      <StyledButton
-        onClick={!disabled && this.props.onClick}
-        style={{ ...this.props.buttonStyle }}
-      >
-        {variant !== 'pagenumber' && variant !== 'close' && icon && (
-          <StyledImage
-            style={{
-              ...this.props.imgStyle,
-              marginRight: variant !== 'icon' && 10
-            }}
-            maskImage={icon}
-          />
-        )}
-        {variant !== 'icon' && (
-          <StyledLabel style={{ ...this.props.textStyle }}>
-            {variant === 'pagenumber'
-              ? parseInt(text)
-                ? parseInt(text)
-                : 0
-              : text}
-          </StyledLabel>
-        )}
-        {variant !== 'pagenumber' && variant !== 'icon' && endIcon && (
-          <StyledImage style={{ marginLeft: 10 }} maskImage={endIcon} />
-        )}
-      </StyledButton>
-    );
-  }
-}
-
-MainButton.propTypes = {
-  variant: PropTypes.string.isRequired,
-  size: PropTypes.string.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/button/ToggleMeasureButton.jsx

@@ -1,65 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const Toggle = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 36px;
-  margin-left: 20px;
-  justify-content: center;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  :hover {
-    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
-      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
-      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
-    border-radius: 18px;
-  }
-`;
-
-const ToggleIcon = styled.div`
-  ${'' /* transition-duration: .3s; */}
-  position: absolute;
-  top: 0px;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
-  }
-`;
-
-export default class ToggleMeasureButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let activeStyle = props.showMeasure === 0 ? { left: 0 } : { right: 0 };
-    return (
-      <Toggle onClick={props.onClick} style={{ ...props.style }}>
-        {props.backgroundImage}
-        {[
-          props.icon !== undefined ? (
-            <ToggleIcon style={{ ...activeStyle }} key={props.icon}>
-              {props.icon}
-            </ToggleIcon>
-          ) : null
-        ]}
-      </Toggle>
-    );
-  }
-}
-
-ToggleMeasureButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/content.jsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Viewer2D from './viewer2d/viewer2d';
-import Viewer3D from './viewer3d/viewer3d';
-import Viewer3DFirstPerson from './viewer3d/viewer3d-first-person';
-import CatalogList from './catalog-view/catalog-list';
-import ProjectConfigurator from './configurator/project-configurator';
-import * as constants from '../constants';
-import Front3D from './viewer3d/front3D';
-
-export default function Content(
-  {
-    width,
-    height,
-    state,
-    customContents,
-    match,
-    setToolbar,
-    replaceCabinet,
-    keyDownEnable,
-    catalog
-  },
-  { projectActions }
-) {
-  let mode = state.get('mode');
-
-  switch (mode) {
-    // this mode is when view elevation
-    case constants.MODE_ELEVATION_VIEW:
-      return (
-        <Front3D
-          state={state}
-          width={width}
-          height={height}
-          setToolbar={setToolbar}
-          replaceCabinet={replaceCabinet}
-          keyDownEnable={keyDownEnable}
-          catalog={catalog}
-        />
-      );
-
-    case constants.MODE_3D_VIEW:
-      return (
-        <Viewer3D
-          id="viewer3D"
-          state={state}
-          width={width}
-          height={height}
-          setToolbar={setToolbar}
-          replaceCabinet={replaceCabinet}
-          keyDownEnable={keyDownEnable}
-          downloadFlag={false}
-        />
-      );
-
-    case constants.MODE_3D_FIRST_PERSON:
-      return (
-        <Viewer3DFirstPerson state={state} width={width} height={height} />
-      );
-
-    case constants.MODE_VIEWING_CATALOG:
-      return (
-        <CatalogList
-          state={state}
-          param={match}
-          width={width}
-          height={height}
-          categoryData={this.props.categoryData}
-        />
-      );
-
-    case constants.MODE_IDLE:
-    case constants.MODE_2D_ZOOM_IN:
-    case constants.MODE_2D_ZOOM_OUT:
-    case constants.MODE_2D_PAN:
-    case constants.MODE_WAITING_DRAWING_LINE:
-    case constants.MODE_DRAGGING_LINE:
-    case constants.MODE_DRAGGING_VERTEX:
-    case constants.MODE_DRAGGING_ITEM:
-    case constants.MODE_DRAWING_LINE:
-    case constants.MODE_DRAWING_HOLE:
-    case constants.MODE_DRAWING_ITEM:
-    case constants.MODE_DRAGGING_HOLE:
-    case constants.MODE_ROTATING_ITEM:
-      return (
-        <Viewer2D
-          state={state}
-          width={width}
-          height={height}
-          setToolbar={setToolbar}
-          replaceCabinet={replaceCabinet}
-        />
-      );
-    case constants.MODE_ROTATING_ITEM_3D:
-    case constants.MODE_DRAGGING_ITEM_3D:
-    case constants.MODE_IDLE_3D:
-    case constants.MODE_DRAWING_ITEM_3D:
-    case constants.MODE_DRAWING_HOLE_3D:
-    case constants.MODE_DRAGGING_HOLE_3D:
-      return (
-        <Viewer3D
-          id="viewer3D"
-          state={state}
-          width={width}
-          height={height}
-          setToolbar={setToolbar}
-          replaceCabinet={replaceCabinet}
-          keyDownEnable={keyDownEnable}
-          downloadFlag={false}
-        />
-      );
-
-    case constants.MODE_CONFIGURING_PROJECT:
-      return (
-        <ProjectConfigurator width={width} height={height} state={state} />
-      );
-
-    default:
-      if (customContents.hasOwnProperty(mode)) {
-        let CustomContent = customContents[mode];
-        return <CustomContent width={width} height={height} state={state} />;
-      } else {
-        throw new Error(`Mode ${mode} doesn't have a mapped content`);
-      }
-  }
-}
-
-Content.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  replaceCabinet: PropTypes.func.isRequired
-};
-Content.contextTypes = {
-  projectActions: PropTypes.object.isRequired
-};

package/src/components/molecules/slider/index.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Slider as BaseSlider } from 'infinite-react-carousel';
-
-import * as S from './styles';
-import './styles.scss';
-
-const Slider = ({ children }) => {
-  return (
-    <BaseSlider arrows={false} dots={true}>
-      {children}
-    </BaseSlider>
-  );
-};
-
-export default Slider;

package/src/components/molecules/slider/styles.scss

@@ -1,3 +0,0 @@
-.carousel-dots li.carousel-dots-active button:before {
-  color: #fff;
-}