@procurifieddxb/react-components

Introduction

This library contains React components for Procurified projects. Figma Designs

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 [email protected]: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:

   cd /path/to/react-components
   npm link

2. In boq-ui, link to react-components:

   cd /path/to/boq-ui
   npm link @procurifieddxb/react-components

3. Verify the symlink was created:

   ls -la node_modules/@procurifieddxb/react-components
   # Should show: react-components -> ../../../react-components

Development Workflow

1. Start boq-ui dev server:

   cd /path/to/boq-ui
   npm run dev

2. Make changes in react-components, then build:

   cd /path/to/react-components
   npm run build

   Or use watch mode for auto-rebuild:

   npm run dev:watch

3. Refresh browser to see changes in boq-ui

Troubleshooting

• Changes not reflecting? Clear Vite cache:

  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:

  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:

   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

   npm run update-components

   This builds, publishes to yalc, and clears boq-ui's vite cache.

4. Restart boq-ui to see the changes