lib-enstall v0.0.0
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
- Using the CLI Tool (
enstall-lib-cli
) - Creating and Managing Components
- 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:
- Navigate to the CLI directory:
cd cli
- Install the CLI dependencies:
npm install
- Create a global link:
This will make``` npm link ```
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'ssrc/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
, orsim
to overwrite, orn
,no
, ornao
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:
- Navigate to the
example
directory:cd example
- Install dependencies:
npm install
- 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.
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
- Navigate to the
example
directory:cd example
- Install dependencies:
npm install
- Start the development server:
npm run dev
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.
12 months ago