@threekit-tools/treble 0.0.50 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/Treble/Treble.d.ts +6 -2
  2. package/dist/Treble/Treble.js +19 -2
  3. package/dist/api/catalog.d.ts +1 -0
  4. package/dist/api/catalog.js +86 -0
  5. package/dist/api/index.d.ts +2 -0
  6. package/dist/api/index.js +2 -0
  7. package/dist/components/FlatForm/index.js +9 -3
  8. package/dist/components/Upload/index.d.ts +12 -0
  9. package/dist/components/Upload/index.js +137 -0
  10. package/dist/components/Upload/upload.styles.d.ts +7 -0
  11. package/dist/components/Upload/upload.styles.js +16 -0
  12. package/dist/components/containers/formInputContainer.d.ts +7 -15
  13. package/dist/components/formComponents.d.ts +2 -0
  14. package/dist/components/formComponents.js +5 -1
  15. package/dist/constants.d.ts +4 -0
  16. package/dist/constants.js +5 -1
  17. package/dist/hooks/useArrayAttribute/index.d.ts +2 -0
  18. package/dist/hooks/useArrayAttribute/index.js +184 -0
  19. package/dist/hooks/useAttribute/index.d.ts +3 -3
  20. package/dist/hooks/useAttribute/index.js +65 -6
  21. package/dist/hooks/useWishlist/index.d.ts +1 -1
  22. package/dist/http/catalog.d.ts +53 -2
  23. package/dist/http/catalog.js +3 -3
  24. package/dist/http/index.d.ts +2 -0
  25. package/dist/http/index.js +2 -0
  26. package/dist/icons/Spinner.d.ts +9 -0
  27. package/dist/icons/Spinner.js +38 -0
  28. package/dist/icons/index.d.ts +3 -2
  29. package/dist/icons/index.js +4 -1
  30. package/dist/index.d.ts +2 -1
  31. package/dist/index.js +3 -1
  32. package/dist/store/attributes.d.ts +1 -1
  33. package/dist/store/attributes.js +13 -9
  34. package/dist/store/price.d.ts +1 -0
  35. package/dist/store/price.js +64 -4
  36. package/dist/store/product.d.ts +2 -1
  37. package/dist/store/product.js +25 -6
  38. package/dist/store/translations.d.ts +2 -1
  39. package/dist/store/translations.js +58 -4
  40. package/dist/store/treble.js +35 -55
  41. package/dist/store/wishlist.d.ts +5 -6
  42. package/dist/store/wishlist.js +44 -31
  43. package/dist/threekit.d.ts +18 -3
  44. package/dist/utils.d.ts +4 -3
  45. package/package.json +1 -1
@@ -1,10 +1,11 @@
1
1
  import threekitAPI from '../api';
2
- import { IThreekitPlayer, IMetadata } from '../threekit';
2
+ import { IThreekitPlayer, IMetadata, IConfiguration, ISetConfiguration } from '../threekit';
3
3
  import { IWishlist } from './Wishlist';
4
4
  import Snapshots from './Snapshots';
5
5
  interface ITreble {
6
6
  player: IThreekitPlayer;
7
7
  orgId: string;
8
+ initialConfiguration: IConfiguration;
8
9
  }
9
10
  export interface ISaveConfigurationConfig {
10
11
  customerId?: string;
@@ -15,13 +16,16 @@ declare class Treble {
15
16
  _api: typeof threekitAPI;
16
17
  _player: IThreekitPlayer;
17
18
  wishlist: IWishlist;
19
+ private _initialConfiguration;
18
20
  private _snapshots;
19
21
  takeSnapshots: Snapshots['takeSnapshots'];
20
- constructor({ player, orgId }: ITreble);
22
+ constructor({ player, orgId, initialConfiguration }: ITreble);
21
23
  saveConfiguration: (config?: ISaveConfigurationConfig | undefined) => Promise<{
22
24
  resumableUrl: string;
23
25
  } & import("../http/configurations").IConfigurationResponse & {
24
26
  thumbnail: string;
25
27
  }>;
28
+ getNestedConfigurator: (address: string | Array<string>) => any;
29
+ resetConfiguration: (configuration?: ISetConfiguration | undefined) => void;
26
30
  }
27
31
  export default Treble;
@@ -48,7 +48,7 @@ var Snapshots_1 = __importDefault(require("./Snapshots"));
48
48
  var Treble = /** @class */ (function () {
49
49
  function Treble(_a) {
50
50
  var _this = this;
51
- var player = _a.player, orgId = _a.orgId;
51
+ var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
52
52
  this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
53
53
  var threekitDomain, _a, customerId, metadata, productVersion, files, response, params, url;
54
54
  var _b;
@@ -83,13 +83,30 @@ var Treble = /** @class */ (function () {
83
83
  }
84
84
  });
85
85
  }); };
