create-kuckit-app 0.1.1 → 0.2.1

package/templates/base/apps/web/src/components/KuckitModuleRoute.tsx

@@ -0,0 +1,82 @@
+import { useRouterState, Link, useNavigate } from '@tanstack/react-router'
+import { useKuckit } from '@/providers/KuckitProvider'
+import { useServices } from '@/providers/ServicesProvider'
+import { useEffect, useState } from 'react'
+
+/**
+ * Dynamic route renderer for Kuckit module routes.
+ *
+ * This component looks up the current path in the RouteRegistry
+ * and renders the corresponding module component if found.
+ *
+ * For routes with meta.requiresAuth: true, redirects to /login if not authenticated.
+ */
+export function KuckitModuleRoute() {
+	const { routeRegistry } = useKuckit()
+	const { authClient } = useServices()
+	const { location } = useRouterState()
+	const navigate = useNavigate()
+	const pathname = location.pathname
+
+	const [authChecked, setAuthChecked] = useState(false)
+	const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+	// Find matching route in registry
+	const routeDef = routeRegistry.getAll().find((r) => r.path === pathname)
+
+	// Check auth for routes with requiresAuth
+	useEffect(() => {
+		async function checkAuth() {
+			if (!routeDef) {
+				setAuthChecked(true)
+				return
+			}
+
+			// Check if auth is required
+			if (routeDef.meta?.requiresAuth) {
+				const session = await authClient.getSession()
+				if (!session.data) {
+					// Redirect to login with return URL
+					navigate({
+						to: '/login',
+						search: { redirect: pathname },
+					})
+					return
+				}
+				setIsAuthenticated(true)
+			}
+			setAuthChecked(true)
+		}
+
+		checkAuth()
+	}, [routeDef, pathname, navigate, authClient])
+
+	// Show loading while checking auth for protected routes
+	if (routeDef?.meta?.requiresAuth && !authChecked) {
+		return (
+			<div className="flex items-center justify-center min-h-screen">
+				<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+			</div>
+		)
+	}
+
+	// Protected route - waiting for redirect
+	if (routeDef?.meta?.requiresAuth && !isAuthenticated) {
+		return null
+	}
+
+	if (!routeDef) {
+		return (
+			<div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
+				<h1 className="text-2xl font-bold">Page Not Found</h1>
+				<p className="text-muted-foreground">The page "{pathname}" could not be found.</p>
+				<Link to="/" className="text-primary hover:underline">
+					Go Home
+				</Link>
+			</div>
+		)
+	}
+
+	const Component = routeDef.component as React.ComponentType
+	return <Component />
+}

package/templates/base/apps/web/src/lib/kuckit-router.ts

@@ -0,0 +1,42 @@
+import { createRoute, type AnyRoute, type RouteComponent } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import type { RouteRegistry, RouteDefinition } from '@kuckit/sdk-react'
+import type { ORPCUtils } from '../services/types'
+
+export interface KuckitRouterContext {
+	orpc: ORPCUtils
+	queryClient: QueryClient
+}
+
+/**
+ * Build TanStack Router routes from a RouteRegistry
+ */
+export function buildModuleRoutes(routeRegistry: RouteRegistry, rootRoute: AnyRoute): AnyRoute[] {
+	const routes = routeRegistry.getAll()
+	const routeMap = new Map<string, AnyRoute>()
+
+	for (const routeDef of routes) {
+		const route = createModuleRoute(routeDef, rootRoute)
+		routeMap.set(routeDef.id, route)
+	}
+
+	const topLevelRoutes = routes
+		.filter((r) => !r.parentRouteId || r.parentRouteId === '__root__')
+		.map((r) => routeMap.get(r.id)!)
+		.filter(Boolean)
+
+	return topLevelRoutes
+}
+
+function createModuleRoute(routeDef: RouteDefinition, parentRoute: AnyRoute): AnyRoute {
+	return createRoute({
+		getParentRoute: () => parentRoute,
+		path: routeDef.path,
+		component: routeDef.component as RouteComponent,
+		...(routeDef.meta?.title && {
+			head: () => ({
+				meta: [{ title: routeDef.meta!.title }],
+			}),
+		}),
+	})
+}

package/templates/base/apps/web/src/main.tsx

