snice 4.28.0 → 4.30.0

package/bin/templates/react/src/components/AppHeader.tsx

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSniceContext } from 'snice/react';
+import { Avatar, Divider } from 'snice/react';
+import { NotificationBadge } from './NotificationBadge';
+import type { NotificationsDaemon } from '../daemons/notifications';
+
+export function AppHeader() {
+  const ctx = useSniceContext();
+  const app = ctx.application;
+  const principal = app.principal;
+  const authenticated = principal?.isAuthenticated || false;
+  const user = principal?.user;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [notificationCount, setNotificationCount] = useState(0);
+
+  useEffect(() => {
+    const daemon = app.notifications as NotificationsDaemon | undefined;
+    if (!daemon) return;
+
+    const unsubscribe = daemon.subscribe(() => {
+      setNotificationCount(prev => prev + 1);
+    });
+
+    return unsubscribe;
+  }, [app.notifications]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setMenuOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  const handleLogout = async () => {
+    setMenuOpen(false);
+    await app.logout();
+  };
+
+  return (
+    <header className="app-header">
+      <div className="brand">
+        <a href="#/">{'{{projectName}}'}</a>
+      </div>
+
+      {authenticated ? (
+        <>
+          <nav className="nav-links">
+            <a href="#/dashboard">Dashboard</a>
+            <a href="#/data">Data</a>
+            <a href="#/notifications">
+              <NotificationBadge count={notificationCount} />
+              Notifications
+            </a>
+          </nav>
+
+          <div className="user-section">
+            <button className="user-btn" onClick={() => setMenuOpen(!menuOpen)}>
+              <Avatar
+                src={user?.avatar || ''}
+                name={user?.name || ''}
+                size="small"
+              />
+              <span className="user-name">{user?.name}</span>
+            </button>
+
+            {menuOpen && (
+              <div className="user-menu">
+                <a href="#/profile" onClick={() => setMenuOpen(false)}>Profile</a>
+                <a href="#/settings" onClick={() => setMenuOpen(false)}>Settings</a>
+                <Divider />
+                <button onClick={handleLogout}>Sign Out</button>
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <a href="#/login" className="login-link">Sign In</a>
+      )}
+    </header>
+  );
+}

package/bin/templates/react/src/components/AppLayout.tsx

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { AppHeader } from './AppHeader';
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="app">
+      <AppHeader />
+      <main>{children}</main>
+    </div>
+  );
+}

package/bin/templates/react/src/components/NotificationBadge.tsx

@@ -0,0 +1,13 @@
+interface NotificationBadgeProps {
+  count: number;
+}
+
+export function NotificationBadge({ count }: NotificationBadgeProps) {
+  if (count <= 0) return null;
+
+  return (
+    <span className="notification-badge">
+      {count > 99 ? '99+' : count}
+    </span>
+  );
+}

package/bin/templates/react/src/components/SearchBar.tsx

@@ -0,0 +1,63 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+interface SearchBarProps {
+  placeholder?: string;
+  onSearch: (query: string) => void;
+  debounceMs?: number;
+}
+
+export function SearchBar({ placeholder = 'Search...', onSearch, debounceMs = 300 }: SearchBarProps) {
+  const [value, setValue] = useState('');
+  const timerRef = useRef<number | null>(null);
+
+  const debouncedSearch = useCallback((query: string) => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = window.setTimeout(() => {
+      onSearch(query);
+    }, debounceMs);
+  }, [onSearch, debounceMs]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    debouncedSearch(newValue);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      setValue('');
+      onSearch('');
+    }
+  };
+
+  const clearSearch = () => {
+    setValue('');
+    onSearch('');
+  };
+
+  return (
+    <div className="search-bar">
+      <span className="search-icon">&#128269;</span>
+      <input
+        type="text"
+        value={value}
+        onChange={handleInput}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+      />
+      {value.length > 0 && (
+        <button className="clear-btn" onClick={clearSearch}>&#10005;</button>
+      )}
+    </div>
+  );
+}

