hasting-swatchcart-module 1.0.10 → 1.0.12

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