mvc-kit 2.12.5 → 2.13.1

package/examples/react/FullApp/src/types/conversation.ts

@@ -0,0 +1,7 @@
+export interface ConversationState {
+  id: string;
+  participantIds: string[];
+  lastMessage: string;
+  lastMessageAt: string;
+  unreadCount: number;
+}

package/examples/react/FullApp/src/types/location.ts

@@ -0,0 +1,12 @@
+export interface LocationState {
+  id: string;
+  name: string;
+  type: 'office' | 'warehouse' | 'retail';
+  status: 'active' | 'inactive' | 'maintenance';
+  city: string;
+  state: string;
+  address: string;
+  capacity: number;
+  managerId: string;
+  createdAt: string;
+}

package/examples/react/FullApp/src/types/message.ts

@@ -0,0 +1,7 @@
+export interface MessageState {
+  id: string;
+  conversationId: string;
+  senderId: string;
+  text: string;
+  sentAt: string;
+}

package/examples/react/FullApp/src/types/user.ts

@@ -0,0 +1,10 @@
+export interface UserState {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: 'admin' | 'manager' | 'member';
+  status: 'active' | 'inactive';
+  avatarUrl: string;
+  createdAt: string;
+}

package/examples/react/FullApp/src/viewmodels/AuthViewModel.ts

@@ -0,0 +1,51 @@
+import { ViewModel, singleton, isAbortError, classifyError } from 'mvc-kit';
+import type { UserState } from '../types/user';
+import { AuthService } from '../services/AuthService';
+import { AppEventBus } from '../events/AppEventBus';
+
+interface AuthState {
+  user: UserState | null;
+  isAuthenticated: boolean;
+}
+
+interface AuthEvents {
+  loginFailed: { message: string };
+}
+
+export class AuthViewModel extends ViewModel<AuthState, AuthEvents> {
+  static DEFAULT_STATE: AuthState = { user: null, isAuthenticated: false };
+
+  // --- Private fields ---
+  private authService = singleton(AuthService);
+  private bus = singleton(AppEventBus);
+
+  // --- Computed getters ---
+  get displayName(): string {
+    const { user } = this.state;
+    return user ? `${user.firstName} ${user.lastName}` : '';
+  }
+
+  get initials(): string {
+    const { user } = this.state;
+    return user ? `${user.firstName[0]}${user.lastName[0]}` : '';
+  }
+
+  // --- Actions ---
+  async login(email: string, password: string) {
+    try {
+      const user = await this.authService.login(email, password, this.disposeSignal);
+      this.set({ user, isAuthenticated: true });
+      this.bus.emit('toast:show', { message: `Welcome, ${user.firstName}!`, severity: 'success' });
+    } catch (e) {
+      if (!isAbortError(e)) {
+        this.emit('loginFailed', { message: classifyError(e).message });
+      }
+      throw e;
+    }
+  }
+
+  logout() {
+    this.set({ user: null, isAuthenticated: false });
+    this.bus.emit('toast:show', { message: 'Logged out', severity: 'info' });
+  }
+}

package/examples/react/FullApp/src/viewmodels/ConversationsViewModel.ts

