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

package/lib-dist/engine-handling/generate-initial-payload.d.ts

@@ -1,29 +1,11 @@
 import type { SerializedOptions } from '@tanstack/cta-engine';
-import type { Registry } from '../types.js';
+import type { AddOnInfo } from '../types.js';
 export declare function generateInitialPayload(): Promise<{
     applicationMode: "add" | "setup";
     localFiles: Record<string, string>;
     addOns: {
-        'code-router': {
-            id: string;
-            name: string;
-            description: string;
-            type: "starter" | "add-on" | "example" | "toolchain";
-            smallLogo: string | undefined;
-            logo: string | undefined;
-            link: string | undefined;
-            dependsOn: string[] | undefined;
-        }[];
-        'file-router': {
-            id: string;
-            name: string;
-            description: string;
-            type: "starter" | "add-on" | "example" | "toolchain";
-            smallLogo: string | undefined;
-            logo: string | undefined;
-            link: string | undefined;
-            dependsOn: string[] | undefined;
-        }[];
+        'code-router': AddOnInfo[];
+        'file-router': AddOnInfo[];
     };
     options: SerializedOptions;
     output: {
@@ -36,5 +18,15 @@ export declare function generateInitialPayload(): Promise<{
     } | undefined;
     forcedRouterMode: import("@tanstack/cta-engine").Mode | undefined;
     forcedAddOns: string[];
-    registry: Registry | undefined;
+    registry: {
+        "add-ons": never[];
+        starters: {
+            name: string;
+            description: string;
+            url: string;
+            banner?: string;
+            mode: Mode;
+            framework: string;
+        }[];
+    };
 }>;

package/lib-dist/engine-handling/generate-initial-payload.js

@@ -1,16 +1,21 @@
-import { readFileSync } from 'node:fs';
 import { basename, resolve } from 'node:path';
-import { createSerializedOptionsFromPersisted, getAllAddOns, getFrameworkById, recursivelyGatherFiles, } from '@tanstack/cta-engine';
+import { createSerializedOptionsFromPersisted, getAllAddOns, getFrameworkById, getRawRegistry, getRegistryAddOns, readConfigFile, recursivelyGatherFiles, } from '@tanstack/cta-engine';
 import { cleanUpFiles } from './file-helpers.js';
 import { createAppWrapper } from './create-app-wrapper.js';
 import { registerFrameworks } from './framework-registration.js';
-import { getApplicationMode, getForcedAddOns, getForcedRouterMode, getProjectOptions, getProjectPath, getRegistry, } from './server-environment.js';
-function absolutizeUrl(originalUrl, relativeUrl) {
-    if (relativeUrl.startsWith('http') || relativeUrl.startsWith('https')) {
-        return relativeUrl;
-    }
-    const baseUrl = originalUrl.replace(/registry.json$/, '');
-    return `${baseUrl}${relativeUrl.replace(/^\.\//, '')}`;
+import { getApplicationMode, getForcedAddOns, getForcedRouterMode, getProjectOptions, getProjectPath, getRegistry as getRegistryURL, } from './server-environment.js';
+function convertAddOnToAddOnInfo(addOn) {
+    return {
+        id: addOn.id,
+        name: addOn.name,
+        description: addOn.description,
+        modes: addOn.modes,
+        type: addOn.type,
+        smallLogo: addOn.smallLogo,
+        logo: addOn.logo,
+        link: addOn.link,
+        dependsOn: addOn.dependsOn,
+    };
 }
 export async function generateInitialPayload() {
     registerFrameworks();
@@ -20,7 +25,7 @@ export async function generateInitialPayload() {
         ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
         : {};
     const forcedRouterMode = getForcedRouterMode();
-    function getSerializedOptions() {
+    async function getSerializedOptions() {
         if (applicationMode === 'setup') {
             const projectOptions = getProjectOptions();
             return {
@@ -31,63 +36,53 @@ export async function generateInitialPayload() {
                 typescript: projectOptions.typescript || true,
                 tailwind: projectOptions.tailwind || true,
                 git: projectOptions.git || true,
+                targetDir: projectOptions.targetDir ||
+                    resolve(projectPath, projectOptions.projectName),
             };
         }
         else {
-            const persistedOptions = JSON.parse(readFileSync(resolve(projectPath, '.cta.json')).toString());
-            return createSerializedOptionsFromPersisted(persistedOptions);
-        }
-    }
-    const registryUrl = getRegistry();
-    let registry;
-    if (registryUrl) {
-        registry = (await fetch(registryUrl).then((res) => res.json()));
-        for (const addOn of registry['add-ons']) {
-            addOn.url = absolutizeUrl(registryUrl, addOn.url);
-        }
-        for (const starter of registry.starters) {
-            starter.url = absolutizeUrl(registryUrl, starter.url);
-            if (starter.banner) {
-                starter.banner = absolutizeUrl(registryUrl, starter.banner);
+            const persistedOptions = await readConfigFile(projectPath);
+            if (!persistedOptions) {
+                throw new Error('No config file found');
             }
+            return createSerializedOptionsFromPersisted(persistedOptions);
         }
     }
-    const serializedOptions = getSerializedOptions();
+    const rawRegistry = await getRawRegistry(getRegistryURL());
+    const registryAddOns = await getRegistryAddOns(getRegistryURL());
+    const serializedOptions = await getSerializedOptions();
     const output = await createAppWrapper(serializedOptions, {
         dryRun: true,
     });
     const framework = await getFrameworkById(serializedOptions.framework);
-    const codeRouter = getAllAddOns(framework, 'code-router').map((addOn) => ({
-        id: addOn.id,
-        name: addOn.name,
-        description: addOn.description,
-        type: addOn.type,
-        smallLogo: addOn.smallLogo,
-        logo: addOn.logo,
-        link: addOn.link,
-        dependsOn: addOn.dependsOn,
-    }));
-    const fileRouter = getAllAddOns(framework, 'file-router').map((addOn) => ({
-        id: addOn.id,
-        name: addOn.name,
-        description: addOn.description,
-        type: addOn.type,
-        smallLogo: addOn.smallLogo,
-        logo: addOn.logo,
-        link: addOn.link,
-        dependsOn: addOn.dependsOn,
-    }));
+    const codeRouterAddOns = getAllAddOns(framework, 'code-router').map(convertAddOnToAddOnInfo);
+    const fileRouterAddOns = getAllAddOns(framework, 'file-router').map(convertAddOnToAddOnInfo);
+    for (const addOnInfo of registryAddOns || []) {
+        const addOnFramework = rawRegistry?.['add-ons'].find((addOn) => addOn.url === addOnInfo.id);
+        if (addOnFramework?.framework === serializedOptions.framework) {
+            if (addOnInfo.modes.includes('code-router')) {
+                codeRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo));
+            }
+            if (addOnInfo.modes.includes('file-router')) {
+                fileRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo));
+            }
+        }
+    }
+    const serializedRegistry = {
+        ['add-ons']: [],
+        starters: (rawRegistry?.starters || []).filter((starter) => starter.framework === serializedOptions.framework),
+    };
     return {
         applicationMode,
         localFiles,
         addOns: {
-            'code-router': codeRouter,
-            'file-router': fileRouter,
+            'code-router': codeRouterAddOns,
+            'file-router': fileRouterAddOns,
         },
         options: serializedOptions,
         output,
         forcedRouterMode,
         forcedAddOns: getForcedAddOns(),
-        registry,
+        registry: serializedRegistry,
     };
 }

package/lib-dist/index.d.ts

@@ -1,4 +1,6 @@
 import type { ServerEnvironment } from './engine-handling/server-environment.js';
+import type { Environment } from '@tanstack/cta-engine';
 export declare function launchUI(options: Partial<ServerEnvironment> & {
     port?: number;
+    environmentFactory?: () => Environment;
 }): void;

package/lib-dist/index.js

@@ -2,6 +2,7 @@ import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import express from 'express';
 import cors from 'cors';
+import chalk from 'chalk';
 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';
@@ -22,21 +23,25 @@ export function launchUI(options) {
     app.post('/api/add-to-app', async (req, res) => {
         await addToAppWrapper(req.body.addOns, {
             response: res,
+            environmentFactory: options.environmentFactory,
         });
     });
     app.post('/api/create-app', async (req, res) => {
         await createAppWrapper(req.body.options, {
             response: res,
+            environmentFactory: options.environmentFactory,
         });
     });
     app.post('/api/dry-run-add-to-app', async (req, res) => {
         res.send(await addToAppWrapper(req.body.addOns, {
             dryRun: true,
+            environmentFactory: options.environmentFactory,
         }));
     });
     app.post('/api/dry-run-create-app', async (req, res) => {
         res.send(await createAppWrapper(req.body.options, {
             dryRun: true,
+            environmentFactory: options.environmentFactory,
         }));
     });
     app.get('/api/initial-payload', async (_req, res) => {
@@ -119,6 +124,6 @@ export function launchUI(options) {
     });
     const port = requestedPort || process.env.PORT || 8080;
     app.listen(port, () => {
-        console.log(`Create TanStack ${launchUI ? 'App' : 'API'} is running on http://localhost:${port}`);
+        console.log(`🔥 ${chalk.blueBright(`Create TanStack ${launchUI ? 'App' : 'API'}`)} is running on ${chalk.underline(`http://localhost:${port}`)}`);
     });
 }

package/package.json

@@ -26,6 +26,7 @@
     "@tanstack/react-query-devtools": "^5.66.5",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
+    "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",
@@ -44,11 +45,12 @@
     "tailwindcss-animate": "^1.0.7",
     "vite-tsconfig-paths": "^5.1.4",
     "zustand": "^5.0.3",
-    "@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"
+    "@tanstack/cta-engine": "0.10.0-alpha.27",
+    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.27",
+    "@tanstack/cta-framework-solid": "0.10.0-alpha.27"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/cors": "^2.8.17",
@@ -64,6 +66,6 @@
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.26",
+  "version": "0.10.0-alpha.27",
   "scripts": {}
 }

package/src/components/background-animation.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+import { useMounted } from '@/hooks/use-mounted'
+import { usePrefersReducedMotion } from '@/hooks/use-preferred-reduced-motion'
+
+export function BackgroundAnimation() {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const mounted = useMounted()
+  const isHomePage = false
+
+  React.useEffect(() => {
+    if (prefersReducedMotion !== false) {
+      return
+    }
+
+    const canvas = canvasRef.current
+
+    let morphDuration = 2000
+    const waitDuration = 1000 * 60 * 2
+
+    const easingFn = cubicBezier(0.645, 0.045, 0.355, 1.0)
+
+    if (canvas) {
+      const ctx = canvas.getContext('2d')!
+
+      let rafId: ReturnType<typeof requestAnimationFrame> | null = null
+      let timeout: ReturnType<typeof setTimeout> | null = null
+      let startTime = performance.now()
+
+      function createBlobs() {
+        return shuffle([
+          {
+            color: { h: 10, s: 100, l: 50 },
+          },
+          {
+            color: { h: 40, s: 100, l: 50 },
+          },
+          {
+            color: { h: 150, s: 100, l: 50 },
+          },
+          {
+            color: { h: 200, s: 100, l: 50 },
+          },
+        ]).map((blob) => ({
+          ...blob,
+          x: Math.random() * canvas!.width,
+          y: Math.random() * canvas!.height,
+          r: Math.random() * 500 + 700,
+          colorH: blob.color.h,
+          colorS: blob.color.s,
+          colorL: blob.color.l,
+        }))
+      }
+
+      function shuffle<T>(array: T[]) {
+        for (let i = array.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1))
+          ;[array[i], array[j]] = [array[j], array[i]]
+        }
+        return array
+      }
+
+      let startBlobs = createBlobs()
+      let currentBlobs = startBlobs
+      let targetBlobs: ReturnType<typeof createBlobs> = []
+
+      function resizeHandler() {
+        // Create an offscreen canvas and copy the current content
+        const offscreen = document.createElement('canvas')
+        offscreen.width = canvas!.width
+        offscreen.height = canvas!.height
+        offscreen.getContext('2d')!.drawImage(canvas!, 0, 0)
+
+        // Resize the main canvas
+        canvas!.width = window.innerWidth
+        canvas!.height = window.innerHeight
+
+        // Stretch and redraw the saved content to fill the new size
+        ctx.drawImage(offscreen, 0, 0, canvas!.width, canvas!.height)
+      }
+
+      function start() {
+        if (timeout) {
+          clearTimeout(timeout)
+        }
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+
+        startBlobs = JSON.parse(JSON.stringify(currentBlobs))
+        targetBlobs = createBlobs()
+        startTime = performance.now()
+        animate()
+      }
+
+      function animate() {
+        ctx.clearRect(0, 0, canvas!.width, canvas!.height)
+
+        const time = performance.now() - startTime
+        const progress = time / morphDuration
+        const easedProgress = easingFn(progress)
+
+        // Draw the blobs
+        startBlobs.forEach((startBlob, i) => {
+          const targetBlob = targetBlobs[i]
+
+          currentBlobs[i].x = interpolate(
+            startBlob.x,
+            targetBlob.x,
+            easedProgress,
+          )
+          currentBlobs[i].y = interpolate(
+            startBlob.y,
+            targetBlob.y,
+            easedProgress,
+          )
+
+          const gradient = ctx.createRadialGradient(
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            0,
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            currentBlobs[i].r,
+          )
+
+          currentBlobs[i].colorH = interpolate(
+            startBlob.colorH,
+            targetBlob.colorH,
+            easedProgress,
+          )
+          currentBlobs[i].colorS = interpolate(
+            startBlob.colorS,
+            targetBlob.colorS,
+            easedProgress,
+          )
+          currentBlobs[i].colorL = interpolate(
+            startBlob.colorL,
+            targetBlob.colorL,
+            easedProgress,
+          )
+
+          gradient.addColorStop(
+            0,
+            `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 1)`,
+          )
+          gradient.addColorStop(
+            1,
+            `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 0)`,
+          )
+
+          ctx.fillStyle = gradient
+          ctx.beginPath()
+          ctx.arc(
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            currentBlobs[i].r,
+            0,
+            Math.PI * 2,
+          )
+          ctx.fill()
+        })
+
+        if (progress < 1) {
+          rafId = requestAnimationFrame(animate)
+        } else {
+          timeout = setTimeout(() => {
+            morphDuration = 4000
+            start()
+          }, waitDuration)
+        }
+      }
+
+      resizeHandler()
+      start()
+      window.addEventListener('resize', resizeHandler)
+
+      return () => {
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+        if (timeout) {
+          clearTimeout(timeout)
+        }
+        window.removeEventListener('resize', resizeHandler)
+      }
+    }
+  }, [prefersReducedMotion])
+
+  return (
+    <div
+      className={twMerge(
+        'fixed inset-0 z-0 opacity-20 pointer-events-none',
+        'transition-opacity duration-[2s] ease-linear',
+        '[&+*]:relative',
+        mounted
+          ? isHomePage
+            ? 'opacity-10 dark:opacity-20'
+            : 'opacity-10 dark:opacity-20'
+          : 'opacity-0',
+      )}
+    >
+      <canvas ref={canvasRef} />
+    </div>
+  )
+}
+
+function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number) {
+  return function (t: number) {
+    const cx = 3 * p1x
+    const bx = 3 * (p2x - p1x) - cx
+    const ax = 1 - cx - bx
+
+    const cy = 3 * p1y
+    const by = 3 * (p2y - p1y) - cy
+    const ay = 1 - cy - by
+
+    const x = ((ax * t + bx) * t + cx) * t
+    const y = ((ay * t + by) * t + cy) * t
+
+    return y
+  }
+}
+
+function interpolate(start: number, end: number, progress: number) {
+  return start + (end - start) * progress
+}

