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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.17",
+  "version": "5.0.0-test.18",
   "description": "It is a kitchen simulator.",
   "main": "src/_index.js",
   "module": "src/_index.js",
@@ -37,8 +37,16 @@
     "LICENSE",
 
     "src/components/_export.js",
-    "src/components/viewer2d/*",
-    "src/components/viewer3d/*"
+    "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"
   ],
 
   "sideEffects": [

package/src/_KitchenConfigurator.jsx

@@ -1,4 +1,3 @@
-import Dialog from '@material-ui/core/Dialog';
 import axios from 'axios';
 import convert from 'convert-units';
 import { Plugins as PlannerPlugins } from './_index';
@@ -8,17 +7,7 @@ import ReactGA from 'react-ga4';
 import { hotjar } from 'react-hotjar';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import styled from 'styled-components';
-import SnackBar from './components/atoms/Snackbar';
 import * as constants from './constants';
-import {
-  BG_COLOR_HOVER,
-  CLIENTS_NAME,
-  DEFAULT_FONT_FAMILY,
-  PRIMARY_GREEN_COLOR,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1
-} from './constants';
 import { base64Decode, getPath } from './utils/helper';
 import actions from './actions/_export';
 import Catalog from './catalog/catalog';
@@ -27,49 +16,7 @@ import Translator from './translator/translator';
 import { objectsMap } from './utils/objects-utils';
 import { VERSION } from './version';
 
-const AWS = require('aws-sdk');
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 10px;
-  }
-`;
-
-export const StyledDialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 30px;
-  padding-top: 30px;
-`;
-
-export const StyledDialogAction = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding: 15px 30px 25px;
-`;
-
-export const StyledButton = styled.div`
-  padding: 10px 20px;
-  cursor: pointer;
-  margin-right: 10px;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-weight: bold;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  border-radius: 20px;
-  :hover {
-    background-color: ${BG_COLOR_HOVER};
-  }
-`;
-
-const s3 = new AWS.S3({
-  accessKeyId: process.env.REACT_APP_AWS_ID,
-  secretAccessKey: process.env.REACT_APP_AWS_SECRET
-});
-
 const toolbarW = 0;
-const sidebarW = 250;
-const footerBarH = 20;
 
 const wrapperStyle = {
   display: 'flex',
@@ -549,41 +496,6 @@ class KitchenConfigurator extends Component {
 
     return (
       <section>
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-          autoHideDuration={10000}
-        />
-        <SnackBar
-          style={{ marginTop: this.state.isSnackBarOpen ? 75 : 'unset' }}
-          isOpen={this.state.isSnackBar1Open}
-          message={`The items in your design have been added to your shopping cart at ${CLIENTS_NAME[sessionStorage.getItem('visualizerName')]}. <br />Please log in with the same email address.`}
-          autoHideDuration={20000}
-          action={
-            <div>
-              <a
-                href={this.state.redirectURL}
-                target="_blank"
-                style={{
-                  fontFamily: DEFAULT_FONT_FAMILY,
-                  color: PRIMARY_GREEN_COLOR,
-                  fontWeight: 700,
-                  marginRight: 10
-                }}
-              >
-                View Cart
-              </a>
-              <img
-                onClick={() => this.setState({ isSnackBar1Open: false })}
-                style={{ float: 'right', height: 24, cursor: 'pointer' }}
-                src="/assets/img/svg/close.svg"
-              />
-            </div>
-          }
-        />
         <div style={{ ...wrapperStyle, height }}>
           <Content
             width={contentW}

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

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

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

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

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

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

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

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

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