@tanstack/cta-ui 0.10.0-alpha.23 → 0.10.0-alpha.24

package/package.json

@@ -33,6 +33,7 @@
     "@uiw/react-codemirror": "^4.23.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "execa": "^9.5.2",
     "jotai-tanstack-query": "^0.9.0",
     "lucide-react": "^0.476.0",
@@ -65,6 +66,6 @@
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.23",
+  "version": "0.10.0-alpha.24",
   "scripts": {}
 }

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

@@ -12,13 +12,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-
 import {
   setProjectStarter,
   useApplicationMode,
   useProjectStarter,
+  useRegistry,
 } from '@/store/project'
 import { loadRemoteStarter } from '@/lib/api'
+import { StartersCarousel } from '@/components/starters-carousel'
 
 export default function Starter() {
   const [url, setUrl] = useState('')
@@ -32,8 +33,8 @@ export default function Starter() {
     return null
   }
 
-  async function onImport() {
-    const data = await loadRemoteStarter(url)
+  async function onImport(registryUrl?: string) {
+    const data = await loadRemoteStarter(registryUrl || url)
 
     if ('error' in data) {
       toast.error('Failed to load starter', {
@@ -45,6 +46,8 @@ export default function Starter() {
     }
   }
 
+  const registry = useRegistry()
+
   return (
     <>
       {projectStarter?.banner && (
@@ -86,11 +89,16 @@ export default function Starter() {
           <FileBoxIcon className="w-4 h-4" />
           Set Project Starter
         </Button>
-        <Dialog modal open={open}>
+        <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={onImport} />
+              </div>
+            )}
             <div>
               <Input
                 value={url}

package/src/components/starters-carousel.tsx

@@ -0,0 +1,45 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '@/components/ui/carousel'
+
+import { useRegistry } from '@/store/project'
+
+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,73 @@
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { StartersCarousel } from '@/components/starters-carousel'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import {
+  setProjectStarter,
+  useApplicationMode,
+  useRegistry,
+  useStartupDialog,
+} from '@/store/project'
+import { loadRemoteStarter } from '@/lib/api'
+
+export default function StartupDialog() {
+  const mode = useApplicationMode()
+  const registry = useRegistry()
+  const { open, setOpen, dontShowAgain, setDontShowAgain } = useStartupDialog()
+
+  if (mode !== 'setup' || !registry) {
+    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>
+        {registry?.starters && (
+          <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/ui/carousel.tsx

@@ -0,0 +1,239 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

package/src/engine-handling/generate-initial-payload.ts

@@ -17,9 +17,19 @@ import {
   getForcedRouterMode,
   getProjectOptions,
   getProjectPath,
+  getRegistry,
 } from './server-environment.js'
 
 import type { SerializedOptions } from '@tanstack/cta-engine'
+import type { Registry } from '@/types.js'
+
+function absolutizeUrl(originalUrl: string, relativeUrl: string) {
+  if (relativeUrl.startsWith('http') || relativeUrl.startsWith('https')) {
+    return relativeUrl
+  }
+  const baseUrl = originalUrl.replace(/registry.json$/, '')
+  return `${baseUrl}${relativeUrl.replace(/^\.\//, '')}`
+}
 
 export async function generateInitialPayload() {
   registerFrameworks()
@@ -54,6 +64,21 @@ export async function generateInitialPayload() {
     }
   }
 
+  const registryUrl = getRegistry()
+  let registry: Registry | undefined
+  if (registryUrl) {
+    registry = (await fetch(registryUrl).then((res) => res.json())) as Registry
+    for (const addOn of registry['add-ons']) {
+      addOn.url = absolutizeUrl(registryUrl, addOn.url)
+    }
+    for (const starter of registry.starters) {
+      starter.url = absolutizeUrl(registryUrl, starter.url)
+      if (starter.banner) {
+        starter.banner = absolutizeUrl(registryUrl, starter.banner)
+      }
+    }
+  }
+
   const serializedOptions = getSerializedOptions()
 
   const output = await createAppWrapper(serializedOptions, {
@@ -95,5 +120,6 @@ export async function generateInitialPayload() {
     output,
     forcedRouterMode,
     forcedAddOns: getForcedAddOns(),
+    registry,
   }
 }

package/src/engine-handling/server-environment.ts

@@ -24,3 +24,7 @@ export function getForcedAddOns(): Array<string> | undefined {
     (addOn: string) => addOn !== '',
   )
 }
+
+export function getRegistry(): string | undefined {
+  return process.env.CTA_REGISTRY
+}

package/src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 
 import FileNavigator from '@/components/file-navigator'
+import StartupDialog from '@/components/startup-dialog'
 
 export const Route = createFileRoute('/')({
   component: App,
@@ -10,6 +11,7 @@ function App() {
   return (
     <div className="pl-3">
       <FileNavigator />
+      <StartupDialog />
     </div>
   )
 }

package/src/store/project.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
 import { useQuery } from '@tanstack/react-query'
 
 import { getAddOnStatus } from './add-ons'
@@ -38,12 +39,15 @@ const useInitialData = () =>
       applicationMode: 'none',
       forcedRouterMode: undefined,
       forcedAddOns: [],
+      registry: undefined,
     },
   })
 
 const useForcedRouterMode = () => useInitialData().data.forcedRouterMode
 const useForcedAddOns = () => useInitialData().data.forcedAddOns
 
+export const useRegistry = () => useInitialData().data.registry
+
 export const useProjectLocalFiles = () => useInitialData().data.localFiles
 export const useOriginalOutput = () => useInitialData().data.output
 export const useOriginalSelectedAddOns = () =>
@@ -263,6 +267,41 @@ export function useDryRun() {
   return dryRunOutput
 }
 
+type StartupDialogState = {
+  open: boolean
+  dontShowAgain: boolean
+  setOpen: (open: boolean) => void
+  setDontShowAgain: (dontShowAgain: boolean) => void
+}
+
+export const useStartupDialog = create<StartupDialogState>()(
+  persist(
+    (set) => ({
+      open: false,
+      dontShowAgain: false,
+      setOpen: (open) => set({ open }),
+      setDontShowAgain: (dontShowAgain) => set({ dontShowAgain }),
+    }),
+    {
+      name: 'startup-dialog',
+      partialize: (state) => ({
+        dontShowAgain: state.dontShowAgain,
+      }),
+      merge: (persistedState: unknown, currentState) => {
+        if (
+          persistedState &&
+          (persistedState as { dontShowAgain?: boolean }).dontShowAgain
+        ) {
+          currentState.open = false
+        } else {
+          currentState.open = true
+        }
+        return currentState
+      },
+    },
+  ),
+)
+
 export const setProjectName = (projectName: string) =>
   useProjectOptions.setState({
     projectName,

package/src/types.d.ts

@@ -55,6 +55,20 @@ export type FileTreeItem = TreeDataItem & {
   modifiedFile?: string
 }
 
+export type Registry = {
+  starters: Array<{
+    name: string
+    description: string
+    url: string
+    banner?: string
+  }>
+  'add-ons': Array<{
+    name: string
+    description: string
+    url: string
+  }>
+}
+
 export type InitialData = {
   options: SerializedOptions
   output: GeneratorOutput
@@ -66,6 +80,7 @@ export type InitialData = {
   applicationMode: ApplicationMode
   forcedRouterMode?: Mode
   forcedAddOns?: Array<string>
+  registry: Registry | undefined
 }
 
 export type EventItem = {