@tanstack/cta-ui 0.15.2 → 0.15.4

package/src/components/file-navigator.tsx

@@ -1,203 +0,0 @@
-import { useMemo, useState } from 'react'
-import { FileText, Folder } from 'lucide-react'
-
-import FileViewer from './file-viewer'
-import FileTree from './file-tree'
-
-import type { FileTreeItem } from '@/types'
-
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-
-import {
-  useApplicationMode,
-  useDryRun,
-  useFilters,
-  useOriginalOutput,
-  useProjectLocalFiles,
-  useReady,
-} from '@/store/project'
-
-import { getFileClass, twClasses } from '@/file-classes'
-
-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 =
-    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> = []
-
-    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

@@ -1,35 +0,0 @@
-import { useMemo } from 'react'
-import { FileText, Folder } from 'lucide-react'
-
-import type { FileTreeItem } from '@/types.js'
-
-import { TreeView } from '@/components/ui/tree-view'
-
-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" />}
-    />
-  )
-}

package/src/components/file-viewer.tsx

@@ -1,67 +0,0 @@
-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 { githubDarkInit } from '@uiw/codemirror-theme-github'
-
-const theme = githubDarkInit({
-  settings: {
-    background: 'oklch(0.07 0.005 285.823)',
-    foreground: '#c9d1d9',
-    gutterBackground: 'oklch(0.22 0.005 285.823)',
-  },
-})
-
-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={theme}
-        height="100vh"
-        width="100%"
-        readOnly
-        extensions={[language]}
-        className="text-lg"
-      />
-    )
-  }
-  return (
-    <CodeMirrorMerge orientation="a-b" theme={theme} className="text-lg">
-      <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
-      <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
-    </CodeMirrorMerge>
-  )
-}

package/src/components/header.tsx

@@ -1,31 +0,0 @@
-export function AppHeader() {
-  return (
-    <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4 flex items-center gap-2 text-lg sm:text-xl shadow-xl">
-      <div className="flex items-center gap-1.5">
-        <img
-          src="/logo-color-100w.png"
-          alt="TanStack Logo"
-          className="w-[30px] rounded-full overflow-hidden border-2 border-black dark:border-none"
-        />
-        <div className="font-black text-xl uppercase">TanStack</div>
-      </div>
-      <svg
-        stroke="currentColor"
-        fill="currentColor"
-        stroke-width="0"
-        viewBox="0 0 256 512"
-        height="1em"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
-      </svg>
-      <div className="hover:text-blue-500 flex items-center gap-2">
-        Create TanStack App{' '}
-        <span className="bg-gradient-to-r from-blue-500 to-cyan-500 text-white text-xs font-bold px-2 py-0.5 rounded">
-          ALPHA
-        </span>
-      </div>
-    </div>
-  )
-}

package/src/components/sidebar-items/add-ons.tsx

