chore: migration to zustand, query and custom hooks

Author: jherr

packages/cta-ui/package.json

@@ -46,7 +46,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "execa": "^9.5.2",
-    "jotai": "^2.12.3",
     "jotai-tanstack-query": "^0.9.0",
     "lucide-react": "^0.476.0",
     "next-themes": "^0.4.6",
@@ -58,7 +57,8 @@
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "vinxi": "^0.5.3",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",

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

@@ -1,4 +1,3 @@
-import { useAtomValue } from 'jotai'
 import {
   Sidebar,
   SidebarContent,
@@ -15,11 +14,11 @@ import ModeSelector from '@/components/sidebar-items/mode-selector'
 import TypescriptSwitch from '@/components/sidebar-items/typescript-switch'
 import StarterDialog from '@/components/sidebar-items/starter'
 
-import { applicationMode, isInitialized } from '@/store/project'
+import { useApplicationMode, useReady } from '@/store/project'
 
 export function AppSidebar() {
-  const ready = useAtomValue(isInitialized)
-  const mode = useAtomValue(applicationMode)
+  const ready = useReady()
+  const mode = useApplicationMode()
 
   return (
     <Sidebar>

packages/cta-ui/src/components/custom-add-on-dialog.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
 import { toast } from 'sonner'
 import { TicketPlusIcon } from 'lucide-react'
 
@@ -13,24 +12,23 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { customAddOns, projectOptions, toggleAddOn } from '@/store/project'
+import { addCustomAddOn, useAddOns, useRouterMode } from '@/store/project'
 
 export default function CustomAddOnDialog() {
   const [url, setUrl] = useState('')
   const [open, setOpen] = useState(false)
 
-  const mode = useAtomValue(projectOptions).mode
-  const setCustomAddOns = useSetAtom(customAddOns)
-  const toggle = useSetAtom(toggleAddOn)
+  const mode = useRouterMode()
+  const { toggleAddOn } = useAddOns()
 
   async function onImport() {
     const response = await fetch(`/api/load-remote-add-on?url=${url}`)
     const data = await response.json()
 
     if (!data.error) {
-      setCustomAddOns((state) => [...state, data])
+      addCustomAddOn(data)
       if (data.modes.includes(mode)) {
-        toggle(data.id)
+        toggleAddOn(data.id)
       }
       setOpen(false)
     } else {

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

@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
 import { FileText, Folder } from 'lucide-react'
 
 import FileViewer from './file-viewer'
@@ -11,29 +10,18 @@ import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
 
 import {
-  applicationMode,
-  dryRunAtom,
-  includeFiles,
-  isInitialized,
-  projectFiles,
-  projectLocalFiles,
+  useApplicationMode,
+  useDryRun,
+  useFilters,
+  useOriginalOutput,
+  useProjectLocalFiles,
+  useReady,
 } from '@/store/project'
 
 import { getFileClass, twClasses } from '@/file-classes'
 
 export function Filters() {
-  const includedFiles = useAtomValue(includeFiles)
-  const setIncludeFiles = useSetAtom(includeFiles)
-  function toggleFilter(
-    filter: 'unchanged' | 'added' | 'modified' | 'deleted' | 'overwritten',
-  ) {
-    setIncludeFiles((state) => {
-      if (state.includes(filter)) {
-        return state.filter((file) => file !== filter)
-      }
-      return [...state, filter]
-    })
-  }
+  const { includedFiles, toggleFilter } = useFilters()
 
   return (
     <div className="p-2 rounded-md bg-gray-900 file-filters">
@@ -104,19 +92,21 @@ export default function FileNavigator() {
     './package.json',
   )
 
-  const originalOutput = useAtomValue(projectFiles)
-  const localTree = useAtomValue(projectLocalFiles)
-  const { data: output } = useAtomValue(dryRunAtom)
+  const projectFiles = useOriginalOutput()
+  const localTree = useProjectLocalFiles()
+  const dryRunOutput = useDryRun()
+
+  const mode = useApplicationMode()
 
-  const mode = useAtomValue(applicationMode)
-  const tree = output.files
-  const originalTree = mode === 'setup' ? output.files : originalOutput.files
-  const deletedFiles = output.deletedFiles
+  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 = useAtomValue(includeFiles)
+  const { includedFiles } = useFilters()
 
   const fileTree = useMemo(() => {
     const treeData: Array<FileTreeItem> = []
@@ -187,7 +177,7 @@ export default function FileNavigator() {
     return treeData
   }, [tree, originalTree, localTree, includedFiles])
 
-  const ready = useAtomValue(isInitialized)
+  const ready = useReady()
 
   if (!ready) {
     return null

packages/cta-ui/src/components/sidebar-items/add-ons.tsx

@@ -1,13 +1,12 @@
 import { useMemo, useState } from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
 import { InfoIcon } from 'lucide-react'
 
 import type { AddOnInfo } from '@/types'
 
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 
-import { addOnState, availableAddOns, toggleAddOn } from '@/store/project'
+import { useAddOns } from '@/store/project'
 
 import ImportCustomAddOn from '@/components/custom-add-on-dialog'
 import AddOnInfoDialog from '@/components/add-on-info-dialog'
@@ -19,15 +18,13 @@ const addOnTypeLabels: Record<string, string> = {
 }
 
 export default function SelectedAddOns() {
-  const addOns = useAtomValue(availableAddOns)
-  const addOnStatus = useAtomValue(addOnState)
-  const toggle = useSetAtom(toggleAddOn)
+  const { availableAddOns, addOnState, toggleAddOn } = useAddOns()
 
   const sortedAddOns = useMemo(() => {
-    return addOns.sort((a, b) => {
+    return availableAddOns.sort((a, b) => {
       return a.name.localeCompare(b.name)
     })
-  }, [addOns])
+  }, [availableAddOns])
 
   const [infoAddOn, setInfoAddOn] = useState<AddOnInfo>()
 
@@ -55,10 +52,10 @@ export default function SelectedAddOns() {
                   <div className="p-1 flex flex-row items-center">
                     <Switch
                       id={addOn.id}
-                      checked={addOnStatus[addOn.id].selected}
-                      disabled={!addOnStatus[addOn.id].enabled}
+                      checked={addOnState[addOn.id].selected}
+                      disabled={!addOnState[addOn.id].enabled}
                       onCheckedChange={() => {
-                        toggle(addOn.id)
+                        toggleAddOn(addOn.id)
                       }}
                     />
                     <Label

packages/cta-ui/src/components/sidebar-items/mode-selector.tsx

@@ -1,17 +1,20 @@
-import { useAtomValue, useSetAtom } from 'jotai'
 import { CodeIcon, FileIcon } from 'lucide-react'
 
 import type { Mode } from '@tanstack/cta-engine'
 
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 
-import { applicationMode, modeEditable, projectOptions } from '@/store/project'
+import {
+  setRouterMode,
+  useApplicationMode,
+  useModeEditable,
+  useRouterMode,
+} from '@/store/project'
 
 export default function ModeSelector() {
-  const mode = useAtomValue(applicationMode)
-  const enableMode = useAtomValue(modeEditable)
-  const routerMode = useAtomValue(projectOptions).mode
-  const setRouterMode = useSetAtom(projectOptions)
+  const mode = useApplicationMode()
+  const enableMode = useModeEditable()
+  const routerMode = useRouterMode()
 
   if (mode !== 'setup') {
     return null
@@ -25,10 +28,7 @@ export default function ModeSelector() {
           value={routerMode}
           onValueChange={(v: string) => {
             if (v) {
-              setRouterMode((state) => ({
-                ...state,
-                mode: v as Mode,
-              }))
+              setRouterMode(v as Mode)
             }
           }}
         >

packages/cta-ui/src/components/sidebar-items/project-name.tsx

@@ -1,14 +1,15 @@
-import { useAtomValue, useSetAtom } from 'jotai'
-
 import { Input } from '@/components/ui/input'
 import { SidebarGroupLabel } from '@/components/ui/sidebar'
 
-import { applicationMode, projectOptions } from '@/store/project'
+import {
+  setProjectName,
+  useApplicationMode,
+  useProjectName,
+} from '@/store/project'
 
 export default function ProjectName() {
-  const name = useAtomValue(projectOptions)
-  const mode = useAtomValue(applicationMode)
-  const setProjectOptions = useSetAtom(projectOptions)
+  const name = useProjectName()
+  const mode = useApplicationMode()
 
   if (mode !== 'setup') {
     return null
@@ -18,14 +19,9 @@ export default function ProjectName() {
     <>
       <SidebarGroupLabel>Project Name</SidebarGroupLabel>
       <Input
-        value={name.projectName}
+        value={name}
         placeholder="my-app"
-        onChange={(e) => {
-          setProjectOptions((state) => ({
-            ...state,
-            projectName: e.target.value,
-          }))
-        }}
+        onChange={(e) => setProjectName(e.target.value)}
         className="w-full"
       />
     </>

packages/cta-ui/src/components/sidebar-items/run-add-ons.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useAtomValue } from 'jotai'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -10,16 +9,15 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { applicationMode, selectedAddOns } from '@/store/project'
+import { useAddOns, useApplicationMode } from '@/store/project'
 
 export default function RunAddOns() {
-  const currentlySelectedAddOns = useAtomValue(selectedAddOns)
+  const { chosenAddOns } = useAddOns()
   const [isRunning, setIsRunning] = useState(false)
   const [output, setOutput] = useState('')
   const [finished, setFinished] = useState(false)
 
-  const mode = useAtomValue(applicationMode)
-  const selAddOns = useAtomValue(selectedAddOns)
+  const mode = useApplicationMode()
 
   if (mode !== 'add') {
     return null
@@ -32,7 +30,7 @@ export default function RunAddOns() {
     const streamingReq = await fetch('/api/add-to-app', {
       method: 'POST',
       body: JSON.stringify({
-        addOns: selAddOns.map((addOn) => addOn.id),
+        addOns: chosenAddOns,
       }),
       headers: {
         'Content-Type': 'application/json',
@@ -83,7 +81,7 @@ export default function RunAddOns() {
         <Button
           variant="default"
           onClick={onAddToApp}
-          disabled={currentlySelectedAddOns.length === 0 || isRunning}
+          disabled={chosenAddOns.length === 0 || isRunning}
           className="w-full"
         >
           Add These Add-Ons To Your App

packages/cta-ui/src/components/sidebar-items/run-create-app.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useAtomValue } from 'jotai'
 import { HammerIcon } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
@@ -12,21 +11,21 @@ import {
 } from '@/components/ui/dialog'
 
 import {
-  applicationMode,
-  projectOptions,
-  projectStarter,
-  selectedAddOns,
+  useAddOns,
+  useApplicationMode,
+  useProjectOptions,
+  useProjectStarter,
 } from '@/store/project'
 
 export default function RunCreateApp() {
   const [isRunning, setIsRunning] = useState(false)
   const [output, setOutput] = useState('')
   const [finished, setFinished] = useState(false)
 
-  const mode = useAtomValue(applicationMode)
-  const options = useAtomValue(projectOptions)
-  const selAddOns = useAtomValue(selectedAddOns)
-  const projStarter = useAtomValue(projectStarter)
+  const mode = useApplicationMode()
+  const options = useProjectOptions()
+  const { chosenAddOns } = useAddOns()
+  const { projectStarter } = useProjectStarter()
 
   if (mode !== 'setup') {
     return null
@@ -41,8 +40,8 @@ export default function RunCreateApp() {
       body: JSON.stringify({
         options: {
           ...options,
-          chosenAddOns: selAddOns.map((addOn) => addOn.id),
-          starter: projStarter?.url || undefined,
+          chosenAddOns,
+          starter: projectStarter?.url || undefined,
         },
       }),
       headers: {