Fix: Merged local branch with dev branch

README.md

@@ -9,6 +9,17 @@
 	A dedicated command-line interface tool crafted to augment the development experience with Material-UI, a popular React UI framework.
 </p>
 
+# Table of Contents
+- [Introduction](#material-ui-cli-streamlining-your-development-workflow)
+- [Features](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-comprehensive-feature-set)
+- [Installation](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-installation)
+- [Usage](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-usage)
+	- [Create new project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#1--create-new-project)
+	- [Generate theme file to an existing project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#2-%EF%B8%8F-generate-theme-file-to-an-existing-project)
+	- [Validate theme file in existing project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#3--validate-theme-file-in-existing-project)
+	- [Component Scaffolding](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#3--validate-theme-file-in-existing-project)
+- [Supported MUI components](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-popular-mui-components)
+
 # Material-UI CLI: Streamlining Your Development Workflow
 
 The Material-UI CLI is a powerful command-line interface tool designed to significantly streamline and enhance the development process with Material-UI, a renowned React UI framework. This CLI tool simplifies the initialization of new projects, the generation and validation of theme files, and the scaffolding of popular Material-UI components, thereby allowing developers to focus on creating exceptional user interfaces without getting bogged down by the setup and configuration process.
@@ -124,7 +135,7 @@ Upon inspecting your theme file, any potential errors will be displayed in your
 > });
 > ```
 
-### 🧩 Popular MUI components
+### 🧩 Supported MUI components
 
 Below is a list of supported components, categorized for ease of understanding and integration.
 
@@ -148,3 +159,4 @@ Below is a list of supported components, categorized for ease of understanding a
 | [MUI Switch](https://mui.com)      | Material UI default switch component.                                    | Switch         |
 
 Components are organized under the `src/Components` directory, with each having its designated folder for easy management and accessibility.
+

commands/installComponent.js

@@ -0,0 +1,56 @@
+const inquirer = require('inquirer');
+const path = require('path');
+const fs = require('fs');
+const { logger } = require('../utils/logger');
+const ComponentGenerator = require('../utils/getComponentTemplate');
+
+async function installComponent() {
+    try {
+        const categories = fs.readdirSync(path.join(__dirname, '..', 'templates')).filter(file => fs.statSync(path.join(__dirname, '..', 'templates', file)).isDirectory());
+
+        const { category } = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'category',
+                message: 'Select the category for the component:',
+                choices: categories,
+            }
+        ]);
+
+        const components = fs.readdirSync(path.join(__dirname, '..', 'templates', category)).map(file => file.replace('.ejs', ''));
+
+        const answers = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'component',
+                message: 'Select the component to install:',
+                choices: components,
+            },
+            {
+                type: 'input',
+                name: 'path',
+                message: 'Enter the path where you want to scaffold the component:',
+                default: `./src/components/${category}`,
+                validate: input => {
+                    if (path.isAbsolute(input) || input.includes("..")) {
+                        return 'Please enter a valid relative path from the project root.';
+                    }
+                    return true;
+                }
+            }
+        ]);
+
+        const targetPath = path.resolve(process.cwd(), answers.path, answers.component);
+        if (!fs.existsSync(targetPath)) {
+            fs.mkdirSync(targetPath, { recursive: true });
+            new ComponentGenerator([{ name: answers.component, category }], targetPath).generateComponent();
+            logger.success(`Component ${answers.component} has been scaffolded to ${targetPath}`);
+        } else {
+            logger.error(`Component ${answers.component} already exists at ${targetPath}`);
+        }
+    } catch (error) {
+        logger.error('An error occurred while scaffolding the component: ', error);
+    }
+}
+
+module.exports = installComponent;

index.js

@@ -12,6 +12,7 @@ const validateMUI = require('./utils/validateMaterial');
 const validateTheme = require('./commands/validateTheme');
 const projectInit = require('./commands/projectInit');
 const monorepoInit = require('./commands/monorepoInit');
+const installComponent = require('./commands/installComponent');
 
 Spinner = CLI.Spinner;
 
@@ -44,6 +45,12 @@ program
     .option('--ignore-warn [string], ignore warning in theme')
     .action(options => validateMUI(() => validateTheme(options)));
 
+// install single component to existing project.
+program.command('install component')
+    .description('Install a Material-UI component')
+    .action(() => validateMUI(() => installComponent()));
+
+// initialize new project.
 program.command('project-init')
     .option('-a, --all, Install all components')
     .description("Create a new react project")
@@ -107,6 +114,4 @@ program.command('project-init')
         }
     });
 
-program.command("package").action(() => console.log(getPackageManager()));
-
 program.parse(process.argv);