@etus/bhono-app 0.1.1

package/templates/base/src/client/components/ui/loading-skeleton.tsx

@@ -0,0 +1,154 @@
+import { Skeleton } from "./skeleton"
+import { Card, CardContent, CardHeader } from "./card"
+
+// Helper to create stable keys for skeleton items
+const skeletonItems = (count: number, prefix: string) =>
+  Array.from({ length: count }, (_, i) => `${prefix}-${String(i)}`)
+
+export function DashboardSkeleton() {
+  return (
+    <div className="space-y-8">
+      {/* Header skeleton */}
+      <div className="space-y-2">
+        <Skeleton className="h-9 w-64" />
+        <Skeleton className="h-5 w-80" />
+      </div>
+
+      {/* Stats cards skeleton */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {skeletonItems(4, "stats-card").map((key) => (
+          <Card key={key}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-4 rounded" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-8 w-12 mb-1" />
+              <Skeleton className="h-3 w-28" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Quick actions skeleton */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {skeletonItems(3, "action-card").map((key) => (
+          <Card key={key}>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-5 w-5 rounded" />
+                <Skeleton className="h-5 w-32" />
+              </div>
+              <Skeleton className="h-4 w-56 mt-2" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-4 w-full" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function TeamSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header skeleton */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-40" />
+          <Skeleton className="h-5 w-64" />
+        </div>
+        <Skeleton className="h-10 w-36" />
+      </div>
+
+      {/* Search skeleton */}
+      <Skeleton className="h-10 w-full max-w-sm" />
+
+      {/* Members list skeleton */}
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-4 w-48 mt-1" />
+        </CardHeader>
+        <CardContent>
+          <div className="divide-y">
+            {skeletonItems(3, "team-member").map((key) => (
+              <div key={key} className="flex items-center justify-between py-4 first:pt-0 last:pb-0">
+                <div className="flex items-center gap-4">
+                  <Skeleton className="h-10 w-10 rounded-full" />
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-48" />
+                  </div>
+                </div>
+                <Skeleton className="h-6 w-16 rounded-full" />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function PageSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-5 w-72" />
+      </div>
+      <Card>
+        <CardContent className="pt-6">
+          <div className="space-y-4">
+            {skeletonItems(4, "page-line").map((key) => (
+              <Skeleton key={key} className="h-4 w-full" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function SidebarSkeleton() {
+  return (
+    <aside className="flex h-screen w-64 flex-col border-r bg-sidebar">
+      {/* Header */}
+      <div className="flex h-14 items-center justify-between border-b px-3">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-8 w-8 rounded-lg" />
+          <Skeleton className="h-5 w-16" />
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 p-2">
+        <Skeleton className="h-4 w-12 mx-3 my-2" />
+        {skeletonItems(3, "nav-main").map((key) => (
+          <Skeleton key={key} className="h-10 w-full rounded-lg" />
+        ))}
+
+        <div className="my-4" />
+
+        <Skeleton className="h-4 w-16 mx-3 my-2" />
+        {skeletonItems(2, "nav-account").map((key) => (
+          <Skeleton key={key} className="h-10 w-full rounded-lg" />
+        ))}
+      </nav>
+
+      {/* User profile */}
+      <div className="border-t p-3">
+        <div className="flex items-center gap-3 p-2">
+          <Skeleton className="h-9 w-9 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-3 w-32" />
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}

package/templates/base/src/client/components/ui/separator.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, Ref } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+  ref?: Ref<HTMLDivElement>
+}
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ref,
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/templates/base/src/client/components/ui/skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/templates/base/src/client/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { Toaster as Sonner } from "sonner"
+import { useTheme } from "@/hooks/use-theme"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+function Toaster({ ...props }: ToasterProps) {
+  const { resolvedTheme } = useTheme()
+
+  return (
+    <Sonner
+      theme={resolvedTheme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/templates/base/src/client/components/ui/tabs.tsx

@@ -0,0 +1,121 @@
+import { createContext, use, useState } from "react"
+import type { ButtonHTMLAttributes, HTMLAttributes, Ref } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface TabsContextValue {
+  value: string
+  onValueChange: (value: string) => void
+}
+
+const TabsContext = createContext<TabsContextValue | undefined>(undefined)
+
+function useTabs() {
+  const context = use(TabsContext)
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs provider")
+  }
+  return context
+}
+
+interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  ref?: Ref<HTMLDivElement>
+}
+
+function Tabs({
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  children,
+  ref,
+  ...props
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "")
+
+  const currentValue = value ?? internalValue
+  const handleValueChange = onValueChange ?? setInternalValue
+
+  return (
+    <TabsContext value={{ value: currentValue, onValueChange: handleValueChange }}>
+      <div ref={ref} className={cn("w-full", className)} {...props}>
+        {children}
+      </div>
+    </TabsContext>
+  )
+}
+
+function TabsList({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+  ref?: Ref<HTMLButtonElement>
+}
+
+function TabsTrigger({ className, value, ref, ...props }: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange } = useTabs()
+  const isSelected = selectedValue === value
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={isSelected}
+      data-state={isSelected ? "active" : "inactive"}
+      onClick={() => { onValueChange(value) }}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        isSelected
+          ? "bg-background text-foreground shadow"
+          : "hover:bg-background/50 hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+  value: string
+  ref?: Ref<HTMLDivElement>
+}
+
+function TabsContent({ className, value, ref, ...props }: TabsContentProps) {
+  const { value: selectedValue } = useTabs()
+
+  if (selectedValue !== value) return null
+
+  return (
+    <div
+      ref={ref}
+      role="tabpanel"
+      data-state={selectedValue === value ? "active" : "inactive"}
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/templates/base/src/client/hooks/__tests__/use-auth.test.tsx

@@ -0,0 +1,306 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { renderHook, waitFor, act } from "@testing-library/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import type { ReactNode } from "react"
+import { useAuth } from "../use-auth"
+import type { AuthUser } from "@shared/types"
+
+// Mock global fetch
+const mockFetch = vi.fn()
+global.fetch = mockFetch
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  })
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  }
+}
+
+function createWrapperWithClient(queryClient: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  }
+}
+
+describe("useAuth", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("returns loading state initially", () => {
+    // Mock fetch that never resolves
+    mockFetch.mockImplementation(() => new Promise(() => {}))
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.user).toBeNull()
+  })
+
+  it("returns null user when not authenticated", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 401,
+    } as Response)
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.user).toBeNull()
+    expect(result.current.isAuthenticated).toBe(false)
+  })
+
+  it("returns user when authenticated", async () => {
+    const mockUser: AuthUser = {
+      id: "user-123",
+      email: "test@example.com",
+      name: "Test User",
+      avatarUrl: "https://example.com/avatar.png",
+    }
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ user: mockUser }),
+    } as Response)
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.user).toEqual(mockUser)
+    expect(result.current.isAuthenticated).toBe(true)
+  })
+
+  it("isAuthenticated is true when user exists", async () => {
+    const mockUser: AuthUser = {
+      id: "user-456",
+      email: "auth@example.com",
+      name: "Authenticated User",
+    }
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ user: mockUser }),
+    } as Response)
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isAuthenticated).toBe(true)
+    })
+  })
+
+  it("isAuthenticated is false when user is null", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 401,
+    } as Response)
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.isAuthenticated).toBe(false)
+  })
+
+  it("logout calls the logout endpoint", async () => {
+    const mockUser: AuthUser = {
+      id: "user-789",
+      email: "logout@example.com",
+      name: "Logout User",
+    }
+
+    // First call is for fetchMe, second for logout
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ user: mockUser }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+      } as Response)
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    await act(async () => {
+      result.current.logout()
+    })
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith("/auth/logout", {
+        method: "POST",
+        credentials: "include",
+      })
+    })
+  })
+
+  it("logout clears the user from cache", async () => {
+    const mockUser: AuthUser = {
+      id: "user-clear",
+      email: "clear@example.com",
+      name: "Clear Cache User",
+    }
+
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false, gcTime: 0 },
+        mutations: { retry: false },
+      },
+    })
+
+    // First call is for fetchMe, second for logout
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ user: mockUser }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+      } as Response)
+
+    const { result } = renderHook(() => useAuth(), {
+      wrapper: createWrapperWithClient(queryClient),
+    })
+
+    await waitFor(() => {
+      expect(result.current.user).toEqual(mockUser)
+    })
+
+    await act(async () => {
+      result.current.logout()
+    })
+
+    await waitFor(() => {
+      expect(result.current.user).toBeNull()
+    })
+
+    // Verify the cache was updated
+    const cachedData = queryClient.getQueryData(["auth", "me"])
+    expect(cachedData).toBeNull()
+  })
+
+  it("isLoggingOut is true during logout", async () => {
+    const mockUser: AuthUser = {
+      id: "user-pending",
+      email: "pending@example.com",
+      name: "Pending User",
+    }
+
+    let resolveLogout: () => void
+    const logoutPromise = new Promise<void>((resolve) => {
+      resolveLogout = resolve
+    })
+
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ user: mockUser }),
+      } as Response)
+      .mockImplementationOnce(async () => {
+        await logoutPromise
+        return { ok: true }
+      })
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.isLoggingOut).toBe(false)
+
+    act(() => {
+      result.current.logout()
+    })
+
+    await waitFor(() => {
+      expect(result.current.isLoggingOut).toBe(true)
+    })
+
+    // Resolve the logout promise
+    await act(async () => {
+      resolveLogout!()
+    })
+
+    await waitFor(() => {
+      expect(result.current.isLoggingOut).toBe(false)
+    })
+  })
+
+  it("fetches user with correct credentials option", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 401,
+    } as Response)
+
+    renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith("/auth/me", {
+        credentials: "include",
+      })
+    })
+  })
+
+  it("handles logout failure", async () => {
+    const mockUser: AuthUser = {
+      id: "user-fail",
+      email: "fail@example.com",
+      name: "Fail User",
+    }
+
+    // First call is for fetchMe (success), second for logout (failure)
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ user: mockUser }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: false,
+        status: 500,
+      } as Response)
+
+    const { result } = renderHook(() => useAuth(), { wrapper: createWrapper() })
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    await act(async () => {
+      result.current.logout()
+    })
+
+    // Wait for the mutation to complete and error to be handled
+    await waitFor(() => {
+      expect(result.current.isLoggingOut).toBe(false)
+    })
+
+    // User should still be logged in since logout failed
+    expect(result.current.user).toEqual(mockUser)
+  })
+})