mvc-kit 2.12.5 → 2.13.1

package/examples/react/FullApp/src/components/locations/LocationsPage.tsx

@@ -0,0 +1,127 @@
+import { Link } from 'react-router-dom';
+import { useLocal, DataTable } from 'mvc-kit/react';
+import type { Column } from 'mvc-kit/react';
+import { LocationsViewModel } from '../../viewmodels/LocationsViewModel';
+import { LocationFilters } from './LocationFilters';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+import type { LocationState } from '../../types/location';
+
+const columns: Column<LocationState>[] = [
+  {
+    key: 'name',
+    header: 'Name',
+    render: loc => <span style={{ fontWeight: 500 }}>{loc.name}</span>,
+    sortable: true,
+  },
+  {
+    key: 'type',
+    header: 'Type',
+    render: loc => (
+      <span className={`badge badge-${loc.type === 'office' ? 'admin' : loc.type === 'warehouse' ? 'manager' : 'member'}`}>
+        {loc.type}
+      </span>
+    ),
+  },
+  {
+    key: 'city',
+    header: 'City',
+    render: loc => `${loc.city}, ${loc.state}`,
+    sortable: true,
+  },
+  {
+    key: 'status',
+    header: 'Status',
+    render: loc => <span className={`badge badge-${loc.status}`}>{loc.status}</span>,
+    sortable: true,
+  },
+  {
+    key: 'capacity',
+    header: 'Capacity',
+    render: loc => loc.capacity,
+    sortable: true,
+  },
+  {
+    key: 'actions',
+    header: '',
+    render: loc => (
+      <Link to={`/locations/${loc.id}`} className="link">
+        View
+      </Link>
+    ),
+  },
+];
+
+export function LocationsPage() {
+  const [state, vm] = useLocal(LocationsViewModel, {
+    search: '',
+    typeFilter: 'all',
+    statusFilter: 'all',
+  });
+  const { loading, error } = vm.async.load;
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>Locations</h1>
+        <button className="btn btn-secondary" onClick={() => vm.refresh()}>
+          Refresh
+        </button>
+      </div>
+      <div style={{ marginBottom: '1.5rem' }} />
+
+      <LocationFilters
+        search={state.search}
+        typeFilter={state.typeFilter}
+        statusFilter={state.statusFilter}
+        onSearchChange={v => vm.setSearch(v)}
+        onTypeFilterChange={v => vm.setTypeFilter(v)}
+        onStatusFilterChange={v => vm.setStatusFilter(v)}
+      />
+
+      <div className="results-bar">
+        <span>Showing {vm.filteredCount} of {vm.total}</span>
+      </div>
+
+      {vm.selection.hasSelection && (
+        <div className="selection-bar">
+          <span>{vm.selection.count} selected</span>
+          <button
+            className="btn btn-primary btn-sm"
+            onClick={() => vm.bulkToggleStatus()}
+            disabled={vm.async.bulkToggleStatus.loading}
+          >
+            {vm.async.bulkToggleStatus.loading ? 'Toggling...' : 'Toggle Status'}
+          </button>
+        </div>
+      )}
+
+      <DataTable
+        items={vm.paged}
+        columns={columns}
+        loading={loading}
+        error={error}
+        sort={vm.sorting}
+        selection={vm.selection}
+        pagination={vm.pagination}
+        paginationTotal={vm.filteredCount}
+        renderLoading={() => <Spinner />}
+        renderError={msg => <ErrorBanner message={msg} />}
+        renderEmpty={() => <div className="empty-state">No locations match your filters.</div>}
+        renderSortIndicator={({ active, direction }) => (
+          <span>{active ? (direction === 'asc' ? ' ↑' : ' ↓') : ''}</span>
+        )}
+        renderPagination={info => (
+          <div className="pagination-bar">
+            <button disabled={!info.hasPrev} onClick={info.goPrev}>Prev</button>
+            <span>Page {info.page} of {info.pageCount}</span>
+            <button disabled={!info.hasNext} onClick={info.goNext}>Next</button>
+          </div>
+        )}
+        className="table-container"
+      />
+
+      {vm.isEmpty && <div className="empty-state">No locations match your filters.</div>}
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/messaging/ConversationList.tsx

@@ -0,0 +1,59 @@
+import { CardList } from 'mvc-kit/react';
+import type { ConversationDisplay } from '../../viewmodels/ConversationsViewModel';
+
+interface ConversationListProps {
+  conversations: ConversationDisplay[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+}
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+  search,
+  onSearchChange,
+}: ConversationListProps) {
+  return (
+    <div className="conversation-list">
+      <div className="conversation-list-header">
+        <input
+          className="filter-input"
+          style={{ width: '100%', minWidth: 0 }}
+          type="text"
+          value={search}
+          onChange={e => onSearchChange(e.target.value)}
+          placeholder="Search conversations..."
+        />
+      </div>
+      <div className="conversation-list-items">
+        <CardList
+          items={conversations}
+          keyOf={c => c.id}
+          renderItem={conv => (
+            <div
+              className={`conversation-item ${conv.id === selectedId ? 'selected' : ''}`}
+              onClick={() => onSelect(conv.id)}
+            >
+              <div className="conversation-item-header">
+                <span className="conversation-item-name">{conv.displayName}</span>
+                {conv.unreadCount > 0 && (
+                  <span className="conversation-unread">{conv.unreadCount}</span>
+                )}
+              </div>
+              <div className="conversation-item-preview">{conv.lastMessage}</div>
+            </div>
+          )}
+          renderEmpty={() => (
+            <div className="empty-state" style={{ padding: '1.5rem' }}>
+              No conversations found.
+            </div>
+          )}
+          className="conversation-card-list"
+        />
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/messaging/MessageBubble.tsx

@@ -0,0 +1,22 @@
+import type { MessageState } from '../../types/message';
+
+interface MessageBubbleProps {
+  message: MessageState;
+  isMine: boolean;
+  senderName: string;
+}
+
+export function MessageBubble({ message, isMine, senderName }: MessageBubbleProps) {
+  const time = new Date(message.sentAt).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <div className={`message-bubble ${isMine ? 'mine' : 'theirs'}`}>
+      {!isMine && <div className="message-sender">{senderName}</div>}
+      <div>{message.text}</div>
+      <div className="message-time">{time}</div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/messaging/MessageThread.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react';
+import { useLocal, useEvent, InfiniteScroll } from 'mvc-kit/react';
+import { singleton } from 'mvc-kit';
+import { MessageThreadViewModel } from '../../viewmodels/MessageThreadViewModel';
+import { UsersResource } from '../../resources/UsersResource';
+import { MessageBubble } from './MessageBubble';
+import { Spinner } from '../shared/Spinner';
+
+interface MessageThreadProps {
+  conversationId: string;
+  currentUserId: string;
+}
+
+export function MessageThread({ conversationId, currentUserId }: MessageThreadProps) {
+  const [state, vm] = useLocal(MessageThreadViewModel, { draft: '' });
+  const { loading } = vm.async.loadConversation;
+  const loadingMore = vm.async.loadOlderMessages.loading;
+  const messagesRef = useRef<HTMLDivElement>(null);
+
+  // Load messages when conversationId changes (prop-driven, uses AbortSignal.any for cancellation)
+  useEffect(() => {
+    vm.loadConversation(conversationId);
+  }, [conversationId, vm]);
+
+  // Scroll to bottom when new message is sent
+  useEvent(vm, 'messageSent', () => {
+    setTimeout(() => {
+      if (messagesRef.current) {
+        messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+      }
+    }, 50);
+  });
+
+  // Resolve sender names from UsersResource
+  const users = singleton(UsersResource);
+  const getSenderName = (senderId: string): string => {
+    const user = users.get(senderId);
+    return user ? `${user.firstName} ${user.lastName}` : 'Unknown';
+  };
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault();
+    vm.sendMessage(conversationId);
+  };
+
+  const messages = vm.sortedMessages;
+
+  return (
+    <div className="message-thread">
+      <div className="message-thread-header">
+        Messages
+      </div>
+
+      <div
+        className="message-thread-messages"
+        ref={messagesRef}
+      >
+        {loading && <Spinner />}
+        {!loading && (
+          <InfiniteScroll
+            hasMore={vm.feed.hasMore}
+            loading={loadingMore}
+            onLoadMore={() => vm.loadOlderMessages()}
+            direction="up"
+            renderLoading={() => (
+              <div className="spinner-center"><div className="spinner" /></div>
+            )}
+            renderEnd={() => (
+              <div className="feed-end">Beginning of conversation</div>
+            )}
+          >
+            {messages.map(msg => (
+              <MessageBubble
+                key={msg.id}
+                message={msg}
+                isMine={msg.senderId === currentUserId}
+                senderName={getSenderName(msg.senderId)}
+              />
+            ))}
+          </InfiniteScroll>
+        )}
+        {!loading && messages.length === 0 && (
+          <div className="empty-state">No messages yet.</div>
+        )}
+      </div>
+
+      <form className="message-compose" onSubmit={handleSend}>
+        <input
+          type="text"
+          value={state.draft}
+          onChange={e => vm.setDraft(e.target.value)}
+          placeholder="Type a message..."
+        />
+        <button type="submit" className="btn btn-primary" disabled={!vm.canSend}>
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/messaging/MessagingPage.tsx

@@ -0,0 +1,52 @@
+import { useLocal, useSingleton } from 'mvc-kit/react';
+import { ConversationsViewModel } from '../../viewmodels/ConversationsViewModel';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { ConversationList } from './ConversationList';
+import { MessageThread } from './MessageThread';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+
+export function MessagingPage() {
+  const [authState] = useSingleton(AuthViewModel);
+  const [state, vm] = useLocal(ConversationsViewModel, {
+    search: '',
+    selectedId: null,
+    currentUserId: '',
+  });
+  const { loading, error } = vm.async.load;
+
+  const currentUserId = authState.user?.id ?? '';
+
+  return (
+    <div>
+      <h1 className="page-title">Messaging</h1>
+
+      {error && <ErrorBanner message={error} />}
+
+      <div className="messaging-layout">
+        {loading ? (
+          <Spinner />
+        ) : (
+          <ConversationList
+            conversations={vm.filtered}
+            selectedId={state.selectedId}
+            onSelect={id => vm.selectConversation(id)}
+            search={state.search}
+            onSearchChange={v => vm.setSearch(v)}
+          />
+        )}
+
+        {state.selectedId ? (
+          <MessageThread
+            conversationId={state.selectedId}
+            currentUserId={currentUserId}
+          />
+        ) : (
+          <div className="message-thread-empty">
+            Select a conversation to start messaging
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/shared/ErrorBanner.tsx

@@ -0,0 +1,3 @@
+export function ErrorBanner({ message }: { message: string }) {
+  return <div className="error-banner">{message}</div>;
+}

package/examples/react/FullApp/src/components/shared/Spinner.tsx

@@ -0,0 +1,7 @@
+export function Spinner({ large }: { large?: boolean }) {
+  return (
+    <div className="spinner-center">
+      <div className={`spinner ${large ? 'spinner-lg' : ''}`} />
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/shared/Toast.tsx

@@ -0,0 +1,41 @@
+import { useState, useCallback } from 'react';
+import { useSingleton } from 'mvc-kit/react';
+import { useEvent } from 'mvc-kit/react';
+import { AppEventBus } from '../../events/AppEventBus';
+
+interface ToastItem {
+  id: number;
+  message: string;
+  severity: 'success' | 'error' | 'info';
+}
+
+let nextId = 0;
+
+export function Toast() {
+  const bus = useSingleton(AppEventBus);
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const addToast = useCallback((item: Omit<ToastItem, 'id'>) => {
+    const id = nextId++;
+    setToasts(prev => [...prev, { ...item, id }]);
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, 3000);
+  }, []);
+
+  useEvent(bus, 'toast:show', ({ message, severity }) => {
+    addToast({ message, severity });
+  });
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="toast-container">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast toast-${t.severity}`}>
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/users/UserFilters.tsx

@@ -0,0 +1,59 @@
+import type { UserState } from '../../types/user';
+
+interface UserFiltersProps {
+  search: string;
+  roleFilter: 'all' | UserState['role'];
+  statusFilter: 'all' | UserState['status'];
+  onSearchChange: (value: string) => void;
+  onRoleFilterChange: (value: 'all' | UserState['role']) => void;
+  onStatusFilterChange: (value: 'all' | UserState['status']) => void;
+}
+
+export function UserFilters({
+  search,
+  roleFilter,
+  statusFilter,
+  onSearchChange,
+  onRoleFilterChange,
+  onStatusFilterChange,
+}: UserFiltersProps) {
+  return (
+    <div className="filters">
+      <div className="filter-group">
+        <label className="filter-label">Search</label>
+        <input
+          className="filter-input"
+          type="text"
+          value={search}
+          onChange={e => onSearchChange(e.target.value)}
+          placeholder="Search by name or email..."
+        />
+      </div>
+      <div className="filter-group">
+        <label className="filter-label">Role</label>
+        <select
+          className="filter-select"
+          value={roleFilter}
+          onChange={e => onRoleFilterChange(e.target.value as 'all' | UserState['role'])}
+        >
+          <option value="all">All Roles</option>
+          <option value="admin">Admin</option>
+          <option value="manager">Manager</option>
+          <option value="member">Member</option>
+        </select>
+      </div>
+      <div className="filter-group">
+        <label className="filter-label">Status</label>
+        <select
+          className="filter-select"
+          value={statusFilter}
+          onChange={e => onStatusFilterChange(e.target.value as 'all' | UserState['status'])}
+        >
+          <option value="all">All Statuses</option>
+          <option value="active">Active</option>
+          <option value="inactive">Inactive</option>
+        </select>
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/users/UsersPage.tsx

@@ -0,0 +1,80 @@
+import { useLocal } from 'mvc-kit/react';
+import { DataTable } from 'mvc-kit/react';
+import type { Column } from 'mvc-kit/react';
+import { UsersViewModel } from '../../viewmodels/UsersViewModel';
+import { UserFilters } from './UserFilters';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+import type { UserState } from '../../types/user';
+
+const columns: Column<UserState>[] = [
+  {
+    key: 'firstName',
+    header: 'Name',
+    render: u => <span style={{ fontWeight: 500 }}>{u.firstName} {u.lastName}</span>,
+    sortable: true,
+  },
+  { key: 'email', header: 'Email', render: u => u.email, sortable: true },
+  {
+    key: 'role',
+    header: 'Role',
+    render: u => <span className={`badge badge-${u.role}`}>{u.role}</span>,
+  },
+  {
+    key: 'status',
+    header: 'Status',
+    render: u => <span className={`badge badge-${u.status}`}>{u.status}</span>,
+  },
+];
+
+export function UsersPage() {
+  const [state, vm] = useLocal(UsersViewModel, {
+    search: '',
+    roleFilter: 'all',
+    statusFilter: 'all',
+  });
+  const { loading, error } = vm.async.load;
+
+  return (
+    <div>
+      <h1 className="page-title">Users</h1>
+
+      <UserFilters
+        search={state.search}
+        roleFilter={state.roleFilter}
+        statusFilter={state.statusFilter}
+        onSearchChange={v => vm.setSearch(v)}
+        onRoleFilterChange={v => vm.setRoleFilter(v)}
+        onStatusFilterChange={v => vm.setStatusFilter(v)}
+      />
+
+      <div className="results-bar">
+        <span>Showing {vm.filteredCount} of {vm.total}</span>
+      </div>
+
+      <DataTable
+        items={vm.paged}
+        columns={columns}
+        loading={loading}
+        error={error}
+        sort={vm.sorting}
+        pagination={vm.pagination}
+        paginationTotal={vm.filteredCount}
+        renderLoading={() => <Spinner />}
+        renderError={msg => <ErrorBanner message={msg} />}
+        renderEmpty={() => <div className="empty-state">No users match your filters.</div>}
+        renderSortIndicator={({ active, direction }) => (
+          <span>{active ? (direction === 'asc' ? ' \u2191' : ' \u2193') : ''}</span>
+        )}
+        renderPagination={info => (
+          <div className="pagination-bar">
+            <button disabled={!info.hasPrev} onClick={info.goPrev}>Prev</button>
+            <span>Page {info.page} of {info.pageCount}</span>
+            <button disabled={!info.hasNext} onClick={info.goNext}>Next</button>
+          </div>
+        )}
+        className="table-container"
+      />
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/users/UsersTable.tsx

@@ -0,0 +1,52 @@
+import type { UserState } from '../../types/user';
+
+interface UsersTableProps {
+  users: UserState[];
+  onToggleStatus: (id: string) => void;
+}
+
+export function UsersTable({ users, onToggleStatus }: UsersTableProps) {
+  if (users.length === 0) {
+    return <div className="empty-state">No users found.</div>;
+  }
+
+  return (
+    <div className="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map(user => (
+            <tr key={user.id}>
+              <td style={{ fontWeight: 500 }}>
+                {user.firstName} {user.lastName}
+              </td>
+              <td>{user.email}</td>
+              <td>
+                <span className={`badge badge-${user.role}`}>{user.role}</span>
+              </td>
+              <td>
+                <span className={`badge badge-${user.status}`}>{user.status}</span>
+              </td>
+              <td>
+                <button
+                  className="btn btn-secondary btn-sm"
+                  onClick={() => onToggleStatus(user.id)}
+                >
+                  {user.status === 'active' ? 'Deactivate' : 'Activate'}
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/examples/react/FullApp/src/env.d.ts

@@ -0,0 +1,10 @@
+declare const __MVC_KIT_DEV__: boolean;
+
+declare module 'react-dom/client' {
+  import type { ReactNode } from 'react';
+  interface Root {
+    render(children: ReactNode): void;
+    unmount(): void;
+  }
+  export function createRoot(container: Element): Root;
+}

package/examples/react/FullApp/src/events/AppEventBus.ts

@@ -0,0 +1,7 @@
+import { EventBus } from 'mvc-kit';
+
+export interface AppEvents {
+  'toast:show': { message: string; severity: 'success' | 'error' | 'info' };
+}
+
+export class AppEventBus extends EventBus<AppEvents> {}

package/examples/react/FullApp/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/examples/react/FullApp/src/mock/delay.ts

@@ -0,0 +1,21 @@
+export function delay(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException('Aborted', 'AbortError'));
+      return;
+    }
+
+    const timer = setTimeout(resolve, ms);
+
+    signal?.addEventListener('abort', () => {
+      clearTimeout(timer);
+      reject(new DOMException('Aborted', 'AbortError'));
+    }, { once: true });
+  });
+}
+
+export async function mockFetch<T>(data: T, ms?: number, signal?: AbortSignal): Promise<T> {
+  const jitter = 200 + Math.random() * 300;
+  await delay(ms ?? jitter, signal);
+  return data;
+}