aigroup-workflow 2.1.2 → 2.2.1

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

@@ -1,297 +0,0 @@
-# Standalone Components & Signals
-
-## Standalone Component Pattern
-
-```typescript
-import { Component, signal, computed, effect } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-user-profile',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  templateUrl: './user-profile.component.html',
-  styleUrl: './user-profile.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class UserProfileComponent {
-  // Signal-based state
-  count = signal(0);
-  doubleCount = computed(() => this.count() * 2);
-
-  constructor() {
-    // Side effects
-    effect(() => {
-      console.log(`Count is: ${this.count()}`);
-    });
-  }
-
-  increment() {
-    this.count.update(value => value + 1);
-  }
-}
-```
-
-## Input/Output with Signals
-
-```typescript
-import { Component, input, output, model } from '@angular/core';
-
-@Component({
-  selector: 'app-search-box',
-  standalone: true,
-  template: `
-    <input
-      [value]="query()"
-      (input)="onQueryChange($event)"
-      [placeholder]="placeholder()" />
-  `
-})
-export class SearchBoxComponent {
-  // Signal inputs (Angular 17.1+)
-  placeholder = input<string>('Search...');
-  initialQuery = input<string>('');
-
-  // Signal outputs
-  queryChange = output<string>();
-
-  // Two-way binding with model signal
-  query = model<string>('');
-
-  onQueryChange(event: Event) {
-    const value = (event.target as HTMLInputElement).value;
-    this.query.set(value);
-    this.queryChange.emit(value);
-  }
-}
-
-// Parent usage
-@Component({
-  template: `
-    <app-search-box
-      [(query)]="searchQuery"
-      [placeholder]="'Find users...'"
-      (queryChange)="onSearch($event)" />
-  `
-})
-export class ParentComponent {
-  searchQuery = signal('');
-
-  onSearch(query: string) {
-    console.log('Searching:', query);
-  }
-}
-```
-
-## Smart vs Dumb Components
-
-```typescript
-// Smart Component (Container)
-@Component({
-  selector: 'app-users-container',
-  standalone: true,
-  imports: [UserListComponent],
-  template: `
-    <app-user-list
-      [users]="users()"
-      [loading]="loading()"
-      (userSelected)="onUserSelected($event)" />
-  `
-})
-export class UsersContainerComponent {
-  private usersService = inject(UsersService);
-
-  users = signal<User[]>([]);
-  loading = signal(true);
-
-  constructor() {
-    effect(() => {
-      this.usersService.getUsers().subscribe({
-        next: users => {
-          this.users.set(users);
-          this.loading.set(false);
-        },
-        error: err => console.error(err)
-      });
-    });
-  }
-
-  onUserSelected(user: User) {
-    // Handle business logic
-  }
-}
-
-// Dumb Component (Presentational)
-@Component({
-  selector: 'app-user-list',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    @if (loading()) {
-      <div>Loading...</div>
-    } @else {
-      @for (user of users(); track user.id) {
-        <div (click)="userSelected.emit(user)">
-          {{ user.name }}
-        </div>
-      }
-    }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class UserListComponent {
-  users = input.required<User[]>();
-  loading = input<boolean>(false);
-  userSelected = output<User>();
-}
-```
-
-## Content Projection
-
-```typescript
-// Card component with multiple slots
-@Component({
-  selector: 'app-card',
-  standalone: true,
-  template: `
-    <div class="card">
-      <div class="card-header">
-        <ng-content select="[header]"></ng-content>
-      </div>
-      <div class="card-body">
-        <ng-content></ng-content>
-      </div>
-      <div class="card-footer">
-        <ng-content select="[footer]"></ng-content>
-      </div>
-    </div>
-  `
-})
-export class CardComponent {}
-
-// Usage
-@Component({
-  template: `
-    <app-card>
-      <h2 header>Card Title</h2>
-      <p>Card content goes here</p>
-      <button footer>Action</button>
-    </app-card>
-  `
-})
-export class ParentComponent {}
-```
-
-## Dependency Injection
-
-```typescript
-import { Component, inject } from '@angular/core';
-import { UserService } from './user.service';
-
-@Component({
-  selector: 'app-user-dashboard',
-  standalone: true
-})
-export class UserDashboardComponent {
-  // Modern inject() API
-  private userService = inject(UserService);
-  private router = inject(Router);
-
-  // Optional dependency
-  private logger = inject(LoggerService, { optional: true });
-
-  users = signal<User[]>([]);
-
-  ngOnInit() {
-    this.loadUsers();
-  }
-
-  loadUsers() {
-    this.userService.getUsers().subscribe({
-      next: users => this.users.set(users),
-      error: err => this.logger?.error('Failed to load users', err)
-    });
-  }
-}
-```
-
-## New Control Flow (@if, @for)
-
-```typescript
-@Component({
-  template: `
-    <!-- @if instead of *ngIf -->
-    @if (user(); as currentUser) {
-      <div>Hello, {{ currentUser.name }}</div>
-    } @else if (loading()) {
-      <div>Loading...</div>
-    } @else {
-      <div>Please log in</div>
-    }
-
-    <!-- @for instead of *ngFor -->
-    @for (item of items(); track item.id) {
-      <div>{{ item.name }}</div>
-    } @empty {
-      <div>No items found</div>
-    }
-
-    <!-- @switch instead of *ngSwitch -->
-    @switch (status()) {
-      @case ('pending') {
-        <span>Pending...</span>
-      }
-      @case ('success') {
-        <span>Success!</span>
-      }
-      @default {
-        <span>Unknown</span>
-      }
-    }
-  `
-})
-export class ModernControlFlowComponent {
-  user = signal<User | null>(null);
-  loading = signal(false);
-  items = signal<Item[]>([]);
-  status = signal<'pending' | 'success' | 'error'>('pending');
-}
-```
-
-## Performance: OnPush & TrackBy
-
-```typescript
-@Component({
-  selector: 'app-product-list',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    @for (product of products(); track trackByProductId($index, product)) {
-      <app-product-card [product]="product" />
-    }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductListComponent {
-  products = input.required<Product[]>();
-
-  // TrackBy for optimal rendering
-  trackByProductId(index: number, product: Product): number {
-    return product.id;
-  }
-}
-```
-
-## Quick Reference
-
-| Pattern | Angular 17+ Approach |
-|---------|---------------------|
-| Component | Standalone by default |
-| State | Signals (`signal()`, `computed()`) |
-| Input | `input()`, `input.required()` |
-| Output | `output<T>()` |
-| Two-way | `model<T>()` |
-| DI | `inject()` function |
-| Control Flow | `@if`, `@for`, `@switch` |
-| Change Detection | `ChangeDetectionStrategy.OnPush` |

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

