create-ern-boilerplate 0.0.2

package/README.md

@@ -0,0 +1,56 @@
+# 🚀 create-ern-boilerplate
+
+CLI untuk membuat proyek **React Native Expo** dengan cepat menggunakan berbagai template yang sudah disiapkan.
+
+---
+
+## 📦 Instalasi
+
+Kamu tidak perlu menginstall package ini secara global.  
+Cukup jalankan menggunakan **npx**:
+
+```bash
+npx create-ern-boilerplate
+
+
+
+🧠 Contoh Penggunaan
+🟢 1. Mode Interaktif (Default)
+npx create-ern-boilerplate
+
+
+Kamu akan ditanya:
+
+Nama project
+
+Deskripsi
+
+Template yang ingin digunakan
+
+Apakah ingin langsung install dependencies
+
+Contoh:
+
+? Nama project kamu: my-expo-app
+? Deskripsi singkat: Aplikasi keren dengan Expo
+? Pilih template: redux
+? Langsung install dependencies setelah membuat project? Yes
+
+🟡 2. Mode Cepat (Tanpa Prompt)
+
+Langsung buat project baru tanpa pertanyaan:
+
+npx create-ern-boilerplate my-app -y
+
+
+🔹 Otomatis pakai template default minimal
+🔹 Langsung install dependencies
+
+🔵 3. Mode Cepat + Custom Deskripsi + Template
+
+Kamu bisa langsung menentukan deskripsi dan template:
+
+npx create-ern-boilerplate my-app -y --desc "Boilerplate lengkap" --template default
+
+
+Hasilnya langsung generate project my-app pakai template redux, isi deskripsi, dan auto install dependencies.

package/create.js

@@ -0,0 +1,162 @@
+#!/usr/bin/env node
+
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import chalk from "chalk";
+import inquirer from "inquirer";
+import ora from "ora";
+import { execSync } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function main() {
+    console.log(chalk.bold.cyan("\n🚀 Create Expo React Native Boilerplate\n"));
+
+    // Ambil argumen CLI
+    const args = process.argv.slice(2);
+    const hasY = args.includes("-y") || args.includes("--yes");
+
+    // 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");
+
+    const descArg = descIndex !== -1 ? args[descIndex + 1] : "";
+    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 autoInstall = false;
+
+    // === Mode interaktif ===
+    if (!hasY) {
+        const answers = await inquirer.prompt([
+            {
+                name: "projectName",
+                message: "Nama project kamu:",
+                default: projectName || "my-expo-app",
+            },
+            {
+                name: "description",
+                message: "Deskripsi singkat:",
+                default: description,
+            },
+            {
+                type: "list",
+                name: "template",
+                message: "Pilih template:",
+                choices: await getTemplateChoices(),
+                default: templateName,
+            },
+            {
+                type: "confirm",
+                name: "autoInstall",
+                message: "Langsung install dependencies setelah membuat project?",
+                default: false,
+            },
+        ]);
+
+        projectName = answers.projectName;
+        description = answers.description;
+        templateName = answers.template;
+        autoInstall = answers.autoInstall;
+    } else {
+        // === Mode cepat (-y) ===
+        if (!projectName) {
+            console.log(chalk.red("❌ Kamu harus kasih nama project di mode -y"));
+            console.log(chalk.yellow("Contoh: npx create-ern-boilerplate my-app -y --desc 'My App' --template redux"));
+            process.exit(1);
+        }
+        autoInstall = true; // kalau -y, langsung install
+        console.log(chalk.green(`📦 Membuat proyek ${projectName}... (mode cepat)`));
+    }
+
+    const targetDir = path.resolve(process.cwd(), projectName);
+    const templateDir = path.resolve(__dirname, "templates", templateName);
+
+    if (!(await fs.pathExists(templateDir))) {
+        console.log(chalk.red(`❌ Template "${templateName}" tidak ditemukan.`));
+        process.exit(1);
+    }
+
+    if (fs.existsSync(targetDir)) {
+        console.log(chalk.red(`❌ Folder "${projectName}" sudah ada.`));
+        process.exit(1);
+    }
+
+    // === Copy template ===
+    const spinner = ora(`📁 Menyalin template "${templateName}"...`).start();
+
+    try {
+        await fs.copy(templateDir, targetDir);
+
+        // === Update package.json ===
+        const pkgPath = path.join(targetDir, "package.json");
+        if (fs.existsSync(pkgPath)) {
+            const pkg = await fs.readJson(pkgPath);
+            pkg.name = projectName;
+            pkg.description = description;
+            await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+        }
+
+        // === Update app.json ===
+        // === 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.bundleIdentifier = `com.${projectName.toLowerCase()}.app`;
+            appJson.expo.android.package = `com.${projectName.toLowerCase()}.app`;
+            appJson.expo.scheme = projectName.toLowerCase();
+            appJson.expo.extra.eas.projectId = ""; // reset biar gak nabrak project kamu
+            await fs.writeJson(appJsonPath, appJson, { spaces: 2 });
+        }
+
+        spinner.succeed(`✅ Template "${templateName}" berhasil dibuat!`);
+    } catch (err) {
+        spinner.fail("❌ Terjadi kesalahan saat membuat project.");
+        console.error(err);
+        process.exit(1);
+    }
+
+    // === Auto install kalau dipilih ===
+    if (autoInstall) {
+        const installSpinner = ora("📦 Menginstall dependencies...").start();
+        try {
+            execSync("npm install", { cwd: targetDir, stdio: "inherit" });
+            installSpinner.succeed("✅ Dependencies berhasil diinstall!");
+        } catch (err) {
+            installSpinner.fail("❌ Gagal menginstall dependencies.");
+            console.error(err);
+        }
+    }
+
+    console.log(`
+${chalk.green("🎉 Selesai!")}  
+Langkah selanjutnya:
+  ${chalk.cyan(`cd ${projectName}`)}
+  ${autoInstall ? chalk.dim("(dependencies sudah terinstall ✅)") : chalk.cyan("npm install")}
+  ${chalk.cyan("npm run start")}
+
+Happy coding! 💻
+`);
+}
+
+// === Helper untuk menampilkan daftar template ===
+async function getTemplateChoices() {
+    const templatesDir = path.join(__dirname, "templates");
+    const folders = await fs.readdir(templatesDir);
+    return folders.filter((f) =>
+        fs.statSync(path.join(templatesDir, f)).isDirectory()
+    );
+}
+
+main().catch((err) => {
+    console.error(chalk.red("Terjadi kesalahan:"), err);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "create-ern-boilerplate",
+  "version": "0.0.2",
+  "description": "Expo React Native boilerplate generator",
+  "bin": {
+    "create-ern-boilerplate": "./create.js",
+    "ern-boilerplate": "./create.js"
+  },
+  "type": "module",
+  "license": "MIT",
+  "author": {
+    "name": "defazr",
+    "email": "ulfar.far@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/"
+  },
+  "bugs": {
+    "url": "https://github.com/"
+  },
+  "homepage": "https://github.com/",
+  "keywords": [
+    "expo",
+    "react-native",
+    "boilerplate",
+    "template",
+    "create"
+  ],
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.12",
+    "ora": "^8.0.1"
+  }
+}

package/templates/default/README.md

@@ -0,0 +1,278 @@
+# Expo React Native Boilerplate
+
+A comprehensive boilerplate for building React Native applications with Expo, featuring authentication, theming, and a clean architecture.
+
+## Features
+
+- ✅ **Expo Router** - File-based routing
+- ✅ **TypeScript** - Type-safe development
+- ✅ **NativeWind (Tailwind CSS)** - Utility-first styling
+- ✅ **Authentication Context** - Global auth state management
+- ✅ **Theme Support** - Light/Dark mode with system preference
+- ✅ **Mock API Server** - JSON Server for development
+- ✅ **Secure Storage** - Expo SecureStore for sensitive data
+- ✅ **Path Aliases** - Clean imports with `@` prefix
+- ✅ **Form Validation** - Built-in validation utilities
+- ✅ **Reusable Components** - Button, Input, Card, Loading, etc.
+
+## Project Structure
+
+```
+.
+├── app
+│   ├── (admin)              # Halaman & route khusus admin
+│   ├── (auth)               # Halaman auth (login, register, dsb)
+│   ├── (protected)          # Halaman yang membutuhkan autentikasi
+│   └── _layout.tsx          # Root layout untuk Expo Router
+│
+├── server
+│   ├── db.json              # Mock data untuk JSON Server
+│   ├── middleware.js        # Custom middleware untuk API
+│   └── routes.json          # Routing konfigurasi JSON Server
+│
+├── src
+│   ├── assets               # Gambar, font, dan aset statis
+│   ├── components           # Komponen UI reusable
+│   ├── contexts             # Context API (Auth, Theme, dsb)
+│   ├── hooks                # Custom React hooks
+│   ├── services             # API service (Axios, interceptors, dll)
+│   ├── theme                # Konfigurasi tema (warna, dark mode)
+│   ├── types                # TypeScript type definitions
+│   └── utils                # Helper functions & constants
+│
+├── app.json                 # Konfigurasi Expo project
+├── babel.config.js          # Konfigurasi Babel
+├── expo-env.d.ts            # Type definitions untuk Expo environment
+├── global.css               # Global style untuk Tailwind / NativeWind
+├── index.ts                 # Entry point utama aplikasi
+├── LICENSE                  # Lisensi project
+├── metro.config.js          # Konfigurasi Metro bundler
+├── nativewind-env.d.ts      # Type support untuk NativeWind
+├── package.json             # Dependency & script project
+├── package-lock.json        # Lock file npm
+├── README.md                # Dokumentasi project
+├── structure.txt            # Struktur folder (auto-generated)
+├── tailwind.config.js       # Konfigurasi TailwindCSS
+└── tsconfig.json            # Konfigurasi TypeScript
+
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- npm or yarn
+- Expo CLI
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone <your-repo-url>
+cd expo-boilerplate
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start the development server:
+```bash
+npm run dev
+```
+
+This will start both the Expo development server and the mock API server.
+
+### Available Scripts
+
+- `npm start` - Start Expo development server
+- `npm run android` - Run on Android
+- `npm run ios` - Run on iOS
+- `npm run web` - Run on web
+- `npm run server` - Start mock API server
+- `npm run dev` - Start both Expo and API server
+- `npm run lint` - Run ESLint
+- `npm run type-check` - Run TypeScript type checking
+
+## Configuration
+
+### API Configuration
+
+Edit `src/utils/constants.ts` to configure your API endpoints:
+
+```typescript
+export const API_CONFIG = {
+  BASE_URL: __DEV__ ? 'http://localhost:3001' : 'https://api.yourapp.com',
+  TIMEOUT: 10000,
+};
+```
+
+### Theme Configuration
+
+Customize colors in `src/theme/colors.ts`:
+
+```typescript
+export const colors = {
+  light: {
+    primary: '#3b82f6',
+    // ... other colors
+  },
+  dark: {
+    primary: '#3b82f6',
+    // ... other colors
+  },
+};
+```
+
+## Authentication
+
+The boilerplate includes a complete authentication flow:
+
+### Default Credentials
+
+- **Admin**: admin@example.com / admin123
+- **User**: user@example.com / user123
+
+### Using Authentication
+
+```typescript
+import { useAuth } from '@hooks/useAuth';
+
+function MyComponent() {
+  const { user, login, logout, isAuthenticated } = useAuth();
+  
+  // Use authentication methods
+}
+```
+
+## Theming
+
+Switch between light and dark themes:
+
+```typescript
+import { useTheme } from '@hooks/useTheme';
+
+function MyComponent() {
+  const { theme, colors, setThemeMode } = useTheme();
+  
+  // theme: 'light' | 'dark'
+  // colors: current theme colors
+  // setThemeMode: 'light' | 'dark' | 'auto'
+}
+```
+
+## API Services
+
+### Making API Calls
+
+```typescript
+import { newsService } from '@services/newsService';
+
+// Get all news
+const news = await newsService.getNews({ limit: 10 });
+
+// Get single news item
+const newsItem = await newsService.getNewsById('1');
+
+// Create news
+const newNews = await newsService.createNews({
+  title: 'New Article',
+  content: 'Content here',
+  // ...
+});
+```
+
+## Custom Hooks
+
+### useAuth
+
+Access authentication state and methods.
+
+### useTheme
+
+Access theme configuration and toggle themes.
+
+## Components
+
+### Button
+
+```typescript
+<Button
+  title="Click Me"
+  variant="primary"
+  size="md"
+  onPress={() => {}}
+  loading={false}
+  fullWidth
+/>
+```
+
+### Input
+
+```typescript
+<Input
+  label="Email"
+  placeholder="Enter email"
+  value={email}
+  onChangeText={setEmail}
+  error={emailError}
+  secureTextEntry
+/>
+```
+
+### Card
+
+```typescript
+<Card className="mb-4">
+  <Text>Card content</Text>
+</Card>
+```
+
+### Loading
+
+```typescript
+<Loading text="Loading..." fullScreen />
+```
+
+## Path Aliases
+
+Use clean imports with configured path aliases:
+
+```typescript
+import { Button } from '@components/common/Button';
+import { useAuth } from '@hooks/useAuth';
+import { newsService } from '@services/newsService';
+```
+
+## Deployment
+
+### Building for Production
+
+```bash
+# For Android
+eas build --platform android
+
+# For iOS
+eas build --platform ios
+
+# For both
+eas build --platform all
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT License - feel free to use this boilerplate for your projects!
+
+## Support
+
+For issues and questions, please open an issue on GitHub.

package/templates/default/app.json

@@ -0,0 +1,58 @@
+{
+  "expo": {
+    "name": "APP_NAME", 
+    "slug": "APP_SLUG",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./src/assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./src/assets/images/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.yourname.APP_SLUG"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./src/assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.yourname.APP_SLUG",
+      "versionCode": 1
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./src/assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-secure-store",
+        {
+          "requireFullDiskAccess": false
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    },
+    "extra": {
+      "eas": {
+        "projectId": ""
+      }
+    },
+    "updates": {
+      "enabled": true,
+      "checkAutomatically": "ON_LOAD"
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
+    }
+  }
+}

package/templates/default/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "expo-boilerplate",
+  "version": "1.0.0",
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start --clear",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "server": "json-server --watch server/db.json --host 10.1.59.172 --port 3001 --middlewares server/middleware.js --routes server/routes.json",
+    "dev": "concurrently -n expo,server -c blue,green \"expo start --no-interactive --clear\" \"npm run server\"",
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "babel-preset-expo": "^54.0.5",
+    "expo": "~54.0.0",
+    "expo-constants": "~18.0.9",
+    "expo-linking": "~8.0.8",
+    "expo-router": "^6.0.12",
+    "expo-secure-store": "~15.0.7",
+    "expo-status-bar": "~3.0.8",
+    "lucide-react-native": "^0.546.0",
+    "nativewind": "^4.0.1",
+    "react": "19.1.0",
+    "react-native": "^0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-worklets": "0.5.1",
+    "react-native-svg": "15.12.1",
+    "expo-linear-gradient": "~15.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@types/react": "~19.1.10",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "concurrently": "^8.2.0",
+    "eslint": "^9.12.0",
+    "eslint-config-prettier": "^9.1.0",
+    "json-server": "^0.17.4",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.13",
+    "typescript": "~5.9.2"
+  },
+  "private": true,
+  "expo": {
+    "install": {
+      "exclude": ["react", "expo", "expo-constants", "react-native"]
+    }
+  }
+}