feat: add @myorg/todo library with TodoStore (closes #109)

- Todo model: id, title, description, completed, createdAt
- TodoService: getAll, create, update, remove
- TodoStore (scoped): rxResource for fetching, rxMethod for mutations
- enableSync/disableSync toggles API fetching (returns [] when off)
- Todo component: .ts-only, inline template, Tailwind, OnPush

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: chrisjwalk-bot

eslint.config.cjs

@@ -33,7 +33,6 @@ module.exports = [
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
     // Override or add rules here
     rules: {
-
       '@/semi': ['error', 'always'],
       '@/no-extra-semi': 'error',
       '@/quotes': ['error', 'single', { allowTemplateLiterals: true }],

libs/todo/README.md

@@ -0,0 +1,7 @@
+# todo
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test todo` to execute the unit tests.

libs/todo/eslint.config.cjs

@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.cjs');
+
+module.exports = [
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/todo/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "todo",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/todo/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "coverage/libs/todo"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/todo/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/todo/todo';
+export * from './lib/models/todo';
+export * from './lib/services/todo.service';
+export * from './lib/state/todo.store';

libs/todo/src/lib/models/todo.ts

@@ -0,0 +1,10 @@
+export type Todo = {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+  createdAt: string;
+};
+
+export type CreateTodoRequest = Omit<Todo, 'id' | 'createdAt'>;
+export type UpdateTodoRequest = Partial<Omit<Todo, 'id' | 'createdAt'>>;

libs/todo/src/lib/services/todo.service.ts

@@ -0,0 +1,25 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+
+import { CreateTodoRequest, Todo, UpdateTodoRequest } from '../models/todo';
+
+@Injectable({ providedIn: 'root' })
+export class TodoService {
+  private readonly http = inject(HttpClient);
+
+  getAll() {
+    return this.http.get<Todo[]>('/api/todos');
+  }
+
+  create(todo: CreateTodoRequest) {
+    return this.http.post<Todo>('/api/todos', todo);
+  }
+
+  update(id: string, changes: UpdateTodoRequest) {
+    return this.http.patch<Todo>(`/api/todos/${id}`, changes);
+  }
+
+  remove(id: string) {
+    return this.http.delete<void>(`/api/todos/${id}`);
+  }
+}

libs/todo/src/lib/state/todo.store.spec.ts

@@ -0,0 +1,147 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ApplicationRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { of, throwError } from 'rxjs';
+
+import { Todo } from '../models/todo';
+import { TodoService } from '../services/todo.service';
+import { TodoStore } from './todo.store';
+
+const mockTodos: Todo[] = [
+  {
+    id: '1',
+    title: 'Buy groceries',
+    description: 'Milk, eggs, bread',
+    completed: false,
+    createdAt: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: '2',
+    title: 'Write tests',
+    description: 'Cover the todo store',
+    completed: true,
+    createdAt: '2024-01-02T00:00:00Z',
+  },
+];
+
+describe('TodoStore', () => {
+  let store: TodoStore;
+  let service: TodoService;
+  let appRef: ApplicationRef;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TodoStore, provideHttpClient(), provideHttpClientTesting()],
+    });
+
+    store = TestBed.inject(TodoStore);
+    service = TestBed.inject(TodoService);
+    appRef = TestBed.inject(ApplicationRef);
+  });
+
+  it('should create', () => {
+    expect(store).toBeTruthy();
+  });
+
+  it('should have syncEnabled true after onInit hook', () => {
+    expect(store.syncEnabled()).toBe(true);
+  });
+
+  describe('loading todos', () => {
+    it('should load todos when sync is enabled', async () => {
+      vi.spyOn(service, 'getAll').mockReturnValue(of(mockTodos));
+      store.enableSync();
+      await appRef.whenStable();
+
+      expect(store.todos.value()).toEqual(mockTodos);
+      expect(store.todos.isLoading()).toBe(false);
+      expect(store.todos.error()).toBeFalsy();
+    });
+
+    it('should capture loading error', async () => {
+      const error = new Error('network error');
+      vi.spyOn(service, 'getAll').mockReturnValue(throwError(() => error));
+      store.enableSync();
+      await appRef.whenStable();
+
+      expect(store.todos.error()).toBeTruthy();
+      expect(store.todos.isLoading()).toBe(false);
+    });
+
+    it('should return empty list when sync is disabled', async () => {
+      vi.spyOn(service, 'getAll').mockReturnValue(of(mockTodos));
+      store.disableSync();
+      await appRef.whenStable();
+
+      expect(store.todos.value()).toEqual([]);
+    });
+  });
+
+  describe('create', () => {
+    it('should call service.create and reload', async () => {
+      vi.spyOn(service, 'getAll').mockReturnValue(of(mockTodos));
+      const newTodo: Todo = {
+        id: '3',
+        title: 'New task',
+        description: '',
+        completed: false,
+        createdAt: '2024-01-03T00:00:00Z',
+      };
+      const createSpy = vi
+        .spyOn(service, 'create')
+        .mockReturnValue(of(newTodo));
+
+      store.create({ title: 'New task', description: '', completed: false });
+      await appRef.whenStable();
+
+      expect(createSpy).toHaveBeenCalledWith({
+        title: 'New task',
+        description: '',
+        completed: false,
+      });
+    });
+  });
+
+  describe('update', () => {
+    it('should call service.update and reload', async () => {
+      vi.spyOn(service, 'getAll').mockReturnValue(of(mockTodos));
+      const updateSpy = vi
+        .spyOn(service, 'update')
+        .mockReturnValue(of({ ...mockTodos[0], title: 'Updated' }));
+
+      store.update({ id: '1', changes: { title: 'Updated' } });
+      await appRef.whenStable();
+
+      expect(updateSpy).toHaveBeenCalledWith('1', { title: 'Updated' });
+    });
+  });
+
+  describe('remove', () => {
+    it('should call service.remove and reload', async () => {
+      vi.spyOn(service, 'getAll').mockReturnValue(of(mockTodos));
+      const removeSpy = vi
+        .spyOn(service, 'remove')
+        .mockReturnValue(of(undefined));
+
+      store.remove('1');
+      await appRef.whenStable();
+
+      expect(removeSpy).toHaveBeenCalledWith('1');
+    });
+  });
+
+  describe('toggle', () => {
+    it('should call service.update with flipped completed and reload', async () => {
+      vi.spyOn(service, 'getAll').mockReturnValue(of(mockTodos));
+      const updateSpy = vi
+        .spyOn(service, 'update')
+        .mockReturnValue(of({ ...mockTodos[0], completed: true }));
+
+      store.toggle(mockTodos[0]);
+      await appRef.whenStable();
+
+      expect(updateSpy).toHaveBeenCalledWith('1', { completed: true });
+    });
+  });
+});

libs/todo/src/lib/state/todo.store.ts

@@ -0,0 +1,121 @@
+import { computed, inject } from '@angular/core';
+import { rxResource } from '@angular/core/rxjs-interop';
+import { tapResponse } from '@ngrx/operators';
+import {
+  patchState,
+  signalStore,
+  signalStoreFeature,
+  withComputed,
+  withHooks,
+  withMethods,
+  withProps,
+  withState,
+} from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { of, pipe, switchMap } from 'rxjs';
+
+import { CreateTodoRequest, Todo, UpdateTodoRequest } from '../models/todo';
+import { TodoService } from '../services/todo.service';
+
+export type TodoState = {
+  syncEnabled: boolean;
+};
+
+export const todoInitialState: TodoState = {
+  syncEnabled: false,
+};
+
+export function withTodoFeature() {
+  return signalStoreFeature(
+    withState(todoInitialState),
+    withProps(() => ({
+      todoService: inject(TodoService),
+    })),
+    withComputed(({ syncEnabled }) => ({
+      params: computed(() => ({ syncEnabled: syncEnabled() })),
+    })),
+    withProps(({ todoService, params }) => ({
+      todos: rxResource({
+        params,
+        stream: ({ params: { syncEnabled } }) =>
+          syncEnabled ? todoService.getAll() : of([] as Todo[]),
+      }),
+    })),
+    withMethods(({ todoService, todos, ...store }) => ({
+      enableSync() {
+        patchState(store, { syncEnabled: true });
+      },
+
+      disableSync() {
+        patchState(store, { syncEnabled: false });
+      },
+
+      reload() {
+        todos.reload();
+      },
+
+      create: rxMethod<CreateTodoRequest>(
+        pipe(
+          switchMap((todo) =>
+            todoService.create(todo).pipe(
+              tapResponse({
+                next: () => todos.reload(),
+                error: (error) => console.error('Failed to create todo', error),
+              }),
+            ),
+          ),
+        ),
+      ),
+
+      update: rxMethod<{ id: string; changes: UpdateTodoRequest }>(
+        pipe(
+          switchMap(({ id, changes }) =>
+            todoService.update(id, changes).pipe(
+              tapResponse({
+                next: () => todos.reload(),
+                error: (error) => console.error('Failed to update todo', error),
+              }),
+            ),
+          ),
+        ),
+      ),
+
+      remove: rxMethod<string>(
+        pipe(
+          switchMap((id) =>
+            todoService.remove(id).pipe(
+              tapResponse({
+                next: () => todos.reload(),
+                error: (error) => console.error('Failed to remove todo', error),
+              }),
+            ),
+          ),
+        ),
+      ),
+
+      toggle: rxMethod<Todo>(
+        pipe(
+          switchMap((todo) =>
+            todoService.update(todo.id, { completed: !todo.completed }).pipe(
+              tapResponse({
+                next: () => todos.reload(),
+                error: (error) => console.error('Failed to toggle todo', error),
+              }),
+            ),
+          ),
+        ),
+      ),
+    })),
+  );
+}
+
+export const TodoStore = signalStore(
+  withTodoFeature(),
+  withHooks({
+    onInit({ enableSync }) {
+      enableSync();
+    },
+  }),
+);
+
+export type TodoStore = InstanceType<typeof TodoStore>;

libs/todo/src/lib/todo/todo.spec.ts

@@ -0,0 +1,15 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { render, screen } from '@testing-library/angular';
+
+import { Todo } from './todo';
+
+describe('Todo', () => {
+  it('should create', async () => {
+    await render(Todo, {
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+
+    expect(screen.getByTestId('lib-todo')).toBeTruthy();
+  });
+});