86
+ this.getNestedConfigurator = function (address) {
87
+ var player = window.threekit.player.enableApi('player');
88
+ var addressArr = Array.isArray(address) ? address : [address];
89
+ return addressArr.reduce(function (configurator, attributeName) {
90
+ var itemId = configurator.getAppliedConfiguration(attributeName);
91
+ return window.threekit.player.scene.get({
92
+ id: itemId,
93
+ evalNode: true,
94
+ }).configurator;
95
+ }, player.getConfigurator());
96
+ };
97
+ this.resetConfiguration = function (configuration) {
98
+ var initialConfiguration = JSON.parse(_this._initialConfiguration);
99
+ var updateConfiguration = Object.assign(initialConfiguration, configuration);
100
+ window.threekit.configurator.setConfiguration(updateConfiguration);
101
+ };
86
102
  // Threekit API
87
103
  this._api = api_1.default;
88
104
  this._player = player;
89
105
  this.wishlist = (0, Wishlist_1.default)(orgId);
90
106
  this._snapshots = new Snapshots_1.default();
91
107
  this.takeSnapshots = this._snapshots.takeSnapshots;
92
- // this._player = player.enableApi('player')
108
+ // this._player = player.enableApi('player');
109
+ this._initialConfiguration = JSON.stringify(initialConfiguration);
93
110
  }
94
111
  return Treble;
95
112
  }());
