@devmed555/angular-clean-architecture-cli 0.0.2 → 0.0.3

package/src/generators/core/files/navbar/__name__.component.html.template

@@ -0,0 +1,45 @@
+<mat-toolbar color="primary" class="navbar">
+  <div class="navbar-left">
+    <button mat-icon-button (click)="onToggleSidenav()" aria-label="Toggle sidenav">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <span class="brand-title">Clean Architecture</span>
+  </div>
+
+  <span class="spacer"></span>
+
+  <div class="navbar-right">
+    @if (authService.isAuthenticated()) {
+      <!-- Authenticated: Show user info and logout -->
+      @if (authService.currentUser(); as user) {
+        <div class="user-profile">
+          <div class="user-info">
+            <span class="user-label">Welcome</span>
+            <span class="user-email">{{ user.name || user.email }}</span>
+          </div>
+          <div class="user-avatar" [title]="user.email">
+            {{ (user.name || user.email).charAt(0).toUpperCase() }}
+          </div>
+        </div>
+      }
+      <button mat-icon-button (click)="onLogout()" matTooltip="Logout" class="logout-btn">
+        <mat-icon>logout</mat-icon>
+      </button>
+    } @else {
+      <!-- Not authenticated: Show login/signup buttons -->
+      <a mat-button routerLink="/login" class="auth-btn">
+        <mat-icon>login</mat-icon>
+        <span>Login</span>
+      </a>
+      <a mat-raised-button color="accent" routerLink="/signup" class="auth-btn signup-btn">
+        <mat-icon>person_add</mat-icon>
+        <span>Sign Up</span>
+      </a>
+    }
+
+    <div class="divider"></div>
+    
+    <app-theme-selector />
+    <app-language-selector />
+  </div>
+</mat-toolbar>

package/src/generators/core/files/navbar/__name__.component.scss.template

