hasting-swatchcart-module 0.0.29 → 1.0.0

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 (6) hide show
  1. package/README.md +222 -23
  2. package/dist/assets/index.css +1 -1
  3. package/dist/cdn/main.css +1 -1
  4. package/dist/main.cjs.map +1 -1
  5. package/dist/main.js.map +1 -1
  6. package/package.json +101 -101
package/README.md CHANGED
@@ -1,38 +1,237 @@
1
1
  # hasting-swatchcart-module
2
2
 
3
- For running this module you need to provide the next props
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
+ ### Download JSON mock data
15
+
16
+ ➡️ [Click here to download `demo-data.json`](src/mockAttribute.json)
17
+
18
+ ### NPM usage
19
+
20
+ ```js
21
+ import { SwatchModule } from 'hasting-swatchcart-module';
22
+
23
+ <SwatchModule
24
+ isOpen={isOpenModule}
25
+ uiDataType={mockDataMode}
26
+ data={MOCK_ROW_PROPS_ATTRIBUTES}
27
+ onToggleSidebar={handleOpenSidebar}
28
+ onSendData={handleSetData}
29
+ />;
30
+ ```
31
+
32
+ ### CDN (no installation required) usage and installation
33
+
34
+ ```html
35
+ <link
36
+ rel="stylesheet"
37
+ href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
38
+ />
39
+ <body>
40
+ <div id="root"></div>
41
+ <script type="module">
42
+ import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
43
+
44
+ const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
45
+ const mockData = await fetch(jsonUrl).then((r) => r.json());
46
+
47
+ const rootElement = document.getElementById('root');
48
+
49
+ mountSwatchModule(rootElement, {
50
+ isOpen: true,
51
+ uiDataType: 'UI',
52
+ data: mockData,
53
+ onToggleSidebar: () => console.log('handleOpenSidebar'),
54
+ onSendData: (payload) => console.log('handleSetData', payload),
55
+ });
56
+ </script>
57
+ </body>
58
+ ```
59
+
60
+ ## Props
61
+
62
+ ```ts
63
+ export interface IAttributeAsset {
64
+ assetType: string;
65
+ blacklist: unknown[];
66
+ defaultValue: { assetId: string; type: string }[];
67
+ disabledValues: unknown[];
68
+ enabled: boolean;
69
+ global: {
70
+ defaultValue: { assetId: string; type: string };
71
+ id: string;
72
+ metadata: unknown[];
73
+ name: string;
74
+ type: string;
75
+ };
76
+ hiddenValues: unknown[];
77
+ id: string;
78
+ label: string;
79
+ metadata: {
80
+ [key: string]: string;
81
+ };
82
+ name: string;
83
+ type: string;
84
+ value: {
85
+ assetId: string;
86
+ configuration: unknown;
87
+ metadata: { [key: string]: string };
88
+ name: string;
89
+ tags: string[];
90
+ type: string;
91
+ };
92
+ values: IAttributeAssetValues[];
93
+ visible: boolean;
94
+ }
95
+ ```
96
+
97
+ | Prop | Type | Required | Description |
98
+ | --------------- | ------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
99
+ | isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
100
+ | uiDataType | 'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT' | Yes | Defines type data mode. Rendered data depends on this parameter |
101
+ | data | IAttributeAsset[] | Yes | Array of attributes data. Passed to the module to render swatch cards. |
102
+ | onToggleSidebar | void | Yes | This method uses for open/close this module. |
103
+ | onSendData | () => selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
104
+
105
+ ## Development
106
+
107
+ ```bash
108
+ git clone https://github.com/Elementals-technical/hasting-swatchcart-module.git
109
+ cd hasting-swatchcart-module
110
+ npm install
111
+ npm run dev
112
+ ```
113
+
114
+ ### General Information
115
+
116
+ This project gives a module which can be implemented in two ways `NPM`, `CDN`.
117
+
118
+ **_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
119
+
120
+ ```bash
121
+ npm run build:all
122
+ npx lint-staged
123
+ ```
124
+
125
+ ### Stack
126
+
127
+ - react
128
+ - RTK
129
+ - css/tailwind
130
+ - vite
131
+ - husky
132
+ - lint
133
+ - FSD as architecture base
134
+
135
+ ### Testing CDN Usage Locally
136
+
137
+ 1. **Build**
138
+ If a `dist` folder `doesn't exist`, use this command for making it.
139
+
140
+ ```bash
141
+ npm run build:all
142
+ ```
143
+
144
+ If a `dist` folder `exist`, use this command for making it.
145
+
146
+ ```bash
147
+ npm run build:cdn
148
+ ```
149
+
150
+ 2. **Test with local files** - Create an HTML file and use local paths:
151
+
152
+ ```html
153
+ <link rel="stylesheet" href="../dist/cdn/main.css" />
154
+ <script type="module">
155
+ import { mountSwatchModule } from '../dist/cdn/main.js';
156
+
157
+ const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
158
+ const mockData = await fetch(jsonUrl).then((r) => r.json());
159
+
160
+ const rootElement = document.getElementById('root');
161
+
162
+ mountSwatchModule(rootElement, {
163
+ isOpen: true,
164
+ uiDataType: 'UI',
165
+ data: mockData,
166
+ onToggleSidebar: () => console.log('handleOpenSidebar'),
167
+ onSendData: (payload) => console.log('handleSetData', payload),
168
+ });
169
+ </script>
170
+ ```
171
+
172
+ 3. **Test with CDN** - Use the published CDN version:
173
+
174
+ ```html
175
+ <link
176
+ rel="stylesheet"
177
+ href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
178
+ />
179
+ <script type="module">
180
+ import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
181
+
182
+ const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
183
+ const mockData = await fetch(jsonUrl).then((r) => r.json());
184
+
185
+ const rootElement = document.getElementById('root');
186
+
187
+ mountSwatchModule(rootElement, {
188
+ isOpen: true,
189
+ uiDataType: 'UI',
190
+ data: mockData,
191
+ onToggleSidebar: () => console.log('handleOpenSidebar'),
192
+ onSendData: (payload) => console.log('handleSetData', payload),
193
+ });
194
+ </script>
195
+ ```
4
196
 
