@tanstack/cta-ui 0.10.0-alpha.23 → 0.10.0-alpha.26

package/lib-dist/index.js

@@ -1,23 +1,124 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-export function launchUI({ mode, addOns, options, forcedMode, forcedAddOns, }) {
-    const projectPath = process.cwd();
-    delete process.env.NODE_ENV;
-    process.env.CTA_ADD_ONS = addOns?.join(',') || '';
-    process.env.CTA_PROJECT_PATH = projectPath;
-    process.env.CTA_OPTIONS = options ? JSON.stringify(options) : '';
-    process.env.CTA_MODE = mode;
-    if (forcedMode) {
-        process.env.CTA_FORCED_ROUTER_MODE = forcedMode;
+import express from 'express';
+import cors from 'cors';
+import { AddOnCompiledSchema, StarterCompiledSchema, } from '@tanstack/cta-engine';
+import { addToAppWrapper } from './engine-handling/add-to-app-wrapper.js';
+import { createAppWrapper } from './engine-handling/create-app-wrapper.js';
+import { generateInitialPayload } from './engine-handling/generate-initial-payload.js';
+import { setServerEnvironment } from './engine-handling/server-environment.js';
+export function launchUI(options) {
+    const { port: requestedPort, ...rest } = options;
+    setServerEnvironment(rest);
+    const app = express();
+    app.use(cors());
+    app.use(express.json());
+    app.use(express.urlencoded({ extended: true }));
+    const launchUI = !process.env.CTA_DISABLE_UI;
+    if (launchUI) {
+        const packagePath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+        app.use(express.static(resolve(packagePath, 'dist')));
     }
-    if (forcedAddOns) {
-        process.env.CTA_FORCED_ADD_ONS = forcedAddOns.join(',');
-    }
-    const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-    const configPath = resolve(developerPath, './app.config.js');
-    process.chdir(developerPath);
-    import(configPath).then(async (config) => {
-        const out = await config.default;
-        await out.dev();
+    app.post('/api/add-to-app', async (req, res) => {
+        await addToAppWrapper(req.body.addOns, {
+            response: res,
+        });
+    });
+    app.post('/api/create-app', async (req, res) => {
+        await createAppWrapper(req.body.options, {
+            response: res,
+        });
+    });
+    app.post('/api/dry-run-add-to-app', async (req, res) => {
+        res.send(await addToAppWrapper(req.body.addOns, {
+            dryRun: true,
+        }));
+    });
+    app.post('/api/dry-run-create-app', async (req, res) => {
+        res.send(await createAppWrapper(req.body.options, {
+            dryRun: true,
+        }));
+    });
+    app.get('/api/initial-payload', async (_req, res) => {
+        res.send(await generateInitialPayload());
+    });
+    app.get('/api/load-remote-add-on', async (req, res) => {
+        const { url } = req.query;
+        if (!url) {
+            res.status(400).send('URL is required');
+            return;
+        }
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const parsed = AddOnCompiledSchema.safeParse(data);
+            if (!parsed.success) {
+                res.status(400).json({ error: 'Invalid add-on data' });
+            }
+            else {
+                res.json({
+                    id: url,
+                    name: parsed.data.name,
+                    description: parsed.data.description,
+                    version: parsed.data.version,
+                    author: parsed.data.author,
+                    license: parsed.data.license,
+                    link: parsed.data.link,
+                    smallLogo: parsed.data.smallLogo,
+                    logo: parsed.data.logo,
+                    type: parsed.data.type,
+                    modes: parsed.data.modes,
+                });
+            }
+        }
+        catch {
+            res.status(500).send('Failed to load add-on');
+        }
+    });
+    app.get('/api/load-starter', async (req, res) => {
+        const { url } = req.query;
+        if (!url) {
+            res.status(400).send('URL is required');
+            return;
+        }
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const parsed = StarterCompiledSchema.safeParse(data);
+            if (!parsed.success) {
+                res.status(400).json({ error: 'Invalid starter data' });
+            }
+            else {
+                res.json({
+                    url,
+                    id: parsed.data.id,
+                    name: parsed.data.name,
+                    description: parsed.data.description,
+                    version: parsed.data.version,
+                    author: parsed.data.author,
+                    license: parsed.data.license,
+                    dependsOn: parsed.data.dependsOn,
+                    mode: parsed.data.mode,
+                    typescript: parsed.data.typescript,
+                    tailwind: parsed.data.tailwind,
+                    banner: parsed.data.banner
+                        ? url.replace('starter.json', parsed.data.banner)
+                        : undefined,
+                });
+            }
+        }
+        catch {
+            res.status(500).send('Failed to load starter');
+        }
+    });
+    app.post('/api/shutdown', (_req, res) => {
+        setTimeout(() => {
+            process.exit(0);
+        }, 50);
+        res.send({ shutdown: true });
+    });
+    const port = requestedPort || process.env.PORT || 8080;
+    app.listen(port, () => {
+        console.log(`Create TanStack ${launchUI ? 'App' : 'API'} is running on http://localhost:${port}`);
     });
 }

package/package.json

@@ -24,16 +24,14 @@
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.5",
     "@tanstack/react-query-devtools": "^5.66.5",
-    "@tanstack/react-router": "^1.114.3",
-    "@tanstack/react-router-devtools": "^1.114.3",
-    "@tanstack/react-router-with-query": "^1.114.3",
-    "@tanstack/react-start": "^1.114.3",
-    "@tanstack/router-plugin": "^1.114.3",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "embla-carousel-react": "^8.6.0",
     "execa": "^9.5.2",
+    "express": "^4.21.2",
     "jotai-tanstack-query": "^0.9.0",
     "lucide-react": "^0.476.0",
     "next-themes": "^0.4.6",
@@ -44,27 +42,28 @@
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
-    "vinxi": "^0.5.3",
     "vite-tsconfig-paths": "^5.1.4",
     "zustand": "^5.0.3",
-    "@tanstack/cta-engine": "0.10.0-alpha.21",
-    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.21",
-    "@tanstack/cta-framework-solid": "0.10.0-alpha.21"
+    "@tanstack/cta-engine": "0.10.0-alpha.26",
+    "@tanstack/cta-framework-solid": "0.10.0-alpha.26",
+    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.26"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.1",
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "3.1.1",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.2",
-    "vite": "^6.1.0",
+    "vite": "^6.3.3",
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.23",
+  "version": "0.10.0-alpha.26",
   "scripts": {}
 }

package/src/components/sidebar-items/starter.tsx

@@ -12,13 +12,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-
 import {
   setProjectStarter,
   useApplicationMode,
   useProjectStarter,
+  useRegistry,
 } from '@/store/project'
 import { loadRemoteStarter } from '@/lib/api'
+import { StartersCarousel } from '@/components/starters-carousel'
 
 export default function Starter() {
   const [url, setUrl] = useState('')
@@ -32,8 +33,8 @@ export default function Starter() {
     return null
   }
 
-  async function onImport() {
-    const data = await loadRemoteStarter(url)
+  async function onImport(registryUrl?: string) {
+    const data = await loadRemoteStarter(registryUrl || url)
 
     if ('error' in data) {
       toast.error('Failed to load starter', {
@@ -45,6 +46,8 @@ export default function Starter() {
     }
   }
 
+  const registry = useRegistry()
+
   return (
     <>
       {projectStarter?.banner && (
@@ -86,11 +89,16 @@ export default function Starter() {
           <FileBoxIcon className="w-4 h-4" />
           Set Project Starter
         </Button>
-        <Dialog modal open={open}>
+        <Dialog modal open={open} onOpenChange={setOpen}>
           <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
             <DialogHeader>
               <DialogTitle>Project Starter URL</DialogTitle>
             </DialogHeader>
+            {registry?.starters && (
+              <div>
+                <StartersCarousel onImport={onImport} />
+              </div>
+            )}
             <div>
               <Input
                 value={url}

package/src/components/starters-carousel.tsx

@@ -0,0 +1,45 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '@/components/ui/carousel'
+
+import { useRegistry } from '@/store/project'
+
+export function StartersCarousel({
+  onImport,
+}: {
+  onImport: (url: string) => void
+}) {
+  const registry = useRegistry()
+
+  if (!registry) {
+    return null
+  }
+
+  return (
+    <div>
+      <Carousel>
+        <CarouselContent>
+          {registry.starters.map((starter) => (
+            <CarouselItem className="basis-1/3" key={starter.url}>
+              <div
+                className="p-2 flex flex-col items-center hover:cursor-pointer hover:bg-gray-700/50 hover:text-white rounded-lg"
+                onClick={() => {
+                  onImport(starter.url)
+                }}
+              >
+                <img
+                  src={starter.banner}
+                  alt={starter.name}
+                  className="w-100 max-w-full"
+                />
+                <div className="text-md font-bold">{starter.name}</div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  )
+}

package/src/components/startup-dialog.tsx

@@ -0,0 +1,73 @@
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { StartersCarousel } from '@/components/starters-carousel'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import {
+  setProjectStarter,
+  useApplicationMode,
+  useRegistry,
+  useStartupDialog,
+} from '@/store/project'
+import { loadRemoteStarter } from '@/lib/api'
+
+export default function StartupDialog() {
+  const mode = useApplicationMode()
+  const registry = useRegistry()
+  const { open, setOpen, dontShowAgain, setDontShowAgain } = useStartupDialog()
+
+  if (mode !== 'setup' || !registry) {
+    return null
+  }
+
+  async function onImport(registryUrl: string) {
+    const data = await loadRemoteStarter(registryUrl)
+
+    if ('error' in data) {
+      toast.error('Failed to load starter', {
+        description: data.error,
+      })
+    } else {
+      setProjectStarter(data)
+      setOpen(false)
+    }
+  }
+
+  return (
+    <Dialog modal open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+        <DialogHeader>
+          <DialogTitle className="text-center text-2xl font-bold">
+            Would you like to use a starter project?
+          </DialogTitle>
+        </DialogHeader>
+        {registry?.starters && (
+          <div>
+            <StartersCarousel onImport={onImport} />
+          </div>
+        )}
+        <DialogFooter className="flex sm:justify-between w-full">
+          <div className="flex items-center gap-2">
+            <Switch
+              id="show-startup-dialog"
+              checked={dontShowAgain}
+              onCheckedChange={setDontShowAgain}
+            />
+            <Label htmlFor="show-startup-dialog">Don't show this again</Label>
+          </div>
+          <Button onClick={() => setOpen(false)}>
+            No, I want to start from scratch
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/ui/carousel.tsx

@@ -0,0 +1,239 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

package/src/index.tsx

@@ -0,0 +1,44 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import FileNavigator from '@/components/file-navigator'
+import StartupDialog from '@/components/startup-dialog'
+
+import {
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { Toaster } from '@/components/toaster'
+
+import { AppSidebar } from '@/components/cta-sidebar'
+
+const queryClient = new QueryClient()
+
+function Content() {
+  const { open } = useSidebar()
+
+  return (
+    <main
+      className={
+        open ? 'w-full max-w-[calc(100%-370px)]' : 'w-full max-w-[100%]'
+      }
+    >
+      <SidebarTrigger className="m-2" />
+      <div className="pl-3">
+        <FileNavigator />
+        <StartupDialog />
+      </div>
+    </main>
+  )
+}
+
+export default function RootComponent() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SidebarProvider>
+        <AppSidebar />
+        <Content />
+        <Toaster />
+      </SidebarProvider>
+    </QueryClientProvider>
+  )
+}