snice 4.29.0 → 4.30.1

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

@@ -0,0 +1,48 @@
+import type { LoginCredentials, LoginResponse, User } from '../types/auth';
+import { setToken, setUser, clearToken, getToken } from './storage';
+import { isTokenExpired } from './jwt';
+
+// Mock API - replace with real API calls
+const MOCK_USER: User = {
+  id: '1',
+  email: 'demo@example.com',
+  name: 'Demo User',
+  avatar: 'https://i.pravatar.cc/150?img=1'
+};
+
+const MOCK_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZW1haWwiOiJkZW1vQGV4YW1wbGUuY29tIiwiaWF0IjoxNjE2MjM5MDIyLCJleHAiOjk5OTk5OTk5OTl9.mock';
+
+export async function login(credentials: LoginCredentials): Promise<LoginResponse> {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  // Mock validation
+  if (credentials.email === 'demo@example.com' && credentials.password === 'demo') {
+    setToken(MOCK_TOKEN);
+    setUser(MOCK_USER);
+
+    return {
+      token: MOCK_TOKEN,
+      user: MOCK_USER
+    };
+  }
+
+  throw new Error('Invalid credentials');
+}
+
+export async function logout(): Promise<void> {
+  clearToken();
+}
+
+export function isAuthenticated(): boolean {
+  const token = getToken();
+  if (!token) return false;
+  return !isTokenExpired(token);
+}
+
+export async function refreshToken(): Promise<string> {
+  // Mock refresh - in real app, call refresh endpoint
+  await new Promise(resolve => setTimeout(resolve, 300));
+  setToken(MOCK_TOKEN);
+  return MOCK_TOKEN;
+}

package/bin/templates/react/src/services/jwt.ts

@@ -0,0 +1,35 @@
+interface JWTPayload {
+  exp?: number;
+  iat?: number;
+  sub?: string;
+  [key: string]: any;
+}
+
+export function decodeJWT(token: string): JWTPayload | null {
+  try {
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+
+    const payload = parts[1];
+    const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+    return JSON.parse(decoded);
+  } catch (err) {
+    console.error('Failed to decode JWT:', err);
+    return null;
+  }
+}
+
+export function isTokenExpired(token: string): boolean {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) return true;
+
+  const now = Math.floor(Date.now() / 1000);
+  return payload.exp < now;
+}
+
+export function getTokenExpiration(token: string): Date | null {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) return null;
+
+  return new Date(payload.exp * 1000);
+}

package/bin/templates/react/src/services/storage.ts

@@ -0,0 +1,24 @@
+const TOKEN_KEY = 'auth_token';
+const USER_KEY = 'auth_user';
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(USER_KEY);
+}
+
+export function getUser<T>(): T | null {
+  const user = localStorage.getItem(USER_KEY);
+  return user ? JSON.parse(user) : null;
+}
+
+export function setUser<T>(user: T): void {
+  localStorage.setItem(USER_KEY, JSON.stringify(user));
+}

package/bin/templates/react/src/styles/global.css

@@ -0,0 +1,382 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--snice-font-family);
+  background: var(--snice-color-background-secondary);
+  color: var(--snice-color-text);
+  line-height: var(--snice-line-height-normal);
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* App Header */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  height: 60px;
+  background: var(--snice-color-background);
+  border-bottom: 1px solid var(--snice-color-border);
+}
+
+.app-header .brand a {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--snice-color-primary);
+  text-decoration: none;
+}
+
+.app-header .nav-links {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.app-header .nav-links a {
+  color: var(--snice-color-text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.app-header .nav-links a:hover {
+  color: var(--snice-color-primary);
+}
+
+.user-section {
+  position: relative;
+}
+
+.user-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--snice-border-radius-lg);
+  color: var(--snice-color-text);
+}
+
+.user-btn:hover {
+  background: var(--snice-color-background-secondary);
+}
+
+.user-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.user-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 0.5rem;
+  min-width: 180px;
+  background: var(--snice-color-background);
+  border: 1px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-lg);
+  box-shadow: var(--snice-shadow-lg);
+  padding: 0.5rem 0;
+  z-index: 100;
+}
+
+.user-menu a,
+.user-menu button {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  color: var(--snice-color-text);
+  text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+.user-menu a:hover,
+.user-menu button:hover {
+  background: var(--snice-color-background-secondary);
+  color: var(--snice-color-primary);
+}
+
+.login-link {
+  color: var(--snice-color-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+/* Notification Badge */
+.notification-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background: var(--snice-color-danger);
+  color: white;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  border-radius: 9px;
+  line-height: 1;
+}
+
+/* Search Bar */
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--snice-color-background);
+  border: 1px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-lg);
+  width: 100%;
+}
+
+.search-bar:focus-within {
+  border-color: var(--snice-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--snice-color-primary) 15%, transparent);
+}
+
+.search-bar .search-icon {
+  color: var(--snice-color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.search-bar input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  color: var(--snice-color-text);
+}
+
+.search-bar input::placeholder {
+  color: var(--snice-color-text-secondary);
+}
+
+.search-bar .clear-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--snice-color-text-secondary);
+  font-size: 0.75rem;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--snice-border-radius-md);
+}
+
+.search-bar .clear-btn:hover {
+  background: var(--snice-color-background-secondary);
+  color: var(--snice-color-text);
+}
+
+/* Page Containers */
+.page-container {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-container-narrow {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.page-container-medium {
+  padding: 2rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* Filter Buttons */
+.filter-btn {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-md);
+  background: var(--snice-color-background);
+  color: var(--snice-color-text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.filter-btn:hover {
+  border-color: var(--snice-color-primary);
+  color: var(--snice-color-primary);
+}
+
+.filter-btn.active {
+  background: var(--snice-color-primary);
+  border-color: var(--snice-color-primary);
+  color: white;
+}
+
+/* Theme Buttons */
+.theme-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--snice-color-background-secondary);
+  border: 2px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-lg);
+  cursor: pointer;
+  color: var(--snice-color-text);
+  font-size: 0.875rem;
+  transition: border-color 0.2s;
+}
+
+.theme-btn:hover {
+  border-color: var(--snice-color-primary);
+}
+
+.theme-btn.active {
+  border-color: var(--snice-color-primary);
+  background: color-mix(in srgb, var(--snice-color-primary) 10%, transparent);
+}
+
+.theme-icon {
+  font-size: 1.5rem;
+}
+
+/* Data Table */
+.data-table {
+  border: 1px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-lg);
+  overflow: hidden;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 1fr 120px 100px;
+  padding: 0.75rem 1rem;
+  background: var(--snice-color-background-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--snice-color-text-secondary);
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 1fr 120px 100px;
+  padding: 1rem;
+  border-top: 1px solid var(--snice-color-border);
+  align-items: center;
+  transition: background 0.15s;
+}
+
+.table-row:hover {
+  background: var(--snice-color-background-secondary);
+}
+
+.col-title strong {
+  display: block;
+  color: var(--snice-color-text);
+  font-size: 0.9375rem;
+}
+
+.col-title .description {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--snice-color-text-secondary);
+  margin-top: 0.125rem;
+}
+
+.col-status {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--snice-color-text);
+  text-transform: capitalize;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.col-date {
+  font-size: 0.8125rem;
+  color: var(--snice-color-text-secondary);
+}
+
+/* Login Page */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(135deg, var(--snice-color-primary) 0%, var(--snice-color-primary-hover) 100%);
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.login-page snice-login {
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-page .hint {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+  color: var(--snice-color-text-secondary);
+  text-align: center;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.notification-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .app-header .nav-links {
+    display: none;
+  }
+  .user-name {
+    display: none;
+  }
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  .theme-options {
+    flex-direction: column;
+  }
+  .filters {
+    flex-wrap: wrap;
+  }
+}

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

@@ -0,0 +1,21 @@
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  token: string;
+  user: User;
+}
+
+export interface Principal {
+  user: User | null;
+  isAuthenticated: boolean;
+}

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

