create-fullstack-scaffold 0.1.0

package/template/src/client/Layout.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+import { Navigation } from './components/Navigation'
+import { Footer } from './components/Footer'
+
+interface LayoutProps {
+  children: ReactNode
+  className?: string
+  showNavigation?: boolean
+  showFooter?: boolean
+}
+
+export const Layout: React.FC<LayoutProps> = ({
+  children,
+  className = '',
+  showNavigation = true,
+  showFooter = true,
+}) => {
+  return (
+    <div className={`min-h-screen bg-gray-50 ${className}`} data-testid="app-container">
+      {showNavigation && <Navigation />}
+      <main className="py-8" data-testid="app-main">
+        {children}
+      </main>
+      {showFooter && <Footer />}
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+import { useAuthStore } from '../stores/authStore'
+
+export function AuthButton() {
+  const { isAuthenticated, logout, setToken } = useAuthStore()
+
+  const handleLogin = () => {
+    // For development, use a test token
+    // In production, this should call an actual login API
+    const testToken = 'user-token'
+    setToken(testToken)
+    window.location.reload()
+  }
+
+  const handleLogout = () => {
+    logout()
+    window.location.reload()
+  }
+
+  if (isAuthenticated) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-600">已登录</span>
+        <button
+          onClick={handleLogout}
+          className="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600"
+        >
+          退出
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={handleLogin}
+      className="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
+    >
+      登录
+    </button>
+  )
+}

package/template/src/client/components/ConnectionStatus.tsx

@@ -0,0 +1,75 @@
+import { Wifi, WifiOff, Loader2 } from 'lucide-react'
+
+interface ConnectionStatusProps {
+  connected: boolean
+  status?: string
+  loading?: boolean
+  onConnect: () => void
+  onDisconnect: () => void
+  connectDisabled?: boolean
+  disconnectDisabled?: boolean
+  className?: string
+}
+
+export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
+  connected,
+  status,
+  loading = false,
+  onConnect,
+  onDisconnect,
+  connectDisabled = false,
+  disconnectDisabled = false,
+  className = '',
+}) => {
+  const statusText = status || (connected ? 'Connected' : 'Disconnected')
+  const statusColor = connected ? 'text-green-600' : 'text-red-500'
+
+  return (
+    <div
+      className={`p-4 bg-white rounded-xl shadow-sm border border-gray-200 flex flex-wrap items-center justify-between gap-4 ${className}`}
+      data-testid="connection-status"
+    >
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-gray-700">Status:</span>
+        <span className={`flex items-center gap-1 ${statusColor}`}>
+          {loading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : connected ? (
+            <Wifi className="w-4 h-4" />
+          ) : (
+            <WifiOff className="w-4 h-4" />
+          )}
+          {statusText}
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onConnect}
+          disabled={connected || loading || connectDisabled}
+          className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            connected || loading || connectDisabled
+              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              : 'bg-green-500 text-white hover:bg-green-600'
+          }`}
+          data-testid="connect-button"
+        >
+          <Wifi className="w-4 h-4" />
+          Connect
+        </button>
+        <button
+          onClick={onDisconnect}
+          disabled={!connected || disconnectDisabled}
+          className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            !connected || disconnectDisabled
+              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              : 'bg-red-500 text-white hover:bg-red-600'
+          }`}
+          data-testid="disconnect-button"
+        >
+          <WifiOff className="w-4 h-4" />
+          Disconnect
+        </button>
+      </div>
+    </div>
+  )
+}

package/template/src/client/components/EmptyState.tsx

@@ -0,0 +1,26 @@
+import type { LucideIcon } from 'lucide-react'
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description?: string
+  className?: string
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon: Icon,
+  title,
+  description,
+  className = '',
+}) => {
+  return (
+    <div
+      className={`flex flex-col items-center justify-center h-full text-gray-500 ${className}`}
+      data-testid="empty-state"
+    >
+      <Icon className="w-16 h-16 mb-4 text-gray-300" />
+      <p className="text-center">{title}</p>
+      {description && <p className="text-sm text-gray-400 mt-1">{description}</p>}
+    </div>
+  )
+}

package/template/src/client/components/Footer.tsx

@@ -0,0 +1,17 @@
+export const Footer: React.FC = () => {
+  return (
+    <footer
+      className="py-8 text-center text-gray-500 text-sm border-t border-gray-200 bg-white"
+      data-testid="app-footer"
+    >
+      <p className="flex items-center justify-center gap-2">
+        Built with <span className="font-medium text-gray-700">Hono RPC</span> +{' '}
+        <span className="font-medium text-gray-700">React</span> +{' '}
+        <span className="font-medium text-gray-700">TypeScript</span>
+      </p>
+      <p className="mt-2 text-xs text-gray-400">
+        Demonstrates: CRUD Operations | SSE (Server-Sent Events) | WebSocket
+      </p>
+    </footer>
+  )
+}

package/template/src/client/components/LoadingSpinner.tsx

