diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..63b4b68
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6d3f665
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+WIP
\ No newline at end of file
diff --git a/openv0_server/.env b/openv0_server/.env
new file mode 100644
index 0000000..98a3df5
--- /dev/null
+++ b/openv0_server/.env
@@ -0,0 +1,7 @@
+OPENAI_API_KEY = "YOUR_API_KEY_HERE"
+OPENAI_MODEL = "gpt-4"
+
+CONTEXT_TOKENS_PER_LIBRARY_COMPONENT_LIMIT = 950
+
+REACT_WEBAPP_DIR = "../openv0_vitereact"
+REACT_WEBAP_COMPONENT_PING_INTERVAL_MS = 5000
\ No newline at end of file
diff --git a/openv0_server/.gitignore b/openv0_server/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/openv0_server/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/openv0_server/README.md b/openv0_server/README.md
new file mode 100644
index 0000000..6d3f665
--- /dev/null
+++ b/openv0_server/README.md
@@ -0,0 +1 @@
+WIP
\ No newline at end of file
diff --git a/openv0_server/_test_modules.js b/openv0_server/_test_modules.js
new file mode 100644
index 0000000..2d82b41
--- /dev/null
+++ b/openv0_server/_test_modules.js
@@ -0,0 +1,205 @@
+
+
+/*
+const { LocalIndex } = require('vectra')
+const index = new LocalIndex('vectordb_lucide')
+async function db_vectra_build(){
+ const lucide_with_embeddings = require(`./library/lucide_with_embeddings_dump.json`)
+
+ if (!await index.isIndexCreated()) {
+ await index.createIndex();
+ }
+ for (let e of lucide_with_embeddings){
+ console.log(e.name)
+ await index.insertItem({
+ vector: e.embedding,
+ metadata: { name: e.name }
+ })
+ }
+}
+db_vectra_build()
+*/
+
+/*
+const { LocalIndex } = require('vectra')
+const index = new LocalIndex('vectordb_lucide')
+async function db_vectra_query_test(){
+ const lucide_with_embeddings = require(`./library/lucide_with_embeddings_dump.json`)
+
+ const example = lucide_with_embeddings[500]
+ console.log(`> ${example.name}`)
+ const results = await index.queryItems( example.embedding , 6);
+ console.dir(results.slice(1,).map(e=>e.item.metadata) )
+}
+db_vectra_query_test()
+*/
+
+
+/*
+const db_shadcn = require(`./modules/db/shadcn.js`)
+const db_lucide = require(`./modules/db/lucide.js`)
+
+
+async function test(){
+ await db_shadcn.build()
+ // await db_lucide.build()
+ // await db_lucide.embeddings() //<------- calls ada-002 in batch !
+}
+test()
+*/
+
+
+
+/*
+const component_design_task = require(`./modules/multipass/component_design_task.js`)
+async function test(){
+ const queries = [
+ `a tweet UI`,
+ `a pricing page for a SaaS`,
+ `a component that displays a simple paragraph`,
+ `a cookie consent banner`,
+ `a table of financial invoices`,
+ ]
+
+ console.dir(
+ (
+ await component_design_task.run({
+ query: queries[0],
+ })
+ ),
+ {depth:null}
+ )
+
+}
+test()
+*/
+
+
+/*
+const rag_icons = require(`./modules/multipass/rag_icons.js`)
+async function test(){
+ console.dir(
+ (
+ await rag_icons.run({
+ icons: [`cookies` , `new notification`, `friend request`],
+ })
+ ),
+ {depth:null}
+ )
+
+}
+test()
+*/
+
+/*
+const rag_library_components = require(`./modules/multipass/rag_library_components.js`)
+async function test(){
+ console.dir(
+ (
+ await rag_library_components.run({
+ components: [`Avatar` , `Button`],
+ })
+ ),
+ {depth:null}
+ )
+
+}
+test()
+*/
+
+/*
+const context_builder = require(`./modules/multipass/context_builder.js`)
+async function test(){
+ console.log(
+ JSON.stringify(
+ await context_builder.run({
+ icons: [`checkmark`],
+ library_components: [ {name: `Card`} , {name: `Button`} ],
+ })
+ )
+ )
+
+}
+test()
+*/
+
+
+
+
+
+/*
+const design_task = require(`./modules/multipass/design_task.js`)
+const context_builder = require(`./modules/multipass/context_builder.js`)
+const generate_component = require(`./modules/multipass/generate_component.js`)
+async function test(){
+
+
+ const task = await design_task.run({
+ query: `a component that display an example Lorem Ipsum paragraph (write it)`
+ })
+ console.dir(task)
+
+
+
+ const task = {
+ name: 'TweetUI',
+ description: {
+ by_user: 'a tweet UI component',
+ by_llm: "Design a new React component that's styled in a similar fashion to a tweet on Twitter. It should include a user profile picture (Avatar), the user's name, the tweet text, a timestamp, and options for reply, retweet, like, and share a tweet. It should also show the number of replies, retweets, and likes. All the information will be passed via props."
+ },
+ icons: [ 'reply', 'retweet', 'heart', 'share' ],
+ library_components: [
+ { name: 'Avatar', usage: "To display the user's profile picture." },
+ {
+ name: 'Card',
+ usage: 'To structure and organize the tweet information.'
+ },
+ {
+ name: 'Button',
+ usage: 'To create interactive reply, retweet, like, and share buttons.'
+ },
+ {
+ name: 'Label',
+ usage: 'To give more information about displayed data such as number of replies, retweets, or likes.'
+ }
+ ]
+ }
+
+
+ const context = await context_builder.run(task)
+ // console.dir(context)
+ const generated = await generate_component.run({task,context})
+
+
+}
+test()
+*/
+
+
+
+
+
+
+
+
+/*
+const generate = require(`./generate.js`)
+async function test(){
+
+
+
+ await generate.new_component({
+ query: `A Notes app UI looks like Apple's, in a yellow theme color`
+ })
+
+
+ await generate.iterate_component({
+ componentId: `NotesApp_ts24v`,
+ query: `the left half of the layout should be at the bottom instead !`,
+ })
+
+
+
+}
+test()
+*/
diff --git a/openv0_server/export_refresh.js b/openv0_server/export_refresh.js
new file mode 100644
index 0000000..b02d585
--- /dev/null
+++ b/openv0_server/export_refresh.js
@@ -0,0 +1,8 @@
+// to rebuild components in webapp;
+// ie after you delete components, run node refresh_webapp.js
+
+async function refresh(){
+ const export_react = require(`./modules/export/react.js`)
+ await export_react.dump_webapp()
+}
+refresh()
diff --git a/openv0_server/generate.js b/openv0_server/generate.js
new file mode 100644
index 0000000..662e21e
--- /dev/null
+++ b/openv0_server/generate.js
@@ -0,0 +1,125 @@
+const fs = require('fs')
+
+const design_task = require(`./modules/multipass/design_task.js`)
+const iterate_task = require(`./modules/multipass/iterate_task.js`)
+
+const context_builder = require(`./modules/multipass/context_builder.js`)
+const generate_component = require(`./modules/multipass/generate_component.js`)
+
+const export_react = require(`./modules/export/react.js`)
+
+function _randomId(length) {
+ let result = '';
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ const charactersLength = characters.length;
+ let counter = 0;
+ while (counter < length) {
+ result += characters.charAt(Math.floor(Math.random() * charactersLength));
+ counter += 1;
+ }
+ return result;
+}
+
+async function new_component(req) {
+ // {query}
+
+
+ const task = await design_task.run(req) // -> { name, description{by_user,by_llm}, icons, library_components }
+ const context = await context_builder.run(task) // -> context[]
+ const code = await generate_component.new_component({task,context}) // -> generated_code
+
+
+ /*
+ const task = { name:`Dummy` , description: {by_user: `dummy prompt`} }
+ const code = `import something_dummy;`
+ */
+
+ const componentId = task.name.replaceAll(' ','') + `_` + _randomId(5)
+ const timestamp = Date.now()
+
+ await export_react.save_component({
+ componentId,
+ slug: componentId.toLowerCase(),
+ name: task.name,
+ prompt: task.description.by_user,
+ timestamp,
+ version: `${timestamp}`,
+ code,
+ })
+ await export_react.dump_webapp()
+ return {
+ componentId,
+ version: `${timestamp}`,
+ code,
+ }
+}
+async function iterate_component(req) {
+ // {query : `user_query` , componentId ,}
+
+ // fetch last version of component
+ const components_list = fs.readdirSync(`./generated/components/${req.componentId}`).filter(e=>e.endsWith(`.json`)).sort()
+ const previous_component = {
+ ...JSON.parse( fs.readFileSync(`./generated/components/${req.componentId}/${components_list.slice(-1)[0]}`,'utf-8') ),
+ code: fs.readFileSync(`./generated/components/${req.componentId}/${components_list.slice(-1)[0].split('.')[0]}.tsx`,'utf-8'),
+ }
+ const first_component = {
+ ...JSON.parse( fs.readFileSync(`./generated/components/${req.componentId}/${components_list[0]}`,'utf-8') ),
+ code: fs.readFileSync(`./generated/components/${req.componentId}/${components_list[0].split('.')[0]}.tsx`,'utf-8'),
+ }
+
+ const iteration_task = await iterate_task.run({
+ query: req.query,
+ previous: {
+ name: previous_component.name,
+ description: first_component.prompt,
+ },
+ }) // -> { name, description{by_user,by_llm}, icons, library_components }
+
+ const task = {
+ name: previous_component.name,
+ ...iteration_task
+ }
+ const iteration_context = await context_builder.run(task) // -> context[]
+ const context = [
+ ...iteration_context,
+ /*
+ {
+ role: `user`,
+ content: ``,
+ },
+ */
+ ]
+
+ const code = await generate_component.iterate_component({
+ task,
+ context,
+ previous: {
+ description: first_component.prompt,
+ code: previous_component.code,
+ },
+ }) // -> generated_code
+
+ const componentId = req.componentId
+ const timestamp = Date.now()
+
+ await export_react.save_component({
+ componentId,
+ slug: componentId.toLowerCase(),
+ name: task.name,
+ prompt: task.description.by_user,
+ timestamp,
+ version: `${timestamp}`,
+ code,
+ })
+ await export_react.dump_webapp()
+ return {
+ componentId,
+ version: `${timestamp}`,
+ code,
+ }
+
+}
+module.exports = {
+ new_component,
+ iterate_component,
+};
diff --git a/openv0_server/generated/components/CodeSnippet_x7n4c/1695072566017.json b/openv0_server/generated/components/CodeSnippet_x7n4c/1695072566017.json
new file mode 100644
index 0000000..616dc80
--- /dev/null
+++ b/openv0_server/generated/components/CodeSnippet_x7n4c/1695072566017.json
@@ -0,0 +1 @@
+{"componentId":"CodeSnippet_x7n4c","slug":"codesnippet_x7n4c","name":"CodeSnippet","prompt":"write a code snippet component with an example ffmpeg shell snippet and a description of what it does. text should be font-mono.\nmaybe some icon next to the code snippet block.\nadd a copy to clipboard button on the bottom right of the component.\nit should be a sleek, beautiful, well-arranged component;","timestamp":1695072566017,"version":"1695072566017","code":"import React, { useState, useCallback } from 'react';\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Clipboard } from \"lucide-react\";\n\nconst CodeSnippet = () => {\n const [isCopied, setIsCopied] = useState(false);\n\n const exampleCode = `ffmpeg -i input.mp4 -vf \"scale=640:480\" output.mp4`;\n\n const handleCopy = useCallback(() => {\n navigator.clipboard\n .writeText(exampleCode)\n .then(() => setIsCopied(true))\n .catch(() => setHasError(true));\n }, []);\n\n return (\n {exampleCode}
\n {exampleCode}
+ {exampleCode}
\n {exampleCode}
+ {exampleCode}
\n {exampleCode}
+
{feature.tooltip}
\n{feature.tooltip}
+\n \n
{feature}
\n
+
+
{feature}
+Illmatic Album
\n1994 - Nas
\n{track}
\n1994 Illmatic Album
\nIllmatic Album
+1994 - Nas
+{track}
+1994 Illmatic Album
+Illmatic Album
\n1994 - Nas
\n{track}
\n1994 Illmatic Album
\nIllmatic Album
+1994 - Nas
+{track}
+1994 Illmatic Album
+Illmatic Album
\n1994 - Nas
\n{track}
\n1994 Illmatic Album
\nIllmatic Album
+1994 - Nas
+{track}
+1994 Illmatic Album
+@userhandle
\nLorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat impedit voluptatibus reiciendis magni ratione laborum nobis officiis architecto, modi aspernatur?
\n@userhandle
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat impedit voluptatibus reiciendis magni ratione laborum nobis officiis architecto, modi aspernatur?
+Add to Favorites
\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, doloribus, dolorem iusto dolorum longe aliquam.
\nReply to tweet
\nRetweet
\nShare this tweet
\nAdd to Favorites
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, doloribus, dolorem iusto dolorum longe aliquam.
+Reply to tweet
+Retweet
+Share this tweet
+Card Content
+Card Footer
+Add to library
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/calendar-react-hook-form.tsx b/openv0_server/library/shadcn/examples/calendar-react-hook-form.tsx
new file mode 100644
index 0000000..16f45db
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/calendar-react-hook-form.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/registry/default/ui/form"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/default/ui/popover"
+import { toast } from "@/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+ dob: z.date({
+ required_error: "A date of birth is required.",
+ }),
+})
+
+export default function CalendarForm() {
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/card-demo.tsx b/openv0_server/library/shadcn/examples/card-demo.tsx
new file mode 100644
index 0000000..2283bb9
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/card-demo.tsx
@@ -0,0 +1,79 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/registry/default/ui/card"
+import { Separator } from "@/registry/default/ui/separator"
+import { Switch } from "@/registry/default/ui/switch"
+
+const notifications = [
+ {
+ title: "Your call has been confirmed.",
+ description: "1 hour ago",
+ },
+ {
+ title: "You have a new message!",
+ description: "1 hour ago",
+ },
+ {
+ title: "Your subscription is expiring soon!",
+ description: "2 hours ago",
+ },
+]
+
+type CardProps = React.ComponentProps+ Push Notifications +
++ Send notifications to device. +
++ {notification.title} +
++ {notification.description} +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/checkbox-form-single.tsx b/openv0_server/library/shadcn/examples/checkbox-form-single.tsx
new file mode 100644
index 0000000..8c527c6
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/checkbox-form-single.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { Button } from "@/registry/default/ui/button"
+import { Checkbox } from "@/registry/default/ui/checkbox"
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+} from "@/registry/default/ui/form"
+import { toast } from "@/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+ mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/checkbox-with-text.tsx b/openv0_server/library/shadcn/examples/checkbox-with-text.tsx
new file mode 100644
index 0000000..4b9479e
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Checkbox } from "@/registry/default/ui/checkbox"
+
+export default function CheckboxWithText() {
+ return (
+ + You agree to our Terms of Service and Privacy Policy. +
++ + {label} + + Create a new project +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/combobox-popover.tsx b/openv0_server/library/shadcn/examples/combobox-popover.tsx
new file mode 100644
index 0000000..74345a7
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/combobox-popover.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+import {
+ ArrowUpCircle,
+ CheckCircle2,
+ Circle,
+ HelpCircle,
+ LucideIcon,
+ XCircle,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/registry/default/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+type Status = {
+ value: string
+ label: string
+ icon: LucideIcon
+}
+
+const statuses: Status[] = [
+ {
+ value: "backlog",
+ label: "Backlog",
+ icon: HelpCircle,
+ },
+ {
+ value: "todo",
+ label: "Todo",
+ icon: Circle,
+ },
+ {
+ value: "in progress",
+ label: "In Progress",
+ icon: ArrowUpCircle,
+ },
+ {
+ value: "done",
+ label: "Done",
+ icon: CheckCircle2,
+ },
+ {
+ value: "canceled",
+ label: "Canceled",
+ icon: XCircle,
+ },
+]
+
+export default function ComboboxPopover() {
+ const [open, setOpen] = React.useState(false)
+ const [selectedStatus, setSelectedStatus] = React.useStateStatus
++ Press{" "} + + ⌘J + +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/date-picker-with-presets.tsx b/openv0_server/library/shadcn/examples/date-picker-with-presets.tsx
new file mode 100644
index 0000000..1e5cd16
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/date-picker-with-presets.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/default/ui/popover"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function DatePickerWithPresets() {
+ const [date, setDate] = React.useState+ The React Framework – created and maintained by @vercel. +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/input-with-button.tsx b/openv0_server/library/shadcn/examples/input-with-button.tsx
new file mode 100644
index 0000000..2bfe042
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/input-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+
+export default function InputWithButton() {
+ return (
+ Enter your email address.
++ Beautifully designed components built with Radix UI and + Tailwind CSS. +
+ ++ {children} +
+ ++ Set the dimensions for the layer. +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/scroll-area-demo.tsx b/openv0_server/library/shadcn/examples/scroll-area-demo.tsx
new file mode 100644
index 0000000..fff8dc5
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/scroll-area-demo.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { ScrollArea } from "@/registry/default/ui/scroll-area"
+import { Separator } from "@/registry/default/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+ (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export default function ScrollAreaDemo() {
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/separator-demo.tsx b/openv0_server/library/shadcn/examples/separator-demo.tsx
new file mode 100644
index 0000000..8d7f86f
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export default function SeparatorDemo() {
+ return (
+ + An open-source UI component library. +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/table-demo.tsx b/openv0_server/library/shadcn/examples/table-demo.tsx
new file mode 100644
index 0000000..e29b20e
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/table-demo.tsx
@@ -0,0 +1,80 @@
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/registry/default/ui/table"
+
+const invoices = [
+ {
+ invoice: "INV001",
+ paymentStatus: "Paid",
+ totalAmount: "$250.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV002",
+ paymentStatus: "Pending",
+ totalAmount: "$150.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV003",
+ paymentStatus: "Unpaid",
+ totalAmount: "$350.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV004",
+ paymentStatus: "Paid",
+ totalAmount: "$450.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV005",
+ paymentStatus: "Paid",
+ totalAmount: "$550.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV006",
+ paymentStatus: "Pending",
+ totalAmount: "$200.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV007",
+ paymentStatus: "Unpaid",
+ totalAmount: "$300.00",
+ paymentMethod: "Credit Card",
+ },
+]
+
+export default function TableDemo() {
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/openv0_server/library/shadcn/examples/textarea-with-button.tsx b/openv0_server/library/shadcn/examples/textarea-with-button.tsx
new file mode 100644
index 0000000..9ab32cb
--- /dev/null
+++ b/openv0_server/library/shadcn/examples/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/default/ui/button"
+import { Textarea } from "@/registry/default/ui/textarea"
+
+export default function TextareaWithButton() {
+ return (
+ + Your message will be copied to the support team. +
+Add to library
+Sofia Davis
+m@example.com
++ Olivia Martin +
+m@example.com
++ Isabella Nguyen +
+b@example.com
++ Sofia Davis +
+p@example.com
++ +20.1% from last month +
++ +180.1% from last month +
+Sofia Davis
+m@example.com
+Viewer
++ Can view and comment. +
+Developer
++ Can view, comment and edit. +
+Billing
++ Can view, comment and manage billing. +
+Owner
++ Admin-level access to all resources. +
+Jackson Lee
+p@example.com
+Viewer
++ Can view and comment. +
+Developer
++ Can view, comment and edit. +
+Billing
++ Can view, comment and manage billing. +
+Owner
++ Admin-level access to all resources. +
++ Isabella Nguyen +
+i@example.com
+Viewer
++ Can view and comment. +
+Developer
++ Can view, comment and edit. +
+Billing
++ Can view, comment and manage billing. +
+Owner
++ Admin-level access to all resources. +
+\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"calendar-react-hook-form.tsx","code":"\"use client\"\r\n\r\nimport { zodResolver } from \"@hookform/resolvers/zod\"\r\nimport { format } from \"date-fns\"\r\nimport { CalendarIcon } from \"lucide-react\"\r\nimport { useForm } from \"react-hook-form\"\r\nimport * as z from \"zod\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport {\r\n Form,\r\n FormControl,\r\n FormDescription,\r\n FormField,\r\n FormItem,\r\n FormLabel,\r\n FormMessage,\r\n} from \"@/components/ui/form\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\nimport { toast } from \"@/components/ui/use-toast\"\r\n\r\nconst FormSchema = z.object({\r\n dob: z.date({\r\n required_error: \"A date of birth is required.\",\r\n }),\r\n})\r\n\r\nexport default function CalendarForm() {\r\n const form = useForm\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"}]}},{"name":"Card","description":"Displays a card with header, content, and footer.","docs_path":"library\\shadcn\\docs\\card.mdx","docs":{"import":{"source":"card.mdx","code":"import {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\""},"use":[{"source":"card.mdx","code":"Card Content
\nCard Footer
\n\r\n Push Notifications\r\n
\r\n\r\n Send notifications to device.\r\n
\r\n\r\n {notification.title}\r\n
\r\n\r\n {notification.description}\r\n
\r\n\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"checkbox-form-single.tsx","code":"\"use client\"\r\n\r\nimport Link from \"next/link\"\r\nimport { zodResolver } from \"@hookform/resolvers/zod\"\r\nimport { useForm } from \"react-hook-form\"\r\nimport * as z from \"zod\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport {\r\n Form,\r\n FormControl,\r\n FormDescription,\r\n FormField,\r\n FormItem,\r\n FormLabel,\r\n} from \"@/components/ui/form\"\r\nimport { toast } from \"@/components/ui/use-toast\"\r\n\r\nconst FormSchema = z.object({\r\n mobile: z.boolean().default(false).optional(),\r\n})\r\n\r\nexport default function CheckboxReactHookFormSingle() {\r\n const form = useForm\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"checkbox-with-text.tsx","code":"\"use client\"\r\n\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\n\r\nexport default function CheckboxWithText() {\r\n return (\r\n \r\n You agree to our Terms of Service and Privacy Policy.\r\n
\r\n\r\n \r\n {label}\r\n \r\n Create a new project\r\n
\r\n\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"combobox-popover.tsx","code":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport {\r\n ArrowUpCircle,\r\n CheckCircle2,\r\n Circle,\r\n HelpCircle,\r\n LucideIcon,\r\n XCircle,\r\n} from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"@/components/ui/command\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\n\r\ntype Status = {\r\n value: string\r\n label: string\r\n icon: LucideIcon\r\n}\r\n\r\nconst statuses: Status[] = [\r\n {\r\n value: \"backlog\",\r\n label: \"Backlog\",\r\n icon: HelpCircle,\r\n },\r\n {\r\n value: \"todo\",\r\n label: \"Todo\",\r\n icon: Circle,\r\n },\r\n {\r\n value: \"in progress\",\r\n label: \"In Progress\",\r\n icon: ArrowUpCircle,\r\n },\r\n {\r\n value: \"done\",\r\n label: \"Done\",\r\n icon: CheckCircle2,\r\n },\r\n {\r\n value: \"canceled\",\r\n label: \"Canceled\",\r\n icon: XCircle,\r\n },\r\n]\r\n\r\nexport default function ComboboxPopover() {\r\n const [open, setOpen] = React.useState(false)\r\n const [selectedStatus, setSelectedStatus] = React.useStateStatus
\r\n\r\n Press{\" \"}\r\n \r\n ⌘J\r\n \r\n
\r\n\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"date-picker-with-presets.tsx","code":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { addDays, format } from \"date-fns\"\r\nimport { Calendar as CalendarIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from \"@/components/ui/select\"\r\n\r\nexport default function DatePickerWithPresets() {\r\n const [date, setDate] = React.useState\r\n The React Framework – created and maintained by @vercel.\r\n
\r\n\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"input-with-button.tsx","code":"import { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\n\r\nexport default function InputWithButton() {\r\n return (\r\n Enter your email address.
\r\n\r\n Beautifully designed components built with Radix UI and\r\n Tailwind CSS.\r\n
\r\n \r\n\r\n {children}\r\n
\r\n \r\n\r\n Set the dimensions for the layer.\r\n
\r\n\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"}]}},{"name":"Scroll Area","description":"Augments native scroll functionality for custom, cross-browser styling.","docs_path":"library\\shadcn\\docs\\scroll-area.mdx","docs":{"import":{"source":"scroll-area.mdx","code":"import { ScrollArea } from \"@/components/ui/scroll-area\""},"use":[{"source":"scroll-area.mdx","code":"\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"}]}},{"name":"Separator","description":"Visually or semantically separates content.","docs_path":"library\\shadcn\\docs\\separator.mdx","docs":{"import":{"source":"separator.mdx","code":"import { Separator } from \"@/components/ui/separator\""},"use":[{"source":"separator.mdx","code":"\r\n An open-source UI component library.\r\n
\r\n\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"}]}},{"name":"Table","description":"A responsive table component.","docs_path":"library\\shadcn\\docs\\table.mdx","docs":{"import":{"source":"table.mdx","code":"import {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\""},"use":[{"source":"table.mdx","code":"\r\n {JSON.stringify(data, null, 2)}
\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}"},{"source":"textarea-with-button.tsx","code":"import { Button } from \"@/components/ui/button\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n\r\nexport default function TextareaWithButton() {\r\n return (\r\n \r\n Your message will be copied to the support team.\r\n
\r\nAdd to library
\nAdd to library
\r\n