From e77f7d2d23d36d6ff2705bfa43bb0f637578e908 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 13 Feb 2023 21:28:40 +0400 Subject: [PATCH] feat(examples): add example app (#80) --- apps/www/components/theme-provider.tsx | 4 +- apps/www/components/ui/toast.tsx | 2 +- .../content/docs/primitives/dropdown-menu.mdx | 4 + examples/playground/.editorconfig | 10 + examples/playground/.eslintignore | 5 + examples/playground/.eslintrc.json | 20 + examples/playground/.gitignore | 36 + examples/playground/.prettierignore | 12 + examples/playground/.vscode/settings.json | 4 + examples/playground/README.md | 7 + examples/playground/app/(auth)/login/page.tsx | 43 + .../playground/app/(auth)/signup/page.tsx | 48 + .../playground/app/(playground)/layout.tsx | 47 + examples/playground/app/(playground)/page.tsx | 135 + examples/playground/app/head.tsx | 43 + examples/playground/app/layout.tsx | 45 + examples/playground/components/analytics.tsx | 7 + .../playground/components/code-viewer.tsx | 91 + examples/playground/components/icons.tsx | 154 + examples/playground/components/main-nav.tsx | 105 + .../components/maxlength-selector.tsx | 52 + .../playground/components/model-selector.tsx | 162 + .../playground/components/preset-actions.tsx | 124 + .../playground/components/preset-save.tsx | 46 + .../playground/components/preset-selector.tsx | 81 + .../playground/components/preset-share.tsx | 60 + .../playground/components/site-footer.tsx | 35 + .../playground/components/site-header.tsx | 54 + .../components/tailwind-indicator.tsx | 16 + .../components/temperature-selector.tsx | 54 + .../playground/components/theme-provider.tsx | 9 + .../playground/components/theme-toggle.tsx | 42 + .../playground/components/top-p-selector.tsx | 51 + .../playground/components/ui/accordion.tsx | 63 + .../playground/components/ui/alert-dialog.tsx | 156 + .../playground/components/ui/aspect-ratio.tsx | 7 + examples/playground/components/ui/avatar.tsx | 50 + examples/playground/components/ui/button.tsx | 53 + .../playground/components/ui/checkbox.tsx | 30 + .../playground/components/ui/collapsible.tsx | 11 + examples/playground/components/ui/command.tsx | 158 + .../playground/components/ui/context-menu.tsx | 200 + examples/playground/components/ui/dialog.tsx | 130 + .../components/ui/dropdown-menu.tsx | 203 + .../playground/components/ui/hover-card.tsx | 29 + examples/playground/components/ui/input.tsx | 24 + examples/playground/components/ui/label.tsx | 23 + examples/playground/components/ui/menubar.tsx | 236 + .../components/ui/navigation-menu.tsx | 128 + examples/playground/components/ui/popover.tsx | 31 + .../playground/components/ui/progress.tsx | 28 + .../playground/components/ui/radio-group.tsx | 44 + .../playground/components/ui/scroll-area.tsx | 48 + examples/playground/components/ui/select.tsx | 113 + .../playground/components/ui/separator.tsx | 31 + examples/playground/components/ui/slider.tsx | 28 + examples/playground/components/ui/switch.tsx | 29 + examples/playground/components/ui/tabs.tsx | 55 + .../playground/components/ui/textarea.tsx | 24 + examples/playground/components/ui/toast.tsx | 128 + examples/playground/components/ui/toaster.tsx | 36 + examples/playground/components/ui/toggle.tsx | 45 + examples/playground/components/ui/tooltip.tsx | 31 + .../playground/components/user-auth-form.tsx | 69 + examples/playground/components/user-nav.tsx | 94 + examples/playground/config/site.ts | 19 + examples/playground/data/examples.ts | 55 + examples/playground/data/models.ts | 56 + examples/playground/data/presets.ts | 44 + examples/playground/data/teams.tsx | 17 + examples/playground/data/user.ts | 8 + .../playground/hooks/use-mutation-observer.ts | 20 + examples/playground/hooks/use-toast.ts | 188 + examples/playground/lib/utils.ts | 6 + examples/playground/next-env.d.ts | 5 + examples/playground/next.config.mjs | 18 + examples/playground/package.json | 74 + examples/playground/pages/.gitkeep | 0 examples/playground/pnpm-lock.yaml | 5343 +++++++++++++++++ examples/playground/postcss.config.js | 1 + examples/playground/prettier.config.js | 29 + .../public/android-chrome-192x192.png | Bin 0 -> 8183 bytes .../public/android-chrome-512x512.png | Bin 0 -> 29961 bytes .../playground/public/apple-touch-icon.png | Bin 0 -> 7566 bytes examples/playground/public/favicon-16x16.png | Bin 0 -> 295 bytes examples/playground/public/favicon-32x32.png | Bin 0 -> 639 bytes examples/playground/public/favicon.ico | Bin 0 -> 15406 bytes examples/playground/public/og-2.jpg | Bin 0 -> 66193 bytes examples/playground/public/og.jpg | Bin 0 -> 122174 bytes examples/playground/public/site.webmanifest | 19 + examples/playground/styles/globals.css | 3 + examples/playground/tailwind.config.js | 7 + examples/playground/tsconfig.json | 28 + examples/playground/types/index.ts | 33 + package.json | 1 + pnpm-lock.yaml | 218 +- pnpm-workspace.yaml | 1 + tailwind.config.js | 2 +- 98 files changed, 10094 insertions(+), 44 deletions(-) create mode 100644 examples/playground/.editorconfig create mode 100644 examples/playground/.eslintignore create mode 100644 examples/playground/.eslintrc.json create mode 100644 examples/playground/.gitignore create mode 100644 examples/playground/.prettierignore create mode 100644 examples/playground/.vscode/settings.json create mode 100644 examples/playground/README.md create mode 100644 examples/playground/app/(auth)/login/page.tsx create mode 100644 examples/playground/app/(auth)/signup/page.tsx create mode 100644 examples/playground/app/(playground)/layout.tsx create mode 100644 examples/playground/app/(playground)/page.tsx create mode 100644 examples/playground/app/head.tsx create mode 100644 examples/playground/app/layout.tsx create mode 100644 examples/playground/components/analytics.tsx create mode 100644 examples/playground/components/code-viewer.tsx create mode 100644 examples/playground/components/icons.tsx create mode 100644 examples/playground/components/main-nav.tsx create mode 100644 examples/playground/components/maxlength-selector.tsx create mode 100644 examples/playground/components/model-selector.tsx create mode 100644 examples/playground/components/preset-actions.tsx create mode 100644 examples/playground/components/preset-save.tsx create mode 100644 examples/playground/components/preset-selector.tsx create mode 100644 examples/playground/components/preset-share.tsx create mode 100644 examples/playground/components/site-footer.tsx create mode 100644 examples/playground/components/site-header.tsx create mode 100644 examples/playground/components/tailwind-indicator.tsx create mode 100644 examples/playground/components/temperature-selector.tsx create mode 100644 examples/playground/components/theme-provider.tsx create mode 100644 examples/playground/components/theme-toggle.tsx create mode 100644 examples/playground/components/top-p-selector.tsx create mode 100644 examples/playground/components/ui/accordion.tsx create mode 100644 examples/playground/components/ui/alert-dialog.tsx create mode 100644 examples/playground/components/ui/aspect-ratio.tsx create mode 100644 examples/playground/components/ui/avatar.tsx create mode 100644 examples/playground/components/ui/button.tsx create mode 100644 examples/playground/components/ui/checkbox.tsx create mode 100644 examples/playground/components/ui/collapsible.tsx create mode 100644 examples/playground/components/ui/command.tsx create mode 100644 examples/playground/components/ui/context-menu.tsx create mode 100644 examples/playground/components/ui/dialog.tsx create mode 100644 examples/playground/components/ui/dropdown-menu.tsx create mode 100644 examples/playground/components/ui/hover-card.tsx create mode 100644 examples/playground/components/ui/input.tsx create mode 100644 examples/playground/components/ui/label.tsx create mode 100644 examples/playground/components/ui/menubar.tsx create mode 100644 examples/playground/components/ui/navigation-menu.tsx create mode 100644 examples/playground/components/ui/popover.tsx create mode 100644 examples/playground/components/ui/progress.tsx create mode 100644 examples/playground/components/ui/radio-group.tsx create mode 100644 examples/playground/components/ui/scroll-area.tsx create mode 100644 examples/playground/components/ui/select.tsx create mode 100644 examples/playground/components/ui/separator.tsx create mode 100644 examples/playground/components/ui/slider.tsx create mode 100644 examples/playground/components/ui/switch.tsx create mode 100644 examples/playground/components/ui/tabs.tsx create mode 100644 examples/playground/components/ui/textarea.tsx create mode 100644 examples/playground/components/ui/toast.tsx create mode 100644 examples/playground/components/ui/toaster.tsx create mode 100644 examples/playground/components/ui/toggle.tsx create mode 100644 examples/playground/components/ui/tooltip.tsx create mode 100644 examples/playground/components/user-auth-form.tsx create mode 100644 examples/playground/components/user-nav.tsx create mode 100644 examples/playground/config/site.ts create mode 100644 examples/playground/data/examples.ts create mode 100644 examples/playground/data/models.ts create mode 100644 examples/playground/data/presets.ts create mode 100644 examples/playground/data/teams.tsx create mode 100644 examples/playground/data/user.ts create mode 100644 examples/playground/hooks/use-mutation-observer.ts create mode 100644 examples/playground/hooks/use-toast.ts create mode 100644 examples/playground/lib/utils.ts create mode 100644 examples/playground/next-env.d.ts create mode 100644 examples/playground/next.config.mjs create mode 100644 examples/playground/package.json create mode 100644 examples/playground/pages/.gitkeep create mode 100644 examples/playground/pnpm-lock.yaml create mode 100644 examples/playground/postcss.config.js create mode 100644 examples/playground/prettier.config.js create mode 100644 examples/playground/public/android-chrome-192x192.png create mode 100644 examples/playground/public/android-chrome-512x512.png create mode 100644 examples/playground/public/apple-touch-icon.png create mode 100644 examples/playground/public/favicon-16x16.png create mode 100644 examples/playground/public/favicon-32x32.png create mode 100644 examples/playground/public/favicon.ico create mode 100644 examples/playground/public/og-2.jpg create mode 100644 examples/playground/public/og.jpg create mode 100644 examples/playground/public/site.webmanifest create mode 100644 examples/playground/styles/globals.css create mode 100644 examples/playground/tailwind.config.js create mode 100644 examples/playground/tsconfig.json create mode 100644 examples/playground/types/index.ts diff --git a/apps/www/components/theme-provider.tsx b/apps/www/components/theme-provider.tsx index 891cc2649..691554dd0 100644 --- a/apps/www/components/theme-provider.tsx +++ b/apps/www/components/theme-provider.tsx @@ -4,6 +4,6 @@ import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import { ThemeProviderProps } from "next-themes/dist/types" -export function ThemeProvider({ children }: ThemeProviderProps) { - return {children} +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} } diff --git a/apps/www/components/ui/toast.tsx b/apps/www/components/ui/toast.tsx index fce208997..b7387e4f5 100644 --- a/apps/www/components/ui/toast.tsx +++ b/apps/www/components/ui/toast.tsx @@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef< Open + My Account + Profile Billing Team diff --git a/examples/playground/.editorconfig b/examples/playground/.editorconfig new file mode 100644 index 000000000..ae10a5cce --- /dev/null +++ b/examples/playground/.editorconfig @@ -0,0 +1,10 @@ +# editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/examples/playground/.eslintignore b/examples/playground/.eslintignore new file mode 100644 index 000000000..dc0f9d8bf --- /dev/null +++ b/examples/playground/.eslintignore @@ -0,0 +1,5 @@ +dist/* +.cache +public +node_modules +*.esm.js diff --git a/examples/playground/.eslintrc.json b/examples/playground/.eslintrc.json new file mode 100644 index 000000000..45cf7c682 --- /dev/null +++ b/examples/playground/.eslintrc.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://json.schemastore.org/eslintrc", + "root": true, + "extends": [ + "next/core-web-vitals", + "prettier", + "plugin:tailwindcss/recommended" + ], + "plugins": ["tailwindcss"], + "rules": { + "@next/next/no-html-link-for-pages": "off", + "react/jsx-key": "off", + "tailwindcss/no-custom-classname": "off" + }, + "settings": { + "tailwindcss": { + "callees": ["cn"] + } + } +} diff --git a/examples/playground/.gitignore b/examples/playground/.gitignore new file mode 100644 index 000000000..ea0d26b98 --- /dev/null +++ b/examples/playground/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +node_modules +.pnp +.pnp.js + +# testing +coverage + +# next.js +.next/ +out/ +build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# turbo +.turbo + +.contentlayer +.env \ No newline at end of file diff --git a/examples/playground/.prettierignore b/examples/playground/.prettierignore new file mode 100644 index 000000000..2f730936c --- /dev/null +++ b/examples/playground/.prettierignore @@ -0,0 +1,12 @@ +cache +.cache +package.json +package-lock.json +public +CHANGELOG.md +.yarn +dist +node_modules +.next +build +.contentlayer \ No newline at end of file diff --git a/examples/playground/.vscode/settings.json b/examples/playground/.vscode/settings.json new file mode 100644 index 000000000..94a4cbdf8 --- /dev/null +++ b/examples/playground/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.4/node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true +} diff --git a/examples/playground/README.md b/examples/playground/README.md new file mode 100644 index 000000000..121a1ba45 --- /dev/null +++ b/examples/playground/README.md @@ -0,0 +1,7 @@ +# Playground Example + +The OpenAI Playground built using Radix UI and Tailwind CSS. + +## License + +Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md). diff --git a/examples/playground/app/(auth)/login/page.tsx b/examples/playground/app/(auth)/login/page.tsx new file mode 100644 index 000000000..bee818317 --- /dev/null +++ b/examples/playground/app/(auth)/login/page.tsx @@ -0,0 +1,43 @@ +import Link from "next/link" +import { ChevronLeft } from "lucide-react" + +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { buttonVariants } from "@/components/ui/button" +import { UserAuthForm } from "@/components/user-auth-form" + +export default function LoginPage() { + return ( +
+ + + Back + +
+
+ +
+

+ Welcome back +

+

+ Click continue to login to the demo dashboard +

+
+
+ +

+ + Don't have an account? Sign Up + +

+
+
+ ) +} diff --git a/examples/playground/app/(auth)/signup/page.tsx b/examples/playground/app/(auth)/signup/page.tsx new file mode 100644 index 000000000..8cdc58057 --- /dev/null +++ b/examples/playground/app/(auth)/signup/page.tsx @@ -0,0 +1,48 @@ +import Link from "next/link" + +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { buttonVariants } from "@/components/ui/button" +import { UserAuthForm } from "@/components/user-auth-form" + +export default function LoginPage() { + return ( +
+ + Login + +
+
+
+ +
+

+ Create an account +

+

+ Click continue to login to the demo dashboard +

+
+
+ +

+ By clicking continue, you agree to our{" "} + + Terms of Service + {" "} + and{" "} + + Privacy Policy + + . +

+
+
+ ) +} diff --git a/examples/playground/app/(playground)/layout.tsx b/examples/playground/app/(playground)/layout.tsx new file mode 100644 index 000000000..92d22e881 --- /dev/null +++ b/examples/playground/app/(playground)/layout.tsx @@ -0,0 +1,47 @@ +import Link from "next/link" +import { HelpCircle, Zap } from "lucide-react" + +import { workspaces } from "@/data/teams" +import { user } from "@/data/user" +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { MainNav } from "@/components/main-nav" +import { Button, buttonVariants } from "@/components/ui/button" +import { UserNav } from "@/components/user-nav" + +interface DashboardLayoutProps { + children: React.ReactNode +} + +export default function DashboardLayout({ children }: DashboardLayoutProps) { + return ( +
+
+
+
+ + + + +
+ +
+
+
{children}
+
+ ) +} diff --git a/examples/playground/app/(playground)/page.tsx b/examples/playground/app/(playground)/page.tsx new file mode 100644 index 000000000..1265fbaf8 --- /dev/null +++ b/examples/playground/app/(playground)/page.tsx @@ -0,0 +1,135 @@ +import { History } from "lucide-react" + +import { models, types } from "@/data/models" +import { presets } from "@/data/presets" +import { CodeViewer } from "@/components/code-viewer" +import { Icons } from "@/components/icons" +import { MaxLengthSelector } from "@/components/maxlength-selector" +import { ModelSelector } from "@/components/model-selector" +import { PresetActions } from "@/components/preset-actions" +import { PresetSave } from "@/components/preset-save" +import { PresetSelector } from "@/components/preset-selector" +import { PresetShare } from "@/components/preset-share" +import { TemperatureSelector } from "@/components/temperature-selector" +import { TopPSelector } from "@/components/top-p-selector" +import { Button } from "@/components/ui/button" +import { + HoverCard, + HoverCardContent, + HoverCardTrigger, +} from "@/components/ui/hover-card" +import { Label } from "@/components/ui/label" +import { Separator } from "@/components/ui/separator" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Textarea } from "@/components/ui/textarea" + +export default function PlaygroundPage() { + return ( +
+
+

+ Playground +

+
+ + +
+ + +
+ +
+
+ + +
+
+ +
+