@tanstack/cta-ui 0.10.0-alpha.19 → 0.10.0-alpha.21

package/src/engine-handling/server-environment.ts

@@ -0,0 +1,13 @@
+import type { SerializedOptions } from '@tanstack/cta-engine'
+
+export function getProjectPath(): string {
+  return process.env.CTA_PROJECT_PATH!
+}
+
+export function getApplicationMode(): 'add' | 'setup' {
+  return process.env.CTA_MODE as 'add' | 'setup'
+}
+
+export function getProjectOptions(): SerializedOptions {
+  return JSON.parse(process.env.CTA_OPTIONS!)
+}

package/src/file-classes.ts

@@ -0,0 +1,54 @@
+import type { FileClass } from '@/types.js'
+
+export const twClasses: Record<FileClass, string> = {
+  unchanged: 'text-gray-500',
+  added: 'text-green-500 font-bold',
+  modified: 'text-blue-500 italic',
+  deleted: 'text-red-500 line-through',
+  overwritten: 'text-red-700 underline',
+}
+
+export type FileClassAndInfo = {
+  fileClass: FileClass
+  originalFile?: string
+  modifiedFile?: string
+}
+
+export const getFileClass = (
+  file: string,
+  tree: Record<string, string>,
+  originalTree: Record<string, string>,
+  localTree: Record<string, string>,
+  deletedFiles: Array<string>,
+): FileClassAndInfo => {
+  if (localTree[file]) {
+    if (deletedFiles.includes(file)) {
+      return { fileClass: 'deleted', originalFile: localTree[file] }
+    }
+    // We have a local file and it's in the new tree
+    if (tree[file]) {
+      // Our new tree has changed this file
+      if (localTree[file] !== tree[file]) {
+        // Was the local tree different from the original?
+        if (originalTree[file] && localTree[file] !== originalTree[file]) {
+          // Yes, it was overwritten
+          return {
+            fileClass: 'overwritten',
+            originalFile: localTree[file],
+            modifiedFile: tree[file],
+          }
+        } else {
+          // No, it just being modified
+          return {
+            fileClass: 'modified',
+            originalFile: localTree[file],
+            modifiedFile: tree[file],
+          }
+        }
+      }
+    }
+    return { fileClass: 'unchanged', modifiedFile: localTree[file] }
+  } else {
+    return { fileClass: 'added', modifiedFile: tree[file] }
+  }
+}

package/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/src/hooks/use-streaming-status.ts

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react'
+
+import {
+  InfoIcon,
+  MessageCircleCodeIcon,
+  PackageIcon,
+  SquarePenIcon,
+  TerminalIcon,
+} from 'lucide-react'
+
+import type { StatusStepType } from '@tanstack/cta-engine'
+
+import type { StreamEvent, StreamItem } from '@/types'
+
+const iconMap: Record<StatusStepType, typeof InfoIcon> = {
+  file: SquarePenIcon,
+  command: TerminalIcon,
+  'package-manager': PackageIcon,
+  info: InfoIcon,
+  other: MessageCircleCodeIcon,
+}
+
+export default function useStreamingStatus() {
+  const [streamItems, setStreamItems] = useState<Array<StreamItem>>([])
+  const [finished, setFinished] = useState(false)
+
+  const monitorStream = useCallback(async (res: Response) => {
+    setFinished(false)
+    const reader = res.body?.getReader()
+    const decoder = new TextDecoder()
+
+    let rawStream = ''
+    while (true) {
+      const result = await reader?.read()
+      if (result?.done) break
+
+      rawStream += decoder.decode(result?.value)
+
+      let currentId: string | undefined
+      const newStreamItems: Array<StreamItem> = []
+      for (const line of rawStream.split('\n')) {
+        if (line.startsWith('{') && line.endsWith('}')) {
+          const item = JSON.parse(line) as StreamEvent
+          if (item.msgType === 'start') {
+            if (currentId === item.id) {
+              newStreamItems[newStreamItems.length - 1].message = item.message
+            } else {
+              currentId = item.id
+              newStreamItems.push({
+                id: currentId,
+                icon: iconMap[item.type],
+                message: item.message,
+              })
+            }
+          } else {
+            if (newStreamItems.length > 0) {
+              newStreamItems[newStreamItems.length - 1].message = item.message
+            }
+            currentId = undefined
+          }
+        }
+      }
+      setStreamItems(newStreamItems)
+    }
+    setFinished(true)
+    return rawStream
+  }, [])
+
+  return { finished, streamItems, monitorStream }
+}

package/src/lib/api.ts

