unictive-angular 1.0.12 → 1.0.14

package/README.md

@@ -20,6 +20,8 @@
 
 ---
 
+
+
 ## 📦 Instalasi
 
 ### Global Install via NPM
@@ -74,6 +76,29 @@ src/app/
 
 ---
 
+> ⚠️ **Perhatian:**  
+> Proyek yang dihasilkan secara default menggunakan **zoneless Angular**. Pastikan untuk menyesuaikan kode Anda jika membutuhkan fitur yang bergantung pada `zone.js`.
+
+## ➕ Cara Menambahkan `zone.js`
+
+Jika Anda membutuhkan fitur Angular yang bergantung pada `zone.js`, Anda dapat menambahkannya secara manual:
+
+1. Install `zone.js`:
+  ```bash
+  npm install zone.js
+  ```
+
+2. Import `zone.js` di file utama aplikasi Anda (biasanya `src/polyfills.ts`):
+  ```typescript
+  import 'zone.js';
+  ```
+
+3. Pastikan konfigurasi Angular Anda tidak menggunakan mode zoneless.
+
+Setelah langkah di atas, fitur Angular yang memerlukan `zone.js` akan berfungsi seperti biasa.
+
+---
+
 ## 🛠 Script tambahan di `package.json`
 
 ```json
@@ -91,11 +116,11 @@ src/app/
 
 - **Node.js** (>= 16)
 - **npm** (>= 8)
-- **Angular CLI** (jika belum ada, akan otomatis diinstall)
+- **Angular CLI** (>=18 jika belum ada, akan otomatis diinstall)
 
 ---
 
-## 💡 Jalankan Proyek
+## 💡 Jalankan Project yang sudah di generate
 
 ```bash
 cd nama-project && ng serve

package/bin/index.js

@@ -12,12 +12,14 @@ const fs = require("fs");
 const os = require("os");
 const path = require("path");
 const { show_status, run_with_spinner } = require('./utils/showStatus');
-const { setupAssets } = require('./utils/setupAssets');
+const {  refactorAngularJson } = require('./utils/refactorAngularJson');
 const { create_project } = require('./utils/createProject');
-const { create_structure } = require('./utils/createStructure');
-const { update_package_json } = require('./utils/updatePackageJson');
+const {  copy_template } = require('./utils/createStructure');
+// const { update_package_json } = require('./utils/updatePackageJson');
 const updateNotifier = require('update-notifier');
 const chalk = require('chalk');
+require("dotenv").config();
+
 const { login, logout } = require("./utils/auth");
 
 
