react-apps-ui 1.0.11 → 1.0.13

package/README.md

@@ -64,11 +64,11 @@ The code is now yours! You will find it beautifully organized in your project fo
 import { ActionButton } from "@/components/ui/action-button";
 
 export default function App() {
-  return (
-    <ActionButton onPress="{()"> console.log("Pressed!")}>
-      Click Me
-    </ActionButton>
-  );
+    return (
+        <ActionButton onPress={() => console.log("Pressed!")}>
+            Click Me
+        </ActionButton>
+    );
 }
 ```
 

package/dist/index.js

@@ -17,7 +17,49 @@ program
     .name("react-apps-ui")
     .description("Add high-quality components to your React Native app")
     .version("1.0.0");
+// Helper to filter out packages that are already in package.json
+function filterMissingDeps(deps) {
+    const packageJsonPath = path_1.default.join(process.cwd(), "package.json");
+    if (!fs_1.default.existsSync(packageJsonPath))
+        return deps;
+    try {
+        const pkg = JSON.parse(fs_1.default.readFileSync(packageJsonPath, "utf-8"));
+        const installed = {
+            ...(pkg.dependencies || {}),
+            ...(pkg.devDependencies || {}),
+        };
+        return deps.filter((dep) => {
+            let pkgName = dep;
+            if (dep.startsWith("@")) {
+                pkgName = "@" + dep.slice(1).split("@")[0];
+            }
+            else {
+                pkgName = dep.split("@")[0];
+            }
+            return !installed[pkgName];
+        });
+    }
+    catch {
+        return deps;
+    }
+}
 // --- THE INIT COMMAND ---
+// 1. Define the foundational architecture for each engine
+const BASE_DEPS = {
+    "mobile-nativewind": {
+        npm: [
+            "class-variance-authority",
+            "tailwind-merge",
+            "clsx",
+            "lucide-react-native", // Added for the IconName type
+        ],
+        registry: ["theme", "utils"], // Pulls your cn() utility and theme
+    },
+    "mobile-stylesheet": {
+        npm: ["lucide-react-native"], // Added for the IconName type
+        registry: ["theme", "utils"],
+    },
+};
 program
     .command("init")
     .description("Configure your Expo project and install the ThemeProvider")
@@ -43,6 +85,8 @@ program
         console.log(chalk_1.default.red("Initialization cancelled."));
         return;
     }
+    const engineKey = response.engine;
+    const setup = BASE_DEPS[engineKey];
     // 2. USE THE REGISTRY_URL to fetch the correct JSON manifest
     const manifestUrl = `${REGISTRY_URL}/${response.engine}.json`;
     console.log(chalk_1.default.dim(`\nFetching registry from GitHub...`));
@@ -51,59 +95,79 @@ program
         if (!res.ok)
             throw new Error(`Failed to fetch registry: ${res.statusText}`);
         const registry = await res.json();
-        // 3. Find the "theme" component inside the giant JSON
-        const themeComponent = registry.find((item) => item.name === "theme");
-        if (!themeComponent) {
-            console.log(chalk_1.default.red("Error: Could not find 'theme' in the registry."));
-            return;
-        }
-        console.log(chalk_1.default.green(`✓ Found theme provider. Installing...`));
         // Check if the user's project uses a 'src' directory
         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) {
-            // 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);
-            //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_1.default.join(process.cwd(), "src", safeTarget);
+        // 3. Loop through the required BASE REGISTRY components (theme, utils, etc.)
+        for (const compName of setup.registry) {
+            const componentData = registry.find((item) => item.name === compName);
+            if (!componentData) {
+                console.log(chalk_1.default.red(`Error: Could not find '${compName}' in the registry.`));
+                continue;
             }
-            // Ensure the folder exists
-            fs_1.default.mkdirSync(path_1.default.dirname(finalTargetPath), {
-                recursive: true,
-            });
-            // SAFE WRITE: Check if the file already exists
-            if (fs_1.default.existsSync(finalTargetPath)) {
-                if (file.type === "css" ||
-                    finalTargetPath.endsWith(".css")) {
-                    console.log(chalk_1.default.yellow(`  ⚠️  ${file.target} already exists. Appending theme variables safely...`));
-                    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");
+            console.log(chalk_1.default.green(`✓ Found ${compName}. Installing...`));
+            // 4. Loop through the files and write them smartly
+            for (const file of componentData.files) {
+                // 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);
+                //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_1.default.join(process.cwd(), "src", safeTarget);
+                }
+                // Ensure the folder exists
+                fs_1.default.mkdirSync(path_1.default.dirname(finalTargetPath), {
+                    recursive: true,
+                });
+                // SAFE WRITE: Check if the file already exists
+                if (fs_1.default.existsSync(finalTargetPath)) {
+                    if (file.type === "css" ||
+                        finalTargetPath.endsWith(".css")) {
+                        console.log(chalk_1.default.yellow(`  ⚠️  ${file.target} already exists. Appending theme variables safely...`));
+                        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}`));
                         }
                     }
