@threekit-tools/treble 0.0.36 → 0.0.39

package/README.md

@@ -261,11 +261,10 @@ The `<Player />` component renders the **Threekit Player**.
 
 ```jsx
 import { ThreekitProvider, Player } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 const ThreekitApp = () => {
   return (
-    <ThreekitProvider {...threekitConfig}>
+    <ThreekitProvider>
       <Player />
     </ThreekitProvider>
   );
@@ -278,7 +277,6 @@ The Player Component also comes with **widget containers** that can be used to p
 
 ```jsx
 import { ThreekitProvider, Player } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 //  We can separate out the widget container component
 //  or use the component directly from the Player component
@@ -311,7 +309,6 @@ The `<FlatForm>` component is used to render out the configurator for the initia
 
 ```jsx
 import { ThreekitProvider, FlatForm } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 const App = () => {
   return (
@@ -357,7 +354,6 @@ By default the Form will not render reserved attributes. This can be controlled/
 
 ```jsx
 import { ThreekitProvider, FlatForm } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 const App = () => {
   const attributes = {

package/dist/components/Player/index.js

@@ -36,12 +36,16 @@ var Player = function (props) {
         width: '100%',
     }, props), height = _a.height, width = _a.width, minHeight = _a.minHeight, children = _a.children;
     var hasMoved = (0, react_1.useRef)(false);
-    var portalPlayerTo = (0, usePlayerPortal_1.default)();
+    var _b = (0, usePlayerPortal_1.default)(), portalPlayerTo = _b[0], portalBack = _b[1];
     (0, react_1.useEffect)(function () {
         if (portalPlayerTo && !hasMoved.current) {
             portalPlayerTo(exports.PLAYER_DIV_ID);
             hasMoved.current = true;
         }
+        return function () {
+            if (portalBack)
+                portalBack();
+        };
     });
     return (react_1.default.createElement(player_styles_1.Wrapper, { height: height, width: width, minHeight: minHeight, className: className },
         react_1.default.createElement("div", { id: exports.PLAYER_DIV_ID }),

package/dist/components/Swatch/index.d.ts

@@ -38,6 +38,12 @@ export declare const Swatch: {
          * Handles the user seletion by passing the value of the selected
          * option as the argument into the onClick callback.
          */
+        size: PropTypes.Requireable<string>;
+        /**
+         * The size of the for a swatch option. The size should be a valid CSS
+         * height/width property.
+         *
+         */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * The options set to be displayed for the user

package/dist/components/Swatch/index.js

@@ -24,10 +24,10 @@ var SwatchInfo = function (props) {
             react_1.default.createElement("div", null))));
 };
 var Thumbnail = function (props) {
-    var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, className = props.className;
+    var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, size = props.size, className = props.className;
     if (!imageUrl && !color)
         return react_1.default.createElement("div", null);
-    return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
+    return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape, size: size }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
 };
 var Swatch = function (props) {
     var _a = Object.assign({ shape: 'round', size: '60px' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription, size = _a.size;
@@ -47,7 +47,7 @@ var Swatch = function (props) {
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
             return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt, shape: shape, size: size },
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt })),
+                    react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt, size: size })),
                 react_1.default.createElement(SwatchInfo, { title: name, price: price, description: description })));
         }))));
 };