@@ -34,25 +36,26 @@ if (process.argv.includes("-v") || process.argv.includes("--version")) {
 
 
 // ===================== Notifikasi Update =====================
-// const notifier = updateNotifier({ pkg, updateCheckInterval: 1000 * 60 * 60 * 6 });
-const notifier = updateNotifier({ pkg, updateCheckInterval: 0 });
+const notifier = updateNotifier({ pkg, updateCheckInterval: 1000 * 60 * 60 * 24 });
+// const notifier = updateNotifier({ pkg, updateCheckInterval: 0 });
 
 if (notifier.update) {
-  console.log(`
-${chalk.yellow('⚠ Update tersedia untuk unictive-angular CLI ini!')}
-${chalk.gray('Versi lokal ')} : ${chalk.red(notifier.update.current)}
-${chalk.gray('Versi terbaru')} : ${chalk.green(notifier.update.latest)}
-
-${chalk.gray('Jalankan perintah berikut untuk update:')}
-${chalk.cyan(`npm i -g ${pkg.name}`)}
-
-${chalk.gray('Catatan: Versi terbaru ini mungkin berisi fitur tambahan dan perbaikan bug.')}
-  `);
+  console.log(chalk.yellow(`
+┌───────────────────────────────────────────────────────────────┐
+│ ⚠  Update tersedia untuk unictive-angular CLI ini!            │
+├───────────────────────────────────────────────────────────────┤
+│ Versi lokal   : ${chalk.red(notifier.update.current)}                                        │
+│ Versi terbaru : ${chalk.green(notifier.update.latest)}                                        │
+│                                                               │
+│ Jalankan perintah berikut untuk update:                       │
+│   ${chalk.cyan(`npm i -g ${pkg.name}`)}                                   │
+│                                                               │
+│ Catatan: Versi terbaru mungkin berisi fitur baru              │
+│         dan perbaikan bug.                                    │
+└───────────────────────────────────────────────────────────────┘
+  `));
 }
 
-// console.log(`${chalk.yellow('⚠ Update tersedia untuk unictive-angular CLI ini!')}
-// ${chalk.red(notifier.update)}
-// `);
 
 // ===================== Utility =====================
 const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
@@ -175,11 +178,12 @@ async function main() {
   const OS = check_os();
   await check_dependencies();
   const projectName = await create_project();
-  create_structure();
   await sleep(1000);
-  setupAssets();
+  copy_template();
+  await sleep(1000);
+  refactorAngularJson();
   await sleep(1000);
-  update_package_json();
+  // update_package_json();
   await run_with_spinner("npm install", "Menginstall dependencies...", "Dependencies berhasil diinstall!", "Gagal install dependencies");
   await sleep(1000);
   show_completion(projectName, OS);

package/bin/utils/auth.js

@@ -3,7 +3,6 @@ const path = require("path");
 const os = require("os");
 const readline = require("readline");
 process.env.DOTENV_CONFIG_SILENT = 'true';
-require("dotenv").config();
 
 // Lokasi file cache (disimpan di HOME user)
 const CACHE_FILE = path.join(os.homedir(), ".my-cli-auth");
@@ -69,7 +68,7 @@ async function login() {
     process.exit(1);
   }
 
-  const input = await askPassword("Masukkan password: ");
+  const input = await askPassword("Harap login terlebih dahulu. (Masukkan password): ");
   if (input !== correctPassword) {
     console.error("❌ Password salah. Akses ditolak!");
     process.exit(1);

package/bin/utils/createStructure.js

@@ -2,17 +2,46 @@ const fs = require('fs');
 const path = require('path');
 const { show_status } = require('./showStatus');
 
-const path_template = path.join(__dirname, "templates", "app");
+const path_template = path.join(__dirname, "resource");
+
+// Bisa, Anda dapat menambahkan nama file ke dalam array folders_to_copy.
+// Misal:
+const folders_to_copy = [
+  "src",
+  ".postcssrc.json",
+  "package.json",
+  "tailwind.config.js",
+  "tsconfig.json",
+];
 
 async function copy_template() {
- show_status("Menyalin folder app dari template ke src/app...", "info");
-
-  const srcFolder = path_template;
-  const destFolder = path.join(process.cwd(), "src", "app");
+show_status("Proses membuat file dari template...", "info");
+
+const destFolder = process.cwd();
+
+// Fungsi untuk copy dan replace folder/file
+function copyAndReplace(src, dest) {
+  if (fs.existsSync(dest)) {
+    fs.rmSync(dest, { recursive: true, force: true });
+  }
+  if (fs.lstatSync(src).isDirectory()) {
+    fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach((item) => {
+      copyAndReplace(path.join(src, item), path.join(dest, item));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
 
-  copyRecursiveSync(srcFolder, destFolder);
+folders_to_copy.forEach((folder) => {
+  const srcFolder = path.join(path_template, folder);
+  const targetFolder = path.join(destFolder, folder);
+  copyAndReplace(srcFolder, targetFolder);
+  // console.log(`Copied & replaced: ${folder}`);
+});
 
-  show_status("Folder src/app berhasil disalin!", "success");
+show_status("Folder dan file berhasil dibuat!", "success");
 }
 
 

package/bin/utils/{setupAssets.js → refactorAngularJson.js}

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const { show_status } = require('./showStatus');
 
-function setupAssets() {
+function refactorAngularJson() {
   show_status("Generate environment files...", "info");
   const angularJsonPath = path.join(process.cwd(), 'angular.json');
   const assetsPath = path.join(process.cwd(), 'src', 'assets');
@@ -14,19 +14,26 @@ function setupAssets() {
     process.exit(1);
   }
 
-  // 1. Update angular.json untuk menambahkan src/assets
+  // 1. Update angular.json untuk menambahkan src/assets && src/tailwind.css
   const angularJson = JSON.parse(fs.readFileSync(angularJsonPath, 'utf8'));
   const projectName = Object.keys(angularJson.projects)[0];
   const buildOptions = angularJson.projects[projectName].architect.build.options;
+  
 
   if (!buildOptions.assets.includes('src/assets')) {
     buildOptions.assets.push('src/assets');
     fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2));
     console.log('✔ Added "src/assets" to angular.json');
+
+     
   } else {
     console.log('ℹ "src/assets" already exists in angular.json');
   }
 
+   buildOptions.styles.push('src/tailwind.css');
+    fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2));
+    console.log('✔ Added "src/tailwind.css" to angular.json');
+
   // 2. Buat folder assets jika belum ada
   if (!fs.existsSync(assetsPath)) {
     fs.mkdirSync(assetsPath, { recursive: true });
@@ -98,6 +105,59 @@ function setupAssets() {
   });
 
   console.log('🎉 environments setup complete!');
+
+
+
+  // ------------------- Angular file replacements -------------------
+    if (!fs.existsSync(angularJsonPath)) {
+      show_status("⚠ angular.json tidak ditemukan! Lewati file replacement.", "warning");
+      return;
+    }
+
+
+  
+    const project = angularJson.projects[projectName];
+    const buildTarget = project.architect?.build || project.targets?.build;
+  
+    if (!buildTarget) {
+      show_status("⚠ Build target tidak ditemukan di angular.json!", "error");
+      return;
+    }
+  
+    const buildConfig = buildTarget.configurations || {};
+  
+    // ------------------- Tambahkan environment config -------------------
+    buildConfig["dev"] = {
+      fileReplacements: [
+        {
+          replace: "src/environments/environment.ts",
+          with: "src/environments/environment.dev.ts"
+        }
+      ]
+    };
+  
+    buildConfig["staging"] = {
+      fileReplacements: [
+        {
+          replace: "src/environments/environment.ts",
+          with: "src/environments/environment.staging.ts"
+        }
+      ]
+    };
+  
+    buildConfig["production"] = {
+      fileReplacements: [
+        {
+          replace: "src/environments/environment.ts",
+          with: "src/environments/environment.prod.ts"
+        }
+      ]
+    };
+  
+    buildTarget.configurations = buildConfig;
+  
+    fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2));
+    show_status("angular.json berhasil diperbarui dengan file replacement multi-env!", "success");
 }
 
-module.exports = { setupAssets };
+module.exports = { refactorAngularJson };

package/bin/utils/resource/.postcssrc.json

@@ -0,0 +1,12 @@
+{
+    "plugins": {
+      "@tailwindcss/postcss": {
+        "config": "./tailwind.config.js"
+  
+        
+      },
+      "autoprefixer": {}
+    }
+
+  }
+  

package/bin/utils/resource/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "boilerplate-angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test --watch=false",
+    "start:dev": "ng serve --configuration=dev --port 4200 --open",
+    "start:staging": "ng serve --configuration=staging --port 4200 --open",
+    "start:prod": "ng serve --configuration=production --port 4200 --open",
+    "build:dev": "ng build --configuration=dev",
+    "build:staging": "ng build --configuration=staging",
+    "build:prod": "ng build --configuration=production",
+    "lint": "ng lint"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@ngx-pwa/local-storage": "^20.0.0",
+    "postcss": "^8.5.6",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.0.3",
+    "@angular/cli": "^20.0.3",
+    "@angular/compiler-cli": "^20.0.0",
+    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@types/jasmine": "~5.1.0",
+    "autoprefixer": "^10.4.21",
+    "jasmine-core": "~5.7.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "tailwindcss": "^4.1.12",
+    "typescript": "~5.8.2"
+  }
+}

