create-top-secret-starter 0.0.1

package/templates/template-router/src/routeTree.gen.ts

@@ -0,0 +1,102 @@
+/* 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 AuthenticatedRouteImport } from './routes/_authenticated'
+import { Route as SignInRouteImport } from './routes/sign-in'
+import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
+
+const AuthenticatedRoute = AuthenticatedRouteImport.update({
+  id: '/_authenticated',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SignInRoute = SignInRouteImport.update({
+  id: '/sign-in',
+  path: '/sign-in',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof AuthenticatedIndexRoute
+  '/sign-in': typeof SignInRoute
+}
+export interface FileRoutesByTo {
+  '/sign-in': typeof SignInRoute
+  '/': typeof AuthenticatedIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/_authenticated': typeof AuthenticatedRouteWithChildren
+  '/sign-in': typeof SignInRoute
+  '/_authenticated/': typeof AuthenticatedIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/sign-in'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/sign-in' | '/'
+  id: '__root__' | '/_authenticated' | '/sign-in' | '/_authenticated/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
+  SignInRoute: typeof SignInRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/_authenticated': {
+      id: '/_authenticated'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof AuthenticatedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/sign-in': {
+      id: '/sign-in'
+      path: '/sign-in'
+      fullPath: '/sign-in'
+      preLoaderRoute: typeof SignInRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_authenticated/': {
+      id: '/_authenticated/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof AuthenticatedIndexRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+  }
+}
+
+interface AuthenticatedRouteChildren {
+  AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
+}
+
+const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
+  AuthenticatedIndexRoute: AuthenticatedIndexRoute,
+}
+
+const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
+  AuthenticatedRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+  AuthenticatedRoute: AuthenticatedRouteWithChildren,
+  SignInRoute: SignInRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/template-router/src/router.tsx

@@ -0,0 +1,29 @@
+import { createRouter } from '@tanstack/react-router'
+
+import { bindSessionToRouter } from '@/api/auth/router-bridge'
+import { ErrorPage } from '@/routes/-error'
+import { NotFoundPage } from '@/routes/-not-found'
+import { routeTree } from './routeTree.gen'
+
+import { queryClient } from './lib/query-client'
+
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  context: { queryClient },
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 5_000,
+  defaultNotFoundComponent: NotFoundPage,
+  defaultErrorComponent: ErrorPage
+})
+
+// Why the router reacts to session changes is auth knowledge; it lives with the
+// rest of the session policy in src/api/auth/router-bridge.ts.
+bindSessionToRouter(router)
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}

package/templates/template-router/src/routes/-error.tsx

@@ -0,0 +1,34 @@
+import type { ErrorComponentProps } from '@tanstack/react-router'
+import { RotateCcw, TriangleAlert } from 'lucide-react'
+
+import { BackHomeButton, StatusPage } from '@/components/status-page'
+import { Button } from '@/components/ui/button'
+
+export const ErrorPage = ({ error, reset }: ErrorComponentProps) => {
+  const message = error instanceof Error ? error.message : String(error)
+
+  return (
+    <StatusPage
+      code='500'
+      icon={<TriangleAlert />}
+      mediaClassName='bg-destructive/10 text-destructive'
+      title='Something went wrong'
+      description='An unexpected error occurred. You can try again, or head back home.'
+      actions={
+        <>
+          <BackHomeButton variant='outline' />
+          <Button onClick={() => reset()}>
+            <RotateCcw data-icon='inline-start' />
+            Try again
+          </Button>
+        </>
+      }
+    >
+      {import.meta.env.DEV && message && (
+        <pre className='text-muted-foreground bg-muted mt-2 max-h-40 w-full overflow-auto rounded-lg border p-3 text-left font-mono text-xs whitespace-pre-wrap'>
+          {message}
+        </pre>
+      )}
+    </StatusPage>
+  )
+}

package/templates/template-router/src/routes/-not-found.tsx

@@ -0,0 +1,27 @@
+import { useRouter } from '@tanstack/react-router'
+import { ArrowLeft, SearchX } from 'lucide-react'
+
+import { BackHomeButton, StatusPage } from '@/components/status-page'
+import { Button } from '@/components/ui/button'
+
+export const NotFoundPage = () => {
+  const router = useRouter()
+
+  return (
+    <StatusPage
+      code='404'
+      icon={<SearchX />}
+      title='Page not found'
+      description='The page you’re looking for doesn’t exist or may have been moved.'
+      actions={
+        <>
+          <Button variant='outline' onClick={() => router.history.back()}>
+            <ArrowLeft data-icon='inline-start' />
+            Go back
+          </Button>
+          <BackHomeButton />
+        </>
+      }
+    />
+  )
+}

package/templates/template-router/src/routes/__root.tsx

@@ -0,0 +1,15 @@
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+
+import type { QueryClient } from '@tanstack/react-query'
+
+export type RouterContext = {
+  queryClient: QueryClient
+}
+
+const RootComponent = () => {
+  return <Outlet />
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: RootComponent
+})

package/templates/template-router/src/routes/_authenticated/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+const HomePage = () => {
+  return <h1 className='text-2xl font-semibold'>top-secret</h1>
+}
+
+export const Route = createFileRoute('/_authenticated/')({
+  component: HomePage
+})

package/templates/template-router/src/routes/_authenticated.tsx

@@ -0,0 +1,38 @@
+import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router'
+import { LogOut } from 'lucide-react'
+
+import { useLogout } from '@/api/auth'
+import { requireSession } from '@/api/auth/guards'
+import { useSession } from '@/api/auth/session-store'
+import { Button } from '@/components/ui/button'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: ({ location }) => requireSession(location),
+  component: AuthenticatedLayout
+})
+
+function AuthenticatedLayout() {
+  const session = useSession()
+  const logout = useLogout()
+  const router = useRouter()
+
+  const signOut = async () => {
+    await logout.mutateAsync()
+    await router.navigate({ to: '/sign-in' })
+  }
+
+  return (
+    <div className='flex min-h-svh flex-col'>
+      <header className='flex h-14 items-center justify-between border-b px-6'>
+        <span className='text-muted-foreground text-sm'>{session?.user.email}</span>
+        <Button variant='outline' size='sm' onClick={signOut} disabled={logout.isPending}>
+          <LogOut data-icon='inline-start' />
+          Sign out
+        </Button>
+      </header>
+      <main className='flex flex-1 items-center justify-center p-6'>
+        <Outlet />
+      </main>
+    </div>
+  )
+}

package/templates/template-router/src/routes/sign-in.tsx

@@ -0,0 +1,100 @@
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod/mini'
+
+import { useLogin, type Credentials } from '@/api/auth'
+import { redirectIfAuthenticated } from '@/api/auth/guards'
+import { Button } from '@/components/ui/button'
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+
+const searchSchema = z.object({
+  redirect: z.catch(z.optional(z.string()), undefined)
+})
+
+const formSchema = z.object({
+  email: z.string().check(z.minLength(1, 'Email is required'), z.email('Enter a valid email')),
+  password: z.string().check(z.minLength(1, 'Password is required'))
+})
+
+// Seeded in src/mocks/mock-server.ts — removed alongside the mock backend.
+// `import.meta.env.DEV` is statically replaced at build time, so the literals are
+// tree-shaken out of production bundles rather than merely unused there.
+const DEMO_CREDENTIALS: Credentials = import.meta.env.DEV
+  ? { email: 'demo@example.com', password: 'demo1234' }
+  : { email: '', password: '' }
+
+const FIELDS = [
+  { name: 'email', label: 'Email', type: 'email', autoComplete: 'email' },
+  { name: 'password', label: 'Password', type: 'password', autoComplete: 'current-password' }
+] as const satisfies ReadonlyArray<{
+  name: keyof Credentials
+  label: string
+  type: string
+  autoComplete: string
+}>
+
+export const Route = createFileRoute('/sign-in')({
+  validateSearch: searchSchema,
+  beforeLoad: ({ search }) => redirectIfAuthenticated(search),
+  component: SignInPage
+})
+
+function SignInPage() {
+  const router = useRouter()
+  const { redirect: redirectTo } = Route.useSearch()
+  const login = useLogin()
+
+  const { register, handleSubmit, formState } = useForm<Credentials>({
+    resolver: standardSchemaResolver(formSchema),
+    defaultValues: DEMO_CREDENTIALS
+  })
+
+  const onSubmit = handleSubmit(async values => {
+    await login.mutateAsync(values)
+    await router.navigate({ to: redirectTo ?? '/' })
+  })
+
+  return (
+    <main className='flex min-h-svh items-center justify-center p-6'>
+      <form onSubmit={onSubmit} className='w-full max-w-sm'>
+        <FieldGroup>
+          <div className='flex flex-col gap-1 text-center'>
+            <h1 className='text-xl font-semibold'>Sign in</h1>
+            {import.meta.env.DEV && (
+              <p className='text-muted-foreground text-sm'>Sign in with the seeded demo account.</p>
+            )}
+          </div>
+
+          {import.meta.env.DEV && (
+            <div className='bg-muted text-muted-foreground rounded-lg border px-3 py-2 text-center font-mono text-xs'>
+              {DEMO_CREDENTIALS.email} · {DEMO_CREDENTIALS.password}
+            </div>
+          )}
+
+          {FIELDS.map(field => {
+            const error = formState.errors[field.name]
+            return (
+              <Field key={field.name} data-invalid={Boolean(error)}>
+                <FieldLabel htmlFor={field.name}>{field.label}</FieldLabel>
+                <Input
+                  id={field.name}
+                  type={field.type}
+                  autoComplete={field.autoComplete}
+                  aria-invalid={Boolean(error)}
+                  {...register(field.name)}
+                />
+                <FieldError errors={[error]} />
+              </Field>
+            )
+          })}
+
+          <Button type='submit' disabled={formState.isSubmitting}>
+            {formState.isSubmitting ? 'Signing in…' : 'Sign in'}
+          </Button>
+        </FieldGroup>
+      </form>
+    </main>
+  )
+}

package/templates/template-router/src/test/setup.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(cleanup)

package/templates/template-router/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client", "vitest/globals", "vitest/jsdom", "@testing-library/jest-dom"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noImplicitOverride": true,
+    "paths": { "@/*": ["./src/*"] },
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": ["src"]
+}

package/templates/template-router/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "paths": { "@/*": ["./src/*"] }
+  }
+}

package/templates/template-router/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/template-router/vite.config.ts

@@ -0,0 +1,33 @@
+import babel from '@rolldown/plugin-babel'
+import tailwindcss from '@tailwindcss/vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import { fileURLToPath } from 'node:url'
+import { configDefaults, defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true
+    }),
+    react(),
+    tailwindcss(),
+    babel({ presets: [reactCompilerPreset()] })
+  ],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    environmentOptions: { happyDOM: { url: 'http://localhost' } },
+    env: { VITE_API_URL: 'http://localhost/api/' },
+    setupFiles: ['./src/test/setup.ts'],
+    restoreMocks: true,
+    css: false,
+    exclude: [...configDefaults.exclude, '**/e2e/**', 'create-cli/**']
+  }
+})