@@ -81,6 +81,12 @@ exports.Swatch.propTypes = {
      * Handles the user seletion by passing the value of the selected
      * option as the argument into the onClick callback.
      */
+    size: prop_types_1.default.string,
+    /**
+     * The size of the for a swatch option. The size should be a valid CSS
+     * height/width property.
+     *
+     */
     onClick: prop_types_1.default.func,
     /**
      * The options set to be displayed for the user

package/dist/components/ThreekitProvider/index.js

@@ -38,7 +38,7 @@ var App = function (props) {
         };
         init();
         return;
-    }, [props.project, props.threekitEnv, , props.playerConfig]);
+    }, [props.project, props.threekitEnv, props.playerConfig]);
     return react_1.default.createElement(react_1.default.Fragment, null, props.children);
 };
 var ThreekitProvider = function (props) {

package/dist/constants.d.ts

@@ -21,6 +21,7 @@ export declare const TK_SAVED_CONFIG_PARAM_KEY = "tkConfigId";
 /*****************************************************
  * Threekit Player Initialization Defaults
  ****************************************************/
+export declare const TK_PLAYER_LOADER_DIV = "tk-ply-loader";
 export declare const TK_PLAYER_ROOT_DIV = "tk-ply-root";
 export declare const DEFAULT_PLAYER_CONFIG: {
     showConfigurator: boolean;

package/dist/constants.js

@@ -4,7 +4,7 @@
  ****************************************************/
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.IS_TREBLE_SCRIPTS = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
+exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_PLAYER_LOADER_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.IS_TREBLE_SCRIPTS = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
 exports.DEFAULT_CLASS_NAME = 'threekit-react';
 exports.CLASS_NAME_PREFIX = 'tk';
 exports.INPUT_COMPONENT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-input");
@@ -25,6 +25,7 @@ exports.TK_SAVED_CONFIG_PARAM_KEY = 'tkConfigId';
 /*****************************************************
  * Threekit Player Initialization Defaults
  ****************************************************/
+exports.TK_PLAYER_LOADER_DIV = 'tk-ply-loader';
 exports.TK_PLAYER_ROOT_DIV = 'tk-ply-root';
 exports.DEFAULT_PLAYER_CONFIG = {
     // authToken: undefined,

package/dist/hooks/usePlayerPortal/index.d.ts

@@ -1,2 +1,3 @@
-declare const usePlayerPortal: () => ((toEl: string) => void) | undefined;
+declare type UsePlayerPortal = [undefined, undefined] | [(toEl: string) => void, () => void];
+declare const usePlayerPortal: () => UsePlayerPortal;
 export default usePlayerPortal;

package/dist/hooks/usePlayerPortal/index.js

@@ -1,22 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
 var react_redux_1 = require("react-redux");
 var threekit_1 = require("../../store/threekit");
+var constants_1 = require("../../constants");
 var usePlayerPortal = function () {
+    var htmlElements = (0, react_1.useRef)({
+        player: null,
+        playerLoader: null,
+        playerWrapper: null,
+    });
     var playerElementId = (0, react_redux_1.useSelector)(threekit_1.getPlayerElementId);
     if (!playerElementId)
-        return undefined;
+        return [undefined, undefined];
     var portalPlayerTo = function (toEl) {
         if (!toEl)
             return;
-        var playerEl = document.getElementById(playerElementId);
-        var playerWrapperEl = document.getElementById(toEl);
-        if (!playerEl)
+        if (!htmlElements.current.player)
+            htmlElements.current.player = document.getElementById(playerElementId);
+        htmlElements.current.playerWrapper = document.getElementById(toEl);
+        if (!htmlElements.current.player)
             throw new Error('Move from element not found');
-        if (!playerWrapperEl)
+        if (!htmlElements.current.playerWrapper)
             throw new Error('Move To element not found');
-        playerWrapperEl.appendChild(playerEl);
+        htmlElements.current.playerWrapper.appendChild(htmlElements.current.player);
     };
-    return portalPlayerTo;
+    var returnPlayer = function () {
+        constants_1.TK_PLAYER_LOADER_DIV;
+        if (!htmlElements.current.player)
+            htmlElements.current.player = document.getElementById(playerElementId);
+        if (!htmlElements.current.playerLoader)
+            htmlElements.current.playerLoader =
+                document.getElementById(constants_1.TK_PLAYER_LOADER_DIV);
+        if (!htmlElements.current.player)
+            throw new Error('Move from element not found');
+        if (!htmlElements.current.playerLoader)
+            throw new Error('Player Loader element not found');
+        htmlElements.current.playerLoader.appendChild(htmlElements.current.player);
+    };
+    return [portalPlayerTo, returnPlayer];
 };
 exports.default = usePlayerPortal;

package/dist/hooks/useZoom/index.d.ts

@@ -1,2 +1,3 @@
-declare const useZoom: () => [(step: number) => void, (step: number) => void];
+declare type UseZoom = [(step: number) => void, (step: number) => void];
+declare const useZoom: () => UseZoom;
 export default useZoom;

package/dist/store/threekit.js

@@ -75,7 +75,7 @@ var createPlayerLoaderEl = function (elementId) {
     playerElement.setAttribute('id', elementId);
     playerElement.style.height = '100%';
     var playerLoader = document.createElement('div');
-    playerLoader.setAttribute('id', 'tk-player-loader');
+    playerLoader.setAttribute('id', constants_1.TK_PLAYER_LOADER_DIV);
     playerLoader.appendChild(playerElement);
     playerLoader.style.opacity = '0';
     playerLoader.style.height = '1px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.36",
+  "version": "0.0.39",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -32,10 +32,6 @@
     "reselect": "^4.1.2",
     "styled-components": "^5.3.3"
   },
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@storybook/addon-actions": "^6.3.12",
@@ -45,16 +41,18 @@
     "@storybook/addon-storysource": "^6.3.12",
     "@storybook/react": "^6.3.12",
     "@types/node": "^16.10.3",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": ">=17.0.27",
+    "@types/react-dom": ">=17.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.15",
     "@types/webpack-env": "^1.16.3",
     "babel-loader": "^8.2.2",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
     "rimraf": "^3.0.2",
     "serve": "^12.0.1",
     "storybook-addon-styled-component-theme": "^2.0.0",
-    "typescript": "^4.4.4"
+    "typescript": ">=4.4.4"
   },
   "gitHead": "2e16bcf98f81e16bb1768072fdb3968122e7966f"
 }