@@ -0,0 +1,90 @@
+import type { SerializedOptions } from '@tanstack/cta-engine'
+
+import type { AddOnInfo, DryRunOutput, InitialData, StarterInfo } from '@/types'
+
+export async function createAppStreaming(
+  options: SerializedOptions,
+  chosenAddOns: Array<string>,
+  projectStarter?: StarterInfo,
+) {
+  return await fetch('/api/create-app', {
+    method: 'POST',
+    body: JSON.stringify({
+      options: {
+        ...options,
+        chosenAddOns,
+        starter: projectStarter?.url || undefined,
+      },
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+export async function addToAppStreaming(chosenAddOns: Array<string>) {
+  return await fetch('/api/add-to-app', {
+    method: 'POST',
+    body: JSON.stringify({
+      addOns: chosenAddOns,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+export function shutdown() {
+  return fetch('/api/shutdown', {
+    method: 'POST',
+  })
+}
+
+export async function loadRemoteAddOn(url: string) {
+  const response = await fetch(`/api/load-remote-add-on?url=${url}`)
+  return (await response.json()) as AddOnInfo | { error: string }
+}
+
+export async function loadRemoteStarter(url: string) {
+  const response = await fetch(`/api/load-starter?url=${url}`)
+  return (await response.json()) as StarterInfo | { error: string }
+}
+
+export async function loadInitialData() {
+  const payloadReq = await fetch('/api/initial-payload')
+  return (await payloadReq.json()) as InitialData
+}
+
+export async function dryRunCreateApp(
+  options: SerializedOptions,
+  chosenAddOns: Array<string>,
+  projectStarter?: StarterInfo,
+) {
+  const outputReq = await fetch('/api/dry-run-create-app', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      options: {
+        ...options,
+        chosenAddOns: chosenAddOns,
+        starter: projectStarter?.url,
+      },
+    }),
+  })
+  return outputReq.json() as Promise<DryRunOutput>
+}
+
+export async function dryRunAddToApp(addOns: Array<string>) {
+  const outputReq = await fetch('/api/dry-run-add-to-app', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      addOns,
+    }),
+  })
+  return outputReq.json() as Promise<DryRunOutput>
+}

package/src/routeTree.gen.ts

@@ -12,7 +12,6 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
-import { Route as DemoTanstackQueryImport } from './routes/demo.tanstack-query'
 
 // Create/Update Routes
 
@@ -22,12 +21,6 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const DemoTanstackQueryRoute = DemoTanstackQueryImport.update({
-  id: '/demo/tanstack-query',
-  path: '/demo/tanstack-query',
-  getParentRoute: () => rootRoute,
-} as any)
-
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -39,13 +32,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/demo/tanstack-query': {
-      id: '/demo/tanstack-query'
-      path: '/demo/tanstack-query'
-      fullPath: '/demo/tanstack-query'
-      preLoaderRoute: typeof DemoTanstackQueryImport
-      parentRoute: typeof rootRoute
-    }
   }
 }
 
@@ -53,37 +39,32 @@ declare module '@tanstack/react-router' {
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
-  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/demo/tanstack-query'
+  fullPaths: '/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/demo/tanstack-query'
-  id: '__root__' | '/' | '/demo/tanstack-query'
+  to: '/'
+  id: '__root__' | '/'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  DemoTanstackQueryRoute: DemoTanstackQueryRoute,
 }
 
 export const routeTree = rootRoute
@@ -96,15 +77,11 @@ export const routeTree = rootRoute
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/",
-        "/demo/tanstack-query"
+        "/"
       ]
     },
     "/": {
       "filePath": "index.tsx"
-    },
-    "/demo/tanstack-query": {
-      "filePath": "demo.tanstack-query.tsx"
     }
   }
 }

package/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import {
-  Outlet,
   HeadContent,
+  Outlet,
   Scripts,
   createRootRouteWithContext,
 } from '@tanstack/react-router'
@@ -9,10 +9,33 @@ import appCss from '../styles.css?url'
 
 import type { QueryClient } from '@tanstack/react-query'
 
