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

package/src/types.d.ts

@@ -0,0 +1,87 @@
+import type { Mode, 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: Mode
+  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<'code-router' | 'file-router'>
+  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 InitialData = {
+  options: SerializedOptions
+  output: GeneratorOutput
+  localFiles: Record<string, string>
+  addOns: {
+    'code-router': Array<AddOnInfo>
+    'file-router': Array<AddOnInfo>
+  }
+  applicationMode: ApplicationMode
+}
+
+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
+}

package/tests/store/add-ons.test.ts

@@ -0,0 +1,222 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AddOnInfo } from '@/types'
+
+import { getAddOnStatus } from '@/store/add-ons'
+
+describe('getAddOnStatus', () => {
+  it('everything should be enabled if nothing is selected', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+        },
+      ] as unknown as Array<AddOnInfo>,
+      [],
+      [],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: false,
+        enabled: true,
+      },
+      'add-on-2': {
+        selected: false,
+        enabled: true,
+      },
+    })
+  })
+
+  it('should handle a single add-on', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: [],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-1'],
+      [],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: true,
+        enabled: true,
+      },
+    })
+  })
+
+  it('should handle a depended-on add-on', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+          dependsOn: [],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-1'],
+      [],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: true,
+        enabled: true,
+      },
+      'add-on-2': {
+        selected: true,
+        enabled: false,
+      },
+    })
+  })
+
+  it('should handle a selected depended-on add-on', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+          dependsOn: [],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-1', 'add-on-2'],
+      [],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: true,
+        enabled: true,
+      },
+      'add-on-2': {
+        selected: true,
+        enabled: false,
+      },
+    })
+  })
+
+  it('should handle a selected depended-on add-on', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+          dependsOn: [],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-2'],
+      [],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: false,
+        enabled: true,
+      },
+      'add-on-2': {
+        selected: true,
+        enabled: true,
+      },
+    })
+  })
+
+  it('wont cycle', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+          dependsOn: ['add-on-1'],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-1'],
+      [],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: true,
+        enabled: false,
+      },
+      'add-on-2': {
+        selected: true,
+        enabled: false,
+      },
+    })
+  })
+
+  it('should handle original add-ons', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+          dependsOn: [],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-1'],
+      ['add-on-2'],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: true,
+        enabled: true,
+      },
+      'add-on-2': {
+        selected: true,
+        enabled: false,
+      },
+    })
+  })
+
+  it('should handle original add-ons with dependencies', () => {
+    const addOnStatus = getAddOnStatus(
+      [
+        {
+          id: 'add-on-1',
+          dependsOn: ['add-on-2'],
+        },
+        {
+          id: 'add-on-2',
+          dependsOn: ['add-on-3'],
+        },
+        {
+          id: 'add-on-3',
+          dependsOn: [],
+        },
+      ] as unknown as Array<AddOnInfo>,
+      ['add-on-1'],
+      ['add-on-2'],
+    )
+    expect(addOnStatus).toEqual({
+      'add-on-1': {
+        selected: true,
+        enabled: true,
+      },
+      'add-on-2': {
+        selected: true,
+        enabled: false,
+      },
+      'add-on-3': {
+        selected: true,
+        enabled: false,
+      },
+    })
+  })
+})

package/vitest.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vitest/config'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+})

package/.cursorrules

@@ -1,7 +0,0 @@
-# shadcn instructions
-
-Use the latest version of Shadcn to install new components, like this command to add a button component:
-
-```bash
-pnpx shadcn@latest add button
-```

package/src/components/Header.tsx

@@ -1,13 +0,0 @@
-import { Link } from "@tanstack/react-router";
-
-export default function Header() {
-  return (
-    <header className="p-2 flex gap-2 bg-white text-black justify-between">
-      <nav className="flex flex-row">
-        <div className="px-2 font-bold">
-          <Link to="/">Home</Link>
-        </div>
-      </nav>
-    </header>
-  );
-}

package/src/components/applied-add-on.tsx

@@ -1,149 +0,0 @@
-import { useState } from 'react'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-
-import { runCreateApp } from '@/lib/server-fns'
-import FileViewer from './file-viewer'
-import FileTree from './file-tree'
-
-import type { Mode } from '@tanstack/cta-engine'
-
-export default function AppliedAddOn({
-  projectPath,
-  output: originalOutput,
-  addOnInfo,
-  outputWithoutAddon: originalOutputWithoutAddon,
-  originalOptions,
-  addOns,
-}: {
-  projectPath: string
-  output: {
-    files: Record<string, string>
-  }
-  outputWithoutAddon: {
-    files: Record<string, string>
-  }
-  addOnInfo: {
-    templates: Array<string>
-  }
-  originalOptions: {
-    existingAddOns: Array<string>
-    mode: Mode
-  }
-  addOns: Record<string, Array<any>>
-}) {
-  const [selectedFile, setSelectedFile] = useState<string | null>(null)
-
-  const [options, setOptions] = useState(originalOptions)
-  const [output, setOutput] = useState(originalOutput)
-  const [outputWithoutAddon, setOutputWithoutAddon] = useState(
-    originalOutputWithoutAddon,
-  )
-  const [selectedAddOns, setSelectedAddOns] = useState<Array<string>>([])
-
-  async function updateOptions(
-    updatedOptions: Partial<typeof options>,
-    updatedAddOns: Array<string> = [],
-  ) {
-    const newMode = updatedOptions.mode || options.mode
-    const existingAddOns = [
-      ...(originalOptions.existingAddOns || []),
-      ...(updatedAddOns || []),
-    ].filter((id) => addOns[newMode as Mode].some((addOn) => addOn.id === id))
-
-    const newOptions = {
-      ...options,
-      ...updatedOptions,
-      existingAddOns,
-    }
-    setOptions(newOptions)
-    const [newOutput, newOutputWithoutAddon] = await Promise.all([
-      runCreateApp({
-        data: { withAddOn: true, options: newOptions },
-      }),
-      runCreateApp({
-        data: { withAddOn: false, options: newOptions },
-      }),
-    ])
-    setOutput(newOutput)
-    setOutputWithoutAddon(newOutputWithoutAddon)
-  }
-
-  return (
-    <div>
-      <div className="flex flex-row items-center mb-5">
-        <ToggleGroup
-          type="single"
-          value={options.mode}
-          onValueChange={(v: string) => {
-            if (v) {
-              updateOptions(
-                {
-                  mode: v as Mode,
-                },
-                selectedAddOns,
-              )
-            }
-          }}
-        >
-          <ToggleGroupItem
-            value="code-router"
-            disabled={!addOnInfo.templates.includes('code-router')}
-          >
-            Code Router
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="file-router"
-            disabled={!addOnInfo.templates.includes('file-router')}
-          >
-            File Router
-          </ToggleGroupItem>
-        </ToggleGroup>
-        <div className="flex flex-row ml-5 flex-wrap">
-          {addOns[options.mode as Mode].map((addOn) => (
-            <div key={addOn.name} className="mr-2 flex items-center">
-              <Checkbox
-                id={addOn.id}
-                checked={
-                  originalOptions.existingAddOns.includes(addOn.id) ||
-                  selectedAddOns.includes(addOn.id)
-                }
-                disabled={originalOptions.existingAddOns.includes(addOn.id)}
-                onClick={() => {
-                  let updatedAddOns = selectedAddOns.includes(addOn.id)
-                    ? selectedAddOns.filter((id) => id !== addOn.id)
-                    : [...selectedAddOns, addOn.id]
-                  setSelectedAddOns(updatedAddOns)
-                  updateOptions({}, updatedAddOns)
-                }}
-              />
-              <label htmlFor={addOn.id} className="ml-2">
-                {addOn.name}
-              </label>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex flex-row">
-        <FileTree
-          prefix={projectPath}
-          tree={output.files}
-          originalTree={outputWithoutAddon.files}
-          onFileSelected={(file) => {
-            setSelectedFile(file)
-          }}
-        />
-        <div className="max-w-3/4 w-3/4 pl-2">
-          {selectedFile ? (
-            <FileViewer
-              filePath={selectedFile}
-              originalFile={outputWithoutAddon.files[selectedFile]}
-              modifiedFile={output.files[selectedFile]}
-            />
-          ) : null}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/lib/server-fns.ts

@@ -1,78 +0,0 @@
-import { createServerFn } from '@tanstack/react-start'
-import { readFileSync } from 'node:fs'
-import { basename, resolve } from 'node:path'
-
-import { getAllAddOns, createMemoryEnvironment } from '@tanstack/cta-engine'
-import { createAppOptionsFromPersisted } from '@tanstack/cta-custom-add-on'
-
-import { createApp } from '@tanstack/cta-engine'
-
-import type { AddOn, Mode, PersistedOptions } from '@tanstack/cta-engine'
-
-export const getAddons = createServerFn({
-  method: 'GET',
-})
-  .validator((data: unknown) => {
-    return data as { platform: string; mode: Mode }
-  })
-  .handler(({ data: { platform, mode } }) => {
-    return getAllAddOns(platform, mode)
-  })
-
-export const getAddonInfo = createServerFn({
-  method: 'GET',
-}).handler(async () => {
-  const addOnInfo = readFileSync(
-    resolve(process.env.PROJECT_PATH, 'add-on.json'),
-  )
-  return JSON.parse(addOnInfo.toString())
-})
-
-export const getOriginalOptions = createServerFn({
-  method: 'GET',
-}).handler(async () => {
-  const addOnInfo = readFileSync(resolve(process.env.PROJECT_PATH, '.cta.json'))
-  return JSON.parse(addOnInfo.toString()) as PersistedOptions
-})
-
-export const runCreateApp = createServerFn({
-  method: 'POST',
-})
-  .validator((data: unknown) => {
-    return data as { withAddOn: boolean; options: PersistedOptions }
-  })
-  .handler(
-    async ({
-      data: { withAddOn, options: persistedOptions },
-    }: {
-      data: { withAddOn: boolean; options: PersistedOptions }
-    }) => {
-      const { output, environment } = createMemoryEnvironment()
-      const options = await createAppOptionsFromPersisted(persistedOptions)
-      options.chosenAddOns = withAddOn
-        ? [...options.chosenAddOns, (await getAddonInfo()) as AddOn]
-        : [...options.chosenAddOns]
-      await createApp(
-        {
-          ...options,
-        },
-        {
-          silent: true,
-          environment,
-          cwd: process.env.PROJECT_PATH,
-        },
-      )
-
-      output.files = Object.keys(output.files).reduce<Record<string, string>>(
-        (acc, file) => {
-          if (basename(file) !== '.cta.json') {
-            acc[file] = output.files[file]
-          }
-          return acc
-        },
-        {},
-      )
-
-      return output
-    },
-  )

package/src/routes/api.demo-names.ts

@@ -1,11 +0,0 @@
-import { createAPIFileRoute } from '@tanstack/react-start/api'
-
-export const APIRoute = createAPIFileRoute('/api/demo-names')({
-  GET: async ({ request }) => {
-    return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-  },
-})

package/src/routes/demo.tanstack-query.tsx

@@ -1,28 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useQuery } from '@tanstack/react-query'
-
-export const Route = createFileRoute('/demo/tanstack-query')({
-  component: TanStackQueryDemo,
-})
-
-function TanStackQueryDemo() {
-  const { data } = useQuery({
-    queryKey: ['people'],
-    queryFn: () =>
-      fetch('https://swapi.dev/api/people')
-        .then((res) => res.json())
-        .then((d) => d.results as { name: string }[]),
-    initialData: [],
-  })
-
-  return (
-    <div className="p-4">
-      <h1 className="text-2xl mb-4">People list from Swapi</h1>
-      <ul>
-        {data.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    </div>
-  )
-}