react-apps-ui 1.0.3 → 1.0.5

package/dist/index.js

@@ -61,11 +61,10 @@ program
         const hasSrcDir = fs_1.default.existsSync(path_1.default.join(process.cwd(), "src"));
         // 4. Loop through the files and write them smartly
         for (const file of themeComponent.files) {
-            // DEFENSIVE FALLBACK: If 'target' is missing from the JSON, use the file.name
-            // This ensures path.join() never receives 'undefined' again.
-            const safeTarget = file.target || file.name;
+            // A. Force the target to be a string so it can never be undefined
+            const safeTarget = String(file.target || file.name || "unknown-file");
             let finalTargetPath = path_1.default.join(process.cwd(), safeTarget);
-            // SMART ROUTING: If they use 'src/' and it's not a root config file, put it inside src/
+            //B. Safely check includes on the guaranteed string
             const isRootConfig = safeTarget.includes("tailwind") ||
                 safeTarget.endsWith(".config.js") ||
                 safeTarget.endsWith(".json");
@@ -81,10 +80,17 @@ program
                 if (file.type === "css" ||
                     finalTargetPath.endsWith(".css")) {
                     console.log(chalk_1.default.yellow(`  ⚠️  ${file.target} already exists. Appending theme variables safely...`));
-                    const existingContent = fs_1.default.readFileSync(finalTargetPath, "utf-8");
-                    // Only append if it doesn't already contain our theme variables to prevent infinite duplication
-                    if (!existingContent.includes("--background:")) {
-                        fs_1.default.appendFileSync(finalTargetPath, `\n/* React Apps UI Theme */\n${file.content}`, "utf-8");
+                    try {
+                        // C. Read the file and forcefully convert it to a String
+                        const rawContent = fs_1.default.readFileSync(finalTargetPath, "utf-8");
+                        const safeExistingContent = String(rawContent || "");
+                        // D. Safely check includes (This line can no longer crash!)
+                        if (!safeExistingContent.includes("--background:")) {
+                            fs_1.default.appendFileSync(finalTargetPath, `\n/* React Apps UI Theme */\n${file.content || ""}`, "utf-8");
+                        }
+                    }
+                    catch (err) {
+                        console.log(chalk_1.default.red(`  ❌ Error reading or appending to ${safeTarget}`));
                     }
                 }
                 else {
@@ -105,4 +111,78 @@ program
         console.error(error);
     }
 });
