rnexpopack 1.0.0

package/bin/index.js

@@ -0,0 +1,420 @@
+#!/usr/bin/env node
+
+"use strict";
+
+const chalk   = require("chalk");
+const ora     = require("ora");
+const execa   = require("execa");
+const prompts = require("prompts");
+const fs      = require("fs-extra");
+const path    = require("path");
+
+// ─── Banner ───────────────────────────────────────────────────────────────────
+function showBanner() {
+  console.log("");
+  console.log(chalk.cyan("  ╔══════════════════════════════════════════╗"));
+  console.log(chalk.cyan("  ║") + chalk.bold.white("   rnexpopack — React Native Starter CLI  ") + chalk.cyan("║"));
+  console.log(chalk.cyan("  ║") + chalk.gray("   NativeWind · Navigation · Zustand · Axios  ") + chalk.cyan("║"));
+  console.log(chalk.cyan("  ╚══════════════════════════════════════════╝"));
+  console.log("");
+}
+
+// ─── Package Lists ────────────────────────────────────────────────────────────
+const EXPO_PKGS = [
+  "@react-navigation/native",
+  "@react-navigation/native-stack",
+  "@react-navigation/bottom-tabs",
+  "react-native-screens",
+  "react-native-safe-area-context",
+  "react-native-gesture-handler",
+  "react-native-reanimated",
+  "@react-native-async-storage/async-storage",
+  "expo-splash-screen",
+];
+
+const NPM_PKGS = [
+  "nativewind",
+  "tailwindcss",
+  "zustand",
+  "axios",
+];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function isExpoProject() {
+  try {
+    const pkgPath = path.join(process.cwd(), "package.json");
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    return !!(pkg.dependencies && pkg.dependencies["expo"]);
+  } catch (e) {
+    return false;
+  }
+}
+
+function detectPM() {
+  const cwd = process.cwd();
+  if (fs.existsSync(path.join(cwd, "yarn.lock")))      return "yarn";
+  if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  return "npm";
+}
+
+async function run(cmd, args) {
+  await execa(cmd, args, { stdio: "inherit", cwd: process.cwd() });
+}
+
+// ─── Config Writers ───────────────────────────────────────────────────────────
+async function writeBabel() {
+  const content =
+`module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }]
+    ],
+    plugins: [
+      "nativewind/babel",
+      "react-native-reanimated/plugin"
+    ]
+  };
+};
+`;
+  fs.writeFileSync(path.join(process.cwd(), "babel.config.js"), content, "utf8");
+}
+
+async function writeTailwind() {
+  const content =
+`/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./App.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {}
+  },
+  darkMode: "class",
+  plugins: []
+};
+`;
+  fs.writeFileSync(path.join(process.cwd(), "tailwind.config.js"), content, "utf8");
+}
+
+// ─── Write Demo Screen ────────────────────────────────────────────────────────
+async function writeShowcaseScreen() {
+  const screensDir = path.join(process.cwd(), "src", "screens");
+  const navDir     = path.join(process.cwd(), "src", "navigation");
+  fs.ensureDirSync(screensDir);
+  fs.ensureDirSync(navDir);
+
+  // ShowcaseScreen.jsx
+  const screen =
+`import React, { useState } from "react";
+import {
+  View, Text, ScrollView, TouchableOpacity,
+  TextInput, useColorScheme, Alert
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { create } from "zustand";
+import axios from "axios";
+
+// Zustand store demo
+const useStore = create((set) => ({
+  count: 0,
+  inc:   () => set((s) => ({ count: s.count + 1 })),
+  dec:   () => set((s) => ({ count: s.count - 1 })),
+}));
+
+export default function ShowcaseScreen() {
+  const scheme  = useColorScheme();
+  const isDark  = scheme === "dark";
+  const bg      = isDark ? "#0f172a" : "#f8fafc";
+  const card    = isDark ? "#1e293b" : "#ffffff";
+  const text    = isDark ? "#f1f5f9" : "#0f172a";
+  const muted   = isDark ? "#94a3b8" : "#64748b";
+  const border  = isDark ? "#334155" : "#e2e8f0";
+
+  const { count, inc, dec } = useStore();
+  const [input,  setInput]  = useState("");
+  const [saved,  setSaved]  = useState("");
+  const [api,    setApi]    = useState("tap karein");
+  const [loading, setLoad]  = useState(false);
+
+  const save = async () => {
+    await AsyncStorage.setItem("@demo", input);
+    setSaved(input); setInput("");
+  };
+  const load = async () => {
+    const v = await AsyncStorage.getItem("@demo");
+    setSaved(v || "(kuch nahi mila)");
+  };
+  const callApi = async () => {
+    setLoad(true); setApi("loading...");
+    try {
+      const { data } = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
+      setApi("ID:" + data.id + " — " + data.title.slice(0, 30) + "...");
+    } catch { setApi("network error"); }
+    setLoad(false);
+  };
+
+  const Card = ({ title, color, children }) => (
+    <View style={{
+      backgroundColor: card, borderRadius: 14, padding: 16,
+      marginBottom: 12, borderWidth: 1, borderColor: border
+    }}>
+      <View style={{ flexDirection:"row", alignItems:"center", marginBottom: 10 }}>
+        <View style={{
+          width: 10, height: 10, borderRadius: 5,
+          backgroundColor: color, marginRight: 8
+        }}/>
+        <Text style={{ color: text, fontWeight: "700", fontSize: 13, fontFamily: "monospace" }}>
+          {title}
+        </Text>
+      </View>
+      {children}
+    </View>
+  );
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: bg }}>
+      <ScrollView contentContainerStyle={{ padding: 16, paddingBottom: 48 }}>
+
+        <Text style={{ fontSize: 22, fontWeight: "800", color: text, marginBottom: 4 }}>
+          rnexpopack 📦
+        </Text>
+        <Text style={{ fontSize: 13, color: muted, marginBottom: 20 }}>
+          Tamam installed packages ka live demo
+        </Text>
+
+        {/* NativeWind */}
+        <Card title="nativewind — Tailwind CSS" color="#0d9488">
+          <View className="flex-row flex-wrap gap-2">
+            {["bg-blue-500","bg-rose-500","bg-amber-500","bg-emerald-500","bg-purple-500"].map(c => (
+              <View key={c} className={\`\${c} px-3 py-1.5 rounded-lg\`}>
+                <Text className="text-white text-xs font-bold">{c}</Text>
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        {/* AsyncStorage */}
+        <Card title="@react-native-async-storage" color="#2563eb">
+          <TextInput
+            value={input} onChangeText={setInput}
+            placeholder="Kuch likho..." placeholderTextColor={muted}
+            style={{
+              borderWidth:1, borderColor:border, borderRadius:8,
+              paddingHorizontal:12, paddingVertical:8, color:text,
+              fontSize:14, marginBottom:8
+            }}
+          />
+          <View style={{ flexDirection:"row", gap:8, marginBottom:8 }}>
+            <TouchableOpacity onPress={save}
+              style={{ backgroundColor:"#2563eb", borderRadius:8, paddingHorizontal:14, paddingVertical:8 }}>
+              <Text style={{ color:"#fff", fontWeight:"600", fontSize:13 }}>Save</Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={load}
+              style={{ borderWidth:1, borderColor:"#2563eb", borderRadius:8, paddingHorizontal:14, paddingVertical:8 }}>
+              <Text style={{ color:"#2563eb", fontWeight:"600", fontSize:13 }}>Load</Text>
+            </TouchableOpacity>
+          </View>
+          {!!saved && <Text style={{ color:"#2563eb", fontSize:13 }}>Saved: "{saved}"</Text>}
+        </Card>
+
+        {/* Zustand */}
+        <Card title="zustand — Global State" color="#d97706">
+          <View style={{ alignItems:"center" }}>
+            <Text style={{ fontSize: 52, fontWeight:"800", color:text }}>{count}</Text>
+            <View style={{ flexDirection:"row", gap:12, marginTop:10 }}>
+              {[["−", dec,"#ef4444"], ["+", inc,"#22c55e"]].map(([label, fn, bg]) => (
+                <TouchableOpacity key={label} onPress={fn}
+                  style={{ backgroundColor:bg, borderRadius:10, paddingHorizontal:28, paddingVertical:10 }}>
+                  <Text style={{ color:"#fff", fontSize:20, fontWeight:"800" }}>{label}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+        </Card>
+
+        {/* Axios */}
+        <Card title="axios — HTTP Client" color="#7c3aed">
+          <TouchableOpacity onPress={callApi} disabled={loading}
+            style={{
+              backgroundColor: loading ? "#94a3b8" : "#7c3aed",
+              borderRadius:8, paddingHorizontal:14, paddingVertical:10,
+              alignSelf:"flex-start", marginBottom:10
+            }}>
+            <Text style={{ color:"#fff", fontWeight:"600", fontSize:13 }}>
+              {loading ? "Loading..." : "API Call Karein"}
+            </Text>
+          </TouchableOpacity>
+          <Text style={{ color:"#7c3aed", fontSize:13 }}>{api}</Text>
+        </Card>
+
+        {/* Dark Mode */}
+        <Card title="Dark Mode" color="#475569">
+          <Text style={{ color:muted, fontSize:13 }}>
+            Current:{" "}
+            <Text style={{ color:text, fontWeight:"700" }}>
+              {isDark ? "🌙 Dark" : "☀️ Light"}
+            </Text>
+            {"\\n"}useColorScheme() + NativeWind darkMode:"class"
+          </Text>
+        </Card>
+
+        <Text style={{ color:muted, fontSize:11, textAlign:"center", marginTop:8 }}>
+          Yeh screen delete kar sakte hain — src/screens/ mein apna kaam shuru karein
+        </Text>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+`;
+
+  // Navigator
+  const nav =
+`import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import ShowcaseScreen from "../screens/ShowcaseScreen";
+
+const Stack = createNativeStackNavigator();
+
+export default function Navigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Showcase" component={ShowcaseScreen} />
+        {/* apni screens yahan add karein */}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+`;
+
+  fs.writeFileSync(path.join(screensDir, "ShowcaseScreen.jsx"), screen, "utf8");
+  fs.writeFileSync(path.join(navDir,     "Navigator.jsx"),      nav,    "utf8");
+}
+
+// ─── Write App.jsx ────────────────────────────────────────────────────────────
+async function writeAppJsx() {
+  const appPath = path.join(process.cwd(), "App.jsx");
+  if (fs.existsSync(appPath)) return false;
+
+  const content =
+`import React, { useEffect } from "react";
+import * as SplashScreen from "expo-splash-screen";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import Navigator from "./src/navigation/Navigator";
+
+SplashScreen.preventAutoHideAsync();
+
+export default function App() {
+  useEffect(() => { SplashScreen.hideAsync(); }, []);
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Navigator />
+    </GestureHandlerRootView>
+  );
+}
+`;
+  fs.writeFileSync(appPath, content, "utf8");
+  return true;
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+async function main() {
+  showBanner();
+
+  // Guard: must be inside expo project
+  if (!isExpoProject()) {
+    console.log(chalk.red("  ✖  Expo project nahi mila!"));
+    console.log(chalk.gray("  Pehle chalayen:"));
+    console.log(chalk.cyan("  npx create-expo-app my-app && cd my-app\n"));
+    process.exit(1);
+  }
+
+  const pm = detectPM();
+  console.log(chalk.gray("  Package manager: ") + chalk.white(pm));
+  console.log("");
+
+  // Optional packages prompt
+  const res = await prompts([
+    {
+      type:    "multiselect",
+      name:    "opts",
+      message: "Optional packages select karein:",
+      choices: [
+        { title: "@tanstack/react-query  (smart caching)", value: "query",      selected: true  },
+        { title: "react-native-bootsplash (animated splash)", value: "bootsplash", selected: false },
+      ],
+      hint: "Space=toggle  Enter=confirm",
+    },
+    {
+      type:    "confirm",
+      name:    "demo",
+      message: "ShowcaseScreen demo add karein?",
+      initial: true,
+    },
+  ]);
+
+  const optPkgs = [];
+  if (res.opts && res.opts.includes("query"))      optPkgs.push("@tanstack/react-query");
+  if (res.opts && res.opts.includes("bootsplash")) optPkgs.push("react-native-bootsplash");
+
+  console.log("");
+
+  // Step 1 — expo install
+  const s1 = ora({ text: chalk.cyan("Expo packages install ho rahi hain..."), color: "cyan" }).start();
+  try {
+    await run("npx", ["expo", "install", ...EXPO_PKGS]);
+    s1.succeed(chalk.green("Expo packages ✔"));
+  } catch (e) { s1.fail(chalk.red("Expo packages fail")); throw e; }
+
+  // Step 2 — npm install
+  const allNpm = [...NPM_PKGS, ...optPkgs];
+  const s2 = ora({ text: chalk.cyan("npm packages install ho rahi hain..."), color: "cyan" }).start();
+  try {
+    const cmd  = pm === "yarn" ? "yarn" : pm === "pnpm" ? "pnpm" : "npm";
+    const args = pm === "yarn" ? ["add", ...allNpm] : ["install", ...allNpm];
+    await run(cmd, args);
+    s2.succeed(chalk.green("npm packages ✔"));
+  } catch (e) { s2.fail(chalk.red("npm packages fail")); throw e; }
+
+  // Step 3 — configs
+  const s3 = ora({ text: chalk.cyan("Config files likh raha hoon..."), color: "cyan" }).start();
+  try {
+    await writeBabel();
+    await writeTailwind();
+    s3.succeed(chalk.green("babel.config.js + tailwind.config.js ✔"));
+  } catch (e) { s3.fail(chalk.red("Config fail")); throw e; }
+
+  // Step 4 — demo screen
+  if (res.demo) {
+    const s4 = ora({ text: chalk.cyan("Demo screen bana raha hoon..."), color: "cyan" }).start();
+    try {
+      await writeShowcaseScreen();
+      const appCreated = await writeAppJsx();
+      s4.succeed(chalk.green("src/screens/ShowcaseScreen.jsx ✔" + (appCreated ? "  App.jsx ✔" : "")));
+    } catch (e) { s4.fail(chalk.red("Demo screen fail")); throw e; }
+  }
+
+  // Done!
+  console.log("");
+  console.log(chalk.bold.green("  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"));
+  console.log(chalk.bold.green("  ✅  Sab kuch ready hai!"));
+  console.log(chalk.bold.green("  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"));
+  console.log("");
+  console.log("  " + chalk.gray("App chalao:") + "  " + chalk.cyan("npx expo start"));
+  console.log("");
+  console.log("  " + chalk.gray("Installed:"));
+  [...EXPO_PKGS, ...allNpm].forEach((p) =>
+    console.log("  " + chalk.gray("  ▸ ") + chalk.white(p))
+  );
+  console.log("");
+}
+
+main().catch((err) => {
+  console.error("\n" + chalk.red("  ✖  Error: ") + err.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "rnexpopack",
+  "version": "1.0.0",
+  "description": "A CLI tool to setup React Native Expo project with NativeWind, Navigation, Zustand and Axios",
+  "keywords": ["react-native", "expo", "nativewind", "navigation", "starter"],
+  "author": "Abdul Haseeb",
+  "license": "MIT",
+  "preferGlobal": true,
+  "bin": {
+    "rnexpopack": "./bin/index.js"
+  },
+  "dependencies": {
+    "chalk": "4.1.2",
+    "ora": "5.4.1",
+    "execa": "5.1.1",
+    "prompts": "2.4.2",
+    "fs-extra": "11.2.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}