npm - hasting-swatchcart-module - Versions diffs - 0.0.41 → 1.0.0 - Mend

hasting-swatchcart-module 0.0.41 → 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 (444) hide show

package/README.md CHANGED Viewed

@@ -1,73 +1,237 @@
-# React + TypeScript + Vite
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-Currently, two official plugins are available:
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-## React Compiler
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-## Expanding the ESLint configuration
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x';
-import reactDom from 'eslint-plugin-react-dom';
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
+# 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
+```
+### Download JSON mock data
+➡️ [Click here to download `demo-data.json`](src/mockAttribute.json)
+### NPM usage
+```js
+import { SwatchModule } from 'hasting-swatchcart-module';
+<SwatchModule
+  isOpen={isOpenModule}
+  uiDataType={mockDataMode}
+  data={MOCK_ROW_PROPS_ATTRIBUTES}
+  onToggleSidebar={handleOpenSidebar}
+  onSendData={handleSetData}
+/>;
+```
+### CDN (no installation required) usage and installation
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
+/>
+<body>
+  <div id="root"></div>
+  <script type="module">
+    import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
+    const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
+    const mockData = await fetch(jsonUrl).then((r) => r.json());
+    const rootElement = document.getElementById('root');
+    mountSwatchModule(rootElement, {
+      isOpen: true,
+      uiDataType: 'UI',
+      data: mockData,
+      onToggleSidebar: () => console.log('handleOpenSidebar'),
+      onSendData: (payload) => console.log('handleSetData', payload),
+    });
+  </script>
+</body>
+```
+## 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;
+}
+```
+| Prop            | Type                                       | Required | Description                                                                            |
+| --------------- | ------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
+| isOpen          | boolean                                    | Yes      | Controls visibility of the module (module state). true → module is visible.            |
+| uiDataType      | 'UI' or 'DATA_INPUT' or 'DATA_ALL_PRODUCT' | 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      | () => 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
+<link rel="stylesheet" href="../dist/cdn/main.css" />
+<script type="module">
+  import { mountSwatchModule } from '../dist/cdn/main.js';
+  const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
+  const mockData = await fetch(jsonUrl).then((r) => r.json());
+  const rootElement = document.getElementById('root');
+  mountSwatchModule(rootElement, {
+    isOpen: true,
+    uiDataType: 'UI',
+    data: mockData,
+    onToggleSidebar: () => console.log('handleOpenSidebar'),
+    onSendData: (payload) => console.log('handleSetData', payload),
+  });
+</script>
+```
+3. **Test with CDN** - Use the published CDN version:
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.css"
+/>
+<script type="module">
+  import { mountSwatchModule } from 'https://unpkg.com/hasting-swatchcart-module/dist/cdn/main.js';
+  const jsonUrl = new URL('./mockAttribute.json', import.meta.url);
+  const mockData = await fetch(jsonUrl).then((r) => r.json());
+  const rootElement = document.getElementById('root');
+  mountSwatchModule(rootElement, {
+    isOpen: true,
+    uiDataType: 'UI',
+    data: mockData,
+    onToggleSidebar: () => console.log('handleOpenSidebar'),
+    onSendData: (payload) => console.log('handleSetData', payload),
+  });
+</script>
+```
+### 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**
+```js
+  <SwatchModule
+    isOpen={isOpenModule}
+    uiDataType={mockDataMode}
+    data={MOCK_ROW_PROPS_ATTRIBUTES as any[]}
+    onToggleSidebar={handleOpenSidebar}
+    onSendData={handleSetData}
+  />
+```
+## Publishing module
+Before Publishing you need to start
+```bach
+npm run build:all
+```
+Then
+```bach
+npm publish
+```