@@ -0,0 +1 @@
1
+ export declare const uploadAsset: (file: File) => Promise<string | undefined>;
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (_) try {
18
+ 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;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ var __importDefault = (this && this.__importDefault) || function (mod) {
39
+ return (mod && mod.__esModule) ? mod : { "default": mod };
40
+ };
41
+ Object.defineProperty(exports, "__esModule", { value: true });
42
+ exports.uploadAsset = void 0;
43
+ var http_1 = __importDefault(require("../http"));
44
+ var uploadAsset = function (file) { return __awaiter(void 0, void 0, void 0, function () {
45
+ var error, formData, uploadResponse, jobId, assetId, count, checkRes, output;
46
+ return __generator(this, function (_a) {
47
+ switch (_a.label) {
48
+ case 0:
49
+ if (!file)
50
+ error = 'Requires a File';
51
+ if (error)
52
+ throw new Error(error);
53
+ formData = new FormData();
54
+ formData.append('files', file, file.name);
55
+ return [4 /*yield*/, http_1.default.catalog.uploadAsset(formData)];
56
+ case 1:
57
+ uploadResponse = _a.sent();
58
+ jobId = uploadResponse.data[0].jobId;
59
+ count = 30;
60
+ _a.label = 2;
61
+ case 2:
62
+ if (!(count > 1 && !assetId)) return [3 /*break*/, 5];
63
+ return [4 /*yield*/, new Promise(function (resolve) {
64
+ return setTimeout(function () { return resolve(undefined); }, 0.5 * 1000);
65
+ })];
66
+ case 3:
67
+ _a.sent();
68
+ return [4 /*yield*/, http_1.default.catalog.getJobStatus(jobId)];
69
+ case 4:
70
+ checkRes = _a.sent();
71
+ ++count;
72
+ if (checkRes.data.output) {
73
+ output = checkRes.data.output;
74
+ if (output.texture.length) {
75
+ assetId = output.texture[0].assetId;
76
+ }
77
+ else if (output.vector.length) {
78
+ assetId = output.vector[0].assetId;
79
+ }
80
+ }
81
+ return [3 /*break*/, 2];
82
+ case 5: return [2 /*return*/, assetId];
83
+ }
84
+ });
85
+ }); };
86
+ exports.uploadAsset = uploadAsset;
@@ -2,10 +2,12 @@ import * as products from './products';
2
2
  import * as configurations from './configurations';
3
3
  import * as price from './price';
4
4
  import * as orders from './orders';
5
+ import * as catalog from './catalog';
5
6
  declare const _default: {
6
7
  products: typeof products;
7
8
  configurations: typeof configurations;
8
9
  price: typeof price;
9
10
  orders: typeof orders;
11
+ catalog: typeof catalog;
10
12
  };
11
13
  export default _default;
package/dist/api/index.js CHANGED
@@ -23,9 +23,11 @@ var products = __importStar(require("./products"));
23
23
  var configurations = __importStar(require("./configurations"));
24
24
  var price = __importStar(require("./price"));
25
25
  var orders = __importStar(require("./orders"));
26
+ var catalog = __importStar(require("./catalog"));
26
27
  exports.default = {
27
28
  products: products,
28
29
  configurations: configurations,
29
30
  price: price,
30
31
  orders: orders,
32
+ catalog: catalog,
31
33
  };
@@ -23,6 +23,7 @@ var ProductDescription_1 = __importDefault(require("../ProductDescription"));
23
23
  var formComponents_1 = __importDefault(require("../formComponents"));
24
24
  var utils_1 = require("../../utils");
25
25
  var useConfigurator_1 = __importDefault(require("../../hooks/useConfigurator"));
26
+ var constants_1 = require("../../constants");
26
27
  var FlatForm = function (props) {
27
28
  var _a = Object.assign({
28
29
  alignTitle: 'center',
@@ -43,18 +44,23 @@ var FlatForm = function (props) {
43
44
  var _a, _b, _c, _d, _e, _f;
44
45
  var Component;
45
46
  var props = ((_b = (_a = (attributes || {})) === null || _a === void 0 ? void 0 : _a[attr.name]) === null || _b === void 0 ? void 0 : _b.props) || {};
47
+ var type = attr.type;
48
+ if (type === 'Asset' &&
49
+ attr.assetType === constants_1.ASSET_TYPES.upload) {
50
+ type = attr.assetType;
51
+ }
46
52
  if ((_d = (_c = (attributes || {})) === null || _c === void 0 ? void 0 : _c[attr.name]) === null || _d === void 0 ? void 0 : _d.component) {
47
- Component = (_e = Object.entries(formComponents_1.default[attr.type] || {}).find(function (_a) {
53
+ Component = (_e = Object.entries(formComponents_1.default[type] || {}).find(function (_a) {
48
54
  var _b, _c;
49
55
  var key = _a[0];
50
56
  return key === ((_c = (_b = (attributes || {})) === null || _b === void 0 ? void 0 : _b[attr.name]) === null || _c === void 0 ? void 0 : _c.component.toLowerCase());
51
57
  })) === null || _e === void 0 ? void 0 : _e[1];
52
58
  }
53
59
  if (!Component) {
54
- Component = (_f = Object.values(formComponents_1.default[attr.type] || {})) === null || _f === void 0 ? void 0 : _f[0];
60
+ Component = (_f = Object.values(formComponents_1.default[type] || {})) === null || _f === void 0 ? void 0 : _f[0];
55
61
  }
56
62
  if (!Component) {
57
- console.log("No default component available for ".concat(attr.type, " type Attributes"));
63
+ console.log("No default component available for ".concat(type, " type Attributes"));
58
64
  return null;
59
65
  }
60
66
  return (react_1.default.createElement(Component, __assign({ key: i, className: customClassName, attribute: attr.name }, props)));
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
3
+ export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
4
+ onChange: (file: File) => Promise<void>;
5
+ }
6
+ export declare const Upload: {
7
+ (props: IUpload): JSX.Element;
8
+ componentName: string;
9
+ compatibleAttributes: Set<string>;
10
+ };
11
+ declare const _default: (props: IUpload) => JSX.Element | null;
12
+ export default _default;
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
22
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
23
+ return new (P || (P = Promise))(function (resolve, reject) {
24
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
26
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
27
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
28
+ });
29
+ };
30
+ var __generator = (this && this.__generator) || function (thisArg, body) {
31
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
32
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
33
+ function verb(n) { return function (v) { return step([n, v]); }; }
34
+ function step(op) {
35
+ if (f) throw new TypeError("Generator is already executing.");
36
+ while (_) try {
37
+ 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;
38
+ if (y = 0, t) op = [op[0] & 2, t.value];
39
+ switch (op[0]) {
40
+ case 0: case 1: t = op; break;
41
+ case 4: _.label++; return { value: op[1], done: false };
42
+ case 5: _.label++; y = op[1]; op = [0]; continue;
43
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
44
+ default:
45
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
46
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
47
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
48
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
49
+ if (t[2]) _.ops.pop();
50
+ _.trys.pop(); continue;
51
+ }
52
+ op = body.call(thisArg, _);
53
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
54
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
55
+ }
56
+ };
57
+ var __importDefault = (this && this.__importDefault) || function (mod) {
58
+ return (mod && mod.__esModule) ? mod : { "default": mod };
59
+ };
60
+ Object.defineProperty(exports, "__esModule", { value: true });
61
+ exports.Upload = void 0;
62
+ var react_1 = __importStar(require("react"));
63
+ var constants_1 = require("../../constants");
64
+ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
65
+ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
66
+ var shared_styles_1 = require("../shared.styles");
67
+ var utils_1 = require("../../utils");
68
+ var icons_1 = require("../../icons");
69
+ var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
70
+ var upload_styles_1 = require("./upload.styles");
71
+ var Upload = function (props) {
72
+ var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
73
+ var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
74
+ var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
75
+ var inputRef = (0, react_1.createRef)();
76
+ var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
77
+ var handleClick = function () {
78
+ var _a;
79
+ if (isUploading)
80
+ return;
81
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
82
+ };
83
+ var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
84
+ var reader;
85
+ return __generator(this, function (_a) {
86
+ switch (_a.label) {
87
+ case 0:
88
+ setIsUploading(true);
89
+ return [4 /*yield*/, onChange(file)];
90
+ case 1:
91
+ _a.sent();
92
+ setIsUploading(false);
93
+ setFilename(file.name);
94
+ reader = new FileReader();
95
+ reader.onload = function () {
96
+ var imgEl = document.getElementById('trbl-upload-img');
97
+ if (!imgEl)
98
+ return;
99
+ // @ts-ignore
100
+ imgEl.src = reader.result;
101
+ };
102
+ reader.readAsDataURL(file);
103
+ return [2 /*return*/];
104
+ }
105
+ });
106
+ }); };
107
+ return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
108
+ react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
109
+ react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
110
+ react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls },
111
+ react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
112
+ var _a;
113
+ return __generator(this, function (_b) {
114
+ if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || !onChange)
115
+ return [2 /*return*/];
116
+ handleUpload(e.target.files[0]);
117
+ return [2 /*return*/];
118
+ });
119
+ }); } }),
120
+ react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
121
+ react_1.default.createElement("div", null,
122
+ react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
123
+ 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,
124
+ react_1.default.createElement("div", null,
125
+ react_1.default.createElement("img", { src: "#", id: "trbl-upload-img" })),
126
+ react_1.default.createElement("div", null,
127
+ react_1.default.createElement("div", null, filename),
128
+ react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
129
+ react_1.default.createElement("div", null,
130
+ react_1.default.createElement(icons_1.ImageIcon, null)),
131
+ react_1.default.createElement("div", null, "Click to upload"),
132
+ react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
133
+ };
134
+ exports.Upload = Upload;
135
+ exports.Upload.componentName = 'upload';
136
+ exports.Upload.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
137
+ exports.default = (0, formInputContainer_1.default)(exports.Upload);
@@ -0,0 +1,7 @@
1
+ interface IUploadWrapper {
2
+ fullWidth?: boolean;
3
+ iconOnly?: boolean;
4
+ }
5
+ export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
6
+ export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export {};
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.UploadingWrapper = exports.UploadWrapper = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ 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) {
13
+ return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
14
+ }, 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; });
15
+ 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"])));
16
+ var templateObject_1, templateObject_2;
@@ -10,11 +10,14 @@ export interface IOption extends IOptionShared {
10
10
  color?: string;
11
11
  imageUrl?: string;
12
12
  }
