kitchen-simulator 5.0.0-test.4 → 5.0.0-test.5

package/src/components/style/form-select.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import * as SharedStyle from '../../shared-style';
-import styled from 'styled-components';
-import {
-  TEXT_COLOR_NEUTRAL_3,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR
-} from '../../constants';
-
-const StyledSelect = styled.select`
-  display: block;
-  width: 120px;
-  float: right;
-  padding: 15px 10px 12px 0px;
-  color: ${TEXT_COLOR_NEUTRAL_3};
-  border: 2px solid;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 17px;
-  text-align: right;
-  outline: none;
-  border-radius: 5px;
-  :hover {
-    border-color: ${SECONDARY_PURPLE_COLOR};
-  }
-  :focus {
-    border-color: ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export default function FormSelect({ children, style, ...rest }) {
-  return (
-    <StyledSelect type="text" style={style} {...rest}>
-      {children}
-    </StyledSelect>
-  );
-}

package/src/components/style/form-slider.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactRange from '@mapbox/react-range';
-import FormTextInput from './form-text-input';
-
-const sliderContainerStyle = {
-  display: 'inline-block',
-  width: '80%',
-  marginRight: '5%'
-};
-const sliderStyle = { display: 'block', width: '100%', height: '30px' };
-const textContainerStyle = {
-  display: 'inline-block',
-  width: '15%',
-  float: 'right'
-};
-const textStyle = { height: '34px', textAlign: 'center' };
-
-export default function FormNumberInput({ value, onChange, ...rest }) {
-  return (
-    <div>
-      <div style={sliderContainerStyle}>
-        <ReactRange
-          type="range"
-          style={sliderStyle}
-          onChange={onChange}
-          value={value}
-          {...rest}
-        />
-      </div>
-
-      <div style={textContainerStyle}>
-        <FormTextInput value={value} onChange={onChange} style={textStyle} />
-      </div>
-    </div>
-  );
-}

package/src/components/style/form-submit-button.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Button from './button';
-import * as SharedStyle from '../../shared-style';
-
-const STYLE = {
-  borderColor: '#415375',
-  backgroundColor: '#415375',
-  color: SharedStyle.COLORS.white
-};
-
-const STYLE_HOVER = {
-  borderColor: '#1f3149',
-  backgroundColor: '#1f3149',
-  color: SharedStyle.COLORS.white
-};
-
-export default function FormSubmitButton({ children, ...rest }) {
-  return (
-    <Button type="submit" style={STYLE} styleHover={STYLE_HOVER} {...rest}>
-      {children}
-    </Button>
-  );
-}

package/src/components/style/form-text-input.jsx

@@ -1,65 +0,0 @@
-import React, { Component } from 'react';
-import * as SharedStyle from '../../shared-style';
-import {
-  PROJECT_NAME_LENGTH_LIMIT,
-  TEXT_COLOR_NEUTRAL_3,
-  BG_COLOR_0,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR
-} from '../../constants';
-import styled from 'styled-components';
-
-const StyledInput = styled.input`
-  display: block;
-  padding: 15px 10px 12px 0px;
-  width: 120px;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 17px;
-  color: ${TEXT_COLOR_NEUTRAL_3};
-  background-color: ${BG_COLOR_0};
-  border: 2px solid;
-  text-align: right;
-  float: right;
-  border-radius: 5px;
-  outline: 0;
-  :focus {
-    border-color: ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export default class FormTextInput extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { focus: false };
-    this.input = React.createRef(null);
-  }
-
-  componentDidMount() {
-    if (this.input.current) {
-      this.input.current.select();
-    }
-  }
-
-  render() {
-    let { style, ...rest } = this.props;
-
-    return (
-      <StyledInput
-        ref={this.input}
-        onFocus={e => this.setState({ focus: true })}
-        onBlur={e => this.setState({ focus: false })}
-        style={style}
-        // autoFocus
-        type="text"
-        {...rest}
-        maxLength={PROJECT_NAME_LENGTH_LIMIT}
-      />
-    );
-  }
-}
-
-FormTextInput.defaultProps = {
-  style: {}
-};

