create-fullstack-scaffold 0.1.1 → 0.2.0

package/template/src/client/components/__tests__/AuthButton.test.tsx

@@ -1,119 +1,120 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
 import { AuthButton } from '../AuthButton'
 
-const mockSetToken = vi.fn()
-const mockSetAuth = vi.fn()
 const mockLogout = vi.fn()
 
-// Mock zustand
+const unauthenticatedState = {
+  isAuthenticated: false,
+  token: null,
+  user: null,
+  loading: false,
+  error: null,
+  login: vi.fn(),
+  register: vi.fn(),
+  setToken: vi.fn(),
+  setAuth: vi.fn(),
+  logout: mockLogout,
+  clearError: vi.fn(),
+}
+
+const authenticatedState = {
+  isAuthenticated: true,
+  token: 'user-token',
+  user: { id: '1', username: 'testuser', role: 'user' },
+  loading: false,
+  error: null,
+  login: vi.fn(),
+  register: vi.fn(),
+  setToken: vi.fn(),
+  setAuth: vi.fn(),
+  logout: mockLogout,
+  clearError: vi.fn(),
+}
+
 vi.mock('@client/stores/authStore', () => ({
-  useAuthStore: vi.fn(selector => {
-    const state = {
-      isAuthenticated: false,
-      token: null,
-      user: null,
-      logout: mockLogout,
-      setToken: mockSetToken,
-      setAuth: mockSetAuth,
-    }
-    if (selector) {
-      return selector(state)
-    }
-    return state
-  }),
+  useAuthStore: vi.fn(),
 }))
 
 import { useAuthStore } from '@client/stores/authStore'
 
+const mockedUseAuthStore = vi.mocked(useAuthStore)
+
 describe('AuthButton', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    // Mock window.location.reload
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: { reload: vi.fn() },
-    })
-  })
-
-  it('should show login button when not authenticated', () => {
-    vi.mocked(useAuthStore).mockImplementation(selector => {
-      const state = {
-        isAuthenticated: false,
-        token: null,
-        user: null,
-        logout: mockLogout,
-        setToken: mockSetToken,
-        setAuth: mockSetAuth,
-      }
-      return selector ? selector(state) : state
-    })
-
-    render(<AuthButton />)
-
-    expect(screen.getByText('登录')).toBeInTheDocument()
-    expect(screen.queryByText('退出')).not.toBeInTheDocument()
   })
 
