├── .gitignore ├── LICENSE ├── README.md ├── npx ├── .gitignore ├── bin.js ├── package-lock.json └── package.json ├── server ├── .env ├── .gitignore ├── .prettierignore ├── _test.build.js ├── _test.component_from_json.example.js ├── _test.db_build.js ├── _test.multipass.js ├── _validate+postprocess.test.js ├── api.js ├── build.js ├── build │ ├── README.md │ ├── allowed_imports │ │ ├── next │ │ │ ├── flowbite.js │ │ │ ├── nextui.js │ │ │ └── shadcn.js │ │ ├── react │ │ │ ├── flowbite.js │ │ │ ├── nextui.js │ │ │ └── shadcn.js │ │ └── svelte │ │ │ ├── flowbite.js │ │ │ └── shadcn.js │ └── components │ │ ├── next │ │ ├── flowbite.js │ │ ├── nextui.js │ │ └── shadcn.js │ │ ├── react │ │ ├── flowbite.js │ │ ├── nextui.js │ │ └── shadcn.js │ │ └── svelte │ │ ├── flowbite.js │ │ └── shadcn.js ├── db.js ├── library │ ├── README.md │ ├── components │ │ ├── next │ │ │ ├── flowbite │ │ │ │ ├── dump.json │ │ │ │ └── metadata.json │ │ │ ├── nextui │ │ │ │ ├── dump.json │ │ │ │ └── metadata.json │ │ │ └── shadcn │ │ │ │ ├── dump.json │ │ │ │ └── metadata.json │ │ ├── react │ │ │ ├── flowbite │ │ │ │ ├── dump.json │ │ │ │ └── metadata.json │ │ │ ├── nextui │ │ │ │ ├── dump.json │ │ │ │ └── metadata.json │ │ │ └── shadcn │ │ │ │ ├── dump.json │ │ │ │ └── metadata.json │ │ └── svelte │ │ │ ├── flowbite │ │ │ ├── dump.json │ │ │ └── metadata.json │ │ │ └── shadcn │ │ │ ├── dump.json │ │ │ └── metadata.json │ └── icons │ │ └── lucide │ │ ├── dump.json │ │ ├── metadata.json │ │ └── vectordb │ │ ├── .gitignore │ │ └── index.zip ├── modules │ ├── README.md │ ├── log │ │ └── index.js │ └── multipass │ │ ├── index.js │ │ ├── passes │ │ ├── animate-component │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── build-component-generation-context │ │ │ ├── README.md │ │ │ ├── index.js │ │ │ ├── rag_components.js │ │ │ └── rag_icons.js │ │ ├── design-component-iteration-from-description │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── design-component-iteration-from-json │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── design-component-new-from-description │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── design-component-new-from-json │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── export-component │ │ │ ├── README.md │ │ │ ├── export_next.js │ │ │ ├── export_react.js │ │ │ ├── export_svelte.js │ │ │ └── index.js │ │ ├── generate-component-iteration │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── generate-component-new │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── generate-component-placeholder-data │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── postprocess-generated-component │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── store-component │ │ │ ├── README.md │ │ │ └── index.js │ │ ├── validate-check-generated-component │ │ │ ├── README.md │ │ │ ├── _index.js.bak │ │ │ └── index.js │ │ └── validate-fix-generated-component │ │ │ ├── README.md │ │ │ └── index.js │ │ └── presets │ │ └── index.js ├── openv0.sqlite ├── package-lock.json └── package.json └── webapps-starters ├── README.md ├── react ├── flowbite │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── openv0.png │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ ├── views │ │ │ ├── browse.tsx │ │ │ └── view.tsx │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── nextui │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── openv0.png │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ ├── views │ │ │ ├── browse.tsx │ │ │ └── view.tsx │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── shadcn │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── components.json │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── openv0.png │ └── vite.svg │ ├── src │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── ErrorBoundary.tsx │ │ ├── Fallback.tsx │ │ ├── ui │ │ │ ├── accordion.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── card.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── command.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── form.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── menubar.tsx │ │ │ ├── navigation-menu.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toast.tsx │ │ │ ├── toaster.tsx │ │ │ ├── toggle.tsx │ │ │ ├── tooltip.tsx │ │ │ └── use-toast.tsx │ │ └── views │ │ │ ├── component-view.tsx │ │ │ └── home.tsx │ ├── lib │ │ └── utils.ts │ ├── main.tsx │ ├── styles │ │ └── globals.css │ ├── views │ │ ├── browse.tsx │ │ └── view.tsx │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── svelte ├── flowbite ├── .gitignore ├── .npmrc ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── src │ ├── app.html │ ├── app.postcss │ ├── lib │ │ └── index.js │ └── routes │ │ ├── +layout.svelte │ │ ├── +page.svelte │ │ └── view │ │ └── [name] │ │ ├── +layout.svelte │ │ └── +page.svelte ├── static │ └── favicon.png ├── svelte.config.js ├── tailwind.config.cjs └── vite.config.js └── shadcn ├── .gitignore ├── .npmrc ├── README.md ├── components.json ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── src ├── app.html ├── app.postcss ├── lib │ ├── components │ │ └── ui │ │ │ ├── accordion │ │ │ ├── accordion-content.svelte │ │ │ ├── accordion-item.svelte │ │ │ ├── accordion-trigger.svelte │ │ │ └── index.ts │ │ │ ├── alert-dialog │ │ │ ├── alert-dialog-action.svelte │ │ │ ├── alert-dialog-cancel.svelte │ │ │ ├── alert-dialog-content.svelte │ │ │ ├── alert-dialog-description.svelte │ │ │ ├── alert-dialog-footer.svelte │ │ │ ├── alert-dialog-header.svelte │ │ │ ├── alert-dialog-overlay.svelte │ │ │ ├── alert-dialog-portal.svelte │ │ │ ├── alert-dialog-title.svelte │ │ │ └── index.ts │ │ │ ├── alert │ │ │ ├── alert-description.svelte │ │ │ ├── alert-title.svelte │ │ │ ├── alert.svelte │ │ │ └── index.ts │ │ │ ├── aspect-ratio │ │ │ ├── aspect-ratio.svelte │ │ │ └── index.ts │ │ │ ├── avatar │ │ │ ├── avatar-fallback.svelte │ │ │ ├── avatar-image.svelte │ │ │ ├── avatar.svelte │ │ │ └── index.ts │ │ │ ├── badge │ │ │ ├── badge.svelte │ │ │ └── index.ts │ │ │ ├── button │ │ │ ├── button.svelte │ │ │ └── index.ts │ │ │ ├── card │ │ │ ├── card-content.svelte │ │ │ ├── card-description.svelte │ │ │ ├── card-footer.svelte │ │ │ ├── card-header.svelte │ │ │ ├── card-title.svelte │ │ │ ├── card.svelte │ │ │ └── index.ts │ │ │ ├── checkbox │ │ │ ├── checkbox.svelte │ │ │ └── index.ts │ │ │ ├── collapsible │ │ │ ├── collapsible-content.svelte │ │ │ └── index.ts │ │ │ ├── context-menu │ │ │ ├── context-menu-checkbox-item.svelte │ │ │ ├── context-menu-content.svelte │ │ │ ├── context-menu-item.svelte │ │ │ ├── context-menu-label.svelte │ │ │ ├── context-menu-radio-group.svelte │ │ │ ├── context-menu-radio-item.svelte │ │ │ ├── context-menu-separator.svelte │ │ │ ├── context-menu-shortcut.svelte │ │ │ ├── context-menu-sub-content.svelte │ │ │ ├── context-menu-sub-trigger.svelte │ │ │ └── index.ts │ │ │ ├── dialog │ │ │ ├── dialog-content.svelte │ │ │ ├── dialog-description.svelte │ │ │ ├── dialog-footer.svelte │ │ │ ├── dialog-header.svelte │ │ │ ├── dialog-overlay.svelte │ │ │ ├── dialog-portal.svelte │ │ │ ├── dialog-title.svelte │ │ │ └── index.ts │ │ │ ├── dropdown-menu │ │ │ ├── dropdown-menu-checkbox-item.svelte │ │ │ ├── dropdown-menu-content.svelte │ │ │ ├── dropdown-menu-item.svelte │ │ │ ├── dropdown-menu-label.svelte │ │ │ ├── dropdown-menu-radio-group.svelte │ │ │ ├── dropdown-menu-radio-item.svelte │ │ │ ├── dropdown-menu-separator.svelte │ │ │ ├── dropdown-menu-shortcut.svelte │ │ │ ├── dropdown-menu-sub-content.svelte │ │ │ ├── dropdown-menu-sub-trigger.svelte │ │ │ └── index.ts │ │ │ ├── form │ │ │ ├── form-button.svelte │ │ │ ├── form-checkbox.svelte │ │ │ ├── form-description.svelte │ │ │ ├── form-input.svelte │ │ │ ├── form-item.svelte │ │ │ ├── form-label.svelte │ │ │ ├── form-native-select.svelte │ │ │ ├── form-radio-group.svelte │ │ │ ├── form-select-trigger.svelte │ │ │ ├── form-select.svelte │ │ │ ├── form-switch.svelte │ │ │ ├── form-textarea.svelte │ │ │ ├── form-validation.svelte │ │ │ └── index.ts │ │ │ ├── hover-card │ │ │ ├── hover-card-content.svelte │ │ │ └── index.ts │ │ │ ├── input │ │ │ ├── index.ts │ │ │ └── input.svelte │ │ │ ├── label │ │ │ ├── index.ts │ │ │ └── label.svelte │ │ │ ├── menubar │ │ │ ├── index.ts │ │ │ ├── menubar-checkbox-item.svelte │ │ │ ├── menubar-content.svelte │ │ │ ├── menubar-item.svelte │ │ │ ├── menubar-label.svelte │ │ │ ├── menubar-radio-item.svelte │ │ │ ├── menubar-separator.svelte │ │ │ ├── menubar-shortcut.svelte │ │ │ ├── menubar-sub-content.svelte │ │ │ ├── menubar-sub-trigger.svelte │ │ │ ├── menubar-trigger.svelte │ │ │ └── menubar.svelte │ │ │ ├── popover │ │ │ ├── index.ts │ │ │ └── popover-content.svelte │ │ │ ├── progress │ │ │ ├── index.ts │ │ │ └── progress.svelte │ │ │ ├── radio-group │ │ │ ├── index.ts │ │ │ ├── radio-group-item.svelte │ │ │ └── radio-group.svelte │ │ │ ├── select │ │ │ ├── index.ts │ │ │ ├── select-content.svelte │ │ │ ├── select-item.svelte │ │ │ ├── select-label.svelte │ │ │ ├── select-separator.svelte │ │ │ ├── select-trigger.svelte │ │ │ └── select.svelte │ │ │ ├── separator │ │ │ ├── index.ts │ │ │ └── separator.svelte │ │ │ ├── sheet │ │ │ ├── index.ts │ │ │ ├── sheet-content.svelte │ │ │ ├── sheet-description.svelte │ │ │ ├── sheet-footer.svelte │ │ │ ├── sheet-header.svelte │ │ │ ├── sheet-overlay.svelte │ │ │ ├── sheet-portal.svelte │ │ │ └── sheet-title.svelte │ │ │ ├── skeleton │ │ │ ├── index.ts │ │ │ └── skeleton.svelte │ │ │ ├── slider │ │ │ ├── index.ts │ │ │ └── slider.svelte │ │ │ ├── switch │ │ │ ├── index.ts │ │ │ └── switch.svelte │ │ │ ├── table │ │ │ ├── index.ts │ │ │ ├── table-body.svelte │ │ │ ├── table-caption.svelte │ │ │ ├── table-cell.svelte │ │ │ ├── table-footer.svelte │ │ │ ├── table-head.svelte │ │ │ ├── table-header.svelte │ │ │ ├── table-row.svelte │ │ │ └── table.svelte │ │ │ ├── tabs │ │ │ ├── index.ts │ │ │ ├── tabs-content.svelte │ │ │ ├── tabs-list.svelte │ │ │ └── tabs-trigger.svelte │ │ │ ├── textarea │ │ │ ├── index.ts │ │ │ └── textarea.svelte │ │ │ ├── toggle │ │ │ ├── index.ts │ │ │ └── toggle.svelte │ │ │ └── tooltip │ │ │ ├── index.ts │ │ │ └── tooltip-content.svelte │ ├── index.js │ └── utils.ts └── routes │ ├── +layout.svelte │ ├── +page.svelte │ └── view │ └── [name] │ ├── +layout.svelte │ └── +page.svelte ├── static └── favicon.png ├── svelte.config.js ├── tailwind.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | gits/ 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /npx/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | dist 4 | build -------------------------------------------------------------------------------- /npx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "openv0", 3 | "version": "1.0.1", 4 | "description": "", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/raidendotai/openv0.git" 8 | }, 9 | "bin": "./bin.js", 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "homepage": "https://github.com/raidendotai/openv0", 14 | "dependencies": { 15 | "adm-zip": "^0.5.10", 16 | "fs-extra": "^11.1.1", 17 | "inquirer": "^8.0.0", 18 | "ora": "^5.4.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /server/.env: -------------------------------------------------------------------------------- 1 | OPENAI_MODEL = "gpt-4" 2 | PASS__CONTEXT__COMPONENTS_LIBRARY_EXAMPLES__TOKEN_LIMIT = 500 3 | OPENV0__COLLECT_UIRAY = 1 4 | OPENV0__API = "https://api.openv0.com" 5 | API__GENERATE_ATTEMPTS = 1 6 | 7 | WEBAPP_ROOT = "../webapp" 8 | OPENAI_API_KEY = "YOUR_OPENAI_KEY" 9 | -------------------------------------------------------------------------------- /server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /server/.prettierignore: -------------------------------------------------------------------------------- 1 | gits/ 2 | vectordb/ 3 | -------------------------------------------------------------------------------- /server/_test.db_build.js: -------------------------------------------------------------------------------- 1 | const build = require(`./build.js`); 2 | async function main() { 3 | await build.db(); 4 | } 5 | main(); 6 | -------------------------------------------------------------------------------- /server/_validate+postprocess.test.js: -------------------------------------------------------------------------------- 1 | async function test() { 2 | const validate_check = require( 3 | `./modules/multipass/passes/validate-check-generated-component/index.js`, 4 | ); 5 | const validate_fix = require( 6 | `./modules/multipass/passes/validate-fix-generated-component/index.js`, 7 | ); 8 | 9 | const stream = { 10 | // used to stream updates to frontend ; if not needed pass this instead 11 | write: (e) => { 12 | true; 13 | }, 14 | }; 15 | 16 | const userInputComponents_logs = require( 17 | `./_example_component_problems_logs.test.js`, 18 | ); 19 | let example = userInputComponents_logs.missingImportsPlusIllegalImports; 20 | console.dir({ 21 | test_case_code: example.pipeline.stages["component-code"], 22 | }); 23 | 24 | const validate_check_response = await validate_check.run({ 25 | stream, 26 | ...example, 27 | }); 28 | // console.dir({validate_check_response}) 29 | 30 | example.pipeline.stages[validate_check_response.type] = { 31 | success: validate_check_response.success, 32 | data: validate_check_response.data, 33 | }; 34 | 35 | const validate_fix_response = await validate_fix.run({ 36 | stream, 37 | ...example, 38 | }); 39 | 40 | console.dir( 41 | { 42 | "debug _validate+process test *************": "*****************", 43 | validate_fix_response, 44 | }, 45 | { depth: true }, 46 | ); 47 | } 48 | test(); 49 | -------------------------------------------------------------------------------- /server/build/README.md: -------------------------------------------------------------------------------- 1 | - building library to be used in multipass stages 2 | - refer to these modules to learn how to extend openv0 to new frameworks/libraries/plugins 3 | - build modules are called from /build.js in server root 4 | 5 | --- 6 | 7 | # building components library 8 | 9 | dirty parsing docs and folders to generate components library 10 | 11 | ### build/components/... 12 | 13 | generates components db assets in : 14 | 15 | - `/library/components/{framework}/{components_library}/dump.json` → 16 | 17 | ### build/allowed_imports/... 18 | 19 | used to validate components post-generation, using server side babel (ie. hallucinated imports, missing imports) 20 | 21 | can either be achieved by: 22 | 23 | - listing node_modules packages inside webapps 24 | - hardcoding allowed imports; ie : 25 | - shadcn-svelte doesnt create a node_modules/packages, components saved directly in /src 26 | - (later on) importing other generated components inside generated UI view 27 | 28 | metadata should have import paths (ie. `@nextui-org/react`) and prefixes as well (ie. `@/components/`) 29 | 30 | generates components metadata assets in : 31 | 32 | - `/library/components/{framework}/{components_library}/metadata.json` → 33 | 34 | --- 35 | 36 | # building icons library 37 | 38 | ### build/icons 39 | 40 | generates icons db assets : 41 | 42 | - `/library/icons/{icons_library}/dump.json` → icon name and metadata 43 | - `/library/icons/{icons_library}/metadata.json` → metadata to know how to import icons library in each framework 44 | - `/library/icons/{icons_library}/vectordb/index.json` → local vector DB using vectra 45 | -------------------------------------------------------------------------------- /server/build/allowed_imports/next/flowbite.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `next/flowbite` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `flowbite-react`, 11 | `react-icons`, // is in docs, might be used in generated code, ie. "react-icons/fa" 12 | `framer-motion`, 13 | ], 14 | }; 15 | 16 | fs.writeFileSync( 17 | `./library/components/next/flowbite/metadata.json`, 18 | JSON.stringify(metadata), 19 | ); 20 | 21 | console.dir({ 22 | build: `./build/allowed_imports/next/flowbite.js`, 23 | metadata: `./library/components/next/flowbite/metadata.json`, 24 | }); 25 | } 26 | module.exports = { build }; 27 | -------------------------------------------------------------------------------- /server/build/allowed_imports/next/nextui.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `next/nextui` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `@nextui-org/`, //checks in multipass validation are prefix style ; next+nextui needs individual component imports 11 | `framer-motion`, 12 | ], 13 | }; 14 | 15 | fs.writeFileSync( 16 | `./library/components/next/nextui/metadata.json`, 17 | JSON.stringify(metadata), 18 | ); 19 | 20 | console.dir({ 21 | build: `./build/allowed_imports/next/nextui.js`, 22 | metadata: `./library/components/next/nextui/metadata.json`, 23 | }); 24 | } 25 | module.exports = { build }; 26 | -------------------------------------------------------------------------------- /server/build/allowed_imports/next/shadcn.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `next/shadcn` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `@/components/ui/`, // checks in multipass postprocess/validation are prefix style 11 | `@/lib/utils`, 12 | `@radix-ui/react-dropdown-menu`, 13 | `framer-motion`, 14 | ], 15 | }; 16 | 17 | fs.writeFileSync( 18 | `./library/components/next/shadcn/metadata.json`, 19 | JSON.stringify(metadata), 20 | ); 21 | 22 | console.dir({ 23 | build: `./build/allowed_imports/next/shadcn.js`, 24 | metadata: `./library/components/next/shadcn/metadata.json`, 25 | }); 26 | } 27 | module.exports = { build }; 28 | -------------------------------------------------------------------------------- /server/build/allowed_imports/react/flowbite.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `react/flowbite` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `flowbite-react`, 11 | `react-icons`, // is in docs, might be used in generated code 12 | `tailwind-merge`, 13 | `react-day-picker`, 14 | `framer-motion`, 15 | ], 16 | }; 17 | 18 | fs.writeFileSync( 19 | `./library/components/react/flowbite/metadata.json`, 20 | JSON.stringify(metadata), 21 | ); 22 | 23 | console.dir({ 24 | build: `./build/allowed_imports/react/flowbite.js`, 25 | metadata: `./library/components/react/flowbite/metadata.json`, 26 | }); 27 | } 28 | module.exports = { build }; 29 | -------------------------------------------------------------------------------- /server/build/allowed_imports/react/nextui.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `react/nextui` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [`@nextui-org/react`, `react-day-picker`, `framer-motion`], 10 | }; 11 | 12 | fs.writeFileSync( 13 | `./library/components/react/nextui/metadata.json`, 14 | JSON.stringify(metadata), 15 | ); 16 | 17 | console.dir({ 18 | build: `./build/allowed_imports/react/nextui.js`, 19 | metadata: `./library/components/react/nextui/metadata.json`, 20 | }); 21 | } 22 | module.exports = { build }; 23 | -------------------------------------------------------------------------------- /server/build/allowed_imports/react/shadcn.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `react/shadcn` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `@/components/ui/`, // checks in multipass postprocess/validation are prefix style 11 | `@/lib/utils`, 12 | `@radix-ui/react-dropdown-menu`, 13 | `react-day-picker`, 14 | `framer-motion`, 15 | ], 16 | }; 17 | 18 | fs.writeFileSync( 19 | `./library/components/react/shadcn/metadata.json`, 20 | JSON.stringify(metadata), 21 | ); 22 | 23 | console.dir({ 24 | build: `./build/allowed_imports/react/shadcn.js`, 25 | metadata: `./library/components/react/shadcn/metadata.json`, 26 | }); 27 | } 28 | module.exports = { build }; 29 | -------------------------------------------------------------------------------- /server/build/allowed_imports/svelte/flowbite.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `svelte/flowbite` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `flowbite-svelte`, 11 | `flowbite-svelte-icons`, // is in docs, might be used in generated code 12 | `svelte-motion`, 13 | ], 14 | }; 15 | 16 | fs.writeFileSync( 17 | `./library/components/svelte/flowbite/metadata.json`, 18 | JSON.stringify(metadata), 19 | ); 20 | 21 | console.dir({ 22 | build: `./build/allowed_imports/svelte/flowbite.js`, 23 | metadata: `./library/components/svelte/flowbite/metadata.json`, 24 | }); 25 | } 26 | module.exports = { build }; 27 | -------------------------------------------------------------------------------- /server/build/allowed_imports/svelte/shadcn.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | 3 | async function build() { 4 | console.dir({ "build/allowed_imports": `svelte/shadcn` }); 5 | 6 | // would write something like {import : [`flowbite-react` , /*any additional library required */]} 7 | 8 | const metadata = { 9 | import: [ 10 | `$lib/components/ui`, 11 | `$lib/utils`, 12 | `svelte-motion`, 13 | `radix-icons-svelte`, // might be included because is in docs 14 | ], 15 | }; 16 | 17 | fs.writeFileSync( 18 | `./library/components/svelte/shadcn/metadata.json`, 19 | JSON.stringify(metadata), 20 | ); 21 | 22 | console.dir({ 23 | build: `./build/allowed_imports/svelte/shadcn.js`, 24 | metadata: `./library/components/svelte/shadcn/metadata.json`, 25 | }); 26 | } 27 | module.exports = { build }; 28 | -------------------------------------------------------------------------------- /server/library/README.md: -------------------------------------------------------------------------------- 1 | library of assets, mostly generated by /build.js 2 | -------------------------------------------------------------------------------- /server/library/components/next/flowbite/metadata.json: -------------------------------------------------------------------------------- 1 | { "import": ["flowbite-react", "react-icons", "framer-motion"] } 2 | -------------------------------------------------------------------------------- /server/library/components/next/nextui/metadata.json: -------------------------------------------------------------------------------- 1 | { "import": ["@nextui-org/", "framer-motion"] } 2 | -------------------------------------------------------------------------------- /server/library/components/next/shadcn/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "import": [ 3 | "@/components/ui/", 4 | "@/lib/utils", 5 | "@radix-ui/react-dropdown-menu", 6 | "framer-motion" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /server/library/components/react/flowbite/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "import": [ 3 | "flowbite-react", 4 | "react-icons", 5 | "tailwind-merge", 6 | "react-day-picker", 7 | "framer-motion" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /server/library/components/react/nextui/metadata.json: -------------------------------------------------------------------------------- 1 | { "import": ["@nextui-org/react", "react-day-picker", "framer-motion"] } 2 | -------------------------------------------------------------------------------- /server/library/components/react/shadcn/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "import": [ 3 | "@/components/ui/", 4 | "@/lib/utils", 5 | "@radix-ui/react-dropdown-menu", 6 | "react-day-picker", 7 | "framer-motion" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /server/library/components/svelte/flowbite/metadata.json: -------------------------------------------------------------------------------- 1 | { "import": ["flowbite-svelte", "flowbite-svelte-icons", "svelte-motion"] } 2 | -------------------------------------------------------------------------------- /server/library/components/svelte/shadcn/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "import": [ 3 | "$lib/components/ui", 4 | "$lib/utils", 5 | "svelte-motion", 6 | "radix-icons-svelte" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /server/library/icons/lucide/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "import": { 3 | "react": "lucide-react", 4 | "next": "lucide-react", 5 | "svelte": "lucide-svelte" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /server/library/icons/lucide/vectordb/.gitignore: -------------------------------------------------------------------------------- 1 | index.json -------------------------------------------------------------------------------- /server/library/icons/lucide/vectordb/index.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/library/icons/lucide/vectordb/index.zip -------------------------------------------------------------------------------- /server/modules/README.md: -------------------------------------------------------------------------------- 1 | multipass is a set of plugins that are executed in sequence 2 | -------------------------------------------------------------------------------- /server/modules/log/index.js: -------------------------------------------------------------------------------- 1 | const axios = require(`axios`); 2 | require("dotenv").config(); 3 | 4 | function _serialize(obj) { 5 | if (typeof obj === "function") { 6 | return false; 7 | } 8 | if (typeof obj === "object" && obj !== null) { 9 | for (const key in obj) { 10 | obj[key] = _serialize(obj[key]); 11 | } 12 | } 13 | return obj; 14 | } 15 | 16 | async function uiray(query) { 17 | try { 18 | await axios.post( 19 | `${process.env.OPENV0__API}/dev/uiray/logs`, 20 | _serialize(query), 21 | { 22 | headers: { 23 | "Content-Type": "application/json", 24 | }, 25 | }, 26 | ); 27 | } catch (e) { 28 | true; 29 | } 30 | console.dir(query); 31 | } 32 | async function passThrough(query) { 33 | // console.dir(query); 34 | true; 35 | } 36 | module.exports = { 37 | uiray, 38 | passThrough, 39 | }; 40 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/animate-component/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/animate-component/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/animate-component/index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | async function run(req) { 3 | console.log("> init : " + __dirname.split(path.sep).slice(-2).join(`/`)); 4 | return { 5 | type: `component`, 6 | success: true, 7 | data: {}, 8 | }; 9 | } 10 | 11 | module.exports = { 12 | run, 13 | }; 14 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/build-component-generation-context/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/build-component-generation-context/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/build-component-generation-context/rag_components.js: -------------------------------------------------------------------------------- 1 | async function run(query) { 2 | // query : { components : ['component_suggested_by_llm',...] , framework : 'react', library : 'nextui' } 3 | 4 | if (!query.components || !query.components.length) return []; 5 | 6 | const components_library = require( 7 | `../../../../library/components/${query.framework}/${query.library}/dump.json`, 8 | ); 9 | 10 | return components_library.filter((e) => { 11 | return query.components 12 | .map((e) => e.toLowerCase()) 13 | .includes(e.name.toLowerCase()); 14 | }); 15 | } 16 | 17 | module.exports = { 18 | run, 19 | }; 20 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/build-component-generation-context/rag_icons.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | 4 | const { LocalIndex } = require(`vectra`); 5 | const { OpenAI } = require("openai"); 6 | require("dotenv").config(); 7 | const openai = new OpenAI({ 8 | apiKey: process.env.OPENAI_API_KEY, 9 | }); 10 | 11 | async function run(query) { 12 | // query : { icons:["icon_suggested_by_llm" , "..."] , framework : 'svelte' , library : `lucide` } 13 | 14 | if (!query.icons || !query.icons.length) 15 | return { 16 | icons: [], 17 | import: require( 18 | `../../../../library/icons/${query.library}/metadata.json`, 19 | ).import[query.framework], 20 | }; 21 | 22 | const vectorDB_index = new LocalIndex( 23 | `./library/icons/${query.library}/vectordb`, 24 | ); 25 | 26 | const icons = await Promise.all( 27 | query.icons.map(async (e) => { 28 | return { 29 | icon: e, 30 | retrieved: ( 31 | await vectorDB_index.queryItems( 32 | ( 33 | await openai.embeddings.create({ 34 | input: e, 35 | model: `text-embedding-ada-002`, 36 | }) 37 | ).data[0].embedding, 38 | 10, 39 | ) 40 | ) 41 | .slice(1) 42 | .map((e) => e.item.metadata.name), 43 | }; 44 | }), 45 | ); 46 | return { 47 | icons, 48 | import: require(`../../../../library/icons/${query.library}/metadata.json`) 49 | .import[query.framework], 50 | }; 51 | } 52 | 53 | module.exports = { 54 | run, 55 | }; 56 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/design-component-iteration-from-description/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/design-component-iteration-from-description/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/design-component-iteration-from-json/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/design-component-iteration-from-json/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/design-component-new-from-description/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/design-component-new-from-description/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/design-component-new-from-json/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/design-component-new-from-json/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/export-component/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/export-component/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/export-component/export_next.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | require("dotenv").config(); 3 | 4 | function _mkdir(path) { 5 | try { 6 | if (!fs.existsSync(path)) fs.mkdirSync(path, { recursive: true }); 7 | } catch (e) { 8 | true; 9 | } 10 | } 11 | 12 | async function export_component(req) { 13 | console.dir({ 14 | warning: `exports not yet defined for Next framework`, 15 | }); 16 | return { 17 | exported: false, 18 | }; 19 | } 20 | module.exports = { 21 | export_component, 22 | }; 23 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/export-component/export_react.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | require("dotenv").config(); 3 | 4 | function _mkdir(path) { 5 | try { 6 | if (!fs.existsSync(path)) fs.mkdirSync(path, { recursive: true }); 7 | } catch (e) { 8 | true; 9 | } 10 | } 11 | 12 | async function export_component(req) { 13 | const output_dir = `${ 14 | process.env.WEBAPP_ROOT 15 | }/src/components/openv0_generated/${ 16 | req.pipeline.stages[`component-design-task`].data.name 17 | }`; 18 | const output_file = 19 | `${output_dir}/${req.pipeline.stages[`component-design-task`].data.name}_` + 20 | `${req.pipeline.stages[`component`].data.version}.tsx`; 21 | _mkdir(output_dir); 22 | fs.writeFileSync(output_file, req.pipeline.stages[`component`].data.code); 23 | console.dir({ 24 | exported: output_file, 25 | }); 26 | return { 27 | exported: output_file, 28 | }; 29 | } 30 | module.exports = { 31 | export_component, 32 | }; 33 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/export-component/export_svelte.js: -------------------------------------------------------------------------------- 1 | const fs = require(`fs`); 2 | require("dotenv").config(); 3 | 4 | function _mkdir(path) { 5 | try { 6 | if (!fs.existsSync(path)) fs.mkdirSync(path, { recursive: true }); 7 | } catch (e) { 8 | true; 9 | } 10 | } 11 | 12 | async function export_component(req) { 13 | const output_dir = `${process.env.WEBAPP_ROOT}/src/lib/openv0_generated/${ 14 | req.pipeline.stages[`component-design-task`].data.name 15 | }`; 16 | const output_file = 17 | `${output_dir}/${req.pipeline.stages[`component-design-task`].data.name}_` + 18 | `${req.pipeline.stages[`component`].data.version}.svelte`; 19 | _mkdir(output_dir); 20 | fs.writeFileSync(output_file, req.pipeline.stages[`component`].data.code); 21 | console.dir({ 22 | exported: output_file, 23 | }); 24 | return { 25 | exported: output_file, 26 | }; 27 | } 28 | module.exports = { 29 | export_component, 30 | }; 31 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/export-component/index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | async function run(req) { 4 | console.log("> init : " + __dirname.split(path.sep).slice(-2).join(`/`)); 5 | 6 | if (!req.pipeline.stages[`component`].success) { 7 | return { 8 | type: `component-export`, 9 | success: false, 10 | data: {}, 11 | }; 12 | } 13 | 14 | const export_response = await require( 15 | `./export_${req.query.framework}.js`, 16 | ).export_component(req); 17 | return { 18 | type: `component-export`, 19 | success: true, 20 | data: export_response, 21 | }; 22 | } 23 | 24 | module.exports = { 25 | run, 26 | }; 27 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/generate-component-iteration/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/generate-component-iteration/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/generate-component-new/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/generate-component-new/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/generate-component-placeholder-data/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/generate-component-placeholder-data/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/generate-component-placeholder-data/index.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | async function run(req) { 3 | console.log("> init : " + __dirname.split(path.sep).slice(-2).join(`/`)); 4 | return { 5 | type: `component-placeholder-data`, 6 | success: true, 7 | data: {}, 8 | }; 9 | } 10 | 11 | module.exports = { 12 | run, 13 | }; 14 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/postprocess-generated-component/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/postprocess-generated-component/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/postprocess-generated-component/index.js: -------------------------------------------------------------------------------- 1 | const path = require(`path`); 2 | 3 | /* 4 | simple pass through for now; augment later 5 | 6 | picks from `component-validation-fix` pass 7 | returns `component` type, with name / version (timestamp) etc 8 | 9 | */ 10 | 11 | async function run(req) { 12 | console.log("> init : " + __dirname.split(path.sep).slice(-2).join(`/`)); 13 | 14 | return { 15 | type: `component`, 16 | success: req.pipeline.stages[`component-validation-fix`].success, 17 | data: { 18 | version: `${Date.now()}`, 19 | code: req.pipeline.stages[`component-validation-fix`].data.code, 20 | }, 21 | }; 22 | } 23 | 24 | module.exports = { 25 | run, 26 | }; 27 | -------------------------------------------------------------------------------- /server/modules/multipass/passes/store-component/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/store-component/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/validate-check-generated-component/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/validate-check-generated-component/README.md -------------------------------------------------------------------------------- /server/modules/multipass/passes/validate-fix-generated-component/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/modules/multipass/passes/validate-fix-generated-component/README.md -------------------------------------------------------------------------------- /server/openv0.sqlite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/server/openv0.sqlite -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "_test.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@babel/generator": "^7.23.0", 14 | "@babel/parser": "^7.23.0", 15 | "@babel/traverse": "^7.23.0", 16 | "@dqbd/tiktoken": "^1.0.7", 17 | "@vitejs/plugin-legacy": "^4.1.1", 18 | "axios": "^1.5.1", 19 | "babel-loader": "^9.1.3", 20 | "babel-preset-react": "^6.24.1", 21 | "cheerio": "^1.0.0-rc.12", 22 | "cors": "^2.8.5", 23 | "dotenv": "^16.3.1", 24 | "express": "^4.18.2", 25 | "htmlparser2": "^9.0.0", 26 | "import-fixer": "^0.8.2204282156", 27 | "markdown-it": "^13.0.1", 28 | "mongoose": "^7.5.3", 29 | "mongoose-schema-jsonschema": "^2.1.0", 30 | "openai": "^4.10.0", 31 | "schm": "^0.4.1", 32 | "sequelize": "^6.33.0", 33 | "slugify": "^1.6.6", 34 | "sqlite3": "^5.1.6", 35 | "vectra": "^0.4.4" 36 | }, 37 | "devDependencies": { 38 | "eslint": "^8.50.0", 39 | "eslint-plugin-svelte": "^2.33.2", 40 | "svelte": "^4.2.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webapps-starters/README.md: -------------------------------------------------------------------------------- 1 | starter templates for different frameworks, with component libraries preinstalled -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | parserOptions: { 18 | ecmaVersion: 'latest', 19 | sourceType: 'module', 20 | project: ['./tsconfig.json', './tsconfig.node.json'], 21 | tsconfigRootDir: __dirname, 22 | }, 23 | ``` 24 | 25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 28 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | openv0 | by Raiden AI 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flowbite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "autoprefixer": "^10.4.16", 14 | "axios": "^1.5.1", 15 | "date-fns": "^2.30.0", 16 | "flowbite-react": "^0.6.0", 17 | "formik": "^2.4.5", 18 | "lucide-react": "^0.279.0", 19 | "postcss": "^8.4.30", 20 | "react": "^18.2.0", 21 | "react-dom": "^18.2.0", 22 | "react-feather": "^2.0.10", 23 | "react-icons": "^4.11.0", 24 | "react-router-dom": "^6.16.0", 25 | "tailwind-merge": "^1.14.0", 26 | "tailwindcss": "^3.3.3", 27 | "yup": "^1.3.2", 28 | "zod": "^3.22.2" 29 | }, 30 | "devDependencies": { 31 | "@types/react": "^18.2.15", 32 | "@types/react-dom": "^18.2.7", 33 | "@typescript-eslint/eslint-plugin": "^6.0.0", 34 | "@typescript-eslint/parser": "^6.0.0", 35 | "@vitejs/plugin-react": "^4.0.3", 36 | "eslint": "^8.45.0", 37 | "eslint-plugin-react-hooks": "^4.6.0", 38 | "eslint-plugin-react-refresh": "^0.4.3", 39 | "typescript": "^5.0.2", 40 | "vite": "^4.4.5" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/public/openv0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/webapps-starters/react/flowbite/public/openv0.png -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/src/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | :root { 7 | --scrollbar-thumb: rgba(100, 100, 100, 1); 8 | --scrollbar-track: rgba(100, 100, 100, 1); 9 | 10 | } 11 | 12 | .dark { 13 | --scrollbar-thumb: rgba(50, 50, 50, 1); 14 | --scrollbar-track: rgba(50, 50, 50, 1); 15 | } 16 | 17 | * { 18 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 19 | } 20 | 21 | *::selection { 22 | background: #3700b3; 23 | color: white; 24 | } 25 | 26 | ::-webkit-scrollbar-thumb { 27 | background-color: var(--scrollbar-thumb); 28 | opacity: 0.5; /* Adjust opacity as needed */ 29 | } 30 | 31 | ::-webkit-scrollbar-track { 32 | background-color: var(--scrollbar-track); 33 | } 34 | 35 | ::-webkit-scrollbar { 36 | width: 2px; /* Adjust scrollbar width as needed */ 37 | border-radius: 0px; /* Adjust scrollbar corner radius as needed */ 38 | } 39 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | 5 | color-scheme: light dark; 6 | 7 | font-synthesis: none; 8 | text-rendering: optimizeLegibility; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | -webkit-text-size-adjust: 100%; 12 | } 13 | 14 | a { 15 | font-weight: 500; 16 | text-decoration: inherit; 17 | } 18 | a:hover { 19 | } 20 | 21 | body { 22 | 23 | } 24 | 25 | h1 { 26 | /*font-size: 3.2em;*/ 27 | line-height: 1.1; 28 | } 29 | 30 | button { 31 | border-radius: 8px; 32 | border: 1px solid transparent; 33 | padding: 0.6em 1.2em; 34 | font-size: 1em; 35 | font-weight: 500; 36 | font-family: inherit; 37 | background-color: #1a1a1a; 38 | cursor: pointer; 39 | transition: border-color 0.25s; 40 | } 41 | button:hover { 42 | } 43 | button:focus, 44 | button:focus-visible { 45 | outline: 4px auto -webkit-focus-ring-color; 46 | } 47 | 48 | @media (prefers-color-scheme: light) { 49 | :root { 50 | color: #213547; 51 | background-color: #ffffff; 52 | } 53 | a:hover { 54 | } 55 | button { 56 | background-color: #f9f9f9; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | './src/**/*.{js,jsx,ts,tsx}', 5 | 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}' 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [ 11 | require('flowbite/plugin') 12 | ], 13 | } 14 | 15 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /webapps-starters/react/flowbite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | parserOptions: { 18 | ecmaVersion: 'latest', 19 | sourceType: 'module', 20 | project: ['./tsconfig.json', './tsconfig.node.json'], 21 | tsconfigRootDir: __dirname, 22 | }, 23 | ``` 24 | 25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 28 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | openv0 | by Raiden AI 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextui", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@nextui-org/react": "^2.1.13", 14 | "@nextui-org/system": "^2.0.10", 15 | "@nextui-org/theme": "^2.1.9", 16 | "axios": "^1.5.1", 17 | "date-fns": "^2.30.0", 18 | "formik": "^2.4.5", 19 | "framer-motion": "^10.16.4", 20 | "lucide-react": "^0.279.0", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0", 23 | "react-feather": "^2.0.10", 24 | "react-router-dom": "^6.16.0", 25 | "yup": "^1.3.2", 26 | "zod": "^3.22.2" 27 | }, 28 | "devDependencies": { 29 | "@types/react": "^18.2.15", 30 | "@types/react-dom": "^18.2.7", 31 | "@typescript-eslint/eslint-plugin": "^6.0.0", 32 | "@typescript-eslint/parser": "^6.0.0", 33 | "@vitejs/plugin-react": "^4.0.3", 34 | "autoprefixer": "^10.4.16", 35 | "eslint": "^8.45.0", 36 | "eslint-plugin-react-hooks": "^4.6.0", 37 | "eslint-plugin-react-refresh": "^0.4.3", 38 | "postcss": "^8.4.30", 39 | "tailwindcss": "^3.3.3", 40 | "typescript": "^5.0.2", 41 | "vite": "^4.4.5" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/public/openv0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/webapps-starters/react/nextui/public/openv0.png -------------------------------------------------------------------------------- /webapps-starters/react/nextui/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/webapps-starters/react/nextui/src/App.css -------------------------------------------------------------------------------- /webapps-starters/react/nextui/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | 7 | --scrollbar-thumb: rgba(100, 100, 100, 1); 8 | --scrollbar-track: rgba(100, 100, 100, 1); 9 | 10 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 11 | line-height: 1.5; 12 | color-scheme: light dark; 13 | font-synthesis: none; 14 | text-rendering: optimizeLegibility; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-text-size-adjust: 100%; 18 | } 19 | 20 | .dark { 21 | --scrollbar-thumb: rgba(50, 50, 50, 1); 22 | --scrollbar-track: rgba(50, 50, 50, 1); 23 | } 24 | *{ 25 | font-family: 'Inter', sans-serif; 26 | } 27 | 28 | 29 | *::selection { 30 | background: #3700b3; 31 | color: white; 32 | } 33 | 34 | ::-webkit-scrollbar-thumb { 35 | background-color: var(--scrollbar-thumb); 36 | opacity: 0.5; /* Adjust opacity as needed */ 37 | } 38 | 39 | ::-webkit-scrollbar-track { 40 | background-color: var(--scrollbar-track); 41 | } 42 | 43 | ::-webkit-scrollbar { 44 | width: 2px; /* Adjust scrollbar width as needed */ 45 | border-radius: 0px; /* Adjust scrollbar corner radius as needed */ 46 | } 47 | 48 | @media (prefers-color-scheme: light) { 49 | } 50 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/src/main.tsx: -------------------------------------------------------------------------------- 1 | // main.tsx or main.jsx 2 | import React from 'react' 3 | import ReactDOM from 'react-dom/client' 4 | import {NextUIProvider} from '@nextui-org/react' 5 | import App from './App' 6 | import './index.css' 7 | 8 | ReactDOM.createRoot(document.getElementById('root')).render( 9 | 10 | 11 | 12 | 13 | , 14 | ) 15 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const { nextui } = require("@nextui-org/react"); 3 | export default { 4 | content: [ 5 | "./index.html", 6 | "./src/**/*.{js,ts,jsx,tsx}", 7 | "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" 8 | ], 9 | theme: { 10 | extend: {}, 11 | }, 12 | darkMode: "class", 13 | plugins: [nextui()] 14 | } -------------------------------------------------------------------------------- /webapps-starters/react/nextui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /webapps-starters/react/nextui/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:@typescript-eslint/recommended', 6 | 'plugin:react-hooks/recommended', 7 | ], 8 | parser: '@typescript-eslint/parser', 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | plugins: ['react-refresh'], 11 | rules: { 12 | 'react-refresh/only-export-components': 'warn', 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/README.md: -------------------------------------------------------------------------------- 1 | Based on [React + Vite + TypeScript + shadcn/ui Template (react-vite-ui)](https://github.com/Dan5py/react-vite-ui/) -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tailwind": { 6 | "config": "tailwind.config.js", 7 | "css": "src/styles/globals.css", 8 | "baseColor": "zinc", 9 | "cssVariables": false 10 | }, 11 | "aliases": { 12 | "components": "@/components", 13 | "utils": "@/lib/utils" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | openv0 | by Raiden AI 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/public/openv0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raidendotai/openv0/8d87809b09a4c65d5af7b0fa8ee7c9475b378286/webapps-starters/react/shadcn/public/openv0.png -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ErrorBoundary.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Fallback from './Fallback'; 3 | class ErrorBoundary extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { hasError: false }; 7 | } 8 | 9 | componentDidCatch(error, errorInfo) { 10 | this.setState({ hasError: true }); 11 | // You can also log the error information here 12 | console.error(error, errorInfo); 13 | } 14 | 15 | render() { 16 | if (this.state.hasError) { 17 | // Return your fallback component or an error message 18 | return ; 19 | } 20 | return this.props.children; 21 | } 22 | } 23 | 24 | export default ErrorBoundary; 25 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/Fallback.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { cn } from '@/lib/utils'; 3 | 4 | interface Props { 5 | className?: string; 6 | } 7 | 8 | export default function Fallback({ className }: Props) { 9 | return ( 10 |
fallback for failed component load
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" 2 | 3 | const AspectRatio = AspectRatioPrimitive.Root 4 | 5 | export { AspectRatio } 6 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Avatar = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >(({ className, ...props }, ref) => ( 10 | 18 | )) 19 | Avatar.displayName = AvatarPrimitive.Root.displayName 20 | 21 | const AvatarImage = React.forwardRef< 22 | React.ElementRef, 23 | React.ComponentPropsWithoutRef 24 | >(({ className, ...props }, ref) => ( 25 | 30 | )) 31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName 32 | 33 | const AvatarFallback = React.forwardRef< 34 | React.ElementRef, 35 | React.ComponentPropsWithoutRef 36 | >(({ className, ...props }, ref) => ( 37 | 45 | )) 46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName 47 | 48 | export { Avatar, AvatarImage, AvatarFallback } 49 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva, type VariantProps } from "class-variance-authority" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const badgeVariants = cva( 7 | "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", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | }, 19 | }, 20 | defaultVariants: { 21 | variant: "default", 22 | }, 23 | } 24 | ) 25 | 26 | export interface BadgeProps 27 | extends React.HTMLAttributes, 28 | VariantProps {} 29 | 30 | function Badge({ className, variant, ...props }: BadgeProps) { 31 | return ( 32 |
33 | ) 34 | } 35 | 36 | export { Badge, badgeVariants } 37 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/checkbox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox" 3 | import { Check } from "lucide-react" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const Checkbox = React.forwardRef< 8 | React.ElementRef, 9 | React.ComponentPropsWithoutRef 10 | >(({ className, ...props }, ref) => ( 11 | 19 | 22 | 23 | 24 | 25 | )) 26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName 27 | 28 | export { Checkbox } 29 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" 2 | 3 | const Collapsible = CollapsiblePrimitive.Root 4 | 5 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger 6 | 7 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent 8 | 9 | export { Collapsible, CollapsibleTrigger, CollapsibleContent } 10 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/hover-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const HoverCard = HoverCardPrimitive.Root 7 | 8 | const HoverCardTrigger = HoverCardPrimitive.Trigger 9 | 10 | const HoverCardContent = React.forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 14 | 24 | )) 25 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName 26 | 27 | export { HoverCard, HoverCardTrigger, HoverCardContent } 28 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as LabelPrimitive from "@radix-ui/react-label" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const labelVariants = cva( 8 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 9 | ) 10 | 11 | const Label = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef & 14 | VariantProps 15 | >(({ className, ...props }, ref) => ( 16 | 21 | )) 22 | Label.displayName = LabelPrimitive.Root.displayName 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as PopoverPrimitive from "@radix-ui/react-popover" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Popover = PopoverPrimitive.Root 7 | 8 | const PopoverTrigger = PopoverPrimitive.Trigger 9 | 10 | const PopoverContent = React.forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 14 | 15 | 25 | 26 | )) 27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName 28 | 29 | export { Popover, PopoverTrigger, PopoverContent } 30 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/progress.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ProgressPrimitive from "@radix-ui/react-progress" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Progress = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >(({ className, value, ...props }, ref) => ( 10 | 18 | 22 | 23 | )) 24 | Progress.displayName = ProgressPrimitive.Root.displayName 25 | 26 | export { Progress } 27 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/radio-group.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" 3 | import { Circle } from "lucide-react" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const RadioGroup = React.forwardRef< 8 | React.ElementRef, 9 | React.ComponentPropsWithoutRef 10 | >(({ className, ...props }, ref) => { 11 | return ( 12 | 17 | ) 18 | }) 19 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName 20 | 21 | const RadioGroupItem = React.forwardRef< 22 | React.ElementRef, 23 | React.ComponentPropsWithoutRef 24 | >(({ className, children, ...props }, ref) => { 25 | return ( 26 | 34 | 35 | 36 | 37 | 38 | ) 39 | }) 40 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName 41 | 42 | export { RadioGroup, RadioGroupItem } 43 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Separator = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >( 10 | ( 11 | { className, orientation = "horizontal", decorative = true, ...props }, 12 | ref 13 | ) => ( 14 | 25 | ) 26 | ) 27 | Separator.displayName = SeparatorPrimitive.Root.displayName 28 | 29 | export { Separator } 30 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/slider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as SliderPrimitive from "@radix-ui/react-slider" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Slider = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >(({ className, ...props }, ref) => ( 10 | 18 | 19 | 20 | 21 | 22 | 23 | )) 24 | Slider.displayName = SliderPrimitive.Root.displayName 25 | 26 | export { Slider } 27 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/switch.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as SwitchPrimitives from "@radix-ui/react-switch" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Switch = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >(({ className, ...props }, ref) => ( 10 | 18 | 23 | 24 | )) 25 | Switch.displayName = SwitchPrimitives.Root.displayName 26 | 27 | export { Switch } 28 | -------------------------------------------------------------------------------- /webapps-starters/react/shadcn/src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |