aigroup-workflow 2.1.2 → 2.2.0

package/skills/angular-architect/references/routing.md

@@ -1,361 +0,0 @@
-# Angular Routing
-
-## Routes Configuration
-
-```typescript
-// app.routes.ts
-import { Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
-
-export const routes: Routes = [
-  {
-    path: '',
-    redirectTo: '/home',
-    pathMatch: 'full'
-  },
-  {
-    path: 'home',
-    component: HomeComponent,
-    title: 'Home'
-  },
-  {
-    path: 'users',
-    loadComponent: () => import('./users/users.component').then(m => m.UsersComponent),
-    title: 'Users'
-  },
-  {
-    path: 'users/:id',
-    loadComponent: () => import('./users/user-detail.component').then(m => m.UserDetailComponent),
-    canActivate: [authGuard],
-    resolve: { user: userResolver }
-  },
-  {
-    path: 'admin',
-    loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
-    canActivate: [authGuard, adminGuard]
-  },
-  {
-    path: '**',
-    loadComponent: () => import('./not-found/not-found.component').then(m => m.NotFoundComponent),
-    title: '404 Not Found'
-  }
-];
-
-// app.config.ts
-import { provideRouter, withComponentInputBinding } from '@angular/router';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(
-      routes,
-      withComponentInputBinding(),  // Bind route params to @Input()
-      withViewTransitions(),        // Enable view transitions
-      withPreloading(PreloadAllModules)
-    )
-  ]
-};
-```
-
-## Lazy Loading
-
-```typescript
-// Feature routes
-// admin/admin.routes.ts
-import { Routes } from '@angular/router';
-
-export const ADMIN_ROUTES: Routes = [
-  {
-    path: '',
-    loadComponent: () => import('./admin-dashboard.component').then(m => m.AdminDashboardComponent)
-  },
-  {
-    path: 'users',
-    loadComponent: () => import('./admin-users.component').then(m => m.AdminUsersComponent)
-  },
-  {
-    path: 'settings',
-    loadComponent: () => import('./admin-settings.component').then(m => m.AdminSettingsComponent)
-  }
-];
-```
-
-## Functional Guards
-
-```typescript
-// guards/auth.guard.ts
-import { inject } from '@angular/core';
-import { Router, CanActivateFn } from '@angular/router';
-import { AuthService } from '../services/auth.service';
-
-export const authGuard: CanActivateFn = (route, state) => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  if (authService.isAuthenticated()) {
-    return true;
-  }
-
-  // Redirect to login with return URL
-  return router.createUrlTree(['/login'], {
-    queryParams: { returnUrl: state.url }
-  });
-};
-
-// Admin guard
-export const adminGuard: CanActivateFn = () => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  if (authService.hasRole('admin')) {
-    return true;
-  }
-
-  return router.createUrlTree(['/unauthorized']);
-};
-
-// Can deactivate (unsaved changes)
-export const canDeactivateGuard: CanDeactivateFn<FormComponent> = (component) => {
-  if (component.hasUnsavedChanges()) {
-    return confirm('You have unsaved changes. Are you sure you want to leave?');
-  }
-  return true;
-};
-```
-
-## Resolvers
-
-```typescript
-// resolvers/user.resolver.ts
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-import { catchError, of } from 'rxjs';
-import { User } from '../models/user.model';
-import { UsersService } from '../services/users.service';
-
-export const userResolver: ResolveFn<User | null> = (route, state) => {
-  const usersService = inject(UsersService);
-  const id = route.paramMap.get('id')!;
-
-  return usersService.getById(id).pipe(
-    catchError(() => of(null))
-  );
-};
-
-// Component receives resolved data
-@Component({
-  selector: 'app-user-detail',
-  standalone: true,
-  template: `
-    @if (user) {
-      <h1>{{ user.name }}</h1>
-    } @else {
-      <p>User not found</p>
-    }
-  `
-})
-export class UserDetailComponent {
-  user = input<User | null>(null);  // Resolved data bound as input
-}
-```
-
-## Route Parameters
-
-```typescript
-import { Component, inject, input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-@Component({
-  selector: 'app-product-detail',
-  standalone: true
-})
-export class ProductDetailComponent {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
-
-  // Modern approach: route params as inputs
-  id = input.required<string>();
-
-  // Legacy approach: subscribe to params
-  ngOnInit() {
-    this.route.paramMap.subscribe(params => {
-      const id = params.get('id');
-      this.loadProduct(id);
-    });
-
-    // Query params
-    this.route.queryParamMap.subscribe(params => {
-      const filter = params.get('filter');
-      const sort = params.get('sort');
-    });
-  }
-
-  // Navigate programmatically
-  goToEdit() {
-    this.router.navigate(['/products', this.id(), 'edit']);
-  }
-
-  // Navigate with query params
-  applyFilter(filter: string) {
-    this.router.navigate([], {
-      relativeTo: this.route,
-      queryParams: { filter },
-      queryParamsHandling: 'merge'  // Preserve other params
-    });
-  }
-}
-```
-
-## Router Events
-
-```typescript
-import { Component, inject } from '@angular/core';
-import { Router, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
-import { filter } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-root',
-  standalone: true
-})
-export class AppComponent {
-  private router = inject(Router);
-  loading = signal(false);
-
-  constructor() {
-    // Show loading on navigation start
-    this.router.events.pipe(
-      filter(event => event instanceof NavigationStart)
-    ).subscribe(() => {
-      this.loading.set(true);
-    });
-
-    // Hide loading on navigation end
-    this.router.events.pipe(
-      filter(event => event instanceof NavigationEnd)
-    ).subscribe(() => {
-      this.loading.set(false);
-    });
-
-    // Handle navigation errors
-    this.router.events.pipe(
-      filter(event => event instanceof NavigationError)
-    ).subscribe((event: NavigationError) => {
-      console.error('Navigation error:', event.error);
-      this.loading.set(false);
-    });
-  }
-}
-```
-
-## Child Routes & Outlets
-
-```typescript
-// Parent route with child routes
-const routes: Routes = [
-  {
-    path: 'dashboard',
-    component: DashboardComponent,
-    children: [
-      {
-        path: 'stats',
-        component: StatsComponent,
-        outlet: 'panel'  // Named outlet
-      },
-      {
-        path: 'charts',
-        component: ChartsComponent,
-        outlet: 'panel'
-      }
-    ]
-  }
-];
-
-// Dashboard component template
-@Component({
-  template: `
-    <div class="dashboard">
-      <div class="main">
-        <router-outlet></router-outlet>  <!-- Primary outlet -->
-      </div>
-      <div class="panel">
-        <router-outlet name="panel"></router-outlet>  <!-- Named outlet -->
-      </div>
-    </div>
-  `
-})
-export class DashboardComponent {}
-
-// Navigate to named outlet
-this.router.navigate(['/dashboard', { outlets: { panel: ['stats'] } }]);
-```
-
-## Preloading Strategies
-
-```typescript
-// Custom preloading strategy
-import { Injectable } from '@angular/core';
-import { PreloadingStrategy, Route } from '@angular/router';
-import { Observable, of, timer } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class CustomPreloadingStrategy implements PreloadingStrategy {
-  preload(route: Route, load: () => Observable<any>): Observable<any> {
-    // Only preload routes with data.preload = true
-    if (route.data?.['preload']) {
-      const delay = route.data?.['preloadDelay'] || 0;
-      return timer(delay).pipe(
-        mergeMap(() => load())
-      );
-    }
-    return of(null);
-  }
-}
-
-// Route config with preload data
-const routes: Routes = [
-  {
-    path: 'important',
-    loadChildren: () => import('./important/important.routes'),
-    data: { preload: true, preloadDelay: 2000 }
-  }
-];
-
-// Register in app config
-provideRouter(routes, withPreloading(CustomPreloadingStrategy))
-```
-
-## Route Guards with Observables
-
-```typescript
-export const dataGuard: CanActivateFn = (route, state) => {
-  const dataService = inject(DataService);
-  const router = inject(Router);
-
-  return dataService.checkAccess(route.params['id']).pipe(
-    map(hasAccess => {
-      if (hasAccess) {
-        return true;
-      }
-      return router.createUrlTree(['/no-access']);
-    }),
-    catchError(() => {
-      return of(router.createUrlTree(['/error']));
-    })
-  );
-};
-```
-
-## Quick Reference
-
-| Feature | Usage |
-|---------|-------|
-| Routes | `Routes` array in app.routes.ts |
-| Lazy load | `loadComponent()`, `loadChildren()` |
-| Guards | `CanActivateFn`, `CanDeactivateFn` |
-| Resolvers | `ResolveFn<T>` |
-| Params | `route.paramMap`, `input<T>()` |
-| Query | `route.queryParamMap` |
-| Navigate | `router.navigate()`, `routerLink` |
-| Events | `router.events` |
-| Outlets | `<router-outlet name="...">` |
-| Preload | `withPreloading()` |

