mvc-kit 2.13.0 → 2.13.1

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

@@ -0,0 +1,112 @@
+import { useField } from 'mvc-kit/react';
+import type { LocationFormModel } from '../../models/LocationFormModel';
+
+interface LocationFormProps {
+  model: LocationFormModel;
+  onSave: () => void;
+  saving: boolean;
+}
+
+export function LocationForm({ model, onSave, saving }: LocationFormProps) {
+  const name = useField(model, 'name');
+  const type = useField(model, 'type');
+  const city = useField(model, 'city');
+  const stateName = useField(model, 'state');
+  const address = useField(model, 'address');
+  const capacity = useField(model, 'capacity');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="form-group">
+        <label className="form-label">Name</label>
+        <input
+          className={`form-input ${name.error ? 'error' : ''}`}
+          value={name.value}
+          onChange={e => model.setName(e.target.value)}
+        />
+        {name.error && <div className="form-error">{name.error}</div>}
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Type</label>
+        <select
+          className="form-select"
+          value={type.value}
+          onChange={e => model.setType(e.target.value as 'office' | 'warehouse' | 'retail')}
+        >
+          <option value="office">Office</option>
+          <option value="warehouse">Warehouse</option>
+          <option value="retail">Retail</option>
+        </select>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        <div className="form-group">
+          <label className="form-label">City</label>
+          <input
+            className={`form-input ${city.error ? 'error' : ''}`}
+            value={city.value}
+            onChange={e => model.setCity(e.target.value)}
+          />
+          {city.error && <div className="form-error">{city.error}</div>}
+        </div>
+
+        <div className="form-group">
+          <label className="form-label">State</label>
+          <input
+            className={`form-input ${stateName.error ? 'error' : ''}`}
+            value={stateName.value}
+            onChange={e => model.setStateName(e.target.value)}
+          />
+          {stateName.error && <div className="form-error">{stateName.error}</div>}
+        </div>
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Address</label>
+        <input
+          className={`form-input ${address.error ? 'error' : ''}`}
+          value={address.value}
+          onChange={e => model.setAddress(e.target.value)}
+        />
+        {address.error && <div className="form-error">{address.error}</div>}
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Capacity</label>
+        <input
+          className={`form-input ${capacity.error ? 'error' : ''}`}
+          type="number"
+          value={capacity.value}
+          onChange={e => model.setCapacity(Number(e.target.value))}
+        />
+        {capacity.error && <div className="form-error">{capacity.error}</div>}
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginTop: '1rem' }}>
+        <button
+          type="submit"
+          className="btn btn-primary"
+          disabled={!model.valid || !model.dirty || saving}
+        >
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+        {model.dirty && <span className="dirty-indicator">Unsaved changes</span>}
+        {model.dirty && (
+          <button
+            type="button"
+            className="btn btn-secondary btn-sm"
+            onClick={() => model.rollback()}
+          >
+            Discard
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { useParams, Link } from 'react-router-dom';
+import { useLocal, useEvent } from 'mvc-kit/react';
+import { LocationProfileViewModel } from '../../viewmodels/LocationProfileViewModel';
+import { LocationForm } from './LocationForm';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+
+function LocationProfileContent({ locationId }: { locationId: string }) {
+  const [state, vm] = useLocal(LocationProfileViewModel, {
+    location: null,
+    locationId,
+  });
+  const loadState = vm.async.load;
+  const saveState = vm.async.save;
+
+  useEvent(vm, 'saved', () => {
+    // Toast is handled in the ViewModel via AppEventBus
+  });
+
+  if (loadState.loading) return <Spinner large />;
+  if (loadState.error) return <ErrorBanner message={loadState.error} />;
+  if (!state.location || !vm.model) return null;
+
+  return (
+    <div>
+      <Link to="/locations" className="back-link">
+        &larr; Back to Locations
+      </Link>
+      <h1 className="page-title">{state.location.name}</h1>
+
+      <div className="profile-layout">
+        <div>
+          <div className="card">
+            <h3 className="profile-section-title">Details</h3>
+            <div className="detail-row">
+              <span className="detail-label">Type</span>
+              <span>{state.location.type}</span>
+            </div>
+            <div className="detail-row">
+              <span className="detail-label">Status</span>
+              <span className={`badge badge-${state.location.status}`}>
+                {state.location.status}
+              </span>
+            </div>
+            <div className="detail-row">
+              <span className="detail-label">City</span>
+              <span>{state.location.city}, {state.location.state}</span>
+            </div>
+            <div className="detail-row">
+              <span className="detail-label">Manager</span>
+              <span>{vm.managerName}</span>
+            </div>
+            <div className="detail-row">
+              <span className="detail-label">Capacity</span>
+              <span>{state.location.capacity}</span>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="card">
+            <h3 className="profile-section-title">Edit Location</h3>
+            {saveState.error && <ErrorBanner message={saveState.error} />}
+            <LocationForm
+              model={vm.model}
+              onSave={() => vm.save()}
+              saving={saveState.loading}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LocationProfilePage() {
+  const { id } = useParams<{ id: string }>();
+  if (!id) return null;
+  // key={id} remounts when navigating between different locations
+  return <LocationProfileContent key={id} locationId={id} />;
+}

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>
+  );
+}