@etus/bhono-app 0.1.1

package/templates/base/src/client/lib/query-client.ts

@@ -0,0 +1,11 @@
+// src/client/lib/query-client.ts
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60, // 1 minute
+      retry: 1,
+    },
+  },
+})

package/templates/base/src/client/lib/utils.ts

@@ -0,0 +1,7 @@
+// src/client/lib/utils.ts
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/base/src/client/main.tsx

@@ -0,0 +1,26 @@
+// src/client/main.tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider } from '@tanstack/react-router'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { router } from './router'
+import { queryClient } from './lib/query-client'
+import { ThemeProvider } from './hooks/use-theme'
+import { Toaster } from './components/ui/sonner'
+import './index.css'
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Root element not found')
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <Toaster />
+        {import.meta.env.DEV && <ReactQueryDevtools />}
+      </QueryClientProvider>
+    </ThemeProvider>
+  </StrictMode>,
+)

package/templates/base/src/client/routeTree.gen.ts

@@ -0,0 +1,258 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
+import { Route as SplatRouteImport } from './routes/$'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as InviteTokenRouteImport } from './routes/invite.$token'
+import { Route as AuthenticatedTeamRouteImport } from './routes/_authenticated/team'
+import { Route as AuthenticatedSettingsRouteImport } from './routes/_authenticated/settings'
+import { Route as AuthenticatedIntegrationsRouteImport } from './routes/_authenticated/integrations'
+import { Route as AuthenticatedDashboardRouteImport } from './routes/_authenticated/dashboard'
+import { Route as AuthenticatedAccountRouteImport } from './routes/_authenticated/account'
+
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedRoute = AuthenticatedRouteImport.update({
+  id: '/_authenticated',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SplatRoute = SplatRouteImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const InviteTokenRoute = InviteTokenRouteImport.update({
+  id: '/invite/$token',
+  path: '/invite/$token',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedTeamRoute = AuthenticatedTeamRouteImport.update({
+  id: '/team',
+  path: '/team',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedSettingsRoute = AuthenticatedSettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedIntegrationsRoute =
+  AuthenticatedIntegrationsRouteImport.update({
+    id: '/integrations',
+    path: '/integrations',
+    getParentRoute: () => AuthenticatedRoute,
+  } as any)
+const AuthenticatedDashboardRoute = AuthenticatedDashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedAccountRoute = AuthenticatedAccountRouteImport.update({
+  id: '/account',
+  path: '/account',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/$': typeof SplatRoute
+  '/login': typeof LoginRoute
+  '/account': typeof AuthenticatedAccountRoute
+  '/dashboard': typeof AuthenticatedDashboardRoute
+  '/integrations': typeof AuthenticatedIntegrationsRoute
+  '/settings': typeof AuthenticatedSettingsRoute
+  '/team': typeof AuthenticatedTeamRoute
+  '/invite/$token': typeof InviteTokenRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/$': typeof SplatRoute
+  '/login': typeof LoginRoute
+  '/account': typeof AuthenticatedAccountRoute
+  '/dashboard': typeof AuthenticatedDashboardRoute
+  '/integrations': typeof AuthenticatedIntegrationsRoute
+  '/settings': typeof AuthenticatedSettingsRoute
+  '/team': typeof AuthenticatedTeamRoute
+  '/invite/$token': typeof InviteTokenRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/$': typeof SplatRoute
+  '/_authenticated': typeof AuthenticatedRouteWithChildren
+  '/login': typeof LoginRoute
+  '/_authenticated/account': typeof AuthenticatedAccountRoute
+  '/_authenticated/dashboard': typeof AuthenticatedDashboardRoute
+  '/_authenticated/integrations': typeof AuthenticatedIntegrationsRoute
+  '/_authenticated/settings': typeof AuthenticatedSettingsRoute
+  '/_authenticated/team': typeof AuthenticatedTeamRoute
+  '/invite/$token': typeof InviteTokenRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/$'
+    | '/login'
+    | '/account'
+    | '/dashboard'
+    | '/integrations'
+    | '/settings'
+    | '/team'
+    | '/invite/$token'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/$'
+    | '/login'
+    | '/account'
+    | '/dashboard'
+    | '/integrations'
+    | '/settings'
+    | '/team'
+    | '/invite/$token'
+  id:
+    | '__root__'
+    | '/'
+    | '/$'
+    | '/_authenticated'
+    | '/login'
+    | '/_authenticated/account'
+    | '/_authenticated/dashboard'
+    | '/_authenticated/integrations'
+    | '/_authenticated/settings'
+    | '/_authenticated/team'
+    | '/invite/$token'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SplatRoute: typeof SplatRoute
+  AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
+  LoginRoute: typeof LoginRoute
+  InviteTokenRoute: typeof InviteTokenRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_authenticated': {
+      id: '/_authenticated'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AuthenticatedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/$': {
+      id: '/$'
+      path: '/$'
+      fullPath: '/$'
+      preLoaderRoute: typeof SplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/invite/$token': {
+      id: '/invite/$token'
+      path: '/invite/$token'
+      fullPath: '/invite/$token'
+      preLoaderRoute: typeof InviteTokenRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_authenticated/team': {
+      id: '/_authenticated/team'
+      path: '/team'
+      fullPath: '/team'
+      preLoaderRoute: typeof AuthenticatedTeamRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+    '/_authenticated/settings': {
+      id: '/_authenticated/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof AuthenticatedSettingsRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+    '/_authenticated/integrations': {
+      id: '/_authenticated/integrations'
+      path: '/integrations'
+      fullPath: '/integrations'
+      preLoaderRoute: typeof AuthenticatedIntegrationsRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+    '/_authenticated/dashboard': {
+      id: '/_authenticated/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof AuthenticatedDashboardRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+    '/_authenticated/account': {
+      id: '/_authenticated/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof AuthenticatedAccountRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+  }
+}
+
+interface AuthenticatedRouteChildren {
+  AuthenticatedAccountRoute: typeof AuthenticatedAccountRoute
+  AuthenticatedDashboardRoute: typeof AuthenticatedDashboardRoute
+  AuthenticatedIntegrationsRoute: typeof AuthenticatedIntegrationsRoute
+  AuthenticatedSettingsRoute: typeof AuthenticatedSettingsRoute
+  AuthenticatedTeamRoute: typeof AuthenticatedTeamRoute
+}
+
+const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
+  AuthenticatedAccountRoute: AuthenticatedAccountRoute,
+  AuthenticatedDashboardRoute: AuthenticatedDashboardRoute,
+  AuthenticatedIntegrationsRoute: AuthenticatedIntegrationsRoute,
+  AuthenticatedSettingsRoute: AuthenticatedSettingsRoute,
+  AuthenticatedTeamRoute: AuthenticatedTeamRoute,
+}
+
+const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
+  AuthenticatedRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SplatRoute: SplatRoute,
+  AuthenticatedRoute: AuthenticatedRouteWithChildren,
+  LoginRoute: LoginRoute,
+  InviteTokenRoute: InviteTokenRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/base/src/client/router.ts

@@ -0,0 +1,15 @@
+// src/client/router.ts
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultPreloadDelay: 100,
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}

package/templates/base/src/client/routes/$.tsx

@@ -0,0 +1,77 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { Icons } from '@/components/icons'
+
+export const Route = createFileRoute('/$')({
+  component: NotFoundPage,
+})
+
+function NotFoundPage() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Header */}
+      <header className="container flex h-14 items-center">
+        <Link to="/" className="flex items-center space-x-2">
+          <Icons.command className="h-6 w-6" />
+          <span className="font-semibold">Hono</span>
+        </Link>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex flex-1 items-center justify-center px-4">
+        <div className="mx-auto max-w-md text-center">
+          {/* Large 404 */}
+          <div className="relative mb-8">
+            <div className="text-[12rem] font-bold leading-none tracking-tighter text-muted/20 select-none">
+              404
+            </div>
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="rounded-full bg-background px-6 py-2 shadow-lg ring-1 ring-border">
+                <span className="text-lg font-medium">Page not found</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Message */}
+          <p className="mb-8 text-muted-foreground">
+            The page you're looking for doesn't exist or has been moved.
+            Let's get you back on track.
+          </p>
+
+          {/* Actions */}
+          <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+            <Button asChild>
+              <Link to="/">
+                <Icons.arrowRight className="mr-2 h-4 w-4 rotate-180" />
+                Back to Home
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <Link to="/dashboard">
+                <Icons.dashboard className="mr-2 h-4 w-4" />
+                Go to Dashboard
+              </Link>
+            </Button>
+          </div>
+
+          {/* Help Link */}
+          <p className="mt-8 text-sm text-muted-foreground">
+            Need help?{' '}
+            <a
+              href="mailto:support@example.com"
+              className="font-medium text-foreground underline underline-offset-4"
+            >
+              Contact support
+            </a>
+          </p>
+        </div>
+      </main>
+
+      {/* Decorative Background */}
+      <div className="fixed inset-0 -z-10 overflow-hidden">
+        <div className="absolute -top-40 right-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl" />
+        <div className="absolute -bottom-40 left-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl" />
+      </div>
+    </div>
+  )
+}

package/templates/base/src/client/routes/__root.tsx

@@ -0,0 +1,34 @@
+// src/client/routes/__root.tsx
+import { createRootRoute, Outlet, useRouter } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { ErrorFallback } from '@/components/ui/error-fallback'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+  errorComponent: RootErrorComponent,
+})
+
+function RootComponent() {
+  return (
+    <>
+      <Outlet />
+      {import.meta.env.DEV && <TanStackRouterDevtools position="bottom-right" />}
+    </>
+  )
+}
+
+export function RootErrorComponent({ error }: { error: Error }) {
+  const router = useRouter()
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <ErrorFallback
+        error={error}
+        title="Application Error"
+        message="Something went wrong. Please try again or contact support if the problem persists."
+        onRetry={() => { void router.invalidate() }}
+        onGoHome={() => { void router.navigate({ to: '/' }) }}
+      />
+    </div>
+  )
+}