+// --- THE ADD COMMAND ---
+program
+    .command("add [components...]")
+    .description("Add components to your project")
+    .action(async (components) => {
+    if (!components || components.length === 0) {
+        console.log(chalk_1.default.red("Please specify at least one component to add. (e.g., npx react-apps-ui add action-button)"));
+        return;
+    }
+    // 1. SMART AUTO-DETECT: Check if they are using NativeWind by looking for the preset or config
+    const hasTailwind = fs_1.default.existsSync(path_1.default.join(process.cwd(), "tailwind.config.js")) ||
+        fs_1.default.existsSync(path_1.default.join(process.cwd(), "theme/tailwind-preset.js")) ||
+        fs_1.default.existsSync(path_1.default.join(process.cwd(), "src/theme/tailwind-preset.js"));
+    const engine = hasTailwind ? "mobile-nativewind" : "mobile-stylesheet";
+    console.log(chalk_1.default.dim(`\nDetected engine: ${engine}`));
+    const manifestUrl = `${REGISTRY_URL}/${engine}.json`;
+    try {
+        // 2. Fetch the massive JSON database
+        const res = await fetch(manifestUrl);
+        if (!res.ok)
+            throw new Error(`Failed to fetch registry: ${res.statusText}`);
+        const registry = await res.json();
+        // 3. RECURSIVE DEPENDENCY RESOLUTION
+        // If action-button needs wave-dots-loader, this automatically grabs it!
+        const componentsToAdd = new Set();
+        const resolveDependencies = (compName) => {
+            if (componentsToAdd.has(compName))
+                return; // Prevent infinite loops
+            componentsToAdd.add(compName);
+            const compData = registry.find((c) => c.name === compName);
+            if (compData && compData.registryDependencies) {
+                compData.registryDependencies.forEach(resolveDependencies);
+            }
+        };
+        // Run the resolver for every component the user typed in the terminal
+        components.forEach(resolveDependencies);
+        // We don't need to reinstall the theme if it was pulled as a dependency
+        componentsToAdd.delete("theme");
+        console.log(chalk_1.default.blue(`\nInstalling: ${Array.from(componentsToAdd).join(", ")}...`));
+        const hasSrcDir = fs_1.default.existsSync(path_1.default.join(process.cwd(), "src"));
+        // 4. WRITE THE FILES
+        for (const compName of componentsToAdd) {
+            const compData = registry.find((c) => c.name === compName);
+            if (!compData) {
+                console.log(chalk_1.default.red(`  ❌ Component '${compName}' not found in registry.`));
+                continue;
+            }
+            for (const file of compData.files) {
+                const safeTarget = String(file.target || file.name || "unknown-file");
+                let finalTargetPath = path_1.default.join(process.cwd(), safeTarget);
+                if (hasSrcDir) {
+                    finalTargetPath = path_1.default.join(process.cwd(), "src", safeTarget);
+                }
+                // Ensure the folder exists
+                fs_1.default.mkdirSync(path_1.default.dirname(finalTargetPath), {
+                    recursive: true,
+                });
+                // Safe Write
+                if (!fs_1.default.existsSync(finalTargetPath)) {
+                    fs_1.default.writeFileSync(finalTargetPath, file.content || "", "utf-8");
+                    console.log(chalk_1.default.green(`  Created ${safeTarget}`));
+                }
+                else {
+                    console.log(chalk_1.default.yellow(`  ⚠️  ${safeTarget} already exists. Skipping.`));
+                }
+            }
+        }
+        console.log(chalk_1.default.blue("\n🎉 Components installed successfully!"));
+    }
+    catch (error) {
+        console.log(chalk_1.default.red(`\nFailed to add components:`));
+        console.error(error);
+    }
+});
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-apps-ui",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "description": "The React Native UI CLI",
     "main": "dist/index.js",
     "bin": {

package/src/index.ts

@@ -75,16 +75,18 @@ program
 
             // 4. Loop through the files and write them smartly
             for (const file of themeComponent.files) {
-                // DEFENSIVE FALLBACK: If 'target' is missing from the JSON, use the file.name
-                // This ensures path.join() never receives 'undefined' again.
-                const safeTarget = file.target || file.name;
+                // A. Force the target to be a string so it can never be undefined
+                const safeTarget = String(
+                    file.target || file.name || "unknown-file",
+                );
                 let finalTargetPath = path.join(process.cwd(), safeTarget);
 
-                // SMART ROUTING: If they use 'src/' and it's not a root config file, put it inside src/
+                //B. Safely check includes on the guaranteed string
                 const isRootConfig =
                     safeTarget.includes("tailwind") ||
                     safeTarget.endsWith(".config.js") ||
                     safeTarget.endsWith(".json");
+
                 if (hasSrcDir && !isRootConfig) {
                     finalTargetPath = path.join(
                         process.cwd(),
@@ -109,18 +111,33 @@ program
                                 `  ⚠️  ${file.target} already exists. Appending theme variables safely...`,
                             ),
                         );
-                        const existingContent = fs.readFileSync(
-                            finalTargetPath,
-                            "utf-8",
-                        );
 
-                        // Only append if it doesn't already contain our theme variables to prevent infinite duplication
-                        if (!existingContent.includes("--background:")) {
-                            fs.appendFileSync(
+                        try {
+                            // C. Read the file and forcefully convert it to a String
+                            const rawContent = fs.readFileSync(
                                 finalTargetPath,
-                                `\n/* React Apps UI Theme */\n${file.content}`,
                                 "utf-8",
                             );
+                            const safeExistingContent = String(
+                                rawContent || "",
+                            );
+
+                            // D. Safely check includes (This line can no longer crash!)
+                            if (
+                                !safeExistingContent.includes("--background:")
+                            ) {
+                                fs.appendFileSync(
+                                    finalTargetPath,
+                                    `\n/* React Apps UI Theme */\n${file.content || ""}`,
+                                    "utf-8",
+                                );
+                            }
+                        } catch (err) {
+                            console.log(
+                                chalk.red(
+                                    `  ❌ Error reading or appending to ${safeTarget}`,
+                                ),
+                            );
                         }
                     } else {
                         console.log(
@@ -148,4 +165,124 @@ program
         }
     });
 
+// --- THE ADD COMMAND ---
+program
+    .command("add [components...]")
+    .description("Add components to your project")
+    .action(async (components: string[]) => {
+        if (!components || components.length === 0) {
+            console.log(
+                chalk.red(
+                    "Please specify at least one component to add. (e.g., npx react-apps-ui add action-button)",
+                ),
+            );
+            return;
+        }
+
+        // 1. SMART AUTO-DETECT: Check if they are using NativeWind by looking for the preset or config
+        const hasTailwind =
+            fs.existsSync(path.join(process.cwd(), "tailwind.config.js")) ||
+            fs.existsSync(
+                path.join(process.cwd(), "theme/tailwind-preset.js"),
+            ) ||
+            fs.existsSync(
+                path.join(process.cwd(), "src/theme/tailwind-preset.js"),
+            );
+
+        const engine = hasTailwind ? "mobile-nativewind" : "mobile-stylesheet";
+
+        console.log(chalk.dim(`\nDetected engine: ${engine}`));
+        const manifestUrl = `${REGISTRY_URL}/${engine}.json`;
+
+        try {
+            // 2. Fetch the massive JSON database
+            const res = await fetch(manifestUrl);
+            if (!res.ok)
+                throw new Error(`Failed to fetch registry: ${res.statusText}`);
+            const registry = await res.json();
+
+            // 3. RECURSIVE DEPENDENCY RESOLUTION
+            // If action-button needs wave-dots-loader, this automatically grabs it!
+            const componentsToAdd = new Set<string>();
+
+            const resolveDependencies = (compName: string) => {
+                if (componentsToAdd.has(compName)) return; // Prevent infinite loops
+                componentsToAdd.add(compName);
+
+                const compData = registry.find((c: any) => c.name === compName);
+                if (compData && compData.registryDependencies) {
+                    compData.registryDependencies.forEach(resolveDependencies);
+                }
+            };
+
+            // Run the resolver for every component the user typed in the terminal
+            components.forEach(resolveDependencies);
+
+            // We don't need to reinstall the theme if it was pulled as a dependency
+            componentsToAdd.delete("theme");
+
+            console.log(
+                chalk.blue(
+                    `\nInstalling: ${Array.from(componentsToAdd).join(", ")}...`,
+                ),
+            );
+
+            const hasSrcDir = fs.existsSync(path.join(process.cwd(), "src"));
+
+            // 4. WRITE THE FILES
+            for (const compName of componentsToAdd) {
+                const compData = registry.find((c: any) => c.name === compName);
+                if (!compData) {
+                    console.log(
+                        chalk.red(
+                            `  ❌ Component '${compName}' not found in registry.`,
+                        ),
+                    );
+                    continue;
+                }
+
+                for (const file of compData.files) {
+                    const safeTarget = String(
+                        file.target || file.name || "unknown-file",
+                    );
+                    let finalTargetPath = path.join(process.cwd(), safeTarget);
+
+                    if (hasSrcDir) {
+                        finalTargetPath = path.join(
+                            process.cwd(),
+                            "src",
+                            safeTarget,
+                        );
+                    }
+
+                    // Ensure the folder exists
+                    fs.mkdirSync(path.dirname(finalTargetPath), {
+                        recursive: true,
+                    });
+
+                    // Safe Write
+                    if (!fs.existsSync(finalTargetPath)) {
+                        fs.writeFileSync(
+                            finalTargetPath,
+                            file.content || "",
+                            "utf-8",
+                        );
+                        console.log(chalk.green(`  Created ${safeTarget}`));
+                    } else {
+                        console.log(
+                            chalk.yellow(
+                                `  ⚠️  ${safeTarget} already exists. Skipping.`,
+                            ),
+                        );
+                    }
+                }
+            }
+
+            console.log(chalk.blue("\n🎉 Components installed successfully!"));
+        } catch (error) {
+            console.log(chalk.red(`\nFailed to add components:`));
+            console.error(error);
+        }
+    });
+
 program.parse();