package/skills/angular-architect/references/rxjs.md

@@ -1,319 +0,0 @@
-# RxJS Patterns
-
-## Essential Operators
-
-```typescript
-import { Component, inject, signal } from '@angular/core';
-import {
-  map, filter, switchMap, catchError,
-  debounceTime, distinctUntilChanged,
-  tap, shareReplay, takeUntil
-} from 'rxjs/operators';
-import { Subject, of, EMPTY } from 'rxjs';
-
-@Component({
-  selector: 'app-search',
-  standalone: true
-})
-export class SearchComponent {
-  private searchService = inject(SearchService);
-  private destroy$ = new Subject<void>();
-
-  searchTerm$ = new Subject<string>();
-  results = signal<SearchResult[]>([]);
-
-  ngOnInit() {
-    this.searchTerm$.pipe(
-      debounceTime(300),              // Wait 300ms after typing
-      distinctUntilChanged(),         // Only if value changed
-      filter(term => term.length > 2), // Minimum 3 characters
-      tap(() => this.loading.set(true)),
-      switchMap(term =>               // Cancel previous requests
-        this.searchService.search(term).pipe(
-          catchError(err => {
-            console.error(err);
-            return of([]);            // Return empty on error
-          })
-        )
-      ),
-      tap(() => this.loading.set(false)),
-      takeUntil(this.destroy$)        // Auto-unsubscribe
-    ).subscribe(results => this.results.set(results));
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}
-```
-
-## Subject Types
-
-```typescript
-import { Subject, BehaviorSubject, ReplaySubject, AsyncSubject } from 'rxjs';
-
-export class SubjectExamples {
-  // Subject: No initial value, only emits to future subscribers
-  private clickSubject = new Subject<MouseEvent>();
-  click$ = this.clickSubject.asObservable();
-
-  onClick(event: MouseEvent) {
-    this.clickSubject.next(event);
-  }
-
-  // BehaviorSubject: Has initial value, emits latest value to new subscribers
-  private loadingSubject = new BehaviorSubject<boolean>(false);
-  loading$ = this.loadingSubject.asObservable();
-
-  setLoading(loading: boolean) {
-    this.loadingSubject.next(loading);
-  }
-
-  // ReplaySubject: Replays N previous values to new subscribers
-  private activitySubject = new ReplaySubject<Activity>(3); // Last 3 activities
-  activity$ = this.activitySubject.asObservable();
-
-  // AsyncSubject: Only emits last value when completed
-  private finalResultSubject = new AsyncSubject<Result>();
-  finalResult$ = this.finalResultSubject.asObservable();
-}
-```
-
-## Higher-Order Operators
-
-```typescript
-import { switchMap, mergeMap, concatMap, exhaustMap } from 'rxjs/operators';
-
-export class HigherOrderExamples {
-  private http = inject(HttpClient);
-
-  // switchMap: Cancel previous, use latest (search, typeahead)
-  searchUsers(term$: Observable<string>) {
-    return term$.pipe(
-      switchMap(term => this.http.get<User[]>(`/api/users?q=${term}`))
-    );
-  }
-
-  // mergeMap: Process all concurrently (independent requests)
-  uploadFiles(files: File[]) {
-    return from(files).pipe(
-      mergeMap(file => this.http.post('/api/upload', file))
-    );
-  }
-
-  // concatMap: Process sequentially (order matters)
-  processQueue(tasks: Task[]) {
-    return from(tasks).pipe(
-      concatMap(task => this.http.post('/api/process', task))
-    );
-  }
-
-  // exhaustMap: Ignore new until current completes (prevent double-click)
-  saveForm(clicks$: Observable<void>, formData: any) {
-    return clicks$.pipe(
-      exhaustMap(() => this.http.post('/api/save', formData))
-    );
-  }
-}
-```
-
-## Error Handling
-
-```typescript
-import { catchError, retry, retryWhen, delay, tap } from 'rxjs/operators';
-import { throwError, of, timer } from 'rxjs';
-
-@Injectable({ providedIn: 'root' })
-export class DataService {
-  private http = inject(HttpClient);
-
-  // Retry with exponential backoff
-  getData() {
-    return this.http.get<Data>('/api/data').pipe(
-      retryWhen(errors =>
-        errors.pipe(
-          mergeMap((error, index) => {
-            if (index >= 3) {
-              return throwError(() => error);
-            }
-            const delayMs = Math.pow(2, index) * 1000;
-            return timer(delayMs);
-          })
-        )
-      ),
-      catchError(err => {
-        console.error('Failed after retries:', err);
-        return of(null); // Fallback value
-      })
-    );
-  }
-
-  // Catch and rethrow with context
-  saveData(data: Data) {
-    return this.http.post('/api/data', data).pipe(
-      catchError(err => {
-        if (err.status === 401) {
-          // Handle auth error
-          return throwError(() => new Error('Unauthorized'));
-        }
-        return throwError(() => err);
-      })
-    );
-  }
-}
-```
-
-## Memory Management
-
-```typescript
-import { Component, DestroyRef, inject } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-@Component({
-  selector: 'app-auto-cleanup',
-  standalone: true
-})
-export class AutoCleanupComponent {
-  private dataService = inject(DataService);
-  private destroyRef = inject(DestroyRef);
-
-  data = signal<Data[]>([]);
-
-  constructor() {
-    // Modern approach: takeUntilDestroyed
-    this.dataService.getData().pipe(
-      takeUntilDestroyed()  // Auto-cleanup on destroy
-    ).subscribe(data => this.data.set(data));
-
-    // Manual cleanup with DestroyRef
-    const subscription = this.dataService.getUpdates().subscribe();
-    this.destroyRef.onDestroy(() => subscription.unsubscribe());
-  }
-}
-
-// Legacy approach (still valid)
-@Component({
-  selector: 'app-manual-cleanup',
-  standalone: true
-})
-export class ManualCleanupComponent implements OnDestroy {
-  private destroy$ = new Subject<void>();
-
-  ngOnInit() {
-    this.dataService.getData().pipe(
-      takeUntil(this.destroy$)
-    ).subscribe();
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}
-```
-
-## Combining Observables
-
-```typescript
-import { combineLatest, forkJoin, merge, zip } from 'rxjs';
-
-export class CombiningExamples {
-  private http = inject(HttpClient);
-
-  // combineLatest: Emit when any source emits (latest values)
-  getDashboard() {
-    return combineLatest({
-      user: this.http.get<User>('/api/user'),
-      stats: this.http.get<Stats>('/api/stats'),
-      notifications: this.http.get<Notification[]>('/api/notifications')
-    }).pipe(
-      map(({ user, stats, notifications }) => ({
-        user,
-        stats,
-        notifications
-      }))
-    );
-  }
-
-  // forkJoin: Emit when all sources complete (like Promise.all)
-  loadAllData() {
-    return forkJoin({
-      users: this.http.get<User[]>('/api/users'),
-      products: this.http.get<Product[]>('/api/products'),
-      orders: this.http.get<Order[]>('/api/orders')
-    });
-  }
-
-  // merge: Emit when any source emits (flattens all)
-  getActivityFeed() {
-    return merge(
-      this.http.get<Activity[]>('/api/recent'),
-      this.http.get<Activity[]>('/api/trending')
-    );
-  }
-}
-```
-
-## Custom Operators
-
-```typescript
-import { Observable, OperatorFunction } from 'rxjs';
-import { tap } from 'rxjs/operators';
-
-// Custom operator for logging
-export function debug<T>(tag: string): OperatorFunction<T, T> {
-  return (source: Observable<T>) =>
-    source.pipe(
-      tap({
-        next: value => console.log(`[${tag}] Next:`, value),
-        error: err => console.error(`[${tag}] Error:`, err),
-        complete: () => console.log(`[${tag}] Complete`)
-      })
-    );
-}
-
-// Usage
-this.http.get('/api/data').pipe(
-  debug('API Call'),
-  map(data => transform(data))
-).subscribe();
-```
-
-## ShareReplay for Caching
-
-```typescript
-import { shareReplay } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class ConfigService {
-  private http = inject(HttpClient);
-
-  // Cache config, share with all subscribers
-  config$ = this.http.get<Config>('/api/config').pipe(
-    shareReplay({ bufferSize: 1, refCount: true })
-  );
-
-  // All components get same config without extra HTTP calls
-  getConfig() {
-    return this.config$;
-  }
-}
-```
-
-## Quick Reference
-
-| Use Case | Operator |
-|----------|----------|
-| Transform values | `map`, `pluck` |
-| Filter values | `filter`, `distinctUntilChanged` |
-| Time-based | `debounceTime`, `throttleTime`, `delay` |
-| Cancel previous | `switchMap` |
-| Process all | `mergeMap` |
-| Sequential | `concatMap` |
-| Ignore new | `exhaustMap` |
-| Combine latest | `combineLatest` |
-| Wait for all | `forkJoin` |
-| Error handling | `catchError`, `retry` |
-| Cleanup | `takeUntilDestroyed`, `takeUntil` |
-| Share result | `shareReplay` |