package/bin/templates/react/src/daemons/notifications.ts

@@ -0,0 +1,136 @@
+import type { Notification } from '../types/notifications';
+
+type NotificationHandler = (notification: Notification) => void;
+
+export class NotificationsDaemon {
+  private ws: WebSocket | null = null;
+  private handlers: Set<NotificationHandler> = new Set();
+  private reconnectInterval: number = 5000;
+  private reconnectTimer: number | null = null;
+  private mockInterval: number | null = null;
+  private url: string;
+  private isStarted: boolean = false;
+
+  constructor(url: string) {
+    this.url = url;
+  }
+
+  start(): void {
+    if (this.isStarted) return;
+    this.isStarted = true;
+
+    // For demo purposes, use mock notifications instead of real WebSocket
+    // In production, uncomment the connect() line and remove startMockNotifications()
+    // this.connect();
+    this.startMockNotifications();
+  }
+
+  stop(): void {
+    if (!this.isStarted) return;
+    this.isStarted = false;
+
+    this.stopMockNotifications();
+
+    if (this.reconnectTimer !== null) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  dispose(): void {
+    this.stop();
+    this.handlers.clear();
+  }
+
+  subscribe(handler: NotificationHandler): () => void {
+    this.handlers.add(handler);
+    return () => this.handlers.delete(handler);
+  }
+
+  private connect(): void {
+    try {
+      this.ws = new WebSocket(this.url);
+
+      this.ws.onopen = () => {
+        console.log('WebSocket connected');
+      };
+
+      this.ws.onmessage = (event) => {
+        try {
+          const notification: Notification = JSON.parse(event.data);
+          this.notify(notification);
+        } catch (err) {
+          console.error('Failed to parse notification:', err);
+        }
+      };
+
+      this.ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+      };
+
+      this.ws.onclose = () => {
+        console.log('WebSocket disconnected');
+        if (this.isStarted) {
+          this.scheduleReconnect();
+        }
+      };
+    } catch (err) {
+      console.error('Failed to create WebSocket:', err);
+      if (this.isStarted) {
+        this.scheduleReconnect();
+      }
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.reconnectTimer !== null) return;
+
+    this.reconnectTimer = window.setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, this.reconnectInterval);
+  }
+
+  private notify(notification: Notification): void {
+    this.handlers.forEach(handler => {
+      try {
+        handler(notification);
+      } catch (err) {
+        console.error('Notification handler error:', err);
+      }
+    });
+  }
+
+  // Mock notifications for demo
+  private startMockNotifications(): void {
+    const messages = [
+      { title: 'Welcome!', message: 'Thanks for checking out the PWA template', type: 'info' as const },
+      { title: 'New Feature', message: 'Check out the notifications page', type: 'success' as const },
+      { title: 'System Update', message: 'A new version is available', type: 'info' as const },
+      { title: 'Reminder', message: 'Don\'t forget to star the repo!', type: 'warning' as const }
+    ];
+
+    let index = 0;
+    this.mockInterval = window.setInterval(() => {
+      const notification: Notification = {
+        id: `mock-${Date.now()}`,
+        ...messages[index % messages.length],
+        timestamp: new Date().toISOString()
+      };
+      this.notify(notification);
+      index++;
+    }, 10000); // Send notification every 10 seconds
+  }
+
+  private stopMockNotifications(): void {
+    if (this.mockInterval !== null) {
+      clearInterval(this.mockInterval);
+      this.mockInterval = null;
+    }
+  }
+}

package/bin/templates/react/src/fetcher.ts

@@ -0,0 +1,15 @@
+import { ContextAwareFetcher } from 'snice';
+import { authMiddleware } from './middleware/auth';
+import { errorMiddleware } from './middleware/error';
+import { createRetryMiddleware } from './middleware/retry';
+
+const fetcher = new ContextAwareFetcher();
+
+// Add request middleware (runs before fetch)
+fetcher.use('request', authMiddleware);
+fetcher.use('request', createRetryMiddleware());
+
+// Add response middleware (runs after fetch)
+fetcher.use('response', errorMiddleware);
+
+export { fetcher };

