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

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

@@ -0,0 +1,91 @@
+import { useMemo, useState } 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) => (
+        <div 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"
+                    >
+                      {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>
+      ))}
+      <div className="mt-4">
+        <ImportCustomAddOn />
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,55 @@
+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-row justify-center items-center mt-4">
+        <ToggleGroup
+          type="single"
+          value={routerMode}
+          onValueChange={(v: string) => {
+            if (v) {
+              setRouterMode(v as Mode)
+            }
+          }}
+        >
+          <ToggleGroupItem
+            value="code-router"
+            className="px-8"
+            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>
+    </>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Input } from '@/components/ui/input'
+import { SidebarGroupLabel } from '@/components/ui/sidebar'
+
+import {
+  setProjectName,
+  useApplicationMode,
+  useProjectName,
+} from '@/store/project'
+
+export default function ProjectName() {
+  const name = useProjectName()
+  const mode = useApplicationMode()
+
+  if (mode !== 'setup') {
+    return null
+  }
+
+  return (
+    <>
+      <SidebarGroupLabel>Project Name</SidebarGroupLabel>
+      <Input
+        value={name}
+        placeholder="my-app"
+        onChange={(e) => setProjectName(e.target.value)}
+        className="w-full"
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,82 @@
+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>
+  )
+}

package/src/components/sidebar-items/starter.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import { FileBoxIcon, TrashIcon } from 'lucide-react'
+
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+import {
+  setProjectStarter,
+  useApplicationMode,
+  useProjectStarter,
+} from '@/store/project'
+import { loadRemoteStarter } from '@/lib/api'
+
+export default function Starter() {
+  const [url, setUrl] = useState('')
+  const [open, setOpen] = useState(false)
+
+  const mode = useApplicationMode()
+
+  const { projectStarter } = useProjectStarter()
+
+  if (mode !== 'setup') {
+    return null
+  }
+
+  async function onImport() {
+    const data = await loadRemoteStarter(url)
+
+    if ('error' in data) {
+      toast.error('Failed to load starter', {
+        description: data.error,
+      })
+    } else {
+      setProjectStarter(data)
+      setOpen(false)
+    }
+  }
+
+  return (
+    <>
+      {projectStarter?.banner && (
+        <div className="flex justify-center mb-4">
+          <div className="p-2 bg-gray-300 rounded-lg shadow-xl shadow-gray-800">
+            <img
+              src={projectStarter.banner}
+              alt="Starter Banner"
+              className="w-40 max-w-full"
+            />
+          </div>
+        </div>
+      )}
+      {projectStarter?.name && (
+        <div className="text-md mb-4">
+          <Button
+            variant="outline"
+            size="sm"
+            className="mr-2"
+            onClick={() => {
+              setProjectStarter(undefined)
+            }}
+          >
+            <TrashIcon className="w-4 h-4" />
+          </Button>
+          <span className="font-bold">Starter: </span>
+          {projectStarter.name}
+        </div>
+      )}
+      <div>
+        <Button
+          variant="secondary"
+          className="w-full"
+          onClick={() => {
+            setUrl('')
+            setOpen(true)
+          }}
+        >
+          <FileBoxIcon className="w-4 h-4" />
+          Set Project Starter
+        </Button>
+        <Dialog modal open={open}>
+          <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+            <DialogHeader>
+              <DialogTitle>Project Starter URL</DialogTitle>
+            </DialogHeader>
+            <div>
+              <Input
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                placeholder="https://github.com/myorg/myproject/starter.json"
+                className="min-w-lg w-full"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    onImport()
+                  }
+                }}
+              />
+            </div>
+            <DialogFooter>
+              <Button onClick={onImport}>Load</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,52 @@
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+
+import {
+  setTailwind,
+  setTypeScript,
+  useApplicationMode,
+  useProjectOptions,
+  useTailwindEditable,
+  useTypeScriptEditable,
+} from '@/store/project'
+
+export default function TypescriptSwitch() {
+  const typescript = useProjectOptions((state) => state.typescript)
+  const tailwind = useProjectOptions((state) => state.tailwind)
+  const mode = useApplicationMode()
+  const enableTailwind = useTailwindEditable()
+  const enableTypeScript = useTypeScriptEditable()
+
+  if (mode !== 'setup') {
+    return null
+  }
+
+  return (
+    <div className="flex mt-4">
+      <div className="w-1/2 flex flex-row items-center">
+        <Switch
+          id="typescript-switch"
+          checked={typescript}
+          onCheckedChange={(checked) => setTypeScript(checked)}
+          disabled={!enableTypeScript}
+        />
+        <Label htmlFor="typescript-switch" className="ml-2">
+          <img src="/typescript.svg" className="w-5" />
+          TypeScript
+        </Label>
+      </div>
+      <div className="w-1/2 flex flex-row items-center">
+        <Switch
+          id="tailwind-switch"
+          checked={tailwind}
+          onCheckedChange={(checked) => setTailwind(checked)}
+          disabled={!enableTailwind}
+        />
+        <Label htmlFor="tailwind-switch" className="ml-2">
+          <img src="/tailwind.svg" className="w-5" />
+          Tailwind
+        </Label>
+      </div>
+    </div>
+  )
+}

package/src/components/toaster.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/button.tsx

@@ -1,8 +1,10 @@
-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",
@@ -10,29 +12,29 @@ const buttonVariants = cva(
     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