-                    catch (err) {
-                        console.log(chalk_1.default.red(`  ❌ Error reading or appending to ${safeTarget}`));
+                    else {
+                        console.log(chalk_1.default.yellow(`  ⚠️  ${file.target} already exists. Skipping to prevent overwrite.`));
                     }
                 }
                 else {
-                    console.log(chalk_1.default.yellow(`  ⚠️  ${file.target} already exists. Skipping to prevent overwrite.`));
+                    // File doesn't exist, safe to write normally
+                    fs_1.default.writeFileSync(finalTargetPath, file.content, "utf-8");
+                    console.log(chalk_1.default.green(`  Created ${safeTarget}`));
                 }
             }
-            else {
-                // File doesn't exist, safe to write normally
-                fs_1.default.writeFileSync(finalTargetPath, file.content, "utf-8");
-                console.log(chalk_1.default.green(`  Created ${safeTarget}`));
+        }
+        // 5. INSTALL FOUNDATIONAL NPM DEPENDENCIES (Skipping already installed)
+        const missingBaseDeps = filterMissingDeps(setup.npm);
+        if (missingBaseDeps.length > 0) {
+            const depList = missingBaseDeps.join(" ");
+            console.log(chalk_1.default.blue(`\n📦 Installing missing foundational NPM dependencies: ${depList}...`));
+            try {
+                (0, child_process_1.execSync)(`npm install ${depList} --legacy-peer-deps`, {
+                    stdio: "inherit",
+                });
+                console.log(chalk_1.default.green("✓ Dependencies installed successfully."));
+            }
+            catch (err) {
+                console.log(chalk_1.default.red("❌ Failed to install dependencies. You may need to install them manually."));
             }
         }
+        else {
+            console.log(chalk_1.default.green("\n✓ All foundational NPM dependencies are already installed. Skipping."));
+        }
         console.log(chalk_1.default.blue("\n🎉 Initialization complete!"));
         console.log(chalk_1.default.dim("Wrap your app in the <ThemeProvider> to get started."));
     }
@@ -179,7 +243,7 @@ program
                 }
             }
         }
-        // 5. INSTALL NPM DEPENDENCIES
+        // 5. INSTALL NPM DEPENDENCIES (Skipping already installed)
         const depsToInstall = new Set();
         // Collect all dependencies from the components we just added
         for (const compName of componentsToAdd) {
@@ -188,18 +252,24 @@ program
                 compData.dependencies.forEach((dep) => depsToInstall.add(dep));
             }
         }
-        if (depsToInstall.size > 0) {
-            const depList = Array.from(depsToInstall).join(" ");
-            console.log(chalk_1.default.blue(`\n📦 Installing NPM dependencies: ${depList}...`));
+        // Filter out anything already installed in user's package.json
+        const missingDeps = filterMissingDeps(Array.from(depsToInstall));
+        if (missingDeps.length > 0) {
+            const depList = missingDeps.join(" ");
+            console.log(chalk_1.default.blue(`\n📦 Installing missing NPM dependencies: ${depList}...`));
             try {
-                // This runs 'npm install' directly in the user's terminal
-                (0, child_process_1.execSync)(`npm install ${depList}`, { stdio: "inherit" });
+                (0, child_process_1.execSync)(`npm install ${depList} --legacy-peer-deps`, {
+                    stdio: "inherit",
+                });
                 console.log(chalk_1.default.green("✓ Dependencies installed successfully."));
             }
             catch (err) {
                 console.log(chalk_1.default.red("❌ Failed to install dependencies. You may need to install them manually."));
             }
         }
+        else if (depsToInstall.size > 0) {
+            console.log(chalk_1.default.green("\n✓ Required NPM dependencies are already installed. Skipping."));
+        }
         console.log(chalk_1.default.blue("\n🎉 Components installed successfully!"));
     }
     catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-apps-ui",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "description": "A universal, Shadcn-inspired UI component CLI for Web, React Native, and Expo.",
     "author": "Anand Vyas",
     "license": "MIT",