@@ -0,0 +1,89 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import type { ConversationState } from '../types/conversation';
+import { MessageService } from '../services/MessageService';
+import { ConversationsCollection } from '../collections/ConversationsCollection';
+import { UsersResource } from '../resources/UsersResource';
+import { AuthViewModel } from './AuthViewModel';
+
+export interface ConversationDisplay extends ConversationState {
+  displayName: string;
+}
+
+interface ConversationsState {
+  search: string;
+  selectedId: string | null;
+  currentUserId: string;
+}
+
+export class ConversationsViewModel extends ViewModel<ConversationsState> {
+  // --- Private fields ---
+  private service = singleton(MessageService);
+  private collection = singleton(ConversationsCollection);
+  private users = singleton(UsersResource);
+
+  // --- Computed getters ---
+  get items(): ConversationState[] {
+    return this.collection.items as ConversationState[];
+  }
+
+  get filtered(): ConversationDisplay[] {
+    const { search, currentUserId } = this.state;
+    let result = this.items;
+
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(conv =>
+        conv.participantIds.some(id => {
+          const user = this.users.get(id);
+          return user
+            ? `${user.firstName} ${user.lastName}`.toLowerCase().includes(q)
+            : false;
+        }),
+      );
+    }
+
+    return result.map(conv => ({
+      ...conv,
+      displayName: conv.participantIds
+        .filter(id => id !== currentUserId)
+        .map(id => {
+          const user = this.users.get(id);
+          return user ? `${user.firstName} ${user.lastName}` : 'Unknown';
+        })
+        .join(', '),
+    }));
+  }
+
+  get selected(): ConversationDisplay | undefined {
+    return this.filtered.find(c => c.id === this.state.selectedId);
+  }
+
+  get totalUnread(): number {
+    return this.items.reduce((sum, c) => sum + c.unreadCount, 0);
+  }
+
+  // --- Lifecycle ---
+  protected onInit() {
+    const auth = singleton(AuthViewModel);
+    const currentUserId = auth.state.user?.id ?? '';
+    this.set({ currentUserId });
+
+    if (this.collection.length === 0) this.load();
+  }
+
+  // --- Actions ---
+  async load() {
+    const conversations = await this.service.getConversations(
+      this.state.currentUserId,
+      this.disposeSignal,
+    );
+    this.collection.reset(conversations);
+  }
+
+  selectConversation(id: string) {
+    this.set({ selectedId: id });
+  }
+
+  // --- Setters ---
+  setSearch(search: string) { this.set({ search }); }
+}

package/examples/react/FullApp/src/viewmodels/DashboardViewModel.ts

@@ -0,0 +1,56 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import type { UserState } from '../types/user';
+import type { LocationState } from '../types/location';
+import { LocationService } from '../services/LocationService';
+import { UsersResource } from '../resources/UsersResource';
+import { LocationsCollection } from '../collections/LocationsCollection';
+
+export class DashboardViewModel extends ViewModel {
+  // --- Private fields ---
+  private users = singleton(UsersResource);
+  private locationService = singleton(LocationService);
+  private locationsCollection = singleton(LocationsCollection);
+
+  // --- Computed getters ---
+  get totalUsers(): number {
+    return this.users.length;
+  }
+
+  get activeUsers(): number {
+    return (this.users.items as UserState[]).filter(u => u.status === 'active').length;
+  }
+
+  get totalLocations(): number {
+    return this.locationsCollection.length;
+  }
+
+  get activeLocations(): number {
+    return (this.locationsCollection.items as LocationState[]).filter(l => l.status === 'active').length;
+  }
+
+  get usersByRole(): Record<string, number> {
+    const counts: Record<string, number> = {};
+    for (const u of this.users.items as UserState[]) {
+      counts[u.role] = (counts[u.role] ?? 0) + 1;
+    }
+    return counts;
+  }
+
+  get recentUsers(): UserState[] {
+    return [...(this.users.items as UserState[])]
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, 5);
+  }
+
+  // --- Lifecycle ---
+  protected onInit() {
+    if (this.users.length === 0) this.users.loadAll();
+    if (this.locationsCollection.length === 0) this.loadLocations();
+  }
+
+  // --- Actions ---
+  async loadLocations() {
+    const locations = await this.locationService.getAll(this.disposeSignal);
+    this.locationsCollection.reset(locations);
+  }
+}

package/examples/react/FullApp/src/viewmodels/LocationProfileViewModel.ts

