npui installer - v2.0.0

cli/README.md

@@ -0,0 +1,76 @@
+# 🧩 npui cli
+
+**npui** is a CLI tool for easily adding React components from the **npui** component library to your project. It allows developers to download and install specific components from the `npui` GitHub repository directly into their app's local directory.
+
+## Features
+
+- Easily download and add individual components from the **npui** component library.
+- Creates a local `npui` folder in your project to organize components.
+- Simple command-line interface with intuitive usage.
+
+## Installation
+
+To use **npui**, you need to have [Node.js](https://nodejs.org/) installed on your machine.
+
+### Step 1: Install via `npx`
+
+You don't need to install the package globally. Just use it directly with `npx`:
+
+```bash
+npx npui add <ComponentName>
+```
+
+### Example:
+
+To download the `Table` component from the npui component library and add it to your project:
+
+```bash
+npx npui add Table
+```
+
+This will create the following structure in your project:
+
+```
+your-app/
+│
+├── npui/
+│   └── Table/
+│       └── Table.tsx
+```
+
+## How It Works
+
+- When you run the command `npx npui add <ComponentName>`, the CLI will:
+  - Create an `npui` directory (if it doesn't exist) in your project root.
+  - Download the specified component from the **npui** GitHub repository.
+  - Place the component files in the appropriate folder under the `npui` directory.
+
+## GitHub Repository
+
+The **npui** components are hosted on GitHub:  
+[NextProduction/npui](https://github.com/NextProduction/npui)
+
+You can browse the available components and their code in the repository.
+
+## Commands
+
+- **Add a component:**
+
+  ```bash
+  npx npui add <ComponentName>
+  ```
+
+  Downloads the specified component from the **npui** library and places it in your project.
+
+## Contributing
+
+We welcome contributions! If you'd like to contribute to the **npui** library, please feel free to submit a pull request on our GitHub repository.
+
+## License
+
+This project is licensed under the GPL-3.0-or-later License.
+
+---
+
+**Maintained by [NextProduction](https://github.com/NextProduction)**  
+Created by [Mahdi Hazrati](https://github.com/mahdi-hazrati)

cli/main.mjs

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+// This line is a shebang, which tells the system to execute this file using Node.js.
+// It ensures that the script can be run as an executable directly from the command line.
+
+import fs from "fs"; // Importing the file system module to interact with the filesystem (e.g., create directories, write files).
+import path from "path"; // Importing the path module to handle and transform file paths.
+import fetch from "node-fetch"; // Importing node-fetch to make HTTP requests (used to fetch component files from GitHub).
+
+// Base URL for raw content of your GitHub repository where the components are stored.
+// This URL will be used to dynamically download the components.
+const GITHUB_RAW_BASE_URL = 'https://raw.githubusercontent.com/NextProduction/npui/main/src/components';
+
+// Asynchronous function to download the specified component.
+async function downloadComponent(componentName) {
+    // Construct the filename and the full URL to the raw component file on GitHub.
+    const componentFile = `${componentName}.tsx`;
+    const componentUrl = `${GITHUB_RAW_BASE_URL}/${componentName}/${componentFile}`;
+
+    try {
+        // Check if the 'npui' directory exists in the user's project.
+        // If it doesn't exist, create it to store downloaded components.
+        if (!fs.existsSync('npui')) {
+            fs.mkdirSync('npui'); // Create 'npui' directory.
+        }
+
+        // Create a specific directory for the component inside the 'npui' folder (e.g., npui/Table).
+        const componentPath = path.join('npui', componentName);
+        if (!fs.existsSync(componentPath)) {
+            fs.mkdirSync(componentPath); // Create the component's folder if it doesn't exist.
+        }
+
+        // Fetch the component file from GitHub using the constructed URL.
+        const response = await fetch(componentUrl);
+        if (!response.ok) {
+            throw new Error(`Failed to download component: ${componentName}`); // Throw an error if the fetch request fails.
+        }
+        const componentCode = await response.text(); // Get the file content as plain text.
+
+        // Write the fetched component file into the user's project under the correct path (e.g., npui/Table/Table.tsx).
+        const filePath = path.join(componentPath, componentFile);
+        fs.writeFileSync(filePath, componentCode); // Save the file locally.
+        console.log(`Component ${componentName} downloaded successfully to ${filePath}`); // Log success message.
+
+    } catch (error) {
+        // Handle errors that occur during the process (e.g., failed download or file system issues).
+        console.error(`Error: ${error.message}`);
+    }
+}
+
+// Command-line arguments handler. 'process.argv' contains all arguments passed to the script.
+// We slice the array to get the relevant arguments. The first argument should be 'add', and the second should be the component name.
+const args = process.argv.slice(2);
+if (args[0] === 'add' && args[1]) {
+    const componentName = args[1]; // Extract the component name.
+    downloadComponent(componentName); // Call the download function with the component name.
+} else {
+    // If the command is incorrect or no component name is provided, display usage instructions.
+    console.log("Usage: npx npui add <ComponentName>");
+}

cli/package.json

@@ -1,10 +1,10 @@
 {
   "name": "npui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "npui - open component library",
-  "main": "main.ts",
+  "main": "main.mjs",
   "bin": {
-    "npui": "./main.ts"
+    "npui": "./main.mjs"
   },
   "scripts": {
     "test": "echo \"Hi, NPUI :)\""
@@ -40,5 +40,8 @@
   "bugs": {
     "url": "https://github.com/NextProduction/npui/issues"
   },
-  "homepage": "https://nextproduction.dev/npui/"
+  "homepage": "https://nextproduction.dev/npui/",
+  "dependencies": {
+    "node-fetch": "^3.3.2"
+  }
 }

tsconfig.json

@@ -21,6 +21,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "cli/main.js"],
   "exclude": ["node_modules"]
 }