@etus/bhono-app 0.1.1

package/templates/base/src/client/components/__tests__/sidebar.test.tsx

@@ -0,0 +1,281 @@
+import type { Mock } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { render, screen } from "../../__tests__/test-utils"
+import userEvent from "@testing-library/user-event"
+import { Sidebar } from "../sidebar"
+
+// Mock useAuth hook
+vi.mock("@/hooks/use-auth", () => ({
+  useAuth: vi.fn(),
+}))
+
+// Mock @tanstack/react-router with importOriginal to keep other exports
+vi.mock("@tanstack/react-router", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-router")>()
+  return {
+    ...actual,
+    Link: ({ children, to, className, title }: { children: React.ReactNode; to: string; className?: string; title?: string }) => (
+      <a href={to} className={className} title={title} data-testid={`link-${to}`}>
+        {children}
+      </a>
+    ),
+    useLocation: vi.fn(),
+  }
+})
+
+import { useAuth } from "@/hooks/use-auth"
+import { useLocation } from "@tanstack/react-router"
+
+const mockUser = {
+  id: "1",
+  email: "john@example.com",
+  name: "John Doe",
+  avatarUrl: null,
+}
+
+describe("Sidebar", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(useAuth as Mock).mockReturnValue({
+      user: mockUser,
+      logout: vi.fn(),
+      isLoggingOut: false,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+    ;(useLocation as Mock).mockReturnValue({
+      pathname: "/dashboard",
+    })
+  })
+
+  it("renders sidebar navigation items", () => {
+    render(<Sidebar />)
+
+    expect(screen.getByText("Dashboard")).toBeInTheDocument()
+    expect(screen.getByText("Team")).toBeInTheDocument()
+    expect(screen.getByText("Integrations")).toBeInTheDocument()
+    // "Account" appears both as section header and nav item
+    expect(screen.getAllByText("Account").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText("Settings")).toBeInTheDocument()
+  })
+
+  it("shows user info when authenticated", () => {
+    render(<Sidebar />)
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument()
+    expect(screen.getByText("john@example.com")).toBeInTheDocument()
+  })
+
+  it("shows user initials in avatar fallback", () => {
+    render(<Sidebar />)
+
+    // Avatar fallback should show initials "JD" for "John Doe"
+    const avatarFallbacks = screen.getAllByText("JD")
+    expect(avatarFallbacks.length).toBeGreaterThan(0)
+  })
+
+  it("highlights active route", () => {
+    ;(useLocation as Mock).mockReturnValue({
+      pathname: "/dashboard",
+    })
+
+    render(<Sidebar />)
+
+    // The active nav item link should have the active class (bg-sidebar-accent)
+    // There are two links to dashboard (logo and nav item), get all and check the nav item
+    const dashboardLinks = screen.getAllByTestId("link-/dashboard")
+    // The nav item link has rounded-lg class (not the logo link)
+    const navItemLink = dashboardLinks.find((link) => link.classList.contains("rounded-lg"))
+    expect(navItemLink).toHaveClass("bg-sidebar-accent")
+  })
+
+  it("handles navigation clicks", async () => {
+    render(<Sidebar />)
+
+    const teamLink = screen.getByText("Team")
+    expect(teamLink).toBeInTheDocument()
+
+    // Team link should be clickable
+    const teamNavItem = screen.getByTestId("link-/team")
+    expect(teamNavItem).toHaveAttribute("href", "/team")
+  })
+
+  it("handles logout button click", async () => {
+    const user = userEvent.setup()
+    const mockLogout = vi.fn()
+    ;(useAuth as Mock).mockReturnValue({
+      user: mockUser,
+      logout: mockLogout,
+      isLoggingOut: false,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+
+    render(<Sidebar />)
+
+    // Find the logout button (by finding the button in the user profile area)
+    const logoutButtons = screen.getAllByRole("button")
+
+    // Click the last button in the profile area which should trigger logout
+    await user.click(logoutButtons[logoutButtons.length - 1])
+    expect(mockLogout).toHaveBeenCalled()
+  })
+
+  it("can be collapsed by default", () => {
+    render(<Sidebar defaultCollapsed={true} />)
+
+    // When collapsed, the sidebar should have the collapsed width class
+    const sidebar = screen.getByRole("complementary")
+    expect(sidebar).toHaveClass("w-16")
+  })
+
+  it("expands when collapsed and expand button is clicked", async () => {
+    const user = userEvent.setup()
+    render(<Sidebar defaultCollapsed={true} />)
+
+    const sidebar = screen.getByRole("complementary")
+    expect(sidebar).toHaveClass("w-16")
+
+    // Find and click the expand button
+    const expandButton = screen.getAllByRole("button")[0]
+    await user.click(expandButton)
+
+    expect(sidebar).toHaveClass("w-64")
+  })
+
+  it("shows keyboard shortcut hint when expanded", () => {
+    render(<Sidebar />)
+
+    // The sidebar shows a keyboard shortcut hint like "⌘B collapse" or "Ctrl+B collapse"
+    expect(screen.getByText(/collapse/)).toBeInTheDocument()
+  })
+
+  it("hides navigation labels when collapsed", () => {
+    render(<Sidebar defaultCollapsed={true} />)
+
+    // Navigation labels should not be visible when collapsed
+    expect(screen.queryByText("Dashboard")).not.toBeInTheDocument()
+  })
+
+  it("collapses when collapse button is clicked", async () => {
+    const user = userEvent.setup()
+    render(<Sidebar />)
+
+    const sidebar = screen.getByRole("complementary")
+    expect(sidebar).toHaveClass("w-64")
+
+    // Find and click the collapse button (chevron icon button in header)
+    const collapseButton = screen.getAllByRole("button")[0]
+    await user.click(collapseButton)
+
+    expect(sidebar).toHaveClass("w-16")
+  })
+
+  it("toggles sidebar with keyboard shortcut", async () => {
+    const user = userEvent.setup()
+    render(<Sidebar />)
+
+    const sidebar = screen.getByRole("complementary")
+    expect(sidebar).toHaveClass("w-64")
+
+    // Press Ctrl+B (or Cmd+B on Mac) to toggle
+    await user.keyboard("{Control>}b{/Control}")
+
+    expect(sidebar).toHaveClass("w-16")
+  })
+
+  it("toggles theme when theme button is clicked", async () => {
+    const user = userEvent.setup()
+    render(<Sidebar />)
+
+    // Find the theme toggle button (has title attribute with "Theme:")
+    const themeButton = screen.getByTitle(/theme:/i)
+    expect(themeButton).toBeInTheDocument()
+
+    await user.click(themeButton)
+    // Theme should cycle (we just verify click doesn't throw)
+  })
+
+  it("shows logout button when collapsed and handles click", async () => {
+    const user = userEvent.setup()
+    const mockLogout = vi.fn()
+    ;(useAuth as Mock).mockReturnValue({
+      user: mockUser,
+      logout: mockLogout,
+      isLoggingOut: false,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+
+    render(<Sidebar defaultCollapsed={true} />)
+
+    // When collapsed, the avatar button should be the logout trigger
+    const avatarButton = screen.getAllByRole("button").pop()!
+    await user.click(avatarButton)
+
+    expect(mockLogout).toHaveBeenCalled()
+  })
+
+  it("shows loading spinner when logging out", () => {
+    ;(useAuth as Mock).mockReturnValue({
+      user: mockUser,
+      logout: vi.fn(),
+      isLoggingOut: true,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+
+    render(<Sidebar />)
+
+    // Logout button should be disabled during logout
+    const buttons = screen.getAllByRole("button")
+    const logoutButton = buttons[buttons.length - 1]
+    expect(logoutButton).toBeDisabled()
+  })
+
+  it("shows avatar image when user has avatarUrl", () => {
+    ;(useAuth as Mock).mockReturnValue({
+      user: { ...mockUser, avatarUrl: "https://example.com/avatar.jpg" },
+      logout: vi.fn(),
+      isLoggingOut: false,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+
+    render(<Sidebar />)
+
+    const avatarImages = document.querySelectorAll('img[alt="John Doe"]')
+    expect(avatarImages.length).toBeGreaterThan(0)
+  })
+
+  it("shows single letter initial when user has no name", () => {
+    ;(useAuth as Mock).mockReturnValue({
+      user: { ...mockUser, name: null },
+      logout: vi.fn(),
+      isLoggingOut: false,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+
+    render(<Sidebar />)
+
+    // Should show first letter of email "J" for "john@example.com"
+    const avatarFallbacks = screen.getAllByText("J")
+    expect(avatarFallbacks.length).toBeGreaterThan(0)
+  })
+
+  it("shows question mark when user has no name or email", () => {
+    ;(useAuth as Mock).mockReturnValue({
+      user: { id: "1", email: null, name: null, avatarUrl: null },
+      logout: vi.fn(),
+      isLoggingOut: false,
+      isAuthenticated: true,
+      isLoading: false,
+    })
+
+    render(<Sidebar />)
+
+    const avatarFallbacks = screen.getAllByText("?")
+    expect(avatarFallbacks.length).toBeGreaterThan(0)
+  })
+})

package/templates/base/src/client/components/error-boundary.tsx

@@ -0,0 +1,68 @@
+// src/client/components/error-boundary.tsx
+import { Component, type ReactNode } from 'react'
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+/**
+ * Class-based Error Boundary component.
+ * Catches JavaScript errors anywhere in the child component tree.
+ *
+ * For route-level errors, prefer using TanStack Router's errorComponent.
+ * Use this component for wrapping specific UI sections that might fail.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    // Log error to console in development
+    if (import.meta.env.DEV) {
+      console.error('ErrorBoundary caught an error:', error, errorInfo)
+    }
+
+    // Call optional error handler (e.g., for Sentry)
+    this.props.onError?.(error, errorInfo)
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="flex min-h-[200px] items-center justify-center p-6">
+          <div className="text-center">
+            <h2 className="text-lg font-semibold text-foreground">Something went wrong</h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {this.state.error?.message ?? 'An unexpected error occurred'}
+            </p>
+            <button
+              onClick={() => { this.setState({ hasError: false, error: null }) }}
+              className="mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/templates/base/src/client/components/icons.tsx

@@ -0,0 +1,106 @@
+import type React from "react"
+
+import {
+  ArrowRight,
+  Bell,
+  Blocks,
+  Camera,
+  Check,
+  ChevronRight,
+  Clock,
+  Command,
+  Copy,
+  Key,
+  Layers,
+  LayoutDashboard,
+  Loader2,
+  LogOut,
+  Mail,
+  MailPlus,
+  Menu,
+  Moon,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Settings,
+  Sun,
+  Trash2,
+  User,
+  UserMinus,
+  UserPlus,
+  Users,
+  X,
+  Zap,
+  Shield,
+  Globe,
+  Database,
+} from "lucide-react"
+
+// GitHub icon from Simple Icons (lucide-react deprecated their brand icons)
+function GitHubIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  )
+}
+
+export const Icons = {
+  arrowRight: ArrowRight,
+  bell: Bell,
+  blocks: Blocks,
+  camera: Camera,
+  check: Check,
+  chevronRight: ChevronRight,
+  clock: Clock,
+  close: X,
+  command: Command,
+  copy: Copy,
+  dashboard: LayoutDashboard,
+  database: Database,
+  gitHub: GitHubIcon,
+  globe: Globe,
+  key: Key,
+  layers: Layers,
+  logo: Command,
+  logout: LogOut,
+  mail: Mail,
+  mailPlus: MailPlus,
+  menu: Menu,
+  moon: Moon,
+  more: MoreHorizontal,
+  pencil: Pencil,
+  plus: Plus,
+  search: Search,
+  settings: Settings,
+  shield: Shield,
+  spinner: Loader2,
+  sun: Sun,
+  trash: Trash2,
+  user: User,
+  userMinus: UserMinus,
+  userPlus: UserPlus,
+  users: Users,
+  zap: Zap,
+  google: ({ ...props }: React.SVGProps<SVGSVGElement>) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  ),
+}