@tanstack/cta-ui 0.10.0-alpha.18

package/src/routeTree.gen.ts

@@ -0,0 +1,111 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+import { Route as DemoTanstackQueryImport } from './routes/demo.tanstack-query'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const DemoTanstackQueryRoute = DemoTanstackQueryImport.update({
+  id: '/demo/tanstack-query',
+  path: '/demo/tanstack-query',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/demo/tanstack-query': {
+      id: '/demo/tanstack-query'
+      path: '/demo/tanstack-query'
+      fullPath: '/demo/tanstack-query'
+      preLoaderRoute: typeof DemoTanstackQueryImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/demo/tanstack-query'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/demo/tanstack-query'
+  id: '__root__' | '/' | '/demo/tanstack-query'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  DemoTanstackQueryRoute: DemoTanstackQueryRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/demo/tanstack-query"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/demo/tanstack-query": {
+      "filePath": "demo.tanstack-query.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

package/src/router.tsx

@@ -0,0 +1,32 @@
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'
+import { routerWithQueryClient } from '@tanstack/react-router-with-query'
+import * as TanstackQuery from './integrations/tanstack-query/root-provider'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+import './styles.css'
+
+// Create a new router instance
+export const createRouter = () => {
+  const router = routerWithQueryClient(
+    createTanstackRouter({
+      routeTree,
+      context: {
+        ...TanstackQuery.getContext(),
+      },
+      scrollRestoration: true,
+      defaultPreloadStaleTime: 0,
+    }),
+    TanstackQuery.getContext().queryClient,
+  )
+
+  return router
+}
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}

package/src/routes/__root.tsx

@@ -0,0 +1,57 @@
+import {
+  Outlet,
+  HeadContent,
+  Scripts,
+  createRootRouteWithContext,
+} from '@tanstack/react-router'
+
+import appCss from '../styles.css?url'
+
+import type { QueryClient } from '@tanstack/react-query'
+
+interface MyRouterContext {
+  queryClient: QueryClient
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Add-On Debugger',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+
+  component: () => (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  ),
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="dark">
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}

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

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

@@ -0,0 +1,28 @@
+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>
+  )
+}

package/src/routes/index.tsx

@@ -0,0 +1,222 @@
+import { useState, Fragment } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { Info } from 'lucide-react'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+
+import AppliedAddOn from '@/components/applied-add-on'
+import FileTree from '@/components/file-tree'
+import FileViewer from '@/components/file-viewer'
+
+import {
+  getAddons,
+  getAddonInfo,
+  getOriginalOptions,
+  runCreateApp,
+} from '@/lib/server-fns'
+import type { AddOn } from '@tanstack/cta-engine'
+
+export const Route = createFileRoute('/')({
+  component: App,
+  loader: async () => {
+    const originalOptions = await getOriginalOptions()
+    const [codeRouterAddons, fileRouterAddons] = await Promise.all([
+      getAddons({
+        data: { platform: 'react', mode: 'code-router' },
+      }),
+      getAddons({
+        data: { platform: 'react', mode: 'file-router' },
+      }),
+    ])
+    return {
+      addOns: {
+        'code-router': codeRouterAddons,
+        'file-router': fileRouterAddons,
+      },
+      projectPath: process.env.PROJECT_PATH!,
+      output: await runCreateApp({
+        data: { withAddOn: true, options: originalOptions },
+      }),
+      outputWithoutAddon: await runCreateApp({
+        data: { withAddOn: false, options: originalOptions },
+      }),
+      addOnInfo: (await getAddonInfo()) as AddOn,
+      originalOptions,
+    }
+  },
+})
+
+const CAPTIONS = {
+  dependencies: 'Dependencies',
+  devDependencies: 'Dev Dependencies',
+  scripts: 'Scripts',
+}
+
+function InfoViewer({ info }: { info: AddOn }) {
+  return (
+    <div className="text-lg">
+      <div className="grid grid-cols-[200px_1fr] gap-4 mb-4">
+        <div className="font-medium">Name</div>
+        <div className="font-bold">{info.name}</div>
+        <div className="font-medium">Description</div>
+        <div className="font-bold">{info.description}</div>
+        <div className="font-medium">Version</div>
+        <div className="font-bold">{info.version}</div>
+        <div className="font-medium">Author</div>
+        <div className="font-bold">{info.author}</div>
+        <div className="font-medium">License</div>
+        <div className="font-bold">{info.license}</div>
+        {(
+          [
+            'dependencies',
+            'devDependencies',
+            'scripts',
+          ] as (keyof AddOn['packageAdditions'])[]
+        )
+          .filter(
+            (key) =>
+              info.packageAdditions[key] &&
+              Object.entries(info.packageAdditions[key]).length > 0,
+          )
+          .map((key) => (
+            <Fragment key={key}>
+              <div className="font-medium">{CAPTIONS[key]}</div>
+              <Table>
+                {key !== 'scripts' && (
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-1/2">Package</TableHead>
+                      <TableHead className="w-1/2">Version</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                )}
+                <TableBody>
+                  {Object.entries(info.packageAdditions[key]).map(
+                    ([pkg, version]) => (
+                      <TableRow key={`${key}-${pkg}`}>
+                        <TableCell className="w-1/2">{pkg}</TableCell>
+                        <TableCell className="w-1/2">{version}</TableCell>
+                      </TableRow>
+                    ),
+                  )}
+                </TableBody>
+              </Table>
+            </Fragment>
+          ))}
+        {info.routes && (
+          <>
+            <div className="font-medium">Routes</div>
+            <div>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-1/2">URL</TableHead>
+                    <TableHead className="w-1/2">Name</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {info.routes.map(({ url, name }) => (
+                    <TableRow key={`${url}-${name}`}>
+                      <TableCell className="w-1/2">{url}</TableCell>
+                      <TableCell className="w-1/2">{name}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </>
+        )}
+        {info.commmand && (
+          <>
+            <div className="font-medium">Setup Command</div>
+            <div className="font-bold font-mono">{`${info.command.command} ${info.command.args.join(' ')}`}</div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function AddOnViewer({ addOnInfo }: { addOnInfo: AddOn }) {
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [showInfo, setShowInfo] = useState(false)
+
+  return (
+    <div className="flex flex-row">
+      <FileTree
+        prefix="./"
+        tree={addOnInfo.files || {}}
+        originalTree={{}}
+        onFileSelected={(file) => {
+          setSelectedFile(file)
+          setShowInfo(false)
+        }}
+        extraTreeItems={[
+          {
+            id: 'info',
+            name: 'Add-On Info',
+            icon: () => <Info className="w-4 h-4 mr-2" />,
+            onClick: () => {
+              setSelectedFile(null)
+              setShowInfo(true)
+            },
+          },
+        ]}
+      />
+      <div className="max-w-3/4 w-3/4 pl-2">
+        {showInfo && <InfoViewer info={addOnInfo as AddOn} />}
+        {selectedFile ? (
+          <FileViewer
+            filePath={selectedFile}
+            modifiedFile={addOnInfo?.files?.[selectedFile] || ''}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const {
+    projectPath,
+    output,
+    addOnInfo,
+    outputWithoutAddon,
+    originalOptions,
+    addOns,
+  } = Route.useLoaderData()
+
+  return (
+    <div className="p-5">
+      <Tabs defaultValue="add-on">
+        <TabsList className="grid grid-cols-2 w-[400px]">
+          <TabsTrigger value="add-on">Add-On</TabsTrigger>
+          <TabsTrigger value="applied">Applied</TabsTrigger>
+        </TabsList>
+        <TabsContent value="add-on">
+          <AddOnViewer addOnInfo={addOnInfo} />
+        </TabsContent>
+        <TabsContent value="applied">
+          <AppliedAddOn
+            projectPath={projectPath}
+            output={output}
+            addOnInfo={addOnInfo}
+            outputWithoutAddon={outputWithoutAddon}
+            originalOptions={
+              originalOptions as Required<typeof originalOptions>
+            }
+            addOns={addOns}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/src/ssr.tsx

@@ -0,0 +1,12 @@
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server'
+import { getRouterManifest } from '@tanstack/react-start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+  createRouter,
+  getRouterManifest,
+})(defaultStreamHandler)

package/src/styles.css

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "outDir": "./lib-dist",
+    "rootDir": "./lib",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "nodenext",
+    "declaration": true,
+    "declarationDir": "./lib-dist"
+  },
+  "include": ["./lib/*.ts"],
+  "exclude": ["node_modules", "dist", "lib-dist"]
+}