create-kuckit-app 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-kuckit-app",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Create a new Kuckit application",
 	"type": "module",
 	"license": "MIT",
@@ -40,12 +40,14 @@
 	},
 	"scripts": {
 		"build": "tsdown",
+		"test:e2e": "playwright test --config e2e/playwright.config.ts",
 		"prepublishOnly": "npm run build && node ../../scripts/resolve-workspace-protocols.cjs && node ../../scripts/check-no-workspace-protocol.cjs"
 	},
 	"dependencies": {
 		"commander": "^13.1.0"
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.52.0",
 		"@types/node": "^22.13.13",
 		"tsdown": "catalog:"
 	}

package/templates/base/apps/server/package.json

@@ -9,9 +9,9 @@
 	},
 	"dependencies": {
 		"dotenv": "^17.0.0",
-		"@kuckit/app-server": "^3.0.2",
-		"@kuckit/sdk": "^3.0.2",
-		"@kuckit/db": "^3.0.2"
+		"@kuckit/app-server": "^5.0.0",
+		"@kuckit/sdk": "^5.0.0",
+		"@kuckit/db": "^5.0.0"
 	},
 	"devDependencies": {
 		"typescript": "^5.8.2",

package/templates/base/apps/web/package.json

@@ -9,8 +9,8 @@
 		"check-types": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@kuckit/app-web": "^3.0.2",
-		"@kuckit/sdk-react": "^3.0.2",
+		"@kuckit/app-web": "^5.0.0",
+		"@kuckit/sdk-react": "^5.0.0",
 		"@radix-ui/react-avatar": "^1.1.10",
 		"@radix-ui/react-collapsible": "^1.1.11",
 		"@radix-ui/react-dialog": "^1.1.14",

package/templates/base/apps/web/src/components/dashboard/nav-user.tsx

@@ -51,7 +51,7 @@ export function NavUser() {
 								<span className="truncate font-semibold">{user?.name || 'User'}</span>
 								<span className="truncate text-xs text-muted-foreground">{user?.email || ''}</span>
 							</div>
-							<ChevronsUpDown className="ml-auto size-4" />
+							<ChevronsUpDown className="ml-auto size-4" aria-hidden="true" />
 						</SidebarMenuButton>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent
@@ -61,12 +61,12 @@ export function NavUser() {
 						sideOffset={4}
 					>
 						<DropdownMenuItem onClick={() => navigate({ to: '/dashboard/settings' })}>
-							<User className="mr-2 h-4 w-4" />
+							<User className="mr-2 h-4 w-4" aria-hidden="true" />
 							Settings
 						</DropdownMenuItem>
 						<DropdownMenuSeparator />
 						<DropdownMenuItem onClick={handleLogout}>
-							<LogOut className="mr-2 h-4 w-4" />
+							<LogOut className="mr-2 h-4 w-4" aria-hidden="true" />
 							Log out
 						</DropdownMenuItem>
 					</DropdownMenuContent>

package/templates/base/apps/web/src/components/ui/sidebar.tsx

@@ -254,6 +254,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 			data-slot="sidebar-trigger"
 			variant="ghost"
 			size="icon"
+			aria-label="Toggle sidebar"
 			className={cn('size-7', className)}
 			onClick={(event) => {
 				onClick?.(event)
@@ -261,7 +262,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 			}}
 			{...props}
 		>
-			<PanelLeftIcon />
+			<PanelLeftIcon aria-hidden="true" />
 			<span className="sr-only">Toggle Sidebar</span>
 		</Button>
 	)

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

@@ -24,7 +24,13 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 
 function RootComponent() {
 	return (
-		<div style={{ minHeight: '100vh' }}>
+		<div className="min-h-dvh">
+			<a
+				href="#main-content"
+				className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:shadow"
+			>
+				Skip to content
+			</a>
 			<Outlet />
 		</div>
 	)

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

@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useAuth } from '@kuckit/app-web'
+import { Button } from '@/components/ui/button'
 
 export const Route = createFileRoute('/')({
 	component: HomePage,
@@ -11,36 +12,30 @@ function HomePage() {
 
 	if (isPending) {
 		return (
-			<div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
-				<p>Loading...</p>
-			</div>
+			<main id="main-content" className="mx-auto max-w-3xl px-6 py-12">
+				<p className="text-sm text-muted-foreground">Loading…</p>
+			</main>
 		)
 	}
 
 	return (
-		<div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
-			<h1>Welcome to __APP_NAME__</h1>
+		<main id="main-content" className="mx-auto max-w-3xl px-6 py-12">
+			<h1 className="text-3xl font-semibold tracking-tight text-pretty">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 className="mt-6 space-y-4">
+					<p className="text-sm text-muted-foreground">
+						Hello, {session.user.name || session.user.email}!
+					</p>
+					<Button onClick={() => authClient.signOut()}>Sign Out</Button>
 				</div>
 			) : (
-				<div>
-					<p>Your Kuckit application is ready!</p>
-					<Link to="/login" style={{ color: 'blue', textDecoration: 'underline' }}>
-						Sign In
-					</Link>
+				<div className="mt-6 space-y-4">
+					<p className="text-sm text-muted-foreground">Your Kuckit application is ready.</p>
+					<Button asChild>
+						<Link to="/login">Sign In</Link>
+					</Button>
 				</div>
 			)}
-		</div>
+		</main>
 	)
 }

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

@@ -1,6 +1,8 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import { useAuth } from '@kuckit/app-web'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 export const Route = createFileRoute('/login')({
 	component: LoginPage,
@@ -15,6 +17,10 @@ function LoginPage() {
 	const [name, setName] = useState('')
 	const [error, setError] = useState('')
 	const [loading, setLoading] = useState(false)
+	const emailId = useId()
+	const passwordId = useId()
+	const nameId = useId()
+	const errorId = useId()
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault()
@@ -36,73 +42,98 @@ function LoginPage() {
 			}
 			navigate({ to: '/' })
 		} catch (err) {
-			setError(err instanceof Error ? err.message : 'Authentication failed')
+			setError(
+				err instanceof Error
+					? err.message
+					: 'Authentication failed. Check your details and try again.'
+			)
 		} finally {
 			setLoading(false)
 		}
 	}
 
 	return (
-		<div style={{ padding: '2rem', fontFamily: 'system-ui', maxWidth: '400px', margin: '0 auto' }}>
-			<h1>{isSignUp ? 'Create Account' : 'Sign In'}</h1>
+		<main
+			id="main-content"
+			className="mx-auto flex min-h-dvh w-full max-w-md flex-col justify-center px-6 py-12"
+		>
+			<h1 className="text-3xl font-semibold tracking-tight text-pretty">
+				{isSignUp ? 'Create Account' : 'Sign In'}
+			</h1>
+			<p className="mt-2 text-sm text-muted-foreground">Use your email and password to continue.</p>
 
 			<form
 				onSubmit={handleSubmit}
-				style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+				className="mt-8 space-y-6"
+				aria-describedby={error ? errorId : undefined}
 			>
 				{isSignUp && (
-					<input
-						type="text"
-						placeholder="Name"
-						value={name}
-						onChange={(e) => setName(e.target.value)}
+					<div className="space-y-2">
+						<label className="text-sm font-medium" htmlFor={nameId}>
+							Full Name
+						</label>
+						<Input
+							id={nameId}
+							name="name"
+							type="text"
+							autoComplete="name"
+							placeholder="Sam Rivera…"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							required
+						/>
+					</div>
+				)}
+				<div className="space-y-2">
+					<label className="text-sm font-medium" htmlFor={emailId}>
+						Email
+					</label>
+					<Input
+						id={emailId}
+						name="email"
+						type="email"
+						autoComplete={isSignUp ? 'email' : 'username'}
+						inputMode="email"
+						spellCheck={false}
+						placeholder="you@company.com…"
+						value={email}
+						onChange={(e) => setEmail(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' }}
-				/>
+				</div>
+				<div className="space-y-2">
+					<label className="text-sm font-medium" htmlFor={passwordId}>
+						Password
+					</label>
+					<Input
+						id={passwordId}
+						name="password"
+						type="password"
+						autoComplete={isSignUp ? 'new-password' : 'current-password'}
+						placeholder="At least 8 characters…"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						required
+					/>
+				</div>
 
-				{error && <p style={{ color: 'red' }}>{error}</p>}
+				{error && (
+					<p id={errorId} className="text-sm text-destructive" aria-live="polite">
+						{error}
+					</p>
+				)}
 
-				<button
-					type="submit"
-					disabled={loading}
-					style={{ padding: '0.5rem 1rem', fontSize: '1rem', cursor: 'pointer' }}
-				>
-					{loading ? 'Loading...' : isSignUp ? 'Create Account' : 'Sign In'}
-				</button>
+				<Button type="submit" className="w-full" disabled={loading}>
+					{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',
-					}}
-				>
+			<p className="mt-6 text-sm text-muted-foreground">
+				{isSignUp ? 'Already have an account?' : "Don't have an account?"}{' '}
+				<Button variant="link" type="button" onClick={() => setIsSignUp(!isSignUp)}>
 					{isSignUp ? 'Sign In' : 'Create Account'}
-				</button>
+				</Button>
 			</p>
-		</div>
+		</main>
 	)
 }

package/templates/base/apps/web/tsconfig.json

@@ -4,6 +4,7 @@
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"jsx": "react-jsx",
 		"noEmit": true,
+		"types": ["vite/client"],
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./src/*"]

package/templates/base/drizzle.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from 'drizzle-kit'
 import dotenv from 'dotenv'
+import * as fs from 'fs'
+import * as path from 'path'
 import { dirname, resolve } from 'path'
 import { fileURLToPath } from 'url'
 import { getModuleSchemaPaths } from '@kuckit/db/schema-discovery'
@@ -26,8 +28,22 @@ function buildDatabaseUrl(): string {
 	)
 }
 
+function normalizeSchemaPath(schemaPath: string): string {
+	if (schemaPath.includes(`${path.sep}dist${path.sep}`)) {
+		return `${schemaPath}/*.js`
+	}
+	if (fs.existsSync(path.join(schemaPath, 'auth.js'))) {
+		return `${schemaPath}/*.js`
+	}
+	return schemaPath
+}
+
+const shouldNormalizeSchemas = process.env.DRIZZLE_SCHEMA_NORMALIZE !== 'false'
+
 export default defineConfig({
-	schema: getModuleSchemaPaths(),
+	schema: shouldNormalizeSchemas
+		? getModuleSchemaPaths().map(normalizeSchemaPath)
+		: getModuleSchemaPaths(),
 	out: './drizzle',
 	dialect: 'postgresql',
 	dbCredentials: { url: buildDatabaseUrl() },

package/templates/base/package.json

@@ -32,12 +32,12 @@
 		]
 	},
 	"dependencies": {
-		"@kuckit/sdk": "^3.0.2",
-		"@kuckit/api": "^3.0.2",
-		"@kuckit/auth": "^3.0.2",
-		"@kuckit/db": "^3.0.2",
-		"@kuckit/domain": "^3.0.2",
-		"@kuckit/infrastructure": "^3.0.2",
+		"@kuckit/sdk": "^5.0.0",
+		"@kuckit/api": "^5.0.0",
+		"@kuckit/auth": "^5.0.0",
+		"@kuckit/db": "^5.0.0",
+		"@kuckit/domain": "^5.0.0",
+		"@kuckit/infrastructure": "^5.0.0",
 		"awilix": "^12.0.5",
 		"dotenv": "^17.0.0",
 		"drizzle-orm": "^0.44.0",

package/templates/base/packages/items-module/package.json

@@ -19,15 +19,15 @@
 		"id": "items",
 		"server": ".",
 		"client": "./client",
-		"schemaDir": "src/server/adapters"
+		"schemaDir": "src/server/schema"
 	},
 	"peerDependencies": {
 		"typescript": "^5"
 	},
 	"dependencies": {
-		"@kuckit/sdk": "^3.0.2",
-		"@kuckit/sdk-react": "^3.0.2",
-		"@kuckit/api": "^3.0.2",
+		"@kuckit/sdk": "^5.0.0",
+		"@kuckit/sdk-react": "^5.0.0",
+		"@kuckit/api": "^5.0.0",
 		"@orpc/server": "^1.10.0",
 		"@orpc/zod": "^1.10.0",
 		"drizzle-orm": "^0.44.0",