@tanstack/cta-ui 0.10.0-alpha.18 → 0.10.0-alpha.20

package/src/routes/index.tsx

@@ -1,222 +1,15 @@
-import { useState, Fragment } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { Info } from 'lucide-react'
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-
-import AppliedAddOn from '@/components/applied-add-on'
-import FileTree from '@/components/file-tree'
-import FileViewer from '@/components/file-viewer'
-
-import {
-  getAddons,
-  getAddonInfo,
-  getOriginalOptions,
-  runCreateApp,
-} from '@/lib/server-fns'
-import type { AddOn } from '@tanstack/cta-engine'
+import FileNavigator from '@/components/file-navigator'
 
 export const Route = createFileRoute('/')({
   component: App,
-  loader: async () => {
-    const originalOptions = await getOriginalOptions()
-    const [codeRouterAddons, fileRouterAddons] = await Promise.all([
-      getAddons({
-        data: { platform: 'react', mode: 'code-router' },
-      }),
-      getAddons({
-        data: { platform: 'react', mode: 'file-router' },
-      }),
-    ])
-    return {
-      addOns: {
-        'code-router': codeRouterAddons,
-        'file-router': fileRouterAddons,
-      },
-      projectPath: process.env.PROJECT_PATH!,
-      output: await runCreateApp({
-        data: { withAddOn: true, options: originalOptions },
-      }),
-      outputWithoutAddon: await runCreateApp({
-        data: { withAddOn: false, options: originalOptions },
-      }),
-      addOnInfo: (await getAddonInfo()) as AddOn,
-      originalOptions,
-    }
-  },
 })
 