@@ -1,14 +1,26 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { App } from './App.js'
-
-const queryClient = new QueryClient()
-
-createRoot(document.getElementById('root')!).render(
-	<StrictMode>
-		<QueryClientProvider client={queryClient}>
-			<App />
-		</QueryClientProvider>
-	</StrictMode>
-)
+import { createRouter } from '@tanstack/react-router'
+import ReactDOM from 'react-dom/client'
+import { routeTree } from './routeTree.gen'
+import { ServicesProvider } from './providers/ServicesProvider'
+import { KuckitProvider } from './providers/KuckitProvider'
+
+declare module '@tanstack/react-router' {
+	interface Register {
+		router: ReturnType<typeof createRouter<typeof routeTree>>
+	}
+}
+
+const rootElement = document.getElementById('app')
+
+if (!rootElement) {
+	throw new Error('Root element not found')
+}
+
+if (!rootElement.innerHTML) {
+	const root = ReactDOM.createRoot(rootElement)
+	root.render(
+		<ServicesProvider>
+			<KuckitProvider />
+		</ServicesProvider>
+	)
+}

package/templates/base/apps/web/src/modules.client.ts

@@ -1,4 +1,5 @@
 import type { ClientModuleSpec } from '@kuckit/sdk-react'
+import { kuckitClientModule as itemsClientModule } from '@__APP_NAME_KEBAB__/items-module/client'
 
 /**
  * Client modules configuration
@@ -7,9 +8,9 @@ import type { ClientModuleSpec } from '@kuckit/sdk-react'
  */
 export const getClientModuleSpecs = (): ClientModuleSpec[] => {
 	const modules: ClientModuleSpec[] = [
-		// KUCKIT_MODULES_START
-		// Client modules will be added here
-		// KUCKIT_MODULES_END
+		// KUCKIT_CLIENT_MODULES_START
+		{ module: itemsClientModule },
+		// KUCKIT_CLIENT_MODULES_END
 	]
 
 	return modules

package/templates/base/apps/web/src/providers/KuckitProvider.tsx

@@ -0,0 +1,147 @@
+import { createContext, useContext, useEffect, useState, useMemo, type ReactNode } from 'react'
+import {
+	RouterProvider,
+	createRouter,
+	createRoute,
+	type RouteComponent,
+} from '@tanstack/react-router'
+import {
+	loadKuckitClientModules,
+	KuckitNavProvider,
+	KuckitSlotProvider,
+	KuckitRpcProvider,
+	type LoadClientModulesResult,
+	type RouteRegistry,
+	type NavRegistry,
+	type SlotRegistry,
+} from '@kuckit/sdk-react'
+import { routeTree } from '../routeTree.gen'
+import { Route as rootRoute } from '../routes/__root'
+import { useServices } from './ServicesProvider'
+import { getClientModuleSpecs } from '../modules.client'
+
+interface KuckitContextValue {
+	routeRegistry: RouteRegistry
+	navRegistry: NavRegistry
+	slotRegistry: SlotRegistry
+	isLoaded: boolean
+}
+
+const KuckitContext = createContext<KuckitContextValue | null>(null)
+
+/**
+ * Hook to access Kuckit registries
+ */
+export function useKuckit(): KuckitContextValue {
+	const ctx = useContext(KuckitContext)
+	if (!ctx) {
+		throw new Error('useKuckit must be used within a KuckitProvider')
+	}
+	return ctx
+}
+
+interface KuckitProviderProps {
+	children?: ReactNode
+}
+
+/**
+ * KuckitProvider handles module loading and router creation
+ */
+export function KuckitProvider({ children }: KuckitProviderProps) {
+	const { orpc, queryClient, rpcClient } = useServices()
+	const [loadResult, setLoadResult] = useState<LoadClientModulesResult | null>(null)
+	const [error, setError] = useState<Error | null>(null)
+
+	useEffect(() => {
+		let cancelled = false
+
+		const loadModules = async () => {
+			try {
+				const result = await loadKuckitClientModules({
+					orpc,
+					queryClient,
+					env: import.meta.env.MODE,
+					modules: getClientModuleSpecs(),
+				})
+
+				if (!cancelled) {
+					setLoadResult(result)
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err instanceof Error ? err : new Error(String(err)))
+				}
+			}
+		}
+
+		loadModules()
+
+		return () => {
+			cancelled = true
+		}
+	}, [orpc, queryClient])
+
+	// Build router with module routes
+	const router = useMemo(() => {
+		if (!loadResult) return null
+
+		const moduleRouteDefs = loadResult.routeRegistry.getAll()
+		const moduleRoutes = moduleRouteDefs.map((routeDef) =>
+			createRoute({
+				getParentRoute: () => rootRoute,
+				path: routeDef.path,
+				component: routeDef.component as RouteComponent,
+			})
+		)
+
+		if (moduleRoutes.length > 0) {
+			console.log(
+				`Loaded ${moduleRoutes.length} module routes:`,
+				moduleRouteDefs.map((r) => r.path)
+			)
+		}
+
+		return createRouter({
+			routeTree,
+			defaultPreload: 'intent',
+			context: { orpc, queryClient },
+		})
+	}, [loadResult, orpc, queryClient])
+
+	if (error) {
+		return (
+			<div style={{ padding: '2rem', color: 'red' }}>
+				<h2>Failed to load modules</h2>
+				<p>{error.message}</p>
+			</div>
+		)
+	}
+
+	if (!loadResult || !router) {
+		return (
+			<div style={{ padding: '2rem' }}>
+				<p>Loading...</p>
+			</div>
+		)
+	}
+
+	const contextValue: KuckitContextValue = {
+		routeRegistry: loadResult.routeRegistry,
+		navRegistry: loadResult.navRegistry,
+		slotRegistry: loadResult.slotRegistry,
+		isLoaded: true,
+	}
+
+	return (
+		<KuckitContext.Provider value={contextValue}>
+			<KuckitRpcProvider client={rpcClient}>
+				<KuckitNavProvider registry={loadResult.navRegistry}>
+					<KuckitSlotProvider registry={loadResult.slotRegistry}>
+						<RouterProvider router={router} />
+						{children}
+					</KuckitSlotProvider>
+				</KuckitNavProvider>
+			</KuckitRpcProvider>
+		</KuckitContext.Provider>
+	)
+}