package/templates/base/src/client/routes/__tests__/invite.test.tsx

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderRoute } from '../../__tests__/test-utils'
+
+describe('Invite Token Page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Mock fetch - the invite page is public, no auth needed
+    vi.spyOn(global, 'fetch').mockImplementation((url) => {
+      if (url === '/auth/me') {
+        return Promise.resolve({
+          ok: false,
+          status: 401,
+        } as Response)
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({}),
+      } as Response)
+    })
+  })
+
+  describe('pending invitation state', () => {
+    it('should render invitation page with inviter name and workspace', async () => {
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByText("You've Been Invited!")).toBeInTheDocument()
+      })
+
+      // Inviter name and workspace in the description
+      expect(screen.getByText('John Doe')).toBeInTheDocument()
+      // Acme Inc appears in both the description and details
+      expect(screen.getAllByText('Acme Inc').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should display invitation details (email, workspace, role)', async () => {
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByText("You've Been Invited!")).toBeInTheDocument()
+      })
+
+      // Email
+      expect(screen.getByText('Email')).toBeInTheDocument()
+      expect(screen.getByText('invited@example.com')).toBeInTheDocument()
+
+      // Workspace
+      expect(screen.getByText('Workspace')).toBeInTheDocument()
+      // Acme Inc appears twice (in description and details)
+      expect(screen.getAllByText('Acme Inc')).toHaveLength(2)
+
+      // Role
+      expect(screen.getByText('Role')).toBeInTheDocument()
+      expect(screen.getByText('member')).toBeInTheDocument()
+    })
+
+    it('should display accept invitation button', async () => {
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /accept invitation/i })).toBeInTheDocument()
+      })
+    })
+
+    it('should display decline button linking to homepage', async () => {
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByText('Decline')).toBeInTheDocument()
+      })
+
+      // The decline text is inside a link which is inside a button (asChild pattern)
+      const declineLink = screen.getByText('Decline').closest('a')
+      expect(declineLink).toHaveAttribute('href', '/')
+    })
+
+    it('should show terms of service and privacy policy links', async () => {
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByText('Terms of Service')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Privacy Policy')).toBeInTheDocument()
+    })
+
+    it('should have a logo link to homepage', async () => {
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('link', { name: /hono/i })).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('acceptance flow', () => {
+    it('should show loading state when accepting invitation', async () => {
+      const user = userEvent.setup()
+
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /accept invitation/i })).toBeInTheDocument()
+      })
+
+      const acceptButton = screen.getByRole('button', { name: /accept invitation/i })
+      await user.click(acceptButton)
+
+      // Should show loading state
+      await waitFor(() => {
+        expect(screen.getByText(/accepting\.\.\./i)).toBeInTheDocument()
+      })
+    })
+
+    it('should disable button while accepting', async () => {
+      const user = userEvent.setup()
+
+      renderRoute({ initialEntries: ['/invite/test-token-123'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /accept invitation/i })).toBeInTheDocument()
+      })
+
+      const acceptButton = screen.getByRole('button', { name: /accept invitation/i })
+      await user.click(acceptButton)
+
+      // Button should be disabled during loading
+      await waitFor(() => {
+        const buttons = screen.getAllByRole('button')
+        const acceptingButton = buttons.find(btn => btn.textContent?.includes('Accepting'))
+        expect(acceptingButton).toBeDisabled()
+      })
+    })
+  })
+})