@threekit-tools/treble 0.0.57 → 0.0.60

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 (56) hide show
  1. package/dist/Treble/Snapshots.js +32 -63
  2. package/dist/Treble/Treble.d.ts +8 -6
  3. package/dist/Treble/Treble.js +19 -4
  4. package/dist/Treble/Wishlist.d.ts +3 -3
  5. package/dist/Treble/Wishlist.js +1 -0
  6. package/dist/api/configurations.d.ts +2 -3
  7. package/dist/api/configurations.js +28 -22
  8. package/dist/api/index.d.ts +2 -0
  9. package/dist/api/index.js +2 -0
  10. package/dist/api/server.d.ts +2 -0
  11. package/dist/api/server.js +11 -0
  12. package/dist/components/Cards/index.js +3 -4
  13. package/dist/components/Dropdown/index.js +6 -10
  14. package/dist/components/Strips/index.js +3 -4
  15. package/dist/components/Swatch/index.js +3 -4
  16. package/dist/components/TextInput/index.d.ts +1 -0
  17. package/dist/components/TextInput/index.js +2 -2
  18. package/dist/components/TextInput/textInput.styles.js +1 -1
  19. package/dist/components/Tiles/index.js +3 -4
  20. package/dist/components/TilesGroup/index.js +3 -4
  21. package/dist/components/containers/formInputContainer.d.ts +8 -4
  22. package/dist/components/containers/formInputContainer.js +10 -15
  23. package/dist/connection.d.ts +4 -1
  24. package/dist/connection.js +4 -0
  25. package/dist/hooks/useAttribute/index.d.ts +2 -2
  26. package/dist/hooks/useAttribute/index.js +2 -4
  27. package/dist/hooks/useConfigurator/index.d.ts +2 -2
  28. package/dist/hooks/useConfigurator/index.js +1 -1
  29. package/dist/hooks/useProductCache/index.d.ts +14 -0
  30. package/dist/hooks/useProductCache/index.js +35 -0
  31. package/dist/hooks/useSingleAnimation/index.d.ts +17 -0
  32. package/dist/hooks/useSingleAnimation/index.js +264 -0
  33. package/dist/hooks/useWishlist/index.d.ts +3 -2
  34. package/dist/hooks/useWishlist/index.js +1 -3
  35. package/dist/http/configurations.d.ts +1 -0
  36. package/dist/http/index.d.ts +2 -0
  37. package/dist/http/index.js +2 -0
  38. package/dist/http/server.d.ts +14 -0
  39. package/dist/http/server.js +17 -0
  40. package/dist/index.js +2 -0
  41. package/dist/store/attributes.d.ts +15 -2
  42. package/dist/store/attributes.js +20 -12
  43. package/dist/store/price.js +2 -2
  44. package/dist/store/product.d.ts +38 -2
  45. package/dist/store/product.js +221 -10
  46. package/dist/store/translations.d.ts +1 -0
  47. package/dist/store/translations.js +3 -1
  48. package/dist/store/treble.d.ts +32 -2
  49. package/dist/store/treble.js +157 -34
  50. package/dist/store/wishlist.d.ts +3 -2
  51. package/dist/threekit.d.ts +20 -2
  52. package/dist/utils.d.ts +2 -10
  53. package/dist/utils.js +62 -58
  54. package/package.json +17 -2
  55. package/dist/hooks/useArrayAttribute/index.d.ts +0 -2
  56. package/dist/hooks/useArrayAttribute/index.js +0 -184
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
50
50
  return (mod && mod.__esModule) ? mod : { "default": mod };
51
51
  };
52
52
  Object.defineProperty(exports, "__esModule", { value: true });
53
- exports.launch = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = void 0;
53
+ exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = void 0;
54
54
  var connection_1 = __importDefault(require("../connection"));
55
55
  var toolkit_1 = require("@reduxjs/toolkit");
56
56
  var api_1 = __importDefault(require("../api"));
@@ -62,6 +62,7 @@ var price_1 = require("./price");
62
62
  var wishlist_1 = require("./wishlist");
63
63
  var translations_1 = require("./translations");
64
64
  var product_1 = require("./product");
65
+ var message_1 = __importDefault(require("../components/message"));
65
66
  /*****************************************************
66
67
  * Helper Functions
67
68
  ****************************************************/
@@ -100,6 +101,7 @@ var initialState = {
100
101
  isThreekitInitialized: false,
101
102
  isPlayerLoading: false,
102
103
  playerElId: undefined,
104
+ notifications: true,
103
105
  };
104
106
  /*****************************************************
105
107
  * Actions
@@ -107,6 +109,7 @@ var initialState = {
107
109
  exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
108
110
  exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loading');
109
111
  exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
112
+ exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
110
113
  /*****************************************************
111
114
  * Slice
112
115
  ****************************************************/
@@ -115,14 +118,20 @@ var reducer = (0, toolkit_1.createSlice)({
115
118
  initialState: initialState,
116
119
  reducers: {},
117
120
  extraReducers: function (builder) {
118
- builder.addCase(exports.setThreekitInitialized, function (state, _) {
119
- state.isThreekitInitialized = true;
121
+ builder.addCase(exports.setThreekitInitialized, function (state, action) {
122
+ state.isThreekitInitialized = action.payload;
123
+ return state;
120
124
  });
121
125
  builder.addCase(exports.setPlayerLoading, function (state, action) {
122
126
  state.isPlayerLoading = action.payload;
127
+ return state;
123
128
  });
124
129
  builder.addCase(exports.setPlayerElement, function (state, action) {
125
130
  state.playerElId = action.payload;
131
+ return state;
132
+ });
133
+ builder.addCase(exports.reloadTreble, function (state, action) {
134
+ return __assign(__assign({}, state), action.payload);
126
135
  });
127
136
  },
128
137
  }).reducer;
@@ -146,12 +155,52 @@ exports.getPlayerElementId = getPlayerElementId;
146
155
  /*****************************************************
147
156
  * Complex Actions
148
157
  ****************************************************/
158
+ var initPlayer = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
159
+ var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
160
+ return __generator(this, function (_a) {
161
+ switch (_a.label) {
162
+ case 0:
163
+ el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
164
+ return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el,
165
+ // Variables to sort out
166
+ authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
167
+ case 1:
168
+ player = _a.sent();
169
+ return [4 /*yield*/, player.getConfigurator()];
170
+ case 2:
171
+ configurator = _a.sent();
172
+ if (window.threekit) {
173
+ window.threekit = Object.assign(window.threekit, {
174
+ player: player,
175
+ configurator: configurator,
176
+ });
177
+ }
178
+ else
179
+ window.threekit = {
180
+ player: player,
181
+ configurator: configurator,
182
+ treble: new Treble_1.default({
183
+ player: player,
184
+ orgId: orgId,
185
+ initialConfiguration: configurator.getConfiguration(),
186
+ }),
187
+ };
188
+ dispatch((0, exports.setThreekitInitialized)(true));
189
+ dispatch((0, exports.setPlayerLoading)(false));
190
+ window.threekit.player.on('setConfiguration', function () {
191
+ dispatch((0, attributes_1.setAttributes)(window.threekit.configurator.getDisplayAttributes()));
192
+ });
193
+ return [2 /*return*/];
194
+ }
195
+ });
196
+ }); }; };
197
+ exports.initPlayer = initPlayer;
149
198
  var launch = function (launchConfig) {
150
199
  return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
151
- var config, credentials, products, threekitEnv, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, player, configurator;
152
- var _a, _b, _c, _d, _e;
153
- return __generator(this, function (_f) {
154
- switch (_f.label) {
200
+ var config, credentials, products, threekitEnv, serverUrl, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
201
+ var _a, _b, _c, _d, _e, _f;
202
+ return __generator(this, function (_g) {
203
+ switch (_g.label) {
155
204
  case 0:
156
205
  if (window.threekit)
157
206
  return [2 /*return*/];
@@ -161,6 +210,8 @@ var launch = function (launchConfig) {
161
210
  if (!Object.keys(credentials).length || !Object.keys(products).length)
162
211
  return [2 /*return*/, console.error('Missing credentials')];
163
212
  threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
213
+ serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_e = config === null || config === void 0 ? void 0 : config.project) === null || _e === void 0 ? void 0 : _e.serverUrl);
214
+ (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
164
215
  playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
165
216
  envCredentials = credentials[threekitEnv];
166
217
  product = products[threekitEnv];
@@ -196,59 +247,58 @@ var launch = function (launchConfig) {
196
247
  orgId: orgId,
197
248
  assetId: assetId,
198
249
  threekitDomain: threekitDomainRaw,
250
+ serverUrl: serverUrl,
199
251
  });
200
252
  threekitDomain = connection_1.default.getConnection().threekitDomain;
201
253
  initialConfiguration = __assign({}, initialConfigurationRaw);
202
254
  updatedAssetId = assetId;
203
255
  params = (0, utils_1.getParams)();
204
- configId = ((_e = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _e === void 0 ? void 0 : _e.length)
256
+ configId = ((_f = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _f === void 0 ? void 0 : _f.length)
205
257
  ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
206
258
  : configurationId;
207
259
  if (!configId) return [3 /*break*/, 2];
208
260
  return [4 /*yield*/, api_1.default.configurations.fetch(configId)];
209
261
  case 1:
210
- configuration = _f.sent();
262
+ configuration = _g.sent();
211
263
  if (configuration) {
212
264
  initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
213
265
  connection_1.default.connect({ assetId: configuration.data.productId });
214
266
  updatedAssetId = configuration.data.productId;
215
267
  }
216
- _f.label = 2;
268
+ _g.label = 2;
217
269
  case 2:
218
270
  if (!updatedAssetId)
219
271
  return [2 /*return*/, console.error('missing assetId')];
220
272
  // We create the threekit script
221
- return [4 /*yield*/, (0, utils_1.createThreekitScriptEl)(threekitDomain)];
273
+ return [4 /*yield*/, new Promise(function (resolve) {
274
+ var script = document.createElement('script');
275
+ script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
276
+ script.id = 'threekit-player-bundle';
277
+ script.onload = function () { return resolve(); };
278
+ document.head.appendChild(script);
279
+ })];
222
280
  case 3:
223
281
  // We create the threekit script
224
- _f.sent();
225
- return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el,
226
- // Variables to sort out
227
- authToken: authToken, stageId: stageId, assetId: updatedAssetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
228
- case 4:
229
- player = _f.sent();
230
- return [4 /*yield*/, player.getConfigurator()];
231
- case 5:
232
- configurator = _f.sent();
233
- window.threekit = {
234
- player: player,
235
- configurator: configurator,
236
- treble: new Treble_1.default({
237
- player: player,
282
+ _g.sent();
283
+ return [4 /*yield*/, dispatch((0, exports.initPlayer)({
284
+ el: el,
238
285
  orgId: orgId,
239
- initialConfiguration: configurator.getConfiguration(),
240
- }),
241
- };
242
- dispatch((0, exports.setThreekitInitialized)());
243
- dispatch((0, exports.setPlayerLoading)(false));
244
- window.threekit.player.on('setConfiguration', function () {
245
- dispatch((0, attributes_1.setAttributes)(window.threekit.configurator.getDisplayAttributes()));
246
- dispatch((0, price_1.updatePrice)());
286
+ authToken: authToken,
287
+ stageId: stageId,
288
+ assetId: updatedAssetId,
289
+ playerConfig: playerConfig,
290
+ initialConfiguration: initialConfiguration,
291
+ }))];
292
+ case 4:
293
+ _g.sent();
294
+ document.addEventListener('treble:notification', function (e) {
295
+ message_1.default.info(e.detail.message);
247
296
  });
248
297
  EVENTS = Object.assign(EVENTS, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers);
249
298
  dispatch((0, translations_1.initTranslations)(launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.locale));
250
299
  dispatch((0, price_1.initPrice)());
251
- dispatch((0, product_1.initProduct)());
300
+ dispatch((0, price_1.updatePrice)());
301
+ dispatch((0, product_1.initProduct)(products));
252
302
  dispatch((0, wishlist_1.refreshWishlist)());
253
303
  return [2 /*return*/];
254
304
  }
@@ -256,4 +306,77 @@ var launch = function (launchConfig) {
256
306
  }); };
257
307
  };
258
308
  exports.launch = launch;
309
+ var unloadPlayer = function () { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
310
+ return __generator(this, function (_a) {
311
+ switch (_a.label) {
312
+ case 0:
313
+ dispatch((0, exports.setThreekitInitialized)(true));
314
+ dispatch((0, exports.setPlayerLoading)(false));
315
+ dispatch((0, attributes_1.setAttributes)([]));
316
+ dispatch((0, product_1.setName)(''));
317
+ dispatch((0, product_1.setMetadata)({}));
318
+ return [4 /*yield*/, window.threekit.player.unload()];
319
+ case 1:
320
+ _a.sent();
321
+ return [2 /*return*/];
322
+ }
323
+ });
324
+ }); }; };
325
+ exports.unloadPlayer = unloadPlayer;
326
+ var reloadPlayer = function (config) {
327
+ return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
328
+ var connectionObj, assetId, stageId, initialConfiguration, configuration, state, trebleConfig, playerConfig, el;
329
+ return __generator(this, function (_a) {
330
+ switch (_a.label) {
331
+ case 0:
332
+ connectionObj = connection_1.default.getConnection();
333
+ if (!(config === undefined)) return [3 /*break*/, 1];
334
+ assetId = connectionObj.assetId;
335
+ return [3 /*break*/, 4];
336
+ case 1:
337
+ if (!(typeof config === 'string')) return [3 /*break*/, 2];
338
+ assetId = config;
339
+ return [3 /*break*/, 4];
340
+ case 2:
341
+ assetId = (config === null || config === void 0 ? void 0 : config.assetId) || connectionObj.assetId;
342
+ stageId = config === null || config === void 0 ? void 0 : config.stageId;
343
+ initialConfiguration = (config === null || config === void 0 ? void 0 : config.configuration) || {};
344
+ if (!(config === null || config === void 0 ? void 0 : config.configurationId)) return [3 /*break*/, 4];
345
+ return [4 /*yield*/, api_1.default.configurations.fetch(config === null || config === void 0 ? void 0 : config.configurationId)];
346
+ case 3:
347
+ configuration = _a.sent();
348
+ if (configuration) {
349
+ initialConfiguration = Object.assign({}, initialConfiguration, configuration.data.variant);
350
+ assetId = configuration.data.productId;
351
+ }
352
+ _a.label = 4;
353
+ case 4:
354
+ // Update connection
355
+ if (assetId !== connectionObj.assetId)
356
+ connection_1.default.connect({ assetId: assetId });
357
+ state = getState();
358
+ trebleConfig = (0, utils_1.loadTrebleConfig)();
359
+ playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, trebleConfig.player);
360
+ el = document.getElementById(state.treble.playerElId);
361
+ if (state.treble.isThreekitInitialized)
362
+ dispatch((0, exports.unloadPlayer)());
363
+ return [4 /*yield*/, dispatch((0, exports.initPlayer)({
364
+ el: el,
365
+ orgId: connectionObj.orgId,
366
+ authToken: connectionObj.authToken,
367
+ stageId: stageId,
368
+ assetId: assetId,
369
+ playerConfig: playerConfig,
370
+ initialConfiguration: initialConfiguration,
371
+ }))];
372
+ case 5:
373
+ _a.sent();
374
+ dispatch((0, price_1.updatePrice)());
375
+ dispatch((0, product_1.initProduct)());
376
+ return [2 /*return*/];
377
+ }
378
+ });
379
+ }); };
380
+ };
381
+ exports.reloadPlayer = reloadPlayer;
259
382
  exports.default = reducer;