5
- ## isOpen
197
+ ### Testing Module Usage Locally
6
198
 
7
- Type - boolean
8
- Required - true
199
+ 1. **Build**
9
200
 
10
- Controls visibility of the module (module state). true → module is visible.
201
+ ```bash
202
+ npm run build:lib
203
+ ```
11
204
 
12
- ## uiDataType
205
+ 2. **Run Locally**
13
206
 
14
- Type - 'UI' | 'DATA_INPUT' | 'DATA_ALL_PRODUCT',
15
- Required - true
207
+ After finishing `build` in the `src/App.ts`, import builded file from the builded folder
16
208
 
17
- Defines type data mode. Rendered data depends on this parameter
209
+ ```js
210
+ import { SwatchModule } from '../../dist/main'; // build module
211
+ ```
18
212
 
19
- ## data
213
+ 3. **Use module**
20
214
 
21
- Type - any[] (recommended: AttributeValue[])
22
- Required - true
215
+ ```js
216
+ <SwatchModule
217
+ isOpen={isOpenModule}
218
+ uiDataType={mockDataMode}
219
+ data={MOCK_ROW_PROPS_ATTRIBUTES as any[]}
220
+ onToggleSidebar={handleOpenSidebar}
221
+ onSendData={handleSetData}
222
+ />
223
+ ```
23
224
 
24
- Array of material/swatches data. Passed to the module to render swatch cards.
225
+ ## Publishing module
25
226
 
26
- ## onToggleSidebar
227
+ Before Publishing you need to start
27
228
 
28
- Type - () => void
29
- Required - true
229
+ ```bach
230
+ npm run build:all
231
+ ```
30
232
 
31
- This method uses for open/close this module.
233
+ Then
32
234
 
33
- ## onSendData
34
-
35
- Type - (selected: any[]) => void
36
- Required - true
37
-
38
- Callback that returns selected materials from the cart back to the parent application.
235
+ ```bach
236
+ npm publish
237
+ ```