package/src/index.ts

@@ -17,7 +17,51 @@ program
     .description("Add high-quality components to your React Native app")
     .version("1.0.0");
 
+// Helper to filter out packages that are already in package.json
+function filterMissingDeps(deps: string[]): string[] {
+    const packageJsonPath = path.join(process.cwd(), "package.json");
+    if (!fs.existsSync(packageJsonPath)) return deps;
+
+    try {
+        const pkg = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+        const installed = {
+            ...(pkg.dependencies || {}),
+            ...(pkg.devDependencies || {}),
+        };
+
+        return deps.filter((dep) => {
+            let pkgName = dep;
+            if (dep.startsWith("@")) {
+                pkgName = "@" + dep.slice(1).split("@")[0];
+            } else {
+                pkgName = dep.split("@")[0];
+            }
+            return !installed[pkgName];
+        });
+    } catch {
+        return deps;
+    }
+}
+
 // --- THE INIT COMMAND ---
+
+// 1. Define the foundational architecture for each engine
+const BASE_DEPS: Record<string, { npm: string[]; registry: string[] }> = {
+    "mobile-nativewind": {
+        npm: [
+            "class-variance-authority",
+            "tailwind-merge",
+            "clsx",
+            "lucide-react-native", // Added for the IconName type
+        ],
+        registry: ["theme", "utils"], // Pulls your cn() utility and theme
+    },
+    "mobile-stylesheet": {
+        npm: ["lucide-react-native"], // Added for the IconName type
+        registry: ["theme", "utils"],
+    },
+};
+
 program
     .command("init")
     .description("Configure your Expo project and install the ThemeProvider")
@@ -46,6 +90,9 @@ program
             return;
         }
 
+        const engineKey = response.engine as keyof typeof BASE_DEPS;
+        const setup = BASE_DEPS[engineKey];
+
         // 2. USE THE REGISTRY_URL to fetch the correct JSON manifest
         const manifestUrl = `${REGISTRY_URL}/${response.engine}.json`;
         console.log(chalk.dim(`\nFetching registry from GitHub...`));
@@ -56,104 +103,145 @@ program
                 throw new Error(`Failed to fetch registry: ${res.statusText}`);
 
             const registry = await res.json();
-
-            // 3. Find the "theme" component inside the giant JSON
-            const themeComponent = registry.find(
-                (item: any) => item.name === "theme",
-            );
-
-            if (!themeComponent) {
-                console.log(
-                    chalk.red("Error: Could not find 'theme' in the registry."),
-                );
-                return;
-            }
-
-            console.log(chalk.green(`✓ Found theme provider. Installing...`));
-
             // Check if the user's project uses a 'src' directory
             const hasSrcDir = fs.existsSync(path.join(process.cwd(), "src"));
 