package/bin/templates/react/src/guards/auth.ts

@@ -0,0 +1,6 @@
+import type { Principal } from '../types/auth';
+
+export const isAuthenticated = (ctx: any, _params: any) => {
+  const principal = ctx.principal as Principal | undefined;
+  return principal?.isAuthenticated === true;
+};

package/bin/templates/react/src/main.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import 'snice/components/theme/theme.css';
+import './styles/global.css';
+
+// Import snice web component registrations
+import 'snice/components/layout/snice-layout';
+import 'snice/components/button/snice-button';
+import 'snice/components/card/snice-card';
+import 'snice/components/input/snice-input';
+import 'snice/components/alert/snice-alert';
+import 'snice/components/avatar/snice-avatar';
+import 'snice/components/empty-state/snice-empty-state';
+import 'snice/components/spinner/snice-spinner';
+import 'snice/components/badge/snice-badge';
+import 'snice/components/switch/snice-switch';
+import 'snice/components/divider/snice-divider';
+import 'snice/components/tabs/snice-tabs';
+import 'snice/components/tabs/snice-tab';
+import 'snice/components/login/snice-login';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/bin/templates/react/src/middleware/auth.ts

@@ -0,0 +1,16 @@
+import type { Context } from 'snice';
+import { getToken } from '../services/storage';
+
+export async function authMiddleware(
+  this: Context,
+  request: Request,
+  next: () => Promise<Response>
+): Promise<Response> {
+  const token = getToken();
+
+  if (token) {
+    request.headers.set('Authorization', `Bearer ${token}`);
+  }
+
+  return next();
+}

package/bin/templates/react/src/middleware/error.ts

@@ -0,0 +1,29 @@
+import type { Context } from 'snice';
+import { clearToken } from '../services/storage';
+
+export async function errorMiddleware(
+  this: Context,
+  response: Response,
+  next: () => Promise<Response>
+): Promise<Response> {
+  // Handle 401 unauthorized - token expired or invalid
+  if (response.status === 401) {
+    clearToken();
+
+    // Getters in context will reflect logged-out state since token is cleared
+    window.location.href = '#/login';
+    throw new Error('Unauthorized - redirecting to login');
+  }
+
+  // Handle other errors
+  if (!response.ok) {
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+      const error = await response.json();
+      throw new Error(error.message || `Request failed with status ${response.status}`);
+    }
+    throw new Error(`Request failed with status ${response.status}`);
+  }
+
+  return next();
+}

package/bin/templates/react/src/middleware/retry.ts

@@ -0,0 +1,31 @@
+import type { Context } from 'snice';
+
+export function createRetryMiddleware(retries = 3, delay = 1000) {
+  return async function retryMiddleware(
+    this: Context,
+    _request: Request,
+    next: () => Promise<Response>
+  ): Promise<Response> {
+    let lastError: Error;
+
+    for (let i = 0; i < retries; i++) {
+      try {
+        return await next();
+      } catch (err) {
+        lastError = err as Error;
+
+        // Don't retry on certain errors
+        if (err instanceof Error && err.message.includes('Unauthorized')) {
+          throw err;
+        }
+
+        // Wait before retrying (exponential backoff)
+        if (i < retries - 1) {
+          await new Promise(resolve => setTimeout(resolve, delay * (i + 1)));
+        }
+      }
+    }
+
+    throw lastError!;
+  };
+}

package/bin/templates/react/src/pages/DashboardPage.tsx

