create-fluxstack 1.0.13 → 1.0.14

package/app/client/src/store/slices/userSlice.ts

@@ -0,0 +1,161 @@
+/**
+ * User Store
+ * App-specific user store using FluxStack core
+ */
+
+// Temporary direct implementation until module resolution is fixed
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+export interface BaseUser {
+  id: string
+  email: string
+  name: string
+  role: 'admin' | 'user'
+}
+
+// Type aliases for compatibility
+export type User = BaseUser
+
+export interface LoginCredentials {
+  email: string
+  password: string
+}
+
+export interface RegisterData {
+  email: string
+  password: string
+  name: string
+}
+
+export interface BaseUserStore {
+  currentUser: BaseUser | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  error: string | null
+  login: (credentials: { email: string; password: string }) => Promise<void>
+  register: (data: { email: string; password: string; name: string }) => Promise<void>
+  logout: () => void
+  updateProfile: (data: Partial<BaseUser>) => Promise<void>
+  clearError: () => void
+  setLoading: (loading: boolean) => void
+}
+
+// Create user store using Zustand directly (temporary)
+export const useUserStore = create<BaseUserStore>()(
+  persist(
+    (set, get) => ({
+      currentUser: null,
+      isAuthenticated: false,
+      isLoading: false,
+      error: null,
+
+      login: async (credentials) => {
+        set({ isLoading: true, error: null })
+        try {
+          const response = await fetch('/api/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(credentials)
+          })
+
+          if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.message || 'Login failed')
+          }
+
+          const { user } = await response.json()
+          set({
+            currentUser: user,
+            isAuthenticated: true,
+            isLoading: false
+          })
+        } catch (error) {
+          set({
+            error: error instanceof Error ? error.message : 'Login failed',
+            isLoading: false
+          })
+          throw error
+        }
+      },
+
+      register: async (data) => {
+        set({ isLoading: true, error: null })
+        try {
+          const response = await fetch('/api/auth/register', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+          })
+
+          if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.message || 'Registration failed')
+          }
+
+          const { user } = await response.json()
+          set({
+            currentUser: user,
+            isAuthenticated: true,
+            isLoading: false
+          })
+        } catch (error) {
+          set({
+            error: error instanceof Error ? error.message : 'Registration failed',
+            isLoading: false
+          })
+          throw error
+        }
+      },
+
+      logout: () => {
+        fetch('/api/auth/logout', { method: 'POST' }).catch(console.error)
+        set({
+          currentUser: null,
+          isAuthenticated: false,
+          error: null
+        })
+      },
+
+      updateProfile: async (data) => {
+        const { currentUser } = get()
+        if (!currentUser) {
+          throw new Error('No user logged in')
+        }
+
+        set({ isLoading: true, error: null })
+        try {
+          const response = await fetch('/api/user/profile', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+          })
+
+          if (!response.ok) {
+            const error = await response.json()
+            throw new Error(error.message || 'Profile update failed')
+          }
+
+          const { user } = await response.json()
+          set({
+            currentUser: user,
+            isLoading: false
+          })
+        } catch (error) {
+          set({
+            error: error instanceof Error ? error.message : 'Profile update failed',
+            isLoading: false
+          })
+          throw error
+        }
+      },
+
+      clearError: () => set({ error: null }),
+      setLoading: (loading) => set({ isLoading: loading })
+    }),
+    {
+      name: 'user-store',
+      storage: createJSONStorage(() => localStorage)
+    }
+  )
+)

package/app/client/src/test/README.md