13
- export interface IFormContainerProps {
14
- attribute?: string;
13
+ interface MetadataKeys {
14
+ imgBaseUrl?: string;
15
15
  metadataKeyThumbnail?: string;
16
- metadataKeyDescription?: string;
17
16
  metadataKeyPrice?: string;
17
+ metadataKeyDescription?: string;
18
+ }
19
+ export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThumbnail' | 'metadataKeyPrice' | 'metadataKeyDescription'> {
20
+ attribute?: string;
18
21
  hideAttributeTitle?: string;
19
22
  sort?: string;
20
23
  title?: string;
@@ -23,23 +26,12 @@ export interface IFormContainerProps {
23
26
  onClick?: (value: string) => void;
24
27
  className?: string;
25
28
  }
26
- export interface IFormComponentProps<T extends IOptionShared> {
27
- title?: string;
28
- description?: string;
29
- value?: string;
30
- onClick?: (value: string) => void;
31
- className?: string;
29
+ export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'className'> {
32
30
  options: null | undefined | Array<T>;
33
31
  }
34
32
  export interface IFormComponent<P> extends FunctionComponent<P> {
35
33
  compatibleAttributes: Set<string>;
36
34
  }
37
- interface MetadataKeys {
38
- imgBaseUrl?: string;
39
- metadataKeyThumbnail?: string;
40
- metadataKeyPrice?: string;
41
- metadataKeyDescription?: string;
42
- }
43
35
  interface IPrepAttributeConfig {
44
36
  metadataKeys: MetadataKeys;
45
37
  sort?: string;
@@ -2,6 +2,8 @@
2
2
  export declare const formComponents: {
3
3
  [x: string]: {
4
4
  [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
5
+ } | {
6
+ [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
5
7
  };
6
8
  };
7
9
  export default formComponents;
@@ -18,7 +18,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
18
18
  __setModuleDefault(result, mod);
19
19
  return result;
20
20
  };
21
- var _a, _b, _c;
21
+ var _a, _b, _c, _d;
22
22
  Object.defineProperty(exports, "__esModule", { value: true });
23
23
  exports.formComponents = void 0;
24
24
  var constants_1 = require("../constants");
@@ -28,6 +28,7 @@ var Strips_1 = __importStar(require("./Strips"));
28
28
  var Swatch_1 = __importStar(require("./Swatch"));
29
29
  var Tiles_1 = __importStar(require("./Tiles"));
30
30
  var TilesGroup_1 = __importStar(require("./TilesGroup"));
31
+ var Upload_1 = __importStar(require("./Upload"));
31
32
  exports.formComponents = (_a = {},
32
33
  _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
33
34
  // First option is default
@@ -47,5 +48,8 @@ exports.formComponents = (_a = {},
47
48
  _c[Swatch_1.Swatch.componentName] = Swatch_1.default,
48
49
  _c[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
49
50
  _c),
51
+ _a[constants_1.ASSET_TYPES.upload] = (_d = {},
52
+ _d[Upload_1.Upload.componentName] = Upload_1.default,
53
+ _d),
50
54
  _a);
51
55
  exports.default = exports.formComponents;
@@ -41,6 +41,10 @@ export declare const ATTRIBUTE_TYPES: {
41
41
  color: string;
42
42
  boolean: string;
43
43
  };
44
+ export declare const ASSET_TYPES: {
45
+ item: string;
46
+ upload: string;
47
+ };
44
48
  export declare const SORT_OPTIONS: {
45
49
  ascending: string;
46
50
  descending: string;
package/dist/constants.js CHANGED
@@ -4,7 +4,7 @@
4
4
  ****************************************************/
5
5
  var _a;
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- 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;
7
+ 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;
8
8
  exports.DEFAULT_CLASS_NAME = 'threekit-react';
9
9
  exports.CLASS_NAME_PREFIX = 'tk';
10
10
  exports.INPUT_COMPONENT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-input");
@@ -54,6 +54,10 @@ exports.ATTRIBUTE_TYPES = {
54
54
  color: 'Color',
55
55
  boolean: 'Boolean',
56
56
  };
57
+ exports.ASSET_TYPES = {
58
+ item: 'item',
59
+ upload: 'upload',
60
+ };
57
61
  exports.SORT_OPTIONS = {
58
62
  ascending: 'ascending',
59
63
  descending: 'descending',
@@ -0,0 +1,2 @@
1
+ export declare type AttributeIdentifier = string | RegExp;
2
+ export declare const useArrayAttribute: (attributeIdentifier: AttributeIdentifier) => string | RegExp | never[];