@@ -0,0 +1,111 @@
+import { useState, useEffect } from 'react';
+import { useSniceContext, Card, Button } from 'snice/react';
+import type { NotificationsDaemon } from '../daemons/notifications';
+
+export function DashboardPage() {
+  const ctx = useSniceContext();
+  const principal = ctx.application.principal;
+  const userName = principal?.user?.name || 'User';
+  const [notificationCount, setNotificationCount] = useState(0);
+
+  useEffect(() => {
+    const daemon = ctx.application.notifications as NotificationsDaemon | undefined;
+    if (!daemon) return;
+
+    const unsubscribe = daemon.subscribe(() => {
+      setNotificationCount(prev => prev + 1);
+    });
+
+    return unsubscribe;
+  }, [ctx.application.notifications]);
+
+  return (
+    <div className="page-container">
+      <div style={{ marginBottom: '2rem' }}>
+        <h1 style={{ color: 'var(--snice-color-primary)', margin: '0 0 0.5rem 0' }}>
+          Welcome, {userName}!
+        </h1>
+        <p style={{ color: 'var(--snice-color-text-secondary)', margin: 0 }}>
+          This is your dashboard
+        </p>
+      </div>
+
+      <div className="stats-grid" style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '1rem',
+        marginBottom: '2rem'
+      }}>
+        <Card style={{ padding: '1.25rem', textAlign: 'center' }}>
+          <span style={{ display: 'block', fontSize: '2rem', fontWeight: 700, color: 'var(--snice-color-primary)' }}>4</span>
+          <span style={{ display: 'block', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)', marginTop: '0.25rem' }}>Active Pages</span>
+        </Card>
+        <Card style={{ padding: '1.25rem', textAlign: 'center' }}>
+          <span style={{ display: 'block', fontSize: '2rem', fontWeight: 700, color: 'var(--snice-color-primary)' }}>{notificationCount}</span>
+          <span style={{ display: 'block', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)', marginTop: '0.25rem' }}>Notifications</span>
+        </Card>
+        <Card style={{ padding: '1.25rem', textAlign: 'center' }}>
+          <span style={{ display: 'block', fontSize: '2rem', fontWeight: 700, color: 'var(--snice-color-primary)' }}>3</span>
+          <span style={{ display: 'block', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)', marginTop: '0.25rem' }}>Middleware</span>
+        </Card>
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gap: '1.5rem'
+      }}>
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Features</h3>
+          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+            <li style={{ margin: '0.5rem 0' }}>JWT Authentication</li>
+            <li style={{ margin: '0.5rem 0' }}>Protected Routes with Guards</li>
+            <li style={{ margin: '0.5rem 0' }}>Middleware Pattern</li>
+            <li style={{ margin: '0.5rem 0' }}>Live Notifications</li>
+            <li style={{ margin: '0.5rem 0' }}>Theme Switching</li>
+            <li style={{ margin: '0.5rem 0' }}>Debounced Search</li>
+            <li style={{ margin: '0.5rem 0' }}>React + Snice Integration</li>
+          </ul>
+        </Card>
+
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Architecture</h3>
+          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+            <li style={{ margin: '0.5rem 0' }}><strong>Pages:</strong> React components</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Components:</strong> Snice adapters + React</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Services:</strong> Business logic</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Middleware:</strong> Fetch interceptors</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Daemons:</strong> Lifecycle classes</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Guards:</strong> Route protection</li>
+          </ul>
+        </Card>
+
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>React Hooks</h3>
+          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+            <li style={{ margin: '0.5rem 0' }}><code>useSniceContext()</code> - App state</li>
+            <li style={{ margin: '0.5rem 0' }}><code>useNavigate()</code> - Navigation</li>
+            <li style={{ margin: '0.5rem 0' }}><code>useParams()</code> - Route params</li>
+            <li style={{ margin: '0.5rem 0' }}><code>useRoute()</code> - Current route</li>
+          </ul>
+        </Card>
+
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Explore</h3>
+          <p style={{ color: 'var(--snice-color-text-secondary)', margin: '0 0 0.5rem 0' }}>Check out the other pages:</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginTop: '1rem' }}>
+            <a href="#/data" style={{ textDecoration: 'none' }}>
+              <Button variant="secondary" style={{ width: '100%' }}>Browse Data</Button>
+            </a>
+            <a href="#/settings" style={{ textDecoration: 'none' }}>
+              <Button variant="secondary" style={{ width: '100%' }}>Settings</Button>
+            </a>
+            <a href="#/notifications" style={{ textDecoration: 'none' }}>
+              <Button variant="secondary" style={{ width: '100%' }}>Notifications</Button>
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/bin/templates/react/src/pages/DataPage.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Spinner, EmptyState } from 'snice/react';
+import { SearchBar } from '../components/SearchBar';
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  status: 'active' | 'pending' | 'archived';
+  createdAt: string;
+}
+
+const MOCK_ITEMS: DataItem[] = [
+  { id: '1', title: 'API Integration', description: 'Connect external payment gateway', status: 'active', createdAt: '2025-01-15' },
+  { id: '2', title: 'User Analytics', description: 'Implement tracking dashboard', status: 'pending', createdAt: '2025-01-20' },
+  { id: '3', title: 'Email Templates', description: 'Design transactional email set', status: 'active', createdAt: '2025-02-01' },
+  { id: '4', title: 'Legacy Migration', description: 'Migrate v1 database schema', status: 'archived', createdAt: '2024-12-10' },
+  { id: '5', title: 'Mobile App', description: 'React Native companion app', status: 'pending', createdAt: '2025-02-15' },
+  { id: '6', title: 'CI/CD Pipeline', description: 'GitHub Actions deployment workflow', status: 'active', createdAt: '2025-01-05' },
+  { id: '7', title: 'Documentation', description: 'API reference and developer guides', status: 'active', createdAt: '2025-02-10' },
+  { id: '8', title: 'Performance Audit', description: 'Lighthouse and Core Web Vitals', status: 'archived', createdAt: '2024-11-20' },
+];
+
+function getStatusColor(status: string): string {
+  const colors: Record<string, string> = {
+    active: 'var(--snice-color-success)',
+    pending: 'var(--snice-color-warning)',
+    archived: 'var(--snice-color-text-secondary)'
+  };
+  return colors[status] || 'var(--snice-color-text-secondary)';
+}
+
+export function DataPage() {
+  const [loading, setLoading] = useState(true);
+  const [allItems, setAllItems] = useState<DataItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'pending' | 'archived'>('all');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAllItems([...MOCK_ITEMS]);
+      setLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const filteredItems = allItems.filter(item => {
+    if (statusFilter !== 'all' && item.status !== statusFilter) return false;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      return item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q);
+    }
+    return true;
+  });
+
+  const handleSearch = useCallback((query: string) => {
+    setSearchQuery(query);
+  }, []);
+
+  return (
+    <div className="page-container-medium">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0, color: 'var(--snice-color-primary)' }}>Data</h1>
+        <span style={{ fontSize: '0.875rem', color: 'var(--snice-color-text-secondary)' }}>
+          {filteredItems.length} items
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
+        <SearchBar placeholder="Search items..." onSearch={handleSearch} />
+
+        <div className="filters" style={{ display: 'flex', gap: '0.5rem' }}>
+          {(['all', 'active', 'pending', 'archived'] as const).map(status => (
+            <button
+              key={status}
+              className={`filter-btn ${statusFilter === status ? 'active' : ''}`}
+              onClick={() => setStatusFilter(status)}
+            >
+              {status.charAt(0).toUpperCase() + status.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
+          <Spinner />
+        </div>
+      ) : filteredItems.length === 0 ? (
+        <EmptyState
+          icon="&#128269;"
+          title="No results"
+          description="Try adjusting your search or filters"
+        />
+      ) : (
+        <div className="data-table">
+          <div className="table-header">
+            <span className="col-title">Title</span>
+            <span className="col-status">Status</span>
+            <span className="col-date">Created</span>
+          </div>
+          {filteredItems.map(item => (
+            <div className="table-row" key={item.id}>
+              <div className="col-title">
+                <strong>{item.title}</strong>
+                <span className="description">{item.description}</span>
+              </div>
+              <div className="col-status">
+                <span className="status-dot" style={{ background: getStatusColor(item.status) }} />
+                {item.status}
+              </div>
+              <div className="col-date">{item.createdAt}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}