@threekit-tools/treble 0.0.51 → 0.0.55

package/dist/Treble/Treble.d.ts

@@ -1,10 +1,11 @@
 import threekitAPI from '../api';
-import { IThreekitPlayer, IMetadata } from '../threekit';
+import { IThreekitPlayer, IMetadata, IConfiguration, ISetConfiguration } from '../threekit';
 import { IWishlist } from './Wishlist';
 import Snapshots from './Snapshots';
 interface ITreble {
     player: IThreekitPlayer;
     orgId: string;
+    initialConfiguration: IConfiguration;
 }
 export interface ISaveConfigurationConfig {
     customerId?: string;
@@ -15,14 +16,16 @@ declare class Treble {
     _api: typeof threekitAPI;
     _player: IThreekitPlayer;
     wishlist: IWishlist;
+    private _initialConfiguration;
     private _snapshots;
     takeSnapshots: Snapshots['takeSnapshots'];
-    constructor({ player, orgId }: ITreble);
+    constructor({ player, orgId, initialConfiguration }: ITreble);
     saveConfiguration: (config?: ISaveConfigurationConfig | undefined) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;
     }>;
     getNestedConfigurator: (address: string | Array<string>) => any;
+    resetConfiguration: (configuration?: ISetConfiguration | undefined) => void;
 }
 export default Treble;

package/dist/Treble/Treble.js

@@ -48,7 +48,7 @@ var Snapshots_1 = __importDefault(require("./Snapshots"));
 var Treble = /** @class */ (function () {
     function Treble(_a) {
         var _this = this;
-        var player = _a.player, orgId = _a.orgId;
+        var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
             var threekitDomain, _a, customerId, metadata, productVersion, files, response, params, url;
             var _b;
@@ -94,6 +94,11 @@ var Treble = /** @class */ (function () {
                 }).configurator;
             }, player.getConfigurator());
         };
+        this.resetConfiguration = function (configuration) {
+            var initialConfiguration = JSON.parse(_this._initialConfiguration);
+            var updateConfiguration = Object.assign(initialConfiguration, configuration);
+            window.threekit.configurator.setConfiguration(updateConfiguration);
+        };
         //  Threekit API
         this._api = api_1.default;
         this._player = player;
@@ -101,6 +106,7 @@ var Treble = /** @class */ (function () {
         this._snapshots = new Snapshots_1.default();
         this.takeSnapshots = this._snapshots.takeSnapshots;
         // this._player = player.enableApi('player');
+        this._initialConfiguration = JSON.stringify(initialConfiguration);
     }
     return Treble;
 }());

package/dist/api/catalog.d.ts

@@ -0,0 +1 @@
+export declare const uploadAsset: (file: File) => Promise<string | undefined>;

package/dist/api/catalog.js

@@ -0,0 +1,86 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadAsset = void 0;
+var http_1 = __importDefault(require("../http"));
+var uploadAsset = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+    var error, formData, uploadResponse, jobId, assetId, count, checkRes, output;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!file)
+                    error = 'Requires a File';
+                if (error)
+                    throw new Error(error);
+                formData = new FormData();
+                formData.append('files', file, file.name);
+                return [4 /*yield*/, http_1.default.catalog.uploadAsset(formData)];
+            case 1:
+                uploadResponse = _a.sent();
+                jobId = uploadResponse.data[0].jobId;
+                count = 30;
+                _a.label = 2;
+            case 2:
+                if (!(count > 1 && !assetId)) return [3 /*break*/, 5];
+                return [4 /*yield*/, new Promise(function (resolve) {
+                        return setTimeout(function () { return resolve(undefined); }, 0.5 * 1000);
+                    })];
+            case 3:
+                _a.sent();
+                return [4 /*yield*/, http_1.default.catalog.getJobStatus(jobId)];
+            case 4:
+                checkRes = _a.sent();
+                ++count;
+                if (checkRes.data.output) {
+                    output = checkRes.data.output;
+                    if (output.texture.length) {
+                        assetId = output.texture[0].assetId;
+                    }
+                    else if (output.vector.length) {
+                        assetId = output.vector[0].assetId;
+                    }
+                }
+                return [3 /*break*/, 2];
+            case 5: return [2 /*return*/, assetId];
+        }
+    });
+}); };
+exports.uploadAsset = uploadAsset;

package/dist/api/index.d.ts

@@ -2,10 +2,12 @@ import * as products from './products';
 import * as configurations from './configurations';
 import * as price from './price';
 import * as orders from './orders';
+import * as catalog from './catalog';
 declare const _default: {
     products: typeof products;
     configurations: typeof configurations;
     price: typeof price;
     orders: typeof orders;
+    catalog: typeof catalog;
 };
 export default _default;

