react-apps-ui 1.0.0

package/dist/index.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const chalk_1 = __importDefault(require("chalk"));
+const prompts_1 = __importDefault(require("prompts"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+// base URL to GitHub Raw folder
+const REGISTRY_URL = "https://raw.githubusercontent.com/anandvyas2021/react-apps-ui-registry/refs/heads/prod/__registry__";
+const program = new commander_1.Command();
+program
+    .name("react-apps-ui")
+    .description("Add high-quality components to your React Native app")
+    .version("1.0.0");
+// --- THE INIT COMMAND ---
+program
+    .command("init")
+    .description("Configure your Expo project and install the ThemeProvider")
+    .action(async () => {
+    console.log(chalk_1.default.blue("Welcome to React Apps UI!\n"));
+    // Ask the user which engine they want
+    const response = await (0, prompts_1.default)({
+        type: "select",
+        name: "engine",
+        message: "Which styling engine are you using?",
+        choices: [
+            {
+                title: "StyleSheet (Zero dependencies)",
+                value: "mobile-stylesheet",
+            },
+            {
+                title: "NativeWind (Tailwind CSS)",
+                value: "mobile-nativewind",
+            },
+        ],
+    });
+    if (!response.engine) {
+        console.log(chalk_1.default.red("Initialization cancelled."));
+        return;
+    }
+    // 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...`));
+    try {
+        const res = await fetch(manifestUrl);
+        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...`));
+        // 4. Loop through the files (tokens.ts and ThemeProvider.tsx) and create them!
+        for (const file of themeComponent.files) {
+            // file.target is exactly what we wrote earlier (e.g., "theme/tokens.ts")
+            const targetPath = path_1.default.join(process.cwd(), file.target);
+            // Ensure the folder exists (e.g., creates the "theme/" folder if it doesn't exist)
+            fs_1.default.mkdirSync(path_1.default.dirname(targetPath), { recursive: true });
+            // Write the raw React code to their hard drive!
+            fs_1.default.writeFileSync(targetPath, file.content, "utf-8");
+            console.log(chalk_1.default.green(`Created ${file.target}`));
+        }
+        console.log(chalk_1.default.blue("\n🎉 Initialization complete!"));
+        console.log(chalk_1.default.dim("Wrap your app in the <ThemeProvider> to get started."));
+    }
+    catch (error) {
+        console.log(chalk_1.default.red(`\nFailed to initialize:`));
+        console.error(error);
+    }
+});
+program.parse();

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "react-apps-ui",
+    "version": "1.0.0",
+    "description": "The React Native UI CLI",
+    "main": "dist/index.js",
+    "bin": {
+        "react-apps-ui": "./dist/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsx src/index.ts",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "chalk": "^5.6.2",
+        "commander": "^14.0.3",
+        "prompts": "^2.4.2"
+    },
+    "devDependencies": {
+        "@types/node": "^22.20.2",
+        "@types/prompts": "^2.4.9",
+        "tsx": "^4.23.13",
+        "typescript": "^7.0.2"
+    }
+}

package/src/index.ts

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import chalk from "chalk";
+import prompts from "prompts";
+import fs from "fs";
+import path from "path";
+
+// base URL to GitHub Raw folder
+const REGISTRY_URL =
+    "https://raw.githubusercontent.com/anandvyas2021/react-apps-ui-registry/refs/heads/prod/__registry__";
+
+const program = new Command();
+
+program
+    .name("react-apps-ui")
+    .description("Add high-quality components to your React Native app")
+    .version("1.0.0");
+
+// --- THE INIT COMMAND ---
+program
+    .command("init")
+    .description("Configure your Expo project and install the ThemeProvider")
+    .action(async () => {
+        console.log(chalk.blue("Welcome to React Apps UI!\n"));
+
+        // Ask the user which engine they want
+        const response = await prompts({
+            type: "select",
+            name: "engine",
+            message: "Which styling engine are you using?",
+            choices: [
+                {
+                    title: "StyleSheet (Zero dependencies)",
+                    value: "mobile-stylesheet",
+                },
+                {
+                    title: "NativeWind (Tailwind CSS)",
+                    value: "mobile-nativewind",
+                },
+            ],
+        });
+
+        if (!response.engine) {
+            console.log(chalk.red("Initialization cancelled."));
+            return;
+        }
+
+        // 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...`));
+
+        try {
+            const res = await fetch(manifestUrl);
+            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: 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...`));
+
+            // 4. Loop through the files (tokens.ts and ThemeProvider.tsx) and create them!
+            for (const file of themeComponent.files) {
+                // file.target is exactly what we wrote earlier (e.g., "theme/tokens.ts")
+                const targetPath = path.join(process.cwd(), file.target);
+
+                // Ensure the folder exists (e.g., creates the "theme/" folder if it doesn't exist)
+                fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+
+                // Write the raw React code to their hard drive!
+                fs.writeFileSync(targetPath, file.content, "utf-8");
+
+                console.log(chalk.green(`Created ${file.target}`));
+            }
+
+            console.log(chalk.blue("\n🎉 Initialization complete!"));
+            console.log(
+                chalk.dim(
+                    "Wrap your app in the <ThemeProvider> to get started.",
+                ),
+            );
+        } catch (error) {
+            console.log(chalk.red(`\nFailed to initialize:`));
+            console.error(error);
+        }
+    });
+
+program.parse();

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "CommonJS",
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true
+    },
+    "include": ["src/**/*"]
+}