hasting-swatchcart-module 1.0.22 → 1.0.24

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 (9) hide show
  1. package/README.md +454 -430
  2. package/dist/assets/index.css +1 -1
  3. package/dist/cdn/main.css +1 -1
  4. package/dist/cdn/main.js +7980 -7970
  5. package/dist/main.cjs +65 -65
  6. package/dist/main.cjs.map +1 -1
  7. package/dist/main.js +5281 -5271
  8. package/dist/main.js.map +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,430 +1,454 @@
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
+ ### 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
+ | onToggleSidebar | void | Yes | This method uses for open/close this module. |
185
+ | onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
186
+
187
+ ### Fetch all product
188
+
189
+ | Prop | Type | Required | Description |
190
+ | --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
191
+ | isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
192
+ | uiDataType | 'FETCH_DATA_ALL' | Yes | Defines type data mode. Rendered data depends on this parameter |
193
+ | onToggleSidebar | void | Yes | This method uses for open/close this module. |
194
+ | onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
195
+
196
+ ## Development
197
+
198
+ ```bash
199
+ git clone https://github.com/Elementals-technical/hasting-swatchcart-module.git
200
+ cd hasting-swatchcart-module
201
+ npm install
202
+ npm run dev
203
+ ```
204
+
205
+ ### General Information
206
+
207
+ This project gives a module which can be implemented in two ways `NPM`, `CDN`.
208
+
209
+ **_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
210
+
211
+ ```bash
212
+ npm run build:all
213
+ npx lint-staged
214
+ ```
215
+
216
+ ### Stack
217
+
218
+ - react
219
+ - RTK
220
+ - css/tailwind
221
+ - vite
222
+ - husky
223
+ - lint
224
+ - FSD as architecture base
225
+
226
+ ### Testing CDN Usage Locally
227
+
228
+ 1. **Build**
229
+ If a `dist` folder `doesn't exist`, use this command for making it.
230
+
231
+ ```bash
232
+ npm run build:all
233
+ ```
234
+
235
+ If a `dist` folder `exist`, use this command for making it.
236
+
237
+ ```bash
238
+ npm run build:cdn
239
+ ```
240
+
241
+ 2. **Test with local files** - Create an HTML file and use local paths:
242
+
243
+ ```html
244
+ <link rel="stylesheet" href="../dist/cdn/main.css" />
245
+ <script type="module">
246
+ // Test locally
247
+ import { mountSwatchModule, EDataInputType } from '../dist/cdn/main.js';
248
+
249
+ const rootElement = document.getElementById('root');
250
+ const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
251
+ const mockData = await fetch(jsonUrl).then((r) => r.json());
252
+
253
+ const handleToggleSidebar = () => {
254
+ console.log('handleToggleSidebar is working');
255
+ };
256
+
257
+ const handleSendData = (selectedData) => {
258
+ console.log('handleSendData is working', selectedData);
259
+ };
260
+
261
+ // Chose one of these possible options
262
+
263
+ // UI (attributes from outside) - single product
264
+ mountSwatchModule(rootElement, {
265
+ isOpen: true,
266
+ uiDataType: EDataInputType.UI,
267
+ data: mockData, // or your data
268
+ onToggleSidebar: handleToggleSidebar,
269
+ onSendData: handleSendData,
270
+ });
271
+
272
+ // Fetch product data - single product
273
+ mountSwatchModule(rootElement, {
274
+ isOpen: true,
275
+ uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
276
+ assetId: 'assetId',
277
+ onToggleSidebar: handleToggleSidebar,
278
+ onSendData: handleSendData,
279
+ });
280
+
281
+ // Fetch product all data - multi product
282
+ mountSwatchModule(rootElement, {
283
+ isOpen: true,
284
+ uiDataType: EDataInputType.FETCH_DATA_ALL,
285
+ onToggleSidebar: handleToggleSidebar,
286
+ onSendData: handleSendData,
287
+ });
288
+ </script>
289
+ ```
290
+
291
+ 3. **Test with CDN** - Use the published CDN version:
292
+
293
+ ```html
294
+ <!-- Test real CDN -->
295
+ <link
296
+ rel="stylesheet"
297
+ href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
298
+ />
299
+
300
+ <div id="root"></div>
301
+ <script type="module">
302
+ // Test real CDN
303
+ import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
304
+
305
+ // local JSON data
306
+ const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
307
+ const mockData = await fetch(jsonUrl).then((r) => r.json());
308
+
309
+ const rootElement = document.getElementById('root'); <script type="module">
310
+ // Test locally
311
+ // import { mountSwatchModule } from '../dist/cdn/main.js';
312
+
313
+ // Test real CDN
314
+ import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
315
+
316
+ // local JSON data
317
+ const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
318
+ const mockData = await fetch(jsonUrl).then((r) => r.json());
319
+
320
+ const rootElement = document.getElementById('root');
321
+
322
+ const handleToggleSidebar = () => {
323
+ console.log('handleToggleSidebar');
324
+ };
325
+
326
+ const handleSendData = (selectedData) => {
327
+ console.log('handleSendData', selectedData);
328
+ };
329
+
330
+ // Chose one of these possible options
331
+
332
+ // UI (attributes from outside) - single product
333
+ mountSwatchModule(rootElement, {
334
+ isOpen: true,
335
+ uiDataType: EDataInputType.UI,
336
+ data: mockData, // or your data
337
+ onToggleSidebar: handleToggleSidebar,
338
+ onSendData: handleSendData,
339
+ });
340
+
341
+ // Fetch product data - single product
342
+ mountSwatchModule(rootElement, {
343
+ isOpen: true,
344
+ uiDataType: EDataInputType.FETCH_DATA_PRODUCT,
345
+ assetId: 'assetId',
346
+ onToggleSidebar: handleToggleSidebar,
347
+ onSendData: handleSendData,
348
+ });
349
+
350
+ // Fetch product all data - multi product
351
+ mountSwatchModule(rootElement, {
352
+ isOpen: true,
353
+ uiDataType: EDataInputType.FETCH_DATA_ALL,
354
+ onToggleSidebar: handleToggleSidebar,
355
+ onSendData: handleSendData,
356
+ });
357
+ </script>
358
+ ```
359
+
360
+ ### Testing Module Usage Locally
361
+
362
+ 1. **Build**
363
+
364
+ ```bash
365
+ npm run build:lib
366
+ ```
367
+
368
+ 2. **Run Locally**
369
+
370
+ After finishing `build` in the `src/App.ts`, import builded file from the builded folder
371
+
372
+ ```js
373
+ import { SwatchModule } from '../../dist/main'; // build module
374
+ ```
375
+
376
+ 3. **Use module**
377
+
378
+ ### UI (attributes from outside )
379
+
380
+ ```js
381
+ <SwatchModule
382
+ isOpen={isOpenModule}
383
+ uiDataType={'UI'}
384
+ data={data}
385
+ onToggleSidebar={handleOpenSidebar}
386
+ onSendData={handleSetData}
387
+ />
388
+ ```
389
+
390
+ ### Fetch product
391
+
392
+ ```js
393
+ <SwatchModule
394
+ isOpen={isOpenModule}
395
+ uiDataType={'FETCH_DATA_PRODUCT'}
396
+ assetId={'asset_id'}
397
+ onToggleSidebar={handleOpenSidebar}
398
+ onSendData={handleSetData}
399
+ />
400
+ ```
401
+
402
+ ### Fetch product all
403
+
404
+ ```js
405
+ <SwatchModule
406
+ isOpen={isOpenModule}
407
+ uiDataType={'FETCH_DATA_PRODUCT_All'}
408
+ onToggleSidebar={handleOpenSidebar}
409
+ onSendData={handleSetData}
410
+ />
411
+ ```
412
+
413
+ ## Branching
414
+
415
+ We have one main branch `main`. This branch connected to DO and our web version of our module.
416
+
417
+ ## Publishing
418
+
419
+ In our app we have two envs that we need to published
420
+
421
+ - web
422
+ - module
423
+
424
+ ### Publishing web
425
+
426
+ ```bach
427
+ npm run build
428
+ ```
429
+
430
+ Then push your changes to the `develop` branch then push to the `main`
431
+
432
+ ### Publishing module
433
+
434
+ Before Publishing you need to start
435
+
436
+ ```bach
437
+ npm run build:all
438
+ ```
439
+
440
+ Then
441
+
442
+ Update module version
443
+
444
+ `"version": "*.*.*"`
445
+
446
+ Then
447
+
448
+ ```bach
449
+ npm publish
450
+ ```
451
+
452
+ You can publish module changes from any branch you want
453
+
454
+ \*\* Don't forget to add your changes to the `main` branch