local imports working

Nutlope · Nutlope · commit 290993369abe · 2024-08-03T18:41:07.000-07:00
diff --git a/README.md b/README.md
@@ -24,7 +24,11 @@
 
 ## Future Tasks
 
-- [ ] Make it generate more consistent apps by only importing from a component library like shadcn, can checkout repos like openv0 for inspo
+- [ ] Make it generate more consistent apps by only importing from a component library like shadcn
+  - [x] Partially working
+  - [x] Need to figure out a way to use the @
+  - [ ] Need to import all the CSS stuff (main CSS file + tailwind css file)
+  - [ ] Need to add in all the shadcn components
 - [ ] Look into a way to export the app or deploy it in a single click &ndash; try two things
   - The codesandbox way where I put the link in another way like the react docs, then I can infer the link and have people go check it out
   - The non-codesandbox way where i try to do it myself with a dynamic route by doing some hashing
diff --git a/app/page.tsx b/app/page.tsx
@@ -21,10 +21,8 @@ import {
 import { AnimatePresence, motion } from "framer-motion";
 import { FormEvent, useEffect, useState } from "react";
 import LoadingDots from "../components/loading-dots";
-import Hello from "@/components/Shadcn";
 import {
   button,
-  Button,
   card,
   fullStyles,
   input,
@@ -109,6 +107,9 @@ export default function Home() {
       parser.feed(chunkValue);
     }
 
+    // Replace all occurrences of "@/components" with "/components" in the generated code
+    setGeneratedCode((prev) => prev.replace(/@\/components/g, "/components"));
+
     newMessages = [
       ...newMessages,
       { role: "assistant", content: generatedCode },
@@ -176,6 +177,9 @@ export default function Home() {
       parser.feed(chunkValue);
     }
 
+    // Replace all occurrences of "@/components" with "/components" in the generated code
+    setGeneratedCode((prev) => prev.replace(/@\/components/g, "/components"));
+
     newMessages = [
       ...newMessages,
       { role: "assistant", content: generatedCode },
@@ -377,6 +381,7 @@ export default function Home() {
                     externalResources: [
                       "https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
                     ],
+                    wrapContent: false,
                     editorHeight: "80vh",
                     showTabs: true,
                   }}
diff --git a/utils/Shadcn.ts b/utils/Shadcn.ts
@@ -3,7 +3,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../../lib/utils.ts"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -59,7 +59,7 @@ export { Button, buttonVariants }
 export const card = `
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../../lib/utils.ts"
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -140,7 +140,7 @@ export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
 export const input = `
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../../lib/utils.ts"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -165,13 +165,11 @@ Input.displayName = "Input"
 export { Input }
 `;
 export const label = `
-"use client"
-
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../../lib/utils.ts"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