package/templates/base/apps/web/src/providers/ServicesProvider.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
+import { QueryClientProvider } from '@tanstack/react-query'
+import {
+	createQueryClient,
+	createRPCLink,
+	createRPCClient,
+	createORPCUtils,
+	createAuthClientService,
+	type Services,
+} from '../services'
+
+const ServicesContext = createContext<Services | null>(null)
+
+interface ServicesProviderProps {
+	children: ReactNode
+}
+
+export function ServicesProvider({ children }: ServicesProviderProps) {
+	const services = useMemo<Services>(() => {
+		const queryClient = createQueryClient()
+		const link = createRPCLink()
+		const rpcClient = createRPCClient(link)
+		const orpc = createORPCUtils(rpcClient)
+		const authClient = createAuthClientService()
+
+		return {
+			queryClient,
+			rpcClient,
+			orpc,
+			authClient,
+		}
+	}, [])
+
+	return (
+		<ServicesContext.Provider value={services}>
+			<QueryClientProvider client={services.queryClient}>{children}</QueryClientProvider>
+		</ServicesContext.Provider>
+	)
+}
+
+export function useServices(): Services {
+	const context = useContext(ServicesContext)
+	if (!context) {
+		throw new Error('useServices must be used within a ServicesProvider')
+	}
+	return context
+}

package/templates/base/apps/web/src/routeTree.gen.ts

@@ -0,0 +1,91 @@
+/* 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 Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as LoginImport } from './routes/login'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const LoginRoute = LoginImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/login'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/login'
+  id: '__root__' | '/' | '/login'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  LoginRoute: typeof LoginRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  LoginRoute: LoginRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/base/apps/web/src/routes/$.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { KuckitModuleRoute } from '@/components/KuckitModuleRoute'
+
+/**
+ * Catch-all route for KuckitModule routes at root level.
+ *
+ * This route matches any path not handled by other file-based routes
+ * and uses the KuckitModuleRoute component to look up and render
+ * the appropriate module component from the RouteRegistry.
+ */
+// @ts-expect-error - Route types are generated when dev server runs
+export const Route = createFileRoute('/$')({
+	component: KuckitModuleRoute,
+})

package/templates/base/apps/web/src/routes/__root.tsx

@@ -0,0 +1,31 @@
+import type { QueryClient } from '@tanstack/react-query'
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import type { ORPCUtils } from '../services/types'
+
+export interface RouterAppContext {
+	orpc: ORPCUtils
+	queryClient: QueryClient
+}
+
+export const Route = createRootRouteWithContext<RouterAppContext>()({
+	component: RootComponent,
+	head: () => ({
+		meta: [
+			{
+				title: '__APP_NAME__',
+			},
+			{
+				name: 'description',
+				content: '__APP_NAME__ - A Kuckit application',
+			},
+		],
+	}),
+})
+
+function RootComponent() {
+	return (
+		<div style={{ minHeight: '100vh' }}>
+			<Outlet />
+		</div>
+	)
+}

package/templates/base/apps/web/src/routes/index.tsx

