@tanstack/cta-ui-base 0.15.4

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

@@ -0,0 +1,32 @@
+import { Input } from '../ui/input'
+
+import {
+  setProjectName,
+  useApplicationMode,
+  useProjectName,
+} from '../../store/project'
+
+import SidebarContainer from './sidebar-container'
+
+export default function ProjectName() {
+  const name = useProjectName()
+  const mode = useApplicationMode()
+
+  if (mode !== 'setup') {
+    return null
+  }
+
+  return (
+    <SidebarContainer>
+      <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>
+    </SidebarContainer>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+
+import { Button } from '../ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+
+import { useAddOns, useApplicationMode } from '../../store/project'
+import useStreamingStatus from '../../hooks/use-streaming-status'
+import StatusList from '../status-list'
+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 '../ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+
+import useStreamingStatus from '../../hooks/use-streaming-status'
+import {
+  useAddOns,
+  useApplicationMode,
+  useProjectOptions,
+  useProjectStarter,
+} from '../../store/project'
+import StatusList from '../status-list'
+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/sidebar-container.tsx

@@ -0,0 +1,11 @@
+export default function SidebarContainer({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container sidebar-container">
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,11 @@
+export default function SidebarGroup({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg sidebar-group">
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import { FileBoxIcon, TrashIcon } from 'lucide-react'
+
+import { toast } from 'sonner'
+
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import {
+  setProjectStarter,
+  useApplicationMode,
+  useProjectStarter,
+  useRegistry,
+} from '../../store/project'
+import { loadRemoteStarter } from '../../lib/api'
+import { StartersCarousel } from '../starters-carousel'
+
+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(registryUrl?: string) {
+    const data = await loadRemoteStarter(registryUrl || url)
+
+    if ('error' in data) {
+      toast.error('Failed to load starter', {
+        description: data.error,
+      })
+    } else {
+      setProjectStarter(data)
+      setOpen(false)
+    }
+  }
+
+  const registry = useRegistry()
+
+  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} onOpenChange={setOpen}>
+          <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+            <DialogHeader>
+              <DialogTitle>Project Starter URL</DialogTitle>
+            </DialogHeader>
+            {registry?.starters && (
+              <div>
+                <StartersCarousel onImport={(url) => onImport(url)} />
+              </div>
+            )}
+            <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,58 @@
+import { Label } from '../ui/label'
+import { Switch } from '../ui/switch'
+import Typescript from '../icons/typescript'
+import Tailwind from '../icons/tailwind'
+
+import {
+  setTailwind,
+  setTypeScript,
+  useApplicationMode,
+  useProjectOptions,
+  useTailwindEditable,
+  useTypeScriptEditable,
+} from '../../store/project'
+
+import SidebarContainer from './sidebar-container'
+
+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 (
+    <SidebarContainer>
+      <div className="flex">
+        <div className="w-1/2 flex flex-row items-center justify-center">
+          <Switch
+            id="typescript-switch"
+            checked={typescript}
+            onCheckedChange={(checked) => setTypeScript(checked)}
+            disabled={!enableTypeScript}
+          />
+          <Label htmlFor="typescript-switch" className="ml-2">
+            <Typescript className="w-5" />
+            TypeScript
+          </Label>
+        </div>
+        <div className="w-1/2 flex flex-row items-center justify-center">
+          <Switch
+            id="tailwind-switch"
+            checked={tailwind}
+            onCheckedChange={(checked) => setTailwind(checked)}
+            disabled={!enableTailwind}
+          />
+          <Label htmlFor="tailwind-switch" className="ml-2">
+            <Tailwind className="w-5" />
+            Tailwind
+          </Label>
+        </div>
+      </div>
+    </SidebarContainer>
+  )
+}

package/src/components/starters-carousel.tsx

@@ -0,0 +1,41 @@
+import { useRegistry } from '../store/project'
+
+import { Carousel, CarouselContent, CarouselItem } from './ui/carousel'
+
+export function StartersCarousel({
+  onImport,
+}: {
+  onImport: (url: string) => void
+}) {
+  const registry = useRegistry()
+
+  if (!registry) {
+    return null
+  }
+
+  return (
+    <div>
+      <Carousel>
+        <CarouselContent>
+          {registry.starters.map((starter) => (
+            <CarouselItem className="basis-1/3" key={starter.url}>
+              <div
+                className="p-2 flex flex-col items-center hover:cursor-pointer hover:bg-gray-700/50 hover:text-white rounded-lg"
+                onClick={() => {
+                  onImport(starter.url)
+                }}
+              >
+                <img
+                  src={starter.banner}
+                  alt={starter.name}
+                  className="w-100 max-w-full"
+                />
+                <div className="text-md font-bold">{starter.name}</div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  )
+}

package/src/components/startup-dialog.tsx

@@ -0,0 +1,72 @@
+import { toast } from 'sonner'
+
+import {
+  setProjectStarter,
+  useApplicationMode,
+  useRegistry,
+  useStartupDialog,
+} from '../store/project'
+import { loadRemoteStarter } from '../lib/api'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog'
+import { StartersCarousel } from './starters-carousel'
+import { Button } from './ui/button'
+import { Switch } from './ui/switch'
+import { Label } from './ui/label'
+
+export default function StartupDialog() {
+  const mode = useApplicationMode()
+  const registry = useRegistry()
+  const { open, setOpen, dontShowAgain, setDontShowAgain } = useStartupDialog()
+
+  if (mode !== 'setup' || !registry || registry?.starters?.length === 0) {
+    return null
+  }
+
+  async function onImport(registryUrl: string) {
+    const data = await loadRemoteStarter(registryUrl)
+
+    if ('error' in data) {
+      toast.error('Failed to load starter', {
+        description: data.error,
+      })
+    } else {
+      setProjectStarter(data)
+      setOpen(false)
+    }
+  }
+
+  return (
+    <Dialog modal open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+        <DialogHeader>
+          <DialogTitle className="text-center text-2xl font-bold">
+            Would you like to use a starter project?
+          </DialogTitle>
+        </DialogHeader>
+        <div>
+          <StartersCarousel onImport={onImport} />
+        </div>
+        <DialogFooter className="flex sm:justify-between w-full">
+          <div className="flex items-center gap-2">
+            <Switch
+              id="show-startup-dialog"
+              checked={dontShowAgain}
+              onCheckedChange={setDontShowAgain}
+            />
+            <Label htmlFor="show-startup-dialog">Don't show this again</Label>
+          </div>
+          <Button onClick={() => setOpen(false)}>
+            No, I want to start from scratch
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/status-list.tsx

@@ -0,0 +1,22 @@
+import type { StreamItem } from '../types'
+
+export default function StatusList({
+  streamItems,
+  finished,
+}: {
+  streamItems: Array<StreamItem>
+  finished: boolean
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {streamItems.map((item, index) => (
+        <div key={item.id} className="flex items-center gap-2">
+          <item.icon
+            className={`w-4 h-4 ${index === streamItems.length - 1 && !finished ? 'text-green-500 animate-spin' : ''}`}
+          />
+          {item.message}
+        </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

@@ -0,0 +1,61 @@
+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'
+
+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",
+  {
+    variants: {
+      variant: {
+        default:
+          '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',
+        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',
+        secondary:
+          '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',
+      },
+      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',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }