@tanstack/cta-ui 0.10.0-alpha.18

package/.cursorrules

@@ -0,0 +1,7 @@
+# shadcn instructions
+
+Use the latest version of Shadcn to install new components, like this command to add a button component:
+
+```bash
+pnpx shadcn@latest add button
+```

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/app.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from '@tanstack/react-start/config'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  tsr: {
+    appDirectory: 'src',
+  },
+  vite: {
+    forceOptimizeDeps: true,
+    plugins: [
+      // this is the plugin that enables path aliases
+      viteTsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+      tailwindcss(),
+    ],
+    optimizeDeps: {
+      exclude: [],
+    },
+  },
+})

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/lib/index.ts

@@ -0,0 +1,22 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export function launchUI() {
+  const projectPath = process.cwd()
+
+  process.env.PROJECT_PATH = projectPath
+
+  const configPath = resolve(
+    dirname(fileURLToPath(import.meta.url)),
+    '../app.config.js',
+  )
+
+  const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+
+  process.chdir(developerPath)
+
+  import(configPath).then(async (config) => {
+    const out = await config.default
+    await out.dev()
+  })
+}

package/lib-dist/index.d.ts

@@ -0,0 +1 @@
+export declare function launchUI(): void;

package/lib-dist/index.js

@@ -0,0 +1,13 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+export function launchUI() {
+    const projectPath = process.cwd();
+    process.env.PROJECT_PATH = projectPath;
+    const configPath = resolve(dirname(fileURLToPath(import.meta.url)), '../app.config.js');
+    const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+    process.chdir(developerPath);
+    import(configPath).then(async (config) => {
+        const out = await config.default;
+        await out.dev();
+    });
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tanstack/cta-ui",
+  "type": "module",
+  "main": "./lib-dist/index.js",
+  "types": "./lib-dist/index.d.ts",
+  "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3",
+    "@codemirror/lang-json": "^6.0.1",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@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-okaidia": "^4.23.10",
+    "@uiw/react-codemirror": "^4.23.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "execa": "^9.5.2",
+    "lucide-react": "^0.476.0",
+    "react": "^19.0.0",
+    "react-codemirror-merge": "^4.23.10",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6",
+    "tailwindcss-animate": "^1.0.7",
+    "vinxi": "^0.5.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "@tanstack/cta-custom-add-on": "0.10.0-alpha.18",
+    "@tanstack/cta-engine": "0.10.0-alpha.18"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.13.14",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.1.0",
+    "vitest": "^3.0.5",
+    "web-vitals": "^4.2.4"
+  },
+  "version": "0.10.0-alpha.18",
+  "scripts": {}
+}

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from '@tanstack/react-start/api'
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler)

package/src/client.tsx

@@ -0,0 +1,8 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/react-start'
+
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document, <StartClient router={router} />)

package/src/components/Header.tsx

