kitchen-simulator 5.0.0-test.7 → 5.0.0-test.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.7",
+  "version": "5.0.0-test.8",
   "description": "It is a kitchen simulator.",
   "type": "module",
 
@@ -19,7 +19,6 @@
     "src/*.js",
     "src/*.jsx",
     "src/catalog",
-    "src/components",
     "src/utils",
     "src/actions",
     "src/reducers",
@@ -28,7 +27,18 @@
     "src/shared-style",
     "src/translator",
     "README.md",
-    "LICENSE"
+    "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/_export.js",
+    "src/components/content.jsx"
   ],
 
   "sideEffects": [

package/src/components/_export.js

@@ -0,0 +1,11 @@
+import Content from './content';
+import Viewer2DComponents from './viewer2d/export';
+import StyleComponents from './style/export';
+
+export { Content, Viewer2DComponents, StyleComponents };
+
+export default {
+  Content,
+  Viewer2DComponents,
+  StyleComponents
+};

package/src/components/catalog-view/catalog-breadcrumb.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MdArrowBack as Arrow } from 'react-icons/md';
-import * as SharedStyle from '../../shared-style';
-
-const breadcrumbStyle = {
-  margin: '1.5em',
-  display: 'flex'
-};
-
-const breadcrumbTextStyle = {
-  fontSize: '20px',
-  cursor: 'pointer'
-};
-
-const breadcrumbLastTextStyle = {
-  ...breadcrumbTextStyle,
-  fontWeight: 'bolder',
-  color: SharedStyle.SECONDARY_COLOR.main
-};
-
-const breadcrumbTabStyle = {
-  fill: SharedStyle.COLORS.black,
-  fontSize: '24px',
-  marginLeft: '10px',
-  marginRight: '10px'
-};
-
-const CatalogBreadcrumb = ({ names }) => {
-  let labelNames = names.map((name, ind) => {
-    let lastElement = ind === names.length - 1;
-
-    return (
-      <div key={ind} style={{ display: 'flex' }}>
-        <div
-          style={!lastElement ? breadcrumbTextStyle : breadcrumbLastTextStyle}
-          onClick={name.action || null}
-        >
-          {name.name}
-        </div>
-        {!lastElement ? <Arrow style={breadcrumbTabStyle} /> : null}
-      </div>
-    );
-  });
-
-  return <div style={breadcrumbStyle}>{labelNames}</div>;
-};
-
-CatalogBreadcrumb.propTypes = {
-  names: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default CatalogBreadcrumb;

package/src/components/catalog-view/catalog-item.jsx

@@ -1,229 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FaPlusCircle as IconAdd } from 'react-icons/fa';
-import * as SharedStyle from '../../shared-style';
-import { API_SERVER_URL, MODE, MODE_IDLE } from '../../constants';
-import browserHistory from '../../@history';
-import axios from 'axios';
-import SnackBar from '../atoms/Snackbar/index';
-const AWS = require('aws-sdk');
-
-const s3 = new AWS.S3({
-  accessKeyId: process.env.REACT_APP_AWS_ID,
-  secretAccessKey: process.env.REACT_APP_AWS_SECRET
-});
-
-const STYLE_BOX = {
-  width: '14em',
-  height: '14em',
-  padding: '0.625em',
-  background: '#f7f7f9',
-  border: '1px solid #e1e1e8',
-  cursor: 'pointer',
-  position: 'relative',
-  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
-  borderRadius: '2px',
-  transition: 'all .15s ease-in-out',
-  WebkitTransition: 'all .15s ease-in-out',
-  alignSelf: 'center',
-  justifySelf: 'center'
-};
-
-const STYLE_BOX_HOVER = {
-  ...STYLE_BOX,
-  background: SharedStyle.SECONDARY_COLOR.main
-};
-
-const STYLE_TITLE = {
-  width: '100%',
-  textAlign: 'center',
-  display: 'block',
-  marginBottom: '.5em',
-  textTransform: 'capitalize'
-};
-
-const STYLE_TITLE_HOVER = {
-  ...STYLE_TITLE,
-  color: SharedStyle.COLORS.white
-};
-
-const STYLE_IMAGE_CONTAINER = {
-  width: '100%',
-  height: '8em',
-  position: 'relative',
-  overflow: 'hidden',
-  border: 'solid 1px #e6e6e6',
-  padding: 0,
-  margin: 0,
-  marginBottom: '5px'
-};
-
-const STYLE_IMAGE = {
-  position: 'absolute',
-  background: '#222',
-  width: '100%',
-  height: '100%',
-  backgroundSize: 'contain',
-  backgroundPosition: '50% 50%',
-  backgroundColor: SharedStyle.COLORS.white,
-  backgroundRepeat: 'no-repeat',
-  transition: 'all .2s ease-in-out'
-};
-
-const STYLE_IMAGE_HOVER = {
-  ...STYLE_IMAGE,
-  transform: 'scale(1.2)'
-};
-
-const STYLE_PLUS_HOVER = {
-  marginTop: '1.5em',
-  color: SharedStyle.SECONDARY_COLOR.main,
-  fontSize: '2em',
-  opacity: '0.7',
-  width: '100%'
-};
-
-const STYLE_DESCRIPTION = {
-  display: 'block',
-  display: '-webkit-box',
-  height: '2em',
-  margin: '0 auto',
-  fontSize: '0.75em',
-  fontStyle: 'italic',
-  lineHeight: '1em',
-  WebkitLineClamp: '2',
-  WebkitBoxOrient: 'vertical',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-};
-
-const STYLE_TAGS = {
-  listStyle: 'none',
-  margin: '0px',
-  padding: '0px',
-  fontSize: '11px',
-  marginBottom: '3px'
-};
-
-const STYLE_TAG = {
-  display: 'inline-block',
-  background: '#337ab7',
-  color: SharedStyle.COLORS.white,
-  padding: '1px 4px',
-  marginRight: '3px',
-  borderRadius: '3px'
-};
-
-const STYLE_ASSIGN_TAG = {
-  display: 'inline-block',
-  background: '#33b768',
-  color: SharedStyle.COLORS.white,
-  padding: '1px 4px',
-  marginRight: '3px',
-  borderRadius: '3px'
-};
-
-export default class CatalogItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hover: false, snackBarMessage: '', isSnackBarOpen: '' };
-  }
-
-  select(element) {
-    sessionStorage.setItem('projectTitle', element.title);
-    this.context.projectActions.rename(element.title);
-    sessionStorage.setItem('projectId', element.id);
-    sessionStorage.setItem('email', element.email);
-    const _self = this;
-    if (MODE === 'production') {
-      s3.getObject(
-        {
-          Bucket: process.env.REACT_APP_AWS_BUCKET_NAME,
-          Key: element.data
-        },
-        function (err, data) {
-          if (err !== null) {
-            console.log(err);
-            this.setState({
-              snackBarMessage: 'Something went wrong.',
-              isSnackBarOpen: true
-            });
-            return;
-          }
-          var fileData = data.Body.toString('utf-8');
-          const jsonData = JSON.parse(fileData);
-          _self.context.projectActions.loadProject(
-            jsonData,
-            this.props.categoryData
-          );
-        }
-      );
-    } else {
-      axios
-        .post(`${API_SERVER_URL}/api/project/loadPidData`, {
-          pid: element.id
-        })
-        .then(response => {
-          const jsonData = JSON.parse(response.data.data);
-          this.context.projectActions.loadProject(
-            jsonData,
-            this.props.categoryData
-          );
-        });
-    }
-    this.context.projectActions.setMode(MODE_IDLE);
-    const visualizerName = sessionStorage.getItem('visualizerName');
-    browserHistory.push({
-      pathname: `/${visualizerName}/project/${
-        element.role
-      }/${sessionStorage.getItem('jwt_access_token')}/${element.id}`
-    });
-  }
-
-  render() {
-    let element = this.props.element;
-    let hover = this.state.hover;
-    return (
-      <div
-        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
-        onClick={e => {
-          e.preventDefault(), this.select(element);
-        }}
-        onMouseEnter={e => this.setState({ hover: true })}
-        onMouseLeave={e => this.setState({ hover: false })}
-      >
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <b style={STYLE_TITLE}>{element.title}</b>
-        <div style={STYLE_IMAGE_CONTAINER}>
-          <div style={{ ...STYLE_IMAGE }}>
-            {hover ? <IconAdd style={STYLE_PLUS_HOVER} /> : null}
-          </div>
-        </div>
-        <ul style={STYLE_TAGS}>
-          {element.is_assistance_requested === 1 ? (
-            <li style={STYLE_ASSIGN_TAG}>Assign</li>
-          ) : null}
-          <li style={STYLE_TAG}>{element.saved_at}</li>
-        </ul>
-        {/* <div style={STYLE_DESCRIPTION}>{element.info.description}</div> */}
-      </div>
-    );
-  }
-}
-
-CatalogItem.propTypes = {
-  element: PropTypes.object.isRequired
-};
-
-CatalogItem.contextTypes = {
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};

