tvi-cli 0.1.4

package/templates/frontend/native/unistyles/metro.config.js

@@ -0,0 +1,20 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+const workspaceRoot = path.resolve(__dirname, "../..");
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

package/templates/frontend/native/unistyles/package.json.hbs

@@ -0,0 +1,50 @@
+{
+  "name": "native",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "expo start --clear",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.0",
+    "@react-navigation/bottom-tabs": "^7.0.5",
+    "@react-navigation/drawer": "^7.0.0",
+    "@react-navigation/native": "^7.0.3",
+    {{#if (includes examples "ai")}}
+    "@stardazed/streams-text-encoding": "^1.0.2",
+    "@ungap/structured-clone": "^1.3.0",
+    {{/if}}
+    "@tanstack/react-form": "^1.0.5",
+    "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
+    "expo": "^53.0.8",
+    "expo-constants": "~17.1.4",
+    "expo-linking": "~7.1.4",
+    "expo-router": "~5.0.3",
+    "expo-secure-store": "~14.2.3",
+    "expo-status-bar": "~2.2.3",
+    "expo-system-ui": "~5.0.6",
+    "expo-dev-client": "~5.1.8",
+    "expo-web-browser": "~14.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-edge-to-edge": "1.6.0",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-nitro-modules": "0.25.2",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.10.0",
+    "react-native-unistyles": "^3.0.0-rc.4",
+    "react-native-web": "^0.20.0"
+  },
+  "devDependencies": {
+    "ajv": "^8.12.0",
+    "@babel/core": "^7.20.0",
+    "@types/react": "~19.0.10",
+    "typescript": "~5.8.3"
+  },
+  "private": true
+}

package/templates/frontend/native/unistyles/theme.ts

@@ -0,0 +1,98 @@
+const sharedColors = {
+  success: "#22C55E",
+  destructive: "#EF4444",
+  warning: "#F59E0B",
+  info: "#3B82F6",
+} as const;
+
+export const lightTheme = {
+  colors: {
+    ...sharedColors,
+    typography: "hsl(222.2 84% 4.9%)",
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(222.2 84% 4.9%)",
+    card: "hsl(0 0% 100%)",
+    cardForeground: "hsl(222.2 84% 4.9%)",
+    primary: "hsl(221.2 83.2% 53.3%)",
+    primaryForeground: "hsl(210 40% 98%)",
+    secondary: "hsl(210 40% 96%)",
+    secondaryForeground: "hsl(222.2 84% 4.9%)",
+    muted: "hsl(210 40% 96%)",
+    mutedForeground: "hsl(215.4 16.3% 46.9%)",
+    accent: "hsl(210 40% 96%)",
+    accentForeground: "hsl(222.2 84% 4.9%)",
+    border: "hsl(214.3 31.8% 91.4%)",
+    input: "hsl(214.3 31.8% 91.4%)",
+    ring: "hsl(221.2 83.2% 53.3%)",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+  borderRadius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+  },
+} as const;
+
+export const darkTheme = {
+  colors: {
+    ...sharedColors,
+    typography: "hsl(210 40% 98%)",
+    background: "hsl(222.2 84% 4.9%)",
+    foreground: "hsl(210 40% 98%)",
+    card: "hsl(222.2 84% 4.9%)",
+    cardForeground: "hsl(210 40% 98%)",
+    primary: "hsl(217.2 91.2% 59.8%)",
+    primaryForeground: "hsl(222.2 84% 4.9%)",
+    secondary: "hsl(217.2 32.6% 17.5%)",
+    secondaryForeground: "hsl(210 40% 98%)",
+    muted: "hsl(217.2 32.6% 17.5%)",
+    mutedForeground: "hsl(215 20.2% 65.1%)",
+    accent: "hsl(217.2 32.6% 17.5%)",
+    accentForeground: "hsl(210 40% 98%)",
+    border: "hsl(217.2 32.6% 17.5%)",
+    input: "hsl(217.2 32.6% 17.5%)",
+    ring: "hsl(224.3 76.3% 94.1%)",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+  borderRadius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+  },
+} as const;

package/templates/frontend/native/unistyles/tsconfig.json.hbs

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"],
+  {{#unless (or (eq backend "convex") (eq backend "none"))}}
+  "references": [{
+    "path": "../server"
+  }]
+  {{/unless}}
+}

package/templates/frontend/native/unistyles/unistyles.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native-unistyles";
+
+import { breakpoints } from "./breakpoints";
+import { darkTheme, lightTheme } from "./theme";
+
+type AppBreakpoints = typeof breakpoints;
+
+type AppThemes = {
+  light: typeof lightTheme;
+  dark: typeof darkTheme;
+};
+
+declare module "react-native-unistyles" {
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+  export interface UnistylesThemes extends AppThemes {}
+}
+
+StyleSheet.configure({
+  breakpoints,
+  themes: {
+    light: lightTheme,
+    dark: darkTheme,
+  },
+  settings: {
+    adaptiveThemes: true,
+  },
+});

package/templates/frontend/nuxt/_gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

package/templates/frontend/nuxt/app/app.config.ts

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  // https://ui.nuxt.com/getting-started/theme#design-system
+  ui: {
+    colors: {
+      primary: 'emerald',
+      neutral: 'slate',
+    },
+    button: {
+      defaultVariants: {
+        // Set default button color to neutral
+        // color: 'neutral'
+      }
+    }
+  }
+})

