# hasting-swatchcart-module
This module was created for implementation into clients applications
There are two ways of using this module: `NPM` or `CDN`
## Installation
### NPM
```bash
npm i hasting-swatchcart-module
```
### NPM usage
### UI (attributes from outside )
### For example
```js
const handleOpenSidebar = () => {
// open/close a module
};
```
```js
const handleSetData = (data) => {
// Callback that returns selected materials from the cart back to the parent Application.
};
```
```js
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
;
```
### Fetch product
```js
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
;
```
### Fetch product all
```js
import { SwatchModule, EDataInputType } from 'hasting-swatchcart-module';
;
```
### CDN (no installation required) usage and installation
```html
```
## Props
```ts
export interface IAttributeAsset {
assetType: string;
blacklist: unknown[];
defaultValue: { assetId: string; type: string }[];
disabledValues: unknown[];
enabled: boolean;
global: {
defaultValue: { assetId: string; type: string };
id: string;
metadata: unknown[];
name: string;
type: string;
};
hiddenValues: unknown[];
id: string;
label: string;
metadata: {
[key: string]: string;
};
name: string;
type: string;
value: {
assetId: string;
configuration: unknown;
metadata: { [key: string]: string };
name: string;
tags: string[];
type: string;
};
values: IAttributeAssetValues[];
visible: boolean;
}
```
### UI (attributes from outside )
| Prop | Type | Required | Description |
| --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
| uiDataType | 'UI' | Yes | Defines type data mode. Rendered data depends on this parameter |
| data | IAttributeAsset[] | Yes | Array of attributes data. Passed to the module to render swatch cards. |
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
### Fetch product
| Prop | Type | Required | Description |
| ----------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
| uiDataType | 'FETCH_DATA_PRODUCT' | Yes | Defines type data mode. Rendered data depends on this parameter |
| assetId | string | Yes | Defined an object for getting it`s attributes |
| configurationData | any[] | Yes | Takes data from the scene and sets it to the our module |
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
| onSelectMaterial | (item) => returns selected the selected material | No | Callback that returns selected material from the material list back to the parent Application. |
### Fetch all product
| Prop | Type | Required | Description |
| --------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
| isOpen | boolean | Yes | Controls visibility of the module (module state). true → module is visible. |
| uiDataType | 'FETCH_DATA_ALL' | Yes | Defines type data mode. Rendered data depends on this parameter |
| onToggleSidebar | void | Yes | This method uses for open/close this module. |
| onSendData | (data) => data is selected materials array from a cart | Yes | Callback that returns selected materials from the cart back to the parent Application. |
## Development
```bash
git clone https://github.com/Elementals-technical/hasting-swatchcart-module.git
cd hasting-swatchcart-module
npm install
npm run dev
```
### General Information
This project gives a module which can be implemented in two ways `NPM`, `CDN`.
**_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
```bash
npm run build:all
npx lint-staged
```
### Stack
- react
- RTK
- css/tailwind
- vite
- husky
- lint
- FSD as architecture base
### Testing CDN Usage Locally
1. **Build**
If a `dist` folder `doesn't exist`, use this command for making it.
```bash
npm run build:all
```
If a `dist` folder `exist`, use this command for making it.
```bash
npm run build:cdn
```
2. **Test with local files** - Create an HTML file and use local paths:
```html
```
3. **Test with CDN** - Use the published CDN version:
```html
```
### Testing Module Usage Locally
1. **Build**
```bash
npm run build:lib
```
2. **Run Locally**
After finishing `build` in the `src/App.ts`, import builded file from the builded folder
```js
import { SwatchModule } from '../../dist/main'; // build module
```
3. **Use module**
### UI (attributes from outside )
```js
```
### Fetch product
```js
```
### Fetch product all
```js
```
## Branching
We have one main branch `main`. This branch connected to DO and our web version of our module.
## Publishing
In our app we have two envs that we need to published
- web
- module
### Publishing web
```bach
npm run build
```
Then push your changes to the `develop` branch then push to the `main`
### Publishing module
Before Publishing you need to start
```bach
npm run build:all
```
Then
Update module version
`"version": "*.*.*"`
Then
```bach
npm publish
```
You can publish module changes from any branch you want
\*\* Don't forget to add your changes to the `main` branch