@tanstack/cta-ui-base 0.15.4

package/src/lib/api.ts

@@ -0,0 +1,100 @@
+import type { SerializedOptions } from '@tanstack/cta-engine'
+
+import type {
+  AddOnInfo,
+  DryRunOutput,
+  InitialData,
+  StarterInfo,
+} from '../types'
+
+// @ts-ignore - import.meta.env is not available in the browser
+const baseUrl = import.meta.env.VITE_API_BASE_URL || ''
+
+export async function createAppStreaming(
+  options: SerializedOptions,
+  chosenAddOns: Array<string>,
+  projectStarter?: StarterInfo,
+) {
+  return await fetch(`${baseUrl}/api/create-app`, {
+    method: 'POST',
+    body: JSON.stringify({
+      options: {
+        ...options,
+        chosenAddOns,
+        starter: projectStarter?.url || undefined,
+      },
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+export async function addToAppStreaming(chosenAddOns: Array<string>) {
+  return await fetch(`${baseUrl}/api/add-to-app`, {
+    method: 'POST',
+    body: JSON.stringify({
+      addOns: chosenAddOns,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+export function shutdown() {
+  return fetch(`${baseUrl}/api/shutdown`, {
+    method: 'POST',
+  })
+}
+
+export async function loadRemoteAddOn(url: string) {
+  const response = await fetch(`${baseUrl}/api/load-remote-add-on?url=${url}`)
+  return (await response.json()) as AddOnInfo | { error: string }
+}
+
+export async function loadRemoteStarter(url: string) {
+  const response = await fetch(`${baseUrl}/api/load-starter?url=${url}`)
+  return (await response.json()) as StarterInfo | { error: string }
+}
+
+const initialDataRequest = fetch(`${baseUrl}/api/initial-payload`)
+
+export async function loadInitialData() {
+  const payloadReq = await initialDataRequest
+  return (await payloadReq.json()) as InitialData
+}
+
+export async function dryRunCreateApp(
+  options: SerializedOptions,
+  chosenAddOns: Array<string>,
+  projectStarter?: StarterInfo,
+) {
+  const outputReq = await fetch(`${baseUrl}/api/dry-run-create-app`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      options: {
+        ...options,
+        chosenAddOns: chosenAddOns,
+        starter: projectStarter?.url,
+      },
+    }),
+  })
+  return outputReq.json() as Promise<DryRunOutput>
+}
+
+export async function dryRunAddToApp(addOns: Array<string>) {
+  const outputReq = await fetch(`${baseUrl}/api/dry-run-add-to-app`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      addOns,
+    }),
+  })
+  return outputReq.json() as Promise<DryRunOutput>
+}

package/src/lib/utils.ts

@@ -0,0 +1,8 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}

package/src/store/add-ons.ts

@@ -0,0 +1,81 @@
+import type { AddOnInfo } from '../types'
+
+export function getAddOnStatus(
+  availableAddOns: Array<AddOnInfo>,
+  chosenAddOns: Array<string>,
+  originalAddOns: Array<string>,
+) {
+  const addOnMap = new Map<
+    string,
+    {
+      enabled: boolean
+      selected: boolean
+      dependedUpon: boolean
+    }
+  >()
+
+  for (const addOn of availableAddOns) {
+    addOnMap.set(addOn.id, {
+      selected: false,
+      enabled: true,
+      dependedUpon: false,
+    })
+  }
+
+  // Guard against cycles in the dependency graph. The results won't be great. But it won't crash.
+  function cycleGuardedSelectAndDisableDependsOn(startingAddOnId: string) {
+    const visited = new Set<string>()
+    function selectAndDisableDependsOn(addOnId: string) {
+      if (visited.has(addOnId)) {
+        return
+      }
+      visited.add(addOnId)
+      const selectedAddOn = availableAddOns.find(
+        (addOn) => addOn.id === addOnId,
+      )
+      if (selectedAddOn) {
+        for (const dependsOnId of selectedAddOn.dependsOn || []) {
+          const dependsOnAddOn = addOnMap.get(dependsOnId)
+          if (dependsOnAddOn) {
+            dependsOnAddOn.selected = true
+            dependsOnAddOn.enabled = false
+            dependsOnAddOn.dependedUpon = true
+            selectAndDisableDependsOn(dependsOnId)
+          }
+        }
+        const addOn = addOnMap.get(addOnId)
+        if (addOn) {
+          addOn.selected = true
+          if (!addOn.dependedUpon) {
+            addOn.enabled = true
+          }
+        }
+      }
+    }
+    selectAndDisableDependsOn(startingAddOnId)
+  }
+
+  for (const addOn of originalAddOns) {
+    const addOnInfo = addOnMap.get(addOn)
+    if (addOnInfo) {
+      addOnInfo.selected = true
+      addOnInfo.enabled = false
+      addOnInfo.dependedUpon = true
+    }
+    cycleGuardedSelectAndDisableDependsOn(addOn)
+  }
+
+  for (const addOnId of chosenAddOns) {
+    cycleGuardedSelectAndDisableDependsOn(addOnId)
+  }
+
+  return Object.fromEntries(
+    Array.from(addOnMap.entries()).map(([v, addOn]) => [
+      v,
+      {
+        enabled: addOn.enabled,
+        selected: addOn.selected,
+      },
+    ]),
+  )
+}

package/src/store/project.ts

@@ -0,0 +1,345 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { useQuery } from '@tanstack/react-query'
+
+import { dryRunAddToApp, dryRunCreateApp, loadInitialData } from '../lib/api'
+
+import { getAddOnStatus } from './add-ons'
+
+import type { SerializedOptions } from '@tanstack/cta-engine'
+
+import type { AddOnInfo, DryRunOutput, StarterInfo } from '../types'
+
+export const useProjectOptions = create<
+  SerializedOptions & { initialized: boolean }
+>(() => ({
+  initialized: false,
+  framework: '',
+  mode: '',
+  projectName: '',
+  targetDir: '',
+  typescript: true,
+  tailwind: true,
+  git: true,
+  chosenAddOns: [],
+  packageManager: 'pnpm',
+}))
+
+const useInitialData = () =>
+  useQuery({
+    queryKey: ['initial-data'],
+    queryFn: loadInitialData,
+  })
+
+export const useReady = () => {
+  const { data } = useInitialData()
+  return data !== 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 useOriginalOptions = () => useInitialData().data?.options
+export const useOriginalSelectedAddOns = () =>
+  useOriginalOptions()?.chosenAddOns
+export const useApplicationMode = () => useInitialData().data?.applicationMode
+export const useAddOnsByMode = () => useInitialData().data?.addOns
+export const useSupportedModes = () => useInitialData().data?.supportedModes
+
+const useApplicationSettings = create<{
+  includeFiles: Array<string>
+}>(() => ({
+  includeFiles: ['unchanged', 'added', 'modified', 'deleted', 'overwritten'],
+}))
+
+const useMutableAddOns = create<{
+  userSelectedAddOns: Array<string>
+  customAddOns: Array<AddOnInfo>
+}>(() => ({
+  userSelectedAddOns: [],
+  customAddOns: [],
+}))
+
+export const useProjectStarter = create<{
+  projectStarter: StarterInfo | undefined
+}>(() => ({
+  projectStarter: undefined,
+}))
+
+export function addCustomAddOn(addOn: AddOnInfo) {
+  useMutableAddOns.setState((state) => ({
+    customAddOns: [...state.customAddOns, addOn],
+  }))
+  if (addOn.modes.includes(useProjectOptions.getState().mode)) {
+    useMutableAddOns.setState((state) => ({
+      userSelectedAddOns: [...state.userSelectedAddOns, addOn.id],
+    }))
+  }
+}
+
+export function useAddOns() {
+  const ready = useReady()
+
+  const routerMode = useRouterMode()
+  const originalSelectedAddOns = useOriginalSelectedAddOns()
+  const addOnsByMode = useAddOnsByMode()
+  const forcedAddOns = useForcedAddOns()
+  const { userSelectedAddOns, customAddOns } = useMutableAddOns()
+  const projectStarter = useProjectStarter().projectStarter
+
+  const availableAddOns = useMemo(() => {
+    if (!ready) return []
+    const baseAddOns = addOnsByMode?.[routerMode] || []
+    return [
+      ...baseAddOns,
+      ...customAddOns.filter((addOn) => addOn.modes.includes(routerMode)),
+    ]
+  }, [ready, routerMode, addOnsByMode, customAddOns])
+
+  const addOnState = useMemo(() => {
+    if (!ready) return {}
+    const originalAddOns: Set<string> = new Set()
+    for (const addOn of projectStarter?.dependsOn || []) {
+      originalAddOns.add(addOn)
+    }
+    for (const addOn of originalSelectedAddOns) {
+      originalAddOns.add(addOn)
+    }
+    for (const addOn of forcedAddOns || []) {
+      originalAddOns.add(addOn)
+    }
+    return getAddOnStatus(
+      availableAddOns,
+      userSelectedAddOns,
+      Array.from(originalAddOns),
+    )
+  }, [
+    ready,
+    availableAddOns,
+    userSelectedAddOns,
+    originalSelectedAddOns,
+    projectStarter?.dependsOn,
+    forcedAddOns,
+  ])
+
+  const chosenAddOns = useMemo(() => {
+    if (!ready) return []
+    const addOns = new Set(
+      Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected),
+    )
+    for (const addOn of forcedAddOns || []) {
+      addOns.add(addOn)
+    }
+    return Array.from(addOns)
+  }, [ready, addOnState, forcedAddOns])
+
+  const toggleAddOn = useCallback(
+    (addOnId: string) => {
+      if (!ready) return
+      if (addOnState[addOnId].enabled) {
+        if (addOnState[addOnId].selected) {
+          useMutableAddOns.setState((state) => ({
+            userSelectedAddOns: state.userSelectedAddOns.filter(
+              (addOn) => addOn !== addOnId,
+            ),
+          }))
+        } else {
+          useMutableAddOns.setState((state) => ({
+            userSelectedAddOns: [...state.userSelectedAddOns, addOnId],
+          }))
+        }
+      }
+    },
+    [ready, addOnState],
+  )
+
+  return {
+    toggleAddOn,
+    chosenAddOns,
+    availableAddOns,
+    userSelectedAddOns,
+    originalSelectedAddOns,
+    addOnState,
+  }
+}
+
+const useHasProjectStarter = () =>
+  useProjectStarter((state) => state.projectStarter === undefined)
+
+export const useModeEditable = () => {
+  const ready = useReady()
+  const forcedRouterMode = useForcedRouterMode()
+  const hasProjectStarter = useHasProjectStarter()
+  return ready ? !forcedRouterMode && hasProjectStarter : false
+}
+
+export const useTypeScriptEditable = () => {
+  const ready = useReady()
+  const hasProjectStarter = useHasProjectStarter()
+  const routerMode = useRouterMode()
+  return ready ? hasProjectStarter && routerMode === 'code-router' : false
+}
+
+export const useTailwindEditable = () => {
+  const ready = useReady()
+  const hasProjectStarter = useHasProjectStarter()
+  const routerMode = useRouterMode()
+  return ready ? hasProjectStarter && routerMode === 'code-router' : false
+}
+
+export const useProjectName = () =>
+  useProjectOptions((state) => state.projectName)
+
+export const useRouterMode = () => {
+  const ready = useReady()
+  const forcedRouterMode = useForcedRouterMode()
+  const userMode = useProjectOptions((state) => state.mode)
+  return ready ? forcedRouterMode || userMode : 'file-router'
+}
+
+export function useFilters() {
+  const ready = useReady()
+  const includedFiles = useApplicationSettings((state) => state.includeFiles)
+
+  const toggleFilter = useCallback(
+    (filter: string) => {
+      if (!ready) return
+      useApplicationSettings.setState((state) => ({
+        includeFiles: state.includeFiles.includes(filter)
+          ? state.includeFiles.filter((f) => f !== filter)
+          : [...state.includeFiles, filter],
+      }))
+    },
+    [ready],
+  )
+
+  return {
+    includedFiles,
+    toggleFilter,
+  }
+}
+
+export function useDryRun() {
+  const ready = useReady()
+  const applicationMode = useApplicationMode()
+  const { initialized, ...projectOptions } = useProjectOptions()
+  const { userSelectedAddOns, chosenAddOns } = useAddOns()
+  const projectStarter = useProjectStarter().projectStarter
+
+  const { data: dryRunOutput } = useQuery<DryRunOutput>({
+    queryKey: [
+      'dry-run',
+      applicationMode,
+      JSON.stringify(projectOptions),
+      JSON.stringify(userSelectedAddOns),
+      projectStarter?.url,
+    ],
+    queryFn: async () => {
+      if (applicationMode === 'none' || !ready || !initialized) {
+        return {
+          files: {},
+          commands: [],
+          deletedFiles: [],
+        }
+      } else if (applicationMode === 'setup') {
+        return dryRunCreateApp(projectOptions, chosenAddOns, projectStarter)
+      } else {
+        return dryRunAddToApp(userSelectedAddOns)
+      }
+    },
+    enabled: ready,
+    initialData: {
+      files: {},
+      commands: [],
+      deletedFiles: [],
+    },
+  })
+
+  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,
+  })
+
+export const setRouterMode = (mode: string) =>
+  useProjectOptions.setState({
+    mode,
+  })
+
+export function setTypeScript(typescript: boolean) {
+  useProjectOptions.setState({
+    typescript,
+  })
+}
+
+export function setTailwind(tailwind: boolean) {
+  useProjectOptions.setState({
+    tailwind,
+  })
+}
+
+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,
+        initialized: true,
+      })
+    }
+  }, [ready])
+}