@@ -0,0 +1,46 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useServices } from '../providers/ServicesProvider'
+
+export const Route = createFileRoute('/')({
+	component: HomePage,
+})
+
+function HomePage() {
+	const { authClient } = useServices()
+	const { data: session, isPending } = authClient.useSession()
+
+	if (isPending) {
+		return (
+			<div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+				<p>Loading...</p>
+			</div>
+		)
+	}
+
+	return (
+		<div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+			<h1>Welcome to __APP_NAME__</h1>
+			{session?.user ? (
+				<div>
+					<p>Hello, {session.user.name || session.user.email}!</p>
+					<button
+						onClick={() => authClient.signOut()}
+						style={{
+							padding: '0.5rem 1rem',
+							cursor: 'pointer',
+						}}
+					>
+						Sign Out
+					</button>
+				</div>
+			) : (
+				<div>
+					<p>Your Kuckit application is ready!</p>
+					<Link to="/login" style={{ color: 'blue', textDecoration: 'underline' }}>
+						Sign In
+					</Link>
+				</div>
+			)}
+		</div>
+	)
+}

package/templates/base/apps/web/src/routes/login.tsx

@@ -0,0 +1,108 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useServices } from '../providers/ServicesProvider'
+
+export const Route = createFileRoute('/login')({
+	component: LoginPage,
+})
+
+function LoginPage() {
+	const { authClient } = useServices()
+	const navigate = useNavigate()
+	const [isSignUp, setIsSignUp] = useState(false)
+	const [email, setEmail] = useState('')
+	const [password, setPassword] = useState('')
+	const [name, setName] = useState('')
+	const [error, setError] = useState('')
+	const [loading, setLoading] = useState(false)
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		setError('')
+		setLoading(true)
+
+		try {
+			if (isSignUp) {
+				await authClient.signUp.email({
+					email,
+					password,
+					name,
+				})
+			} else {
+				await authClient.signIn.email({
+					email,
+					password,
+				})
+			}
+			navigate({ to: '/' })
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Authentication failed')
+		} finally {
+			setLoading(false)
+		}
+	}
+
+	return (
+		<div style={{ padding: '2rem', fontFamily: 'system-ui', maxWidth: '400px', margin: '0 auto' }}>
+			<h1>{isSignUp ? 'Create Account' : 'Sign In'}</h1>
+
+			<form
+				onSubmit={handleSubmit}
+				style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+			>
+				{isSignUp && (
+					<input
+						type="text"
+						placeholder="Name"
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+						required
+						style={{ padding: '0.5rem', fontSize: '1rem' }}
+					/>
+				)}
+				<input
+					type="email"
+					placeholder="Email"
+					value={email}
+					onChange={(e) => setEmail(e.target.value)}
+					required
+					style={{ padding: '0.5rem', fontSize: '1rem' }}
+				/>
+				<input
+					type="password"
+					placeholder="Password"
+					value={password}
+					onChange={(e) => setPassword(e.target.value)}
+					required
+					style={{ padding: '0.5rem', fontSize: '1rem' }}
+				/>
+
+				{error && <p style={{ color: 'red' }}>{error}</p>}
+
+				<button
+					type="submit"
+					disabled={loading}
+					style={{ padding: '0.5rem 1rem', fontSize: '1rem', cursor: 'pointer' }}
+				>
+					{loading ? 'Loading...' : isSignUp ? 'Create Account' : 'Sign In'}
+				</button>
+			</form>
+
+			<p style={{ marginTop: '1rem' }}>
+				{isSignUp ? 'Already have an account? ' : "Don't have an account? "}
+				<button
+					onClick={() => setIsSignUp(!isSignUp)}
+					style={{
+						background: 'none',
+						border: 'none',
+						color: 'blue',
+						cursor: 'pointer',
+						textDecoration: 'underline',
+					}}
+				>
+					{isSignUp ? 'Sign In' : 'Create Account'}
+				</button>
+			</p>
+		</div>
+	)
+}

package/templates/base/apps/web/src/services/auth-client.ts

@@ -0,0 +1,12 @@
+import type { auth } from '@__APP_NAME_KEBAB__/auth'
+import { createAuthClient } from 'better-auth/react'
+import { inferAdditionalFields } from 'better-auth/client/plugins'
+
+export function createAuthClientService() {
+	return createAuthClient({
+		baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
+		plugins: [inferAdditionalFields<typeof auth>()],
+	})
+}
+
+export type AuthClient = ReturnType<typeof createAuthClientService>

package/templates/base/apps/web/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './rpc'
+export * from './auth-client'