package/dist/api/index.js

@@ -23,9 +23,11 @@ var products = __importStar(require("./products"));
 var configurations = __importStar(require("./configurations"));
 var price = __importStar(require("./price"));
 var orders = __importStar(require("./orders"));
+var catalog = __importStar(require("./catalog"));
 exports.default = {
     products: products,
     configurations: configurations,
     price: price,
     orders: orders,
+    catalog: catalog,
 };

package/dist/components/FlatForm/index.js

@@ -23,6 +23,7 @@ var ProductDescription_1 = __importDefault(require("../ProductDescription"));
 var formComponents_1 = __importDefault(require("../formComponents"));
 var utils_1 = require("../../utils");
 var useConfigurator_1 = __importDefault(require("../../hooks/useConfigurator"));
+var constants_1 = require("../../constants");
 var FlatForm = function (props) {
     var _a = Object.assign({
         alignTitle: 'center',
@@ -43,18 +44,23 @@ var FlatForm = function (props) {
             var _a, _b, _c, _d, _e, _f;
             var Component;
             var props = ((_b = (_a = (attributes || {})) === null || _a === void 0 ? void 0 : _a[attr.name]) === null || _b === void 0 ? void 0 : _b.props) || {};
+            var type = attr.type;
+            if (type === 'Asset' &&
+                attr.assetType === constants_1.ASSET_TYPES.upload) {
+                type = attr.assetType;
+            }
             if ((_d = (_c = (attributes || {})) === null || _c === void 0 ? void 0 : _c[attr.name]) === null || _d === void 0 ? void 0 : _d.component) {
-                Component = (_e = Object.entries(formComponents_1.default[attr.type] || {}).find(function (_a) {
+                Component = (_e = Object.entries(formComponents_1.default[type] || {}).find(function (_a) {
                     var _b, _c;
                     var key = _a[0];
                     return key === ((_c = (_b = (attributes || {})) === null || _b === void 0 ? void 0 : _b[attr.name]) === null || _c === void 0 ? void 0 : _c.component.toLowerCase());
                 })) === null || _e === void 0 ? void 0 : _e[1];
             }
             if (!Component) {
-                Component = (_f = Object.values(formComponents_1.default[attr.type] || {})) === null || _f === void 0 ? void 0 : _f[0];
+                Component = (_f = Object.values(formComponents_1.default[type] || {})) === null || _f === void 0 ? void 0 : _f[0];
             }
             if (!Component) {
-                console.log("No default component available for ".concat(attr.type, " type Attributes"));
+                console.log("No default component available for ".concat(type, " type Attributes"));
                 return null;
             }
             return (react_1.default.createElement(Component, __assign({ key: i, className: customClassName, attribute: attr.name }, props)));

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
+export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
+    onChange: (file: File) => Promise<void>;
+}
+export declare const Upload: {
+    (props: IUpload): JSX.Element;
+    componentName: string;
+    compatibleAttributes: Set<string>;
+};
+declare const _default: (props: IUpload) => JSX.Element | null;
+export default _default;

package/dist/components/Upload/index.js

@@ -0,0 +1,137 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Upload = void 0;
+var react_1 = __importStar(require("react"));
+var constants_1 = require("../../constants");
+var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
+var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
+var shared_styles_1 = require("../shared.styles");
+var utils_1 = require("../../utils");
+var icons_1 = require("../../icons");
+var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+var upload_styles_1 = require("./upload.styles");
+var Upload = function (props) {
+    var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
+    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
+    var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
+    var inputRef = (0, react_1.createRef)();
+    var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
+    var handleClick = function () {
+        var _a;
+        if (isUploading)
+            return;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+        var reader;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsUploading(true);
+                    return [4 /*yield*/, onChange(file)];
+                case 1:
+                    _a.sent();
+                    setIsUploading(false);
+                    setFilename(file.name);
+                    reader = new FileReader();
+                    reader.onload = function () {
+                        var imgEl = document.getElementById('trbl-upload-img');
+                        if (!imgEl)
+                            return;
+                        // @ts-ignore
+                        imgEl.src = reader.result;
+                    };
+                    reader.readAsDataURL(file);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
+        react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
+        react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
+        react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls },
+            react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                    var _a;
+                    return __generator(this, function (_b) {
+                        if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || !onChange)
+                            return [2 /*return*/];
+                        handleUpload(e.target.files[0]);
+                        return [2 /*return*/];
+                    });
+                }); } }),
+            react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
+                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("img", { src: "#", id: "trbl-upload-img" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", null, filename),
+                    react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(icons_1.ImageIcon, null)),
+                react_1.default.createElement("div", null, "Click to upload"),
+                react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
+};
+exports.Upload = Upload;
+exports.Upload.componentName = 'upload';
+exports.Upload.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
+exports.default = (0, formInputContainer_1.default)(exports.Upload);

package/dist/components/Upload/upload.styles.d.ts

@@ -0,0 +1,7 @@
+interface IUploadWrapper {
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+}
+export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
+export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/Upload/upload.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadingWrapper = exports.UploadWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"])), function (props) {
+    return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
+}, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
+exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/containers/formInputContainer.d.ts

