kitchen-simulator 11.0.0-react-18 → 11.0.0

package/es/LiteKitchenConfigurator.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
@@ -313,20 +314,41 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       var el = document.getElementById('add_appliances_inactive');
       if (el !== null && el !== void 0 && (_el$parentElement0 = el.parentElement) !== null && _el$parentElement0 !== void 0 && _el$parentElement0.parentElement) el.parentElement.parentElement.style.zIndex = 6;
     }
+  }, {
+    key: "getChildContext",
+    value: function getChildContext() {
+      var _this2 = this;
+      return _objectSpread(_objectSpread({}, objectsMap(actions, function (actionNamespace) {
+        return _this2.props[actionNamespace];
+      })), {}, {
+        translator: this.props.translator,
+        catalog: this.props.catalog
+      });
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       window.forRedo = [];
+      var store = this.context.store;
+      var _this$props = this.props,
+        stateExtractor = _this$props.stateExtractor,
+        plugins = _this$props.plugins;
+
+      // keep old behavior: run plugins once on mount
+      var newplugins = _toConsumableArray(plugins);
+      newplugins.forEach(function (newplugin) {
+        return newplugin(store, stateExtractor);
+      });
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _extractedState$getIn;
-      var _this$props = this.props,
-        externalEvent = _this$props.externalEvent,
-        extractedState = _this$props.extractedState,
-        projectActions = _this$props.projectActions,
-        catalog = _this$props.catalog;
+      var _this$props2 = this.props,
+        externalEvent = _this$props2.externalEvent,
+        extractedState = _this$props2.extractedState,
+        projectActions = _this$props2.projectActions,
+        catalog = _this$props2.catalog;
 
       // same behavior: handle external event when it changes
       if (prevProps.externalEvent !== externalEvent) {
@@ -385,11 +407,11 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        width = _this$props2.width,
-        height = _this$props2.height,
-        extractedState = _this$props2.extractedState,
-        props = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$props3 = this.props,
+        width = _this$props3.width,
+        height = _this$props3.height,
+        extractedState = _this$props3.extractedState,
+        props = _objectWithoutProperties(_this$props3, _excluded);
       var _this$state = this.state,
         savePopupVisible = _this$state.savePopupVisible,
         quotePopupVisible = _this$state.quotePopupVisible,
@@ -455,6 +477,15 @@ LiteKitchenConfigurator.propTypes = {
   // ✅ injected by connect
   externalEvent: PropTypes.object
 };
+LiteKitchenConfigurator.contextTypes = {
+  store: PropTypes.object.isRequired
+};
+LiteKitchenConfigurator.childContextTypes = _objectSpread(_objectSpread({}, objectsMap(actions, function () {
+  return PropTypes.object;
+})), {}, {
+  translator: PropTypes.object,
+  catalog: PropTypes.object
+});
 LiteKitchenConfigurator.defaultProps = {
   translator: new Translator(),
   catalog: new Catalog(),

package/es/LiteRenderer.js

@@ -11,7 +11,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { createStore, bindActionCreators } from 'redux';
+import { createStore } from 'redux';
 import { Map } from 'immutable';
 import * as Sentry from '@sentry/react';
 import * as THREE from 'three';
@@ -20,14 +20,11 @@ import { State } from "./models";
 import PlannerReducer from "./reducers/reducer";
 import AppContext from "./AppContext";
 import Catalog from "./catalog/catalog";
-import actions from "./actions/export";
-import Translator from "./translator/translator";
 import * as Areas from "./catalog/areas/area/planner-element";
 import * as Lines from "./catalog/lines/wall/planner-element";
 import { buildHoleElements, registerDynamicHoles } from "./mappings/holesToCatalog";
 import { ConsoleDebugger, Keyboard } from "./plugins/export";
 import LiteKitchenConfigurator from "./LiteKitchenConfigurator";
-import { objectsMap } from "./utils/objects-utils";
 var isBrowser = typeof window !== 'undefined';
 if (isBrowser) window.THREE = THREE;
 
@@ -277,26 +274,7 @@ export default function LiteRenderer(props) {
   var _ref = configData || {},
     logoImg = _ref.logoImg,
     companyUrl = _ref.companyUrl;
-
-  // Build the context value with bound action creators + translator + catalog
-  var translatorRef = useRef(null);
-  if (!translatorRef.current) translatorRef.current = new Translator();
-  var contextValue = useMemo(function () {
-    var store = storeRef.current;
-    var boundActions = objectsMap(actions, function (actionNamespace) {
-      return bindActionCreators(actions[actionNamespace], store.dispatch);
-    });
-    return _objectSpread(_objectSpread({}, boundActions), {}, {
-      translator: translatorRef.current,
-      catalog: catalogRef.current
-    });
-  }, []);
-
-  // Update catalog in context when it changes
-  contextValue.catalog = catalogRef.current;
-  return /*#__PURE__*/React.createElement(AppContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(Provider, {
+  return /*#__PURE__*/React.createElement(AppContext.Provider, null, /*#__PURE__*/React.createElement(Provider, {
     store: storeRef.current
   }, /*#__PURE__*/React.createElement(LiteKitchenConfigurator, _extends({
     catalog: catalogRef.current,

package/es/actions/export.js

@@ -8,16 +8,29 @@ 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 {
+  projectActions,
+  viewer2DActions,
+  viewer3DActions,
+  linesActions,
+  holesActions,
+  sceneActions,
+  verticesActions,
+  itemsActions,
+  areaActions,
+  groupsActions
+};
+
 export default {
-  projectActions: projectActions,
-  viewer2DActions: viewer2DActions,
-  viewer3DActions: viewer3DActions,
-  linesActions: linesActions,
-  holesActions: holesActions,
-  sceneActions: sceneActions,
-  verticesActions: verticesActions,
-  itemsActions: itemsActions,
-  areaActions: areaActions,
-  groupsActions: groupsActions
-};
+  projectActions,
+  viewer2DActions,
+  viewer3DActions,
+  linesActions,
+  holesActions,
+  sceneActions,
+  verticesActions,
+  itemsActions,
+  areaActions,
+  groupsActions
+};

package/es/analytics/ga4.js

@@ -0,0 +1,188 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import ReactGA from 'react-ga4';
+
+// ---------- Helpers ----------
+function nowMs() {
+  return Date.now();
+}
+function getClientName() {
+  return sessionStorage.getItem('visualizerName');
+}
+function isDesktopUA() {
+  // Lightweight heuristic; GA4 also provides device.category. This flag can help ad-hoc filtering.
+  var ua = navigator.userAgent.toLowerCase();
+  var isMobile = /mobi|android|iphone|ipad|ipod|windows phone/.test(ua);
+  return !isMobile;
+}
+
+// ---------- Keys for storage ----------
+var SSN_KEYS = {
+  sessionStartMs: 'ga4_session_start_ms',
+  introChoiceMs: 'ga4_intro_choice_ms',
+  firstCabinetPlaced: 'ga4_first_cabinet_placed',
+  contextBooted: 'ga4_context_booted',
+  enteredCanvasSent: 'ga4_entered_canvas_sent'
+};
+
+// ---------- Core GA wrapper ----------
+export var GA = {
+  init: function init(_ref) {
+    var measurementId = _ref.measurementId;
+    ReactGA.initialize([{
+      trackingId: measurementId
+    }], {
+      testMode: false
+    });
+  },
+  resetSessionKeys: function resetSessionKeys() {
+    Object.values(SSN_KEYS).forEach(function (key) {
+      sessionStorage.removeItem(key);
+    });
+  },
+  /**
+   * Must be called ONCE per page load, *before* other events.
+   * Sets user properties (project_entry, cross_auth) and sends an initial page_view with client_name.
+   */
+  bootSessionContext: function bootSessionContext(_ref2) {
+    var projectEntry = _ref2.projectEntry,
+      crossAuth = _ref2.crossAuth;
+    try {
+      var resolvedClient = getClientName();
+
+      // Persist session start for timing metrics (if not already set for this tab)
+      if (!sessionStorage.getItem(SSN_KEYS.sessionStartMs)) {
+        sessionStorage.setItem(SSN_KEYS.sessionStartMs, String(nowMs()));
+      }
+
+      // Mark context as booted to avoid duplicate property sets on hot reloads
+      if (!sessionStorage.getItem(SSN_KEYS.contextBooted)) {
+        sessionStorage.setItem(SSN_KEYS.contextBooted, '1');
+
+        // Set GA4 user_properties (user-scoped dimensions)
+        ReactGA.gtag('set', 'user_properties', {
+          project_entry: projectEntry,
+          // user scope dimension
+          cross_auth: crossAuth // user scope dimension (boolean serialized)
+        });
+      }
+
+      // Send first page_view hit enriched with event-scoped client_name
+      ReactGA.send({
+        hitType: 'pageview',
+        page: window.location.pathname + window.location.search,
+        // @ts-expect-error react-ga4 passes along additional params into gtag
+        client_name: resolvedClient
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('GA.bootSessionContext error', e);
+    }
+  },
+  // Utility to derive cross_auth from URL (token or details query params)
+  deriveCrossAuthFromUrl: function deriveCrossAuthFromUrl(search) {
+    var sp = new URLSearchParams(search);
+    return sp.has('token') || sp.has('details');
+  },
+  // Utility to derive project entry (best-effort). You can also pass explicitly from router logic.
+  deriveProjectEntry: function deriveProjectEntry() {
+    var projectId = sessionStorage.getItem('projectId');
+
+    // If a project id exists, consider it "open_existing"; otherwise fallback to "new"
+    if (projectId) return 'open_existing';
+    return 'new';
+  },
+  // ---------- Event API ----------
+  events: {
+    /**
+     * intro_choice(option) — records the user's entry choice.
+     * Also stores a timestamp for later time_to_canvas calculation.
+     */
+    introChoice: function introChoice(option, extra) {
+      var client_name = getClientName();
+      sessionStorage.setItem(SSN_KEYS.introChoiceMs, String(nowMs()));
+      ReactGA.event('intro_choice', _objectSpread({
+        client_name: client_name,
+        option: option
+      }, extra || {}));
+    },
+    /**
+     * entered_canvas(time_to_canvas) — compute (now - intro_choice)
+     */
+    enteredCanvas: function enteredCanvas() {
+      // fire only once per tab/session
+      if (sessionStorage.getItem(SSN_KEYS.enteredCanvasSent)) return;
+      var client_name = getClientName();
+      var introMs = Number(sessionStorage.getItem(SSN_KEYS.introChoiceMs) || 0);
+      var timeSec = introMs ? Math.max(0, Math.round((Date.now() - introMs) / 1000)) : undefined;
+      ReactGA.event('entered_canvas', _objectSpread({
+        client_name: client_name
+      }, typeof timeSec === 'number' ? {
+        time_to_canvas: timeSec
+      } : {}));
+      sessionStorage.setItem(SSN_KEYS.enteredCanvasSent, '1'); // 👈 lock it
+    },
+    /**
+     * cabinet_placed(time_to_first_cabinet) — send only for the *first* cabinet of the session.
+     */
+    cabinetPlaced: function cabinetPlaced() {
+      var already = sessionStorage.getItem(SSN_KEYS.firstCabinetPlaced);
+      var client_name = getClientName();
+      var params = {
+        client_name: client_name
+      };
+      if (!already) {
+        var startMs = Number(sessionStorage.getItem(SSN_KEYS.sessionStartMs) || 0);
+        var timeSec = startMs ? Math.max(0, Math.round((nowMs() - startMs) / 1000)) : undefined;
+        if (typeof timeSec === 'number') params.time_to_first_cabinet = timeSec; // custom metric (seconds)
+        sessionStorage.setItem(SSN_KEYS.firstCabinetPlaced, '1');
+      }
+      ReactGA.event('cabinet_placed', params);
+    },
+    /**
+     * door_changed(door_id)
+     */
+    doorChanged: function doorChanged(door_id) {
+      var client_name = getClientName();
+      ReactGA.event('door_changed', {
+        client_name: client_name,
+        door_id: door_id
+      });
+    },
+    /**
+     * project_saved(project_id, save_method) — mark as conversion in GA UI.
+     */
+    projectSaved: function projectSaved(project_id, save_method) {
+      var client_name = getClientName();
+      ReactGA.event('project_saved', {
+        client_name: client_name,
+        project_id: project_id,
+        save_method: save_method
+      });
+    },
+    /**
+     * assistance_requested(method, project_id) — mark as conversion in GA UI.
+     */
+    assistanceRequested: function assistanceRequested(method, project_id) {
+      var client_name = getClientName();
+      ReactGA.event('assistance_requested', {
+        client_name: client_name,
+        method: method,
+        project_id: project_id
+      });
+    },
+    /**
+     * add_to_cart(project_id, sku_count, price_total) — mark as conversion in GA UI.
+     */
+    addToCart: function addToCart(project_id, sku_count, price_total) {
+      var client_name = getClientName();
+      ReactGA.event('add_to_cart', {
+        client_name: client_name,
+        project_id: project_id,
+        sku_count: sku_count,
+        price_total: price_total
+      });
+    }
+  }
+};

package/es/catalog/utils/item-loader.js

@@ -12,8 +12,8 @@ import { ARROW_COLOR, BASE_CABINET_LAYOUTPOS, OBJTYPE_GROUP, OBJTYPE_MESH, SHADE
 import { Item } from "../../models";
 import * as GeomUtils from "./geom-utils";
 import { loadGLTF } from "./load-obj";
-import { animateDoor, getSkuAliasFromCatalogElement, isEmpty, translateDrawer } from "../../utils/helper";
-import { isWarningItem } from "../../components/viewer2d/utils";
+import { animateDoor, getCatalogCabinetSku, isEmpty, translateDrawer } from "../../utils/helper";
+import { isWarningCabinet } from "../../shared/domain/cabinet-warning";
 import { orderCabinetAssemblyKeys } from "../cabinet/cabinet-assembly-order";
 var INITIAL_NORMAL_MAP = '';
 
@@ -124,7 +124,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
   var rowCount = 0; //parseInt((element.type.length / lineCount - 0.51).toFixed(), 10);
 
   // Get SKU Alias
-  var objSKU = getSkuAliasFromCatalogElement(this, element);
+  var objSKU = getCatalogCabinetSku(element);
   if (rowCount > 0) {
     for (var _x = 0; _x < rowCount; _x++) {
       splitStr.push(objSKU.slice(lineCount * _x, lineCount * (_x + 1)));
@@ -293,7 +293,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
     }), /*#__PURE__*/React.createElement("g", {
       transform: "translate(".concat(padding_width, ",").concat(padding_depth, ")")
     }, txtContent)), element.category === 'cabinet' && /*#__PURE__*/React.createElement("g", {
-      visibility: isWarningItem(element) ? 'visible' : 'hidden'
+      visibility: isWarningCabinet(element) ? 'visible' : 'hidden'
     }, warning_buttons)));
   } else {
     rendered = /*#__PURE__*/React.createElement("g", {

package/es/class/item.js

@@ -105,9 +105,16 @@ var Item = /*#__PURE__*/function () {
       }
       if (item.category === 'cabinet') {
         if (isDuplication && refItem) {
+          var _refItem$ccdf, _refItem$get;
           item = item.merge({
             doorStyle: refItem.doorStyle
           });
+          // When duplicating, preserve the instance-selected CCDF from the source cabinet.
+          var refCcdf = (_refItem$ccdf = refItem === null || refItem === void 0 ? void 0 : refItem.ccdf) !== null && _refItem$ccdf !== void 0 ? _refItem$ccdf : refItem === null || refItem === void 0 || (_refItem$get = refItem.get) === null || _refItem$get === void 0 ? void 0 : _refItem$get.call(refItem, 'ccdf');
+          refCcdf = toJSIfNeeded(refCcdf);
+          if (!isEmpty(refCcdf)) item = item.merge({
+            ccdf: refCcdf
+          });
         } else {
           var _layer$doorStyle, _temp, _ref, _temp$doorStyles$cds$, _temp2, _temp3, _state5;
           var layer = state.getIn(['scene', 'layers', layerID]);
@@ -254,8 +261,7 @@ var Item = /*#__PURE__*/function () {
       var doorFinishId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
       var layerID = state.getIn(['scene', 'selectedLayer']);
       var layer = state.getIn(['scene', 'layers', layerID]);
-      var desiredDoorFinishId = doorFinishId !== null && doorFinishId !== void 0 ? doorFinishId : this.__getDesiredDoorFinishId(layer);
-      if (!Array.isArray(ccdf_list) || !desiredDoorFinishId) return {
+      if (!Array.isArray(ccdf_list)) return {
         updatedState: state
       };
 
@@ -267,9 +273,27 @@ var Item = /*#__PURE__*/function () {
       } else if (applyScope === DOORSTYLE_SCOPE_MULTIPLE) {
         idSet = new Set(targetItemIDs);
       }
+
+      // If host returns an empty ccdf_list, remove assets3d of persisted ccdf from affected instances.
+      // This keeps SYNC payload from sending stale `items[].ccdf`.
+      if (ccdf_list.length === 0) {
+        layer.items.forEach(function (it) {
+          var _idSet;
+          var should = applyScope === DOORSTYLE_SCOPE_ALL ? true : (_idSet = idSet) === null || _idSet === void 0 ? void 0 : _idSet.has(it.id);
+          if (!should) return;
+          state = state.deleteIn(['scene', 'layers', layerID, 'items', it.id, 'ccdf', 'assets3d']);
+        });
+        return {
+          updatedState: state
+        };
+      }
+      var desiredDoorFinishId = doorFinishId !== null && doorFinishId !== void 0 ? doorFinishId : this.__getDesiredDoorFinishId(layer);
+      if (!desiredDoorFinishId) return {
+        updatedState: state
+      };
       layer.items.forEach(function (it) {
-        var _idSet, _picked$door_finish_i;
-        var should = applyScope === DOORSTYLE_SCOPE_ALL ? true : (_idSet = idSet) === null || _idSet === void 0 ? void 0 : _idSet.has(it.id);
+        var _idSet2, _picked$door_finish_i;
+        var should = applyScope === DOORSTYLE_SCOPE_ALL ? true : (_idSet2 = idSet) === null || _idSet2 === void 0 ? void 0 : _idSet2.has(it.id);
         if (!should) return;
 
         // Join key: scene_cabinet_id (instance id).
@@ -567,9 +591,7 @@ var Item = /*#__PURE__*/function () {
           break;
       }
       if (onInternalEvent && duplicatedElement) {
-        var _state$get;
-        var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
-        var jsElement = updatePayloadOfInternalEvent(duplicatedElement, layer, catalog);
+        var jsElement = updatePayloadOfInternalEvent(duplicatedElement, layer);
         onInternalEvent({
           type: INTERNAL_EVENT_DRAW_ELEMENT,
           value: jsElement

package/es/class/line.js

@@ -427,7 +427,6 @@ var Line = /*#__PURE__*/function () {
   }, {
     key: "beginDrawingLine",
     value: function beginDrawingLine(state, layerID, x, y, onInternalEvent) {
-      var _state$get;
       // if end drawing by created area
       if (state.mode == MODE_IDLE) {
         return {
@@ -481,8 +480,7 @@ var Line = /*#__PURE__*/function () {
         drawingSupport: drawingSupport
       });
       var layer = state.getIn(['scene', 'layers', layerID]);
-      var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
-      var payload = updatePayloadOfInternalEvent(line, layer, catalog);
+      var payload = updatePayloadOfInternalEvent(line, layer);
       if (onInternalEvent) onInternalEvent({
         type: INTERNAL_EVENT_START_DRAW_WALL,
         value: payload

package/es/components/content.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Viewer2D from "./viewer2d/viewer2d";
 import Viewer3D from "./viewer3d/viewer3d";
@@ -20,11 +20,23 @@ export default function Content(_ref) {
   var mode = state.get('mode');
 
   // Internal Event for unselect_all
+  var prevSelectedCountRef = useRef(null);
   useEffect(function () {
-    if (state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size < 1) onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-      type: constants.INTERNAL_EVENT_UNSELECT_ALL,
-      value: null
-    });
+    var selectedCount = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size;
+
+    // Skip the initial mount/hydration; only emit when selection transitions from non-empty -> empty.
+    if (prevSelectedCountRef.current === null) {
+      prevSelectedCountRef.current = selectedCount;
+      return;
+    }
+    var prevSelectedCount = prevSelectedCountRef.current;
+    prevSelectedCountRef.current = selectedCount;
+    if (prevSelectedCount > 0 && selectedCount < 1) {
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: constants.INTERNAL_EVENT_UNSELECT_ALL,
+        value: null
+      });
+    }
   }, [state.getIn(['scene', 'layers', 'layer-1', 'selected'])]);
   switch (mode) {
     // this mode is when view elevation
@@ -131,4 +143,7 @@ Content.propTypes = {
   height: PropTypes.number.isRequired,
   replaceCabinet: PropTypes.func.isRequired,
   onInternalEvent: PropTypes.func.isRequired
+};
+Content.contextTypes = {
+  projectActions: PropTypes.object.isRequired
 };

package/es/components/export.js

@@ -1,5 +1,7 @@
 import Content from "./content";
-export { Content };
-export default {
-  Content: Content
-};
+import Viewer2DComponents from "./viewer2d/export";
+import StyleComponents from "./style/export";
+
+export { Content, Viewer2DComponents, StyleComponents };
+
+export default { Content, Viewer2DComponents, StyleComponents };

package/es/components/style/form-number-input.js

@@ -3,14 +3,12 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import AppContext from "../../AppContext";
 import { KEYBOARD_BUTTON_CODE, TEXT_COLOR_NEUTRAL_0, SECONDARY_PURPLE_COLOR, DEFAULT_FONT_FAMILY } from "../../constants";
 import styled from 'styled-components';
 import { isValidNumber } from "../../utils/helper";
@@ -40,8 +38,8 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
       }
     }
   }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
       if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
         this.setState({
           showedValue: nextProps.value,
@@ -155,7 +153,6 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
-_defineProperty(FormNumberInput, "contextType", AppContext);
 export { FormNumberInput as default };
 FormNumberInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -170,6 +167,11 @@ FormNumberInput.propTypes = {
   labelName: PropTypes.string,
   isCeiling: PropTypes.string
 };
+FormNumberInput.contextTypes = {
+  translator: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired
+};
 FormNumberInput.defaultProps = {
   value: 0,
   style: {},

package/es/components/style/form-submit-button.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Button from "./button";
+import * as SharedStyle from "../../shared-style";
+var STYLE = {
+  borderColor: '#415375',
+  backgroundColor: '#415375',
+  color: SharedStyle.COLORS.white
+};
+var STYLE_HOVER = {
+  borderColor: '#1f3149',
+  backgroundColor: '#1f3149',
+  color: SharedStyle.COLORS.white
+};
+export default function FormSubmitButton(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    type: "submit",
+    style: STYLE,
+    styleHover: STYLE_HOVER
+  }, rest), children);
+}

package/es/components/viewer2d/group.js

@@ -1,6 +1,5 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import AppContext from "../../AppContext";
 import If from "../../utils/react-if";
 import * as sharedStyles from "../../shared-style";
 var cx = 0;
@@ -11,13 +10,12 @@ var STYLE_CIRCLE = {
   stroke: sharedStyles.MATERIAL_COLORS[500].orange,
   cursor: 'default'
 };
-export default function Group(_ref) {
+export default function Group(_ref, _ref2) {
   var layer = _ref.layer,
     group = _ref.group,
     scene = _ref.scene,
     catalog = _ref.catalog;
-  var _useContext = useContext(AppContext),
-    translator = _useContext.translator;
+  var translator = _ref2.translator;
   return /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
     "data-prototype": group.prototype,
@@ -49,4 +47,7 @@ Group.propTypes = {
   layer: PropTypes.object.isRequired,
   scene: PropTypes.object.isRequired,
   catalog: PropTypes.object.isRequired
+};
+Group.contextTypes = {
+  translator: PropTypes.object.isRequired
 };