diff --git a/examples/radix-ui/.gitignore b/examples/radix-ui/.gitignore new file mode 100644 index 0000000000000..665b475b517c5 --- /dev/null +++ b/examples/radix-ui/.gitignore @@ -0,0 +1,34 @@ +# Dependencies +/node_modules +/.pnp +.pnp.js + +# Testing +/coverage + +# Next.js +/.next/ +/out/ + +# Production +/build + +# Misc +.DS_Store +*.pem + +# Debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# Local env files +.env*.local + +# Vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/radix-ui/README.md b/examples/radix-ui/README.md new file mode 100644 index 0000000000000..d9f45dd4b2f44 --- /dev/null +++ b/examples/radix-ui/README.md @@ -0,0 +1,27 @@ +# Radix UI Example + +This example showcases a few basic Radix UI components + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/radix-ui&project-name=radix-ui&repository-name=radix-ui) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: + +```bash +npx create-next-app --example radix-ui radix-ui-app +``` + +```bash +yarn create next-app --example radix-ui radix-ui-app +``` + +```bash +pnpm create next-app --example radix-ui radix-ui-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/radix-ui/package.json b/examples/radix-ui/package.json new file mode 100644 index 0000000000000..3cb4e5d156791 --- /dev/null +++ b/examples/radix-ui/package.json @@ -0,0 +1,23 @@ +{ + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@radix-ui/react-dropdown-menu": "1.0.0", + "@radix-ui/react-icons": "1.1.1", + "next": "latest", + "react": "latest", + "react-dom": "latest" + }, + "devDependencies": { + "@types/node": "18.8.0", + "@types/react": "18.0.21", + "autoprefixer": "10.4.12", + "postcss": "8.4.17", + "tailwindcss": "3.1.8", + "typescript": "4.8.4" + } +} diff --git a/examples/radix-ui/pages/_app.tsx b/examples/radix-ui/pages/_app.tsx new file mode 100644 index 0000000000000..70a3fbbda0874 --- /dev/null +++ b/examples/radix-ui/pages/_app.tsx @@ -0,0 +1,5 @@ +import '../styles/globals.css' + +export default function MyApp({ Component, pageProps }) { + return +} diff --git a/examples/radix-ui/pages/index.tsx b/examples/radix-ui/pages/index.tsx new file mode 100644 index 0000000000000..aa209bff372dd --- /dev/null +++ b/examples/radix-ui/pages/index.tsx @@ -0,0 +1,175 @@ +import { useState } from 'react' +import { + HamburgerMenuIcon, + DotFilledIcon, + CheckIcon, + ChevronRightIcon, +} from '@radix-ui/react-icons' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' + +function RightSlot({ children }) { + return ( +
+ {children} +
+ ) +} + +function DropdownMenuItem({ children, ...props }) { + return ( + + {children} + + ) +} + +function DropdownMenuCheckboxItem({ children, ...props }) { + return ( + + {children} + + ) +} + +function DropdownMenuItemIndicator({ children, ...props }) { + return ( + + {children} + + ) +} + +function Separator() { + return +} + +function DropdownMenuRadioItem({ + children, + ...props +}: { + children: React.ReactNode + value: string +}) { + return ( + + {children} + + ) +} + +export default function Home() { + const [bookmarksChecked, setBookmarksChecked] = useState(true) + const [urlsChecked, setUrlsChecked] = useState(false) + const [person, setPerson] = useState('pedro') + return ( +
+

+ Radix UI + Tailwind CSS +

+

Click me!

+ + + + + + + + + New Tab ⌘+T + + + New Window ⌘+N + + + New Private Window ⇧+⌘+N + + + + More Tools + + + + + + + Save Page As… ⌘+S + + Create Shortcut… + Name Window… + + Developer Tools + + + + + + + + Show Bookmarks ⌘+B + + + + + + Show Full URLs + + + + Contributors + + + + + + + + Pedro Sanchez + + + + + + Pablo Sanchez + + + + +
+ ) +} diff --git a/examples/radix-ui/postcss.config.js b/examples/radix-ui/postcss.config.js new file mode 100644 index 0000000000000..33ad091d26d8a --- /dev/null +++ b/examples/radix-ui/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/examples/radix-ui/styles/globals.css b/examples/radix-ui/styles/globals.css new file mode 100644 index 0000000000000..b5c61c956711f --- /dev/null +++ b/examples/radix-ui/styles/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/radix-ui/tailwind.config.js b/examples/radix-ui/tailwind.config.js new file mode 100644 index 0000000000000..9affdc3a71e0c --- /dev/null +++ b/examples/radix-ui/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./pages/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/examples/radix-ui/tsconfig.json b/examples/radix-ui/tsconfig.json new file mode 100644 index 0000000000000..1563f3e878573 --- /dev/null +++ b/examples/radix-ui/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}