@threekit-tools/treble 0.0.35 → 0.0.38

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

@@ -5,6 +5,7 @@ export interface ISwatch extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
     showPrice?: boolean;
     showDescription?: boolean;
+    size?: string;
 }
 export declare const Swatch: {
     (props: ISwatch): JSX.Element;
@@ -37,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,13 +24,13 @@ 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' }, 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;
+    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;
     var cls = (0, utils_1.generateInputClassName)('swatch', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
@@ -45,9 +45,9 @@ var Swatch = function (props) {
             }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
             var selected = value === optionValue;
             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 },
+            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/Swatch/swatch.styles.d.ts

@@ -1,5 +1,6 @@
 interface IOption {
     shape?: string;
+    size?: string;
 }
 interface IOptionWrapper extends IOption {
     selected: boolean;

package/dist/components/Swatch/swatch.styles.js

@@ -10,16 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionWrapper = exports.SwatchInfoWrapper = exports.OptionThumbnail = exports.OptionWrapperStyles = exports.SwatchWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.SwatchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  & > div {\n    margin-bottom: 5px;\n  }\n\n  & > div:not(:last-child) {\n    margin-right: 5px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  & > div {\n    margin-bottom: 5px;\n  }\n\n  & > div:not(:last-child) {\n    margin-right: 5px;\n  }\n"])));
-exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 60px;\n  width: 60px;\n  border-radius: ", ";\n\n  & > div:first-child {\n    height: 60px;\n    width: 60px;\n    border-radius: ", ";\n    border: 2px solid\n      ", ";\n\n    padding: 2px;\n\n    cursor: pointer;\n    transition: all 0.3s;\n\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  height: 60px;\n  width: 60px;\n  border-radius: ", ";\n\n  & > div:first-child {\n    height: 60px;\n    width: 60px;\n    border-radius: ", ";\n    border: 2px solid\n      ", ";\n\n    padding: 2px;\n\n    cursor: pointer;\n    transition: all 0.3s;\n\n    &:hover {\n      ", "\n    }\n  }\n"])), function (props) {
+exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n\n  & > div:first-child {\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    border: 2px solid\n      ", ";\n\n    padding: 2px;\n\n    cursor: pointer;\n    transition: all 0.3s;\n\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n\n  & > div:first-child {\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    border: 2px solid\n      ", ";\n\n    padding: 2px;\n\n    cursor: pointer;\n    transition: all 0.3s;\n\n    &:hover {\n      ", "\n    }\n  }\n"])), function (props) { return props.size || '60px'; }, function (props) { return props.size || '60px'; }, function (props) {
     return props.shape === 'round' ? '50%' : props.theme.borderRadius;
-}, function (props) {
+}, function (props) { return props.size || '60px'; }, function (props) { return props.size || '60px'; }, function (props) {
     return props.shape === 'round' ? '50%' : props.theme.borderRadius;
 }, function (props) { return (props.selected ? props.theme.primaryColor : '#00000000'); }, function (props) {
     return props.selected
         ? ''
         : "border: 2px solid ".concat(props.theme.primaryColor, "55;");
 });
-exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 52px;\n  width: 52px;\n  text-align: center;\n  display: block;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 52px;\n  width: 52px;\n  text-align: center;\n  display: block;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) {
+exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  text-align: center;\n  display: block;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: ", ";\n  width: ", ";\n  text-align: center;\n  display: block;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) { return (props.size ? "calc(".concat(props.size, " - 8px)") : '52px'); }, function (props) { return (props.size ? "calc(".concat(props.size, " - 8px)") : '52px'); }, function (props) {
     return props.shape === 'round' ? '50%' : props.theme.borderRadius;
 }, function (props) { return (props.color ? "background: ".concat(props.color, ";") : ''); });
 exports.SwatchInfoWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: max-content;\n  position: relative;\n  top: -100%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n  padding-bottom: 4px;\n  color: white;\n  font-family: ", ";\n\n  display: none;\n\n  & > div:nth-child(1) {\n    background: rgba(0, 0, 0, 0.6);\n    padding: 4px 6px;\n    border-radius: ", ";\n    max-width: 250px;\n  }\n\n  & > div:nth-child(2) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n\n    & > div {\n      width: 0;\n      height: 0;\n      border-left: 8px solid transparent;\n      border-right: 8px solid transparent;\n\n      border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n      overflow: hidden;\n      pointer-events: none;\n    }\n  }\n"], ["\n  width: max-content;\n  position: relative;\n  top: -100%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n  padding-bottom: 4px;\n  color: white;\n  font-family: ", ";\n\n  display: none;\n\n  & > div:nth-child(1) {\n    background: rgba(0, 0, 0, 0.6);\n    padding: 4px 6px;\n    border-radius: ", ";\n    max-width: 250px;\n  }\n\n  & > div:nth-child(2) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n\n    & > div {\n      width: 0;\n      height: 0;\n      border-left: 8px solid transparent;\n      border-right: 8px solid transparent;\n\n      border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n      overflow: hidden;\n      pointer-events: none;\n    }\n  }\n"])), function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.borderRadius; });

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/components/TrebleApp/index.js

@@ -33,6 +33,7 @@ function TrebleApp(props) {
     var _a;
     var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme;
     var config = constants_1.IS_TREBLE_SCRIPTS ? (0, utils_1.loadTrebleConfig)() : {};
+    console.log(config);
     if (!((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx)) {
         console.error('Treble Config is not setup correctly');
         return null;

package/dist/utils.js

@@ -351,28 +351,30 @@ var isUuid = function (str) {
 exports.isUuid = isUuid;
 var loadTrebleConfig = function () {
     var config = {};
+    try {
+        var project = require("/threekit.config.js").default;
+        if (project)
+            config.project = project;
+    }
+    catch (e) {
+        console.log(e);
+    }
+    try {
+        var player = require('/.treble/player.config.js').default;
+        if (player)
+            config.player = player;
+    }
+    catch (e) {
+        console.log(e);
+    }
+    try {
+        var treble = require('/.treble/treble.config.js').default;
+        if (treble)
+            config.treble = treble;
+    }
+    catch (e) {
+        console.log(e);
+    }
     return config;
 };
 exports.loadTrebleConfig = loadTrebleConfig;
-// export const loadTrebleConfig = () => {
-//   let config: Partial<ITrebleConfig> = {};
-//   try {
-//     const project = require(`/threekit.config.js`).default;
-//     if (project) config.project = project;
-//   } catch (e) {
-//     console.log(e);
-//   }
-//   try {
-//     const player = require('/.treble/player.config.js').default;
-//     if (player) config.player = player;
-//   } catch (e) {
-//     console.log(e);
-//   }
-//   try {
-//     const treble = require('/.treble/treble.config.js').default;
-//     if (treble) config.treble = treble;
-//   } catch (e) {
-//     console.log(e);
-//   }
-//   return config;
-// };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.35",
+  "version": "0.0.38",
   "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"
 }