Lib-Enstall

Lib-Enstall is a library project that includes a collection of reusable React components and a CLI tool (enstall-lib-cli) to help you manage and add components to your projects easily.

Table of Contents

• Getting Started
  • Cloning the Repository
  • Installing Dependencies
  • Running the Project
• Using the CLI Tool (enstall-lib-cli)
  • Setting Up the CLI
  • Adding Components to Your Project
• Creating and Managing Components
  • Component Structure
  • Adding Components to the Example Application
• Example Application
• Additional Resources
• License

Getting Started

Cloning the Repository

To get started with the project, clone the repository from GitHub:

git clone https://github.com/cluster-data-experience/lib-enstall.git

Installing Dependencies

cd lib-enstall
npm install

Running the Project

After installing the dependencies, you can run the project:

npm run dev 

This will start the development server. Open your browser and navigate to http://localhost:5173.

Using the CLI Tool (enstall-lib-cli)

Setting Up the CLI

To use the CLI tool globally, you need to create an npm link:

1. Navigate to the CLI directory:

   cd cli

2. Install the CLI dependencies:

   npm install

3. Create a global link:

   npm link

This will make enstall-lib-cli available globally on your system.

For detailed information about the CLI, refer to the CLI README.

Adding Components to Your Project

With the CLI, you can add entire component directories to your project:

enstall-lib-cli add <component-directory-path>

• Replace <component-directory-path> with the path to the component directory you want to add.

• For example:

enstall-lib-cli add Buttons/Button1

• This command will copy the entire Button1 directory, including all its files and subdirectories, into your project's src/lib/Buttons/Button1 directory.

• Overwrite Prompt:

  • If the destination directory already exists, the CLI will prompt you:

  Destination component path "your_project_path/src/lib/Buttons/Button1" already exists. Do you want to overwrite it? (y/n):

• Respond with y, yes, s, or sim to overwrite, or n, no, or nao to cancel the operation.

Creating and Managing Components

Component Structure

• Components are organized within the src/components directory.

• Each component should reside in its own directory and include all related files (e.g., styles, subcomponents).

• Example structure:

src/
└── components/
    ├── Buttons/
    │   └── Button1/
    │       ├── Button1.tsx
    │       ├── Button1.module.css
    │       └── index.ts
    └── Cards/
        └── Card1/
            ├── Card1.tsx
            ├── Card1.module.css
            └── index.ts

Adding Components to the Example Application

To add components to the example application:

1. Navigate to the example directory:

   cd example

2. Install dependencies:

   npm install

3. Use the CLI to add components:

   enstall-lib-cli add <component-directory-path>

• For example:

  enstall-lib-cli add Buttons/Button1

  • This will copy the Button1 component into the src/lib/Buttons/Button1 directory of the example application.

4. Import and use the component in your application pages as needed.

Example Application

The project includes an example application located in the example directory, which demonstrates how to use the components and the CLI tool.

Running the Example Application

1. Navigate to the example directory:

   cd example

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173 to view the example application.

Additional Resources

• CLI Documentation: For detailed instructions on using the CLI, refer to the CLI README.
• Component Documentation: Refer to the comments within the code and component documentation for more information on how to use and customize the components.
• Creating Components: When creating new components, follow the established structure and conventions to ensure consistency and compatibility with the CLI tool.

License

This project is licensed under the MIT License.

Note: This README provides a concise overview of how to run the project, set up the CLI, create components, and add them to the example application. For more detailed explanations and advanced usage, please refer to the documentation within each directory.