
# Learngual Components

This is the Components repository of the Learngual suite. It houses all the shared UI components that are used across various applications within the Learngual platform. All other applications depend on these components, ensuring a consistent look and feel as well as code reusability.

## Technologies and Libraries
This project is built using a range of modern technologies and libraries, including:

- **React:** A JavaScript library for building user interfaces.
- **Vite:** A modern frontend build tool.
- **Styled Components:** For component-level styling in React.

These are some of the key technologies that provide the foundation for our web application. For a full list of all the packages used, please refer to the `package.json` file in the project repository.

## Installation

### Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (Preferably the latest stable version)
- npm (Node Package Manager), which comes with Node.js
- Yarn (Optional, can be installed via npm with `npm install --global yarn`)

You can check your Node.js, npm, and Yarn version by running:
 ```
    node -v
    npm -v
    yarn -v
```

### Step-by-Step Installation

1. **Clone the Repository**
   - Clone the application repository to your local machine using the following Git command:
     ```
     git clone https://github.com/Learngual-Inc/components.git
     ```
   - After cloning, navigate into the project directory:
     ```
     cd components
     ```

2. **Install Dependencies**
   - Using npm:
     ```
     npm install
     ```
   - Or, using Yarn:
     ```
     yarn install
     ```

   These commands read the `package.json` file and install all the dependencies listed under `dependencies` and `devDependencies`.

3. **Running the Application**
   - Using npm:
     ```
     npm run dev
     ```
   - Or, using Yarn:
     ```
     yarn dev
     ```

   Access the application by navigating to `http://localhost:5173` in your web browser.

### Notes
- The `scripts` section in `package.json` provides additional commands:
  - Using npm: `npm run build` to build the application for production and `npm run preview` to preview the built application.
  - Using Yarn: `yarn build` to build the application for production and `yarn preview` to preview the built application.

- If you encounter any issues during installation, ensure your Node.js, npm, and Yarn are updated to the latest versions and try re-running the installation commands.

## Consuming `l-min-components` in other applications

This repository is published as an npm package called `l-min-components`. Other Learngual frontends install it using npm *dist-tags* that map to each environment.

### Environment overview

- **Dev**
  - Branch: `main`
  - npm tag: `dev`
  - Version pattern: `1.8.x`
- **Staging**
  - Branch: `staging`
  - npm tag: `staging`
  - Version pattern: `1.8.x`
- **Production**
  - Branch: `production`
  - npm tag: `latest`
  - Version pattern: `1.9.x`

### Installing in a downstream project

From your target application directory:

- **Dev environment**
  - Using npm:
    ```bash
    npm install l-min-components@dev --save
    ```
  - Using Yarn:
    ```bash
    yarn add l-min-components@dev
    ```

- **Staging environment**
  - Using npm:
    ```bash
    npm install l-min-components@staging --save
    ```
  - Using Yarn:
    ```bash
    yarn add l-min-components@staging
    ```

- **Production environment**
  - Using npm:
    ```bash
    npm install l-min-components --save
    ```
  - Using Yarn:
    ```bash
    yarn add l-min-components
    ```

To pin a specific release instead of a moving tag, install by explicit version, for example:

```bash
npm install l-min-components@1.9.42 --save
```

### Using the components in your app

All components, hooks, and utilities are re-exported from a single entry point.

**Common imports**

```jsx
import {
  ButtonComponent,
  InputComponent,
  Radio,
  DropDownComponent,
  ImageComponent,
} from "l-min-components/src/components";
```

You can then use them as regular React components:

```jsx
<ButtonComponent
  text="Save"
  onClick={handleSave}
/>
```

## Features
The Components repository includes a variety of reusable UI components, such as:

- **Button:** Customizable buttons for various user interactions.
- **Dropdown:** Flexible dropdown menus for user selections.
- **Search Bar:** Intuitive search functionality for efficient data retrieval.
- **Loader:** Visual indicators for loading states and asynchronous operations.
- **And many more:** The repository contains a diverse range of other components, each designed with flexibility and reusability in mind, to cater to the diverse needs of the Learngual applications.

## Contributing
To contribute, please follow these guidelines:

1. **Create a New Branch for Each Feature:**
   - For each new feature or fix you're working on, create a separate branch from the main branch. Name the branch something descriptive related to the feature or fix.

2. **Add Changes and Commit:**
- Make your changes in your feature branch. Once you're done, add your changes and make a commit with a descriptive message.

3. **Pull the Latest Changes from Main:**
- Before pushing your changes, pull the latest changes from the main branch to ensure compatibility.

4. **Push Your Changes:**
- Push your changes to the remote repository.

5. **Create a Pull Request:**
- Go to the GitHub repository page and create a pull request (PR) for your branch. Describe your changes and proposed modifications.

6. **Request a Review:**
- Invite the team lead or other designated reviewers to review your PR.

7. **Merging:**
- Only the team lead or authorized team members should merge the PR after a successful review.

Please adhere to the coding standards and guidelines of the project. If you're unsure about something, feel free to ask!

## License
This project is proprietary. All rights reserved. Unauthorized copying, modification, distribution, or use of this software is strictly prohibited unless otherwise permitted by the project owners.


