@tanstack/cta-ui 0.15.3 → 0.15.4

package/src/lib/api.ts

@@ -1,92 +0,0 @@
-import type { SerializedOptions } from '@tanstack/cta-engine'
-
-import type { AddOnInfo, DryRunOutput, InitialData, StarterInfo } from '@/types'
-
-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 }
-}
-
-export async function loadInitialData() {
-  const payloadReq = await fetch(`${baseUrl}/api/initial-payload`)
-  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

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/store/add-ons.ts

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

@@ -1,347 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react'
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-import { useQuery } from '@tanstack/react-query'
-
-import { getAddOnStatus } from './add-ons'
-
-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'],
-    queryFn: async () => loadInitialData(),
-    initialData: {
-      options: {
-        framework: 'react-cra',
-        mode: 'file-router',
-        projectName: 'my-app',
-        targetDir: 'my-app',
-        typescript: true,
-        tailwind: true,
-        git: true,
-        chosenAddOns: [],
-        packageManager: 'pnpm',
-      },
-      localFiles: {},
-      output: {
-        files: {},
-        commands: [],
-        deletedFiles: [],
-      },
-      addOns: {
-        'code-router': [],
-        'file-router': [],
-      },
-      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 useOriginalOptions = () => useInitialData().data.options
-export const useOriginalSelectedAddOns = () => useOriginalOptions().chosenAddOns
-export const useApplicationMode = () => useInitialData().data.applicationMode
-export const useReady = () => useInitialData().isFetched
-export const useCodeRouterAddOns = () =>
-  useInitialData().data.addOns['code-router']
-export const useFileRouterAddOns = () =>
-  useInitialData().data.addOns['file-router']
-
-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 routerMode = useRouterMode()
-  const originalSelectedAddOns = useOriginalSelectedAddOns()
-  const codeRouterAddOns = useCodeRouterAddOns()
-  const fileRouterAddOns = useFileRouterAddOns()
-  const forcedAddOns = useForcedAddOns()
-  const { userSelectedAddOns, customAddOns } = useMutableAddOns()
-  const projectStarter = useProjectStarter().projectStarter
-
-  const availableAddOns = useMemo(() => {
-    const baseAddOns =
-      routerMode === 'code-router' ? codeRouterAddOns : fileRouterAddOns
-    return [
-      ...baseAddOns,
-      ...customAddOns.filter((addOn) => addOn.modes.includes(routerMode)),
-    ]
-  }, [routerMode, codeRouterAddOns, fileRouterAddOns, customAddOns])
-
-  const addOnState = useMemo(() => {
-    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),
-    )
-  }, [
-    availableAddOns,
-    userSelectedAddOns,
-    originalSelectedAddOns,
-    projectStarter?.dependsOn,
-    forcedAddOns,
-  ])
-
-  const chosenAddOns = useMemo(() => {
-    const addOns = new Set(
-      Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected),
-    )
-    for (const addOn of forcedAddOns || []) {
-      addOns.add(addOn)
-    }
-    return Array.from(addOns)
-  }, [addOnState, forcedAddOns])
-
-  const toggleAddOn = useCallback(
-    (addOnId: string) => {
-      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],
-          }))
-        }
-      }
-    },
-    [addOnState],
-  )
-
-  return {
-    toggleAddOn,
-    chosenAddOns,
-    availableAddOns,
-    userSelectedAddOns,
-    originalSelectedAddOns,
-    addOnState,
-  }
-}
-
-const useHasProjectStarter = () =>
-  useProjectStarter((state) => state.projectStarter === undefined)
-
-export const useModeEditable = () => {
-  const forcedRouterMode = useForcedRouterMode()
-  const hasProjectStarter = useHasProjectStarter()
-  return !forcedRouterMode && hasProjectStarter
-}
-
-export const useTypeScriptEditable = () => {
-  const hasProjectStarter = useHasProjectStarter()
-  const routerMode = useRouterMode()
-  return hasProjectStarter && routerMode === 'code-router'
-}
-
-export const useTailwindEditable = () => {
-  const hasProjectStarter = useHasProjectStarter()
-  const routerMode = useRouterMode()
-  return hasProjectStarter && routerMode === 'code-router'
-}
-
-export const useProjectName = () =>
-  useProjectOptions((state) => state.projectName)
-
-export const useRouterMode = () => {
-  const forcedRouterMode = useForcedRouterMode()
-  const userMode = useProjectOptions((state) => state.mode)
-  return forcedRouterMode || userMode
-}
-
-export function useFilters() {
-  const includedFiles = useApplicationSettings((state) => state.includeFiles)
-
-  const toggleFilter = useCallback((filter: string) => {
-    useApplicationSettings.setState((state) => ({
-      includeFiles: state.includeFiles.includes(filter)
-        ? state.includeFiles.filter((f) => f !== filter)
-        : [...state.includeFiles, filter],
-    }))
-  }, [])
-
-  return {
-    includedFiles,
-    toggleFilter,
-  }
-}
-
-export function useDryRun() {
-  const applicationMode = useApplicationMode()
-  const 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') {
-        return {
-          files: {},
-          commands: [],
-          deletedFiles: [],
-        }
-      } else if (applicationMode === 'setup') {
-        return dryRunCreateApp(projectOptions, chosenAddOns, projectStarter)
-      } else {
-        return dryRunAddToApp(userSelectedAddOns)
-      }
-    },
-    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: Mode) =>
-  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)
-    }
-  }, [ready])
-}