@@ -0,0 +1,81 @@
+import { ViewModel, singleton, isAbortError } from 'mvc-kit';
+import type { LocationState } from '../types/location';
+import { LocationService } from '../services/LocationService';
+import { LocationsCollection } from '../collections/LocationsCollection';
+import { UsersResource } from '../resources/UsersResource';
+import { AppEventBus } from '../events/AppEventBus';
+import { LocationFormModel } from '../models/LocationFormModel';
+
+interface ProfileState {
+  location: LocationState | null;
+  locationId: string;
+}
+
+interface ProfileEvents {
+  saved: { id: string };
+}
+
+export class LocationProfileViewModel extends ViewModel<ProfileState, ProfileEvents> {
+  // --- Private fields ---
+  private service = singleton(LocationService);
+  private collection = singleton(LocationsCollection);
+  private users = singleton(UsersResource);
+  private bus = singleton(AppEventBus);
+  public model: LocationFormModel | null = null;
+
+  // --- Computed getters ---
+  get managerName(): string {
+    const { location } = this.state;
+    if (!location) return '';
+    const manager = this.users.get(location.managerId);
+    return manager ? `${manager.firstName} ${manager.lastName}` : 'Unknown';
+  }
+
+  // --- Lifecycle ---
+  protected onInit() {
+    this.load();
+  }
+
+  protected onDispose() {
+    this.model?.dispose();
+  }
+
+  // --- Actions ---
+  async load() {
+    const location = await this.service.getById(
+      this.state.locationId,
+      this.disposeSignal,
+    );
+    this.model = new LocationFormModel({
+      name: location.name,
+      type: location.type,
+      city: location.city,
+      state: location.state,
+      address: location.address,
+      capacity: location.capacity,
+    });
+    this.set({ location });
+  }
+
+  async save() {
+    if (!this.model || !this.model.valid) return;
+
+    try {
+      const updated = await this.service.update(
+        this.state.locationId,
+        this.model.state,
+        this.disposeSignal,
+      );
+      this.collection.update(this.state.locationId, updated);
+      this.model.commit();
+      this.set({ location: updated });
+      this.emit('saved', { id: updated.id });
+      this.bus.emit('toast:show', { message: 'Location saved', severity: 'success' });
+    } catch (e) {
+      if (!isAbortError(e)) {
+        this.bus.emit('toast:show', { message: 'Failed to save location', severity: 'error' });
+      }
+      throw e;
+    }
+  }
+}

package/examples/react/FullApp/src/viewmodels/LocationsViewModel.ts

@@ -0,0 +1,113 @@
+import { ViewModel, singleton, Sorting, Pagination, Selection } from 'mvc-kit';
+import type { LocationState } from '../types/location';
+import { LocationService } from '../services/LocationService';
+import { LocationsCollection } from '../collections/LocationsCollection';
+import { AppEventBus } from '../events/AppEventBus';
+
+interface LocationsState {
+  search: string;
+  typeFilter: 'all' | LocationState['type'];
+  statusFilter: 'all' | LocationState['status'];
+}
+
+export class LocationsViewModel extends ViewModel<LocationsState> {
+  // --- Private fields ---
+  private service = singleton(LocationService);
+  collection = singleton(LocationsCollection);
+  private bus = singleton(AppEventBus);
+
+  readonly sorting = new Sorting<LocationState>({ sorts: [{ key: 'name', direction: 'asc' }] });
+  readonly pagination = new Pagination({ pageSize: 10 });
+  readonly selection = new Selection<string>();
+
+  // --- Computed getters ---
+  get items(): LocationState[] {
+    return this.collection.items as LocationState[];
+  }
+
+  get filtered(): LocationState[] {
+    const { search, typeFilter, statusFilter } = this.state;
+    let result = this.items;
+
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(loc =>
+        loc.name.toLowerCase().includes(q) ||
+        loc.city.toLowerCase().includes(q),
+      );
+    }
+    if (typeFilter !== 'all') {
+      result = result.filter(loc => loc.type === typeFilter);
+    }
+    if (statusFilter !== 'all') {
+      result = result.filter(loc => loc.status === statusFilter);
+    }
+    return result;
+  }
+
+  get sorted(): LocationState[] {
+    return this.sorting.apply(this.filtered);
+  }
+
+  get paged(): LocationState[] {
+    return this.pagination.apply(this.sorted);
+  }
+
+  get total(): number {
+    return this.items.length;
+  }
+
+  get filteredCount(): number {
+    return this.filtered.length;
+  }
+
+  get hasResults(): boolean {
+    return this.filtered.length > 0;
+  }
+
+  get isEmpty(): boolean {
+    return this.total > 0 && !this.hasResults;
+  }
+
+  get selectedItems(): LocationState[] {
+    return this.selection.selectedFrom(this.filtered, loc => loc.id);
+  }
+
+  // --- Lifecycle ---
+  protected onInit() {
+    if (this.collection.length === 0) this.load();
+  }
+
+  // --- Actions ---
+  async load() {
+    const data = await this.service.getAll(this.disposeSignal);
+    this.collection.reset(data);
+  }
+
+  async refresh() {
+    await this.load();
+    this.bus.emit('toast:show', { message: 'Locations refreshed', severity: 'info' });
+  }
+
+  async bulkToggleStatus() {
+    const items = this.selectedItems;
+    if (items.length === 0) return;
+
+    for (const loc of items) {
+      const newStatus = loc.status === 'active' ? 'inactive' : 'active';
+      const updated = await this.service.update(loc.id, { status: newStatus }, this.disposeSignal);
+      this.collection.update(loc.id, updated);
+    }
+
+    this.selection.clear();
+    this.bus.emit('toast:show', {
+      message: `Toggled status for ${items.length} location(s)`,
+      severity: 'success',
+    });
+  }
+
+  // --- Setters ---
+  setSearch(search: string) { this.set({ search }); this.pagination.reset(); }
+  setTypeFilter(typeFilter: LocationsState['typeFilter']) { this.set({ typeFilter }); this.pagination.reset(); }
+  setStatusFilter(statusFilter: LocationsState['statusFilter']) { this.set({ statusFilter }); this.pagination.reset(); }
+}