package/templates/frontend/nuxt/app/app.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+</script>
+
+<template>
+    <NuxtLoadingIndicator />
+    <UApp>
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
+    </UApp>
+    <VueQueryDevtools />
+</template>

package/templates/frontend/nuxt/app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

package/templates/frontend/nuxt/app/components/Header.vue.hbs

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { USeparator } from '#components';
+import ModeToggle from './ModeToggle.vue'
+{{#if auth}}
+import UserMenu from './UserMenu.vue'
+{{/if}}
+
+const links = [
+    { to: "/", label: "Home" },
+    {{#if auth}}
+    { to: "/dashboard", label: "Dashboard" },
+    {{/if}}
+    {{#if (includes examples "todo")}}
+    { to: "/todos", label: "Todos" },
+    {{/if}}
+    {{#if (includes examples "ai")}}
+    { to: "/ai", label: "AI Chat" },
+    {{/if}}
+];
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-row items-center justify-between px-2 py-1">
+      <nav class="flex gap-4 text-lg">
+        <NuxtLink
+          v-for="link in links"
+          :key="link.to"
+          :to="link.to"
+          class="text-foreground hover:text-primary"
+          active-class="text-primary font-semibold"
+        >
+          \{{ link.label }}
+        </NuxtLink>
+      </nav>
+      <div class="flex items-center gap-2">
+        <ModeToggle />
+        {{#if auth}}
+        <UserMenu />
+        {{/if}}
+      </div>
+    </div>
+    <USeparator />
+  </div>
+</template>

package/templates/frontend/nuxt/app/components/Loader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex h-full items-center justify-center pt-8">
+    <UIcon name="i-lucide-loader-2" class="animate-spin text-2xl" />
+  </div>
+</template>

package/templates/frontend/nuxt/app/components/ModeToggle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set (value) {
+    colorMode.preference = value ? 'dark' : 'light'
+  }
+})
+</script>
+
+<template>
+  <div class="flex items-center">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="isDark ? 'i-lucide-moon' : ''"
+      :unchecked-icon="!isDark ? 'i-lucide-sun' : ''"
+      class="mr-2"
+    />
+  </div>
+</template>

package/templates/frontend/nuxt/app/layouts/default.vue.hbs

@@ -0,0 +1,11 @@
+<script setup>
+</script>
+
+<template>
+    <div class="grid grid-rows-[auto_1fr] h-full">
+        <Header />
+        <main class="overflow-y-auto">
+            <slot />
+        </main>
+    </div>
+</template>

package/templates/frontend/nuxt/app/pages/index.vue.hbs

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+{{#unless (eq api "none")}}
+const { $orpc } = useNuxtApp()
+import { useQuery } from '@tanstack/vue-query'
+{{/unless}}
+
+const TITLE_TEXT = `
+ TVI TypeScript Initializer
+ A CLI tool to quickly scaffold TypeScript projects with popular frameworks and libraries.
+ `;
+
+{{#unless (eq api "none")}}
+const healthCheck = useQuery($orpc.healthCheck.queryOptions())
+{{/unless}}
+</script>
+
+<template>
+  <div class="container mx-auto max-w-3xl px-4 py-2">
+    <pre class="overflow-x-auto font-mono text-sm whitespace-pre-wrap">\{{ TITLE_TEXT }}</pre>
+    <div class="grid gap-6 mt-4">
+      {{#unless (eq api "none")}}
+      <section class="rounded-lg border p-4">
+        <h2 class="mb-2 font-medium">API Status</h2>
+        <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2">
+              <div
+                class="w-2 h-2 rounded-full"
+                :class="{
+                  'bg-yellow-500 animate-pulse': healthCheck.status.value === 'pending',
+                  'bg-green-500': healthCheck.status.value === 'success',
+                  'bg-red-500': healthCheck.status.value === 'error',
+                  'bg-gray-400': healthCheck.status.value !== 'pending' &&
+                                  healthCheck.status.value !== 'success' &&
+                                  healthCheck.status.value !== 'error'
+                }"
+              ></div>
+              <span class="text-sm text-muted-foreground">
+                <template v-if="healthCheck.status.value === 'pending'">
+                  Checking...
+                </template>
+                <template v-else-if="healthCheck.status.value === 'success'">
+                  Connected (\{{ healthCheck.data.value }})
+                </template>
+                <template v-else-if="healthCheck.status.value === 'error'">
+                  Error: \{{ healthCheck.error.value?.message || 'Failed to connect' }}
+                </template>
+                 <template v-else>
+                  Idle
+                </template>
+              </span>
+            </div>
+          </div>
+      </section>
+      {{/unless}}
+    </div>
+  </div>
+</template>

package/templates/frontend/nuxt/app/plugins/vue-query.ts.hbs

@@ -0,0 +1,44 @@
+import type {
+  DehydratedState,
+  VueQueryPluginOptions,
+} from '@tanstack/vue-query'
+import {
+  dehydrate,
+  hydrate,
+  QueryCache,
+  QueryClient,
+  VueQueryPlugin,
+} from '@tanstack/vue-query'
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+  const toast = useToast()
+
+  const queryClient = new QueryClient({
+    queryCache: new QueryCache({
+      onError: (error) => {
+        console.log(error)
+        toast.add({
+          title: 'Error',
+          description: error?.message || 'An unexpected error occurred.',
+        })
+      },
+    }),
+  })
+  const options: VueQueryPluginOptions = { queryClient }
+
+  nuxt.vueApp.use(VueQueryPlugin, options)
+
+  if (import.meta.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient)
+    })
+  }
+
+  if (import.meta.client) {
+    nuxt.hooks.hook('app:created', () => {
+      hydrate(queryClient, vueQueryState.value)
+    })
+  }
+})

package/templates/frontend/nuxt/nuxt.config.ts.hbs

@@ -0,0 +1,19 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  future: {
+    compatibilityVersion: 4
+  },
+  devtools: { enabled: true },
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
+  devServer: {
+    port: 3001
+  },
+  ssr: false,
+  runtimeConfig: {
+    public: {
+      serverURL: process.env.NUXT_PUBLIC_SERVER_URL,
+    }
+  }
+})

package/templates/frontend/nuxt/package.json.hbs

@@ -0,0 +1,25 @@
+{
+  "name": "web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/ui": "3.0.2",
+    "@tanstack/vue-query": "^5.74.5",
+    "nuxt": "^3.16.2",
+    "typescript": "^5.6.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "zod": "^3.25.16"
+  },
+  "devDependencies": {
+    "@tanstack/vue-query-devtools": "^5.74.5",
+    "@iconify-json/lucide": "^1.2.38"
+  }
+}

package/templates/frontend/nuxt/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

package/templates/frontend/nuxt/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/templates/frontend/nuxt/tsconfig.json.hbs

@@ -0,0 +1,9 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  {{#unless (or (eq backend "convex") (eq backend "none"))}}
+  "references": [{
+    "path": "../server"
+  }]
+  {{/unless}}
+}

package/templates/frontend/react/next/next-env.d.ts.hbs

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/frontend/react/next/next.config.ts.hbs

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/frontend/react/next/package.json.hbs

@@ -0,0 +1,34 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port=3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "radix-ui": "^1.4.2",
+    "@tanstack/react-form": "^1.12.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.487.0",
+    "next": "15.3.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.5",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.4",
+    "zod": "^3.25.67"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5"
+  }
+}

package/templates/frontend/react/next/postcss.config.mjs.hbs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/templates/frontend/react/next/src/app/layout.tsx.hbs

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../index.css";
+import Providers from "@/components/providers";
+import Header from "@/components/header";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "{{projectName}}",
+  description: "{{projectName}}",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Providers>
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            {children}
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}