create-kuckit-app 0.2.1 → 0.3.1

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

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	)
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	)
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	)
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/templates/base/apps/web/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+		}
+		mql.addEventListener('change', onChange)
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+		return () => mql.removeEventListener('change', onChange)
+	}, [])
+
+	return !!isMobile
+}

package/templates/base/apps/web/src/index.css

@@ -0,0 +1,133 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/base/apps/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

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

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import { routeTree } from './routeTree.gen'
 import { ServicesProvider } from './providers/ServicesProvider'
 import { KuckitProvider } from './providers/KuckitProvider'
+import './index.css'
 
 declare module '@tanstack/react-router' {
 	interface Register {

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

@@ -1,10 +1,5 @@
 import { createContext, useContext, useEffect, useState, useMemo, type ReactNode } from 'react'
-import {
-	RouterProvider,
-	createRouter,
-	createRoute,
-	type RouteComponent,
-} from '@tanstack/react-router'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import {
 	loadKuckitClientModules,
 	KuckitNavProvider,
@@ -16,7 +11,6 @@ import {
 	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'
 
@@ -81,26 +75,8 @@ export function KuckitProvider({ children }: KuckitProviderProps) {
 		}
 	}, [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',

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

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { KuckitModuleRoute } from '@/components/KuckitModuleRoute'
+
+/**
+ * Catch-all route for KuckitModule routes under /dashboard.
+ */
+export const Route = createFileRoute('/dashboard/$')({
+	component: KuckitModuleRoute,
+})

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

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DashboardOverview } from '@/components/dashboard/dashboard-overview'
+
+export const Route = createFileRoute('/dashboard/')({
+	component: DashboardOverview,
+})

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

@@ -0,0 +1,25 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { DashboardLayout } from '@/components/dashboard/dashboard-layout'
+import { createAuthClientService } from '../services/auth-client'
+
+export const Route = createFileRoute('/dashboard')({
+	beforeLoad: async () => {
+		const authClient = createAuthClientService()
+		const session = await authClient.getSession()
+		if (!session.data) {
+			throw redirect({
+				to: '/login',
+			})
+		}
+		return { session }
+	},
+	component: DashboardLayoutRoute,
+})
+
+function DashboardLayoutRoute() {
+	return (
+		<DashboardLayout>
+			<Outlet />
+		</DashboardLayout>
+	)
+}

package/templates/base/apps/web/vite.config.ts

@@ -1,10 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
-import path from 'path'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
-	plugins: [TanStackRouterVite(), react()],
+	plugins: [tailwindcss(), TanStackRouterVite(), react()],
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, './src'),

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

@@ -13,6 +13,10 @@
 		"./client": {
 			"types": "./src/client-module.ts",
 			"default": "./src/client-module.ts"
+		},
+		"./ui": {
+			"types": "./src/ui/index.ts",
+			"default": "./src/ui/index.ts"
 		}
 	},
 	"peerDependencies": {

package/templates/base/packages/items-module/src/ui/index.ts

@@ -0,0 +1 @@
+export { ItemsPage } from './ItemsPage'

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

@@ -1,42 +0,0 @@
-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 }],
-			}),
-		}),
-	})
-}