From b8eba81ce6d5c7afbb3a7e3a3e6037f8cf2eb077 Mon Sep 17 00:00:00 2001 From: Konstantin Wohlwend Date: Fri, 24 Oct 2025 20:05:32 -0700 Subject: [PATCH 1/7] Add React 18 example --- examples/lovable-react-18-example/.gitignore | 24 + examples/lovable-react-18-example/README.md | 73 + .../lovable-react-18-example/components.json | 20 + .../lovable-react-18-example/eslint.config.js | 26 + examples/lovable-react-18-example/index.html | 24 + .../lovable-react-18-example/package.json | 84 + .../postcss.config.js | 6 + .../public/favicon.ico | Bin 0 -> 7645 bytes .../public/placeholder.svg | 1 + .../public/robots.txt | 14 + examples/lovable-react-18-example/src/App.css | 42 + examples/lovable-react-18-example/src/App.tsx | 27 + .../src/components/ui/accordion.tsx | 52 + .../src/components/ui/alert-dialog.tsx | 104 + .../src/components/ui/alert.tsx | 43 + .../src/components/ui/aspect-ratio.tsx | 5 + .../src/components/ui/avatar.tsx | 38 + .../src/components/ui/badge.tsx | 29 + .../src/components/ui/breadcrumb.tsx | 90 + .../src/components/ui/button.tsx | 48 + .../src/components/ui/calendar.tsx | 54 + .../src/components/ui/card.tsx | 43 + .../src/components/ui/carousel.tsx | 224 ++ .../src/components/ui/chart.tsx | 303 +++ .../src/components/ui/checkbox.tsx | 26 + .../src/components/ui/collapsible.tsx | 9 + .../src/components/ui/command.tsx | 132 + .../src/components/ui/context-menu.tsx | 178 ++ .../src/components/ui/dialog.tsx | 95 + .../src/components/ui/drawer.tsx | 87 + .../src/components/ui/dropdown-menu.tsx | 179 ++ .../src/components/ui/form.tsx | 129 + .../src/components/ui/hover-card.tsx | 27 + .../src/components/ui/input-otp.tsx | 61 + .../src/components/ui/input.tsx | 22 + .../src/components/ui/label.tsx | 17 + .../src/components/ui/menubar.tsx | 207 ++ .../src/components/ui/navigation-menu.tsx | 120 + .../src/components/ui/pagination.tsx | 81 + .../src/components/ui/popover.tsx | 29 + .../src/components/ui/progress.tsx | 23 + .../src/components/ui/radio-group.tsx | 36 + .../src/components/ui/resizable.tsx | 37 + .../src/components/ui/scroll-area.tsx | 38 + .../src/components/ui/select.tsx | 143 ++ .../src/components/ui/separator.tsx | 20 + .../src/components/ui/sheet.tsx | 107 + .../src/components/ui/sidebar.tsx | 637 +++++ .../src/components/ui/skeleton.tsx | 7 + .../src/components/ui/slider.tsx | 23 + .../src/components/ui/sonner.tsx | 27 + .../src/components/ui/switch.tsx | 27 + .../src/components/ui/table.tsx | 72 + .../src/components/ui/tabs.tsx | 53 + .../src/components/ui/textarea.tsx | 21 + .../src/components/ui/toast.tsx | 111 + .../src/components/ui/toaster.tsx | 24 + .../src/components/ui/toggle-group.tsx | 49 + .../src/components/ui/toggle.tsx | 37 + .../src/components/ui/tooltip.tsx | 28 + .../src/components/ui/use-toast.ts | 3 + .../src/hooks/use-mobile.tsx | 19 + .../src/hooks/use-toast.ts | 186 ++ .../lovable-react-18-example/src/index.css | 99 + .../lovable-react-18-example/src/lib/utils.ts | 6 + .../lovable-react-18-example/src/main.tsx | 5 + .../src/pages/Index.tsx | 122 + .../src/pages/NotFound.tsx | 24 + .../src/vite-env.d.ts | 1 + .../tailwind.config.ts | 91 + .../tsconfig.app.json | 30 + .../lovable-react-18-example/tsconfig.json | 16 + .../tsconfig.node.json | 22 + .../lovable-react-18-example/vite.config.ts | 18 + pnpm-lock.yaml | 2192 +++++++++++++++-- 75 files changed, 6953 insertions(+), 174 deletions(-) create mode 100644 examples/lovable-react-18-example/.gitignore create mode 100644 examples/lovable-react-18-example/README.md create mode 100644 examples/lovable-react-18-example/components.json create mode 100644 examples/lovable-react-18-example/eslint.config.js create mode 100644 examples/lovable-react-18-example/index.html create mode 100644 examples/lovable-react-18-example/package.json create mode 100644 examples/lovable-react-18-example/postcss.config.js create mode 100644 examples/lovable-react-18-example/public/favicon.ico create mode 100644 examples/lovable-react-18-example/public/placeholder.svg create mode 100644 examples/lovable-react-18-example/public/robots.txt create mode 100644 examples/lovable-react-18-example/src/App.css create mode 100644 examples/lovable-react-18-example/src/App.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/accordion.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/alert-dialog.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/alert.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/aspect-ratio.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/avatar.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/badge.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/breadcrumb.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/button.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/calendar.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/card.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/carousel.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/chart.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/checkbox.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/collapsible.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/command.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/context-menu.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/dialog.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/drawer.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/dropdown-menu.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/form.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/hover-card.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/input-otp.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/input.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/label.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/menubar.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/navigation-menu.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/pagination.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/popover.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/progress.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/radio-group.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/resizable.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/scroll-area.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/select.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/separator.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/sheet.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/sidebar.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/skeleton.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/slider.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/sonner.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/switch.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/table.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/tabs.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/textarea.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/toast.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/toaster.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/toggle-group.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/toggle.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/tooltip.tsx create mode 100644 examples/lovable-react-18-example/src/components/ui/use-toast.ts create mode 100644 examples/lovable-react-18-example/src/hooks/use-mobile.tsx create mode 100644 examples/lovable-react-18-example/src/hooks/use-toast.ts create mode 100644 examples/lovable-react-18-example/src/index.css create mode 100644 examples/lovable-react-18-example/src/lib/utils.ts create mode 100644 examples/lovable-react-18-example/src/main.tsx create mode 100644 examples/lovable-react-18-example/src/pages/Index.tsx create mode 100644 examples/lovable-react-18-example/src/pages/NotFound.tsx create mode 100644 examples/lovable-react-18-example/src/vite-env.d.ts create mode 100644 examples/lovable-react-18-example/tailwind.config.ts create mode 100644 examples/lovable-react-18-example/tsconfig.app.json create mode 100644 examples/lovable-react-18-example/tsconfig.json create mode 100644 examples/lovable-react-18-example/tsconfig.node.json create mode 100644 examples/lovable-react-18-example/vite.config.ts diff --git a/examples/lovable-react-18-example/.gitignore b/examples/lovable-react-18-example/.gitignore new file mode 100644 index 0000000000..a547bf36d8 --- /dev/null +++ b/examples/lovable-react-18-example/.gitignore @@ -0,0 +1,24 @@ +# 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? diff --git a/examples/lovable-react-18-example/README.md b/examples/lovable-react-18-example/README.md new file mode 100644 index 0000000000..a03c412100 --- /dev/null +++ b/examples/lovable-react-18-example/README.md @@ -0,0 +1,73 @@ +# Welcome to your Lovable project + +## Project info + +**URL**: https://lovable.dev/projects/216a06f3-619b-4a7a-848e-54b52396418a + +## How can I edit this code? + +There are several ways of editing your application. + +**Use Lovable** + +Simply visit the [Lovable Project](https://lovable.dev/projects/216a06f3-619b-4a7a-848e-54b52396418a) and start prompting. + +Changes made via Lovable will be committed automatically to this repo. + +**Use your preferred IDE** + +If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable. + +The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating) + +Follow these steps: + +```sh +# Step 1: Clone the repository using the project's Git URL. +git clone + +# Step 2: Navigate to the project directory. +cd + +# Step 3: Install the necessary dependencies. +npm i + +# Step 4: Start the development server with auto-reloading and an instant preview. +npm run dev +``` + +**Edit a file directly in GitHub** + +- Navigate to the desired file(s). +- Click the "Edit" button (pencil icon) at the top right of the file view. +- Make your changes and commit the changes. + +**Use GitHub Codespaces** + +- Navigate to the main page of your repository. +- Click on the "Code" button (green button) near the top right. +- Select the "Codespaces" tab. +- Click on "New codespace" to launch a new Codespace environment. +- Edit files directly within the Codespace and commit and push your changes once you're done. + +## What technologies are used for this project? + +This project is built with: + +- Vite +- TypeScript +- React +- shadcn-ui +- Tailwind CSS + +## How can I deploy this project? + +Simply open [Lovable](https://lovable.dev/projects/216a06f3-619b-4a7a-848e-54b52396418a) and click on Share -> Publish. + +## Can I connect a custom domain to my Lovable project? + +Yes, you can! + +To connect a domain, navigate to Project > Settings > Domains and click Connect Domain. + +Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain) diff --git a/examples/lovable-react-18-example/components.json b/examples/lovable-react-18-example/components.json new file mode 100644 index 0000000000..62e101166a --- /dev/null +++ b/examples/lovable-react-18-example/components.json @@ -0,0 +1,20 @@ +{ + "$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" + } +} diff --git a/examples/lovable-react-18-example/eslint.config.js b/examples/lovable-react-18-example/eslint.config.js new file mode 100644 index 0000000000..40f72cc45a --- /dev/null +++ b/examples/lovable-react-18-example/eslint.config.js @@ -0,0 +1,26 @@ +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", + }, + }, +); diff --git a/examples/lovable-react-18-example/index.html b/examples/lovable-react-18-example/index.html new file mode 100644 index 0000000000..c457c8c6a9 --- /dev/null +++ b/examples/lovable-react-18-example/index.html @@ -0,0 +1,24 @@ + + + + + + Build Something Extraordinary + + + + + + + + + + + + + + +
+ + + diff --git a/examples/lovable-react-18-example/package.json b/examples/lovable-react-18-example/package.json new file mode 100644 index 0000000000..bf996fb814 --- /dev/null +++ b/examples/lovable-react-18-example/package.json @@ -0,0 +1,84 @@ +{ + "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", + "clean": "rimraf dist && rimraf node_modules" + }, + "dependencies": { + "@hookform/resolvers": "^3.10.0", + "@radix-ui/react-accordion": "^1.2.11", + "@radix-ui/react-alert-dialog": "^1.1.14", + "@radix-ui/react-aspect-ratio": "^1.1.7", + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-checkbox": "^1.3.2", + "@radix-ui/react-collapsible": "^1.1.11", + "@radix-ui/react-context-menu": "^2.2.15", + "@radix-ui/react-dialog": "^1.1.14", + "@radix-ui/react-dropdown-menu": "^2.1.15", + "@radix-ui/react-hover-card": "^1.1.14", + "@radix-ui/react-label": "^2.1.7", + "@radix-ui/react-menubar": "^1.1.15", + "@radix-ui/react-navigation-menu": "^1.2.13", + "@radix-ui/react-popover": "^1.1.14", + "@radix-ui/react-progress": "^1.1.7", + "@radix-ui/react-radio-group": "^1.3.7", + "@radix-ui/react-scroll-area": "^1.2.9", + "@radix-ui/react-select": "^2.2.5", + "@radix-ui/react-separator": "^1.1.7", + "@radix-ui/react-slider": "^1.3.5", + "@radix-ui/react-slot": "^1.2.3", + "@radix-ui/react-switch": "^1.2.5", + "@radix-ui/react-tabs": "^1.1.12", + "@radix-ui/react-toast": "^1.2.14", + "@radix-ui/react-toggle": "^1.1.9", + "@radix-ui/react-toggle-group": "^1.1.10", + "@radix-ui/react-tooltip": "^1.2.7", + "@tanstack/react-query": "^5.83.0", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "cmdk": "^1.1.1", + "date-fns": "^3.6.0", + "embla-carousel-react": "^8.6.0", + "input-otp": "^1.4.2", + "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.61.1", + "react-resizable-panels": "^2.1.9", + "react-router-dom": "^6.30.1", + "recharts": "^2.15.4", + "sonner": "^1.7.4", + "tailwind-merge": "^2.6.0", + "tailwindcss-animate": "^1.0.7", + "vaul": "^0.9.9", + "zod": "^3.25.76" + }, + "devDependencies": { + "@eslint/js": "^9.32.0", + "@tailwindcss/typography": "^0.5.16", + "@types/node": "^22.16.5", + "@types/react": "^18.3.23", + "@types/react-dom": "^18.3.7", + "@vitejs/plugin-react-swc": "^3.11.0", + "autoprefixer": "^10.4.21", + "eslint": "^9.32.0", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.20", + "globals": "^15.15.0", + "lovable-tagger": "^1.1.11", + "postcss": "^8.5.6", + "tailwindcss": "^3.4.17", + "typescript": "^5.8.3", + "typescript-eslint": "^8.38.0", + "vite": "^5.4.19" + } +} diff --git a/examples/lovable-react-18-example/postcss.config.js b/examples/lovable-react-18-example/postcss.config.js new file mode 100644 index 0000000000..2aa7205d4b --- /dev/null +++ b/examples/lovable-react-18-example/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/lovable-react-18-example/public/favicon.ico b/examples/lovable-react-18-example/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..dd5a12627d36db7eb9c19fa2f931ff1509f0323e GIT binary patch literal 7645 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 LNkvXXu0mjf>#GbK literal 0 HcmV?d00001 diff --git a/examples/lovable-react-18-example/public/placeholder.svg b/examples/lovable-react-18-example/public/placeholder.svg new file mode 100644 index 0000000000..e763910b27 --- /dev/null +++ b/examples/lovable-react-18-example/public/placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/lovable-react-18-example/public/robots.txt b/examples/lovable-react-18-example/public/robots.txt new file mode 100644 index 0000000000..6018e701fc --- /dev/null +++ b/examples/lovable-react-18-example/public/robots.txt @@ -0,0 +1,14 @@ +User-agent: Googlebot +Allow: / + +User-agent: Bingbot +Allow: / + +User-agent: Twitterbot +Allow: / + +User-agent: facebookexternalhit +Allow: / + +User-agent: * +Allow: / diff --git a/examples/lovable-react-18-example/src/App.css b/examples/lovable-react-18-example/src/App.css new file mode 100644 index 0000000000..b9d355df2a --- /dev/null +++ b/examples/lovable-react-18-example/src/App.css @@ -0,0 +1,42 @@ +#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; +} diff --git a/examples/lovable-react-18-example/src/App.tsx b/examples/lovable-react-18-example/src/App.tsx new file mode 100644 index 0000000000..18daf2e900 --- /dev/null +++ b/examples/lovable-react-18-example/src/App.tsx @@ -0,0 +1,27 @@ +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; diff --git a/examples/lovable-react-18-example/src/components/ui/accordion.tsx b/examples/lovable-react-18-example/src/components/ui/accordion.tsx new file mode 100644 index 0000000000..1e7878cede --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/accordion.tsx @@ -0,0 +1,52 @@ +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 }; diff --git a/examples/lovable-react-18-example/src/components/ui/alert-dialog.tsx b/examples/lovable-react-18-example/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000000..6dfbfb49fe --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/alert-dialog.tsx @@ -0,0 +1,104 @@ +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, +}; diff --git a/examples/lovable-react-18-example/src/components/ui/alert.tsx b/examples/lovable-react-18-example/src/components/ui/alert.tsx new file mode 100644 index 0000000000..2efc3c8ba4 --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/alert.tsx @@ -0,0 +1,43 @@ +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>( + ({ className, ...props }, ref) => ( +
+ ), +); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertTitle, AlertDescription }; diff --git a/examples/lovable-react-18-example/src/components/ui/aspect-ratio.tsx b/examples/lovable-react-18-example/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000000..c9e6f4bf9e --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"; + +const AspectRatio = AspectRatioPrimitive.Root; + +export { AspectRatio }; diff --git a/examples/lovable-react-18-example/src/components/ui/avatar.tsx b/examples/lovable-react-18-example/src/components/ui/avatar.tsx new file mode 100644 index 0000000000..68d21bbf6d --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/avatar.tsx @@ -0,0 +1,38 @@ +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 }; diff --git a/examples/lovable-react-18-example/src/components/ui/badge.tsx b/examples/lovable-react-18-example/src/components/ui/badge.tsx new file mode 100644 index 0000000000..0853c441df --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/badge.tsx @@ -0,0 +1,29 @@ +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 }; diff --git a/examples/lovable-react-18-example/src/components/ui/breadcrumb.tsx b/examples/lovable-react-18-example/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000000..ca91ff5326 --- /dev/null +++ b/examples/lovable-react-18-example/src/components/ui/breadcrumb.tsx @@ -0,0 +1,90 @@ +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) =>