chore: first work on the new UI

Author: jherr

packages/cta-cli/src/cli.ts

@@ -87,15 +87,27 @@ export function cli({
 
   program
     .command('add')
-    .argument('add-on', 'Name of the add-on (or add-ons separated by commas)')
-    .action(async (addOn: string) => {
-      await addToApp(
-        addOn.split(',').map((addon) => addon.trim()),
-        {
-          silent: false,
-        },
-        environment,
-      )
+    .argument(
+      '[add-on]',
+      'Name of the add-ons (or add-ons separated by spaces or commas)',
+    )
+    .option('--ui', 'Add with the UI')
+    .action(async (addOn: string, options: { ui: boolean }) => {
+      const addOns = (addOn || '').split(',').map((addon) => addon.trim())
+      if (options.ui) {
+        launchUI({
+          mode: 'add',
+          addOns,
+        })
+      } else {
+        await addToApp(
+          addOns,
+          {
+            silent: false,
+          },
+          environment,
+        )
+      }
     })
 
   const addOnCommand = program.command('add-on')
@@ -115,7 +127,10 @@ export function cli({
     .command('ui')
     .description('Show the add-on developer UI')
     .action(() => {
-      launchUI()
+      launchUI({
+        mode: 'add',
+        addOns: [],
+      })
     })
 
   const starterCommand = program.command('starter')
@@ -135,7 +150,10 @@ export function cli({
     .command('ui')
     .description('Show the starter developer UI')
     .action(() => {
-      launchUI()
+      launchUI({
+        mode: 'starter',
+        addOns: [],
+      })
     })
 
   program.argument('[project-name]', 'name of the project')

packages/cta-ui/.cursorrules

@@ -1,17 +1,21 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-export function launchUI() {
+export function launchUI({
+  mode,
+  addOns,
+}: {
+  mode: 'add' | 'add-on' | 'starter'
+  addOns: Array<string>
+}) {
   const projectPath = process.cwd()
 
-  process.env.PROJECT_PATH = projectPath
-
-  const configPath = resolve(
-    dirname(fileURLToPath(import.meta.url)),
-    '../app.config.js',
-  )
+  process.env.CTA_PROJECT_PATH = projectPath
+  process.env.CTA_ADD_ONS = addOns.join(',')
+  process.env.CTA_MODE = mode
 
   const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+  const configPath = resolve(developerPath, './app.config.js')
 
   process.chdir(developerPath)
 

packages/cta-ui/lib/index.ts

@@ -4,7 +4,9 @@
   "main": "./lib-dist/index.js",
   "types": "./lib-dist/index.d.ts",
   "scripts": {
-    "build": "tsc -p tsconfig.lib.json"
+    "build": "tsc -p tsconfig.lib.json",
+    "dev": "tsc --watch -p tsconfig.lib.json",
+    "dev:ui": "vinxi dev"
   },
   "dependencies": {
     "@codemirror/lang-css": "^6.3.1",
@@ -13,20 +15,26 @@
     "@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-dialog": "^1.1.10",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.3",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/cta-engine": "workspace:*",
+    "@tanstack/cta-framework-react-cra": "workspace:*",
+    "@tanstack/cta-framework-solid": "workspace:*",
     "@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/react-store": "^0.7.0",
     "@tanstack/router-plugin": "^1.114.3",
+    "@tanstack/store": "^0.7.0",
     "@uiw/codemirror-theme-okaidia": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
     "class-variance-authority": "^0.7.1",

packages/cta-ui/package.json

@@ -0,0 +1,24 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from '@/components/ui/sidebar'
+
+import { SelectedAddOns } from '@/components/sidebar-items/add-ons'
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent>
+        <SidebarGroup>
+          <SelectedAddOns />
+        </SidebarGroup>
+        <SidebarGroup />
+      </SidebarContent>
+      <SidebarFooter />
+    </Sidebar>
+  )
+}

packages/cta-ui/src/components/Header.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { useStore } from '@tanstack/react-store'
+
+import FileViewer from './file-viewer'
+import FileTree from './file-tree'
+
+import { projectFiles } from '@/store/project'
+
+export default function FileNavigator() {
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+
+  const { output, originalOutput } = useStore(projectFiles)
+
+  return (
+    <div className="flex flex-row w-[calc(100vw-300px)]">
+      <FileTree
+        prefix="./"
+        tree={output.files}
+        originalTree={originalOutput.files}
+        onFileSelected={(file) => {
+          setSelectedFile(file)
+        }}
+      />
+      <div className="max-w-3/4 w-3/4 pl-2">
+        {selectedFile ? (
+          <FileViewer
+            filePath={selectedFile}
+            originalFile={originalOutput.files[selectedFile]}
+            modifiedFile={output.files[selectedFile]}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

packages/cta-ui/src/components/cta-sidebar.tsx

@@ -1,25 +1,30 @@
 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'
 
+import { TreeView } 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> = []
+    const treeData: Array<TreeDataItem> = [
+      {
+        id: 'root',
+        name: '.',
+        children: [],
+        icon: () => <Folder className="w-4 h-4 mr-2" />,
+      },
+    ]
 
     function changed(file: string) {
       if (!originalTree[file]) {
@@ -31,7 +36,7 @@ export default function FileTree({
     Object.keys(tree)
       .sort()
       .forEach((file) => {
-        const parts = file.replace(`${prefix}/`, '').split('/')
+        const parts = file.split('/')
 
         let currentLevel = treeData
         parts.forEach((part, index) => {
@@ -63,8 +68,8 @@ export default function FileTree({
           }
         })
       })
-    return [...extraTreeItems, ...treeData]
-  }, [prefix, tree, originalTree, extraTreeItems])
+    return treeData
+  }, [prefix, tree, originalTree])
 
   return (
     <TreeView

packages/cta-ui/src/components/file-navigator.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+import { useStore } from '@tanstack/react-store'
+
+import { Button } from '@/components/ui/button'
+
+import { availableAddOns, selectedAddOns } from '@/store/project'
+
+import { cn } from '@/lib/utils'
+
+export function SelectedAddOns() {
+  const addOns = useStore(availableAddOns)
+  const selected = useStore(selectedAddOns)
+
+  const sortedAddOns = useMemo(() => {
+    return addOns.sort((a, b) => {
+      return a.name.localeCompare(b.name)
+    })
+  }, [addOns])
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Add-ons</h1>
+      <div className="flex flex-col gap-2">
+        {sortedAddOns.map((addOn) => (
+          <Button
+            key={addOn.id}
+            variant="outline"
+            size="lg"
+            className={cn('flex flex-col gap-0 align-start h-fit py-3 w-full')}
+            onClick={() => {
+              selectedAddOns.setState((state) => {
+                if (state.some((a) => a.id === addOn.id)) {
+                  return state.filter((a) => a.id !== addOn.id)
+                }
+                return [...state, addOn]
+              })
+            }}
+            style={{
+              backgroundColor: selected.some((a) => a.id === addOn.id)
+                ? 'green'
+                : 'transparent',
+            }}
+          >
+            <div className="text-md font-bold">{addOn.name}</div>
+          </Button>
+        ))}
+      </div>
+    </>
+  )
+}

packages/cta-ui/src/components/file-tree.tsx

@@ -1,38 +1,40 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import 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",
+          '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",
+          '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",
+          '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",
+          '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",
+          '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",
+        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",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 )
 
 function Button({
@@ -41,11 +43,11 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button'
 
   return (
     <Comp