@@ -0,0 +1,26 @@
+import { Loader2 } from 'lucide-react'
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  color?: string
+  className?: string
+}
+
+const sizeMap = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 'md',
+  color = 'text-blue-500',
+  className = '',
+}) => {
+  return (
+    <Loader2
+      className={`animate-spin ${sizeMap[size]} ${color} ${className}`}
+      data-testid="loading-spinner"
+    />
+  )
+}

package/template/src/client/components/MessageCard.tsx

@@ -0,0 +1,61 @@
+import type { ColorScheme } from './StatusBadge'
+
+interface MessageCardProps {
+  type: string
+  payload: Record<string, unknown> | unknown[] | string | number | boolean | null
+  timestamp?: number
+  icon?: React.ComponentType<{ className?: string }>
+  colorScheme?: ColorScheme
+  borderColor?: string
+  className?: string
+  'data-testid'?: string
+}
+
+const colorMap: Record<ColorScheme, { bg: string }> = {
+  gray: { bg: 'bg-gray-500' },
+  blue: { bg: 'bg-blue-500' },
+  green: { bg: 'bg-green-500' },
+  red: { bg: 'bg-red-500' },
+  yellow: { bg: 'bg-yellow-500' },
+  purple: { bg: 'bg-purple-500' },
+  orange: { bg: 'bg-orange-500' },
+  cyan: { bg: 'bg-cyan-500' },
+  indigo: { bg: 'bg-indigo-500' },
+}
+
+export const MessageCard: React.FC<MessageCardProps> = ({
+  type,
+  payload,
+  timestamp,
+  icon: Icon,
+  colorScheme = 'gray',
+  borderColor,
+  className = '',
+  'data-testid': dataTestId = 'message-card',
+}) => {
+  const colors = colorMap[colorScheme]
+  const displayType = type.includes('_') ? type.toUpperCase().replace('_', ' ') : type.toUpperCase()
+
+  return (
+    <div
+      className={`p-4 bg-white rounded-lg border-l-4 shadow-sm ${className}`}
+      style={{ borderLeftColor: borderColor || undefined }}
+      data-testid={dataTestId}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <span
+          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium text-white ${colors.bg}`}
+        >
+          {Icon && <Icon className="w-3 h-3" />}
+          {displayType}
+        </span>
+        {timestamp && (
+          <span className="text-xs text-gray-400">{new Date(timestamp).toLocaleTimeString()}</span>
+        )}
+      </div>
+      <pre className="text-sm text-gray-700 whitespace-pre-wrap break-words font-mono">
+        {JSON.stringify(payload, null, 2)}
+      </pre>
+    </div>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { NavLink } from 'react-router-dom'
+import { CheckCircle, Bell, Plug, Rocket, Github, FileText } from 'lucide-react'
+import { AuthButton } from './AuthButton'
+
+type RouteKey = 'todos' | 'notifications' | 'websocket' | 'content'
+
+const routes: Record<
+  RouteKey,
+  { label: string; icon: React.FC<{ className?: string }>; path: string }
+> = {
+  todos: { label: 'Todo List', icon: CheckCircle, path: '/todos' },
+  content: { label: 'Content', icon: FileText, path: '/content' },
+  notifications: { label: 'Notifications', icon: Bell, path: '/notifications' },
+  websocket: { label: 'WebSocket', icon: Plug, path: '/websocket' },
+}
+
+export const Navigation: React.FC = () => {
+  return (
+    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50" data-testid="app-nav">
+      <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+        <div className="flex items-center gap-8">
+          <h1
+            className="text-xl font-bold text-gray-900 flex items-center gap-2"
+            data-testid="app-title"
+          >
+            <Rocket className="w-6 h-6 text-blue-500" />
+            Biomimic App
+          </h1>
+          <div className="flex items-center gap-1">
+            {(Object.keys(routes) as RouteKey[]).map(route => {
+              const Icon = routes[route].icon
+              return (
+                <NavLink
+                  key={route}
+                  to={routes[route].path}
+                  data-testid={`nav-${route}-button`}
+                  className={({ isActive }) =>
+                    `flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                      isActive ? 'bg-blue-50 text-blue-600' : 'text-gray-600 hover:bg-gray-100'
+                    }`
+                  }
+                >
+                  <Icon className="w-4 h-4" />
+                  {routes[route].label}
+                </NavLink>
+              )
+            })}
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <AuthButton />
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid="github-link"
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <Github className="w-5 h-5" />
+          </a>
+        </div>
+      </div>
+    </nav>
+  )
+}

package/template/src/client/components/StatusBadge.tsx

@@ -0,0 +1,50 @@
+import type { LucideIcon } from 'lucide-react'
+
+export type ColorScheme =
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'yellow'
+  | 'purple'
+  | 'orange'
+  | 'cyan'
+  | 'indigo'
+
+interface StatusBadgeProps {
+  label: string
+  icon?: LucideIcon
+  colorScheme?: ColorScheme
+  className?: string
+}
+
+const colorMap: Record<ColorScheme, { bg: string; text: string }> = {
+  gray: { bg: 'bg-gray-500', text: 'text-gray-500' },
+  blue: { bg: 'bg-blue-500', text: 'text-blue-500' },
+  green: { bg: 'bg-green-500', text: 'text-green-500' },
+  red: { bg: 'bg-red-500', text: 'text-red-500' },
+  yellow: { bg: 'bg-yellow-500', text: 'text-yellow-500' },
+  purple: { bg: 'bg-purple-500', text: 'text-purple-500' },
+  orange: { bg: 'bg-orange-500', text: 'text-orange-500' },
+  cyan: { bg: 'bg-cyan-500', text: 'text-cyan-500' },
+  indigo: { bg: 'bg-indigo-500', text: 'text-indigo-500' },
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  label,
+  icon: Icon,
+  colorScheme = 'gray',
+  className = '',
+}) => {
+  const colors = colorMap[colorScheme]
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium text-white ${colors.bg} ${className}`}
+      data-testid="status-badge"
+    >
+      {Icon && <Icon className="w-3 h-3" />}
+      {label}
+    </span>
+  )
+}

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

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { App } from '@client/App'
+
+vi.mock('@client/pages/TodoPage', () => ({
+  TodoPage: () => <div data-testid="todo-page">Todo Page</div>,
+}))
+
+vi.mock('@client/pages/NotificationPage', () => ({
+  NotificationPage: () => <div data-testid="notification-page">Notification Page</div>,
+}))
+
+vi.mock('@client/pages/WebSocketPage', () => ({
+  WebSocketPage: () => <div data-testid="websocket-page">WebSocket Page</div>,
+}))
+
+describe('App Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    cleanup()
+  })
+
+  describe('Initial Render', () => {
+    it('should render title with correct text', () => {
+      render(<App />)
+      const titleElement = screen.getByTestId('app-title')
+      expect(titleElement).toBeInTheDocument()
+      expect(titleElement).toHaveTextContent('Biomimic App')
+    })
+
+    it('should render navigation', () => {
+      render(<App />)
+      expect(screen.getByTestId('app-nav')).toBeInTheDocument()
+    })
+
+    it('should render footer', () => {
+      render(<App />)
+      expect(screen.getByTestId('app-footer')).toBeInTheDocument()
+    })
+  })
+
+  describe('Navigation Links', () => {
+    it('should render todos nav link', () => {
+      render(<App />)
+      expect(screen.getByTestId('nav-todos-button')).toBeInTheDocument()
+    })
+
+    it('should render notifications nav link', () => {
+      render(<App />)
+      expect(screen.getByTestId('nav-notifications-button')).toBeInTheDocument()
+    })
+
+    it('should render websocket nav link', () => {
+      render(<App />)
+      expect(screen.getByTestId('nav-websocket-button')).toBeInTheDocument()
+    })
+
+    it('should render github link', () => {
+      render(<App />)
+      expect(screen.getByTestId('github-link')).toBeInTheDocument()
+    })
+  })
+
+  describe('Layout', () => {
+    it('should render main content area', () => {
+      render(<App />)
+      expect(screen.getByTestId('app-main')).toBeInTheDocument()
+    })
+
+    it('should render container', () => {
+      render(<App />)
+      expect(screen.getByTestId('app-container')).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { AuthButton } from '../AuthButton'
+
+const mockSetToken = vi.fn()
+const mockSetAuth = vi.fn()
+const mockLogout = vi.fn()
+
+// Mock zustand
+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
+  }),
+}))
+
+import { useAuthStore } from '@client/stores/authStore'
+
+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 => {
+      const state = {
+        isAuthenticated: true,
+        token: 'user-token',
+        user: { id: '1', username: 'admin', role: 'admin' },
+        logout: mockLogout,
+        setToken: mockSetToken,
+        setAuth: mockSetAuth,
+      }
+      return selector ? selector(state) : state
+    })
+
+    render(<AuthButton />)
+
+    expect(screen.getByText('已登录')).toBeInTheDocument()
+    expect(screen.getByText('退出')).toBeInTheDocument()
+    expect(screen.queryByText('登录')).not.toBeInTheDocument()
+  })
+
+  it('should call setToken and reload on login', () => {
+    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 />)
+
+    fireEvent.click(screen.getByText('登录'))
+
+    expect(mockSetToken).toHaveBeenCalledWith('user-token')
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+
+  it('should call logout and reload on logout', () => {
+    vi.mocked(useAuthStore).mockImplementation(selector => {
+      const state = {
+        isAuthenticated: true,
+        token: 'user-token',
+        user: { id: '1', username: 'admin', role: 'admin' },
+        logout: mockLogout,
+        setToken: mockSetToken,
+        setAuth: mockSetAuth,
+      }
+      return selector ? selector(state) : state
+    })
+
+    render(<AuthButton />)
+
+    fireEvent.click(screen.getByText('退出'))
+
+    expect(mockLogout).toHaveBeenCalled()
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+})