@@ -0,0 +1,134 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  // Premium Gradient Background
+  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  position: relative;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.brand-title {
+  font-weight: 700;
+  font-size: 1.25rem;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+// Auth buttons
+.auth-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: white !important;
+  
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+  
+  @media (max-width: 600px) {
+    span {
+      display: none;
+    }
+  }
+}
+
+.signup-btn {
+  background: rgba(255, 255, 255, 0.2) !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.3) !important;
+  }
+}
+
+.logout-btn {
+  color: white !important;
+  opacity: 0.8;
+  
+  &:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+  cursor: default;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  line-height: 1.2;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+}
+
+.user-label {
+  font-size: 0.65rem;
+  opacity: 0.9;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.user-email {
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--color-bg);
+  color: var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1.1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.divider {
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
+}

package/src/generators/core/files/navbar/__name__.component.ts.template

@@ -0,0 +1,38 @@
+import { Component, inject, output, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { LanguageSelectorComponent } from '../language-selector/language-selector.component';
+import { ThemeSelectorComponent } from '../theme-selector/theme-selector.component';
+import { AuthService } from '../auth/auth.service';
+
+@Component({
+  selector: 'app-navbar',
+  imports: [
+    RouterLink,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    LanguageSelectorComponent,
+    ThemeSelectorComponent,
+  ],
+  templateUrl: './<%= name %>.component.html',
+  styleUrls: ['./<%= name %>.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= pascalName %>Component {
+  protected readonly authService = inject(AuthService);
+  
+  readonly toggleSidenav = output<void>();
+
+  onToggleSidenav(): void {
+    this.toggleSidenav.emit();
+  }
+
+  onLogout(): void {
+    this.authService.logout();
+  }
+}

package/src/generators/core/files/service/__name__.service.ts.template

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class <%= pascalName %>Service {
+  private prefix = '[<%= pascalName %>]';
+
+  constructor() {}
+
+  log(message: any, ...args: any[]) {
+    console.log(`${this.prefix} ${message}`, ...args);
+  }
+
+  error(message: any, ...args: any[]) {
+    console.error(`${this.prefix} ${message}`, ...args);
+  }
+
+  warn(message: any, ...args: any[]) {
+    console.warn(`${this.prefix} ${message}`, ...args);
+  }
+
+  info(message: any, ...args: any[]) {
+    console.info(`${this.prefix} ${message}`, ...args);
+  }
+}

package/src/generators/core/files/theme-selector/theme-selector.component.ts.template

@@ -0,0 +1,49 @@
+import { Component, inject, ChangeDetectionStrategy, signal, effect } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+export type Theme = 'light' | 'dark';
+
+@Component({
+  selector: 'app-theme-selector',
+  imports: [MatIconModule, MatButtonModule, MatTooltipModule],
+  template: `
+    <button
+      mat-icon-button
+      [matTooltip]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+      (click)="toggleTheme()">
+      <mat-icon>{{ isDark() ? 'light_mode' : 'dark_mode' }}</mat-icon>
+    </button>
+  `,
+  styles: `
+    button {
+      color: inherit;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ThemeSelectorComponent {
+  readonly isDark = signal(this.getInitialTheme() === 'dark');
+
+  constructor() {
+    effect(() => {
+      this.applyTheme(this.isDark() ? 'dark' : 'light');
+    });
+  }
+
+  toggleTheme(): void {
+    this.isDark.update(dark => !dark);
+  }
+
+  private getInitialTheme(): Theme {
+    const stored = localStorage.getItem('theme') as Theme;
+    if (stored) return stored;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  private applyTheme(theme: Theme): void {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }
+}

package/src/generators/core/files/translate/translate.pipe.ts.template

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { TranslateService } from './translate.service';
+
+@Pipe({
+  name: 'translate',
+  standalone: true,
+  pure: false
+})
+export class TranslatePipe implements PipeTransform {
+  private translateService = inject(TranslateService);
+
+  transform(value: string): string {
+    return this.translateService.get(value);
+  }
+}

package/src/generators/core/files/translate/translate.service.ts.template

@@ -0,0 +1,24 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslateService {
+  public currentLang = signal('en');
+  private translations: Record<string, any> = {};
+
+  constructor() {}
+
+  setLanguage(lang: string) {
+    this.currentLang.set(lang);
+    // Here you would typically load the translation file for the language
+  }
+
+  get(key: string): string {
+    return this.translations[key] || key;
+  }
+
+  instant(key: string): string {
+    return this.get(key);
+  }
+}

package/src/generators/core/generator.d.ts

@@ -0,0 +1,7 @@
+import { Tree } from '@nx/devkit';
+export declare function coreGenerator(tree: Tree, options: CoreGeneratorSchema): Promise<void>;
+export default coreGenerator;
+export interface CoreGeneratorSchema {
+    name?: string;
+    type: 'all' | 'auth' | 'guard' | 'interceptor' | 'service' | 'translate' | 'language-selector' | 'theme-selector' | 'menu' | 'navbar';
+}

package/src/generators/core/generator.js

@@ -0,0 +1,49 @@
+import { formatFiles, generateFiles, joinPathFragments, } from '@nx/devkit';
+import { toPascalCase, toCamelCase } from '../../utils/string-utils';
+export async function coreGenerator(tree, options) {
+    // Default to 'all' if no type specified
+    if (!options.type) {
+        options.type = 'all';
+    }
+    if (options.type === 'all') {
+        const coreTypes = [
+            'navbar',
+            'menu',
+            'theme-selector',
+            'language-selector',
+            'translate',
+            'auth',
+        ];
+        console.log(`\n🚀 Generating ALL core assets: ${coreTypes.join(', ')}...`);
+        for (const type of coreTypes) {
+            // Use provided name or default to the type name (e.g. 'navbar')
+            const name = options.name || type;
+            await coreGenerator(tree, { ...options, type: type, name });
+        }
+        return;
+    }
+    // Ensure name is present for specific types (default to type name if missing)
+    if (!options.name) {
+        options.name = options.type;
+    }
+    const targetPath = options.type === 'auth' ||
+        options.type === 'translate' ||
+        options.type === 'language-selector' ||
+        options.type === 'theme-selector' ||
+        options.type === 'menu' ||
+        options.type === 'navbar'
+        ? joinPathFragments('apps/sandbox/src/app/core', options.type)
+        : joinPathFragments('apps/sandbox/src/app/core', options.type, options.name);
+    const pascalName = toPascalCase(options.name);
+    const camelName = toCamelCase(options.name);
+    generateFiles(tree, joinPathFragments(__dirname, 'files', options.type), targetPath, {
+        ...options,
+        pascalName,
+        camelName,
+        tmpl: '',
+    });
+    await formatFiles(tree);
+    console.log(`✓ Generated core ${options.type} "${options.name}" in ${targetPath}`);
+}
+export default coreGenerator;
+//# sourceMappingURL=generator.js.map

package/src/generators/core/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../apps/cli/src/generators/core/generator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,GAElB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,IAAU,EAAE,OAA4B;IAC1E,wCAAwC;IACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QAC3B,MAAM,SAAS,GAAG;YAChB,QAAQ;YACR,MAAM;YACN,gBAAgB;YAChB,mBAAmB;YACnB,WAAW;YACX,MAAM;SACP,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,oCAAoC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE3E,KAAK,MAAM,IAAI,IAAI,SAAS,EAAE,CAAC;YAC7B,gEAAgE;YAChE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC;YAClC,MAAM,aAAa,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,IAAW,EAAE,IAAI,EAAE,CAAC,CAAC;QACrE,CAAC;QACD,OAAO;IACT,CAAC;IAED,8EAA8E;IAC9E,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,MAAM,UAAU,GACd,OAAO,CAAC,IAAI,KAAK,MAAM;QACvB,OAAO,CAAC,IAAI,KAAK,WAAW;QAC5B,OAAO,CAAC,IAAI,KAAK,mBAAmB;QACpC,OAAO,CAAC,IAAI,KAAK,gBAAgB;QACjC,OAAO,CAAC,IAAI,KAAK,MAAM;QACvB,OAAO,CAAC,IAAI,KAAK,QAAQ;QACvB,CAAC,CAAC,iBAAiB,CAAC,2BAA2B,EAAE,OAAO,CAAC,IAAI,CAAC;QAC9D,CAAC,CAAC,iBAAiB,CACf,2BAA2B,EAC3B,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,CACb,CAAC;IAER,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,IAAK,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,IAAK,CAAC,CAAC;IAE7C,aAAa,CACX,IAAI,EACJ,iBAAiB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,EACnD,UAAU,EACV;QACE,GAAG,OAAO;QACV,UAAU;QACV,SAAS;QACT,IAAI,EAAE,EAAE;KACT,CACF,CAAC;IAEF,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;IAExB,OAAO,CAAC,GAAG,CACT,oBAAoB,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,QAAQ,UAAU,EAAE,CACtE,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}

package/src/generators/core/schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "CleanCoreGenerator",
+  "title": "Clean Core Generator",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Name of the core asset",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "type": {
+      "type": "string",
+      "description": "Type of core asset (defaults to 'all' if not specified)",
+      "enum": [
+        "all",
+        "auth",
+        "guard",
+        "interceptor",
+        "service",
+        "translate",
+        "language-selector",
+        "theme-selector",
+        "menu",
+        "navbar"
+      ],
+      "default": "all"
+    }
+  },
+  "required": []
+}

package/src/generators/feature/blueprint.schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Clean Feature Blueprint",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the feature (e.g., product, user-profile)"
+    },
+    "models": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": { "type": "string" },
+          "attributes": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": { "type": "string" },
+                "type": { "type": "string" },
+                "required": { "type": "boolean", "default": true }
+              },
+              "required": ["name", "type"]
+            }
+          }
+        },
+        "required": ["name"]
+      }
+    }
+  },
+  "required": ["name"]
+}

package/src/generators/feature/files/application/store.ts.template

@@ -0,0 +1,135 @@
+import { signalStore, withState, withMethods, withComputed, patchState } from '@ngrx/signals';
+import { computed, inject } from '@angular/core';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { pipe, tap, switchMap, catchError, of } from 'rxjs';
+import { tapResponse } from '@ngrx/operators';
+import { <%= pascalName %>Service } from '../infrastructure/service';
+import { <%= pascalName %> } from '../domain/model';
+
+interface <%= pascalName %>State {
+  items: <%= pascalName %>[];
+  loading: boolean;
+  error: string | null;
+  filter: string;
+  sortField: keyof <%= pascalName %>;
+  sortDirection: 'asc' | 'desc';
+}
+
+export const <%= pascalName %>Store = signalStore(
+  { providedIn: 'root' },
+  withState<<%= pascalName %>State>({
+    items: [],
+    loading: false,
+    error: null,
+    filter: '',
+    sortField: 'createdAt',
+    sortDirection: 'desc'
+  }),
+  withComputed((state) => ({
+    filteredAndSortedItems: computed(() => {
+      let items = [...state.items()];
+      
+      // Apply filter
+      const filter = state.filter().toLowerCase();
+      if (filter) {
+        items = items.filter(item =>
+          Object.values(item).some(val =>
+            String(val).toLowerCase().includes(filter)
+          )
+        );
+      }
+      
+      // Apply sort
+      const field = state.sortField();
+      const direction = state.sortDirection();
+      items.sort((a, b) => {
+        const aVal = a[field];
+        const bVal = b[field];
+        const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+        return direction === 'asc' ? comparison : -comparison;
+      });
+      
+      return items;
+    })
+  })),
+  withMethods((store, service = inject(<%= pascalName %>Service)) => ({
+    loadAll: rxMethod<void>(
+      pipe(
+        tap(() => patchState(store, { loading: true, error: null })),
+        switchMap(() =>
+          service.getAll().pipe(
+            tapResponse({
+              next: (items) => patchState(store, { items, loading: false }),
+              error: (error: Error) =>
+                patchState(store, { error: error.message, loading: false })
+            })
+          )
+        )
+      )
+    ),
+    
+    create: rxMethod<Omit<<%= pascalName %>, 'id' | 'createdAt' | 'updatedAt'>>(
+      pipe(
+        tap(() => patchState(store, { loading: true, error: null })),
+        switchMap((data) =>
+          service.create(data).pipe(
+            tapResponse({
+              next: (item) =>
+                patchState(store, (state) => ({
+                  items: [...state.items, item],
+                  loading: false
+                })),
+              error: (error: Error) =>
+                patchState(store, { error: error.message, loading: false })
+            })
+          )
+        )
+      )
+    ),
+    
+    update: rxMethod<{ id: string; data: Partial<<%= pascalName %>> }>(
+      pipe(
+        tap(() => patchState(store, { loading: true, error: null })),
+        switchMap(({ id, data }) =>
+          service.update(id, data).pipe(
+            tapResponse({
+              next: (updated) =>
+                patchState(store, (state) => ({
+                  items: state.items.map((item) =>
+                    item.id === id ? updated : item
+                  ),
+                  loading: false
+                })),
+              error: (error: Error) =>
+                patchState(store, { error: error.message, loading: false })
+            })
+          )
+        )
+      )
+    ),
+    
+    delete: rxMethod<string>(
+      pipe(
+        tap(() => patchState(store, { loading: true, error: null })),
+        switchMap((id) =>
+          service.delete(id).pipe(
+            tapResponse({
+              next: () =>
+                patchState(store, (state) => ({
+                  items: state.items.filter((item) => item.id !== id),
+                  loading: false
+                })),
+              error: (error: Error) =>
+                patchState(store, { error: error.message, loading: false })
+            })
+          )
+        )
+      )
+    ),
+    
+    setFilter: (filter: string) => patchState(store, { filter }),
+    
+    setSort: (field: keyof <%= pascalName %>, direction: 'asc' | 'desc') =>
+      patchState(store, { sortField: field, sortDirection: direction })
+  }))
+);

package/src/generators/feature/files/domain/model.ts.template

@@ -0,0 +1,9 @@
+<% models.forEach(function(model) { %>
+export interface <%= model.name %> {
+  id: string;
+<% model.attributes.forEach(function(attr) { %>  <%= attr.name %>: <%= attr.type %>;
+<% }); %>  createdAt: Date;
+  updatedAt: Date;
+}
+
+<% }); %>

package/src/generators/{clean-feature → feature}/files/infrastructure/service.ts.template

@@ -1,13 +1,13 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { <%= pascalName %> } from '../domain/model';
+import { environment } from '../../../../environments/environment';
 
 @Injectable({ providedIn: 'root' })
 export class <%= pascalName %>Service {
-  private readonly apiUrl = '/api/<%= name %>s';
-
-  constructor(private http: HttpClient) {}
+  private readonly http = inject(HttpClient);
+  private readonly apiUrl = `${environment.apiUrl}/features/<%= name %>`;
 
   getAll(): Observable<<%= pascalName %>[]> {
     return this.http.get<<%= pascalName %>[]>(this.apiUrl);
@@ -17,7 +17,7 @@ export class <%= pascalName %>Service {
     return this.http.get<<%= pascalName %>>(`${this.apiUrl}/${id}`);
   }
 
-  create(data: Omit<<%= pascalName %>, 'id'>): Observable<<%= pascalName %>> {
+  create(data: Omit<<%= pascalName %>, 'id' | 'createdAt' | 'updatedAt'>): Observable<<%= pascalName %>> {
     return this.http.post<<%= pascalName %>>(this.apiUrl, data);
   }