-const CAPTIONS = {
-  dependencies: 'Dependencies',
-  devDependencies: 'Dev Dependencies',
-  scripts: 'Scripts',
-}
-
-function InfoViewer({ info }: { info: AddOn }) {
-  return (
-    <div className="text-lg">
-      <div className="grid grid-cols-[200px_1fr] gap-4 mb-4">
-        <div className="font-medium">Name</div>
-        <div className="font-bold">{info.name}</div>
-        <div className="font-medium">Description</div>
-        <div className="font-bold">{info.description}</div>
-        <div className="font-medium">Version</div>
-        <div className="font-bold">{info.version}</div>
-        <div className="font-medium">Author</div>
-        <div className="font-bold">{info.author}</div>
-        <div className="font-medium">License</div>
-        <div className="font-bold">{info.license}</div>
-        {(
-          [
-            'dependencies',
-            'devDependencies',
-            'scripts',
-          ] as (keyof AddOn['packageAdditions'])[]
-        )
-          .filter(
-            (key) =>
-              info.packageAdditions[key] &&
-              Object.entries(info.packageAdditions[key]).length > 0,
-          )
-          .map((key) => (
-            <Fragment key={key}>
-              <div className="font-medium">{CAPTIONS[key]}</div>
-              <Table>
-                {key !== 'scripts' && (
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-1/2">Package</TableHead>
-                      <TableHead className="w-1/2">Version</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                )}
-                <TableBody>
-                  {Object.entries(info.packageAdditions[key]).map(
-                    ([pkg, version]) => (
-                      <TableRow key={`${key}-${pkg}`}>
-                        <TableCell className="w-1/2">{pkg}</TableCell>
-                        <TableCell className="w-1/2">{version}</TableCell>
-                      </TableRow>
-                    ),
-                  )}
-                </TableBody>
-              </Table>
-            </Fragment>
-          ))}
-        {info.routes && (
-          <>
-            <div className="font-medium">Routes</div>
-            <div>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-1/2">URL</TableHead>
-                    <TableHead className="w-1/2">Name</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {info.routes.map(({ url, name }) => (
-                    <TableRow key={`${url}-${name}`}>
-                      <TableCell className="w-1/2">{url}</TableCell>
-                      <TableCell className="w-1/2">{name}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </>
-        )}
-        {info.commmand && (
-          <>
-            <div className="font-medium">Setup Command</div>
-            <div className="font-bold font-mono">{`${info.command.command} ${info.command.args.join(' ')}`}</div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function AddOnViewer({ addOnInfo }: { addOnInfo: AddOn }) {
-  const [selectedFile, setSelectedFile] = useState<string | null>(null)
-  const [showInfo, setShowInfo] = useState(false)
-
-  return (
-    <div className="flex flex-row">
-      <FileTree
-        prefix="./"
-        tree={addOnInfo.files || {}}
-        originalTree={{}}
-        onFileSelected={(file) => {
-          setSelectedFile(file)
-          setShowInfo(false)
-        }}
-        extraTreeItems={[
-          {
-            id: 'info',
-            name: 'Add-On Info',
-            icon: () => <Info className="w-4 h-4 mr-2" />,
-            onClick: () => {
-              setSelectedFile(null)
-              setShowInfo(true)
-            },
-          },
-        ]}
-      />
-      <div className="max-w-3/4 w-3/4 pl-2">
-        {showInfo && <InfoViewer info={addOnInfo as AddOn} />}
-        {selectedFile ? (
-          <FileViewer
-            filePath={selectedFile}
-            modifiedFile={addOnInfo?.files?.[selectedFile] || ''}
-          />
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
 function App() {
-  const {
-    projectPath,
-    output,
-    addOnInfo,
-    outputWithoutAddon,
-    originalOptions,
-    addOns,
-  } = Route.useLoaderData()
-
   return (
-    <div className="p-5">
-      <Tabs defaultValue="add-on">
-        <TabsList className="grid grid-cols-2 w-[400px]">
-          <TabsTrigger value="add-on">Add-On</TabsTrigger>
-          <TabsTrigger value="applied">Applied</TabsTrigger>
-        </TabsList>
-        <TabsContent value="add-on">
-          <AddOnViewer addOnInfo={addOnInfo} />
-        </TabsContent>
-        <TabsContent value="applied">
-          <AppliedAddOn
-            projectPath={projectPath}
-            output={output}
-            addOnInfo={addOnInfo}
-            outputWithoutAddon={outputWithoutAddon}
-            originalOptions={
-              originalOptions as Required<typeof originalOptions>
-            }
-            addOns={addOns}
-          />
-        </TabsContent>
-      </Tabs>
+    <div className="pl-3">
+      <FileNavigator />
     </div>
   )
 }

package/src/store/add-ons.ts

@@ -0,0 +1,81 @@
+import type { AddOnInfo } from '@/types'
+
+export function getAddOnStatus(
+  availableAddOns: Array<AddOnInfo>,
+  chosenAddOns: Array<string>,
+  originalAddOns: Array<string>,
+) {
+  const addOnMap = new Map<
+    string,
+    {
+      enabled: boolean
+      selected: boolean
+      dependedUpon: boolean
+    }
+  >()
+
+  for (const addOn of availableAddOns) {
+    addOnMap.set(addOn.id, {
+      selected: false,
+      enabled: true,
+      dependedUpon: false,
+    })
+  }
+
+  // Guard against cycles in the dependency graph. The results won't be great. But it won't crash.
+  function cycleGuardedSelectAndDisableDependsOn(startingAddOnId: string) {
+    const visited = new Set<string>()
+    function selectAndDisableDependsOn(addOnId: string) {
+      if (visited.has(addOnId)) {
+        return
+      }
+      visited.add(addOnId)
+      const selectedAddOn = availableAddOns.find(
+        (addOn) => addOn.id === addOnId,
+      )
+      if (selectedAddOn) {
+        for (const dependsOnId of selectedAddOn.dependsOn || []) {
+          const dependsOnAddOn = addOnMap.get(dependsOnId)
+          if (dependsOnAddOn) {
+            dependsOnAddOn.selected = true
+            dependsOnAddOn.enabled = false
+            dependsOnAddOn.dependedUpon = true
+            selectAndDisableDependsOn(dependsOnId)
+          }
+        }
+        const addOn = addOnMap.get(addOnId)
+        if (addOn) {
+          addOn.selected = true
+          if (!addOn.dependedUpon) {
+            addOn.enabled = true
+          }
+        }
+      }
+    }
+    selectAndDisableDependsOn(startingAddOnId)
+  }
+
+  for (const addOn of originalAddOns) {
+    const addOnInfo = addOnMap.get(addOn)
+    if (addOnInfo) {
+      addOnInfo.selected = true
+      addOnInfo.enabled = false
+      addOnInfo.dependedUpon = true
+    }
+    cycleGuardedSelectAndDisableDependsOn(addOn)
+  }
+
+  for (const addOnId of chosenAddOns) {
+    cycleGuardedSelectAndDisableDependsOn(addOnId)
+  }
+
+  return Object.fromEntries(
+    Array.from(addOnMap.entries()).map(([v, addOn]) => [
+      v,
+      {
+        enabled: addOn.enabled,
+        selected: addOn.selected,
+      },
+    ]),
+  )
+}

package/src/store/project.ts

@@ -0,0 +1,268 @@
+import { useCallback, useMemo } from 'react'
+import { create } from 'zustand'
+import { useQuery } from '@tanstack/react-query'
+
+import { getAddOnStatus } from './add-ons'
+
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
+
+import type { AddOnInfo, DryRunOutput, StarterInfo } from '@/types.js'
+import { dryRunAddToApp, dryRunCreateApp, loadInitialData } from '@/lib/api'
+
+const useInitialData = () =>
+  useQuery({
+    queryKey: ['initial-data'],
+    queryFn: async () => loadInitialData(),
+    initialData: {
+      options: {
+        framework: 'react-cra',
+        mode: 'file-router',
+        projectName: 'my-application',
+        targetDir: 'my-application',
+        typescript: true,
+        tailwind: true,
+        git: true,
+        chosenAddOns: [],
+        packageManager: 'pnpm',
+      },
+      localFiles: {},
+      output: {
+        files: {},
+        commands: [],
+        deletedFiles: [],
+      },
+      addOns: {
+        'code-router': [],
+        'file-router': [],
+      },
+      applicationMode: 'none',
+    },
+  })
+
+export const useProjectLocalFiles = () => useInitialData().data.localFiles
+export const useOriginalOutput = () => useInitialData().data.output
+export const useOriginalSelectedAddOns = () =>
+  useInitialData().data.options.chosenAddOns
+export const useApplicationMode = () => useInitialData().data.applicationMode
+export const useReady = () => useInitialData().isFetched
+export const useCodeRouterAddOns = () =>
+  useInitialData().data.addOns['code-router']
+export const useFileRouterAddOns = () =>
+  useInitialData().data.addOns['file-router']
+
+export const useProjectOptions = create<SerializedOptions>(() => ({
+  framework: 'react-cra',
+  mode: 'file-router',
+  projectName: 'my-app',
+  targetDir: 'my-app',
+  typescript: true,
+  tailwind: true,
+  git: true,
+  chosenAddOns: [],
+  packageManager: 'pnpm',
+}))
+
+const useApplicationSettings = create<{
+  includeFiles: Array<string>
+}>(() => ({
+  includeFiles: ['unchanged', 'added', 'modified', 'deleted', 'overwritten'],
+}))
+
+const useMutableAddOns = create<{
+  userSelectedAddOns: Array<string>
+  customAddOns: Array<AddOnInfo>
+}>(() => ({
+  userSelectedAddOns: [],
+  customAddOns: [],
+}))
+
+export const useProjectStarter = create<{
+  projectStarter: StarterInfo | undefined
+}>(() => ({
+  projectStarter: undefined,
+}))
+
+export function addCustomAddOn(addOn: AddOnInfo) {
+  useMutableAddOns.setState((state) => ({
+    customAddOns: [...state.customAddOns, addOn],
+  }))
+  if (addOn.modes.includes(useProjectOptions.getState().mode)) {
+    useMutableAddOns.setState((state) => ({
+      userSelectedAddOns: [...state.userSelectedAddOns, addOn.id],
+    }))
+  }
+}
+
+export function useAddOns() {
+  const routerMode = useRouterMode()
+  const originalSelectedAddOns = useOriginalSelectedAddOns()
+  const codeRouterAddOns = useCodeRouterAddOns()
+  const fileRouterAddOns = useFileRouterAddOns()
+  const { userSelectedAddOns, customAddOns } = useMutableAddOns()
+  const projectStarter = useProjectStarter().projectStarter
+
+  const availableAddOns = useMemo(() => {
+    const baseAddOns =
+      routerMode === 'code-router' ? codeRouterAddOns : fileRouterAddOns
+    return [
+      ...baseAddOns,
+      ...customAddOns.filter((addOn) => addOn.modes.includes(routerMode)),
+    ]
+  }, [routerMode, codeRouterAddOns, fileRouterAddOns, customAddOns])
+
+  const addOnState = useMemo(() => {
+    const originalAddOns: Set<string> = new Set()
+    for (const addOn of projectStarter?.dependsOn || []) {
+      originalAddOns.add(addOn)
+    }
+    for (const addOn of originalSelectedAddOns) {
+      originalAddOns.add(addOn)
+    }
+    return getAddOnStatus(
+      availableAddOns,
+      userSelectedAddOns,
+      Array.from(originalAddOns),
+    )
+  }, [
+    availableAddOns,
+    userSelectedAddOns,
+    originalSelectedAddOns,
+    projectStarter?.dependsOn,
+  ])
+
+  const chosenAddOns = useMemo(() => {
+    return Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected)
+  }, [addOnState])
+
+  const toggleAddOn = useCallback(
+    (addOnId: string) => {
+      if (addOnState[addOnId] && addOnState[addOnId].enabled) {
+        if (addOnState[addOnId].selected) {
+          useMutableAddOns.setState((state) => ({
+            userSelectedAddOns: state.userSelectedAddOns.filter(
+              (addOn) => addOn !== addOnId,
+            ),
+          }))
+        } else {
+          useMutableAddOns.setState((state) => ({
+            userSelectedAddOns: [...state.userSelectedAddOns, addOnId],
+          }))
+        }
+      }
+    },
+    [addOnState],
+  )
+
+  return {
+    toggleAddOn,
+    chosenAddOns,
+    availableAddOns,
+    userSelectedAddOns,
+    originalSelectedAddOns,
+    addOnState,
+  }
+}
+
+const useHasProjectStarter = () =>
+  useProjectStarter((state) => state.projectStarter === undefined)
+
+export const useModeEditable = () => useHasProjectStarter()
+
+export const useTypeScriptEditable = () => {
+  const hasProjectStarter = useHasProjectStarter()
+  const routerMode = useRouterMode()
+  return hasProjectStarter && routerMode === 'code-router'
+}
+
+export const useTailwindEditable = () => {
+  const hasProjectStarter = useHasProjectStarter()
+  const routerMode = useRouterMode()
+  return hasProjectStarter && routerMode === 'code-router'
+}
+
+export const useProjectName = () =>
+  useProjectOptions((state) => state.projectName)
+
+export const useRouterMode = () => useProjectOptions((state) => state.mode)
+
+export function useFilters() {
+  const includedFiles = useApplicationSettings((state) => state.includeFiles)
+
+  const toggleFilter = useCallback((filter: string) => {
+    useApplicationSettings.setState((state) => ({
+      includeFiles: state.includeFiles.includes(filter)
+        ? state.includeFiles.filter((f) => f !== filter)
+        : [...state.includeFiles, filter],
+    }))
+  }, [])
+
+  return {
+    includedFiles,
+    toggleFilter,
+  }
+}
+
+export function useDryRun() {
+  const applicationMode = useApplicationMode()
+  const projectOptions = useProjectOptions()
+  const { userSelectedAddOns, chosenAddOns } = useAddOns()
+  const projectStarter = useProjectStarter().projectStarter
+
+  const { data: dryRunOutput } = useQuery<DryRunOutput>({
+    queryKey: [
+      'dry-run',
+      applicationMode,
+      JSON.stringify(projectOptions),
+      JSON.stringify(userSelectedAddOns),
+      projectStarter?.url,
+    ],
+    queryFn: async () => {
+      if (applicationMode === 'none') {
+        return {
+          files: {},
+          commands: [],
+          deletedFiles: [],
+        }
+      } else if (applicationMode === 'setup') {
+        return dryRunCreateApp(projectOptions, chosenAddOns, projectStarter)
+      } else {
+        return dryRunAddToApp(userSelectedAddOns)
+      }
+    },
+    initialData: {
+      files: {},
+      commands: [],
+      deletedFiles: [],
+    },
+  })
+
+  return dryRunOutput
+}
+
+export const setProjectName = (projectName: string) =>
+  useProjectOptions.setState({
+    projectName,
+  })
+
+export const setRouterMode = (mode: Mode) =>
+  useProjectOptions.setState({
+    mode,
+  })
+
+export function setTypeScript(typescript: boolean) {
+  useProjectOptions.setState({
+    typescript,
+  })
+}
+
+export function setTailwind(tailwind: boolean) {
+  useProjectOptions.setState({
+    tailwind,
+  })
+}
+
+export function setProjectStarter(starter: StarterInfo | undefined) {
+  useProjectStarter.setState(() => ({
+    projectStarter: starter,
+  }))
+}

package/src/styles.css

@@ -2,6 +2,8 @@
 
 @plugin "tailwindcss-animate";
 
+@source inline("bg-green-500");
+
 @custom-variant dark (&:is(.dark *));
 
 body {
@@ -128,6 +130,30 @@ code {
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -136,3 +162,24 @@ code {
     @apply bg-background text-foreground;
   }
 }
+
+[data-sidebar='group'] {
+  background-color: hsl(240 5.9% 6%) !important;
+  @apply mb-2 rounded-lg inset-shadow-gray-600 inset-shadow-sm;
+}
+
+[data-sidebar='content'] {
+  @apply p-2 pt-5;
+}
+
+[data-sidebar='header'] {
+  @apply shadow-gray-700 shadow-md z-50;
+}
+
+.cm-changedLine {
+  background-color: oklch(0.27 0.005 285.823) !important;
+}
+
+.file-filters {
+  background-color: oklch(0.2 0.005 285.823);
+}