package/src/components/toolbar/button/ControlButton.jsx

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-
-export default class ControlButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-
-    return (
-      <S.Control
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        {[
-          props.title !== undefined ? (
-            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
-          ) : null,
-          props.icon !== undefined ? (
-            <S.ControlIcon key={props.icon}>{props.icon}</S.ControlIcon>
-          ) : null
-        ]}
-      </S.Control>
-    );
-  }
-}
-
-ControlButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/DirectionButton.jsx

@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-
-export default class DirectionButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    overlayStyle = props.active
-      ? { ...overlayStyle, background: SharedStyle.TOOLBAR_COLOR.active }
-      : { ...overlayStyle };
-    return (
-      <S.DirectionIcon
-        style={props.style}
-        onClick={props.onClick}
-        key={props.icon}
-      >
-        {props.icon}
-      </S.DirectionIcon>
-    );
-  }
-}
-
-DirectionButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/RightButton.jsx

@@ -1,103 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './styles';
-
-export default class RightButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-    if (props.active) overlayStyle = { ...overlayStyle, display: 'block' };
-    return (
-      <S.rMain
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        <S.rightIcon>{props.icon}</S.rightIcon>
-
-        <S.rOverlay style={{ ...overlayStyle }}>
-          <img width="40px" src={props.src} />
-          <S.rTitle>{props.title}</S.rTitle>
-        </S.rOverlay>
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </S.rMain>
-    );
-  }
-}
-
-RightButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  onClick: PropTypes.func
-};
-
-export class RightTextButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    return (
-      <S.rMain
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        <S.rightIcon>{props.icon}</S.rightIcon>
-
-        {state.hover ? (
-          <S.rOverlay style={{ display: 'block' }}>
-            <img width="40px" src={props.src} />
-            <S.rTitle
-              style={{ top: '20px', paddingTop: '7px', paddingBottom: '7px' }}
-            >
-              {props.title}
-            </S.rTitle>
-          </S.rOverlay>
-        ) : (
-          <S.rOverlay style={{ display: 'block' }}>
-            <S.rTitle
-              style={{
-                color: 'black',
-                top: '20px',
-                paddingTop: '7px',
-                paddingBottom: '7px'
-              }}
-            >
-              {props.title}
-            </S.rTitle>
-          </S.rOverlay>
-        )}
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </S.rMain>
-    );
-  }
-}
-
-RightTextButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/ToggleButton.jsx

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import { MODE_IDLE_3D } from '../../../constants';
-import * as S from './styles';
-
-export default class ToggleButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    let { props } = this;
-    let overlayStyle = {};
-    let activeStyle =
-      props.settingMode === MODE_IDLE_3D || props.active
-        ? { paddingRight: '30px', paddingBottom: '2px' }
-        : { paddingLeft: '30px', paddingBottom: '2px' };
-    return (
-      <S.Toggle style={{ ...overlayStyle }} onClick={props.onClick}>
-        {[
-          props.title !== undefined ? (
-            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
-          ) : null,
-          props.icon !== undefined ? (
-            <S.ToggleIcon style={{ ...activeStyle }} key={props.icon}>
-              {props.icon}
-            </S.ToggleIcon>
-          ) : null
-        ]}
-      </S.Toggle>
-    );
-  }
-}
-
-ToggleButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/index.jsx

@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import * as S from './styles';
-
-//http://www.cssportal.com/css-tooltip-generator/
-
-export default class ToolbarButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    const { active, onClick, children, src, title, ...otherProps } = props;
-    let overlayStyle = {};
-    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
-    // overlayStyle = { ...overlayStyle, 'display': 'block', 'background': SharedStyle.TOOLBAR_COLOR.focus }
-
-    if (props.active) overlayStyle = { ...overlayStyle, display: 'block' };
-    // overlayStyle = { ...overlayStyle, 'display': 'block', 'background': SharedStyle.TOOLBAR_COLOR.active }
-    return (
-      <S.Main
-        {...otherProps}
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        <div>{props.children}</div>
-
-        <S.Overlay style={{ ...overlayStyle }}>
-          <img width="75px" src={props.src} />
-          <S.Title>{props.title}</S.Title>
-        </S.Overlay>
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </S.Main>
-    );
-  }
-}
-
-ToolbarButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  tooltip: PropTypes.string.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/toolbar/button/styles.js

