snice 4.28.0 → 4.30.0

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

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

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { Context } from 'snice';
+import { errorMiddleware } from '../../src/middleware/error';
+import * as storage from '../../src/services/storage';
+import type { Principal } from '../../src/types/auth';
+
+describe('Error Middleware', () => {
+  let mockContext: Context;
+  let mockNext: any;
+  let originalLocation: Location;
+
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+
+    // Save original location
+    originalLocation = window.location;
+
+    // Mock window.location
+    delete (window as any).location;
+    (window as any).location = { href: '' };
+
+    // Create mock context
+    mockContext = {
+      application: {
+        principal: {
+          user: { id: '1', name: 'Test', email: 'test@example.com' },
+          isAuthenticated: true,
+        } as Principal,
+      },
+      navigation: {
+        route: '/',
+        params: {},
+      },
+      update: vi.fn(),
+    } as unknown as Context;
+
+    // Create mock next function
+    const mockResponse = new Response('{}', { status: 200 });
+    mockNext = vi.fn(() => Promise.resolve(mockResponse));
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+  });
+
+  it('should pass through successful responses', async () => {
+    const mockResponse = new Response('{"data":"ok"}', { status: 200 });
+    const response = await errorMiddleware.call(mockContext, mockResponse, mockNext);
+
+    expect(mockNext).toHaveBeenCalled();
+    expect(response).toBeInstanceOf(Response);
+  });
+
+  it('should handle 401 unauthorized by clearing token and redirecting', async () => {
+    storage.setToken('test-token');
+    const mockResponse = new Response('Unauthorized', { status: 401 });
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Unauthorized - redirecting to login');
+
+    expect(storage.getToken()).toBeNull();
+    const principal = mockContext.application.principal as Principal;
+    expect(principal.user).toBeNull();
+    expect(principal.isAuthenticated).toBe(false);
+    expect(window.location.href).toBe('#/login');
+  });
+
+  it('should throw error for failed requests with JSON error message', async () => {
+    const mockResponse = new Response(
+      JSON.stringify({ message: 'Custom error message' }),
+      {
+        status: 400,
+        headers: { 'content-type': 'application/json' },
+      }
+    );
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Custom error message');
+  });
+
+  it('should throw error for failed requests without JSON body', async () => {
+    const mockResponse = new Response('Internal Server Error', {
+      status: 500,
+      headers: { 'content-type': 'text/plain' },
+    });
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Request failed with status 500');
+  });
+
+  it('should throw generic error for failed JSON requests without message', async () => {
+    const mockResponse = new Response(JSON.stringify({}), {
+      status: 400,
+      headers: { 'content-type': 'application/json' },
+    });
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Request failed with status 400');
+  });
+});