@tanstack/cta-ui 0.10.0-alpha.26 → 0.10.0-alpha.27

package/src/components/file-navigator.tsx

@@ -7,7 +7,7 @@ import FileTree from './file-tree'
 import type { FileTreeItem } from '@/types'
 
 import { Label } from '@/components/ui/label'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Switch } from '@/components/ui/switch'
 
 import {
   useApplicationMode,
@@ -24,64 +24,62 @@ export function Filters() {
   const { includedFiles, toggleFilter } = useFilters()
 
   return (
-    <div className="p-2 rounded-md bg-gray-900 file-filters">
-      <div className="text-center text-sm mb-2">File Filters</div>
-      <div className="flex flex-row flex-wrap gap-y-2">
-        <div className="flex flex-row items-center gap-2 w-1/3">
-          <Checkbox
-            id="unchanged"
-            checked={includedFiles.includes('unchanged')}
-            className="w-4 h-4"
-            onCheckedChange={() => toggleFilter('unchanged')}
-          />
-          <Label htmlFor="unchanged" className={twClasses.unchanged}>
-            Unchanged
-          </Label>
-        </div>
-        <div className="flex flex-row items-center gap-2 w-1/3">
-          <Checkbox
-            id="added"
-            checked={includedFiles.includes('added')}
-            className="w-4 h-4"
-            onCheckedChange={() => toggleFilter('added')}
-          />
-          <Label htmlFor="added" className={twClasses.added}>
-            Added
-          </Label>
-        </div>
-        <div className="flex flex-row items-center gap-2 w-1/3">
-          <Checkbox
-            id="modified"
-            checked={includedFiles.includes('modified')}
-            className="w-4 h-4"
-            onCheckedChange={() => toggleFilter('modified')}
-          />
-          <Label htmlFor="modified" className={twClasses.modified}>
-            Modified
-          </Label>
-        </div>
-        <div className="flex flex-row items-center gap-2 w-1/3">
-          <Checkbox
-            id="deleted"
-            checked={includedFiles.includes('deleted')}
-            className="w-4 h-4"
-            onCheckedChange={() => toggleFilter('deleted')}
-          />
-          <Label htmlFor="deleted" className={twClasses.deleted}>
-            Deleted
-          </Label>
-        </div>
-        <div className="flex flex-row items-center gap-2 w-1/3">
-          <Checkbox
-            id="overwritten"
-            checked={includedFiles.includes('overwritten')}
-            className="w-4 h-4"
-            onCheckedChange={() => toggleFilter('overwritten')}
-          />
-          <Label htmlFor="overwritten" className={twClasses.overwritten}>
-            Overwritten
-          </Label>
-        </div>
+    <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>
   )
@@ -184,21 +182,21 @@ export default function FileNavigator() {
   }
 
   return (
-    <div
-      className={`flex flex-row border-1 rounded-md mr-10 p-2 inset-shadow-gray-600 inset-shadow-sm`}
-    >
-      <div className="w-1/4 max-w-1/4 pr-2">
-        {mode === 'add' && <Filters />}
-        <FileTree selectedFile={selectedFile} tree={fileTree} />
-      </div>
-      <div className="max-w-3/4 w-3/4 pl-2">
-        {selectedFile && modifiedFileContents ? (
-          <FileViewer
-            filePath={selectedFile}
-            originalFile={originalFileContents}
-            modifiedFile={modifiedFileContents}
-          />
-        ) : null}
+    <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
+      {mode === 'add' && <Filters />}
+      <div className="flex flex-row">
+        <div className="w-1/4 max-w-1/4 bg-gray-500/10 rounded-l-lg">
+          <FileTree selectedFile={selectedFile} tree={fileTree} />
+        </div>
+        <div className="max-w-3/4 w-3/4">
+          {selectedFile && modifiedFileContents ? (
+            <FileViewer
+              filePath={selectedFile}
+              originalFile={originalFileContents}
+              modifiedFile={modifiedFileContents}
+            />
+          ) : null}
+        </div>
       </div>
     </div>
   )

package/src/components/header.tsx

@@ -0,0 +1,31 @@
+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,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, Fragment } from 'react'
 import { InfoIcon } from 'lucide-react'
 
 import type { AddOnInfo } from '@/types'
@@ -35,53 +35,56 @@ export default function SelectedAddOns() {
         onClose={() => setInfoAddOn(undefined)}
       />
       {Object.keys(addOnTypeLabels).map((type) => (
-        <div key={type}>
+        <Fragment key={type}>
           {sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (
-            <h1 className="text-sm text-center border-b-2">
-              {addOnTypeLabels[type]}
-            </h1>
-          )}
-          <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"
+            <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"
                     >
-                      {addOn.smallLogo && (
-                        <img
-                          src={`data:image/svg+xml,${encodeURIComponent(
-                            addOn.smallLogo,
-                          )}`}
-                          alt={addOn.name}
-                          className="w-5"
+                      <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)}
                         />
-                      )}
-                      {addOn.name}
-                    </Label>
-                    <InfoIcon
-                      className="ml-2 w-4 text-gray-600"
-                      onClick={() => setInfoAddOn(addOn)}
-                    />
-                  </div>
-                </div>
-              ))}
-          </div>
-        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+        </Fragment>
       ))}
       <div className="mt-4">
         <ImportCustomAddOn />

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