package/examples/react/FullApp/src/viewmodels/MessageThreadViewModel.ts

@@ -0,0 +1,83 @@
+import { ViewModel, singleton, Feed } from 'mvc-kit';
+import type { MessageState } from '../types/message';
+import { MessageService } from '../services/MessageService';
+import { AuthViewModel } from './AuthViewModel';
+
+interface ThreadState {
+  draft: string;
+}
+
+interface ThreadEvents {
+  messageSent: { conversationId: string };
+}
+
+export class MessageThreadViewModel extends ViewModel<ThreadState, ThreadEvents> {
+  // --- Private fields ---
+  private service = singleton(MessageService);
+  private _loadController: AbortController | null = null;
+  private _conversationId: string = '';
+
+  readonly feed = new Feed<MessageState>();
+
+  // --- Computed getters ---
+  get sortedMessages(): MessageState[] {
+    return [...this.feed.items].sort(
+      (a, b) => new Date(a.sentAt).getTime() - new Date(b.sentAt).getTime(),
+    );
+  }
+
+  get canSend(): boolean {
+    return this.state.draft.trim().length > 0;
+  }
+
+  // --- Actions ---
+
+  /** Load messages for a conversation. Cancels any in-flight load via AbortSignal.any(). */
+  async loadConversation(conversationId: string) {
+    // Cancel previous load (per-call cancellation)
+    this._loadController?.abort();
+    this._loadController = new AbortController();
+    this._conversationId = conversationId;
+
+    this.feed.reset();
+
+    const page = await this.service.getMessages(
+      conversationId,
+      AbortSignal.any([this.disposeSignal, this._loadController.signal]),
+    );
+    this.feed.appendPage(page);
+  }
+
+  async loadOlderMessages() {
+    if (!this.feed.hasMore || !this._conversationId) return;
+
+    const page = await this.service.getMessages(
+      this._conversationId,
+      this.disposeSignal,
+      { cursor: this.feed.cursor },
+    );
+    this.feed.appendPage(page);
+  }
+
+  async sendMessage(conversationId: string) {
+    const text = this.state.draft.trim();
+    if (!text) return;
+
+    const auth = singleton(AuthViewModel);
+    const senderId = auth.state.user?.id ?? '';
+
+    const message = await this.service.sendMessage(
+      conversationId,
+      senderId,
+      text,
+      this.disposeSignal,
+    );
+
+    this.feed.push(message);
+    this.set({ draft: '' });
+    this.emit('messageSent', { conversationId });
+  }
+
+  // --- Setters ---
+  setDraft(draft: string) { this.set({ draft }); }
+}

package/examples/react/FullApp/src/viewmodels/UsersViewModel.ts

