@threekit-tools/treble 0.0.49 → 0.0.53

package/dist/Treble/Snapshots.js

@@ -129,32 +129,6 @@ var Snapshots = /** @class */ (function () {
             }, Promise.resolve(snapshots));
         };
         this.takeSnapshots = function (camerasList, snapshotsConfig) { return __awaiter(_this, void 0, void 0, function () {
-            // function getSnapshot() {
-            //   return window.threekit.player.snapshotAsync({
-            //     size,
-            //     mimeType: `image/${SNAPSHOT_FORMATS[format]}`,
-            //   })
-            // }
-            // function getSnapshots(
-            //   cameras: Array<string | undefined>,
-            //   camerasMap: CamerasMap
-            // ) {
-            //   let snapshots: Array<string> = []
-            //   return cameras.reduce((snapshotPromise, camera) => {
-            //     return snapshotPromise.then(
-            //       () =>
-            //         new Promise(async (resolve) => {
-            //           if (camera)
-            //             await window.threekit.configurator.setConfiguration({
-            //               [attributeName]: camerasMap[camera],
-            //             })
-            //           const snapshotStr = await getSnapshot()
-            //           snapshots.push(snapshotStr)
-            //           resolve(snapshots)
-            //         })
-            //     )
-            //   }, Promise.resolve(snapshots))
-            // }
             function saveSnapshotToPlatform(snapshot, filename) {
                 return __awaiter(this, void 0, void 0, function () {
                     var files, response;

package/dist/Treble/Treble.d.ts

@@ -1,9 +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;
@@ -14,13 +16,16 @@ declare class Treble {
     _api: typeof threekitAPI;
     _player: IThreekitPlayer;
     wishlist: IWishlist;
+    private _initialConfiguration;
     private _snapshots;
     takeSnapshots: Snapshots['takeSnapshots'];
-    constructor({ player }: 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;
+        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;
@@ -83,13 +83,30 @@ var Treble = /** @class */ (function () {
                 }
             });
         }); };
+        this.getNestedConfigurator = function (address) {
+            var player = window.threekit.player.enableApi('player');
+            var addressArr = Array.isArray(address) ? address : [address];
+            return addressArr.reduce(function (configurator, attributeName) {
+                var itemId = configurator.getAppliedConfiguration(attributeName);
+                return window.threekit.player.scene.get({
+                    id: itemId,
+                    evalNode: true,
+                }).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;
-        this.wishlist = (0, Wishlist_1.default)();
+        this.wishlist = (0, Wishlist_1.default)(orgId);
         this._snapshots = new Snapshots_1.default();
         this.takeSnapshots = this._snapshots.takeSnapshots;
-        // this._player = player.enableApi('player')
+        // this._player = player.enableApi('player');
+        this._initialConfiguration = JSON.stringify(initialConfiguration);
     }
     return Treble;
 }());

package/dist/Treble/Wishlist.d.ts

@@ -8,11 +8,12 @@ export interface IWishlist {
     clearWishlist(): Array<IConfigurationResponse>;
 }
 declare class Wishlist implements IWishlist {
-    constructor();
+    _wishlistKey: string;
+    constructor(orgId: string);
     getWishlist: () => Promise<WishlistArray>;
     addItem: (config?: ISaveConfigurationConfig | undefined) => Promise<WishlistArray>;
     removeItemByIdx: (idx: number) => WishlistArray;
     clearWishlist: () => WishlistArray;
 }
-export default function createWishlist(): Wishlist;
+export default function createWishlist(orgId: string): Wishlist;
 export {};

package/dist/Treble/Wishlist.js

@@ -53,7 +53,7 @@ var connection_1 = __importDefault(require("../connection"));
 var constants_1 = require("../constants");
 var wishlistData;
 var Wishlist = /** @class */ (function () {
-    function Wishlist() {
+    function Wishlist(orgId) {
         var _this = this;
         this.getWishlist = function () { return __awaiter(_this, void 0, void 0, function () {
             var threekitDomain, wishlistListStr, wishlistList, wishlistDataRaw;
@@ -63,7 +63,7 @@ var Wishlist = /** @class */ (function () {
                         if (wishlistData)
                             return [2 /*return*/, wishlistData];
                         threekitDomain = connection_1.default.getConnection().threekitDomain;
-                        wishlistListStr = localStorage.getItem(constants_1.WISHLIST_LOCALSTORAGE_KEY);
+                        wishlistListStr = localStorage.getItem(this._wishlistKey);
                         wishlistList = JSON.parse(wishlistListStr || '[]');
                         return [4 /*yield*/, Promise.all(wishlistList.map(function (el) { return api_1.default.configurations.fetch(el); }))];
                     case 1:
@@ -87,20 +87,19 @@ var Wishlist = /** @class */ (function () {
                     case 0:
                         if (!wishlistData) {
                             wishlistData = [];
-                            localStorage.setItem(constants_1.WISHLIST_LOCALSTORAGE_KEY, JSON.stringify([]));
+                            localStorage.setItem(this._wishlistKey, JSON.stringify([]));
                         }
                         configPrepped = Object.assign({ snapshot: true }, config);
                         return [4 /*yield*/, window.threekit.treble.saveConfiguration(configPrepped)];
                     case 1:
                         savedConfiguration = _a.sent();
-                        // const savedConfiguration = await this.saveConfiguration(configPrepped)
                         if (!savedConfiguration)
                             return [2 /*return*/, wishlistData];
                         wishlistData = __spreadArray(__spreadArray([], wishlistData, true), [savedConfiguration], false);
-                        wishlistListStr = localStorage.getItem(constants_1.WISHLIST_LOCALSTORAGE_KEY);
+                        wishlistListStr = localStorage.getItem(this._wishlistKey);
                         wishlistList = JSON.parse(wishlistListStr || '[]');
                         wishlistList.push(savedConfiguration.shortId);
-                        localStorage.setItem(constants_1.WISHLIST_LOCALSTORAGE_KEY, JSON.stringify(wishlistList));
+                        localStorage.setItem(this._wishlistKey, JSON.stringify(wishlistList));
                         return [2 /*return*/, this.getWishlist()];
                 }
             });
@@ -108,7 +107,7 @@ var Wishlist = /** @class */ (function () {
         this.removeItemByIdx = function (idx) {
             if (!(wishlistData === null || wishlistData === void 0 ? void 0 : wishlistData.length)) {
                 wishlistData = [];
-                localStorage.setItem(constants_1.WISHLIST_LOCALSTORAGE_KEY, JSON.stringify([]));
+                localStorage.setItem(_this._wishlistKey, JSON.stringify([]));
                 return wishlistData;
             }
             if (idx > (wishlistData === null || wishlistData === void 0 ? void 0 : wishlistData.length) - 1)
@@ -116,22 +115,23 @@ var Wishlist = /** @class */ (function () {
             var updatedWishlist = __spreadArray([], wishlistData, true);
             updatedWishlist.splice(idx, 1);
             wishlistData = updatedWishlist;
-            var wishlistListStr = localStorage.getItem(constants_1.WISHLIST_LOCALSTORAGE_KEY);
+            var wishlistListStr = localStorage.getItem(_this._wishlistKey);
             var wishlistList = JSON.parse(wishlistListStr || '[]');
             wishlistList.splice(idx, 1);
-            localStorage.setItem(constants_1.WISHLIST_LOCALSTORAGE_KEY, JSON.stringify(wishlistList));
+            localStorage.setItem(_this._wishlistKey, JSON.stringify(wishlistList));
             return wishlistData;
         };
         this.clearWishlist = function () {
             wishlistData = [];
-            localStorage.setItem(constants_1.WISHLIST_LOCALSTORAGE_KEY, JSON.stringify([]));
+            localStorage.setItem(_this._wishlistKey, JSON.stringify([]));
             return wishlistData;
         };
+        this._wishlistKey = "".concat(constants_1.WISHLIST_LOCALSTORAGE_KEY, "_").concat(orgId);
         this.getWishlist();
     }
     return Wishlist;
 }());
-function createWishlist() {
-    return new Wishlist();
+function createWishlist(orgId) {
+    return new Wishlist(orgId);
 }
 exports.default = createWishlist;

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/Accordion/index.d.ts

@@ -6,7 +6,7 @@ interface AccordionItemProps extends React.FC {
     onClick: () => void;
 }
 interface AccordionProps<T> {
-    children: React.FunctionComponentElement<T>;
+    children: React.FunctionComponentElement<T> | Array<React.FunctionComponentElement<T>>;
 }
 export declare const Accordion: {
     (props: AccordionProps<AccordionItemProps>): React.FunctionComponentElement<AccordionItemProps>[] | null;

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/ThreekitProvider/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import { ILaunchConfig } from '../../store/threekit';
+import { Reducer } from 'redux';
+import { ILaunchConfig } from '../../store/treble';
 interface Theme {
     [key: string]: string | number;
 }
 export interface ThreekitProviderProps extends Partial<ILaunchConfig> {
     theme?: Theme;
+    reducer?: Record<string, Reducer>;
     children: React.ReactNode;
 }
 declare const ThreekitProvider: (props: ThreekitProviderProps) => JSX.Element;

package/dist/components/ThreekitProvider/index.js

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var store_1 = __importStar(require("../../store"));
-var threekit_1 = require("../../store/threekit");
+var treble_1 = require("../../store/treble");
 var react_redux_1 = require("react-redux");
 var styled_components_1 = require("styled-components");
 var theme_1 = __importDefault(require("../../theme"));
@@ -34,7 +34,7 @@ var App = function (props) {
     (0, react_1.useEffect)(function () {
         var init = function () {
             var playerConfig = props.playerConfig, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
-            dispatch((0, threekit_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv, eventHandlers: eventHandlers }));
+            dispatch((0, treble_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv, eventHandlers: eventHandlers }));
         };
         init();
         return;
@@ -42,7 +42,7 @@ var App = function (props) {
     return react_1.default.createElement(react_1.default.Fragment, null, props.children);
 };
 var ThreekitProvider = function (props) {
-    return (react_1.default.createElement(react_redux_1.Provider, { store: store_1.default },
+    return (react_1.default.createElement(react_redux_1.Provider, { store: (0, store_1.default)(props.reducer) },
         react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             react_1.default.createElement(GlobalStyles_styles_1.default, null),
             react_1.default.createElement(App, { locale: props.locale, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv, eventHandlers: props.eventHandlers }, props.children))));

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,114 @@
+"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 upload_styles_1 = require("./upload.styles");
+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 formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+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), uploading = _a[0], setUploading = _a[1];
+    var inputRef = (0, react_1.createRef)();
+    var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
+    var handleClick = function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setUploading(true);
+                    return [4 /*yield*/, onChange(file)];
+                case 1:
+                    _a.sent();
+                    setUploading(false);
+                    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 }, (value === null || value === void 0 ? void 0 : value.length)
+                ? 'Uploaded'
+                : uploading
+                    ? 'Uploading...'
+                    : 'Upload a file'))));
+};
+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,6 @@
+interface IUploadWrapper {
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+}
+export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
+export {};

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

@@ -0,0 +1,15 @@
+"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.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    height: 40px;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\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    height: 40px;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\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.textColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
+var templateObject_1;

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,29 +26,18 @@ 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;
 }
 export declare const prepAttributeForComponent: (attribute: IThreekitDisplayAttribute, config: IPrepAttributeConfig) => {
-    selected: string | number | import("../../threekit").IConfigurationColor | import("../../threekit").IConfigurationAsset;
+    selected: string | number | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
     options: IDisplayAttributeAssetValue[] | {
         name: string;
         label: 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;