@@ -0,0 +1,13 @@
+import { Link } from "@tanstack/react-router";
+
+export default function Header() {
+  return (
+    <header className="p-2 flex gap-2 bg-white text-black justify-between">
+      <nav className="flex flex-row">
+        <div className="px-2 font-bold">
+          <Link to="/">Home</Link>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/src/components/applied-add-on.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+
+import { runCreateApp } from '@/lib/server-fns'
+import FileViewer from './file-viewer'
+import FileTree from './file-tree'
+
+import type { Mode } from '@tanstack/cta-engine'
+
+export default function AppliedAddOn({
+  projectPath,
+  output: originalOutput,
+  addOnInfo,
+  outputWithoutAddon: originalOutputWithoutAddon,
+  originalOptions,
+  addOns,
+}: {
+  projectPath: string
+  output: {
+    files: Record<string, string>
+  }
+  outputWithoutAddon: {
+    files: Record<string, string>
+  }
+  addOnInfo: {
+    templates: Array<string>
+  }
+  originalOptions: {
+    existingAddOns: Array<string>
+    mode: Mode
+  }
+  addOns: Record<string, Array<any>>
+}) {
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+
+  const [options, setOptions] = useState(originalOptions)
+  const [output, setOutput] = useState(originalOutput)
+  const [outputWithoutAddon, setOutputWithoutAddon] = useState(
+    originalOutputWithoutAddon,
+  )
+  const [selectedAddOns, setSelectedAddOns] = useState<Array<string>>([])
+
+  async function updateOptions(
+    updatedOptions: Partial<typeof options>,
+    updatedAddOns: Array<string> = [],
+  ) {
+    const newMode = updatedOptions.mode || options.mode
+    const existingAddOns = [
+      ...(originalOptions.existingAddOns || []),
+      ...(updatedAddOns || []),
+    ].filter((id) => addOns[newMode as Mode].some((addOn) => addOn.id === id))
+
+    const newOptions = {
+      ...options,
+      ...updatedOptions,
+      existingAddOns,
+    }
+    setOptions(newOptions)
+    const [newOutput, newOutputWithoutAddon] = await Promise.all([
+      runCreateApp({
+        data: { withAddOn: true, options: newOptions },
+      }),
+      runCreateApp({
+        data: { withAddOn: false, options: newOptions },
+      }),
+    ])
+    setOutput(newOutput)
+    setOutputWithoutAddon(newOutputWithoutAddon)
+  }
+
+  return (
+    <div>
+      <div className="flex flex-row items-center mb-5">
+        <ToggleGroup
+          type="single"
+          value={options.mode}
+          onValueChange={(v: string) => {
+            if (v) {
+              updateOptions(
+                {
+                  mode: v as Mode,
+                },
+                selectedAddOns,
+              )
+            }
+          }}
+        >
+          <ToggleGroupItem
+            value="code-router"
+            disabled={!addOnInfo.templates.includes('code-router')}
+          >
+            Code Router
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="file-router"
+            disabled={!addOnInfo.templates.includes('file-router')}
+          >
+            File Router
+          </ToggleGroupItem>
+        </ToggleGroup>
+        <div className="flex flex-row ml-5 flex-wrap">
+          {addOns[options.mode as Mode].map((addOn) => (
+            <div key={addOn.name} className="mr-2 flex items-center">
+              <Checkbox
+                id={addOn.id}
+                checked={
+                  originalOptions.existingAddOns.includes(addOn.id) ||
+                  selectedAddOns.includes(addOn.id)
+                }
+                disabled={originalOptions.existingAddOns.includes(addOn.id)}
+                onClick={() => {
+                  let updatedAddOns = selectedAddOns.includes(addOn.id)
+                    ? selectedAddOns.filter((id) => id !== addOn.id)
+                    : [...selectedAddOns, addOn.id]
+                  setSelectedAddOns(updatedAddOns)
+                  updateOptions({}, updatedAddOns)
+                }}
+              />
+              <label htmlFor={addOn.id} className="ml-2">
+                {addOn.name}
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-row">
+        <FileTree
+          prefix={projectPath}
+          tree={output.files}
+          originalTree={outputWithoutAddon.files}
+          onFileSelected={(file) => {
+            setSelectedFile(file)
+          }}
+        />
+        <div className="max-w-3/4 w-3/4 pl-2">
+          {selectedFile ? (
+            <FileViewer
+              filePath={selectedFile}
+              originalFile={outputWithoutAddon.files[selectedFile]}
+              modifiedFile={output.files[selectedFile]}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/file-tree.tsx

@@ -0,0 +1,77 @@
+import { useMemo } from 'react'
+import { FileText, Folder } from 'lucide-react'
+
+import { TreeView } from '@/components/ui/tree-view'
+
+import type { TreeDataItem } from '@/components/ui/tree-view'
+
+export default function FileTree({
+  prefix,
+  tree,
+  originalTree,
+  onFileSelected,
+  extraTreeItems = [],
+}: {
+  prefix: string
+  tree: Record<string, string>
+  originalTree: Record<string, string>
+  onFileSelected: (file: string) => void
+  extraTreeItems?: Array<TreeDataItem>
+}) {
+  const computedTree = useMemo(() => {
+    const treeData: Array<TreeDataItem> = []
+
+    function changed(file: string) {
+      if (!originalTree[file]) {
+        return true
+      }
+      return tree[file] !== originalTree[file]
+    }
+
+    Object.keys(tree)
+      .sort()
+      .forEach((file) => {
+        const parts = file.replace(`${prefix}/`, '').split('/')
+
+        let currentLevel = treeData
+        parts.forEach((part, index) => {
+          const existingNode = currentLevel.find((node) => node.name === part)
+          if (existingNode) {
+            currentLevel = existingNode.children || []
+          } else {
+            const newNode: TreeDataItem = {
+              id: index === parts.length - 1 ? file : `${file}-${index}`,
+              name: part,
+              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
+                  ? () => {
+                      onFileSelected(file)
+                    }
+                  : undefined,
+              className:
+                index === parts.length - 1 && changed(file)
+                  ? 'text-green-300'
+                  : '',
+            }
+            currentLevel.push(newNode)
+            currentLevel = newNode.children!
+          }
+        })
+      })
+    return [...extraTreeItems, ...treeData]
+  }, [prefix, tree, originalTree, extraTreeItems])
+
+  return (
+    <TreeView
+      data={computedTree}
+      defaultNodeIcon={() => <Folder className="w-4 h-4 mr-2" />}
+      defaultLeafIcon={() => <FileText className="w-4 h-4 mr-2" />}
+      className="max-w-1/4 w-1/4 pr-2"
+    />
+  )
+}

package/src/components/file-viewer.tsx

@@ -0,0 +1,59 @@
+import CodeMirror from '@uiw/react-codemirror'
+import CodeMirrorMerge from 'react-codemirror-merge'
+
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
+import { html } from '@codemirror/lang-html'
+
+import { okaidia } from '@uiw/codemirror-theme-okaidia'
+
+export default function FileViewer({
+  originalFile,
+  modifiedFile,
+  filePath,
+}: {
+  originalFile?: string
+  modifiedFile: string
+  filePath: string
+}) {
+  function getLanguage(file: string) {
+    if (file.endsWith('.js') || file.endsWith('.jsx')) {
+      return javascript({ jsx: true })
+    }
+    if (file.endsWith('.ts') || file.endsWith('.tsx')) {
+      return javascript({ typescript: true, jsx: true })
+    }
+    if (file.endsWith('.json')) {
+      return json()
+    }
+    if (file.endsWith('.css')) {
+      return css()
+    }
+    if (file.endsWith('.html')) {
+      return html()
+    }
+    return javascript()
+  }
+  const language = getLanguage(filePath)
+
+  if (!originalFile || originalFile === modifiedFile) {
+    return (
+      <CodeMirror
+        value={modifiedFile}
+        theme={okaidia}
+        height="100vh"
+        width="100%"
+        readOnly
+        extensions={[language]}
+        className="text-lg"
+      />
+    )
+  }
+  return (
+    <CodeMirrorMerge orientation="a-b" theme={okaidia} className="text-lg">
+      <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
+      <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
+    </CodeMirrorMerge>
+  )
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }