hasting-swatchcart-module 1.0.61 → 1.0.62
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.
- package/README.md +456 -456
- package/dist/cdn/lib/vite-env.d.ts +1 -1
- package/dist/cdn/main.js +485 -491
- package/dist/main.cjs +72 -72
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +290 -296
- package/dist/main.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,456 +1,456 @@
|
|
|
1
|
-
# hasting-swatchcart-module
|
|
2
|
-
|
|
3
|
-
This module was created for implementation into clients applications
|
|
4
|
-
There are two ways of using this module: `NPM` or `CDN`
|
|
5
|
-
|
|
6
|
-
## Installation
|
|
7
|
-
|
|
8
|
-
### NPM
|
|
9
|
-
|
|
10
|
-
```bash
|
|
11
|
-
npm i hasting-swatchcart-module
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
### NPM usage
|
|
15
|
-
|
|
16
|
-
### UI (attributes from outside )
|
|
17
|
-
|
|
18
|
-
### For example
|
|
19
|
-
|
|
20
|
-
```js
|
|
21
|
-
const handleOpenSidebar = () => {
|
|
22
|
-
// open/close a module
|
|
23
|
-
};
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
```js
|
|
27
|
-
const handleSetData = (data) => {
|
|
28
|
-
// Callback that returns selected materials from the cart back to the parent Application.
|
|
29
|
-
};
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
```js
|
|
33
|
-
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
|
|
34
|
-
|
|
35
|
-
<SwatchModule
|
|
36
|
-
isOpen={isOpenModule}
|
|
37
|
-
uiDataType={EDataInputType.UI}
|
|
38
|
-
data={data}
|
|
39
|
-
onToggleSidebar={handleOpenSidebar}
|
|
40
|
-
onSendData={handleSetData}
|
|
41
|
-
/>;
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### Fetch product
|
|
45
|
-
|
|
46
|
-
```js
|
|
47
|
-
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
|
|
48
|
-
|
|
49
|
-
<SwatchModule
|
|
50
|
-
isOpen={isOpenModule}
|
|
51
|
-
uiDataType={EDataInputType.FETCH_DATA_PRODUCT}
|
|
52
|
-
assetId={'asset_id'}
|
|
53
|
-
onToggleSidebar={handleOpenSidebar}
|
|
54
|
-
onSendData={handleSetData}
|
|
55
|
-
/>;
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### Fetch product all
|
|
59
|
-
|
|
60
|
-
```js
|
|
61
|
-
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
|
|
62
|
-
|
|
63
|
-
<SwatchModule
|
|
64
|
-
isOpen={isOpenModule}
|
|
65
|
-
uiDataType={EDataInputType.FETCH_DATA_ALL}
|
|
66
|
-
onToggleSidebar={handleOpenSidebar}
|
|
67
|
-
onSendData={handleSetData}
|
|
68
|
-
/>;
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### CDN (no installation required) usage and installation
|
|
72
|
-
|
|
73
|
-
```html
|
|
74
|
-
<link
|
|
75
|
-
rel="stylesheet"
|
|
76
|
-
href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
|
|
77
|
-
/>
|
|
78
|
-
<body>
|
|
79
|
-
<div id="root"></div>
|
|
80
|
-
|
|
81
|
-
<script type="module">
|
|
82
|
-
import {
|
|
83
|
-
mountSwatchModule,
|
|
84
|
-
EDataInputType,
|
|
85
|
-
} from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
86
|
-
|
|
87
|
-
// local MOCK JSON data or your real data
|
|
88
|
-
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
89
|
-
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
90
|
-
|
|
91
|
-
const rootElement = document.getElementById('root');
|
|
92
|
-
|
|
93
|
-
const handleToggleSidebar = () => {
|
|
94
|
-
console.log('handleToggleSidebar');
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
const handleSendData = (selectedData) => {
|
|
98
|
-
console.log('handleSendData', selectedData);
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
// UI (attributes from outside) - single product
|
|
102
|
-
mountSwatchModule(rootElement, {
|
|
103
|
-
isOpen: true,
|
|
104
|
-
uiDataType: EDataInputType.UI,
|
|
105
|
-
data: mockData, // or your data
|
|
106
|
-
onToggleSidebar: handleToggleSidebar,
|
|
107
|
-
onSendData: handleSendData,
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
// Fetch product data - single product
|
|
111
|
-
mountSwatchModule(rootElement, {
|
|
112
|
-
isOpen: true,
|
|
113
|
-
uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
|
|
114
|
-
assetId: 'assetId',
|
|
115
|
-
onToggleSidebar: handleToggleSidebar,
|
|
116
|
-
onSendData: handleSendData,
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
// Fetch product all data - multi product
|
|
120
|
-
mountSwatchModule(rootElement, {
|
|
121
|
-
isOpen: true,
|
|
122
|
-
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
123
|
-
onToggleSidebar: handleToggleSidebar,
|
|
124
|
-
onSendData: handleSendData,
|
|
125
|
-
});
|
|
126
|
-
</script>
|
|
127
|
-
</body>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## Props
|
|
131
|
-
|
|
132
|
-
```ts
|
|
133
|
-
export interface IAttributeAsset {
|
|
134
|
-
assetType: string;
|
|
135
|
-
blacklist: unknown[];
|
|
136
|
-
defaultValue: { assetId: string; type: string }[];
|
|
137
|
-
disabledValues: unknown[];
|
|
138
|
-
enabled: boolean;
|
|
139
|
-
global: {
|
|
140
|
-
defaultValue: { assetId: string; type: string };
|
|
141
|
-
id: string;
|
|
142
|
-
metadata: unknown[];
|
|
143
|
-
name: string;
|
|
144
|
-
type: string;
|
|
145
|
-
};
|
|
146
|
-
hiddenValues: unknown[];
|
|
147
|
-
id: string;
|
|
148
|
-
label: string;
|
|
149
|
-
metadata: {
|
|
150
|
-
[key: string]: string;
|
|
151
|
-
};
|
|
152
|
-
name: string;
|
|
153
|
-
type: string;
|
|
154
|
-
value: {
|
|
155
|
-
assetId: string;
|
|
156
|
-
configuration: unknown;
|
|
157
|
-
metadata: { [key: string]: string };
|
|
158
|
-
name: string;
|
|
159
|
-
tags: string[];
|
|
160
|
-
type: string;
|
|
161
|
-
};
|
|
162
|
-
values: IAttributeAssetValues[];
|
|
163
|
-
visible: boolean;
|
|
164
|
-
}
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### UI (attributes from outside )
|
|
168
|
-
|
|
169
|
-
| Prop | Type | Required | Description |
|
|
170
|
-
| --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
171
|
-
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
|
|
172
|
-
| uiDataType | 'UI' | Yes | Defines type data mode. Rendered data depends on this parameter |
|
|
173
|
-
| data | IAttributeAsset[] | Yes | Array of attributes data. Passed to the module to render swatch cards. |
|
|
174
|
-
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
|
|
175
|
-
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
|
|
176
|
-
|
|
177
|
-
### Fetch product
|
|
178
|
-
|
|
179
|
-
| Prop | Type | Required | Description |
|
|
180
|
-
| ----------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
|
|
181
|
-
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
|
|
182
|
-
| uiDataType | 'FETCH_DATA_PRODUCT' | Yes | Defines type data mode. Rendered data depends on this parameter |
|
|
183
|
-
| assetId | string | Yes | Defined an object for getting it`s attributes |
|
|
184
|
-
| configurationData | any[] | Yes | Takes data from the scene and sets it to the our module |
|
|
185
|
-
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
|
|
186
|
-
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
|
|
187
|
-
| onSelectMaterial | (item) => returns selected the selected material | No | Callback that returns selected material from the material list back to the parent Application. |
|
|
188
|
-
|
|
189
|
-
### Fetch all product
|
|
190
|
-
|
|
191
|
-
| Prop | Type | Required | Description |
|
|
192
|
-
| --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
193
|
-
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
|
|
194
|
-
| uiDataType | 'FETCH_DATA_ALL' | Yes | Defines type data mode. Rendered data depends on this parameter |
|
|
195
|
-
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
|
|
196
|
-
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
|
|
197
|
-
|
|
198
|
-
## Development
|
|
199
|
-
|
|
200
|
-
```bash
|
|
201
|
-
git clone https://github.com/Elementals-technical/hasting-swatchcart-module.git
|
|
202
|
-
cd hasting-swatchcart-module
|
|
203
|
-
npm install
|
|
204
|
-
npm run dev
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
### General Information
|
|
208
|
-
|
|
209
|
-
This project gives a module which can be implemented in two ways `NPM`, `CDN`.
|
|
210
|
-
|
|
211
|
-
**_IMPORTANT_** before pushing code to the git repo, husky runs this scripts for checking `error/warnings`. If your scripts din't finish, check the console for more information
|
|
212
|
-
|
|
213
|
-
```bash
|
|
214
|
-
npm run build:all
|
|
215
|
-
npx lint-staged
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
### Stack
|
|
219
|
-
|
|
220
|
-
- react
|
|
221
|
-
- RTK
|
|
222
|
-
- css/tailwind
|
|
223
|
-
- vite
|
|
224
|
-
- husky
|
|
225
|
-
- lint
|
|
226
|
-
- FSD as architecture base
|
|
227
|
-
|
|
228
|
-
### Testing CDN Usage Locally
|
|
229
|
-
|
|
230
|
-
1. **Build**
|
|
231
|
-
If a `dist` folder `doesn't exist`, use this command for making it.
|
|
232
|
-
|
|
233
|
-
```bash
|
|
234
|
-
npm run build:all
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
If a `dist` folder `exist`, use this command for making it.
|
|
238
|
-
|
|
239
|
-
```bash
|
|
240
|
-
npm run build:cdn
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
2. **Test with local files** - Create an HTML file and use local paths:
|
|
244
|
-
|
|
245
|
-
```html
|
|
246
|
-
<link rel="stylesheet" href="../dist/cdn/main.css" />
|
|
247
|
-
<script type="module">
|
|
248
|
-
// Test locally
|
|
249
|
-
import { mountSwatchModule, EDataInputType } from '../dist/cdn/main.js';
|
|
250
|
-
|
|
251
|
-
const rootElement = document.getElementById('root');
|
|
252
|
-
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
253
|
-
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
254
|
-
|
|
255
|
-
const handleToggleSidebar = () => {
|
|
256
|
-
console.log('handleToggleSidebar is working');
|
|
257
|
-
};
|
|
258
|
-
|
|
259
|
-
const handleSendData = (selectedData) => {
|
|
260
|
-
console.log('handleSendData is working', selectedData);
|
|
261
|
-
};
|
|
262
|
-
|
|
263
|
-
// Chose one of these possible options
|
|
264
|
-
|
|
265
|
-
// UI (attributes from outside) - single product
|
|
266
|
-
mountSwatchModule(rootElement, {
|
|
267
|
-
isOpen: true,
|
|
268
|
-
uiDataType: EDataInputType.UI,
|
|
269
|
-
data: mockData, // or your data
|
|
270
|
-
onToggleSidebar: handleToggleSidebar,
|
|
271
|
-
onSendData: handleSendData,
|
|
272
|
-
});
|
|
273
|
-
|
|
274
|
-
// Fetch product data - single product
|
|
275
|
-
mountSwatchModule(rootElement, {
|
|
276
|
-
isOpen: true,
|
|
277
|
-
uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
|
|
278
|
-
assetId: 'assetId',
|
|
279
|
-
onToggleSidebar: handleToggleSidebar,
|
|
280
|
-
onSendData: handleSendData,
|
|
281
|
-
});
|
|
282
|
-
|
|
283
|
-
// Fetch product all data - multi product
|
|
284
|
-
mountSwatchModule(rootElement, {
|
|
285
|
-
isOpen: true,
|
|
286
|
-
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
287
|
-
onToggleSidebar: handleToggleSidebar,
|
|
288
|
-
onSendData: handleSendData,
|
|
289
|
-
});
|
|
290
|
-
</script>
|
|
291
|
-
```
|
|
292
|
-
|
|
293
|
-
3. **Test with CDN** - Use the published CDN version:
|
|
294
|
-
|
|
295
|
-
```html
|
|
296
|
-
<!-- Test real CDN -->
|
|
297
|
-
<link
|
|
298
|
-
rel="stylesheet"
|
|
299
|
-
href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
|
|
300
|
-
/>
|
|
301
|
-
|
|
302
|
-
<div id="root"></div>
|
|
303
|
-
<script type="module">
|
|
304
|
-
// Test real CDN
|
|
305
|
-
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
306
|
-
|
|
307
|
-
// local JSON data
|
|
308
|
-
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
309
|
-
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
310
|
-
|
|
311
|
-
const rootElement = document.getElementById('root'); <script type="module">
|
|
312
|
-
// Test locally
|
|
313
|
-
// import { mountSwatchModule } from '../dist/cdn/main.js';
|
|
314
|
-
|
|
315
|
-
// Test real CDN
|
|
316
|
-
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
317
|
-
|
|
318
|
-
// local JSON data
|
|
319
|
-
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
320
|
-
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
321
|
-
|
|
322
|
-
const rootElement = document.getElementById('root');
|
|
323
|
-
|
|
324
|
-
const handleToggleSidebar = () => {
|
|
325
|
-
console.log('handleToggleSidebar');
|
|
326
|
-
};
|
|
327
|
-
|
|
328
|
-
const handleSendData = (selectedData) => {
|
|
329
|
-
console.log('handleSendData', selectedData);
|
|
330
|
-
};
|
|
331
|
-
|
|
332
|
-
// Chose one of these possible options
|
|
333
|
-
|
|
334
|
-
// UI (attributes from outside) - single product
|
|
335
|
-
mountSwatchModule(rootElement, {
|
|
336
|
-
isOpen: true,
|
|
337
|
-
uiDataType: EDataInputType.UI,
|
|
338
|
-
data: mockData, // or your data
|
|
339
|
-
onToggleSidebar: handleToggleSidebar,
|
|
340
|
-
onSendData: handleSendData,
|
|
341
|
-
});
|
|
342
|
-
|
|
343
|
-
// Fetch product data - single product
|
|
344
|
-
mountSwatchModule(rootElement, {
|
|
345
|
-
isOpen: true,
|
|
346
|
-
uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
|
|
347
|
-
assetId: 'assetId',
|
|
348
|
-
onToggleSidebar: handleToggleSidebar,
|
|
349
|
-
onSendData: handleSendData,
|
|
350
|
-
});
|
|
351
|
-
|
|
352
|
-
// Fetch product all data - multi product
|
|
353
|
-
mountSwatchModule(rootElement, {
|
|
354
|
-
isOpen: true,
|
|
355
|
-
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
356
|
-
onToggleSidebar: handleToggleSidebar,
|
|
357
|
-
onSendData: handleSendData,
|
|
358
|
-
});
|
|
359
|
-
</script>
|
|
360
|
-
```
|
|
361
|
-
|
|
362
|
-
### Testing Module Usage Locally
|
|
363
|
-
|
|
364
|
-
1. **Build**
|
|
365
|
-
|
|
366
|
-
```bash
|
|
367
|
-
npm run build:lib
|
|
368
|
-
```
|
|
369
|
-
|
|
370
|
-
2. **Run Locally**
|
|
371
|
-
|
|
372
|
-
After finishing `build` in the `src/App.ts`, import builded file from the builded folder
|
|
373
|
-
|
|
374
|
-
```js
|
|
375
|
-
import { SwatchModule } from '../../dist/main'; // build module
|
|
376
|
-
```
|
|
377
|
-
|
|
378
|
-
3. **Use module**
|
|
379
|
-
|
|
380
|
-
### UI (attributes from outside )
|
|
381
|
-
|
|
382
|
-
```js
|
|
383
|
-
<SwatchModule
|
|
384
|
-
isOpen={isOpenModule}
|
|
385
|
-
uiDataType={'UI'}
|
|
386
|
-
data={data}
|
|
387
|
-
onToggleSidebar={handleOpenSidebar}
|
|
388
|
-
onSendData={handleSetData}
|
|
389
|
-
/>
|
|
390
|
-
```
|
|
391
|
-
|
|
392
|
-
### Fetch product
|
|
393
|
-
|
|
394
|
-
```js
|
|
395
|
-
<SwatchModule
|
|
396
|
-
isOpen={isOpenModule}
|
|
397
|
-
uiDataType={'FETCH_DATA_PRODUCT'}
|
|
398
|
-
assetId={'asset_id'}
|
|
399
|
-
onToggleSidebar={handleOpenSidebar}
|
|
400
|
-
onSendData={handleSetData}
|
|
401
|
-
/>
|
|
402
|
-
```
|
|
403
|
-
|
|
404
|
-
### Fetch product all
|
|
405
|
-
|
|
406
|
-
```js
|
|
407
|
-
<SwatchModule
|
|
408
|
-
isOpen={isOpenModule}
|
|
409
|
-
uiDataType={'FETCH_DATA_PRODUCT_All'}
|
|
410
|
-
onToggleSidebar={handleOpenSidebar}
|
|
411
|
-
onSendData={handleSetData}
|
|
412
|
-
/>
|
|
413
|
-
```
|
|
414
|
-
|
|
415
|
-
## Branching
|
|
416
|
-
|
|
417
|
-
We have one main branch `main`. This branch connected to DO and our web version of our module.
|
|
418
|
-
|
|
419
|
-
## Publishing
|
|
420
|
-
|
|
421
|
-
In our app we have two envs that we need to published
|
|
422
|
-
|
|
423
|
-
- web
|
|
424
|
-
- module
|
|
425
|
-
|
|
426
|
-
### Publishing web
|
|
427
|
-
|
|
428
|
-
```bach
|
|
429
|
-
npm run build
|
|
430
|
-
```
|
|
431
|
-
|
|
432
|
-
Then push your changes to the `develop` branch then push to the `main`
|
|
433
|
-
|
|
434
|
-
### Publishing module
|
|
435
|
-
|
|
436
|
-
Before Publishing you need to start
|
|
437
|
-
|
|
438
|
-
```bach
|
|
439
|
-
npm run build:all
|
|
440
|
-
```
|
|
441
|
-
|
|
442
|
-
Then
|
|
443
|
-
|
|
444
|
-
Update module version
|
|
445
|
-
|
|
446
|
-
`"version": "*.*.*"`
|
|
447
|
-
|
|
448
|
-
Then
|
|
449
|
-
|
|
450
|
-
```bach
|
|
451
|
-
npm publish
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
You can publish module changes from any branch you want
|
|
455
|
-
|
|
456
|
-
\*\* Don't forget to add your changes to the `main` branch
|
|
1
|
+
# hasting-swatchcart-module
|
|
2
|
+
|
|
3
|
+
This module was created for implementation into clients applications
|
|
4
|
+
There are two ways of using this module: `NPM` or `CDN`
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
### NPM
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm i hasting-swatchcart-module
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### NPM usage
|
|
15
|
+
|
|
16
|
+
### UI (attributes from outside )
|
|
17
|
+
|
|
18
|
+
### For example
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
const handleOpenSidebar = () => {
|
|
22
|
+
// open/close a module
|
|
23
|
+
};
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
const handleSetData = (data) => {
|
|
28
|
+
// Callback that returns selected materials from the cart back to the parent Application.
|
|
29
|
+
};
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
|
|
34
|
+
|
|
35
|
+
<SwatchModule
|
|
36
|
+
isOpen={isOpenModule}
|
|
37
|
+
uiDataType={EDataInputType.UI}
|
|
38
|
+
data={data}
|
|
39
|
+
onToggleSidebar={handleOpenSidebar}
|
|
40
|
+
onSendData={handleSetData}
|
|
41
|
+
/>;
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Fetch product
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
|
|
48
|
+
|
|
49
|
+
<SwatchModule
|
|
50
|
+
isOpen={isOpenModule}
|
|
51
|
+
uiDataType={EDataInputType.FETCH_DATA_PRODUCT}
|
|
52
|
+
assetId={'asset_id'}
|
|
53
|
+
onToggleSidebar={handleOpenSidebar}
|
|
54
|
+
onSendData={handleSetData}
|
|
55
|
+
/>;
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Fetch product all
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
|
|
62
|
+
|
|
63
|
+
<SwatchModule
|
|
64
|
+
isOpen={isOpenModule}
|
|
65
|
+
uiDataType={EDataInputType.FETCH_DATA_ALL}
|
|
66
|
+
onToggleSidebar={handleOpenSidebar}
|
|
67
|
+
onSendData={handleSetData}
|
|
68
|
+
/>;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### CDN (no installation required) usage and installation
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<link
|
|
75
|
+
rel="stylesheet"
|
|
76
|
+
href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
|
|
77
|
+
/>
|
|
78
|
+
<body>
|
|
79
|
+
<div id="root"></div>
|
|
80
|
+
|
|
81
|
+
<script type="module">
|
|
82
|
+
import {
|
|
83
|
+
mountSwatchModule,
|
|
84
|
+
EDataInputType,
|
|
85
|
+
} from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
86
|
+
|
|
87
|
+
// local MOCK JSON data or your real data
|
|
88
|
+
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
89
|
+
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
90
|
+
|
|
91
|
+
const rootElement = document.getElementById('root');
|
|
92
|
+
|
|
93
|
+
const handleToggleSidebar = () => {
|
|
94
|
+
console.log('handleToggleSidebar');
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const handleSendData = (selectedData) => {
|
|
98
|
+
console.log('handleSendData', selectedData);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
// UI (attributes from outside) - single product
|
|
102
|
+
mountSwatchModule(rootElement, {
|
|
103
|
+
isOpen: true,
|
|
104
|
+
uiDataType: EDataInputType.UI,
|
|
105
|
+
data: mockData, // or your data
|
|
106
|
+
onToggleSidebar: handleToggleSidebar,
|
|
107
|
+
onSendData: handleSendData,
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
// Fetch product data - single product
|
|
111
|
+
mountSwatchModule(rootElement, {
|
|
112
|
+
isOpen: true,
|
|
113
|
+
uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
|
|
114
|
+
assetId: 'assetId',
|
|
115
|
+
onToggleSidebar: handleToggleSidebar,
|
|
116
|
+
onSendData: handleSendData,
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
// Fetch product all data - multi product
|
|
120
|
+
mountSwatchModule(rootElement, {
|
|
121
|
+
isOpen: true,
|
|
122
|
+
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
123
|
+
onToggleSidebar: handleToggleSidebar,
|
|
124
|
+
onSendData: handleSendData,
|
|
125
|
+
});
|
|
126
|
+
</script>
|
|
127
|
+
</body>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Props
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
export interface IAttributeAsset {
|
|
134
|
+
assetType: string;
|
|
135
|
+
blacklist: unknown[];
|
|
136
|
+
defaultValue: { assetId: string; type: string }[];
|
|
137
|
+
disabledValues: unknown[];
|
|
138
|
+
enabled: boolean;
|
|
139
|
+
global: {
|
|
140
|
+
defaultValue: { assetId: string; type: string };
|
|
141
|
+
id: string;
|
|
142
|
+
metadata: unknown[];
|
|
143
|
+
name: string;
|
|
144
|
+
type: string;
|
|
145
|
+
};
|
|
146
|
+
hiddenValues: unknown[];
|
|
147
|
+
id: string;
|
|
148
|
+
label: string;
|
|
149
|
+
metadata: {
|
|
150
|
+
[key: string]: string;
|
|
151
|
+
};
|
|
152
|
+
name: string;
|
|
153
|
+
type: string;
|
|
154
|
+
value: {
|
|
155
|
+
assetId: string;
|
|
156
|
+
configuration: unknown;
|
|
157
|
+
metadata: { [key: string]: string };
|
|
158
|
+
name: string;
|
|
159
|
+
tags: string[];
|
|
160
|
+
type: string;
|
|
161
|
+
};
|
|
162
|
+
values: IAttributeAssetValues[];
|
|
163
|
+
visible: boolean;
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### UI (attributes from outside )
|
|
168
|
+
|
|
169
|
+
| Prop | Type | Required | Description |
|
|
170
|
+
| --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
171
|
+
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
|
|
172
|
+
| uiDataType | 'UI' | Yes | Defines type data mode. Rendered data depends on this parameter |
|
|
173
|
+
| data | IAttributeAsset[] | Yes | Array of attributes data. Passed to the module to render swatch cards. |
|
|
174
|
+
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
|
|
175
|
+
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
|
|
176
|
+
|
|
177
|
+
### Fetch product
|
|
178
|
+
|
|
179
|
+
| Prop | Type | Required | Description |
|
|
180
|
+
| ----------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
|
|
181
|
+
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
|
|
182
|
+
| uiDataType | 'FETCH_DATA_PRODUCT' | Yes | Defines type data mode. Rendered data depends on this parameter |
|
|
183
|
+
| assetId | string | Yes | Defined an object for getting it`s attributes |
|
|
184
|
+
| configurationData | any[] | Yes | Takes data from the scene and sets it to the our module |
|
|
185
|
+
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
|
|
186
|
+
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
|
|
187
|
+
| onSelectMaterial | (item) => returns selected the selected material | No | Callback that returns selected material from the material list back to the parent Application. |
|
|
188
|
+
|
|
189
|
+
### Fetch all product
|
|
190
|
+
|
|
191
|
+
| Prop | Type | Required | Description |
|
|
192
|
+
| --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
193
|
+
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
|
|
194
|
+
| uiDataType | 'FETCH_DATA_ALL' | Yes | Defines type data mode. Rendered data depends on this parameter |
|
|
195
|
+
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
|
|
196
|
+
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
|
|
197
|
+
|
|
198
|
+
## Development
|
|
199
|
+
|
|
200
|
+
```bash
|
|
201
|
+
git clone https://github.com/Elementals-technical/hasting-swatchcart-module.git
|
|
202
|
+
cd hasting-swatchcart-module
|
|
203
|
+
npm install
|
|
204
|
+
npm run dev
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### General Information
|
|
208
|
+
|
|
209
|
+
This project gives a module which can be implemented in two ways `NPM`, `CDN`.
|
|
210
|
+
|
|
211
|
+
**_IMPORTANT_** before pushing code to the git repo, husky runs this scripts for checking `error/warnings`. If your scripts din't finish, check the console for more information
|
|
212
|
+
|
|
213
|
+
```bash
|
|
214
|
+
npm run build:all
|
|
215
|
+
npx lint-staged
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Stack
|
|
219
|
+
|
|
220
|
+
- react
|
|
221
|
+
- RTK
|
|
222
|
+
- css/tailwind
|
|
223
|
+
- vite
|
|
224
|
+
- husky
|
|
225
|
+
- lint
|
|
226
|
+
- FSD as architecture base
|
|
227
|
+
|
|
228
|
+
### Testing CDN Usage Locally
|
|
229
|
+
|
|
230
|
+
1. **Build**
|
|
231
|
+
If a `dist` folder `doesn't exist`, use this command for making it.
|
|
232
|
+
|
|
233
|
+
```bash
|
|
234
|
+
npm run build:all
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
If a `dist` folder `exist`, use this command for making it.
|
|
238
|
+
|
|
239
|
+
```bash
|
|
240
|
+
npm run build:cdn
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
2. **Test with local files** - Create an HTML file and use local paths:
|
|
244
|
+
|
|
245
|
+
```html
|
|
246
|
+
<link rel="stylesheet" href="../dist/cdn/main.css" />
|
|
247
|
+
<script type="module">
|
|
248
|
+
// Test locally
|
|
249
|
+
import { mountSwatchModule, EDataInputType } from '../dist/cdn/main.js';
|
|
250
|
+
|
|
251
|
+
const rootElement = document.getElementById('root');
|
|
252
|
+
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
253
|
+
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
254
|
+
|
|
255
|
+
const handleToggleSidebar = () => {
|
|
256
|
+
console.log('handleToggleSidebar is working');
|
|
257
|
+
};
|
|
258
|
+
|
|
259
|
+
const handleSendData = (selectedData) => {
|
|
260
|
+
console.log('handleSendData is working', selectedData);
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
// Chose one of these possible options
|
|
264
|
+
|
|
265
|
+
// UI (attributes from outside) - single product
|
|
266
|
+
mountSwatchModule(rootElement, {
|
|
267
|
+
isOpen: true,
|
|
268
|
+
uiDataType: EDataInputType.UI,
|
|
269
|
+
data: mockData, // or your data
|
|
270
|
+
onToggleSidebar: handleToggleSidebar,
|
|
271
|
+
onSendData: handleSendData,
|
|
272
|
+
});
|
|
273
|
+
|
|
274
|
+
// Fetch product data - single product
|
|
275
|
+
mountSwatchModule(rootElement, {
|
|
276
|
+
isOpen: true,
|
|
277
|
+
uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
|
|
278
|
+
assetId: 'assetId',
|
|
279
|
+
onToggleSidebar: handleToggleSidebar,
|
|
280
|
+
onSendData: handleSendData,
|
|
281
|
+
});
|
|
282
|
+
|
|
283
|
+
// Fetch product all data - multi product
|
|
284
|
+
mountSwatchModule(rootElement, {
|
|
285
|
+
isOpen: true,
|
|
286
|
+
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
287
|
+
onToggleSidebar: handleToggleSidebar,
|
|
288
|
+
onSendData: handleSendData,
|
|
289
|
+
});
|
|
290
|
+
</script>
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
3. **Test with CDN** - Use the published CDN version:
|
|
294
|
+
|
|
295
|
+
```html
|
|
296
|
+
<!-- Test real CDN -->
|
|
297
|
+
<link
|
|
298
|
+
rel="stylesheet"
|
|
299
|
+
href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
|
|
300
|
+
/>
|
|
301
|
+
|
|
302
|
+
<div id="root"></div>
|
|
303
|
+
<script type="module">
|
|
304
|
+
// Test real CDN
|
|
305
|
+
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
306
|
+
|
|
307
|
+
// local JSON data
|
|
308
|
+
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
309
|
+
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
310
|
+
|
|
311
|
+
const rootElement = document.getElementById('root'); <script type="module">
|
|
312
|
+
// Test locally
|
|
313
|
+
// import { mountSwatchModule } from '../dist/cdn/main.js';
|
|
314
|
+
|
|
315
|
+
// Test real CDN
|
|
316
|
+
import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
|
|
317
|
+
|
|
318
|
+
// local JSON data
|
|
319
|
+
const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
|
|
320
|
+
const mockData = await fetch(jsonUrl).then((r) => r.json());
|
|
321
|
+
|
|
322
|
+
const rootElement = document.getElementById('root');
|
|
323
|
+
|
|
324
|
+
const handleToggleSidebar = () => {
|
|
325
|
+
console.log('handleToggleSidebar');
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
const handleSendData = (selectedData) => {
|
|
329
|
+
console.log('handleSendData', selectedData);
|
|
330
|
+
};
|
|
331
|
+
|
|
332
|
+
// Chose one of these possible options
|
|
333
|
+
|
|
334
|
+
// UI (attributes from outside) - single product
|
|
335
|
+
mountSwatchModule(rootElement, {
|
|
336
|
+
isOpen: true,
|
|
337
|
+
uiDataType: EDataInputType.UI,
|
|
338
|
+
data: mockData, // or your data
|
|
339
|
+
onToggleSidebar: handleToggleSidebar,
|
|
340
|
+
onSendData: handleSendData,
|
|
341
|
+
});
|
|
342
|
+
|
|
343
|
+
// Fetch product data - single product
|
|
344
|
+
mountSwatchModule(rootElement, {
|
|
345
|
+
isOpen: true,
|
|
346
|
+
uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
|
|
347
|
+
assetId: 'assetId',
|
|
348
|
+
onToggleSidebar: handleToggleSidebar,
|
|
349
|
+
onSendData: handleSendData,
|
|
350
|
+
});
|
|
351
|
+
|
|
352
|
+
// Fetch product all data - multi product
|
|
353
|
+
mountSwatchModule(rootElement, {
|
|
354
|
+
isOpen: true,
|
|
355
|
+
uiDataType: EDataInputType.FETCH_DATA_ALL,
|
|
356
|
+
onToggleSidebar: handleToggleSidebar,
|
|
357
|
+
onSendData: handleSendData,
|
|
358
|
+
});
|
|
359
|
+
</script>
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
### Testing Module Usage Locally
|
|
363
|
+
|
|
364
|
+
1. **Build**
|
|
365
|
+
|
|
366
|
+
```bash
|
|
367
|
+
npm run build:lib
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
2. **Run Locally**
|
|
371
|
+
|
|
372
|
+
After finishing `build` in the `src/App.ts`, import builded file from the builded folder
|
|
373
|
+
|
|
374
|
+
```js
|
|
375
|
+
import { SwatchModule } from '../../dist/main'; // build module
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
3. **Use module**
|
|
379
|
+
|
|
380
|
+
### UI (attributes from outside )
|
|
381
|
+
|
|
382
|
+
```js
|
|
383
|
+
<SwatchModule
|
|
384
|
+
isOpen={isOpenModule}
|
|
385
|
+
uiDataType={'UI'}
|
|
386
|
+
data={data}
|
|
387
|
+
onToggleSidebar={handleOpenSidebar}
|
|
388
|
+
onSendData={handleSetData}
|
|
389
|
+
/>
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
### Fetch product
|
|
393
|
+
|
|
394
|
+
```js
|
|
395
|
+
<SwatchModule
|
|
396
|
+
isOpen={isOpenModule}
|
|
397
|
+
uiDataType={'FETCH_DATA_PRODUCT'}
|
|
398
|
+
assetId={'asset_id'}
|
|
399
|
+
onToggleSidebar={handleOpenSidebar}
|
|
400
|
+
onSendData={handleSetData}
|
|
401
|
+
/>
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
### Fetch product all
|
|
405
|
+
|
|
406
|
+
```js
|
|
407
|
+
<SwatchModule
|
|
408
|
+
isOpen={isOpenModule}
|
|
409
|
+
uiDataType={'FETCH_DATA_PRODUCT_All'}
|
|
410
|
+
onToggleSidebar={handleOpenSidebar}
|
|
411
|
+
onSendData={handleSetData}
|
|
412
|
+
/>
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
## Branching
|
|
416
|
+
|
|
417
|
+
We have one main branch `main`. This branch connected to DO and our web version of our module.
|
|
418
|
+
|
|
419
|
+
## Publishing
|
|
420
|
+
|
|
421
|
+
In our app we have two envs that we need to published
|
|
422
|
+
|
|
423
|
+
- web
|
|
424
|
+
- module
|
|
425
|
+
|
|
426
|
+
### Publishing web
|
|
427
|
+
|
|
428
|
+
```bach
|
|
429
|
+
npm run build
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
Then push your changes to the `develop` branch then push to the `main`
|
|
433
|
+
|
|
434
|
+
### Publishing module
|
|
435
|
+
|
|
436
|
+
Before Publishing you need to start
|
|
437
|
+
|
|
438
|
+
```bach
|
|
439
|
+
npm run build:all
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
Then
|
|
443
|
+
|
|
444
|
+
Update module version
|
|
445
|
+
|
|
446
|
+
`"version": "*.*.*"`
|
|
447
|
+
|
|
448
|
+
Then
|
|
449
|
+
|
|
450
|
+
```bach
|
|
451
|
+
npm publish
|
|
452
|
+
```
|
|
453
|
+
|
|
454
|
+
You can publish module changes from any branch you want
|
|
455
|
+
|
|
456
|
+
\*\* Don't forget to add your changes to the `main` branch
|