@@ -1,401 +0,0 @@
-# NgRx State Management
-
-## Store Setup
-
-```typescript
-// app.config.ts
-import { provideStore } from '@ngrx/store';
-import { provideEffects } from '@ngrx/effects';
-import { provideStoreDevtools } from '@ngrx/store-devtools';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideStore({
-      users: usersReducer,
-      products: productsReducer
-    }),
-    provideEffects([UsersEffects, ProductsEffects]),
-    provideStoreDevtools({
-      maxAge: 25,
-      logOnly: !isDevMode()
-    })
-  ]
-};
-```
-
-## Actions (Modern)
-
-```typescript
-// users.actions.ts
-import { createActionGroup, emptyProps, props } from '@ngrx/store';
-import { User } from './user.model';
-
-export const UsersActions = createActionGroup({
-  source: 'Users',
-  events: {
-    'Load Users': emptyProps(),
-    'Load Users Success': props<{ users: User[] }>(),
-    'Load Users Failure': props<{ error: string }>(),
-
-    'Add User': props<{ user: User }>(),
-    'Add User Success': props<{ user: User }>(),
-    'Add User Failure': props<{ error: string }>(),
-
-    'Update User': props<{ id: string; changes: Partial<User> }>(),
-    'Update User Success': props<{ user: User }>(),
-
-    'Delete User': props<{ id: string }>(),
-    'Delete User Success': props<{ id: string }>()
-  }
-});
-```
-
-## Reducer with Entity Adapter
-
-```typescript
-// users.reducer.ts
-import { createReducer, on } from '@ngrx/store';
-import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
-import { UsersActions } from './users.actions';
-import { User } from './user.model';
-
-export interface UsersState extends EntityState<User> {
-  loading: boolean;
-  error: string | null;
-  selectedUserId: string | null;
-}
-
-export const usersAdapter: EntityAdapter<User> = createEntityAdapter<User>({
-  selectId: (user: User) => user.id,
-  sortComparer: (a, b) => a.name.localeCompare(b.name)
-});
-
-const initialState: UsersState = usersAdapter.getInitialState({
-  loading: false,
-  error: null,
-  selectedUserId: null
-});
-
-export const usersReducer = createReducer(
-  initialState,
-
-  // Load users
-  on(UsersActions.loadUsers, (state) => ({
-    ...state,
-    loading: true,
-    error: null
-  })),
-
-  on(UsersActions.loadUsersSuccess, (state, { users }) =>
-    usersAdapter.setAll(users, {
-      ...state,
-      loading: false
-    })
-  ),
-
-  on(UsersActions.loadUsersFailure, (state, { error }) => ({
-    ...state,
-    loading: false,
-    error
-  })),
-
-  // Add user
-  on(UsersActions.addUserSuccess, (state, { user }) =>
-    usersAdapter.addOne(user, state)
-  ),
-
-  // Update user
-  on(UsersActions.updateUserSuccess, (state, { user }) =>
-    usersAdapter.updateOne(
-      { id: user.id, changes: user },
-      state
-    )
-  ),
-
-  // Delete user
-  on(UsersActions.deleteUserSuccess, (state, { id }) =>
-    usersAdapter.removeOne(id, state)
-  )
-);
-```
-
-## Selectors
-
-```typescript
-// users.selectors.ts
-import { createFeatureSelector, createSelector } from '@ngrx/store';
-import { usersAdapter, UsersState } from './users.reducer';
-
-export const selectUsersState = createFeatureSelector<UsersState>('users');
-
-// Entity adapter selectors
-const {
-  selectIds,
-  selectEntities,
-  selectAll,
-  selectTotal
-} = usersAdapter.getSelectors();
-
-export const selectUserIds = createSelector(
-  selectUsersState,
-  selectIds
-);
-
-export const selectUserEntities = createSelector(
-  selectUsersState,
-  selectEntities
-);
-
-export const selectAllUsers = createSelector(
-  selectUsersState,
-  selectAll
-);
-
-export const selectUsersTotal = createSelector(
-  selectUsersState,
-  selectTotal
-);
-
-export const selectUsersLoading = createSelector(
-  selectUsersState,
-  (state) => state.loading
-);
-
-export const selectUsersError = createSelector(
-  selectUsersState,
-  (state) => state.error
-);
-
-// Parameterized selector
-export const selectUserById = (id: string) =>
-  createSelector(
-    selectUserEntities,
-    (entities) => entities[id]
-  );
-
-// Composed selector
-export const selectActiveUsers = createSelector(
-  selectAllUsers,
-  (users) => users.filter(user => user.isActive)
-);
-
-// Selector with multiple inputs
-export const selectUserWithPosts = createSelector(
-  selectUserById,
-  selectAllPosts,
-  (user, posts) => ({
-    user,
-    posts: posts.filter(post => post.userId === user?.id)
-  })
-);
-```
-
-## Effects
-
-```typescript
-// users.effects.ts
-import { Injectable, inject } from '@angular/core';
-import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { catchError, map, mergeMap, exhaustMap } from 'rxjs/operators';
-import { of } from 'rxjs';
-import { UsersService } from './users.service';
-import { UsersActions } from './users.actions';
-
-@Injectable()
-export class UsersEffects {
-  private actions$ = inject(Actions);
-  private usersService = inject(UsersService);
-
-  // Load users effect
-  loadUsers$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(UsersActions.loadUsers),
-      mergeMap(() =>
-        this.usersService.getAll().pipe(
-          map(users => UsersActions.loadUsersSuccess({ users })),
-          catchError(error =>
-            of(UsersActions.loadUsersFailure({ error: error.message }))
-          )
-        )
-      )
-    )
-  );
-
-  // Add user effect (exhaustMap prevents duplicate submits)
-  addUser$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(UsersActions.addUser),
-      exhaustMap(({ user }) =>
-        this.usersService.create(user).pipe(
-          map(createdUser => UsersActions.addUserSuccess({ user: createdUser })),
-          catchError(error =>
-            of(UsersActions.addUserFailure({ error: error.message }))
-          )
-        )
-      )
-    )
-  );
-
-  // Update user effect
-  updateUser$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(UsersActions.updateUser),
-      mergeMap(({ id, changes }) =>
-        this.usersService.update(id, changes).pipe(
-          map(user => UsersActions.updateUserSuccess({ user })),
-          catchError(error =>
-            of(UsersActions.loadUsersFailure({ error: error.message }))
-          )
-        )
-      )
-    )
-  );
-
-  // Delete user effect
-  deleteUser$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(UsersActions.deleteUser),
-      mergeMap(({ id }) =>
-        this.usersService.delete(id).pipe(
-          map(() => UsersActions.deleteUserSuccess({ id })),
-          catchError(error =>
-            of(UsersActions.loadUsersFailure({ error: error.message }))
-          )
-        )
-      )
-    )
-  );
-
-  // Non-dispatching effect (side effect only)
-  logUserActions$ = createEffect(
-    () =>
-      this.actions$.pipe(
-        ofType(
-          UsersActions.addUserSuccess,
-          UsersActions.updateUserSuccess,
-          UsersActions.deleteUserSuccess
-        ),
-        tap(action => console.log('User action:', action))
-      ),
-    { dispatch: false }
-  );
-}
-```
-
-## Component Integration
-
-```typescript
-// users-list.component.ts
-import { Component, inject } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { UsersActions } from './store/users.actions';
-import {
-  selectAllUsers,
-  selectUsersLoading,
-  selectUsersError
-} from './store/users.selectors';
-
-@Component({
-  selector: 'app-users-list',
-  standalone: true,
-  template: `
-    @if (loading()) {
-      <div>Loading...</div>
-    } @else if (error(); as err) {
-      <div>Error: {{ err }}</div>
-    } @else {
-      @for (user of users(); track user.id) {
-        <div>
-          {{ user.name }}
-          <button (click)="onDelete(user.id)">Delete</button>
-        </div>
-      }
-    }
-  `
-})
-export class UsersListComponent {
-  private store = inject(Store);
-
-  // Select data as signals
-  users = toSignal(this.store.select(selectAllUsers), { initialValue: [] });
-  loading = toSignal(this.store.select(selectUsersLoading), { initialValue: false });
-  error = toSignal(this.store.select(selectUsersError), { initialValue: null });
-
-  ngOnInit() {
-    this.store.dispatch(UsersActions.loadUsers());
-  }
-
-  onDelete(id: string) {
-    this.store.dispatch(UsersActions.deleteUser({ id }));
-  }
-}
-```
-
-## Facade Pattern
-
-```typescript
-// users.facade.ts
-@Injectable({ providedIn: 'root' })
-export class UsersFacade {
-  private store = inject(Store);
-
-  // Selectors
-  users$ = this.store.select(selectAllUsers);
-  loading$ = this.store.select(selectUsersLoading);
-  error$ = this.store.select(selectUsersError);
-
-  // Actions
-  loadUsers() {
-    this.store.dispatch(UsersActions.loadUsers());
-  }
-
-  addUser(user: User) {
-    this.store.dispatch(UsersActions.addUser({ user }));
-  }
-
-  updateUser(id: string, changes: Partial<User>) {
-    this.store.dispatch(UsersActions.updateUser({ id, changes }));
-  }
-
-  deleteUser(id: string) {
-    this.store.dispatch(UsersActions.deleteUser({ id }));
-  }
-
-  getUserById(id: string) {
-    return this.store.select(selectUserById(id));
-  }
-}
-
-// Usage in component
-@Component({
-  selector: 'app-users',
-  standalone: true
-})
-export class UsersComponent {
-  private facade = inject(UsersFacade);
-
-  users = toSignal(this.facade.users$, { initialValue: [] });
-  loading = toSignal(this.facade.loading$, { initialValue: false });
-
-  ngOnInit() {
-    this.facade.loadUsers();
-  }
-
-  onAdd(user: User) {
-    this.facade.addUser(user);
-  }
-}
-```
-
-## Quick Reference
-
-| Concept | Usage |
-|---------|-------|
-| Actions | `createActionGroup()` |
-| Reducer | `createReducer()`, `on()` |
-| Entity | `createEntityAdapter()` |
-| Selectors | `createSelector()`, `createFeatureSelector()` |
-| Effects | `createEffect()`, `ofType()` |
-| Store | `inject(Store)`, `store.select()`, `store.dispatch()` |
-| DevTools | `provideStoreDevtools()` |
-| Testing | Mock store, marble testing |