@@ -1,5 +1,6 @@
1
1
  import { RootState, ThreekitDispatch } from './index';
2
- import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
2
+ import { WishlistArray } from '../Treble';
3
+ import { ISaveConfiguration } from '../api/configurations';
3
4
  /*****************************************************
4
5
  * Types and Interfaces
5
6
  ****************************************************/
@@ -8,7 +9,7 @@ export declare type WishlistState = WishlistArray;
8
9
  * Standard Selectors
9
10
  ****************************************************/
10
11
  export declare const refreshWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], void, {}>;
11
- export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], ISaveConfigurationConfig, {}>;
12
+ export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], Omit<ISaveConfiguration, "configurator">, {}>;
12
13
  export declare const clearWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/clear", never, never>;
13
14
  export declare const removeFromWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[idx: number], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/remove-item", never, never>;
14
15
  /*****************************************************
@@ -20,7 +20,7 @@ export interface ISceneQuery {
20
20
  child?: string;
21
21
  parent?: boolean;
22
22
  includeParent?: boolean;
23
- from?: ISceneQuery;
23
+ from?: string | ISceneQuery;
24
24
  hasPlug?: string;
25
25
  operator?: any;
26
26
  operatorIndex?: number;
@@ -36,6 +36,7 @@ export interface ISceneQuery {
36
36
  hierarchial?: boolean;
37
37
  }
38
38
  export interface ISceneResult {
39
+ id: string;
39
40
  name: string;
40
41
  configurator: IThreekitPrivateConfigurator;
41
42
  }
@@ -83,6 +84,11 @@ export interface IDisplayAttributeAssetValue extends IConfigurationAssetValue {
83
84
  tags: Array<string>;
84
85
  label: string;
85
86
  }
87
+ export interface IHydratedAttributeAssetValue extends IDisplayAttributeAssetValue {
88
+ label: string;
89
+ handleSelect: () => Promise<void>;
90
+ selected: boolean;
91
+ }
86
92
  export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigurationAsset> {
87
93
  assetType: AssetType;
88
94
  blacklist: [];
@@ -92,12 +98,17 @@ export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigu
92
98
  values: Array<V>;
93
99
  }
94
100
  export declare type IDisplayAttributeAsset = IAttributeAssetBase<IDisplayAttributeAssetValue>;
101
+ export declare type IHydratedAttributeAsset = IAttributeAssetBase<IHydratedAttributeAssetValue>;
95
102
  export declare type IAttributeAsset = IAttributeAssetBase<IConfigurationAssetValue>;
96
103
  /****** String TYPE ATTRIBUTE *******/