@@ -0,0 +1,88 @@
+import { ViewModel, singleton, Sorting, Pagination } from 'mvc-kit';
+import type { UserState } from '../types/user';
+import { UserService } from '../services/UserService';
+import { UsersResource } from '../resources/UsersResource';
+
+interface UsersState {
+  search: string;
+  roleFilter: 'all' | UserState['role'];
+  statusFilter: 'all' | UserState['status'];
+}
+
+export class UsersViewModel extends ViewModel<UsersState> {
+  // --- Private fields ---
+  private service = singleton(UserService);
+  private users = singleton(UsersResource);
+
+  readonly sorting = new Sorting<UserState>({ sorts: [{ key: 'firstName', direction: 'asc' }] });
+  readonly pagination = new Pagination({ pageSize: 25 });
+
+  // --- Computed getters ---
+  get items(): UserState[] {
+    return this.users.items as UserState[];
+  }
+
+  get filtered(): UserState[] {
+    const { search, roleFilter, statusFilter } = this.state;
+    let result = this.items;
+
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(u =>
+        u.firstName.toLowerCase().includes(q) ||
+        u.lastName.toLowerCase().includes(q) ||
+        u.email.toLowerCase().includes(q),
+      );
+    }
+    if (roleFilter !== 'all') {
+      result = result.filter(u => u.role === roleFilter);
+    }
+    if (statusFilter !== 'all') {
+      result = result.filter(u => u.status === statusFilter);
+    }
+    return result;
+  }
+
+  get sorted(): UserState[] {
+    return this.sorting.apply(this.filtered);
+  }
+
+  get paged(): UserState[] {
+    return this.pagination.apply(this.sorted);
+  }
+
+  get total(): number {
+    return this.items.length;
+  }
+
+  get filteredCount(): number {
+    return this.filtered.length;
+  }
+
+  get hasResults(): boolean {
+    return this.filtered.length > 0;
+  }
+
+  get isEmpty(): boolean {
+    return this.total > 0 && !this.hasResults;
+  }
+
+  // --- Lifecycle ---
+  protected onInit() {
+    if (this.users.length === 0) this.users.loadAll();
+  }
+
+  // --- Actions ---
+  async toggleStatus(id: string) {
+    const user = this.users.get(id);
+    if (!user) return;
+    const newStatus = user.status === 'active' ? 'inactive' : 'active';
+    const updated = await this.service.update(id, { status: newStatus }, this.disposeSignal);
+    this.users.update(id, updated);
+  }
+
+  // --- Setters ---
+  setSearch(search: string) { this.set({ search }); this.pagination.reset(); }
+  setRoleFilter(roleFilter: UsersState['roleFilter']) { this.set({ roleFilter }); this.pagination.reset(); }
+  setStatusFilter(statusFilter: UsersState['statusFilter']) { this.set({ statusFilter }); this.pagination.reset(); }
+}

package/examples/react/FullApp/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": false,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "mvc-kit": ["../../../src/index.ts"],
+      "mvc-kit/react": ["../../../src/react/index.ts"]
+    }
+  },
+  "include": ["src"]
+}

package/examples/react/FullApp/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  root: import.meta.dirname,
+  define: {
+    __MVC_KIT_DEV__: true,
+  },
+  resolve: {
+    alias: {
+      'mvc-kit/react': resolve(import.meta.dirname, '../../../src/react/index.ts'),
+      'mvc-kit': resolve(import.meta.dirname, '../../../src/index.ts'),
+    },
+  },
+  server: {
+    port: 3000,
+  },
+});

package/examples/react/WorkerApp/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>mvc-kit Worker App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/examples/react/WorkerApp/src/App.tsx

@@ -0,0 +1,24 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AppShell } from './components/layout/AppShell';
+import { LoginPage } from './components/auth/LoginPage';
+import { ShiftPage } from './components/shift/ShiftPage';
+import { SitesPage } from './components/sites/SitesPage';
+import { MessagingPage } from './components/messaging/MessagingPage';
+import { Toast } from './components/shared/Toast';
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route element={<AppShell />}>
+          <Route path="/shift" element={<ShiftPage />} />
+          <Route path="/sites" element={<SitesPage />} />
+          <Route path="/messaging" element={<MessagingPage />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/shift" replace />} />
+      </Routes>
+      <Toast />
+    </BrowserRouter>
+  );
+}