@@ -1,94 +0,0 @@
-import { useMemo, useState, Fragment } from 'react'
-import { InfoIcon } from 'lucide-react'
-
-import type { AddOnInfo } from '@/types'
-
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-
-import { useAddOns } from '@/store/project'
-
-import ImportCustomAddOn from '@/components/custom-add-on-dialog'
-import AddOnInfoDialog from '@/components/add-on-info-dialog'
-
-const addOnTypeLabels: Record<string, string> = {
-  toolchain: 'Toolchain',
-  'add-on': 'Add-on',
-  example: 'Example',
-}
-
-export default function SelectedAddOns() {
-  const { availableAddOns, addOnState, toggleAddOn } = useAddOns()
-
-  const sortedAddOns = useMemo(() => {
-    return availableAddOns.sort((a, b) => {
-      return a.name.localeCompare(b.name)
-    })
-  }, [availableAddOns])
-
-  const [infoAddOn, setInfoAddOn] = useState<AddOnInfo>()
-
-  return (
-    <>
-      <AddOnInfoDialog
-        addOn={infoAddOn}
-        onClose={() => setInfoAddOn(undefined)}
-      />
-      {Object.keys(addOnTypeLabels).map((type) => (
-        <Fragment key={type}>
-          {sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (
-            <div
-              key={`${type}-add-ons`}
-              className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active"
-            >
-              <h3 className="font-medium">{addOnTypeLabels[type]}</h3>
-              <div className="flex flex-row flex-wrap">
-                {sortedAddOns
-                  .filter((addOn) => addOn.type === type)
-                  .map((addOn) => (
-                    <div
-                      key={addOn.id}
-                      className="w-1/2 flex flex-row justify-between pr-4"
-                    >
-                      <div className="p-1 flex flex-row items-center">
-                        <Switch
-                          id={addOn.id}
-                          checked={addOnState[addOn.id].selected}
-                          disabled={!addOnState[addOn.id].enabled}
-                          onCheckedChange={() => {
-                            toggleAddOn(addOn.id)
-                          }}
-                        />
-                        <Label
-                          htmlFor={addOn.id}
-                          className="pl-2 font-semibold text-gray-300"
-                        >
-                          {addOn.smallLogo && (
-                            <img
-                              src={`data:image/svg+xml,${encodeURIComponent(
-                                addOn.smallLogo,
-                              )}`}
-                              alt={addOn.name}
-                              className="w-5"
-                            />
-                          )}
-                          {addOn.name}
-                        </Label>
-                        <InfoIcon
-                          className="ml-2 w-4 text-gray-600"
-                          onClick={() => setInfoAddOn(addOn)}
-                        />
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          )}
-        </Fragment>
-      ))}
-      <div className="mt-4">
-        <ImportCustomAddOn />
-      </div>
-    </>
-  )
-}

package/src/components/sidebar-items/mode-selector.tsx

@@ -1,57 +0,0 @@
-import { CodeIcon, FileIcon } from 'lucide-react'
-
-import type { Mode } from '@tanstack/cta-engine'
-
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-
-import {
-  setRouterMode,
-  useApplicationMode,
-  useModeEditable,
-  useRouterMode,
-} from '@/store/project'
-
-export default function ModeSelector() {
-  const mode = useApplicationMode()
-  const enableMode = useModeEditable()
-  const routerMode = useRouterMode()
-
-  if (mode !== 'setup') {
-    return null
-  }
-
-  return (
-    <div className="flex flex-col @md:flex-row @md:items-center gap-2 items-start">
-      <h3 className="font-medium whitespace-nowrap">Router Mode</h3>
-      <div className="flex flex-row justify-center items-center">
-        <ToggleGroup
-          type="single"
-          value={routerMode}
-          onValueChange={(v: string) => {
-            if (v) {
-              setRouterMode(v as Mode)
-            }
-          }}
-          className="rounded-md border-2 border-gray-500/10"
-        >
-          <ToggleGroupItem
-            value="code-router"
-            className="px-4"
-            disabled={!enableMode}
-          >
-            <CodeIcon className="w-4 h-4" />
-            Code Router
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="file-router"
-            className="px-4"
-            disabled={!enableMode}
-          >
-            <FileIcon className="w-4 h-4" />
-            File Router
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </div>
-    </div>
-  )
-}

package/src/components/sidebar-items/project-name.tsx

@@ -1,28 +0,0 @@
-import { Input } from '@/components/ui/input'
-
-import {
-  setProjectName,
-  useApplicationMode,
-  useProjectName,
-} from '@/store/project'
-
-export default function ProjectName() {
-  const name = useProjectName()
-  const mode = useApplicationMode()
-
-  if (mode !== 'setup') {
-    return null
-  }
-
-  return (
-    <div className="flex flex-row gap-2 items-center">
-      <h3 className="font-medium whitespace-nowrap">Project Name</h3>
-      <Input
-        value={name}
-        placeholder="my-app"
-        onChange={(e) => setProjectName(e.target.value)}
-        className="w-full bg-gray-500/10 rounded-md px-2 py-1 min-w-[200px] text-sm"
-      />
-    </div>
-  )
-}

package/src/components/sidebar-items/run-add-ons.tsx

@@ -1,71 +0,0 @@
-import { useState } from 'react'
-
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-
-import { useAddOns, useApplicationMode } from '@/store/project'
-import useStreamingStatus from '@/hooks/use-streaming-status'
-import StatusList from '@/components/StatusList'
-import { addToAppStreaming, shutdown } from '@/lib/api'
-
-export default function RunAddOns() {
-  const { chosenAddOns } = useAddOns()
-  const [isRunning, setIsRunning] = useState(false)
-  const { streamItems, monitorStream, finished } = useStreamingStatus()
-
-  const mode = useApplicationMode()
-
-  if (mode !== 'add') {
-    return null
-  }
-
-  async function onAddToApp() {
-    setIsRunning(true)
-    monitorStream(await addToAppStreaming(chosenAddOns))
-  }
-
-  return (
-    <div>
-      <Dialog open={isRunning}>
-        <DialogContent
-          className="sm:min-w-[425px] sm:max-w-fit"
-          hideCloseButton
-        >
-          <DialogHeader>
-            <DialogTitle>Adding Add-Ons</DialogTitle>
-          </DialogHeader>
-          <StatusList streamItems={streamItems} finished={finished} />
-          <DialogFooter>
-            <Button
-              variant="default"
-              onClick={async () => {
-                await shutdown()
-                window.close()
-              }}
-              disabled={!finished}
-            >
-              Exit This Application
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <div className="flex flex-col gap-2">
-        <Button
-          variant="default"
-          onClick={onAddToApp}
-          disabled={chosenAddOns.length === 0 || isRunning}
-          className="w-full"
-        >
-          Add These Add-Ons To Your App
-        </Button>
-      </div>
-    </div>
-  )
-}

package/src/components/sidebar-items/run-create-app.tsx

@@ -1,82 +0,0 @@
-import { useState } from 'react'
-import { HammerIcon } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-
-import useStreamingStatus from '@/hooks/use-streaming-status'
-import {
-  useAddOns,
-  useApplicationMode,
-  useProjectOptions,
-  useProjectStarter,
-} from '@/store/project'
-import StatusList from '@/components/StatusList'
-import { createAppStreaming, shutdown } from '@/lib/api'
-
-export default function RunCreateApp() {
-  const [isRunning, setIsRunning] = useState(false)
-  const { streamItems, monitorStream, finished } = useStreamingStatus()
-
-  const mode = useApplicationMode()
-  const options = useProjectOptions()
-  const { chosenAddOns } = useAddOns()
-  const { projectStarter } = useProjectStarter()
-
-  if (mode !== 'setup') {
-    return null
-  }
-
-  async function onAddToApp() {
-    setIsRunning(true)
-    monitorStream(
-      await createAppStreaming(options, chosenAddOns, projectStarter),
-    )
-  }
-
-  return (
-    <div>
-      <Dialog open={isRunning}>
-        <DialogContent
-          className="sm:min-w-[425px] sm:max-w-fit"
-          hideCloseButton
-        >
-          <DialogHeader>
-            <DialogTitle>Creating Your Application</DialogTitle>
-          </DialogHeader>
-          <StatusList streamItems={streamItems} finished={finished} />
-          <DialogFooter>
-            <Button
-              variant="default"
-              onClick={async () => {
-                await shutdown()
-                window.close()
-              }}
-              disabled={!finished}
-            >
-              Exit This Application
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <div className="flex flex-col gap-2">
-        <Button
-          variant="default"
-          onClick={onAddToApp}
-          disabled={isRunning}
-          className="w-full"
-        >
-          <HammerIcon className="w-4 h-4" />
-          Build Your App
-        </Button>
-      </div>
-    </div>
-  )
-}