@@ -10,11 +10,14 @@ export interface IOption extends IOptionShared {
     color?: string;
     imageUrl?: string;
 }
-export interface IFormContainerProps {
-    attribute?: string;
+interface MetadataKeys {
+    imgBaseUrl?: string;
     metadataKeyThumbnail?: string;
-    metadataKeyDescription?: string;
     metadataKeyPrice?: string;
+    metadataKeyDescription?: string;
+}
+export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThumbnail' | 'metadataKeyPrice' | 'metadataKeyDescription'> {
+    attribute?: string;
     hideAttributeTitle?: string;
     sort?: string;
     title?: string;
@@ -23,23 +26,12 @@ export interface IFormContainerProps {
     onClick?: (value: string) => void;
     className?: string;
 }
-export interface IFormComponentProps<T extends IOptionShared> {
-    title?: string;
-    description?: string;
-    value?: string;
-    onClick?: (value: string) => void;
-    className?: string;
+export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'className'> {
     options: null | undefined | Array<T>;
 }
 export interface IFormComponent<P> extends FunctionComponent<P> {
     compatibleAttributes: Set<string>;
 }
-interface MetadataKeys {
-    imgBaseUrl?: string;
-    metadataKeyThumbnail?: string;
-    metadataKeyPrice?: string;
-    metadataKeyDescription?: string;
-}
 interface IPrepAttributeConfig {
     metadataKeys: MetadataKeys;
     sort?: string;

package/dist/components/formComponents.d.ts

@@ -2,6 +2,8 @@
 export declare const formComponents: {
     [x: string]: {
         [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
+    } | {
+        [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
     };
 };
 export default formComponents;

package/dist/components/formComponents.js

@@ -18,7 +18,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a, _b, _c;
+var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formComponents = void 0;
 var constants_1 = require("../constants");
@@ -28,6 +28,7 @@ var Strips_1 = __importStar(require("./Strips"));
 var Swatch_1 = __importStar(require("./Swatch"));
 var Tiles_1 = __importStar(require("./Tiles"));
 var TilesGroup_1 = __importStar(require("./TilesGroup"));
+var Upload_1 = __importStar(require("./Upload"));
 exports.formComponents = (_a = {},
     _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
         //  First option is default
@@ -47,5 +48,8 @@ exports.formComponents = (_a = {},
         _c[Swatch_1.Swatch.componentName] = Swatch_1.default,
         _c[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
         _c),
+    _a[constants_1.ASSET_TYPES.upload] = (_d = {},
+        _d[Upload_1.Upload.componentName] = Upload_1.default,
+        _d),
     _a);
 exports.default = exports.formComponents;

package/dist/constants.d.ts

@@ -41,6 +41,10 @@ export declare const ATTRIBUTE_TYPES: {
     color: string;
     boolean: string;
 };
+export declare const ASSET_TYPES: {
+    item: string;
+    upload: string;
+};
 export declare const SORT_OPTIONS: {
     ascending: string;
     descending: string;

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_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.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ASSET_TYPES = 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");
@@ -54,6 +54,10 @@ exports.ATTRIBUTE_TYPES = {
     color: 'Color',
     boolean: 'Boolean',
 };
+exports.ASSET_TYPES = {
+    item: 'item',
+    upload: 'upload',
+};
 exports.SORT_OPTIONS = {
     ascending: 'ascending',
     descending: 'descending',

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

@@ -0,0 +1,2 @@
+export declare type AttributeIdentifier = string | RegExp;
+export declare const useArrayAttribute: (attributeIdentifier: AttributeIdentifier) => string | RegExp | never[];

package/dist/hooks/useArrayAttribute/index.js

@@ -0,0 +1,184 @@
+"use strict";
+// import { useThreekitSelector, useThreekitDispatch } from '../../store';
+// import { getAttributes, setConfiguration } from '../../store/attributes';
+// import { selectionToConfiguration } from '../../utils';
+// import {
+//   IConfigurationColor,
+//   ISetConfiguration,
+//   IThreekitDisplayAttribute,
+// } from '../../threekit';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArrayAttribute = void 0;
+// export type AttributeValue = string | number | boolean | IConfigurationColor;
+// type UseAttributeError = [undefined, undefined];
+// type UseAttributeSuccess = [
+//   IThreekitDisplayAttribute,
+//   (val: AttributeValue) => void
+// ];
+var useArrayAttribute = function (attributeIdentifier) {
+    if (!attributeIdentifier)
+        return [];
+    return attributeIdentifier;
+};
+exports.useArrayAttribute = useArrayAttribute;
+//  Ordinal Configurator (Psuedo-Array type attribute)
+// export const addItemToArray = (arrayLabel) => (
+//     assetId,
+//     addToIdx = undefined
+//   ) => async (dispatch, getState) => {
+//     if (!assetId?.length) return;
+//     const { threekit } = getState();
+//     const attributesRegExp = new RegExp(`${arrayLabel} [0-9]`);
+//     const arrayAttributes = filterAttributesArray(
+//       attributesRegExp,
+//       threekit.attributes
+//     );
+//     let updateAttrIdx = addToIdx;
+//     let attributeToUpdate;
+//     if (isNaN(updateAttrIdx))
+//       attributeToUpdate = Object.values(arrayAttributes).find((el, idx) => {
+//         if (!el.value.assetId?.length) {
+//           updateAttrIdx = idx;
+//           return true;
+//         }
+//       });
+//     else attributeToUpdate = arrayAttributes[updateAttrIdx];
+//     if (!attributeToUpdate) return message.info('Max items reached');
+//     let error;
+//     const options = Object.values(arrayAttributes)[0].values.reduce(
+//       (output, item) => Object.assign(output, { [item.assetId]: item }),
+//       {}
+//     );
+//     const updatedArray = Object.values(arrayAttributes).reduce(
+//       (output, attr, i) => {
+//         if (i !== updateAttrIdx) output.push(attr);
+//         else output.push({ ...attr, value: { assetId } });
+//         return output;
+//       },
+//       []
+//     );
+//     //  Default Validator
+//     error = arrayValidator(options, updatedArray);
+//     if (error) return message.info(error);
+//     //  Custom Validator
+//     if (MIDDLEWARE.arrayValidation?.[arrayLabel])
+//       error = MIDDLEWARE.arrayValidation?.[arrayLabel](options, updatedArray);
+//     if (error) return message.info(error);
+//     dispatch(setConfiguration({ [attributeToUpdate.name]: { assetId } }));
+//   };
+//   export const deleteItemFromArray = (arrayLabel) => (idx) => async (
+//     dispatch,
+//     getState
+//   ) => {
+//     if (isNaN(idx)) return;
+//     const { threekit } = getState();
+//     const attributesRegExp = new RegExp(`${arrayLabel} [0-9]`);
+//     const arrayAttributes = filterAttributesArray(
+//       attributesRegExp,
+//       threekit.attributes
+//     );
+//     let error;
+//     const options = Object.values(arrayAttributes)[0].values.reduce(
+//       (output, item) => Object.assign(output, { [item.assetId]: item }),
+//       {}
+//     );
+//     const updatedArray = Object.values(arrayAttributes).filter(
+//       (_, i) => i !== idx
+//     );
+//     //  Default Validator
+//     error = arrayValidator(options, updatedArray);
+//     if (error) return message.info(error);
+//     //  Custom Validator
+//     if (MIDDLEWARE.arrayValidation?.[arrayLabel])
+//       error = MIDDLEWARE.arrayValidation?.[arrayLabel](options, updatedArray);
+//     if (error) return message.info(error);
+//     const arrayConfigurationObj = filterAttributesArray(
+//       attributesRegExp,
+//       window.threekit.configurator.getConfiguration()
+//     );
+//     const arrayConfiguration = Object.entries(arrayConfigurationObj);
+//     const updatedConfiguration = arrayConfiguration.reduce(
+//       (output, [attributeName], i) => {
+//         if (i < idx) return output;
+//         if (!arrayConfiguration[i + 1])
+//           return Object.assign(output, { [attributeName]: { assetId: '' } });
+//         return Object.assign(output, {
+//           [attributeName]: arrayConfiguration[i + 1][1],
+//         });
+//       },
+//       {}
+//     );
+//     dispatch(setConfiguration(updatedConfiguration));
+//   };
+//   export const moveItemWithinArray = (arrayLabel) => (
+//   fromIdx,
+//   toIdx,
+//   config
+// ) => async (dispatch, getState) => {
+//   if (isNaN(fromIdx) || isNaN(fromIdx)) return;
+//   const { threekit } = getState();
+//   const { method } = Object.assign({ method: 'move' }, config);
+//   const attributesRegExp =
+//     typeof arrayLabel === 'string'
+//       ? new RegExp(`${arrayLabel} [0-9]`)
+//       : arrayLabel;
+//   const arrayAttributes = filterAttributesArray(
+//     attributesRegExp,
+//     threekit.attributes
+//   );
+//   let error;
+//   const options = Object.values(arrayAttributes)[0].values.reduce(
+//     (output, item) => Object.assign(output, { [item.assetId]: item }),
+//     {}
+//   );
+//   let updatedArray;
+//   switch (method) {
+//     case 'move':
+//       updatedArray = Object.values(arrayAttributes).reduce(
+//         (output, attr, idx, srcArray) => {
+//           if (idx === fromIdx) return output;
+//           output.push(attr);
+//           if (idx === toIdx) output.push(srcArray[fromIdx]);
+//           return output;
+//         },
+//         []
+//       );
+//       break;
+//     default:
+//       break;
+//   }
+//   //  Default Validator
+//   error = arrayValidator(options, updatedArray);
+//   if (error) return message.info(error);
+//   //  Custom Validator
+//   if (MIDDLEWARE.arrayValidation?.[arrayLabel])
+//     error = MIDDLEWARE.arrayValidation?.[arrayLabel](options, updatedArray);
+//   if (error) return message.info(error);
+//   const arrayConfigurationObj = filterAttributesArray(
+//     attributesRegExp,
+//     window.threekit.configurator.getConfiguration()
+//   );
+//   const attributeKeys = Object.keys(arrayConfigurationObj);
+//   const arrayConfiguration = Object.values(arrayConfigurationObj);
+//   let updatedConfiguration;
+//   switch (method) {
+//     case 'move':
+//       updatedConfiguration = arrayConfiguration.reduce(
+//         (output, configuration, idx, srcArray) => {
+//           if (idx === fromIdx) return output;
+//           output = Object.assign(output, {
+//             [attributeKeys.shift()]: configuration,
+//           });
+//           if (idx === toIdx)
+//             output = Object.assign(output, {
+//               [attributeKeys.shift()]: srcArray[fromIdx],
+//             });
+//           return output;
+//         },
+//         {}
+//       );
+//       break;
+//     default:
+//       break;
+//   }
+//   dispatch(setConfiguration(updatedConfiguration));

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

@@ -1,9 +1,9 @@
-import { IConfigurationColor, IThreekitDisplayAttribute } from '../../threekit';
-export declare type AttributeValue = string | number | boolean | IConfigurationColor;
+import { IThreekitDisplayAttribute, IConfigurationColor } from '../../threekit';
+export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File;
 declare type UseAttributeError = [undefined, undefined];
 declare type UseAttributeSuccess = [
     IThreekitDisplayAttribute,
-    (val: AttributeValue) => void
+    (val: RawAttributeValue) => Promise<void>
 ];
 declare type UseAttributeHook = UseAttributeError | UseAttributeSuccess;
 declare const useAttribute: (attributeName?: string | undefined) => UseAttributeHook;

package/dist/hooks/useAttribute/index.js

@@ -1,8 +1,49 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var store_1 = require("../../store");
 var attributes_1 = require("../../store/attributes");
 var utils_1 = require("../../utils");
+var constants_1 = require("../../constants");
+var api_1 = __importDefault(require("../../api"));
 var useAttribute = function (attributeName) {
     if (!attributeName)
         return [undefined, undefined];
@@ -13,13 +54,31 @@ var useAttribute = function (attributeName) {
     var attribute = attributes[attributeName];
     if (!attribute)
         return [undefined, undefined];
-    var handleChange = function (value) {
+    var handleChange = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var preppedValue, assetId;
         var _a;
-        var preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
-        dispatch((0, attributes_1.setConfiguration)((_a = {},
-            _a[attributeName] = preppedValue,
-            _a)));
-    };
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!(attribute.type === 'Asset' &&
+                        attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
+                case 1:
+                    assetId = _b.sent();
+                    if (assetId)
+                        preppedValue = (0, utils_1.selectionToConfiguration)(assetId, attribute.type);
+                    return [3 /*break*/, 3];
+                case 2:
+                    preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
+                    _b.label = 3;
+                case 3:
+                    dispatch((0, attributes_1.setConfiguration)((_a = {},
+                        _a[attributeName] = preppedValue,
+                        _a)));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     return [attribute, handleChange];
 };
 exports.default = useAttribute;

package/dist/http/catalog.d.ts

@@ -1,2 +1,53 @@
-export declare const uploadAsset: (formData: FormData) => Promise<import("axios").AxiosResponse<unknown>>;
-export declare const getJobStatus: (jobId: string) => Promise<import("axios").AxiosResponse<unknown>>;
+export interface IJob {
+    createdAt: string;
+    createdBy: string;
+    duration: null;
+    id: string;
+    orgId: string;
+    parameters: {
+        files: Array<any>;
+        image: string;
+    };
+    priority: number;
+    schedulerState: string | 'active';
+    status: string | 'pending' | 'stopped';
+    taskCount: number;
+    taskProgress: null | number;
+    taskResultFailures: number;
+    taskResultSuccesses: number;
+    taskStatusPending: number;
+    taskStatusRunning: number;
+    taskStatusStopped: number;
+    tasks: Array<any>;
+    timeElapsed: string;
+    timeRemaining: string;
+    title: string;
+    type: string | 'import';
+    updatedAt: string;
+}
+export interface IUploadAsset {
+    name: string;
+    assetId: string;
+}
+export interface IUploadResponse {
+    job: IJob;
+    jobId: string;
+    msg: string;
+}
+export interface IJobResponse {
+    job: IJob;
+    output?: {
+        font: Array<any>;
+        lut: Array<any>;
+        material: Array<any>;
+        model: Array<any>;
+        scene: Array<any>;
+        texture: Array<IUploadAsset>;
+        upload: Array<any>;
+        vector: Array<IUploadAsset>;
+        vfb: Array<any>;
+        video: Array<any>;
+    };
+}
+export declare const uploadAsset: (formData: FormData) => Promise<import("axios").AxiosResponse<IUploadResponse[]>>;
+export declare const getJobStatus: (jobId: string) => Promise<import("axios").AxiosResponse<IJobResponse>>;

package/dist/http/catalog.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getJobStatus = exports.uploadAsset = void 0;
 var request_1 = __importDefault(require("./request"));
-var CONFIGURATIONS_API_ROUTE = "/api/catalog";
+var CATALOG_API_ROUTE = "/api/catalog";
 var uploadAsset = function (formData) {
     var error;
     if (!formData)
@@ -13,7 +13,7 @@ var uploadAsset = function (formData) {
     if (error)
         throw new Error(error);
     return request_1.default.post({
-        url: "".concat(CONFIGURATIONS_API_ROUTE, "/assets/upload"),
+        url: "".concat(CATALOG_API_ROUTE, "/assets/upload"),
         formData: formData,
     });
 };
@@ -24,6 +24,6 @@ var getJobStatus = function (jobId) {
         error = 'Requires a jobId';
     if (error)
         throw new Error(error);
-    return request_1.default.get("".concat(CONFIGURATIONS_API_ROUTE, "/jobs/").concat(jobId));
+    return request_1.default.get("".concat(CATALOG_API_ROUTE, "/jobs/").concat(jobId));
 };
 exports.getJobStatus = getJobStatus;

package/dist/http/index.d.ts

@@ -2,10 +2,12 @@ import * as orders from './orders';
 import * as products from './products';
 import * as configurations from './configurations';
 import * as pricebook from './pricebook';
+import * as catalog from './catalog';
 declare const _default: {
     orders: typeof orders;
     products: typeof products;
     configurations: typeof configurations;
     pricebook: typeof pricebook;
+    catalog: typeof catalog;
 };
 export default _default;

package/dist/http/index.js

@@ -23,9 +23,11 @@ var orders = __importStar(require("./orders"));
 var products = __importStar(require("./products"));
 var configurations = __importStar(require("./configurations"));
 var pricebook = __importStar(require("./pricebook"));
+var catalog = __importStar(require("./catalog"));
 exports.default = {
     orders: orders,
     products: products,
     configurations: configurations,
     pricebook: pricebook,
+    catalog: catalog,
 };

package/dist/icons/Spinner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ISpinnerProps {
+    size?: string;
+}
+declare function Spinner(props: ISpinnerProps): JSX.Element;
+declare namespace Spinner {
+    var iconName: string;
+}
+export default Spinner;

package/dist/icons/Spinner.js

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+function Spinner(props) {
+    return react_1.default.createElement(Wrapper, { size: props.size });
+}
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n    transform: rotate(360deg);\n}\n"], ["\nto {\n    transform: rotate(360deg);\n}\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: 5px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"], ["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: 5px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, spin);
+Spinner.iconName = 'spinner';
+exports.default = Spinner;
+var templateObject_1, templateObject_2;

package/dist/icons/index.d.ts

@@ -39,11 +39,12 @@ import UndoIcon from './Undo';
 import WishlistIcon from './Wishlist';
 import ZoomInIcon from './ZoomIn';
 import ZoomOutIcon from './ZoomOut';
+import SpinnerIcon from './Spinner';
 export interface IIcon extends React.FC {
     iconName: string;
 }
-export { AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, };
+export { AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
 declare const _default: {
-    [x: string]: IIcon;
+    [x: string]: IIcon | typeof SpinnerIcon;
 };
 export default _default;

package/dist/icons/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = void 0;
+exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = void 0;
 var Add_1 = __importDefault(require("./Add"));
 exports.AddIcon = Add_1.default;
 var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
@@ -85,6 +85,8 @@ var ZoomIn_1 = __importDefault(require("./ZoomIn"));
 exports.ZoomInIcon = ZoomIn_1.default;
 var ZoomOut_1 = __importDefault(require("./ZoomOut"));
 exports.ZoomOutIcon = ZoomOut_1.default;
+var Spinner_1 = __importDefault(require("./Spinner"));
+exports.SpinnerIcon = Spinner_1.default;
 exports.default = (_a = {},
     _a[Add_1.default.iconName] = Add_1.default,
     _a[ArrowLeft_1.default.iconName] = ArrowLeft_1.default,
@@ -126,4 +128,5 @@ exports.default = (_a = {},
     _a[Wishlist_1.default.iconName] = Wishlist_1.default,
     _a[ZoomIn_1.default.iconName] = ZoomIn_1.default,
     _a[ZoomOut_1.default.iconName] = ZoomOut_1.default,
+    _a[Spinner_1.default.iconName] = Spinner_1.default,
     _a);

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import Strips from './components/Strips';
 import Swatch from './components/Swatch';
 import Tiles from './components/Tiles';
 import TilesGroup from './components/TilesGroup';
+import Upload from './components/Upload';
 import ProductName from './components/ProductName';
 import ProductDescription from './components/ProductDescription';
 import AttributeTitle from './components/AttributeTitle';
@@ -40,4 +41,4 @@ import icons from './icons';
 export * from './icons';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
+export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };

package/dist/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
+exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -59,6 +59,8 @@ var Tiles_1 = __importDefault(require("./components/Tiles"));
 exports.Tiles = Tiles_1.default;
 var TilesGroup_1 = __importDefault(require("./components/TilesGroup"));
 exports.TilesGroup = TilesGroup_1.default;
+var Upload_1 = __importDefault(require("./components/Upload"));
+exports.Upload = Upload_1.default;
 //  Display
 var ProductName_1 = __importDefault(require("./components/ProductName"));
 exports.ProductName = ProductName_1.default;

package/dist/store/treble.js

@@ -148,17 +148,16 @@ exports.getPlayerElementId = getPlayerElementId;
  ****************************************************/
 var launch = function (launchConfig) {
     return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-        var config, credentials, products, threekitEnv, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, player, _a;
-        var _b;
-        var _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
+        var config, credentials, products, threekitEnv, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, player, configurator;
+        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
                 case 0:
                     if (window.threekit)
                         return [2 /*return*/];
                     config = (0, utils_1.loadTrebleConfig)();
-                    credentials = Object.assign({}, ((_c = config.project) === null || _c === void 0 ? void 0 : _c.credentials) || {}, ((_d = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _d === void 0 ? void 0 : _d.credentials) || {});
-                    products = Object.assign({}, ((_e = config.project) === null || _e === void 0 ? void 0 : _e.products) || {}, ((_f = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _f === void 0 ? void 0 : _f.products) || {});
+                    credentials = Object.assign({}, ((_a = config.project) === null || _a === void 0 ? void 0 : _a.credentials) || {}, ((_b = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _b === void 0 ? void 0 : _b.credentials) || {});
+                    products = Object.assign({}, ((_c = config.project) === null || _c === void 0 ? void 0 : _c.products) || {}, ((_d = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _d === void 0 ? void 0 : _d.products) || {});
                     if (!Object.keys(credentials).length || !Object.keys(products).length)
                         return [2 /*return*/, console.error('Missing credentials')];
                     threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
@@ -202,19 +201,19 @@ var launch = function (launchConfig) {
                     initialConfiguration = __assign({}, initialConfigurationRaw);
                     updatedAssetId = assetId;
                     params = (0, utils_1.getParams)();
-                    configId = ((_g = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _g === void 0 ? void 0 : _g.length)
+                    configId = ((_e = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _e === void 0 ? void 0 : _e.length)
                         ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
                         : configurationId;
                     if (!configId) return [3 /*break*/, 2];
                     return [4 /*yield*/, api_1.default.configurations.fetch(configId)];
                 case 1:
-                    configuration = _h.sent();
+                    configuration = _f.sent();
                     if (configuration) {
                         initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
                         connection_1.default.connect({ assetId: configuration.data.productId });
                         updatedAssetId = configuration.data.productId;
                     }
-                    _h.label = 2;
+                    _f.label = 2;
                 case 2:
                     if (!updatedAssetId)
                         return [2 /*return*/, console.error('missing assetId')];
@@ -222,21 +221,24 @@ var launch = function (launchConfig) {
                     return [4 /*yield*/, (0, utils_1.createThreekitScriptEl)(threekitDomain)];
                 case 3:
                     //  We create the threekit script
-                    _h.sent();
+                    _f.sent();
                     return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el, 
                             // Variables to sort out
                             authToken: authToken, stageId: stageId, assetId: updatedAssetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
                 case 4:
-                    player = _h.sent();
-                    _a = window;
-                    _b = {
-                        player: player
-                    };
+                    player = _f.sent();
                     return [4 /*yield*/, player.getConfigurator()];
                 case 5:
-                    _a.threekit = (_b.configurator = _h.sent(),
-                        _b.treble = new Treble_1.default({ player: player, orgId: orgId }),
-                        _b);
+                    configurator = _f.sent();
+                    window.threekit = {
+                        player: player,
+                        configurator: configurator,
+                        treble: new Treble_1.default({
+                            player: player,
+                            orgId: orgId,
+                            initialConfiguration: configurator.getConfiguration(),
+                        }),
+                    };
                     dispatch((0, exports.setThreekitInitialized)());
                     dispatch((0, exports.setPlayerLoading)(false));
                     window.threekit.player.on('setConfiguration', function () {

package/dist/threekit.d.ts

@@ -3,7 +3,8 @@ import Treble from './Treble';
 declare type SCENE_PHASES = 'LOADED' | 'PRELOADED' | 'RENDERED';
 declare type PRIVATE_APIS = 'scene' | 'player';
 export declare type DISPLAY_OPTIONS = 'webgl' | 'image';
-declare type IAttributeTypes = 'String' | 'Asset' | 'Color' | 'Number';
+export declare type IAttributeTypes = 'String' | 'Asset' | 'Color' | 'Number';
+export declare type AssetType = 'upload' | 'item';
 export declare type IMetadata = Record<string, string | number | null>;
 /***************************************************
  *  Scene
@@ -83,7 +84,7 @@ export interface IDisplayAttributeAssetValue extends IConfigurationAssetValue {
     label: string;
 }
 export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigurationAsset> {
-    assetType: string;
+    assetType: AssetType;
     blacklist: [];
     defaultValue: IConfigurationAsset;
     hiddenValues?: Array<string>;
@@ -213,11 +214,25 @@ export interface ThreekitInitConfig {
     showShare?: boolean;
     showLoadingThumbnail?: boolean;
     showLoadingProgress?: boolean;
-    onLoadingProgress?: boolean;
+    onLoadingProgress?: (progress: number) => void;
     locale?: string;
     allowMobileVerticalOrbit?: boolean;
     publishStage?: string;
     display?: DISPLAY_OPTIONS;
+    classnames?: {
+        loading?: string;
+        mobile?: string;
+        share?: string | {
+            button: string;
+            popup: string;
+        };
+        fullscreen?: string;
+        ar?: string | {
+            button: string;
+            popup: string;
+        };
+        help?: string;
+    };
 }
 /***************************************************
  *  Treble Declarations

package/dist/utils.d.ts

@@ -1,6 +1,7 @@
 import { ITranslationMap } from './api/products';
 import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute } from './threekit';
-import { ITrebleConfig } from './threekit';
+import { ITrebleConfig, IAttributeTypes } from './threekit';
+import { RawAttributeValue } from './hooks/useAttribute';
 interface ICameraPosition {
     position: ICoordinates;
     quaternion: IQuaternion;
@@ -53,8 +54,8 @@ export declare const metadataValueToObject: (data: string) => Record<string, str
  */
 export declare const createThreekitScriptEl: (threekitDomain: string) => Promise<void>;
 export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
-export declare const selectionToConfiguration: (value: string | number | boolean | IConfigurationColor, attributeType: string) => string | number | boolean | IConfigurationColor | {
-    assetId: string | number | boolean | IConfigurationColor;
+export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
+    assetId: RawAttributeValue;
 };
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
 export declare const isUuid: (str?: string | undefined) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.51",
+  "version": "0.0.55",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [