npm - mvc-kit - Versions diffs - 2.13.0 → 2.13.2 - Mend

mvc-kit 2.13.0 → 2.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (218) hide show

package/examples/react/ComplexApp/src/viewmodels/SocialFeedViewModel.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import type { SocialPost } from '../types/social';
+import { SocialFeedResource } from '../resources/SocialFeedResource';
+interface SocialFeedState {
+  page: number;
+}
+export class SocialFeedViewModel extends ViewModel<SocialFeedState> {
+  private resource = singleton(SocialFeedResource);
+  // --- Computed getters ---
+  get posts(): SocialPost[] {
+    return this.resource.items;
+  }
+  get hasMore(): boolean {
+    return this.resource.hasMore;
+  }
+  get postCount(): number {
+    return this.resource.length;
+  }
+  // --- Lifecycle ---
+  protected onInit() {
+    if (this.resource.length === 0) this.loadMore();
+  }
+  // --- Actions ---
+  async loadMore() {
+    const page = this.state.page;
+    this.set({ page: page + 1 });
+    await this.resource.loadPage(page);
+  }
+}

package/examples/react/ComplexApp/src/viewmodels/TrafficCardViewModel.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { TrafficChannel } from '../channels/TrafficChannel';
+import { TrafficCollection } from '../collections/TrafficCollection';
+export class TrafficCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(TrafficChannel);
+  protected collection = singleton(TrafficCollection);
+}

package/examples/react/ComplexApp/src/viewmodels/UsersMetricCardViewModel.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { UsersMetricChannel } from '../channels/UsersMetricChannel';
+import { UsersMetricCollection } from '../collections/UsersMetricCollection';
+export class UsersMetricCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(UsersMetricChannel);
+  protected collection = singleton(UsersMetricCollection);
+}

package/examples/react/ComplexApp/tsconfig.json ADDED Viewed

@@ -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/ComplexApp/vite.config.ts ADDED Viewed

@@ -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: 3001,
+  },
+});

package/examples/react/FullApp/index.html ADDED Viewed

@@ -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 Full Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/examples/react/FullApp/src/App.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AppShell } from './components/layout/AppShell';
+import { LoginPage } from './components/auth/LoginPage';
+import { DashboardPage } from './components/dashboard/DashboardPage';
+import { UsersPage } from './components/users/UsersPage';
+import { LocationsPage } from './components/locations/LocationsPage';
+import { LocationProfilePage } from './components/locations/LocationProfilePage';
+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="/dashboard" element={<DashboardPage />} />
+          <Route path="/users" element={<UsersPage />} />
+          <Route path="/locations" element={<LocationsPage />} />
+          <Route path="/locations/:id" element={<LocationProfilePage />} />
+          <Route path="/messaging" element={<MessagingPage />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+      <Toast />
+    </BrowserRouter>
+  );
+}

package/examples/react/FullApp/src/collections/ConversationsCollection.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Collection } from 'mvc-kit';
+import type { ConversationState } from '../types/conversation';
+export class ConversationsCollection extends Collection<ConversationState> {}

package/examples/react/FullApp/src/collections/LocationsCollection.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Collection } from 'mvc-kit';
+import type { LocationState } from '../types/location';
+export class LocationsCollection extends Collection<LocationState> {}

package/examples/react/FullApp/src/components/auth/LoginPage.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSingleton, useEvent, useModel } from 'mvc-kit/react';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { LoginFormModel } from '../../models/LoginFormModel';
+export function LoginPage() {
+  const [authState, authVM] = useSingleton(AuthViewModel);
+  const { loading, error } = authVM.async.login;
+  const { state, errors, valid, dirty, model } = useModel(
+    () => new LoginFormModel({ email: '', password: '' }),
+  );
+  const navigate = useNavigate();
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (authState.isAuthenticated) {
+      navigate('/dashboard');
+    }
+  }, [authState.isAuthenticated, navigate]);
+  // Show inline error from loginFailed event
+  useEvent(authVM, 'loginFailed', () => {
+    // Error is already shown via vm.async.login error state
+  });
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!valid) return;
+    authVM.login(state.email, state.password);
+  };
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1 className="login-title">mvc-kit Demo</h1>
+        <p className="login-subtitle">
+          Enter any email and password (6+ chars) to log in
+        </p>
+        {error && <div className="error-banner">{error}</div>}
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label className="form-label">Email</label>
+            <input
+              className={`form-input ${errors.email && dirty ? 'error' : ''}`}
+              type="text"
+              value={state.email}
+              onChange={e => model.setEmail(e.target.value)}
+              placeholder="alice@example.com"
+            />
+            {errors.email && dirty && <div className="form-error">{errors.email}</div>}
+          </div>
+          <div className="form-group">
+            <label className="form-label">Password</label>
+            <input
+              className={`form-input ${errors.password && dirty ? 'error' : ''}`}
+              type="password"
+              value={state.password}
+              onChange={e => model.setPassword(e.target.value)}
+              placeholder="6+ characters"
+            />
+            {errors.password && dirty && <div className="form-error">{errors.password}</div>}
+          </div>
+          <button
+            type="submit"
+            className="btn btn-primary"
+            style={{ width: '100%', marginTop: '0.5rem' }}
+            disabled={!valid || loading}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/dashboard/DashboardPage.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { useLocal } from 'mvc-kit/react';
+import { DashboardViewModel } from '../../viewmodels/DashboardViewModel';
+import { StatsCard } from './StatsCard';
+import { RecentActivityCard } from './RecentActivityCard';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+export function DashboardPage() {
+  const [, vm] = useLocal(DashboardViewModel, {});
+  const { loading, error } = vm.async.load;
+  return (
+    <div>
+      <h1 className="page-title">Dashboard</h1>
+      {loading && <Spinner />}
+      {error && <ErrorBanner message={error} />}
+      <div className="stats-grid">
+        <StatsCard title="Total Users" value={vm.totalUsers} subtitle={`${vm.activeUsers} active`} />
+        <StatsCard title="Total Locations" value={vm.totalLocations} subtitle={`${vm.activeLocations} active`} />
+        <StatsCard title="Admins" value={vm.usersByRole['admin'] ?? 0} />
+        <StatsCard title="Managers" value={vm.usersByRole['manager'] ?? 0} />
+      </div>
+      <RecentActivityCard users={vm.recentUsers} />
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/dashboard/RecentActivityCard.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { UserState } from '../../types/user';
+interface RecentActivityCardProps {
+  users: UserState[];
+}
+export function RecentActivityCard({ users }: RecentActivityCardProps) {
+  return (
+    <div className="card">
+      <h3 style={{ marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600 }}>
+        Recent Team Members
+      </h3>
+      <ul className="activity-list">
+        {users.map(user => (
+          <li key={user.id} className="activity-item">
+            <div className="avatar">
+              {user.firstName[0]}{user.lastName[0]}
+            </div>
+            <div>
+              <div style={{ fontWeight: 500 }}>
+                {user.firstName} {user.lastName}
+              </div>
+              <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>
+                {user.role} &middot; Joined {new Date(user.createdAt).toLocaleDateString()}
+              </div>
+            </div>
+            <span className={`badge badge-${user.status}`} style={{ marginLeft: 'auto' }}>
+              {user.status}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/dashboard/StatsCard.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+interface StatsCardProps {
+  title: string;
+  value: number | string;
+  subtitle?: string;
+}
+export function StatsCard({ title, value, subtitle }: StatsCardProps) {
+  return (
+    <div className="stat-card">
+      <div className="stat-value">{value}</div>
+      <div className="stat-label">{title}</div>
+      {subtitle && (
+        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: '0.25rem' }}>
+          {subtitle}
+        </div>
+      )}
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/layout/AppShell.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { useSingleton } from 'mvc-kit/react';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+export function AppShell() {
+  const [state, vm] = useSingleton(AuthViewModel);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!state.isAuthenticated) {
+      navigate('/login');
+    }
+  }, [state.isAuthenticated, navigate]);
+  if (!state.isAuthenticated || !state.user) return null;
+  return (
+    <div className="app-shell">
+      <Sidebar />
+      <div className="main-area">
+        <Header user={state.user} onLogout={() => vm.logout()} />
+        <div className="page-content">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/layout/Header.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import type { UserState } from '../../types/user';
+interface HeaderProps {
+  user: UserState;
+  onLogout: () => void;
+}
+export function Header({ user, onLogout }: HeaderProps) {
+  return (
+    <header className="header">
+      <div />
+      <div className="header-user">
+        <span style={{ fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+          {user.firstName} {user.lastName}
+        </span>
+        <div className="avatar">
+          {user.firstName[0]}{user.lastName[0]}
+        </div>
+        <button className="btn btn-secondary btn-sm" onClick={onLogout}>
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+}

package/examples/react/FullApp/src/components/layout/Sidebar.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { Link, useLocation } from 'react-router-dom';
+const navItems = [
+  { path: '/dashboard', label: 'Dashboard' },
+  { path: '/users', label: 'Users' },
+  { path: '/locations', label: 'Locations' },
+  { path: '/messaging', label: 'Messaging' },
+];
+export function Sidebar() {
+  const { pathname } = useLocation();
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-logo">mvc-kit</div>
+      <nav className="sidebar-nav">
+        {navItems.map(item => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`sidebar-link ${pathname.startsWith(item.path) ? 'active' : ''}`}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}

package/examples/react/FullApp/src/components/locations/LocationFilters.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+import type { LocationState } from '../../types/location';
+interface LocationFiltersProps {
+  search: string;
+  typeFilter: 'all' | LocationState['type'];
+  statusFilter: 'all' | LocationState['status'];
+  onSearchChange: (value: string) => void;
+  onTypeFilterChange: (value: 'all' | LocationState['type']) => void;
+  onStatusFilterChange: (value: 'all' | LocationState['status']) => void;
+}
+export function LocationFilters({
+  search,
+  typeFilter,
+  statusFilter,
+  onSearchChange,
+  onTypeFilterChange,
+  onStatusFilterChange,
+}: LocationFiltersProps) {
+  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 city..."
+        />
+      </div>
+      <div className="filter-group">
+        <label className="filter-label">Type</label>
+        <select
+          className="filter-select"
+          value={typeFilter}
+          onChange={e => onTypeFilterChange(e.target.value as 'all' | LocationState['type'])}
+        >
+          <option value="all">All Types</option>
+          <option value="office">Office</option>
+          <option value="warehouse">Warehouse</option>
+          <option value="retail">Retail</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' | LocationState['status'])}
+        >
+          <option value="all">All Statuses</option>
+          <option value="active">Active</option>
+          <option value="inactive">Inactive</option>
+          <option value="maintenance">Maintenance</option>
+        </select>
+      </div>
+    </div>
+  );
+}

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

@@ -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 ADDED Viewed

@@ -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} />;
+}