@@ -21,8 +21,9 @@ export default function ModeSelector() {
   }
 
   return (
-    <>
-      <div className="flex flex-row justify-center items-center mt-4">
+    <div className="flex flex-row gap-2 items-center">
+      <h3 className="font-medium whitespace-nowrap">Router Mode</h3>
+      <div className="flex flex-row justify-center items-center">
         <ToggleGroup
           type="single"
           value={routerMode}
@@ -31,10 +32,11 @@ export default function ModeSelector() {
               setRouterMode(v as Mode)
             }
           }}
+          className="rounded-md border-2 border-gray-500/10"
         >
           <ToggleGroupItem
             value="code-router"
-            className="px-8"
+            className="px-4"
             disabled={!enableMode}
           >
             <CodeIcon className="w-4 h-4" />
@@ -50,6 +52,6 @@ export default function ModeSelector() {
           </ToggleGroupItem>
         </ToggleGroup>
       </div>
-    </>
+    </div>
   )
 }

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

@@ -1,5 +1,4 @@
 import { Input } from '@/components/ui/input'
-import { SidebarGroupLabel } from '@/components/ui/sidebar'
 
 import {
   setProjectName,
@@ -16,14 +15,14 @@ export default function ProjectName() {
   }
 
   return (
-    <>
-      <SidebarGroupLabel>Project Name</SidebarGroupLabel>
+    <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"
+        className="w-full bg-gray-500/10 rounded-md px-2 py-1 min-w-[200px] text-sm"
       />
-    </>
+    </div>
   )
 }

package/src/components/sidebar-items/typescript-switch.tsx

@@ -22,8 +22,8 @@ export default function TypescriptSwitch() {
   }
 
   return (
-    <div className="flex mt-4">
-      <div className="w-1/2 flex flex-row items-center">
+    <div className="flex">
+      <div className="w-1/2 flex flex-row items-center justify-center">
         <Switch
           id="typescript-switch"
           checked={typescript}
@@ -35,7 +35,7 @@ export default function TypescriptSwitch() {
           TypeScript
         </Label>
       </div>
-      <div className="w-1/2 flex flex-row items-center">
+      <div className="w-1/2 flex flex-row items-center justify-center">
         <Switch
           id="tailwind-switch"
           checked={tailwind}

package/src/components/startup-dialog.tsx

@@ -24,7 +24,7 @@ export default function StartupDialog() {
   const registry = useRegistry()
   const { open, setOpen, dontShowAgain, setDontShowAgain } = useStartupDialog()
 
-  if (mode !== 'setup' || !registry) {
+  if (mode !== 'setup' || !registry || registry?.starters?.length === 0) {
     return null
   }
 
@@ -49,11 +49,9 @@ export default function StartupDialog() {
             Would you like to use a starter project?
           </DialogTitle>
         </DialogHeader>
-        {registry?.starters && (
-          <div>
-            <StartersCarousel onImport={onImport} />
-          </div>
-        )}
+        <div>
+          <StartersCarousel onImport={onImport} />
+        </div>
         <DialogFooter className="flex sm:justify-between w-full">
           <div className="flex items-center gap-2">
             <Switch

package/src/components/ui/switch.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 function Switch({
   className,
@@ -11,15 +11,15 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 border-1 border-gray-500/30',
+        className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
         )}
       />
     </SwitchPrimitive.Root>

package/src/hooks/use-mounted.ts

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export function useMounted() {
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+  return mounted
+}

package/src/hooks/use-preferred-reduced-motion.ts

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+/**
+ * Hook that returns the user's preference for reduced motion.
+ * @returns null if the value is not yet determined or the user's preference for reduced motion.
+ */
+export const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState<
+    boolean | null
+  >(null)
+
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setPrefersReducedMotion(mediaQueryList.matches)
+
+    const listener = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches)
+    }
+
+    mediaQueryList.addEventListener('change', listener)
+    return () => {
+      mediaQueryList.removeEventListener('change', listener)
+    }
+  }, [])
+
+  return prefersReducedMotion
+}

package/src/index.tsx

@@ -2,31 +2,38 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import FileNavigator from '@/components/file-navigator'
 import StartupDialog from '@/components/startup-dialog'
 
-import {
-  SidebarProvider,
-  SidebarTrigger,
-  useSidebar,
-} from '@/components/ui/sidebar'
 import { Toaster } from '@/components/toaster'
 
 import { AppSidebar } from '@/components/cta-sidebar'
+import { AppHeader } from '@/components/header'
+import { BackgroundAnimation } from '@/components/background-animation'
+import { useManager } from '@/store/project'
 
 const queryClient = new QueryClient()
 
 function Content() {
-  const { open } = useSidebar()
+  useManager()
 
   return (
-    <main
-      className={
-        open ? 'w-full max-w-[calc(100%-370px)]' : 'w-full max-w-[100%]'
-      }
-    >
-      <SidebarTrigger className="m-2" />
-      <div className="pl-3">
-        <FileNavigator />
-        <StartupDialog />
+    <main>
+      <BackgroundAnimation />
+      <div
+        className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4"
+        style={{
+          background: `radial-gradient(closest-side, rgba(0,10,40,0.2) 0%, rgba(0,0,0,0) 100%)`,
+        }}
+      >
+        <AppHeader />
+        <div className="flex flex-row">
+          <div className="w-full sm:w-1/3 lg:w-1/4 pr-1 sm:pr-2">
+            <AppSidebar />
+          </div>
+          <div className="w-full sm:w-2/3 lg:w-3/4 pl-1 sm:pl-2">
+            <FileNavigator />
+          </div>
+        </div>
       </div>
+      <StartupDialog />
     </main>
   )
 }
@@ -34,11 +41,8 @@ function Content() {
 export default function RootComponent() {
   return (
     <QueryClientProvider client={queryClient}>
-      <SidebarProvider>
-        <AppSidebar />
-        <Content />
-        <Toaster />
-      </SidebarProvider>
+      <Content />
+      <Toaster />
     </QueryClientProvider>
   )
 }

package/src/store/project.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { useQuery } from '@tanstack/react-query'
@@ -10,6 +10,18 @@ import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
 import type { AddOnInfo, DryRunOutput, StarterInfo } from '@/types.js'
 import { dryRunAddToApp, dryRunCreateApp, loadInitialData } from '@/lib/api'
 
+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 useInitialData = () =>
   useQuery({
     queryKey: ['initial-data'],
@@ -18,8 +30,8 @@ const useInitialData = () =>
       options: {
         framework: 'react-cra',
         mode: 'file-router',
-        projectName: 'my-application',
-        targetDir: 'my-application',
+        projectName: 'my-app',
+        targetDir: 'my-app',
         typescript: true,
         tailwind: true,
         git: true,
@@ -50,8 +62,8 @@ export const useRegistry = () => useInitialData().data.registry
 
 export const useProjectLocalFiles = () => useInitialData().data.localFiles
 export const useOriginalOutput = () => useInitialData().data.output
-export const useOriginalSelectedAddOns = () =>
-  useInitialData().data.options.chosenAddOns
+export const useOriginalOptions = () => useInitialData().data.options
+export const useOriginalSelectedAddOns = () => useOriginalOptions().chosenAddOns
 export const useApplicationMode = () => useInitialData().data.applicationMode
 export const useReady = () => useInitialData().isFetched
 export const useCodeRouterAddOns = () =>
@@ -59,18 +71,6 @@ export const useCodeRouterAddOns = () =>
 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>
 }>(() => ({
@@ -128,7 +128,7 @@ export function useAddOns() {
     for (const addOn of originalSelectedAddOns) {
       originalAddOns.add(addOn)
     }
-    for (const addOn of forcedAddOns) {
+    for (const addOn of forcedAddOns || []) {
       originalAddOns.add(addOn)
     }
     return getAddOnStatus(
@@ -148,7 +148,7 @@ export function useAddOns() {
     const addOns = new Set(
       Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected),
     )
-    for (const addOn of forcedAddOns) {
+    for (const addOn of forcedAddOns || []) {
       addOns.add(addOn)
     }
     return Array.from(addOns)
@@ -156,7 +156,7 @@ export function useAddOns() {
 
   const toggleAddOn = useCallback(
     (addOnId: string) => {
-      if (addOnState[addOnId] && addOnState[addOnId].enabled) {
+      if (addOnState[addOnId].enabled) {
         if (addOnState[addOnId].selected) {
           useMutableAddOns.setState((state) => ({
             userSelectedAddOns: state.userSelectedAddOns.filter(
@@ -328,4 +328,20 @@ export function setProjectStarter(starter: StarterInfo | undefined) {
   useProjectStarter.setState(() => ({
     projectStarter: starter,
   }))
+  if (starter) {
+    useProjectOptions.setState({
+      mode: starter.mode,
+    })
+  }
+}
+
+export function useManager() {
+  const ready = useReady()
+  const originalOptions = useOriginalOptions()
+
+  useEffect(() => {
+    if (ready) {
+      useProjectOptions.setState(originalOptions)
+    }
+  }, [ready])
 }