@@ -1,127 +0,0 @@
-import styled from 'styled-components';
-
-export const Main = styled.div`
-  z-index: 6;
-  width: 75px;
-  height: 75px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0px;
-  position: relative;
-  cursor: pointer;
-  background: #d3e7e5;
-  box-shadow: 3px 1px 3px 0px rgba(0, 0, 0, 0.2),
-    -1px -1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-`;
-export const rightIcon = styled.div`
-  img {
-    box-shadow: 3px 1px 3px 0px rgba(0, 0, 0, 0.2),
-      -1px -1px 1px 0px rgba(0, 0, 0, 0.14),
-      0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-    border-radius: 8%;
-  }
-`;
-export const Overlay = styled.div`
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  width: 100%;
-  text-align: center;
-  background: rgba(0, 0, 0, 0.5);
-  display: none;
-`;
-export const Title = styled.span`
-  position: absolute;
-  top: 51%;
-  left: 0px;
-  width: 100%;
-  color: #fff;
-  text-transform: uppercase;
-  transform: translate(0%, -50%);
-  font-size: 11px;
-`;
-export const rMain = styled.div`
-  width: 40px;
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  margin-right: 14px;
-  position: relative;
-  cursor: pointer;
-`;
-export const rOverlay = styled.div`
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  width: 100%;
-  text-align: center;
-  display: none;
-`;
-export const rTitle = styled.span`
-  position: absolute;
-  top: 45%;
-  left: 1px;
-  width: 100%;
-  color: #fff;
-  text-transform: uppercase;
-  transform: translate(0%, -50%);
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
-  }
-`;
-
-export 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;
-  }
-`;
-
-export const ToggleIcon = styled.div`
-  ${'' /* transition-duration: .3s; */}
-  position: absolute;
-  top: 0px;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
-  }
-`;
-
-export const ControlTitle = styled.span`
-  margin: 10px;
-  font-size: 12px;
-`;

package/src/components/toolbar/components/DoorStyleMenu.jsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles({
-  selectRoot: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-    color: 'rgb(76, 18, 161)',
-    fontWeight: 600,
-    fontSize: '14px'
-  },
-  inputLabel: {
-    color: 'black'
-  }
-});
-
-const DoorStyleMenu = ({
-  selected,
-  data,
-  onChange,
-  getValue,
-  placeholder,
-  iconStyle
-}) => {
-  const classes = useStyles();
-
-  if (!data || !data.length) return null;
-
-  return (
-    <FormControl fullWidth variant="outlined">
-      {placeholder && (
-        <InputLabel className={classes.inputLabel}>{placeholder}</InputLabel>
-      )}
-      <Select
-        value={selected}
-        onChange={e => onChange(e.target.value)}
-        label={placeholder}
-        classes={{ root: classes.selectRoot }}
-        renderValue={value => {
-          if (!value) {
-            return <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>;
-          }
-          const selectedItem = data.find(item => getValue(item) === value.name);
-          if (!selectedItem)
-            return <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>;
-          return (
-            <span
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.5rem',
-                width: '100%'
-              }}
-            >
-              <span>{selectedItem.name}</span>
-              <img
-                style={
-                  iconStyle && {
-                    ...iconStyle
-                  }
-                }
-                height="20"
-                src={selectedItem.thumbnail}
-                alt=""
-              />
-            </span>
-          );
-        }}
-      >
-        <MenuItem value={''}>
-          <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>
-        </MenuItem>
-        {data.map((item, key) => (
-          <MenuItem
-            classes={{ root: classes.selectRoot }}
-            key={key}
-            value={getValue(item)}
-          >
-            <font size="2">{item.name}</font>
-            <img
-              style={
-                iconStyle && {
-                  ...iconStyle
-                }
-              }
-              height="20"
-              src={item.thumbnail}
-              alt=""
-            />
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-};
-
-DoorStyleMenu.defaultProps = {
-  getValue: it => it.name
-};
-
-export default DoorStyleMenu;