-            // 4. Loop through the files and write them smartly
-            for (const file of themeComponent.files) {
-                // A. Force the target to be a string so it can never be undefined
-                const safeTarget = String(
-                    file.target || file.name || "unknown-file",
+            // 3. Loop through the required BASE REGISTRY components (theme, utils, etc.)
+            for (const compName of setup.registry) {
+                const componentData = registry.find(
+                    (item: any) => item.name === compName,
                 );
-                let finalTargetPath = path.join(process.cwd(), safeTarget);
-
-                //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(),
-                        "src",
-                        safeTarget,
+
+                if (!componentData) {
+                    console.log(
+                        chalk.red(
+                            `Error: Could not find '${compName}' in the registry.`,
+                        ),
                     );
+                    continue;
                 }
 
-                // Ensure the folder exists
-                fs.mkdirSync(path.dirname(finalTargetPath), {
-                    recursive: true,
-                });
-
-                // SAFE WRITE: Check if the file already exists
-                if (fs.existsSync(finalTargetPath)) {
-                    if (
-                        file.type === "css" ||
-                        finalTargetPath.endsWith(".css")
-                    ) {
-                        console.log(
-                            chalk.yellow(
-                                `  ⚠️  ${file.target} already exists. Appending theme variables safely...`,
-                            ),
+                console.log(chalk.green(`✓ Found ${compName}. Installing...`));
+
+                // 4. Loop through the files and write them smartly
+                for (const file of componentData.files) {
+                    // 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);
+
+                    //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(),
+                            "src",
+                            safeTarget,
                         );
+                    }
 
-                        try {
-                            // C. Read the file and forcefully convert it to a String
-                            const rawContent = fs.readFileSync(
-                                finalTargetPath,
-                                "utf-8",
-                            );
-                            const safeExistingContent = String(
-                                rawContent || "",
+                    // Ensure the folder exists
+                    fs.mkdirSync(path.dirname(finalTargetPath), {
+                        recursive: true,
+                    });
+
+                    // SAFE WRITE: Check if the file already exists
+                    if (fs.existsSync(finalTargetPath)) {
+                        if (
+                            file.type === "css" ||
+                            finalTargetPath.endsWith(".css")
+                        ) {
+                            console.log(
+                                chalk.yellow(
+                                    `  ⚠️  ${file.target} already exists. Appending theme variables safely...`,
+                                ),
                             );
 
-                            // D. Safely check includes (This line can no longer crash!)
-                            if (
-                                !safeExistingContent.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}`,
+                                    ),
+                                );
                             }
-                        } catch (err) {
+                        } else {
                             console.log(
-                                chalk.red(
-                                    `  ❌ Error reading or appending to ${safeTarget}`,
+                                chalk.yellow(
+                                    `  ⚠️  ${file.target} already exists. Skipping to prevent overwrite.`,
                                 ),
                             );
                         }
                     } else {
-                        console.log(
-                            chalk.yellow(
-                                `  ⚠️  ${file.target} already exists. Skipping to prevent overwrite.`,
-                            ),
+                        // File doesn't exist, safe to write normally
+                        fs.writeFileSync(
+                            finalTargetPath,
+                            file.content,
+                            "utf-8",
                         );
+                        console.log(chalk.green(`  Created ${safeTarget}`));
                     }
-                } else {
-                    // File doesn't exist, safe to write normally
-                    fs.writeFileSync(finalTargetPath, file.content, "utf-8");
-                    console.log(chalk.green(`  Created ${safeTarget}`));
                 }
             }
 
+            // 5. INSTALL FOUNDATIONAL NPM DEPENDENCIES (Skipping already installed)
+            const missingBaseDeps = filterMissingDeps(setup.npm);
+
+            if (missingBaseDeps.length > 0) {
+                const depList = missingBaseDeps.join(" ");
+                console.log(
+                    chalk.blue(
+                        `\n📦 Installing missing foundational NPM dependencies: ${depList}...`,
+                    ),
+                );
+                try {
+                    execSync(`npm install ${depList} --legacy-peer-deps`, {
+                        stdio: "inherit",
+                    });
+                    console.log(
+                        chalk.green("✓ Dependencies installed successfully."),
+                    );
+                } catch (err) {
+                    console.log(
+                        chalk.red(
+                            "❌ Failed to install dependencies. You may need to install them manually.",
+                        ),
+                    );
+                }
+            } else {
+                console.log(
+                    chalk.green(
+                        "\n✓ All foundational NPM dependencies are already installed. Skipping.",
+                    ),
+                );
+            }
+
             console.log(chalk.blue("\n🎉 Initialization complete!"));
             console.log(
                 chalk.dim(
@@ -279,7 +367,7 @@ program
                 }
             }
 
-            // 5. INSTALL NPM DEPENDENCIES
+            // 5. INSTALL NPM DEPENDENCIES (Skipping already installed)
             const depsToInstall = new Set<string>();
 
             // Collect all dependencies from the components we just added
@@ -292,16 +380,19 @@ program
                 }
             }
 
-            if (depsToInstall.size > 0) {
-                const depList = Array.from(depsToInstall).join(" ");
+            // Filter out anything already installed in user's package.json
+            const missingDeps = filterMissingDeps(Array.from(depsToInstall));
+            if (missingDeps.length > 0) {
+                const depList = missingDeps.join(" ");
                 console.log(
                     chalk.blue(
-                        `\n📦 Installing NPM dependencies: ${depList}...`,
+                        `\n📦 Installing missing NPM dependencies: ${depList}...`,
                     ),
                 );
                 try {
-                    // This runs 'npm install' directly in the user's terminal
-                    execSync(`npm install ${depList}`, { stdio: "inherit" });
+                    execSync(`npm install ${depList} --legacy-peer-deps`, {
+                        stdio: "inherit",
+                    });
                     console.log(
                         chalk.green("✓ Dependencies installed successfully."),
                     );
@@ -312,6 +403,12 @@ program
                         ),
                     );
                 }
+            } else if (depsToInstall.size > 0) {
+                console.log(
+                    chalk.green(
+                        "\n✓ Required NPM dependencies are already installed. Skipping.",
+                    ),
+                );
             }
 
             console.log(chalk.blue("\n🎉 Components installed successfully!"));