create-ern-boilerplate 0.0.38 → 0.0.40

package/create.js

@@ -210,19 +210,21 @@ ${chalk.cyan("Sebelum mulai mengembangkan fitur, sangat disarankan mengikuti uru
 
 ${chalk.bold("\n📖 READING ORDER (Urutan Baca yang Direkomendasikan):\n")}
 
-1. ⭐  AI_GUIDE.md          
-    ${chalk.dim("# START HERE — onboarding & cara kerja AI")}
-2. 📍  ai-context.json      
+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")}
-3. 📋  GENERATE_RULES.md    
+4. 📋  GENERATE_RULES.md    
     ${chalk.dim("# Pola pembuatan kode")}
-4. 📐  CONVENTIONS.md       
+5. 📐  CONVENTIONS.md       
     ${chalk.dim("# Standar coding")}
-5. 📋  SERVER_GUIDE.md       
+6. 📋  SERVER_GUIDE.md       
     ${chalk.dim("# Mock API & dummy data guide")}
-6. 💡  examples/            
+7. 💡  examples/            
     ${chalk.dim("# Contoh kode siap pakai")}
-7. 📖 README.md             
+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")}

package/package.json

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

package/templates/agent-generator/AI_GUIDE.md

@@ -8,10 +8,11 @@ When you first enter this project, read these files in order:
 
 1. **`README.md`** - Understand project structure and features
 2. **`ai-context.json`** - Know where to generate each type of code
-3. **`GENERATE_RULES.md`** - ⚠️ **READ THIS FIRST** - Tech stack & dependency rules
-4. **`CONVENTIONS.md`** - Understand coding standards
-5. **`SERVER_GUIDE.md`** - ⚠️ **Mock API & dummy data guide**
-6. **`examples/`** - See actual working code patterns
+3. **`TEMPLATE_VARIANTS.md`** - ⚠️ **READ THIS FIRST** - Choose template variant for your app type
+4. **`GENERATE_RULES.md`** - ⚠️ **Tech stack & dependency rules**
+5. **`CONVENTIONS.md`** - Understand coding standards
+6. **`SERVER_GUIDE.md`** - ⚠️ **Mock API & dummy data guide**
+7. **`examples/`** - See actual working code patterns
 
 ## 🚨 CRITICAL RULES - Read First!
 
@@ -68,8 +69,12 @@ Fixed Versions:
   "themePath": "src/theme",          // Theme configuration
   "mockDataPath": "server/db.json",  // Mock database (sample/starter data)
   "examples": "examples",            // Code examples - CHECK THIS FIRST!
+  "examplesScreens": "examples/screens",     // Screen examples (list, form, detail)
+  "examplesServices": "examples/services",   // Service examples (with/without mock/offline)
+  "examplesApps": "examples/apps",           // Complete mini app examples
   "aiGuide": "AI_GUIDE.md",          // AI agent guide
   "serverGuide": "SERVER_GUIDE.md",  // Mock API & server guide
+  "templateVariants": "TEMPLATE_VARIANTS.md", // Template customization guide
   "rules": "GENERATE_RULES.md",      // Code generation rules
   "conventions": "CONVENTIONS.md"    // Coding conventions
 }
@@ -86,6 +91,124 @@ Stores:      newsStore.ts, authStore.ts (camelCase + Store)
 Types:       news.types.ts, user.types.ts (kebab-case + .types)
 ```
 
+## 📁 Examples Folder Structure
+
+The `examples/` folder contains comprehensive code patterns organized by category:
+
+### Overview
+```
+examples/
+├── screens/              # Screen examples for different scenarios
+│   ├── list-screen-no-auth.example.tsx        # Public content list (no auth)
+│   ├── list-screen-with-auth.example.tsx      # Protected content list (with auth)
+│   ├── form-screen.example.tsx                # Create/edit form
+│   └── detail-screen.example.tsx              # Detail page with actions
+│
+├── services/             # Service examples for different setups
+│   ├── service-with-mock.example.ts           # API service with mock support
+│   ├── service-without-mock.example.ts        # Direct API connection only
+│   └── offline-service.example.ts             # Offline storage (AsyncStorage)
+│
+├── apps/                 # Complete mini app examples
+│   ├── todo-offline/                          # Offline todo app (no auth, no API)
+│   ├── news-no-auth/                          # News app (no auth, with API)
+│   └── dashboard-with-auth/                   # Dashboard (with auth, with API)
+│
+├── component.example.tsx  # Reusable component pattern
+├── hook.example.ts        # Custom hook pattern
+├── screen.example.tsx     # Generic screen pattern (legacy)
+└── service.example.ts     # Generic service pattern (legacy)
+```
+
+### When to Use Which Example
+
+#### Screen Examples (`examples/screens/`)
+
+**1. `list-screen-no-auth.example.tsx`**
+- **Use for:** Public content apps (news, recipes, products)
+- **Features:** List view, pull-to-refresh, navigation to detail
+- **No auth required:** Anyone can access
+- **Example apps:** News reader, recipe browser, product catalog
+
+**2. `list-screen-with-auth.example.tsx`**
+- **Use for:** User-specific content (tasks, orders, notifications)
+- **Features:** Protected route, user greeting, personalized data
+- **Auth required:** Must be logged in
+- **Example apps:** Task manager, order history, dashboard
+
+**3. `form-screen.example.tsx`**
+- **Use for:** Create/edit data (products, posts, profiles)
+- **Features:** Form validation, create/edit modes, error handling
+- **Works with or without auth**
+- **Example apps:** Create product, edit profile, submit form
+
+**4. `detail-screen.example.tsx`**
+- **Use for:** Single item display (product, article, user)
+- **Features:** Detail view, action buttons (edit, delete), params handling
+- **Works with or without auth**
+- **Example apps:** Product detail, article reader, profile page
+
+#### Service Examples (`examples/services/`)
+
+**1. `service-with-mock.example.ts`**
+- **Use for:** Apps with backend API
+- **Features:** Auto-switch between mock (dev) and real (prod) API
+- **Mock API support:** Yes
+- **Example:** Article service, product service
+
+**2. `service-without-mock.example.ts`**
+- **Use for:** Third-party APIs, production-only features
+- **Features:** Direct API connection, no mock switching
+- **Mock API support:** No
+- **Example:** Weather API, payment gateway
+
+**3. `offline-service.example.ts`**
+- **Use for:** Offline-first apps, local storage
+- **Features:** AsyncStorage, no network required
+- **Mock API support:** N/A (no API)
+- **Example:** Todo app, notes app, settings
+
+#### Complete App Examples (`examples/apps/`)
+
+**1. `todo-offline/`** - Offline Todo App
+- **Auth:** ❌ No
+- **API:** ❌ No
+- **Storage:** AsyncStorage
+- **Best for:** Personal productivity apps, calculators, offline tools
+- **Read:** `examples/apps/todo-offline/README.md`
+
+**2. `news-no-auth/`** - Public News App
+- **Auth:** ❌ No
+- **API:** ✅ Yes (with mock support)
+- **Storage:** API only
+- **Best for:** Public content, news, blogs, recipes
+- **Read:** `examples/apps/news-no-auth/README.md`
+
+**3. `dashboard-with-auth/`** - Protected Dashboard
+- **Auth:** ✅ Yes
+- **API:** ✅ Yes (with mock support)
+- **Storage:** API + local token
+- **Best for:** Business apps, SaaS, team tools
+- **Read:** `examples/apps/dashboard-with-auth/README.md`
+
+### Quick Decision Guide
+
+**Building a new app? Choose your template variant:**
+
+```
+Does your app need user accounts?
+├─ NO
+│   ├─ Does it need API?
+│   │   ├─ NO  → Use: examples/apps/todo-offline/
+│   │   └─ YES → Use: examples/apps/news-no-auth/
+│   └─ Remove auth from template (see TEMPLATE_VARIANTS.md)
+│
+└─ YES
+    ├─ Keep auth in template
+    ├─ Use: examples/apps/dashboard-with-auth/
+    └─ Follow patterns for protected routes
+```
+
 ## 🎯 Common Tasks
 
 ### Task 1: Build a News App
@@ -383,13 +506,17 @@ This boilerplate includes a **mock API** that simulates a backend server:
 ## 🚦 Quick Checklist
 
 Before generating code:
+- [ ] ⚠️ **Check TEMPLATE_VARIANTS.md** - Understand which template variant to use
+- [ ] ⚠️ **Check examples/apps/** - See complete app examples for your use case
+- [ ] ⚠️ **Check examples/screens/** - Use appropriate screen pattern (auth/no-auth)
+- [ ] ⚠️ **Check examples/services/** - Use appropriate service pattern (mock/no-mock/offline)
 - [ ] ⚠️ **Check package.json** - Only use existing packages!
 - [ ] ⚠️ **NO new dependencies** - Use what's already installed
-- [ ] ⚠️ **Check server/db.json** - Ensure dummy data exists and matches types
-- [ ] Read examples/ folder
+- [ ] ⚠️ **Check server/db.json** - Ensure dummy data exists and matches types (if using API)
+- [ ] Read examples/ folder for patterns
 - [ ] Check ai-context.json for paths
 - [ ] Use TypeScript types
-- [ ] Add dummy data to server/db.json
+- [ ] Add dummy data to server/db.json (if using mock API)
 - [ ] Create mock API file if needed
 - [ ] Use path aliases (@/)
 - [ ] Support theme (light/dark)
@@ -412,19 +539,44 @@ Before generating code:
 ## 📞 Quick Commands
 
 ```bash
-# Read important files
+# Read important files (in order!)
+cat TEMPLATE_VARIANTS.md        # ⭐ Start here - choose template variant
 cat README.md
 cat ai-context.json
 cat GENERATE_RULES.md
 cat CONVENTIONS.md
 cat SERVER_GUIDE.md
+cat AI_GUIDE.md
 
-# Check examples
+# Check examples structure
 ls examples/
+ls examples/screens/            # Screen patterns
+ls examples/services/           # Service patterns
+ls examples/apps/               # Complete app examples
+
+# Check screen examples
+cat examples/screens/list-screen-no-auth.example.tsx
+cat examples/screens/list-screen-with-auth.example.tsx
+cat examples/screens/form-screen.example.tsx
+cat examples/screens/detail-screen.example.tsx
+
+# Check service examples
+cat examples/services/service-with-mock.example.ts
+cat examples/services/service-without-mock.example.ts
+cat examples/services/offline-service.example.ts
+
+# Check complete app examples
+cat examples/apps/todo-offline/README.md
+cat examples/apps/news-no-auth/README.md
+cat examples/apps/dashboard-with-auth/README.md
+
+# Check legacy examples
 cat examples/screen.example.tsx
+cat examples/component.example.tsx
+cat examples/hook.example.ts
 cat examples/service.example.ts
 
-# Check mock data & API
+# Check mock data & API (if using API)
 cat server/db.json
 ls src/services/mockApi/
 cat src/services/mockApi/products.mock.ts

package/templates/agent-generator/CONVENTIONS.md

@@ -383,13 +383,66 @@ const handlePress = useCallback(() => {
 
 1. **NO New Dependencies** - Use only what's in package.json ⚠️
 2. **Fixed Tech Stack** - React 19.1.0, RN 0.81.4, Expo SDK 54 ⚠️
-3. **TypeScript** - Always use proper types
-4. **Path Aliases** - Use `@/` for imports
-5. **NativeWind** - Use Tailwind classes
-6. **Theme Support** - Always support light/dark
-7. **Error Handling** - Always handle errors
-8. **Loading States** - Always show loading
-9. **Clean Code** - Small functions, clear names
-10. **Examples** - Check `examples/` folder
-
-When in doubt, check the `examples/` folder!
+3. **Template Variants** - Check `TEMPLATE_VARIANTS.md` for your app type ⚠️
+4. **TypeScript** - Always use proper types
+5. **Path Aliases** - Use `@/` for imports
+6. **NativeWind** - Use Tailwind classes
+7. **Theme Support** - Always support light/dark
+8. **Error Handling** - Always handle errors
+9. **Loading States** - Always show loading
+10. **Clean Code** - Small functions, clear names
+11. **Examples** - Check `examples/` folder (see Examples Guide below)
+
+## 📚 Examples Guide
+
+### Before You Start
+
+1. **Read `TEMPLATE_VARIANTS.md`** - Choose the right template variant for your app
+2. **Check `examples/apps/`** - See complete app examples
+3. **Check `examples/screens/`** - Find the right screen pattern
+4. **Check `examples/services/`** - Find the right service pattern
+
+### Which Example to Use?
+
+**Building a Todo/Notes App (Offline)?**
+→ Use `examples/apps/todo-offline/` + `examples/services/offline-service.example.ts`
+
+**Building a News/Blog App (Public Content)?**
+→ Use `examples/apps/news-no-auth/` + `examples/screens/list-screen-no-auth.example.tsx`
+
+**Building a Dashboard (Protected)?**
+→ Use `examples/apps/dashboard-with-auth/` + `examples/screens/list-screen-with-auth.example.tsx`
+
+**Need a Form?**
+→ Use `examples/screens/form-screen.example.tsx`
+
+**Need a Detail Page?**
+→ Use `examples/screens/detail-screen.example.tsx`
+
+### Complete Examples List
+
+**App Examples:**
+- `examples/apps/todo-offline/` - Offline app (no auth, no API)
+- `examples/apps/news-no-auth/` - Public content (no auth, with API)
+- `examples/apps/dashboard-with-auth/` - Protected app (with auth, with API)
+
+**Screen Examples:**
+- `examples/screens/list-screen-no-auth.example.tsx`
+- `examples/screens/list-screen-with-auth.example.tsx`
+- `examples/screens/form-screen.example.tsx`
+- `examples/screens/detail-screen.example.tsx`
+
+**Service Examples:**
+- `examples/services/service-with-mock.example.ts`
+- `examples/services/service-without-mock.example.ts`
+- `examples/services/offline-service.example.ts`
+
+**Legacy Examples:**
+- `examples/screen.example.tsx`
+- `examples/component.example.tsx`
+- `examples/hook.example.ts`
+- `examples/service.example.ts`
+
+---
+
+When in doubt, check the `examples/` folder and `TEMPLATE_VARIANTS.md`!

package/templates/agent-generator/GENERATE_RULES.md

@@ -103,17 +103,51 @@ From `ai-context.json`:
   "componentsPath": "src/components",
   "hooksPath": "src/hooks",
   "servicesPath": "src/services",
-  "examples": "examples"
+  "mockApiPath": "src/services/mockApi",
+  "storePath": "src/store",
+  "typesPath": "src/types",
+  "utilsPath": "src/utils",
+  "themePath": "src/theme",
+  "mockDataPath": "server/db.json",
+  "examples": "examples",
+  "examplesScreens": "examples/screens",
+  "examplesServices": "examples/services",
+  "examplesApps": "examples/apps",
+  "templateVariants": "TEMPLATE_VARIANTS.md"
 }
 ```
 
 ## General Rules
 
-1. **Use TypeScript** - All files must have proper types
-2. **Use Path Aliases** - Import with `@/` not `../../`
-3. **Follow Examples** - Check `examples/` folder first
-4. **Theme Support** - Always use `useThemeStore` for colors
-5. **Keep It Simple** - Don't over-engineer
+1. **Check Template Variant First** - Read `TEMPLATE_VARIANTS.md` to understand which variant fits your app
+2. **Use TypeScript** - All files must have proper types
+3. **Use Path Aliases** - Import with `@/` not `../../`
+4. **Follow Examples** - Check `examples/` folder first (see Examples Guide below)
+5. **Theme Support** - Always use `useThemeStore` for colors
+6. **Keep It Simple** - Don't over-engineer
+
+## 📁 Choosing the Right Examples
+
+Before generating code, determine which examples to follow:
+
+### For Complete App Architecture
+Check `examples/apps/` to understand overall structure:
+- **`todo-offline/`** - No auth, no API (offline storage)
+- **`news-no-auth/`** - No auth, with API (public content)
+- **`dashboard-with-auth/`** - With auth, with API (protected content)
+
+### For Screen Patterns
+Check `examples/screens/` for specific screen types:
+- **`list-screen-no-auth.example.tsx`** - Public list (news, products, recipes)
+- **`list-screen-with-auth.example.tsx`** - Protected list (tasks, orders, notifications)
+- **`form-screen.example.tsx`** - Create/edit forms with validation
+- **`detail-screen.example.tsx`** - Detail page with actions
+
+### For Service Patterns
+Check `examples/services/` for data layer:
+- **`service-with-mock.example.ts`** - API with mock support (dev/prod switch)
+- **`service-without-mock.example.ts`** - Direct API only (third-party APIs)
+- **`offline-service.example.ts`** - Offline storage with AsyncStorage
 
 ## Screens (app/)
 
@@ -402,6 +436,10 @@ if (loading) {
 
 Before generating code:
 
+- [ ] **Check TEMPLATE_VARIANTS.md** - Understand which template variant to use
+- [ ] **Check examples/apps/** - See complete app example for your use case
+- [ ] **Check examples/screens/** - Use appropriate screen pattern (auth/no-auth)
+- [ ] **Check examples/services/** - Use appropriate service pattern (mock/no-mock/offline)
 - [ ] Check `examples/` folder for similar pattern
 - [ ] Use TypeScript with proper types
 - [ ] Use path aliases (`@/`)
@@ -426,9 +464,28 @@ Before generating code:
 
 Always refer to `examples/` folder for complete, working patterns:
 
-- `examples/screen.example.tsx`
-- `examples/component.example.tsx`
-- `examples/hook.example.ts`
-- `examples/service.example.ts`
+### Complete App Examples
+- `examples/apps/todo-offline/README.md` - Offline todo app
+- `examples/apps/news-no-auth/README.md` - Public news app
+- `examples/apps/dashboard-with-auth/README.md` - Protected dashboard
+
+### Screen Examples
+- `examples/screens/list-screen-no-auth.example.tsx` - Public list
+- `examples/screens/list-screen-with-auth.example.tsx` - Protected list
+- `examples/screens/form-screen.example.tsx` - Create/edit forms
+- `examples/screens/detail-screen.example.tsx` - Detail page
+
+### Service Examples
+- `examples/services/service-with-mock.example.ts` - API with mock
+- `examples/services/service-without-mock.example.ts` - Direct API
+- `examples/services/offline-service.example.ts` - Offline storage
+
+### Legacy Examples (Generic Patterns)
+- `examples/screen.example.tsx` - Generic list screen
+- `examples/component.example.tsx` - Generic component
+- `examples/hook.example.ts` - Generic hook
+- `examples/service.example.ts` - Generic service
+
+**Follow these patterns exactly - they work!**
 
-Follow these patterns exactly - they work!
+Read `TEMPLATE_VARIANTS.md` to choose the right template variant for your app.

package/templates/agent-generator/README.md

@@ -17,12 +17,13 @@ This template is designed to work seamlessly with AI agents for rapid developmen
 
 **First time in this project?** Read these files in order:
 
-1. **[AI_GUIDE.md](AI_GUIDE.md)** ⭐ **START HERE** - Complete AI onboarding guide
-2. **[ai-context.json](ai-context.json)** - Path mappings
-3. **[GENERATE_RULES.md](GENERATE_RULES.md)** - Code generation patterns
-4. **[CONVENTIONS.md](CONVENTIONS.md)** - Coding standards
-5. **[SERVER_GUIDE.md](SERVER_GUIDE.md)** - Mock API & dummy data guide
-6. **[examples/](examples/)** - Actual working code to copy
+1. **[TEMPLATE_VARIANTS.md](TEMPLATE_VARIANTS.md)** ⭐ **START HERE** - Choose template variant
+2. **[AI_GUIDE.md](AI_GUIDE.md)** - Complete AI onboarding guide
+3. **[ai-context.json](ai-context.json)** - Path mappings
+4. **[GENERATE_RULES.md](GENERATE_RULES.md)** - Code generation patterns
+5. **[CONVENTIONS.md](CONVENTIONS.md)** - Coding standards
+6. **[SERVER_GUIDE.md](SERVER_GUIDE.md)** - Mock API & dummy data guide
+7. **[examples/](examples/)** - Actual working code to copy
 
 ## Quick Start
 
@@ -43,6 +44,19 @@ npm start
 │   └── _layout.tsx         # Root layout
 │
 ├── examples                # Code examples for AI
+│   ├── screens/            # Screen examples for different scenarios
+│   │   ├── list-screen-no-auth.example.tsx      # Public content list
+│   │   ├── list-screen-with-auth.example.tsx    # Protected content list
+│   │   ├── form-screen.example.tsx              # Create/edit form
+│   │   └── detail-screen.example.tsx            # Detail page
+│   ├── services/           # Service examples for different setups
+│   │   ├── service-with-mock.example.ts         # API with mock support
+│   │   ├── service-without-mock.example.ts      # Direct API only
+│   │   └── offline-service.example.ts           # Offline storage
+│   ├── apps/               # Complete mini app examples
+│   │   ├── todo-offline/                        # Offline todo app
+│   │   ├── news-no-auth/                        # Public news app
+│   │   └── dashboard-with-auth/                 # Protected dashboard
 │   ├── component.example.tsx  # Component pattern
 │   ├── hook.example.ts        # Custom hook pattern
 │   ├── screen.example.tsx     # Screen pattern
@@ -109,10 +123,27 @@ The `ai-context.json` tells AI where to generate code:
 
 ### Code Examples
 
-Check `examples/` folder for patterns:
+Check `examples/` folder for comprehensive patterns:
 
-- **`screen.example.tsx`** - List screen with loading/error states
-- **`component.example.tsx`** - Reusable component with variants
+**Screen Patterns:**
+- **`screens/list-screen-no-auth.example.tsx`** - Public content list (no auth)
+- **`screens/list-screen-with-auth.example.tsx`** - Protected list (with auth)
+- **`screens/form-screen.example.tsx`** - Create/edit forms with validation
+- **`screens/detail-screen.example.tsx`** - Detail page with actions
+
+**Service Patterns:**
+- **`services/service-with-mock.example.ts`** - API service with mock support
+- **`services/service-without-mock.example.ts`** - Direct API connection
+- **`services/offline-service.example.ts`** - Offline storage (AsyncStorage)
+
+**Complete App Examples:**
+- **`apps/todo-offline/`** - Offline todo app (no auth, no API)
+- **`apps/news-no-auth/`** - Public news app (no auth, with API)
+- **`apps/dashboard-with-auth/`** - Protected dashboard (with auth, with API)
+
+**Legacy Examples:**
+- **`screen.example.tsx`** - Generic list screen
+- **`component.example.tsx`** - Reusable component
 - **`hook.example.ts`** - Data fetching hook
 - **`service.example.ts`** - CRUD API service
 
@@ -120,14 +151,34 @@ Check `examples/` folder for patterns:
 
 Example prompts for AI:
 
+**For Public Content App:**
+```
+Build a news app following examples/apps/news-no-auth/
+Use the list-screen-no-auth pattern for the main screen
+Use service-with-mock pattern for the article service
 ```
-Create a news list screen following examples/screen.example.tsx
 
-Generate a ProductCard component like examples/component.example.tsx
+**For Offline App:**
+```
+Create a todo app following examples/apps/todo-offline/
+Use offline-service pattern for data storage
+No auth or API needed
+```
 
-Build a useProducts hook similar to examples/hook.example.ts
+**For Protected Dashboard:**
+```
+Build a dashboard following examples/apps/dashboard-with-auth/
+Use list-screen-with-auth for the main screen
+Keep authentication as-is
+Use service-with-mock for data
+```
 
-Create a product service following examples/service.example.ts
+**Individual Components:**
+```
+Create a product list screen following examples/screens/list-screen-no-auth.example.tsx
+Generate a create product form using examples/screens/form-screen.example.tsx
+Build a product detail page using examples/screens/detail-screen.example.tsx
+Create a product service using examples/services/service-with-mock.example.ts
 ```
 
 ## State Management