@tanstack/cta-ui-base 0.15.4

package/src/app.tsx

@@ -0,0 +1,28 @@
+import { AppSidebar } from './components/cta-sidebar'
+import { AppHeader } from './components/header'
+import { BackgroundAnimation } from './components/background-animation'
+import FileNavigator from './components/file-navigator'
+import StartupDialog from './components/startup-dialog'
+import { CTAProvider } from './components/cta-provider'
+
+export default function RootComponent() {
+  return (
+    <CTAProvider>
+      <main className="min-w-[1280px]">
+        <BackgroundAnimation />
+        <div className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container">
+          <AppHeader />
+          <div className="flex flex-row">
+            <div className="w-1/3 @8xl:w-1/4 pr-2">
+              <AppSidebar />
+            </div>
+            <div className="w-2/3 @8xl:w-3/4 pl-2">
+              <FileNavigator />
+            </div>
+          </div>
+        </div>
+        <StartupDialog />
+      </main>
+    </CTAProvider>
+  )
+}

package/src/components/add-on-info-dialog.tsx

@@ -0,0 +1,39 @@
+import { Dialog, DialogContent } from './ui/dialog'
+
+import type { AddOnInfo } from '../types'
+
+export default function CustomAddOnDialog({
+  addOn,
+  onClose,
+}: {
+  addOn?: AddOnInfo
+  onClose: () => void
+}) {
+  return (
+    <Dialog modal open={!!addOn} onOpenChange={onClose}>
+      <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+        <div className="flex flex-row">
+          {addOn?.smallLogo && (
+            <img
+              src={`data:image/svg+xml,${encodeURIComponent(addOn.smallLogo)}`}
+              alt={addOn.name}
+              className="w-15"
+            />
+          )}
+          <div className="flex flex-col ml-4 gap-4">
+            <p className="text-lg font-bold">{addOn?.name}</p>
+            <p className="text-sm text-gray-500">{addOn?.description}</p>
+            <a
+              href={addOn?.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-500 underline"
+            >
+              More information on {addOn?.name}
+            </a>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/background-animation.tsx

@@ -0,0 +1,224 @@
+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 cy = 3 * p1y
+    const by = 3 * (p2y - p1y) - cy
+    const ay = 1 - cy - by
+
+    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-provider.tsx

@@ -0,0 +1,22 @@
+import { useManager } from '../store/project'
+import { Toaster } from './toaster'
+
+import { QueryProvider } from './query-provider'
+
+function InternalHandler({ children }: { children: React.ReactNode }) {
+  useManager()
+  return (
+    <>
+      {children}
+      <Toaster />
+    </>
+  )
+}
+
+export function CTAProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryProvider>
+      <InternalHandler>{children}</InternalHandler>
+    </QueryProvider>
+  )
+}

package/src/components/cta-sidebar.tsx

@@ -0,0 +1,43 @@
+import { useApplicationMode, useReady } from '../store/project'
+
+import SelectedAddOns from './sidebar-items/add-ons'
+import RunAddOns from './sidebar-items/run-add-ons'
+import RunCreateApp from './sidebar-items/run-create-app'
+import ProjectName from './sidebar-items/project-name'
+import ModeSelector from './sidebar-items/mode-selector'
+import TypescriptSwitch from './sidebar-items/typescript-switch'
+import StarterDialog from './sidebar-items/starter'
+import SidebarGroup from './sidebar-items/sidebar-group'
+
+export function AppSidebar() {
+  const ready = useReady()
+  const mode = useApplicationMode()
+
+  return (
+    <div className="flex flex-col gap-2">
+      {ready && (
+        <>
+          {mode === 'setup' && (
+            <SidebarGroup>
+              <ProjectName />
+              <ModeSelector />
+              <TypescriptSwitch />
+            </SidebarGroup>
+          )}
+          <SidebarGroup>
+            <SelectedAddOns />
+          </SidebarGroup>
+          {mode === 'setup' && (
+            <SidebarGroup>
+              <StarterDialog />
+            </SidebarGroup>
+          )}
+        </>
+      )}
+      <div className="mt-5">
+        <RunAddOns />
+        <RunCreateApp />
+      </div>
+    </div>
+  )
+}

package/src/components/custom-add-on-dialog.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { TicketPlusIcon } from 'lucide-react'
+
+import { addCustomAddOn, useAddOns, useRouterMode } from '../store/project'
+import { loadRemoteAddOn } from '../lib/api'
+
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog'
+
+export default function CustomAddOnDialog() {
+  const [url, setUrl] = useState('')
+  const [open, setOpen] = useState(false)
+
+  const mode = useRouterMode()
+  const { toggleAddOn } = useAddOns()
+
+  async function onImport() {
+    const data = await loadRemoteAddOn(url)
+
+    if ('error' in data) {
+      toast.error('Failed to load add-on', {
+        description: data.error,
+      })
+    } else {
+      addCustomAddOn(data)
+      if (data.modes.includes(mode)) {
+        toggleAddOn(data.id)
+      }
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div>
+      <Button
+        variant="secondary"
+        className="w-full"
+        onClick={() => {
+          setUrl('')
+          setOpen(true)
+        }}
+      >
+        <TicketPlusIcon className="w-4 h-4" />
+        Import Custom Add-On
+      </Button>
+      <Dialog modal open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+          <DialogHeader>
+            <DialogTitle>Import Custom Add-On</DialogTitle>
+          </DialogHeader>
+          <div>
+            <Input
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://github.com/myorg/myproject/add-on.json"
+              className="min-w-lg w-full"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  onImport()
+                }
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <Button onClick={onImport}>Import</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/file-navigator.tsx

@@ -0,0 +1,207 @@
+import { useMemo, useState } from 'react'
+import { FileText, Folder } from 'lucide-react'
+
+import {
+  useApplicationMode,
+  useDryRun,
+  useFilters,
+  useOriginalOutput,
+  useProjectLocalFiles,
+  useReady,
+} from '../store/project'
+
+import { getFileClass, twClasses } from '../file-classes'
+
+import FileViewer from './file-viewer'
+import FileTree from './file-tree'
+
+import { Label } from './ui/label'
+import { Switch } from './ui/switch'
+
+import type { FileTreeItem } from '../types'
+
+export function Filters() {
+  const { includedFiles, toggleFilter } = useFilters()
+
+  return (
+    <div className="bg-white dark:bg-black/40 shadow-xl p-4 rounded-lg flex flex-row items-center gap-4 mb-2">
+      <h3 className="font-medium whitespace-nowrap">File Filters</h3>
+      <div className="flex flex-row items-center">
+        <Switch
+          id="unchanged"
+          checked={includedFiles.includes('unchanged')}
+          onCheckedChange={() => toggleFilter('unchanged')}
+          className="mr-2"
+        />
+        <Label htmlFor="unchanged" className={twClasses.unchanged}>
+          Unchanged
+        </Label>
+      </div>
+      <div className="flex flex-row items-center">
+        <Switch
+          id="added"
+          checked={includedFiles.includes('added')}
+          onCheckedChange={() => toggleFilter('added')}
+          className="mr-2"
+        />
+        <Label htmlFor="added" className={twClasses.added}>
+          Added
+        </Label>
+      </div>
+      <div className="flex flex-row items-center">
+        <Switch
+          id="modified"
+          checked={includedFiles.includes('modified')}
+          onCheckedChange={() => toggleFilter('modified')}
+          className="mr-2"
+        />
+        <Label htmlFor="modified" className={twClasses.modified}>
+          Modified
+        </Label>
+      </div>
+      <div className="flex flex-row items-center">
+        <Switch
+          id="deleted"
+          checked={includedFiles.includes('deleted')}
+          onCheckedChange={() => toggleFilter('deleted')}
+          className="mr-2"
+        />
+        <Label htmlFor="deleted" className={twClasses.deleted}>
+          Deleted
+        </Label>
+      </div>
+      <div className="flex flex-row items-center">
+        <Switch
+          id="overwritten"
+          checked={includedFiles.includes('overwritten')}
+          onCheckedChange={() => toggleFilter('overwritten')}
+          className="mr-2"
+        />
+        <Label htmlFor="overwritten" className={twClasses.overwritten}>
+          Overwritten
+        </Label>
+      </div>
+    </div>
+  )
+}
+
+export default function FileNavigator() {
+  const [selectedFile, setSelectedFile] = useState<string | null>(
+    './package.json',
+  )
+
+  const projectFiles = useOriginalOutput()
+  const localTree = useProjectLocalFiles()
+  const dryRunOutput = useDryRun()
+
+  const mode = useApplicationMode()
+
+  const tree = dryRunOutput.files
+  const originalTree: Record<string, string> | undefined =
+    mode === 'setup' ? dryRunOutput.files : projectFiles?.files
+  const deletedFiles = dryRunOutput.deletedFiles
+
+  const [originalFileContents, setOriginalFileContents] = useState<string>()
+  const [modifiedFileContents, setModifiedFileContents] = useState<string>()
+
+  const { includedFiles } = useFilters()
+
+  const fileTree = useMemo(() => {
+    const treeData: Array<FileTreeItem> = []
+
+    if (!originalTree || !localTree) {
+      return treeData
+    }
+
+    const allFileSet = Array.from(
+      new Set([
+        ...Object.keys(tree),
+        ...Object.keys(localTree),
+        ...Object.keys(originalTree),
+      ]),
+    )
+
+    allFileSet.sort().forEach((file) => {
+      const strippedFile = file.replace('./', '')
+      const parts = strippedFile.split('/')
+
+      let currentLevel = treeData
+      parts.forEach((part, index) => {
+        const existingNode = currentLevel.find((node) => node.name === part)
+        if (existingNode) {
+          currentLevel = existingNode.children || []
+        } else {
+          const fileInfo = getFileClass(
+            file,
+            tree,
+            originalTree,
+            localTree,
+            deletedFiles,
+          )
+
+          if (
+            index === parts.length - 1 &&
+            !includedFiles.includes(fileInfo.fileClass)
+          ) {
+            return
+          }
+          if (index === parts.length - 1 && file === selectedFile) {
+            setModifiedFileContents(fileInfo.modifiedFile)
+            setOriginalFileContents(fileInfo.originalFile)
+          }
+
+          const newNode: FileTreeItem = {
+            id: parts.slice(0, index + 1).join('/'),
+            name: part,
+            fullPath: strippedFile,
+            children: index < parts.length - 1 ? [] : undefined,
+            icon:
+              index < parts.length - 1
+                ? () => <Folder className="w-4 h-4 mr-2" />
+                : () => <FileText className="w-4 h-4 mr-2" />,
+            onClick:
+              index === parts.length - 1
+                ? () => {
+                    setSelectedFile(file)
+                    setModifiedFileContents(fileInfo.modifiedFile)
+                    setOriginalFileContents(fileInfo.originalFile)
+                  }
+                : undefined,
+            className: twClasses[fileInfo.fileClass],
+            ...fileInfo,
+            contents: tree[file] || localTree[file] || originalTree[file],
+          }
+          currentLevel.push(newNode)
+          currentLevel = newNode.children!
+        }
+      })
+    })
+    return treeData
+  }, [tree, originalTree, localTree, includedFiles])
+
+  const ready = useReady()
+
+  if (!ready) {
+    return null
+  }
+
+  return (
+    <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
+      {mode === 'add' && <Filters />}
+      <div className="flex flex-row @container">
+        <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
+          <FileTree selectedFile={selectedFile} tree={fileTree} />
+        </div>
+        <div className="w-2/3 @6xl:w-3/4">
+          {selectedFile && modifiedFileContents ? (
+            <FileViewer
+              filePath={selectedFile}
+              originalFile={originalFileContents}
+              modifiedFile={modifiedFileContents}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/file-tree.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react'
+import { FileText, Folder } from 'lucide-react'
+
+import { TreeView } from './ui/tree-view'
+
+import type { FileTreeItem } from '../types'
+
+export default function FileTree({
+  selectedFile,
+  tree,
+}: {
+  selectedFile: string | null
+  tree: Array<FileTreeItem>
+}) {
+  const initialExpandedItemIds = useMemo(
+    () => [
+      'src',
+      'src/routes',
+      'src/components',
+      'src/components/ui',
+      'src/lib',
+    ],
+    [],
+  )
+
+  return (
+    <TreeView
+      initialSelectedItemId={selectedFile?.replace('./', '') ?? undefined}
+      initialExpandedItemIds={initialExpandedItemIds}
+      data={tree}
+      defaultNodeIcon={() => <Folder className="w-4 h-4 mr-2" />}
+      defaultLeafIcon={() => <FileText className="w-4 h-4 mr-2" />}
+    />
+  )
+}