97
104
  export interface IDisplayAttributeStringValue {
98
105
  label: string;
99
106
  value: string;
100
107
  }
108
+ export interface IHydratedAttributeStringValue extends IDisplayAttributeStringValue {
109
+ handleSelect: () => Promise<void>;
110
+ selected: boolean;
111
+ }
101
112
  export interface IAttributeStringBase<V> extends IAttributeBase<'String', string> {
102
113
  blacklist: [];
103
114
  defaultValue: string;
@@ -106,6 +117,7 @@ export interface IAttributeStringBase<V> extends IAttributeBase<'String', string
106
117
  values: Array<V>;
107
118
  }
108
119
  export declare type IDisplayAttributeString = IAttributeStringBase<IDisplayAttributeStringValue>;
120
+ export declare type IHydratedAttributeString = IAttributeStringBase<IHydratedAttributeStringValue>;
109
121
  export declare type IAttributeString = IAttributeStringBase<string>;
110
122
  /****** STRING TYPE ATTRIBUTE *******/
111
123
  export interface IAttributeColor extends IAttributeBase<'Color', IConfigurationColor> {
@@ -122,7 +134,9 @@ export interface IAttributeNumber extends IAttributeBase<'Number', number> {
122
134
  /****** getAttributes() *******/
123
135
  export declare type IThreekitAttribute = IAttributeAsset | IAttributeColor | IAttributeString | IAttributeNumber;
124
136
  /****** getDisplayAttributes() *******/
125
- export declare type IThreekitDisplayAttribute = IDisplayAttributeAsset | IAttributeColor | IDisplayAttributeString | IAttributeNumber;
137
+ export declare type IThreekitDisplayAttribute = IDisplayAttributeAsset | IDisplayAttributeString | IAttributeColor | IAttributeNumber;
138
+ /****** Treble Hydrated Values *******/
139
+ export declare type IHydratedAttribute = IHydratedAttributeAsset | IHydratedAttributeString | IAttributeColor | IAttributeNumber;
126
140
  /***************************************************
127
141
  * Camera
128
142
  **************************************************/
@@ -160,6 +174,8 @@ export interface IThreekitScene {
160
174
  RENDERED: 'rendered';
161
175
  };
162
176
  get: (query: ISceneQuery | string) => ISceneResult;
177
+ find: (query: ISceneQuery | string) => ISceneResult;
178
+ set: (query: ISceneQuery | string, transform: ICoordinates) => void;
163
179
  }
164
180
  export interface IThreekitTools {
165
181
  addTool: (tool: string) => void;
@@ -192,6 +208,7 @@ export interface IThreekitPlayer {
192
208
  getConfigurator: () => Promise<IThreekitConfigurator>;
193
209
  enableApi: (api: PRIVATE_APIS) => any;
194
210
  snapshotAsync: (snapshotConfig: ISnapshotConfig) => Promise<string>;
211
+ unload: () => Promise<string>;
195
212
  }
196
213
  export interface IThreekitPrivateConfigurator extends IThreekitConfigurator {
197
214
  getAppliedConfiguration: (attributeName: string) => string;
@@ -259,6 +276,7 @@ export interface IProducts extends Record<string, string | Partial<IProduct>> {
259
276
  export interface IProject {
260
277
  credentials: ICredentials;
261
278
  products: IProducts;
279
+ serverUrl?: string;
262
280
  }
263
281
  export interface ITrebleConfig {
264
282
  project: IProject;
package/dist/utils.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { ITranslationMap } from './api/products';
2
1
  import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute } from './threekit';
3
2
  import { ITrebleConfig, IAttributeTypes } from './threekit';
4
3
  import { RawAttributeValue } from './hooks/useAttribute';
@@ -22,7 +21,7 @@ export declare const generateLayoutClassName: (component: string, customClassNam
22
21
  export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
23
22
  export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
24
23
  export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
25
- export declare const IsJsonString: (str: string) => boolean;
24
+ export declare const isJsonString: (str: string) => boolean;
26
25
  export declare const objectToQueryStr: (obj: Record<string, any>) => string;
27
26
  export declare const getParams: () => Record<string, string | {
28
27
  [key: string]: any;
@@ -43,17 +42,10 @@ export declare const getCameraPosition: (cameraApi: IThreekitCamera) => {
43
42
  export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition: ICameraPosition) => void;
44
43
  export declare const dataURItoBlob: (dataURI: string) => Blob;
45
44
  export declare const dataURItoFile: (dataURI: string, filename: string) => File;
45
+ export declare const downloadSnapshot: (snapshot: string, filename: string) => Promise<void>;
46
46
  export declare const copyToClipboard: (data: string | Record<string, string | number | boolean>) => void;
47
47
  export declare const easeInOutCubic: (val: number) => number;
48
48
  export declare const metadataValueToObject: (data: string) => Record<string, string | number>;
49
- /**
50
- * A function to load the Threekit JS Player API script
51
- *
52
- * @param threekitDomain The threekit environement to use. i.e. preview.threekit.com
53
- * @returns
54
- */
55
- export declare const createThreekitScriptEl: (threekitDomain: string) => Promise<void>;
56
- export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
57
49
  export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
58
50
  assetId: RawAttributeValue;
59
51
  } | undefined;
package/dist/utils.js CHANGED
@@ -1,4 +1,40 @@
1
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
+ };
2
38
  var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
39
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
40
  if (ar || !(i in from)) {
@@ -9,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
9
45
  return to.concat(ar || Array.prototype.slice.call(from));
10
46
  };
11
47
  Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
48
+ exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.downloadSnapshot = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.isJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
13
49
  var constants_1 = require("./constants");
14
50
  var generateClassName = function (baseClass) {
15
51
  return function (component, customClassName, title) {
@@ -29,7 +65,7 @@ exports.generateLayoutClassName = (0, exports.generateClassName)(constants_1.LAY
29
65
  exports.generateToolClassName = (0, exports.generateClassName)(constants_1.TOOL_CLASS_NAME);
30
66
  exports.generateDisplayClassName = (0, exports.generateClassName)(constants_1.DISPLAY_CLASS_NAME);
31
67
  exports.generateFormClassName = (0, exports.generateClassName)(constants_1.FORM_CLASS_NAME);
32
- var IsJsonString = function (str) {
68
+ var isJsonString = function (str) {
33
69
  try {
34
70
  JSON.parse(str);
35
71
  }
@@ -38,7 +74,7 @@ var IsJsonString = function (str) {
38
74
  }
39
75
  return true;
40
76
  };
41
- exports.IsJsonString = IsJsonString;
77
+ exports.isJsonString = isJsonString;
42
78
  var isObject = function (object) {
43
79
  return object != null && typeof object === 'object';
44
80
  };
@@ -50,7 +86,7 @@ var objectToQueryStr = function (obj) {
50
86
  if (i)
51
87
  output += '&';
52
88
  if (val !== undefined)
53
- output += "".concat(key, "=").concat((0, exports.IsJsonString)(val) ? JSON.stringify(val) : val);
89
+ output += "".concat(key, "=").concat((0, exports.isJsonString)(val) ? JSON.stringify(val) : val);
54
90
  return output;
55
91
  }, '?');
56
92
  };
@@ -62,7 +98,7 @@ var getParams = function () {
62
98
  if (!(key === null || key === void 0 ? void 0 : key.length))
63
99
  return output;
64
100
  var preppedValue = decodeURIComponent(value);
65
- output[decodeURIComponent(key)] = (0, exports.IsJsonString)(preppedValue)
101
+ output[decodeURIComponent(key)] = (0, exports.isJsonString)(preppedValue)
66
102
  ? JSON.parse(preppedValue)
67
103
  : preppedValue;
68
104
  return output;
@@ -225,6 +261,27 @@ var dataURItoFile = function (dataURI, filename) {
225
261
  return new File([u8arr], filename, { type: mime });
226
262
  };
227
263
  exports.dataURItoFile = dataURItoFile;
264
+ var downloadSnapshot = function (snapshot, filename) { return __awaiter(void 0, void 0, void 0, function () {
265
+ var blob, blobUrl, link, clickHandler;
266
+ return __generator(this, function (_a) {
267
+ blob = (0, exports.dataURItoBlob)(snapshot);
268
+ blobUrl = URL.createObjectURL(blob);
269
+ link = document.createElement('a');
270
+ link.href = blobUrl;
271
+ link.download = filename;
272
+ clickHandler = function () {
273
+ setTimeout(function () {
274
+ URL.revokeObjectURL(blobUrl);
275
+ link.removeEventListener('click', clickHandler);
276
+ }, 150);
277
+ };
278
+ link.addEventListener('click', clickHandler);
279
+ document.body.appendChild(link);
280
+ link.click();
281
+ return [2 /*return*/];
282
+ });
283
+ }); };
284
+ exports.downloadSnapshot = downloadSnapshot;
228
285
  var copyToClipboard = function (data) {
229
286
  if (!data)
230
287
  return;
@@ -252,59 +309,6 @@ var metadataValueToObject = function (data) {
252
309
  }, {});
253
310
  };
254
311
  exports.metadataValueToObject = metadataValueToObject;
255
- /**
256
- * A function to load the Threekit JS Player API script
257
- *
258
- * @param threekitDomain The threekit environement to use. i.e. preview.threekit.com
259
- * @returns
260
- */
261
- var createThreekitScriptEl = function (threekitDomain) {
262
- return new Promise(function (resolve) {
263
- var script = document.createElement('script');
264
- script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
265
- script.id = 'threekit-player-bundle';
266
- script.onload = function () { return resolve(); };
267
- document.head.appendChild(script);
268
- });
269
- };
270
- exports.createThreekitScriptEl = createThreekitScriptEl;
271
- var translateAttribute = function (attributes, translations, language) {
272
- var hasTranslation = !!language && !!translations;
273
- return attributes.reduce(function (output, attribute) {
274
- var _a;
275
- var _b;
276
- return Object.assign(output, (_a = {},
277
- _a[attribute.name] = Object.assign({}, attribute, {
278
- label: hasTranslation
279
- ? ((_b = translations === null || translations === void 0 ? void 0 : translations[attribute.name]) === null || _b === void 0 ? void 0 : _b[language]) || attribute.name
280
- : attribute.name,
281
- }, attribute.type === 'String'
282
- ? {
283
- values: attribute.values.map(function (el) {
284
- var _a;
285
- return Object.assign({}, el, {
286
- label: hasTranslation
287
- ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.label]) === null || _a === void 0 ? void 0 : _a[language]) || el.label
288
- : attribute.name,
289
- });
290
- }),
291
- }
292
- : attribute.type === 'Asset'
293
- ? {
294
- values: attribute.values.map(function (el) {
295
- var _a;
296
- return Object.assign({}, el, {
297
- label: hasTranslation
298
- ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.name]) === null || _a === void 0 ? void 0 : _a[language]) || el.name
299
- : attribute.name,
300
- });
301
- }),
302
- }
303
- : undefined),
304
- _a));
305
- });
306
- };
307
- exports.translateAttribute = translateAttribute;
308
312
  var selectionToConfiguration = function (value, attributeType) {
309
313
  switch (attributeType) {
310
314
  case constants_1.ATTRIBUTE_TYPES.number:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threekit-tools/treble",
3
- "version": "0.0.57",
3
+ "version": "0.0.60",
4
4
  "author": "Amaan Saeed",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -13,6 +13,14 @@
13
13
  "publishConfig": {
14
14
  "directory": "dist"
15
15
  },
16
+ "jest": {
17
+ "verbose": true,
18
+ "globals": {
19
+ "ts-jest": {
20
+ "tsConfig": "tsconfig.json"
21
+ }
22
+ }
23
+ },
16
24
  "scripts": {
17
25
  "start": "tsc --watch",
18
26
  "build": "tsc",
@@ -21,7 +29,8 @@
21
29
  "build-storybook": "build-storybook -o build",
22
30
  "lint": "eslint ./src",
23
31
  "check-format": "prettier -c ./src",
24
- "format": "prettier --write ./src"
32
+ "format": "prettier --write ./src",
33
+ "test": "jest"
25
34
  },
26
35
  "dependencies": {
27
36
  "@reduxjs/toolkit": "^1.6.2",
@@ -40,18 +49,24 @@
40
49
  "@storybook/addon-links": "^6.3.12",
41
50
  "@storybook/addon-storysource": "^6.3.12",
42
51
  "@storybook/react": "^6.3.12",
52
+ "@testing-library/jest-dom": "^5.16.2",
53
+ "@testing-library/react": "^12.1.3",
54
+ "@types/jest": "^27.4.1",
43
55
  "@types/node": "^16.10.3",
44
56
  "@types/react": ">=17.0.27",
45
57
  "@types/react-dom": ">=17.0.9",
46
58
  "@types/redux-logger": "^3.0.9",
47
59
  "@types/styled-components": "^5.1.15",
48
60
  "@types/webpack-env": "^1.16.3",
61
+ "babel-jest": "^27.5.1",
49
62
  "babel-loader": "^8.2.2",
63
+ "jest": "^27.5.1",
50
64
  "react": ">=17.0.2",
51
65
  "react-dom": ">=17.0.2",
52
66
  "rimraf": "^3.0.2",
53
67
  "serve": "^12.0.1",
54
68
  "storybook-addon-styled-component-theme": "^2.0.0",
69
+ "ts-jest": "^27.1.3",
55
70
  "typescript": ">=4.4.4"
56
71
  },
57
72
  "gitHead": "2e16bcf98f81e16bb1768072fdb3968122e7966f"
@@ -1,2 +0,0 @@
1
- export declare type AttributeIdentifier = string | RegExp;
2
- export declare const useArrayAttribute: (attributeIdentifier: AttributeIdentifier) => string | RegExp | never[];