@@ -0,0 +1,9 @@
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+
+export interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: NotificationType;
+  timestamp: string;
+}

package/bin/templates/react/tests/helpers/test-utils.ts

@@ -0,0 +1,79 @@
+/**
+ * Wait for a specified number of milliseconds
+ */
+export async function waitFor(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Wait for a condition to become true
+ */
+export async function waitUntil(
+  condition: () => boolean,
+  timeout = 1000,
+  interval = 10
+): Promise<void> {
+  const start = Date.now();
+  while (!condition()) {
+    if (Date.now() - start > timeout) {
+      throw new Error('Timeout waiting for condition');
+    }
+    await waitFor(interval);
+  }
+}
+
+/**
+ * Create a container div and append it to document.body
+ */
+export function createContainer(id = 'app'): HTMLDivElement {
+  const container = document.createElement('div');
+  container.id = id;
+  document.body.appendChild(container);
+  return container;
+}
+
+/**
+ * Clean up the document body
+ */
+export function cleanup(): void {
+  document.body.innerHTML = '';
+}
+
+/**
+ * Mock localStorage for tests
+ */
+export function mockLocalStorage() {
+  const store: Record<string, string> = {};
+
+  return {
+    getItem: vi.fn((key: string) => store[key] || null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value;
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    }),
+    clear: vi.fn(() => {
+      Object.keys(store).forEach(key => delete store[key]);
+    }),
+  };
+}
+
+/**
+ * Mock fetch for tests
+ */
+export function mockFetch(
+  response: unknown = {},
+  status = 200,
+  ok = true
+) {
+  return vi.fn(() =>
+    Promise.resolve({
+      ok,
+      status,
+      json: () => Promise.resolve(response),
+      text: () => Promise.resolve(JSON.stringify(response)),
+      headers: new Headers(),
+    } as Response)
+  );
+}

package/bin/templates/react/tests/middleware/auth.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { Context } from 'snice';
+import { authMiddleware } from '../../src/middleware/auth';
+import * as storage from '../../src/services/storage';
+
+describe('Auth Middleware', () => {
+  let mockContext: Context;
+  let mockRequest: Request;
+  let mockNext: any;
+
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+
+    // Create mock context
+    mockContext = {
+      application: {
+        principal: {
+          user: null,
+          isAuthenticated: false,
+        },
+      },
+      navigation: {
+        route: '/',
+        params: {},
+      },
+      update: vi.fn(),
+    } as unknown as Context;
+
+    // Create mock request
+    mockRequest = new Request('https://api.example.com/data', {
+      headers: new Headers(),
+    });
+
+    // Create mock next function
+    const mockResponse = new Response('{}', { status: 200 });
+    mockNext = vi.fn(() => Promise.resolve(mockResponse));
+  });
+
+  it('should add Authorization header when token exists', async () => {
+    const token = 'test-token-123';
+    storage.setToken(token);
+
+    await authMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockRequest.headers.get('Authorization')).toBe(`Bearer ${token}`);
+    expect(mockNext).toHaveBeenCalled();
+  });
+
+  it('should not add Authorization header when no token exists', async () => {
+    await authMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockRequest.headers.get('Authorization')).toBeNull();
+    expect(mockNext).toHaveBeenCalled();
+  });
+
+  it('should call next() and return response', async () => {
+    const token = 'test-token-123';
+    storage.setToken(token);
+
+    const response = await authMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockNext).toHaveBeenCalledTimes(1);
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(200);
+  });
+});