-  it('should show logout button when authenticated', () => {
-    vi.mocked(useAuthStore).mockImplementation(selector => {
+  it('should show sign in and sign up links when not authenticated', () => {
+    mockedUseAuthStore.mockImplementation(selector => {
       const state = {
-        isAuthenticated: true,
-        token: 'user-token',
-        user: { id: '1', username: 'admin', role: 'admin' },
-        logout: mockLogout,
-        setToken: mockSetToken,
-        setAuth: mockSetAuth,
+        ...unauthenticatedState,
+        login: vi.fn(),
+        register: vi.fn(),
+        setToken: vi.fn(),
+        setAuth: vi.fn(),
+        clearError: vi.fn(),
       }
       return selector ? selector(state) : state
     })
 
-    render(<AuthButton />)
+    render(
+      <MemoryRouter>
+        <AuthButton />
+      </MemoryRouter>
+    )
 
-    expect(screen.getByText('已登录')).toBeInTheDocument()
-    expect(screen.getByText('退出')).toBeInTheDocument()
-    expect(screen.queryByText('登录')).not.toBeInTheDocument()
+    expect(screen.getByTestId('auth-login')).toBeInTheDocument()
+    expect(screen.getByTestId('auth-register')).toBeInTheDocument()
+    expect(screen.queryByTestId('auth-logout')).not.toBeInTheDocument()
   })
 
-  it('should call setToken and reload on login', () => {
-    vi.mocked(useAuthStore).mockImplementation(selector => {
+  it('should show username and sign out button when authenticated', () => {
+    mockedUseAuthStore.mockImplementation(selector => {
       const state = {
-        isAuthenticated: false,
-        token: null,
-        user: null,
-        logout: mockLogout,
-        setToken: mockSetToken,
-        setAuth: mockSetAuth,
+        ...authenticatedState,
+        login: vi.fn(),
+        register: vi.fn(),
+        setToken: vi.fn(),
+        setAuth: vi.fn(),
+        clearError: vi.fn(),
       }
       return selector ? selector(state) : state
     })
 
-    render(<AuthButton />)
-
-    fireEvent.click(screen.getByText('登录'))
+    render(
+      <MemoryRouter>
+        <AuthButton />
+      </MemoryRouter>
+    )
 
-    expect(mockSetToken).toHaveBeenCalledWith('user-token')
-    expect(window.location.reload).toHaveBeenCalled()
+    expect(screen.getByTestId('auth-username')).toHaveTextContent('testuser')
+    expect(screen.getByTestId('auth-logout')).toBeInTheDocument()
+    expect(screen.queryByTestId('auth-login')).not.toBeInTheDocument()
   })
 
-  it('should call logout and reload on logout', () => {
-    vi.mocked(useAuthStore).mockImplementation(selector => {
+  it('should call logout on sign out click', () => {
+    mockedUseAuthStore.mockImplementation(selector => {
       const state = {
-        isAuthenticated: true,
-        token: 'user-token',
-        user: { id: '1', username: 'admin', role: 'admin' },
-        logout: mockLogout,
-        setToken: mockSetToken,
-        setAuth: mockSetAuth,
+        ...authenticatedState,
+        login: vi.fn(),
+        register: vi.fn(),
+        setToken: vi.fn(),
+        setAuth: vi.fn(),
+        clearError: vi.fn(),
       }
       return selector ? selector(state) : state
     })
 
-    render(<AuthButton />)
+    render(
+      <MemoryRouter>
+        <AuthButton />
+      </MemoryRouter>
+    )
 
-    fireEvent.click(screen.getByText('退出'))
+    fireEvent.click(screen.getByTestId('auth-logout'))
 
     expect(mockLogout).toHaveBeenCalled()
-    expect(window.location.reload).toHaveBeenCalled()
   })
 })

package/template/src/client/components/__tests__/Navigation.test.tsx

@@ -1,40 +1,51 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import { Navigation } from '../Navigation'
-
-vi.mock('@client/stores/todoStore', () => ({
-  useTodoStore: () => ({
-    todos: [{ id: 1, title: 'Test Todo', status: 'pending' }],
-  }),
-}))
+import type { PresetTheme } from '../../preset-ui-config'
+
+const MOCK_THEME: PresetTheme = {
+  primaryColor: '#6366f1',
+  primaryHover: '#4f46e5',
+  bgColor: '#ffffff',
+  textColor: '#111827',
+  secondaryBg: '#f9fafb',
+  borderColor: '#e5e7eb',
+  borderRadius: '12px',
+  logoText: 'Biomimic',
+  fontFamily: 'sans-serif',
+}
 
 const renderWithRouter = (component: React.ReactNode) => {
   return render(<BrowserRouter>{component}</BrowserRouter>)
 }
 
 describe('Navigation', () => {
-  it('should render navigation links', () => {
-    renderWithRouter(<Navigation />)
+  it('should render navigation with items', () => {
+    renderWithRouter(
+      <Navigation
+        items={[
+          { label: 'Dashboard', icon: 'LayoutDashboard', path: '/dashboard' },
+          { label: 'Settings', icon: 'Settings', path: '/settings' },
+        ]}
+        theme={MOCK_THEME}
+      />
+    )
 
-    expect(screen.getByText('Biomimic App')).toBeInTheDocument()
-    expect(screen.getByText('Todo List')).toBeInTheDocument()
-    expect(screen.getByText('Notifications')).toBeInTheDocument()
-    expect(screen.getByText('WebSocket')).toBeInTheDocument()
+    expect(screen.getByTestId('app-nav')).toBeInTheDocument()
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
   })
 
-  it('should display todo count badge', () => {
+  it('should render with no items when nothing provided', () => {
     renderWithRouter(<Navigation />)
 
-    // 组件中没有显示待办数量的徽章
     expect(screen.getByTestId('app-nav')).toBeInTheDocument()
   })
 
-  it('should have correct styling classes', () => {
-    const { container } = renderWithRouter(<Navigation />)
+  it('should display logo text from theme', () => {
+    renderWithRouter(<Navigation theme={MOCK_THEME} />)
 
-    const nav = container.querySelector('nav')
-    expect(nav).toHaveClass('bg-white')
-    expect(nav).toHaveClass('border-b')
+    expect(screen.getByText('Biomimic')).toBeInTheDocument()
   })
 })

package/template/src/client/components/index.ts

@@ -4,3 +4,4 @@ export { EmptyState } from './EmptyState'
 export { ConnectionStatus } from './ConnectionStatus'
 export { MessageCard } from './MessageCard'
 export { AuthButton } from './AuthButton'
+export { BottomTabBar } from './BottomTabBar'

package/template/src/client/contexts/PresetContext.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext } from 'react'
+
+export const PresetContext = createContext<string>('todo')
+
+export function usePreset(): string {
+  return useContext(PresetContext)
+}
+
+export const PresetProvider = PresetContext.Provider

package/template/src/client/main.tsx

@@ -1,18 +1,73 @@
-/**
- * Application entry point
- */
-
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { HelmetProvider } from 'react-helmet-async'
-import { App } from './App'
+import { App as ClientApp } from './App'
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+const preset = import.meta.env.VITE_PRESET || 'todo'
+
+if (preset !== 'saas') {
+  try {
+    const raw = localStorage.getItem('auth-token')
+    const parsed = raw ? JSON.parse(raw) : null
+    if (!parsed?.state?.token) {
+      localStorage.setItem(
+        'auth-token',
+        JSON.stringify({
+          state: {
+            token: 'user-token',
+            isAuthenticated: true,
+            user: { id: 'user-1', username: 'Demo User', role: 'USER' },
+            loading: false,
+            error: null,
+          },
+          version: 0,
+        })
+      )
+    }
+  } catch {
+    localStorage.setItem(
+      'auth-token',
+      JSON.stringify({
+        state: {
+          token: 'user-token',
+          isAuthenticated: true,
+          user: { id: 'user-1', username: 'Demo User', role: 'USER' },
+          loading: false,
+          error: null,
+        },
+        version: 0,
+      })
+    )
+  }
+}
+
+const AdminApp = React.lazy(() => import('@admin/App').then(m => ({ default: m.App })))
+
+const RootApp = () => {
+  if (preset === 'saas') {
+    return (
+      <React.Suspense
+        fallback={
+          <div className="flex items-center justify-center h-screen text-gray-400">Loading...</div>
+        }
+      >
+        <AdminApp basePath="/" />
+      </React.Suspense>
+    )
+  }
+
+  return (
     <HelmetProvider>
-      <App />
+      <ClientApp presetId={preset} />
     </HelmetProvider>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RootApp />
   </React.StrictMode>
 )
 

package/template/src/client/pages/CartPage.tsx

@@ -0,0 +1,244 @@
+import { useState, useEffect } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { Package, Minus, Plus, Trash2, ShoppingBag, ArrowLeft } from 'lucide-react'
+import { apiClient } from '@client/services/apiClient'
+import { LoadingSpinner } from '@client/components'
+import type { CartItem } from '@shared/schemas'
+
+const SHIPPING_THRESHOLD = 50
+const TAX_RATE = 0.08
+
+export const CartPage: React.FC = () => {
+  const [items, setItems] = useState<CartItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchCart() {
+      try {
+        const res = await apiClient.api.cart.$get()
+        const result = await res.json()
+        if (result.success) {
+          setItems(result.data.items)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchCart()
+  }, [])
+
+  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const shipping = subtotal >= SHIPPING_THRESHOLD ? 0 : 5.99
+  const tax = subtotal * TAX_RATE
+  const total = subtotal + shipping + tax
+  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0)
+
+  const updateQuantity = (id: number, delta: number) => {
+    setItems(prev =>
+      prev
+        .map(item =>
+          item.id === id ? { ...item, quantity: Math.max(0, item.quantity + delta) } : item
+        )
+        .filter(item => item.quantity > 0)
+    )
+  }
+
+  const removeItem = (id: number) => {
+    setItems(prev => prev.filter(item => item.id !== id))
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20" data-testid="cart-loading">
+        <LoadingSpinner size="lg" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-4 sm:p-6" data-testid="cart-page">
+      <Helmet>
+        <title>Shopping Cart - Biomimic App</title>
+        <meta name="description" content="Review your shopping cart" />
+      </Helmet>
+
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900" data-testid="cart-title">
+          Shopping Cart
+          {totalItems > 0 && (
+            <span className="text-lg font-normal text-gray-500 ml-2">
+              ({totalItems} item{totalItems !== 1 ? 's' : ''})
+            </span>
+          )}
+        </h1>
+      </div>
+
+      {items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20" data-testid="cart-empty">
+          <div className="w-20 h-20 rounded-full bg-amber-50 flex items-center justify-center mb-6">
+            <ShoppingBag className="w-10 h-10 text-amber-500" />
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">Your cart is empty</h2>
+          <p className="text-gray-500 mb-6">Looks like you haven&apos;t added anything yet.</p>
+          <button
+            className="px-6 py-3 bg-amber-500 text-white font-medium rounded-xl hover:bg-amber-600 transition-colors"
+            data-testid="cart-browse-button"
+          >
+            Browse Products
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-4" data-testid="cart-items">
+            {items.map(item => (
+              <div
+                key={item.id}
+                className="flex gap-4 p-4 bg-white rounded-xl border border-gray-200 shadow-sm"
+                data-testid={`cart-item-${item.id}`}
+              >
+                <div
+                  className="w-20 h-20 sm:w-24 sm:h-24 rounded-xl flex items-center justify-center flex-shrink-0"
+                  style={{ backgroundColor: item.color }}
+                  data-testid={`cart-item-image-${item.id}`}
+                >
+                  <Package className="w-8 h-8 text-white/70" />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div>
+                      <h3
+                        className="font-medium text-gray-900 truncate"
+                        data-testid={`cart-item-name-${item.id}`}
+                      >
+                        {item.name}
+                      </h3>
+                      <p
+                        className="text-sm text-gray-500"
+                        data-testid={`cart-item-variant-${item.id}`}
+                      >
+                        {item.variant}
+                      </p>
+                    </div>
+                    <button
+                      onClick={() => removeItem(item.id)}
+                      className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors flex-shrink-0"
+                      data-testid={`cart-item-remove-${item.id}`}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+
+                  <div className="flex items-center justify-between mt-3">
+                    <div
+                      className="flex items-center gap-2"
+                      data-testid={`cart-item-qty-${item.id}`}
+                    >
+                      <button
+                        onClick={() => updateQuantity(item.id, -1)}
+                        className="w-8 h-8 rounded-lg border border-gray-300 flex items-center justify-center text-gray-600 hover:bg-gray-50 transition-colors"
+                        data-testid={`cart-item-decrease-${item.id}`}
+                      >
+                        <Minus className="w-3 h-3" />
+                      </button>
+                      <span
+                        className="w-8 text-center text-sm font-medium text-gray-900"
+                        data-testid={`cart-item-count-${item.id}`}
+                      >
+                        {item.quantity}
+                      </span>
+                      <button
+                        onClick={() => updateQuantity(item.id, 1)}
+                        className="w-8 h-8 rounded-lg border border-gray-300 flex items-center justify-center text-gray-600 hover:bg-gray-50 transition-colors"
+                        data-testid={`cart-item-increase-${item.id}`}
+                      >
+                        <Plus className="w-3 h-3" />
+                      </button>
+                    </div>
+
+                    <div className="text-right">
+                      <p
+                        className="text-sm text-gray-500"
+                        data-testid={`cart-item-unit-price-${item.id}`}
+                      >
+                        ${item.price.toFixed(2)} each
+                      </p>
+                      <p
+                        className="font-semibold text-gray-900"
+                        data-testid={`cart-item-total-${item.id}`}
+                      >
+                        ${(item.price * item.quantity).toFixed(2)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="lg:col-span-1" data-testid="cart-summary">
+            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6 sticky top-6">
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Order Summary</h2>
+
+              <div className="space-y-3">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Subtotal</span>
+                  <span className="text-gray-900 font-medium" data-testid="cart-subtotal">
+                    ${subtotal.toFixed(2)}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Shipping</span>
+                  <span className="text-gray-900 font-medium" data-testid="cart-shipping">
+                    {shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Tax</span>
+                  <span className="text-gray-900 font-medium" data-testid="cart-tax">
+                    ${tax.toFixed(2)}
+                  </span>
+                </div>
+
+                <div className="border-t border-gray-200 pt-3 mt-3">
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-900">Total</span>
+                    <span className="font-bold text-gray-900 text-lg" data-testid="cart-total">
+                      ${total.toFixed(2)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <button
+                className="w-full mt-6 px-6 py-3 bg-amber-500 text-white font-semibold rounded-xl hover:bg-amber-600 transition-colors"
+                data-testid="cart-checkout-button"
+              >
+                Checkout
+              </button>
+
+              <div className="mt-4 text-center">
+                <button
+                  className="inline-flex items-center gap-1.5 text-sm text-amber-600 hover:text-amber-700 font-medium transition-colors"
+                  data-testid="cart-continue-shopping"
+                >
+                  <ArrowLeft className="w-3.5 h-3.5" />
+                  Continue Shopping
+                </button>
+              </div>
+
+              {subtotal < SHIPPING_THRESHOLD && subtotal > 0 && (
+                <p
+                  className="mt-4 text-xs text-gray-500 text-center"
+                  data-testid="cart-shipping-note"
+                >
+                  Add ${(SHIPPING_THRESHOLD - subtotal).toFixed(2)} more for free shipping
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}