package/src/components/catalog-view/catalog-list.jsx

@@ -1,173 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import CatalogItem from './catalog-item';
-import CatalogBreadcrumb from './catalog-breadcrumb';
-import CatalogPageItem from './catalog-page-item';
-import CatalogTurnBackPageItem from './catalog-turn-back-page-item';
-import ContentContainer from '../style/content-container';
-import { API_SERVER_URL } from '../../constants';
-import ContentTitle from '../style/content-title';
-import * as SharedStyle from '../../shared-style';
-import axios from 'axios';
-import SnackBar from '../atoms/Snackbar/index';
-
-const containerStyle = {
-  position: 'fixed',
-  width: 'calc( 100% - 94px)',
-  height: 'calc( 100% - 71px)',
-  backgroundColor: '#FFF',
-  padding: '1em',
-  left: 90,
-  top: 70,
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  zIndex: 10
-};
-
-const itemsStyle = {
-  display: 'flex',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(14em, 1fr))',
-  gridGap: '10px',
-  marginTop: '1em'
-};
-
-const searchContainer = {
-  width: '100%',
-  height: '3em',
-  padding: '0.625em',
-  background: '#f7f7f9',
-  border: '1px solid #e1e1e8',
-  cursor: 'pointer',
-  position: 'relative',
-  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
-  borderRadius: '2px',
-  transition: 'all .2s ease-in-out',
-  WebkitTransition: 'all .2s ease-in-out',
-  marginBottom: '1em'
-};
-
-const searchText = {
-  width: '8em',
-  display: 'inline-block'
-};
-
-const searchInput = {
-  width: 'calc( 100% - 10em )',
-  height: '2em',
-  margin: '0',
-  padding: '0 1em',
-  border: '1px solid #EEE'
-};
-
-const historyContainer = {
-  ...searchContainer,
-  padding: '0.2em 0.625em'
-};
-
-const historyElementStyle = {
-  width: 'auto',
-  height: '2em',
-  lineHeight: '2em',
-  textAlign: 'center',
-  borderRadius: '1em',
-  display: 'inline-block',
-  cursor: 'pointer',
-  backgroundColor: SharedStyle.PRIMARY_COLOR.alt,
-  color: SharedStyle.PRIMARY_COLOR.text_main,
-  textTransform: 'capitalize',
-  margin: '0.25em',
-  padding: '0 1em'
-};
-
-export default class CatalogList extends Component {
-  constructor(props, context) {
-    super(props);
-
-    this.state = {
-      elementsToDisplay: [],
-      matchString: '',
-      matchedElements: [],
-      snackBarMessage: '',
-      isSnackBarOpen: false
-    };
-  }
-
-  componentDidMount() {
-    const self = this;
-    const user = self.props.param.params;
-    axios
-      .post(`${API_SERVER_URL}/api/project/loadProject`, {
-        userrole: user.role,
-        access_token: user.token,
-        env: 'front'
-      })
-      .then(response => {
-        const { success } = response.data;
-        if (success === true) {
-          const { projectElement } = response.data;
-          self.setState({ elementsToDisplay: projectElement });
-        } else
-          this.setState({
-            snackBarMessage: 'Loading project failed.',
-            isSnackBarOpen: true
-          });
-      });
-  }
-
-  render() {
-    let turnBackButton = <CatalogTurnBackPageItem key="back" />;
-    return (
-      <ContentContainer
-        width={this.props.width}
-        height={this.props.height}
-        style={{ ...containerStyle, ...this.props.style }}
-      >
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <ContentTitle>My Project Library</ContentTitle>
-        <div style={itemsStyle}>
-          {this.state.matchString === ''
-            ? [
-                turnBackButton,
-                // categoriesToDisplay.map(cat => <CatalogPageItem key={cat.name} page={cat} oldPage={currentCategory}/>),
-                this.state.elementsToDisplay.map(elem => (
-                  <CatalogItem
-                    key={elem.id}
-                    element={elem}
-                    categoryData={this.props.categoryData}
-                  />
-                ))
-              ]
-            : this.state.matchedElements.map(elem => (
-                <CatalogItem
-                  key={elem.id}
-                  element={elem}
-                  categoryData={this.props.categoryData}
-                />
-              ))}
-        </div>
-      </ContentContainer>
-    );
-  }
-}
-
-CatalogList.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  style: PropTypes.object
-};
-
-CatalogList.contextTypes = {
-  catalog: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};