package/bin/utils/resource/src/app/MODULES/auth/README.md

@@ -0,0 +1,10 @@
+# AUTH
+
+Folder ini untuk layer **auth**.
+
+- **domain** → berisi entity, interface, dan aturan bisnis murni
+- **application** → berisi use case, service koordinasi domain
+- **infrastructure** → berisi API call, repository, integrasi eksternal
+- **presentation** → berisi komponen Angular, routing, dan UI
+
+> Bagian ini adalah bagian dari arsitektur **Clean Architecture** untuk fitur ini.

package/bin/utils/resource/src/app/MODULES/dashboard/README.md

@@ -0,0 +1,10 @@
+# DASHBOARD
+
+Folder ini untuk layer **dashboard**.
+
+- **domain** → berisi entity, interface, dan aturan bisnis murni
+- **application** → berisi use case, service koordinasi domain
+- **infrastructure** → berisi API call, repository, integrasi eksternal
+- **presentation** → berisi komponen Angular, routing, dan UI
+
+> Bagian ini adalah bagian dari arsitektur **Clean Architecture** untuk fitur ini.

package/bin/utils/resource/src/app/MODULES/home/README.md

@@ -0,0 +1,10 @@
+# HOME
+
+Folder ini untuk layer **home**.
+
+- **domain** → berisi entity, interface, dan aturan bisnis murni
+- **application** → berisi use case, service koordinasi domain
+- **infrastructure** → berisi API call, repository, integrasi eksternal
+- **presentation** → berisi komponen Angular, routing, dan UI
+
+> Bagian ini adalah bagian dari arsitektur **Clean Architecture** untuk fitur ini.

package/bin/utils/resource/src/app/app.config.ts

@@ -0,0 +1,20 @@
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { jwtInterceptor } from '@core/interceptors/jwt.interceptor';
+import { errorInterceptor } from '@core/interceptors/error.interceptor';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([jwtInterceptor, errorInterceptor])),
+  ],
+};