@@ -0,0 +1,257 @@
+# FluxStack Testing Guide
+
+Este guia explica como testar o sistema de estado baseado em Zustand no FluxStack.
+
+## 🧪 **Estrutura de Testes**
+
+```
+app/client/src/
+├── store/
+│   ├── __tests__/
+│   │   ├── userSlice.test.ts      # Testes do store de usuário
+│   │   └── uiSlice.test.ts        # Testes do store de UI
+├── hooks/
+│   ├── __tests__/
+│   │   ├── useAuth.test.ts        # Testes do hook de auth
+│   │   └── useNotifications.test.ts # Testes do hook de notificações
+├── components/
+│   └── __tests__/
+│       └── StateDemo.test.tsx     # Testes de integração
+└── test/
+    ├── setup.ts                   # Configuração global
+    ├── types.ts                   # Tipos para testes
+    └── README.md                  # Este arquivo
+```
+
+## 🔧 **Configuração**
+
+### Dependências necessárias:
+
+```json
+{
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.5.1",
+    "jsdom": "^22.1.0",
+    "vitest": "^0.34.6"
+  }
+}
+```
+
+### Configuração do Vitest:
+
+O arquivo `vitest.config.ts` está configurado para:
+- Usar jsdom como ambiente
+- Configurar aliases para imports
+- Incluir setup global
+- Configurar coverage
+
+## 🧪 **Testando Stores Zustand**
+
+### Exemplo básico:
+
+```typescript
+import { renderHook, act } from '@testing-library/react'
+import { useUserStore } from '../slices/userSlice'
+
+describe('useUserStore', () => {
+  beforeEach(() => {
+    // Reset store state
+    useUserStore.setState({
+      currentUser: null,
+      isAuthenticated: false,
+      isLoading: false,
+      error: null
+    })
+  })
+
+  it('should login successfully', async () => {
+    const { result } = renderHook(() => useUserStore())
+
+    await act(async () => {
+      await result.current.login({
+        email: 'test@example.com',
+        password: 'password'
+      })
+    })
+
+    expect(result.current.isAuthenticated).toBe(true)
+  })
+})
+```
+
+### Padrões importantes:
+
+1. **Reset do estado**: Sempre resetar o store antes de cada teste
+2. **act()**: Usar `act()` para mudanças de estado assíncronas
+3. **Mock de APIs**: Mockar fetch para testes isolados
+
+## 🎯 **Testando Hooks Utilitários**
+
+```typescript
+import { renderHook } from '@testing-library/react'
+import { useAuth } from '../useAuth'
+
+describe('useAuth', () => {
+  it('should detect admin user', () => {
+    // Set admin user in store
+    useUserStore.setState({
+      currentUser: { role: 'admin', /* ... */ },
+      isAuthenticated: true
+    })
+
+    const { result } = renderHook(() => useAuth())
+    
+    expect(result.current.isAdmin).toBe(true)
+  })
+})
+```
+
+## 🧩 **Testando Componentes com Estado**
+
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MyComponent } from '../MyComponent'
+import { useUIStore } from '../../store/slices/uiSlice'
+
+describe('MyComponent', () => {
+  beforeEach(() => {
+    // Reset stores
+    useUIStore.setState({ /* initial state */ })
+  })
+
+  it('should update theme when button clicked', () => {
+    render(<MyComponent />)
+    
+    fireEvent.click(screen.getByText('Dark Theme'))
+    
+    expect(screen.getByText('Current theme: dark')).toBeInTheDocument()
+  })
+})
+```
+
+## 🔄 **Mocking APIs**
+
+```typescript
+// Mock fetch globally
+global.fetch = vi.fn()
+
+beforeEach(() => {
+  vi.resetAllMocks()
+})
+
+it('should handle API success', async () => {
+  // Mock successful response
+  ;(global.fetch as any).mockResolvedValueOnce({
+    ok: true,
+    json: async () => ({ user: mockUser })
+  })
+
+  // Test your component/hook
+})
+```
+
+## 📊 **Coverage**
+
+Execute testes com coverage:
+
+```bash
+npm run test:coverage
+```
+
+Isso gerará um relatório em `coverage/index.html`.
+
+## 🎨 **Boas Práticas**
+
+### 1. **Isolamento de Testes**
+- Sempre resetar stores antes de cada teste
+- Mockar APIs externas
+- Não depender de ordem de execução
+
+### 2. **Testes Descritivos**
+```typescript
+// ❌ Ruim
+it('should work', () => { /* ... */ })
+
+// ✅ Bom
+it('should login successfully with valid credentials', () => { /* ... */ })
+```
+
+### 3. **Arrange-Act-Assert**
+```typescript
+it('should add notification', () => {
+  // Arrange
+  const { result } = renderHook(() => useNotifications())
+  
+  // Act
+  act(() => {
+    result.current.success('Title', 'Message')
+  })
+  
+  // Assert
+  expect(result.current.notifications).toHaveLength(1)
+})
+```
+
+### 4. **Testar Comportamentos, não Implementação**
+```typescript
+// ❌ Ruim - testa implementação
+expect(mockSetState).toHaveBeenCalledWith({ loading: true })
+
+// ✅ Bom - testa comportamento
+expect(result.current.isLoading).toBe(true)
+```
+
+## 🚀 **Executando Testes**
+
+```bash
+# Todos os testes
+npm run test:run
+
+# Modo watch
+npm run test:watch
+
+# Com UI
+npm run test:ui
+
+# Apenas stores
+npm run test:client -- store
+
+# Apenas hooks
+npm run test:client -- hooks
+
+# Apenas componentes
+npm run test:client -- components
+```
+
+## 🐛 **Debugging**
+
+### Console logs em testes:
+```typescript
+it('should debug state', () => {
+  const { result } = renderHook(() => useUserStore())
+  
+  console.log('Current state:', result.current)
+  
+  // Seu teste aqui
+})
+```
+
+### Usando screen.debug():
+```typescript
+it('should render correctly', () => {
+  render(<MyComponent />)
+  
+  screen.debug() // Mostra o DOM atual
+  
+  // Seu teste aqui
+})
+```
+
+## 📝 **Exemplos Completos**
+
+Veja os arquivos de teste existentes para exemplos completos:
+- `store/__tests__/userSlice.test.ts` - Testes de store
+- `hooks/__tests__/useAuth.test.ts` - Testes de hooks
+- `components/__tests__/StateDemo.test.tsx` - Testes de integração

package/app/client/src/test/setup.ts

@@ -0,0 +1,70 @@
+/**
+ * Test Setup
+ * Global test configuration and mocks
+ */
+
+import { expect, afterEach, vi } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import * as matchers from '@testing-library/jest-dom/matchers'
+
+// Extend Vitest's expect with jest-dom matchers
+expect.extend(matchers)
+
+// Mock fetch with proper typing
+global.fetch = vi.fn() as any
+
+// Cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup()
+})
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock window.ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+}
+vi.stubGlobal('localStorage', localStorageMock)
+
+// Mock sessionStorage
+const sessionStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+}
+vi.stubGlobal('sessionStorage', sessionStorageMock)
+
+// Mock console methods to reduce noise in tests
+global.console = {
+  ...console,
+  // Uncomment to ignore console logs in tests
+  // log: vi.fn(),
+  // debug: vi.fn(),
+  // info: vi.fn(),
+  // warn: vi.fn(),
+  // error: vi.fn(),
+}

package/app/client/src/test/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Test Types
+ * Type definitions for testing utilities
+ */
+
+import '@testing-library/jest-dom'
+
+declare global {
+  namespace Vi {
+    interface JestAssertion<T = any> extends jest.Matchers<void, T> {}
+  }
+}

package/app/client/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/app/client/tsconfig.app.json

@@ -1,43 +1,44 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Path mapping (alias support) */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/components/*": ["./src/components/*"],
-      "@/utils/*": ["./src/utils/*"],
-      "@/hooks/*": ["./src/hooks/*"],
-      "@/assets/*": ["./src/assets/*"],
-      "@/lib/*": ["./src/lib/*"],
-      "@/types/*": ["./src/types/*"],
-      "@/shared/*": ["../shared/*"],
-      "@/core/*": ["../../core/*"],
-      "@/config/*": ["../../config/*"],
-      "elysia": ["../../node_modules/elysia"]
-    },
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path mapping (alias support) */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/assets/*": ["./src/assets/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/types/*": ["./src/types/*"],
+      "@/shared/*": ["../shared/*"],
+      "@/core/*": ["../../core/*"],
+      "@/config/*": ["../../config/*"],
+      "fluxstack": ["../../core/client/fluxstack"],
+      "elysia": ["../../node_modules/elysia"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/app/client/tsconfig.json

@@ -1,7 +1,7 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/app/client/tsconfig.node.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}