create-kuckit-app 0.2.1 → 0.3.0

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/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/modules.client.ts

@@ -1,5 +1,5 @@
 import type { ClientModuleSpec } from '@kuckit/sdk-react'
-import { kuckitClientModule as itemsClientModule } from '@__APP_NAME_KEBAB__/items-module/client'
+import { kuckitClientModule as itemsClientModule } from '@__APP_NAME_KEBAB__/items-module/src/client-module'
 
 /**
  * Client modules configuration

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/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 }],
-			}),
-		}),
-	})
-}