create-fullstack-scaffold 0.1.1 → 0.2.0

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

@@ -0,0 +1,220 @@
+import { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { Settings as SettingsIcon, Users, CreditCard, Key, Bell, Save } from 'lucide-react'
+
+type TabKey = 'general' | 'team' | 'billing' | 'api-keys' | 'notifications'
+
+interface Tab {
+  id: TabKey
+  label: string
+  icon: React.FC<{ className?: string }>
+}
+
+const tabs: Tab[] = [
+  { id: 'general', label: 'General', icon: SettingsIcon },
+  { id: 'team', label: 'Team', icon: Users },
+  { id: 'billing', label: 'Billing', icon: CreditCard },
+  { id: 'api-keys', label: 'API Keys', icon: Key },
+  { id: 'notifications', label: 'Notifications', icon: Bell },
+]
+
+const timezones = [
+  'UTC',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'Europe/London',
+  'Europe/Paris',
+  'Asia/Tokyo',
+  'Asia/Shanghai',
+  'Australia/Sydney',
+]
+
+const languages = [
+  'English',
+  'Chinese (Simplified)',
+  'Chinese (Traditional)',
+  'Japanese',
+  'Korean',
+  'Spanish',
+  'French',
+  'German',
+]
+
+export const SettingsPage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<TabKey>('general')
+  const [orgName, setOrgName] = useState('Acme Corp')
+  const [orgUrl, setOrgUrl] = useState('acme-corp')
+  const [timezone, setTimezone] = useState('America/New_York')
+  const [language, setLanguage] = useState('English')
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8" data-testid="settings-page">
+      <Helmet>
+        <title>Settings - SaaS Admin</title>
+        <meta name="description" content="Manage organization settings" />
+      </Helmet>
+
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Settings</h1>
+          <p className="mt-1 text-sm text-gray-500">Manage your organization settings</p>
+        </div>
+
+        <div className="flex flex-col lg:flex-row gap-6">
+          <nav
+            className="flex lg:flex-col gap-1 lg:w-56 shrink-0 overflow-x-auto lg:overflow-visible"
+            data-testid="settings-tabs"
+          >
+            {tabs.map(tab => {
+              const Icon = tab.icon
+              const isActive = activeTab === tab.id
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  data-testid={`tab-${tab.id}`}
+                  className={`flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
+                    isActive
+                      ? 'bg-gray-800 text-white'
+                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                  }`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {tab.label}
+                </button>
+              )
+            })}
+          </nav>
+
+          <div className="flex-1 min-w-0">
+            {activeTab === 'general' && (
+              <div
+                className="bg-white rounded-lg border border-gray-200 p-5 sm:p-6"
+                data-testid="general-settings-content"
+              >
+                <h2 className="text-lg font-semibold text-gray-900 mb-6">General Settings</h2>
+
+                <div className="space-y-5 max-w-lg">
+                  <div>
+                    <label
+                      htmlFor="org-name"
+                      className="block text-sm font-medium text-gray-700 mb-1.5"
+                    >
+                      Organization Name
+                    </label>
+                    <input
+                      id="org-name"
+                      type="text"
+                      value={orgName}
+                      onChange={e => setOrgName(e.target.value)}
+                      data-testid="input-org-name"
+                      className="w-full px-3.5 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent outline-none transition-all"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="org-url"
+                      className="block text-sm font-medium text-gray-700 mb-1.5"
+                    >
+                      Organization URL
+                    </label>
+                    <div className="flex">
+                      <span className="inline-flex items-center px-3.5 rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 text-sm text-gray-500">
+                        https://
+                      </span>
+                      <input
+                        id="org-url"
+                        type="text"
+                        value={orgUrl}
+                        onChange={e => setOrgUrl(e.target.value)}
+                        data-testid="input-org-url"
+                        className="flex-1 px-3.5 py-2.5 text-sm border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent outline-none transition-all"
+                      />
+                    </div>
+                    <p className="mt-1 text-xs text-gray-400">
+                      This will be your organization&apos;s public URL
+                    </p>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="timezone"
+                      className="block text-sm font-medium text-gray-700 mb-1.5"
+                    >
+                      Timezone
+                    </label>
+                    <select
+                      id="timezone"
+                      value={timezone}
+                      onChange={e => setTimezone(e.target.value)}
+                      data-testid="select-timezone"
+                      className="w-full px-3.5 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent outline-none transition-all bg-white"
+                    >
+                      {timezones.map(tz => (
+                        <option key={tz} value={tz}>
+                          {tz}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="language"
+                      className="block text-sm font-medium text-gray-700 mb-1.5"
+                    >
+                      Language
+                    </label>
+                    <select
+                      id="language"
+                      value={language}
+                      onChange={e => setLanguage(e.target.value)}
+                      data-testid="select-language"
+                      className="w-full px-3.5 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-800 focus:border-transparent outline-none transition-all bg-white"
+                    >
+                      {languages.map(lang => (
+                        <option key={lang} value={lang}>
+                          {lang}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="pt-4">
+                    <button
+                      data-testid="save-settings"
+                      className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
+                    >
+                      <Save className="w-4 h-4" />
+                      Save Changes
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab !== 'general' && (
+              <div
+                className="bg-white rounded-lg border border-gray-200 p-5 sm:p-6"
+                data-testid={`${activeTab}-settings-content`}
+              >
+                <h2 className="text-lg font-semibold text-gray-900 mb-2">
+                  {tabs.find(t => t.id === activeTab)?.label} Settings
+                </h2>
+                <p className="text-sm text-gray-500">
+                  {activeTab === 'team' && 'Manage team members and permissions.'}
+                  {activeTab === 'billing' && 'Manage billing and subscription details.'}
+                  {activeTab === 'api-keys' && 'Manage API keys for integrations.'}
+                  {activeTab === 'notifications' && 'Configure notification preferences.'}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,180 @@
+import { useState, useEffect, useMemo } from 'react'
+import { NavLink } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import { ChevronUp, ChevronDown, MessageSquare, Eye, Search, Plus } from 'lucide-react'
+import { apiClient } from '@client/services/apiClient'
+import { LoadingSpinner } from '@client/components'
+import type { TopicStatus, Topic } from '@shared/schemas'
+
+type FilterType = 'all' | TopicStatus
+
+const FILTERS: { value: FilterType; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'hot', label: 'Hot' },
+  { value: 'unanswered', label: 'Unanswered' },
+  { value: 'solved', label: 'Solved' },
+]
+
+export const TopicsPage: React.FC = () => {
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<FilterType>('all')
+  const [topics, setTopics] = useState<Topic[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchTopics() {
+      try {
+        const endpoint = filter === 'hot' ? apiClient.api.topics.popular : apiClient.api.topics
+        const res = await endpoint.$get()
+        const result = await res.json()
+        if (result.success) {
+          const d = result.data as unknown
+          setTopics(Array.isArray(d) ? d : ((d as Record<string, unknown>).topics as Topic[]) ?? [])
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchTopics()
+  }, [filter])
+
+  const filteredTopics = useMemo(() => {
+    if (!search.trim()) return topics
+    const q = search.toLowerCase()
+    return topics.filter(
+      t =>
+        t.title.toLowerCase().includes(q) ||
+        t.excerpt.toLowerCase().includes(q) ||
+        t.tags.some(tag => tag.label.toLowerCase().includes(q))
+    )
+  }, [search, topics])
+
+  const voteColor = (votes: number) =>
+    votes > 0 ? 'text-emerald-600' : votes < 0 ? 'text-red-500' : 'text-gray-400'
+
+  return (
+    <div className="min-h-screen bg-white" data-testid="topics-page">
+      <Helmet>
+        <title>Community Forum</title>
+        <meta name="description" content="Browse and discuss community topics" />
+      </Helmet>
+
+      <div className="bg-gradient-to-b from-emerald-50 to-white pt-12 pb-10 px-4 sm:px-6">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 tracking-tight">Community Forum</h1>
+              <p className="mt-1 text-gray-500">
+                Ask questions, share knowledge, connect with others
+              </p>
+            </div>
+            <button className="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-xl shadow-sm shadow-emerald-500/25 transition-colors self-start sm:self-auto">
+              <Plus className="w-4 h-4" />
+              Ask Question
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 -mt-4 pb-16">
+        <div className="flex flex-col sm:flex-row gap-3 mb-6">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="Search topics..."
+              className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-shadow text-sm"
+            />
+          </div>
+          <div className="flex gap-2 flex-wrap">
+            {FILTERS.map(f => (
+              <button
+                key={f.value}
+                onClick={() => setFilter(f.value)}
+                className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${
+                  filter === f.value
+                    ? 'bg-emerald-500 text-white shadow-sm shadow-emerald-500/25'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-20" data-testid="topics-loading">
+            <LoadingSpinner size="lg" />
+          </div>
+        ) : filteredTopics.length === 0 ? (
+          <div className="text-center py-20">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
+              <MessageSquare className="w-7 h-7 text-gray-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 mb-1">No topics found</h3>
+            <p className="text-gray-500 text-sm">Try adjusting your search or filter</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filteredTopics.map(topic => (
+              <NavLink
+                key={topic.id}
+                to={`/topics/${topic.id}`}
+                className="flex gap-4 p-4 bg-white rounded-2xl border border-gray-100 hover:border-emerald-200 hover:shadow-md hover:shadow-emerald-500/5 transition-all group"
+              >
+                <div className="flex flex-col items-center gap-0.5 pt-0.5 min-w-[48px]">
+                  <ChevronUp className="w-4 h-4 text-gray-400 hover:text-emerald-500 cursor-pointer" />
+                  <span className={`text-sm font-bold ${voteColor(topic.votes)}`}>
+                    {topic.votes}
+                  </span>
+                  <ChevronDown className="w-4 h-4 text-gray-400 hover:text-red-400 cursor-pointer" />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-gray-900 group-hover:underline decoration-emerald-400 underline-offset-2 leading-snug">
+                    {topic.title}
+                  </h3>
+                  <p className="mt-1 text-sm text-gray-500 line-clamp-2 leading-relaxed">
+                    {topic.excerpt}
+                  </p>
+                  <div className="mt-2.5 flex flex-wrap items-center gap-2">
+                    {topic.tags.map(tag => (
+                      <span
+                        key={tag.label}
+                        className={`px-2.5 py-0.5 rounded-lg text-xs font-medium ${tag.color}`}
+                      >
+                        {tag.label}
+                      </span>
+                    ))}
+                    <span className="text-xs text-gray-400 mx-1">·</span>
+                    <div className="flex items-center gap-1.5">
+                      <div className="w-5 h-5 rounded-full bg-emerald-100 text-emerald-700 text-[10px] font-bold flex items-center justify-center">
+                        {topic.author.initials}
+                      </div>
+                      <span className="text-xs text-gray-600">{topic.author.name}</span>
+                      <span className="text-xs text-gray-400">{topic.createdAt}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="hidden sm:flex flex-col items-end justify-center gap-1 text-xs text-gray-400 min-w-[80px]">
+                  <div className="flex items-center gap-1">
+                    <MessageSquare className="w-3.5 h-3.5" />
+                    <span>{topic.replyCount}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Eye className="w-3.5 h-3.5" />
+                    <span>{topic.viewCount}</span>
+                  </div>
+                </div>
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/template/src/client/pages/__tests__/LoginPage.test.tsx

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { HelmetProvider } from 'react-helmet-async'
+import { LoginPage } from '../LoginPage'
+import { MemoryRouter } from 'react-router-dom'
+
+interface MockAuthStore {
+  login: ReturnType<typeof vi.fn>
+  loading: boolean
+  error: string | null
+  clearError: ReturnType<typeof vi.fn>
+  isAuthenticated: boolean
+}
+
+const mockStore: MockAuthStore = {
+  login: vi.fn().mockResolvedValue(undefined),
+  loading: false,
+  error: null,
+  clearError: vi.fn(),
+  isAuthenticated: false,
+}
+
+vi.mock('@client/stores/authStore', () => ({
+  useAuthStore: Object.assign(
+    vi.fn((selector?: (state: MockAuthStore) => unknown) => {
+      if (selector) {
+        return selector(mockStore)
+      }
+      return mockStore
+    }),
+    {
+      getState: () => mockStore,
+    }
+  ),
+}))
+
+const renderLoginPage = () =>
+  render(
+    <HelmetProvider>
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>
+    </HelmetProvider>
+  )
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockStore.loading = false
+    mockStore.error = null
+    mockStore.isAuthenticated = false
+    mockStore.login.mockResolvedValue(undefined)
+  })
+
+  describe('Initial Render', () => {
+    it('should render login page container', () => {
+      renderLoginPage()
+      expect(screen.getByTestId('login-page')).toBeInTheDocument()
+    })
+
+    it('should render page title', () => {
+      renderLoginPage()
+      expect(screen.getByText('Welcome Back')).toBeInTheDocument()
+    })
+
+    it('should render subtitle', () => {
+      renderLoginPage()
+      expect(screen.getByText('Sign in to your account')).toBeInTheDocument()
+    })
+  })
+
+  describe('Form Inputs', () => {
+    it('should render username input', () => {
+      renderLoginPage()
+      expect(screen.getByTestId('login-username')).toBeInTheDocument()
+    })
+
+    it('should render password input', () => {
+      renderLoginPage()
+      expect(screen.getByTestId('login-password')).toBeInTheDocument()
+    })
+
+    it('should render submit button', () => {
+      renderLoginPage()
+      expect(screen.getByTestId('login-submit')).toBeInTheDocument()
+    })
+
+    it('should show Sign In text when not loading', () => {
+      renderLoginPage()
+      expect(screen.getByTestId('login-submit')).toHaveTextContent('Sign In')
+    })
+
+    it('should show Signing in... text when loading', () => {
+      mockStore.loading = true
+      renderLoginPage()
+      expect(screen.getByText('Signing in...')).toBeInTheDocument()
+    })
+
+    it('should disable submit button when loading', () => {
+      mockStore.loading = true
+      renderLoginPage()
+      expect(screen.getByTestId('login-submit')).toBeDisabled()
+    })
+  })
+
+  describe('Form Submission', () => {
+    it('should call login with username and password', async () => {
+      renderLoginPage()
+      fireEvent.change(screen.getByTestId('login-username'), { target: { value: 'testuser' } })
+      fireEvent.change(screen.getByTestId('login-password'), { target: { value: 'pass123' } })
+      fireEvent.click(screen.getByTestId('login-submit'))
+
+      await waitFor(() => {
+        expect(mockStore.login).toHaveBeenCalledWith('testuser', 'pass123')
+      })
+    })
+  })
+
+  describe('Error Display', () => {
+    it('should display error message when error exists', () => {
+      mockStore.error = 'Invalid credentials'
+      renderLoginPage()
+      expect(screen.getByTestId('login-error')).toBeInTheDocument()
+      expect(screen.getByText('Invalid credentials')).toBeInTheDocument()
+    })
+
+    it('should not display error message when error is null', () => {
+      renderLoginPage()
+      expect(screen.queryByTestId('login-error')).not.toBeInTheDocument()
+    })
+
+    it('should call clearError when typing in username field with existing error', () => {
+      mockStore.error = 'Some error'
+      renderLoginPage()
+      fireEvent.change(screen.getByTestId('login-username'), { target: { value: 'a' } })
+      expect(mockStore.clearError).toHaveBeenCalled()
+    })
+
+    it('should call clearError when typing in password field with existing error', () => {
+      mockStore.error = 'Some error'
+      renderLoginPage()
+      fireEvent.change(screen.getByTestId('login-password'), { target: { value: 'a' } })
+      expect(mockStore.clearError).toHaveBeenCalled()
+    })
+  })
+
+  describe('Quick Demo Login', () => {
+    it('should pre-fill username and password from preset credentials', () => {
+      renderLoginPage()
+      const usernameInput = screen.getByTestId('login-username') as HTMLInputElement
+      const passwordInput = screen.getByTestId('login-password') as HTMLInputElement
+      expect(usernameInput.value).toBe('demo@biomimic.app')
+      expect(passwordInput.value).toBe('demo123')
+    })
+  })
+
+  describe('Navigation Links', () => {
+    it('should render register link', () => {
+      renderLoginPage()
+      expect(screen.getByTestId('login-register-link')).toBeInTheDocument()
+    })
+
+    it('should link to register page', () => {
+      renderLoginPage()
+      const link = screen.getByTestId('login-register-link')
+      expect(link).toHaveAttribute('href', '/register')
+    })
+  })
+})