package/src/types.d.ts

@@ -0,0 +1,109 @@
+import type { StatusStepType } from '@tanstack/cta-engine'
+
+export type ApplicationMode = 'add' | 'setup' | 'none'
+
+export type StarterInfo = {
+  url: string
+  id: string
+  name: string
+  description: string
+  version: string
+  author: string
+  license: string
+  mode: string
+  typescript: boolean
+  tailwind: boolean
+  banner?: string
+  dependsOn?: Array<string>
+}
+
+// Files
+
+export type DryRunOutput = {
+  files: Record<string, string>
+  commands: Array<{
+    command: string
+    args: Array<string>
+  }>
+  deletedFiles: Array<string>
+}
+
+export type AddOnInfo = {
+  id: string
+  name: string
+  description: string
+  type: 'add-on' | 'example' | 'starter' | 'toolchain'
+  modes: Array<string>
+  smallLogo?: string
+  logo?: string
+  link: string
+  dependsOn?: Array<string>
+}
+
+export type FileClass =
+  | 'unchanged'
+  | 'added'
+  | 'modified'
+  | 'deleted'
+  | 'overwritten'
+
+export type FileTreeItem = TreeDataItem & {
+  contents: string
+  fullPath: string
+  fileClass: FileClass | undefined
+  originalFile?: string
+  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 = {
+  supportedModes: Record<
+    string,
+    {
+      displayName: string
+      description: string
+      forceTypescript: boolean
+    }
+  >
+  options: SerializedOptions
+  output: GeneratorOutput
+  localFiles: Record<string, string>
+  addOns: Record<string, Array<AddOnInfo>>
+  applicationMode: ApplicationMode
+  forcedRouterMode?: string
+  forcedAddOns?: Array<string>
+  registry?: Registry | undefined
+}
+
+export type EventItem = {
+  msgType: 'start'
+  id: string
+  type: StatusStepType
+  message: string
+}
+export type EventFinish = {
+  msgType: 'finish'
+  id: string
+  message: string
+}
+
+export type StreamEvent = EventItem | EventFinish
+
+export type StreamItem = {
+  id: string
+  icon: typeof FileIcon
+  message: string
+}