From d3fbb48472ab752f84ba6be73c1c8a019aacb3bc Mon Sep 17 00:00:00 2001 From: Will Chen Date: Thu, 5 Jun 2025 22:26:17 -0700 Subject: [PATCH] Copy app (#349) Fixes #12 --- e2e-tests/copy_app.spec.ts | 52 + .../helpers/generateAppFilesSnapshotData.ts | 129 + e2e-tests/helpers/test_helper.ts | 76 +- ...ontext_window.spec.ts_context-window-4.txt | 2 +- e2e-tests/snapshots/copy_app.spec.ts_app.txt | 5862 +++++++++++++++++ ...telemetry.spec.ts_telemetry---accept-2.txt | 2 +- .../telemetry.spec.ts_telemetry---later-2.txt | 2 +- ...telemetry.spec.ts_telemetry---reject-2.txt | 2 +- ...ts_v1 => version_integrity.spec.ts_v1.txt} | 0 ...ts_v2 => version_integrity.spec.ts_v2.txt} | 0 ...ts_v3 => version_integrity.spec.ts_v3.txt} | 0 src/hooks/useCheckName.ts | 18 + src/hooks/useDebounce.ts | 17 + src/ipc/handlers/app_handlers.ts | 90 +- src/ipc/ipc_client.ts | 5 + src/ipc/ipc_types.ts | 6 + src/pages/app-details.tsx | 187 +- src/preload.ts | 1 + 18 files changed, 6386 insertions(+), 65 deletions(-) create mode 100644 e2e-tests/copy_app.spec.ts create mode 100644 e2e-tests/helpers/generateAppFilesSnapshotData.ts create mode 100644 e2e-tests/snapshots/copy_app.spec.ts_app.txt rename e2e-tests/snapshots/{version_integrity.spec.ts_v1 => version_integrity.spec.ts_v1.txt} (100%) rename e2e-tests/snapshots/{version_integrity.spec.ts_v2 => version_integrity.spec.ts_v2.txt} (100%) rename e2e-tests/snapshots/{version_integrity.spec.ts_v3 => version_integrity.spec.ts_v3.txt} (100%) create mode 100644 src/hooks/useCheckName.ts create mode 100644 src/hooks/useDebounce.ts diff --git a/e2e-tests/copy_app.spec.ts b/e2e-tests/copy_app.spec.ts new file mode 100644 index 0000000..520c27e --- /dev/null +++ b/e2e-tests/copy_app.spec.ts @@ -0,0 +1,52 @@ +import { expect } from "@playwright/test"; +import { test, Timeout } from "./helpers/test_helper"; + +const tests = [ + { + testName: "with history", + newAppName: "copied-app-with-history", + buttonName: "Copy app with history", + expectedVersion: "Version 2", + }, + { + testName: "without history", + newAppName: "copied-app-without-history", + buttonName: "Copy app without history", + expectedVersion: "Version 1", + }, +]; + +for (const { testName, newAppName, buttonName, expectedVersion } of tests) { + test(`copy app ${testName}`, async ({ po }) => { + await po.setUp({ autoApprove: true }); + await po.sendPrompt("hi"); + await po.snapshotAppFiles({ name: "app" }); + + await po.getTitleBarAppNameButton().click(); + + // Open the dropdown menu + await po.clickAppDetailsMoreOptions(); + await po.clickAppDetailsCopyAppButton(); + + await po.page.getByLabel("New app name").fill(newAppName); + + // Click the "Copy app" button + await po.page.getByRole("button", { name: buttonName }).click(); + + // Expect to be on the new app's detail page + await expect( + po.page.getByRole("heading", { name: newAppName }), + ).toBeVisible({ + // Potentially takes a while for the copy to complete + timeout: Timeout.MEDIUM, + }); + + const currentAppName = await po.getCurrentAppName(); + expect(currentAppName).toBe(newAppName); + + await po.clickOpenInChatButton(); + + await expect(po.page.getByText(expectedVersion)).toBeVisible(); + await po.snapshotAppFiles({ name: "app" }); + }); +} diff --git a/e2e-tests/helpers/generateAppFilesSnapshotData.ts b/e2e-tests/helpers/generateAppFilesSnapshotData.ts new file mode 100644 index 0000000..0a0e4d4 --- /dev/null +++ b/e2e-tests/helpers/generateAppFilesSnapshotData.ts @@ -0,0 +1,129 @@ +import fs from "fs"; +import path from "path"; +import crypto from "crypto"; + +export interface FileSnapshotData { + relativePath: string; + content: string; +} + +const binaryExtensions = new Set([ + ".png", + ".jpg", + ".jpeg", + ".gif", + ".webp", + ".tiff", + ".psd", + ".raw", + ".bmp", + ".heif", + ".ico", + ".pdf", + ".eot", + ".otf", + ".ttf", + ".woff", + ".woff2", + ".zip", + ".tar", + ".gz", + ".7z", + ".rar", + ".mov", + ".mp4", + ".m4v", + ".mkv", + ".webm", + ".flv", + ".avi", + ".wmv", + ".mp3", + ".wav", + ".ogg", + ".flac", + ".exe", + ".dll", + ".so", + ".a", + ".lib", + ".o", + ".db", + ".sqlite3", + ".wasm", +]); + +function isBinaryFile(filePath: string): boolean { + return binaryExtensions.has(path.extname(filePath).toLowerCase()); +} + +export function generateAppFilesSnapshotData( + currentPath: string, + basePath: string, +): FileSnapshotData[] { + const ignorePatterns = [ + ".git", + "node_modules", + // Avoid snapshotting lock files because they are getting generated + // automatically and cause noise, and not super important anyways. + "package-lock.json", + "pnpm-lock.yaml", + ]; + + const entries = fs.readdirSync(currentPath, { withFileTypes: true }); + let files: FileSnapshotData[] = []; + + // Sort entries for deterministic order + entries.sort((a, b) => a.name.localeCompare(b.name)); + + for (const entry of entries) { + const entryPath = path.join(currentPath, entry.name); + if (ignorePatterns.includes(entry.name)) { + continue; + } + + if (entry.isDirectory()) { + files = files.concat(generateAppFilesSnapshotData(entryPath, basePath)); + } else if (entry.isFile()) { + const relativePath = path + .relative(basePath, entryPath) + // Normalize path separators to always use / + // to prevent diffs on Windows. + .replace(/\\/g, "/"); + try { + if (isBinaryFile(entryPath)) { + const fileBuffer = fs.readFileSync(entryPath); + const hash = crypto + .createHash("sha256") + .update(fileBuffer) + .digest("hex"); + files.push({ + relativePath, + content: `[binary hash="${hash}"]`, + }); + continue; + } + + let content = fs + .readFileSync(entryPath, "utf-8") + // Normalize line endings to always use \n + .replace(/\r\n/g, "\n"); + if (entry.name === "package.json") { + const packageJson = JSON.parse(content); + packageJson.packageManager = ""; + content = JSON.stringify(packageJson, null, 2); + } + files.push({ relativePath, content }); + } catch (error) { + // Could be a binary file or permission issue, log and add a placeholder + const e = error as Error; + console.warn(`Could not read file ${entryPath}: ${e.message}`); + files.push({ + relativePath, + content: `[Error reading file: ${e.message}]`, + }); + } + } + } + return files; +} diff --git a/e2e-tests/helpers/test_helper.ts b/e2e-tests/helpers/test_helper.ts index b53fb6b..8d4e5c6 100644 --- a/e2e-tests/helpers/test_helper.ts +++ b/e2e-tests/helpers/test_helper.ts @@ -5,6 +5,7 @@ import fs from "fs"; import path from "path"; import os from "os"; import { execSync } from "child_process"; +import { generateAppFilesSnapshotData } from "./generateAppFilesSnapshotData"; const showDebugLogs = process.env.DEBUG_LOGS === "true"; @@ -80,14 +81,7 @@ export class PageObject { } await expect(() => { - const filesData = generateAppFilesSnapshotData(appPath, appPath, [ - ".git", - "node_modules", - // Avoid snapshotting lock files because they are getting generated - // automatically and cause noise, and not super important anyways. - "package-lock.json", - "pnpm-lock.yaml", - ]); + const filesData = generateAppFilesSnapshotData(appPath, appPath); // Sort by relative path to ensure deterministic output filesData.sort((a, b) => a.relativePath.localeCompare(b.relativePath)); @@ -97,7 +91,7 @@ export class PageObject { .join("\n\n"); if (name) { - expect(snapshotContent).toMatchSnapshot(name); + expect(snapshotContent).toMatchSnapshot(name + ".txt"); } else { expect(snapshotContent).toMatchSnapshot(); } @@ -378,6 +372,10 @@ export class PageObject { await this.page.getByTestId(`app-list-item-${appName}`).click(); } + async clickOpenInChatButton() { + await this.page.getByRole("button", { name: "Open in Chat" }).click(); + } + async clickAppDetailsRenameAppButton() { await this.page.getByTestId("app-details-rename-app-button").click(); } @@ -386,6 +384,10 @@ export class PageObject { await this.page.getByTestId("app-details-more-options-button").click(); } + async clickAppDetailsCopyAppButton() { + await this.page.getByRole("button", { name: "Copy app" }).click(); + } + async clickConnectSupabaseButton() { await this.page.getByTestId("connect-supabase-button").click(); } @@ -406,10 +408,13 @@ export class PageObject { const settings = path.join(this.userDataDir, "user-settings.json"); const settingsContent = fs.readFileSync(settings, "utf-8"); // Sanitize the "telemetryUserId" since it's a UUID - const sanitizedSettingsContent = settingsContent.replace( - /"telemetryUserId": "[^"]*"/g, - '"telemetryUserId": "[UUID]"', - ); + const sanitizedSettingsContent = settingsContent + .replace(/"telemetryUserId": "[^"]*"/g, '"telemetryUserId": "[UUID]"') + // Don't snapshot this otherwise it'll diff with every release. + .replace( + /"lastShownReleaseNotesVersion": "[^"]*"/g, + '"lastShownReleaseNotesVersion": "[scrubbed]"', + ); expect(sanitizedSettingsContent).toMatchSnapshot(); } @@ -652,48 +657,3 @@ function prettifyDump( }) .join("\n\n"); } - -interface FileSnapshotData { - relativePath: string; - content: string; -} - -function generateAppFilesSnapshotData( - currentPath: string, - basePath: string, - ignorePatterns: string[], -): FileSnapshotData[] { - const entries = fs.readdirSync(currentPath, { withFileTypes: true }); - let files: FileSnapshotData[] = []; - - // Sort entries for deterministic order - entries.sort((a, b) => a.name.localeCompare(b.name)); - - for (const entry of entries) { - const entryPath = path.join(currentPath, entry.name); - if (ignorePatterns.includes(entry.name)) { - continue; - } - - if (entry.isDirectory()) { - files = files.concat( - generateAppFilesSnapshotData(entryPath, basePath, ignorePatterns), - ); - } else if (entry.isFile()) { - const relativePath = path.relative(basePath, entryPath); - try { - const content = fs.readFileSync(entryPath, "utf-8"); - files.push({ relativePath, content }); - } catch (error) { - // Could be a binary file or permission issue, log and add a placeholder - const e = error as Error; - console.warn(`Could not read file ${entryPath}: ${e.message}`); - files.push({ - relativePath, - content: `[Error reading file: ${e.message}]`, - }); - } - } - } - return files; -} diff --git a/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt b/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt index f7ccfee..32a2515 100644 --- a/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt +++ b/e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt @@ -9,7 +9,7 @@ "telemetryUserId": "[UUID]", "hasRunBefore": true, "experiments": {}, - "lastShownReleaseNotesVersion": "0.8.0", + "lastShownReleaseNotesVersion": "[scrubbed]", "maxChatTurnsInContext": 5, "enableProLazyEditsMode": true, "enableProSmartFilesContextMode": true, diff --git a/e2e-tests/snapshots/copy_app.spec.ts_app.txt b/e2e-tests/snapshots/copy_app.spec.ts_app.txt new file mode 100644 index 0000000..1efb2af --- /dev/null +++ b/e2e-tests/snapshots/copy_app.spec.ts_app.txt @@ -0,0 +1,5862 @@ +=== .gitignore === +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + + +=== AI_RULES.md === +# Tech Stack + +- You are building a React application. +- Use TypeScript. +- Use React Router. KEEP the routes in src/App.tsx +- Always put source code in the src folder. +- Put pages into src/pages/ +- Put components into src/components/ +- The main page (default page) is src/pages/Index.tsx +- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components! +- ALWAYS try to use the shadcn/ui library. +- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects. + +Available packages and libraries: + +- The lucide-react package is installed for icons. +- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again. +- You have ALL the necessary Radix UI components installed. +- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them. + + +=== components.json === +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/index.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} + + +=== eslint.config.js === +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import tseslint from "typescript-eslint"; + +export default tseslint.config( + { ignores: ["dist"] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ["**/*.{ts,tsx}"], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + "react-hooks": reactHooks, + "react-refresh": reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + "react-refresh/only-export-components": [ + "warn", + { allowConstantExport: true }, + ], + "@typescript-eslint/no-unused-vars": "off", + }, + }, +); + + +=== file1.txt === +A file (2) + +=== index.html === + + + + + + dyad-generated-app + + + +
+ + + + + +=== package.json === +{ + "name": "vite_react_shadcn_ts", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "build:dev": "vite build --mode development", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@hookform/resolvers": "^3.9.0", + "@radix-ui/react-accordion": "^1.2.0", + "@radix-ui/react-alert-dialog": "^1.1.1", + "@radix-ui/react-aspect-ratio": "^1.1.0", + "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-collapsible": "^1.1.0", + "@radix-ui/react-context-menu": "^2.2.1", + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-hover-card": "^1.1.1", + "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-menubar": "^1.1.1", + "@radix-ui/react-navigation-menu": "^1.2.0", + "@radix-ui/react-popover": "^1.1.1", + "@radix-ui/react-progress": "^1.1.0", + "@radix-ui/react-radio-group": "^1.2.0", + "@radix-ui/react-scroll-area": "^1.1.0", + "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slider": "^1.2.0", + "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-switch": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.0", + "@radix-ui/react-toast": "^1.2.1", + "@radix-ui/react-toggle": "^1.1.0", + "@radix-ui/react-toggle-group": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.4", + "@tanstack/react-query": "^5.56.2", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", + "embla-carousel-react": "^8.3.0", + "input-otp": "^1.2.4", + "lucide-react": "^0.462.0", + "next-themes": "^0.3.0", + "react": "^18.3.1", + "react-day-picker": "^8.10.1", + "react-dom": "^18.3.1", + "react-hook-form": "^7.53.0", + "react-resizable-panels": "^2.1.3", + "react-router-dom": "^6.26.2", + "recharts": "^2.12.7", + "sonner": "^1.5.0", + "tailwind-merge": "^2.5.2", + "tailwindcss-animate": "^1.0.7", + "vaul": "^0.9.3", + "zod": "^3.23.8" + }, + "devDependencies": { + "@eslint/js": "^9.9.0", + "@tailwindcss/typography": "^0.5.15", + "@types/node": "^22.5.5", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "@vitejs/plugin-react-swc": "^3.9.0", + "autoprefixer": "^10.4.20", + "eslint": "^9.9.0", + "eslint-plugin-react-hooks": "^5.1.0-rc.0", + "eslint-plugin-react-refresh": "^0.4.9", + "globals": "^15.9.0", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.11", + "typescript": "^5.5.3", + "typescript-eslint": "^8.0.1", + "vite": "^6.3.4" + }, + "packageManager": "" +} + +=== postcss.config.js === +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; + + +=== public/favicon.ico === +[binary hash="a75a75f315bbed01f033fd813195a1728acfbad637888935298604e6467d34ab"] + +=== public/placeholder.svg === + + +=== public/robots.txt === +User-agent: Googlebot +Allow: / + +User-agent: Bingbot +Allow: / + +User-agent: Twitterbot +Allow: / + +User-agent: facebookexternalhit +Allow: / + +User-agent: * +Allow: / + + +=== README.md === +# Welcome to your Dyad app + + +=== src/App.css === +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} + + +=== src/App.tsx === +import { Toaster } from "@/components/ui/toaster"; +import { Toaster as Sonner } from "@/components/ui/sonner"; +import { TooltipProvider } from "@/components/ui/tooltip"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import Index from "./pages/Index"; +import NotFound from "./pages/NotFound"; + +const queryClient = new QueryClient(); + +const App = () => ( + + + + + + + } /> + {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} + } /> + + + + +); + +export default App; + + +=== src/components/made-with-dyad.tsx === +export const MadeWithDyad = () => { + return ( +
+ + Made with Dyad + +
+ ); +}; + + +=== src/components/ui/accordion.tsx === +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDown } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = "AccordionItem"; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className, + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; + + +=== src/components/ui/alert-dialog.tsx === +import * as React from "react"; +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; + +import { cn } from "@/lib/utils"; +import { buttonVariants } from "@/components/ui/button"; + +const AlertDialog = AlertDialogPrimitive.Root; + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogHeader.displayName = "AlertDialogHeader"; + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogFooter.displayName = "AlertDialogFooter"; + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName; + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +}; + + +=== src/components/ui/alert.tsx === +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; + +import { cn } from "@/lib/utils"; + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)); +Alert.displayName = "Alert"; + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertTitle, AlertDescription }; + + +=== src/components/ui/aspect-ratio.tsx === +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"; + +const AspectRatio = AspectRatioPrimitive.Root; + +export { AspectRatio }; + + +=== src/components/ui/avatar.tsx === +import * as React from "react"; +import * as AvatarPrimitive from "@radix-ui/react-avatar"; + +import { cn } from "@/lib/utils"; + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarImage, AvatarFallback }; + + +=== src/components/ui/badge.tsx === +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; + +import { cn } from "@/lib/utils"; + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants }; + + +=== src/components/ui/breadcrumb.tsx === +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { ChevronRight, MoreHorizontal } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode; + } +>(({ ...props }, ref) =>