package/src/components/cta-sidebar.tsx

@@ -1,11 +1,3 @@
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarHeader,
-} from '@/components/ui/sidebar'
-
 import SelectedAddOns from '@/components/sidebar-items/add-ons'
 import RunAddOns from '@/components/sidebar-items/run-add-ons'
 import RunCreateApp from '@/components/sidebar-items/run-create-app'
@@ -14,6 +6,8 @@ import ModeSelector from '@/components/sidebar-items/mode-selector'
 import TypescriptSwitch from '@/components/sidebar-items/typescript-switch'
 import StarterDialog from '@/components/sidebar-items/starter'
 
+import { ChevronRightIcon } from 'lucide-react'
+
 import { useApplicationMode, useReady } from '@/store/project'
 
 export function AppSidebar() {
@@ -21,35 +15,36 @@ export function AppSidebar() {
   const mode = useApplicationMode()
 
   return (
-    <Sidebar>
-      <SidebarHeader className="flex justify-center items-center">
-        <img src="/tanstack.png" className="w-3/5" />
-      </SidebarHeader>
-      <SidebarContent>
-        {ready && (
-          <>
-            {mode === 'setup' && (
-              <SidebarGroup>
+    <div className="flex flex-col gap-2">
+      {ready && (
+        <>
+          {mode === 'setup' && (
+            <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
                 <ProjectName />
+              </div>
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
                 <ModeSelector />
+              </div>
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
                 <TypescriptSwitch />
-              </SidebarGroup>
-            )}
-            <SidebarGroup>
-              <SelectedAddOns />
-            </SidebarGroup>
-            {mode === 'setup' && (
-              <SidebarGroup>
-                <StarterDialog />
-              </SidebarGroup>
-            )}
-          </>
-        )}
-      </SidebarContent>
-      <SidebarFooter className="mb-5">
+              </div>
+            </div>
+          )}
+          <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
+            <SelectedAddOns />
+          </div>
+          {mode === 'setup' && (
+            <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
+              <StarterDialog />
+            </div>
+          )}
+        </>
+      )}
+      <div className="mt-5">
         <RunAddOns />
         <RunCreateApp />
-      </SidebarFooter>
-    </Sidebar>
+      </div>
+    </div>
   )
 }