create-ern-boilerplate 0.0.40 → 0.0.42

package/create.js

@@ -14,12 +14,11 @@ const __dirname = path.dirname(__filename);
 async function main() {
     console.log(chalk.bold.cyan("\n🚀 Create Expo React Native Boilerplate\n"));
 
-    // Ambil argumen CLI
+    // === Read CLI arguments ===
     const args = process.argv.slice(2);
     const hasY = args.includes("-y") || args.includes("--yes");
-    const hasInstall = args.includes("--install"); // ✅ tambahkan flag install
+    const hasInstall = args.includes("--install");
 
-    // Ambil nilai argumen manual
     const nameArg = args.find((a) => !a.startsWith("-"));
     const descIndex = args.findIndex((a) => a === "--desc");
     const templateIndex = args.findIndex((a) => a === "--template");
@@ -28,34 +27,34 @@ async function main() {
     const templateArg = templateIndex !== -1 ? args[templateIndex + 1] : "";
 
     let projectName = nameArg || "";
-    let description = descArg || "Proyek React Native dengan Expo";
-    let templateName = templateArg || "minimal"; // default template
+    let description = descArg || "Expo React Native project";
+    let templateName = templateArg || "minimal";
     let autoInstall = false;
 
-    // === Mode interaktif ===
+    // === Interactive mode ===
     if (!hasY) {
         const answers = await inquirer.prompt([
             {
                 name: "projectName",
-                message: "Nama project kamu:",
+                message: "Project name:",
                 default: projectName || "my-expo-app",
             },
             {
                 name: "description",
-                message: "Deskripsi singkat:",
+                message: "Short description:",
                 default: description,
             },
             {
                 type: "list",
                 name: "template",
-                message: "Pilih template:",
+                message: "Choose a template:",
                 choices: await getTemplateChoices(),
                 default: templateName,
             },
             {
                 type: "confirm",
                 name: "autoInstall",
-                message: "Langsung install dependencies setelah membuat project?",
+                message: "Install dependencies automatically after creating the project?",
                 default: false,
             },
         ]);
@@ -65,20 +64,23 @@ async function main() {
         templateName = answers.template;
         autoInstall = answers.autoInstall;
     } else {
-        // === Mode cepat (-y) ===
+        // === Fast mode ===
         if (!projectName) {
-            console.log(chalk.red("❌ Kamu harus kasih nama project di mode -y"));
-            console.log(chalk.yellow("Contoh:"));
+            console.log(chalk.red("❌ You must provide a project name when using -y mode."));
+            console.log(chalk.yellow("Example:"));
             console.log(
-                chalk.cyan("  npx create-ern-boilerplate my-app -y --desc 'My App' --template redux")
+                chalk.cyan(
+                    "  npx create-ern-boilerplate my-app -y --desc 'My App' --template redux"
+                )
             );
             process.exit(1);
         }
 
-        autoInstall = hasInstall; // ✅ install hanya kalau ada flag --install
+        autoInstall = hasInstall;
         console.log(
             chalk.green(
-                `📦 Membuat proyek ${projectName}... (mode cepat${autoInstall ? " + install dependencies" : ""
+                `📦 Creating project ${projectName}... (fast mode${
+                    autoInstall ? " + installing dependencies" : ""
                 })`
             )
         );
@@ -88,22 +90,22 @@ async function main() {
     const templateDir = path.resolve(__dirname, "templates", templateName);
 
     if (!(await fs.pathExists(templateDir))) {
-        console.log(chalk.red(`❌ Template "${templateName}" tidak ditemukan.`));
+        console.log(chalk.red(`❌ Template "${templateName}" not found.`));
         process.exit(1);
     }
 
     if (fs.existsSync(targetDir)) {
-        console.log(chalk.red(`❌ Folder "${projectName}" sudah ada.`));
+        console.log(chalk.red(`❌ Folder "${projectName}" already exists.`));
         process.exit(1);
     }
 
     // === Copy template ===
-    const spinner = ora(`📁 Menyalin template "${templateName}"...`).start();
+    const spinner = ora(`📁 Copying template "${templateName}"...`).start();
 
     try {
         await fs.copy(templateDir, targetDir);
 
-        // === Rename .gitignore-template ke .gitignore ===
+        // === Rename .gitignore-template → .gitignore ===
         const gitignoreTemplatePath = path.join(targetDir, ".gitignore-template");
         const gitignorePath = path.join(targetDir, ".gitignore");
 
@@ -121,121 +123,112 @@ async function main() {
         }
 
         // === Update app.json ===
-        const appJsonPath = path.join(targetDir, "app.json");
-        if (fs.existsSync(appJsonPath)) {
-            const appJson = await fs.readJson(appJsonPath);
-            appJson.expo = appJson.expo || {};
-            appJson.expo.name = projectName;
-            appJson.expo.slug = projectName.toLowerCase().replace(/\s+/g, "-");
-            appJson.expo.ios = appJson.expo.ios || {};
-            appJson.expo.android = appJson.expo.android || {};
-            appJson.expo.ios.bundleIdentifier = `com.${projectName.toLowerCase()}.app`;
-            appJson.expo.android.package = `com.${projectName.toLowerCase()}.app`;
-            appJson.expo.scheme = projectName.toLowerCase();
-            if (appJson.expo.extra && appJson.expo.extra.eas) {
-                appJson.expo.extra.eas.projectId = "";
-            }
-            await fs.writeJson(appJsonPath, appJson, { spaces: 2 });
-        }
+        const updateAppJson = async (file, env = null) => {
+            const filePath = path.join(targetDir, file);
+            if (!fs.existsSync(filePath)) return;
+
+            const json = await fs.readJson(filePath);
+
+            json.expo = json.expo || {};
+            json.expo.name = projectName;
+            json.expo.slug = projectName.toLowerCase().replace(/\s+/g, "-");
+
+            json.expo.ios = json.expo.ios || {};
+            json.expo.android = json.expo.android || {};
+
+            json.expo.ios.bundleIdentifier = `com.${projectName.toLowerCase()}.app`;
+            json.expo.android.package = `com.${projectName.toLowerCase()}.app`;
 
-        // === Update app.staging.json ===
-        const appJsonPathStaging = path.join(targetDir, "app.staging.json");
-        if (fs.existsSync(appJsonPathStaging)) {
-            const appJsonStaging = await fs.readJson(appJsonPathStaging);
-            appJsonStaging.expo = appJsonStaging.expo || {};
-            appJsonStaging.expo.name = projectName;
-            appJsonStaging.expo.slug = projectName.toLowerCase().replace(/\s+/g, "-");
-            appJsonStaging.expo.ios = appJsonStaging.expo.ios || {};
-            appJsonStaging.expo.android = appJsonStaging.expo.android || {};
-            appJsonStaging.expo.ios.bundleIdentifier = `com.${projectName.toLowerCase()}.app`;
-            appJsonStaging.expo.android.package = `com.${projectName.toLowerCase()}.app`;
-            appJsonStaging.expo.scheme = projectName.toLowerCase();
-            if (appJsonStaging.expo.extra && appJsonStaging.expo.extra.eas) {
-                appJsonStaging.expo.extra.eas.projectId = "";
+            json.expo.scheme = projectName.toLowerCase();
+
+            if (json.expo.extra && json.expo.extra.eas) {
+                json.expo.extra.eas.projectId = "";
             }
-            appJsonStaging.expo.extra.ENV = "staging";
-            appJsonStaging.expo.extra.BASE_URL = "";
-            await fs.writeJson(appJsonPathStaging, appJsonStaging, { spaces: 2 });
-        }
 
-        // === Update app.prod.json ===
-        const appJsonPathProd = path.join(targetDir, "app.prod.json");
-        if (fs.existsSync(appJsonPathProd)) {
-            const appJsonProd = await fs.readJson(appJsonPathProd);
-            appJsonProd.expo = appJsonProd.expo || {};
-            appJsonProd.expo.name = projectName;
-            appJsonProd.expo.slug = projectName.toLowerCase().replace(/\s+/g, "-");
-            appJsonProd.expo.ios = appJsonProd.expo.ios || {};
-            appJsonProd.expo.android = appJsonProd.expo.android || {};
-            appJsonProd.expo.ios.bundleIdentifier = `com.${projectName.toLowerCase()}.app`;
-            appJsonProd.expo.android.package = `com.${projectName.toLowerCase()}.app`;
-            appJsonProd.expo.scheme = projectName.toLowerCase();
-            if (appJsonProd.expo.extra && appJsonProd.expo.extra.eas) {
-                appJsonProd.expo.extra.eas.projectId = "";
+            if (env) {
+                json.expo.extra = json.expo.extra || {};
+                json.expo.extra.ENV = env;
+                json.expo.extra.BASE_URL = "";
             }
-            appJsonProd.expo.extra.ENV = "production";
-            appJsonProd.expo.extra.BASE_URL = "";
-            await fs.writeJson(appJsonPathProd, appJsonProd, { spaces: 2 });
-        }
 
-        spinner.succeed(`✅ Template "${templateName}" berhasil dibuat!`);
+            await fs.writeJson(filePath, json, { spaces: 2 });
+        };
+
+        await updateAppJson("app.json");
+        await updateAppJson("app.staging.json", "staging");
+        await updateAppJson("app.prod.json", "production");
+
+        spinner.succeed(`✅ Template "${templateName}" has been created!`);
     } catch (err) {
-        spinner.fail("❌ Terjadi kesalahan saat membuat project.");
+        spinner.fail("❌ An error occurred while creating the project.");
         console.error(err);
         process.exit(1);
     }
 
-    // === Auto install kalau dipilih ===
+    // === Auto install dependencies ===
     if (autoInstall) {
-        const installSpinner = ora("📦 Menginstall dependencies...").start();
+        const installSpinner = ora("📦 Installing dependencies...").start();
         try {
             execSync("npm install", { cwd: targetDir, stdio: "inherit" });
-            installSpinner.succeed("✅ Dependencies berhasil diinstall!");
+            installSpinner.succeed("✅ Dependencies installed successfully!");
         } catch (err) {
-            installSpinner.fail("❌ Gagal menginstall dependencies.");
+            installSpinner.fail("❌ Failed to install dependencies.");
             console.error(err);
         }
     }
 
+    // === Final output ===
     console.log(`
-${chalk.green("🎉 Selesai!")}
-Boilerplate berhasil dibuat untuk project: ${chalk.cyan(projectName)}
+${chalk.green("🎉 Done!")}
+The boilerplate has been successfully created for project: ${chalk.cyan(projectName)}
+
+${
+    autoInstall
+        ? chalk.dim("📦 Dependencies have been installed automatically. ✅")
+        : chalk.yellow(
+              "📦 Before starting, review the dependencies in package.json to ensure they match your project requirements."
+          )
+}
 
-${autoInstall
-            ? chalk.dim("📦 Dependencies sudah terinstall otomatis ✅")
-            : chalk.yellow("📦 Jalankan 'npm install' sebelum mulai coding")
-        }
+${chalk.cyan(
+    "Before building any features, it is highly recommended to follow the reading order below to fully understand the project structure and AI workflow."
+)}
+
+${chalk.bold("\n📖 RECOMMENDED READING ORDER:\n")}
+
+1. ⭐  ${chalk.dim("# START HERE — Choose template variant")}
+       ${chalk.dim("TEMPLATE_VARIANTS.md")}
+
+2. ⭐  ${chalk.dim("# Complete AI onboarding guide & AI workflow explanation")}
+       ${chalk.dim("AI_GUIDE.md")}
+
+3. 📍  ${chalk.dim("# Path mappings & AI context configuration")}
+       ${chalk.dim("ai-context.json")}
+
+4. 📋  ${chalk.dim("# Code generation patterns and rules")}
+       ${chalk.dim("GENERATE_RULES.md")}
 
-${chalk.cyan("Sebelum mulai mengembangkan fitur, sangat disarankan mengikuti urutan bacaan berikut untuk memahami alur project dan AI workflow.")}
-
-${chalk.bold("\n📖 READING ORDER (Urutan Baca yang Direkomendasikan):\n")}
-
-1. ⭐  TEMPLATE_VARIANTS.md          
-    ${chalk.dim("# START HERE — Choose template variant")}
-2. ⭐  AI_GUIDE.md          
-    ${chalk.dim("# Complete AI onboarding guide & cara kerja AI")}
-3. 📍  ai-context.json      
-    ${chalk.dim("# Path mappings & context")}
-4. 📋  GENERATE_RULES.md    
-    ${chalk.dim("# Pola pembuatan kode")}
-5. 📐  CONVENTIONS.md       
-    ${chalk.dim("# Standar coding")}
-6. 📋  SERVER_GUIDE.md       
-    ${chalk.dim("# Mock API & dummy data guide")}
-7. 💡  examples/            
-    ${chalk.dim("# Contoh kode siap pakai")}
-8. 📖 README.md             
-    ${chalk.dim("# Gambaran umum project")}
-
-${chalk.bold("\n📖 Pastikan untuk selalu menjaga stabilitas integrasi, skalabilitas arsitektur, maintainability, testability, konsistensi codebase, serta zero error.\n")}
+5. 📐  ${chalk.dim("# Coding standards and conventions")}
+       ${chalk.dim("CONVENTIONS.md")}
+
+6. 📋  ${chalk.dim("# Mock API usage & dummy data guide")}
+       ${chalk.dim("SERVER_GUIDE.md")}
+
+7. 💡  ${chalk.dim("# Ready-to-use examples")}
+       ${chalk.dim("examples/")}
+
+8. 📖 ${chalk.dim("# General overview of the project")}
+       ${chalk.dim("README.md")}
+
+${chalk.bold(
+    "\n📖 Always maintain integration stability, architectural scalability, maintainability, testability, codebase consistency, and zero errors.\n"
+)}
 
 ${chalk.green("Happy coding! 💻")}
 `);
 }
 
-
-
-// === Helper untuk menampilkan daftar template ===
+// === Helper: list available templates ===
 async function getTemplateChoices() {
     const templatesDir = path.join(__dirname, "templates");
     const folders = await fs.readdir(templatesDir);
@@ -245,6 +238,6 @@ async function getTemplateChoices() {
 }
 
 main().catch((err) => {
-    console.error(chalk.red("Terjadi kesalahan:"), err);
+    console.error(chalk.red("An unexpected error occurred:"), err);
     process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ern-boilerplate",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "Expo React Native boilerplate generator",
   "bin": {
     "create-ern-boilerplate": "./create.js",

package/templates/agent-generator/examples/screen.example.tsx

@@ -12,7 +12,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, FlatList, RefreshControl, ActivityIndicator } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useThemeStore } from '@/store/themeStore';
+import { useTheme } from '@/hooks/useTheme';
 import { Card } from '@/components/common/Card';
 import { Button } from '@/components/common/Button';
 
@@ -25,8 +25,7 @@ interface NewsItem {
 }
 
 export default function NewsListScreen() {
-  const colorScheme = useThemeStore((state) => state.colorScheme);
-  const isDark = colorScheme === 'dark';
+  const { colors, isDark } = useTheme();
 
   // State management
   const [news, setNews] = useState<NewsItem[]>([]);

package/templates/agent-generator/examples/screens/detail-screen.example.tsx

@@ -28,6 +28,7 @@ import {
 import { useTheme } from '@/hooks/useTheme';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import Toast from 'react-native-toast-message';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Example: Product interface
 interface Product {
@@ -184,7 +185,7 @@ export default function ProductDetailScreen() {
 
   // Main content
   return (
-    <View className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
+    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
       <ScrollView>
         {/* Product Image */}
         {product.imageUrl && (
@@ -282,6 +283,6 @@ export default function ProductDetailScreen() {
           </View>
         </View>
       </ScrollView>
-    </View>
+    </SafeAreaView>
   );
 }

package/templates/agent-generator/examples/screens/list-screen-no-auth.example.tsx

@@ -26,6 +26,7 @@ import {
 } from 'react-native';
 import { useTheme } from '@/hooks/useTheme';
 import { useRouter } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Example: News interface
 interface NewsItem {
@@ -142,7 +143,7 @@ export default function NewsListScreen() {
 
   // Main content
   return (
-    <View className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
+    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
       <FlatList
         data={news}
         keyExtractor={(item) => item.id}
@@ -189,6 +190,6 @@ export default function NewsListScreen() {
         )}
         contentContainerStyle={{ paddingBottom: 16 }}
       />
-    </View>
+    </SafeAreaView>
   );
 }

package/templates/agent-generator/examples/screens/list-screen-with-auth.example.tsx

@@ -27,6 +27,7 @@ import {
 import { useTheme } from '@/hooks/useTheme';
 import { useAuthStore } from '@/store/authStore';
 import { useRouter } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Example: User's task interface
 interface Task {
@@ -190,7 +191,7 @@ export default function TaskListScreen() {
 
   // Main content
   return (
-    <View className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
+    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? '#000' : '#F9FAFB' }}>
       {/* Header with user info */}
       <View className={`px-4 py-4 ${isDark ? 'bg-gray-800' : 'bg-white'}`}>
         <Text className={`text-lg font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
@@ -245,6 +246,6 @@ export default function TaskListScreen() {
         )}
         contentContainerStyle={{ paddingBottom: 16 }}
       />
-    </View>
+    </SafeAreaView>
   );
 }