npm package: @lgsm/modules
Description: 1. npm i 2. npm run storybook
Latest version: 1.6.17

# Installation
1. npm i
2. npm run storybook 

Project using **React component library**, with **Vite**, **TypeScript** and **Storybook**.

Link download : https://www.npmjs.com/package/@lgsm/modules

## Features

- ⚛️ **React** component library with **TypeScript**.

- 🏗️ **Vite** as development environment.

- 🌳 **Tree shaking**, for not distributing dead-code.

- 📚 **Storybook** for live viewing the components.

- 🎨 **PostCSS** for processing our CSS.

- 🖌️ **CSS Modules** in development, compiled CSS for production builds.

- 🧪 Testing with **Vitest** and **React Testing Library**.

- ✅ Code quality tools with **ESLint**, **Prettier** and **Stylelint**.

## 🤖 Scripts

|      Script       | Function                                                                           |
| :---------------: | ---------------------------------------------------------------------------------- |
|      `build`      | Build the `dist`, with types declarations, after checking types with TypeScript.   |
|      `lint`       | Lint the project with **Eslint**.                                                  |
|    `lint:fix`     | Lint and fix the project with **Eslint**.                                          |
|     `format`      | Check the project format with **Prettier**.                                        |
|   `format:fix`    | Format the project code with **Prettier**.                                         |
|    `stylelint`    | Lint the styles code with **Stylelint**.                                           |
|  `stylelint:fix`  | Lint and fix the styles code with **Stylelint**.                                   |
|    `storybook`    | Start a Storybook development server.                                              |
| `build-storybook` | Build the Storybook `dist`.                                                        |
|      `test`       | Run the tests with **Vitest** using `jsdom` and starts a **Vitest UI** dev server. |
|    `coverage`     | Generate a coverage report, with **v8**.                                           |

## How to setup API Service
1. Installation
```
npm i
```
2. Create your environment files (eg: '.env.dev' or '.env.prod') and define your base URL
```
VITE_BASE_URL=https://your-api-domain.com
```
3. Update your package.json to include appropriate Vite modes for each environment
```"scripts": {
    "dev": "vite --mode dev [your settings]",
    "prod": "vite --mode prod [your settings]"
}
```
4. In your main.tsx, (or wherever your app initializes), import and set up the base URL using setupBaseURL.
```
import { setupBaseURL } from "@lgsm/modules";

setupBaseURL(import.meta.env.VITE_BASE_URL);
```
5. The API client automatically handles certain error codes and displays notifications (popups). To enable this behavior, make sure the NotificationContainer component is rendered at the root level of your app, for example in App.tsx:
```  
  <ErrorBoundary fallback={}>
    <Suspense fallback={<ThreeDotsLoader />}>
      <NotificationContainer />
    </Suspense>
  </ErrorBoundary>
```

## Usage Example
Please refer to:
### For API Service
src > usage-example > example-apiService.tsx
### For Components
src > usage-example > example-components.tsx