npm package: @procurifieddxb/react-components
Description: ## Introduction
Latest version: 0.21.13

# @procurifieddxb/react-components

## Introduction

This library contains React components for Procurified projects.
[Figma Designs](https://www.figma.com/design/K6sfGVem17enKMTa2EwQmn/DSP---UI-kit)

## Technologies Used

- React: A JavaScript library for building user interfaces.
- Vitest: A blazing fast unit test framework powered by Vite.
- React Testing Library: Simple and complete React DOM testing utilities that encourage good testing practices.
- Storybook: An open source tool for developing UI components in isolation. It makes building stunning UIs organized and efficient.
- SCSS Modules: For styling components in a modular and maintainable way.

## Getting Started

1.  **Installation:**

    ```
    npm install
    ```

2.  **Running Storybook (for local development and documentation):**

    ```
    npm run dev
    ```

    This will start Storybook, where you can view and interact with the components in isolation.

3.  **Running Tests:**

    ```
    npm run test
    ```

    This will run the component tests using Vitest and React Testing Library.

4.  **Running Lint:**

    ```
    npm run lint
    ```

## Working with the Project

1.  **Clone the repository:**

    ```
    git clone git@github.com:Procurified-Core/react-components.git
    cd react-components
    ```

2.  **Install dependencies:**

    ```
    npm install
    ```

3.  **Start developing:**

    - Use Storybook to develop and test components in isolation (`npm run dev`).
    - Write unit tests for your components using Vitest and React Testing Library.

4.  **Build the library:**

    ```
    npm run build
    ```

    This will create a `dist` directory with the compiled components.

## Local Development with boq-ui (npm link)

Use this workflow when developing react-components and testing changes in boq-ui simultaneously.

### Initial Setup (one-time)

1. **In react-components**, create a global link:
   ```bash
   cd /path/to/react-components
   npm link
   ```

2. **In boq-ui**, link to react-components:
   ```bash
   cd /path/to/boq-ui
   npm link @procurifieddxb/react-components
   ```

3. **Verify** the symlink was created:
   ```bash
   ls -la node_modules/@procurifieddxb/react-components
   # Should show: react-components -> ../../../react-components
   ```

### Development Workflow

1. **Start boq-ui dev server:**
   ```bash
   cd /path/to/boq-ui
   npm run dev
   ```

2. **Make changes in react-components**, then build:
   ```bash
   cd /path/to/react-components
   npm run build
   ```

   Or use watch mode for auto-rebuild:
   ```bash
   npm run dev:watch
   ```

3. **Refresh browser** to see changes in boq-ui

### Troubleshooting

- **Changes not reflecting?** Clear Vite cache:
  ```bash
  rm -rf /path/to/boq-ui/node_modules/.vite
  ```
  Then restart the boq-ui dev server.

- **Link lost after npm install?** Re-run step 2 of Initial Setup:
  ```bash
  cd /path/to/boq-ui
  npm link @procurifieddxb/react-components
  ```

- **Vite pre-bundling issues?** The `optimizeDeps.exclude` config in boq-ui's `vite.config.mts` should already exclude react-components from pre-bundling.

### When Done Developing

1. **Commit and push** changes in react-components
2. **Run CI** - tests and lint will run automatically on push
3. **Publish** - trigger "Publish to NPM" workflow in GitHub Actions
4. **Update boq-ui** - change dependency back to version number:
   ```bash
   npm install @procurifieddxb/react-components@<new-version>
   ```

## Alternative: Yalc (if npm link doesn't work)

1. **Setup Yalc**
   - Install Yalc (`npm i yalc -g`)

2. **Set the path in boq-ui**
   - In boq-ui's package.json, change:
     ```
     "@procurifieddxb/react-components": "0.20.44"
     ```
     to:
     ```
     "@procurifieddxb/react-components": "file:.yalc/@procurifieddxb/react-components"
     ```

3. **Run this command after making changes in react-components**
   ```bash
   npm run update-components
   ```
   This builds, publishes to yalc, and clears boq-ui's vite cache.

4. **Restart boq-ui** to see the changes