package/src/components/catalog-view/catalog-page-item.jsx

@@ -1,110 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { MdNavigateNext } from 'react-icons/md';
-import * as SharedStyle from '../../shared-style';
-
-const STYLE_BOX = {
-  width: '14em',
-  height: '14em',
-  padding: '0.625em',
-  background: '#f7f7f9',
-  border: '1px solid #e1e1e8',
-  cursor: 'pointer',
-  position: 'relative',
-  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
-  borderRadius: '2px',
-  transition: 'all .2s ease-in-out',
-  WebkitTransition: 'all .2s ease-in-out',
-  alignSelf: 'center',
-  justifySelf: 'center'
-};
-
-const STYLE_BOX_HOVER = {
-  ...STYLE_BOX,
-  background: SharedStyle.SECONDARY_COLOR.main
-};
-
-const STYLE_TITLE = {
-  width: '100%',
-  position: 'absolute',
-  textAlign: 'center',
-  display: 'block',
-  marginBottom: '.5em',
-  padding: '1em',
-  textTransform: 'capitalize',
-  WebkitTransition: 'all .15s ease-in-out'
-};
-
-const STYLE_TITLE_HOVERED = {
-  ...STYLE_TITLE,
-  fontSize: '1.4em',
-  transform: 'translateY(-60px)',
-  color: 'rgb(28, 166, 252)',
-  marginTop: '0.5em'
-};
-
-const STYLE_NEXT_HOVER = {
-  position: 'absolute',
-  color: SharedStyle.SECONDARY_COLOR.main,
-  fontSize: '5em',
-  width: '100%'
-};
-
-const CONTAINER_DIV = {
-  background: SharedStyle.COLORS.white,
-  marginBottom: '5px',
-  border: 'solid 1px #EEE',
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-};
-
-export default class CatalogPageItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hover: false };
-  }
-
-  changePage(newPage) {
-    this.context.projectActions.changeCatalogPage(
-      newPage,
-      this.props.oldPage.name
-    );
-  }
-
-  render() {
-    let page = this.props.page;
-    let hover = this.state.hover;
-
-    return (
-      <div
-        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
-        onClick={e => this.changePage(page.name)}
-        onMouseEnter={e => this.setState({ hover: true })}
-        onMouseLeave={e => this.setState({ hover: false })}
-      >
-        {hover ? (
-          <div style={CONTAINER_DIV}>
-            <b style={STYLE_TITLE_HOVERED}>{page.label}</b>
-            <MdNavigateNext style={STYLE_NEXT_HOVER} />
-          </div>
-        ) : (
-          <div style={CONTAINER_DIV}>
-            <b style={STYLE_TITLE}>{page.label}</b>
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-CatalogPageItem.propTypes = {
-  page: PropTypes.object.isRequired,
-  oldPage: PropTypes.object.isRequired
-};
-
-CatalogPageItem.contextTypes = {
-  projectActions: PropTypes.object.isRequired
-};

package/src/components/catalog-view/catalog-turn-back-page-item.jsx

@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { MdNavigateBefore } from 'react-icons/md';
-import * as SharedStyle from '../../shared-style';
-import { MODE_IDLE } from '../../constants';
-
-const STYLE_BOX = {
-  width: '14em',
-  height: '14em',
-  padding: '0.625em',
-  background: '#f7f7f9',
-  border: '1px solid #e1e1e8',
-  margin: '0.3em',
-  cursor: 'pointer',
-  position: 'relative',
-  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
-  borderRadius: '2px',
-  transition: 'all .2s ease-in-out',
-  WebkitTransition: 'all .2s ease-in-out'
-};
-
-const STYLE_BOX_HOVER = {
-  ...STYLE_BOX,
-  background: SharedStyle.SECONDARY_COLOR.main
-};
-
-const STYLE_BACK = {
-  position: 'absolute',
-  color: SharedStyle.COLORS.black,
-  fontSize: '5em',
-  width: '100%'
-};
-
-const STYLE_BACK_HOVER = {
-  ...STYLE_BACK,
-  color: SharedStyle.SECONDARY_COLOR.main
-};
-
-const CONTAINER_DIV = {
-  background: SharedStyle.COLORS.white,
-  marginBottom: '5px',
-  border: 'solid 1px #e6e6e6',
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-};
-
-export default class CatalogTurnBackPageItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hover: false };
-  }
-
-  changePage() {
-    this.context.projectActions.setMode(MODE_IDLE);
-  }
-
-  render() {
-    let hover = this.state.hover;
-
-    return (
-      <div
-        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
-        onClick={e => this.changePage()}
-        onMouseEnter={e => this.setState({ hover: true })}
-        onMouseLeave={e => this.setState({ hover: false })}
-      >
-        <div style={CONTAINER_DIV}>
-          <MdNavigateBefore style={!hover ? STYLE_BACK : STYLE_BACK_HOVER} />
-        </div>
-      </div>
-    );
-  }
-}
-
-CatalogTurnBackPageItem.contextTypes = {
-  projectActions: PropTypes.object.isRequired
-};