+import {
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { Toaster } from '@/components/toaster'
+
+import { AppSidebar } from '@/components/cta-sidebar'
+
 interface MyRouterContext {
   queryClient: 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" />
+      <Outlet />
+    </main>
+  )
+}
 export const Route = createRootRouteWithContext<MyRouterContext>()({
   head: () => ({
     meta: [
@@ -24,7 +47,7 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
         content: 'width=device-width, initial-scale=1',
       },
       {
-        title: 'Add-On Debugger',
+        title: 'TanStack CTA',
       },
     ],
     links: [
@@ -35,11 +58,17 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
     ],
   }),
 
-  component: () => (
-    <RootDocument>
-      <Outlet />
-    </RootDocument>
-  ),
+  component: () => {
+    return (
+      <RootDocument>
+        <SidebarProvider>
+          <AppSidebar />
+          <Content />
+          <Toaster />
+        </SidebarProvider>
+      </RootDocument>
+    )
+  },
 })
 
 function RootDocument({ children }: { children: React.ReactNode }) {

package/src/routes/api/add-to-app.ts

@@ -0,0 +1,21 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { addToAppWrapper } from '@/engine-handling/add-to-app-wrapper'
+
+export const APIRoute = createAPIFileRoute('/api/add-to-app')({
+  POST: async ({ request }) => {
+    const { addOns } = await request.json()
+
+    const stream = await addToAppWrapper(addOns, {
+      stream: true,
+    })
+
+    return new Response(stream as ReadableStream, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    })
+  },
+})

package/src/routes/api/create-app.ts

@@ -0,0 +1,21 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { createAppWrapper } from '@/engine-handling/create-app-wrapper'
+
+export const APIRoute = createAPIFileRoute('/api/create-app')({
+  POST: async ({ request }) => {
+    const { options: serializedOptions } = await request.json()
+
+    const stream = await createAppWrapper(serializedOptions, {
+      stream: true,
+    })
+
+    return new Response(stream as ReadableStream, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    })
+  },
+})

package/src/routes/api/dry-run-add-to-app.ts

@@ -0,0 +1,16 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { addToAppWrapper } from '@/engine-handling/add-to-app-wrapper'
+
+export const APIRoute = createAPIFileRoute('/api/dry-run-add-to-app')({
+  POST: async ({ request }) => {
+    const { addOns } = await request.json()
+
+    return json(
+      await addToAppWrapper(addOns, {
+        dryRun: true,
+      }),
+    )
+  },
+})

package/src/routes/api/dry-run-create-app.ts

@@ -0,0 +1,16 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { createAppWrapper } from '@/engine-handling/create-app-wrapper'
+
+export const APIRoute = createAPIFileRoute('/api/dry-run-create-app')({
+  POST: async ({ request }) => {
+    const { options: serializedOptions } = await request.json()
+
+    return json(
+      await createAppWrapper(serializedOptions, {
+        dryRun: true,
+      }),
+    )
+  },
+})

package/src/routes/api/initial-payload.ts

@@ -0,0 +1,10 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { generateInitialPayload } from '@/engine-handling/generate-initial-payload'
+
+export const APIRoute = createAPIFileRoute('/api/initial-payload')({
+  GET: async () => {
+    return json(await generateInitialPayload())
+  },
+})

package/src/routes/api/load-remote-add-on.ts

@@ -0,0 +1,42 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { AddOnCompiledSchema } from '@tanstack/cta-engine'
+
+export const APIRoute = createAPIFileRoute('/api/load-remote-add-on')({
+  GET: async ({ request }) => {
+    const incomingUrl = new URL(request.url)
+    const url = incomingUrl.searchParams.get('url')
+
+    if (!url) {
+      return json({ error: 'url is required' }, { status: 400 })
+    }
+
+    try {
+      const response = await fetch(url)
+      const data = await response.json()
+
+      const parsed = AddOnCompiledSchema.safeParse(data)
+
+      if (!parsed.success) {
+        return json({ error: 'Invalid add-on data' }, { status: 400 })
+      }
+
+      return 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 {
+      return json({ error: 'Failed to load add-on' }, { status: 500 })
+    }
+  },
+})

package/src/routes/api/load-starter.ts

@@ -0,0 +1,47 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { StarterCompiledSchema } from '@tanstack/cta-engine'
+
+export const APIRoute = createAPIFileRoute('/api/load-starter')({
+  GET: async ({ request }) => {
+    const incomingUrl = new URL(request.url)
+    const url = incomingUrl.searchParams.get('url')
+
+    if (!url) {
+      return json({ error: 'url is required' }, { status: 400 })
+    }
+
+    try {
+      const response = await fetch(url)
+      const data = await response.json()
+
+      const parsed = StarterCompiledSchema.safeParse(data)
+
+      if (!parsed.success) {
+        return json({ error: 'Invalid starter data' }, { status: 400 })
+      }
+
+      return 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 {
+      return json({ error: 'Failed to load starter' }, { status: 500 })
+    }
+  },
+})

package/src/routes/api/shutdown.ts

@@ -0,0 +1,11 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+export const APIRoute = createAPIFileRoute('/api/shutdown')({
+  POST: () => {
+    setTimeout(() => {
+      process.exit(0)
+    }, 50)
+    return json({ shutdown: true })
+  },
+})