From 40b67e1d16f620c8c6e171bf4217daf944925d3f Mon Sep 17 00:00:00 2001 From: Pedro Sanchez Date: Tue, 4 Oct 2022 17:51:56 -0400 Subject: [PATCH 01/11] add radix-ui example --- examples/radix-ui/.gitignore | 33 +++++ examples/radix-ui/next-env.d.ts | 5 + examples/radix-ui/package.json | 23 ++++ examples/radix-ui/postcss.config.js | 6 + examples/radix-ui/src/pages/_app.tsx | 5 + examples/radix-ui/src/pages/index.tsx | 175 ++++++++++++++++++++++++ examples/radix-ui/src/styles/styles.css | 3 + examples/radix-ui/tailwind.config.js | 8 ++ examples/radix-ui/tsconfig.json | 20 +++ 9 files changed, 278 insertions(+) create mode 100644 examples/radix-ui/.gitignore create mode 100644 examples/radix-ui/next-env.d.ts create mode 100644 examples/radix-ui/package.json create mode 100644 examples/radix-ui/postcss.config.js create mode 100644 examples/radix-ui/src/pages/_app.tsx create mode 100644 examples/radix-ui/src/pages/index.tsx create mode 100644 examples/radix-ui/src/styles/styles.css create mode 100644 examples/radix-ui/tailwind.config.js create mode 100644 examples/radix-ui/tsconfig.json diff --git a/examples/radix-ui/.gitignore b/examples/radix-ui/.gitignore new file mode 100644 index 0000000000000..20659b2489ae9 --- /dev/null +++ b/examples/radix-ui/.gitignore @@ -0,0 +1,33 @@ +# 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 +.env.development.local +.env.test.local +.env.production.local + +# Vercel +.vercel diff --git a/examples/radix-ui/next-env.d.ts b/examples/radix-ui/next-env.d.ts new file mode 100644 index 0000000000000..4f11a03dc6cc3 --- /dev/null +++ b/examples/radix-ui/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/radix-ui/package.json b/examples/radix-ui/package.json new file mode 100644 index 0000000000000..c24cac83073d0 --- /dev/null +++ b/examples/radix-ui/package.json @@ -0,0 +1,23 @@ +{ + "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", + "eslint": "8.24.0", + "postcss": "8.4.17", + "tailwindcss": "3.1.8", + "typescript": "4.8.4" + } +} 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/src/pages/_app.tsx b/examples/radix-ui/src/pages/_app.tsx new file mode 100644 index 0000000000000..9cfd540fabab7 --- /dev/null +++ b/examples/radix-ui/src/pages/_app.tsx @@ -0,0 +1,5 @@ +import '../styles/styles.css' + +export default function MyApp({ Component, pageProps }) { + return +} diff --git a/examples/radix-ui/src/pages/index.tsx b/examples/radix-ui/src/pages/index.tsx new file mode 100644 index 0000000000000..afeae92a310b1 --- /dev/null +++ b/examples/radix-ui/src/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 + Tailwindcss +

+

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/src/styles/styles.css b/examples/radix-ui/src/styles/styles.css new file mode 100644 index 0000000000000..b5c61c956711f --- /dev/null +++ b/examples/radix-ui/src/styles/styles.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..3f88c31c491d6 --- /dev/null +++ b/examples/radix-ui/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/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"] +} From 522e99cac61d897dce14e82a62aaf49a4d2a7664 Mon Sep 17 00:00:00 2001 From: Pedro Sanchez Date: Tue, 4 Oct 2022 18:04:51 -0400 Subject: [PATCH 02/11] add README radix-ui example --- examples/radix-ui/README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 examples/radix-ui/README.md diff --git a/examples/radix-ui/README.md b/examples/radix-ui/README.md new file mode 100644 index 0000000000000..90eb1b7f2b5cc --- /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)). From 2ba3125fb9f53efb0fdd8ee0ae914e6a95c017f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 15:46:54 +0200 Subject: [PATCH 03/11] Delete next-env.d.ts --- examples/radix-ui/next-env.d.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 examples/radix-ui/next-env.d.ts diff --git a/examples/radix-ui/next-env.d.ts b/examples/radix-ui/next-env.d.ts deleted file mode 100644 index 4f11a03dc6cc3..0000000000000 --- a/examples/radix-ui/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. From 28775a1ece27097e4fb4da21f12be2b0d5a6e25f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 15:47:45 +0200 Subject: [PATCH 04/11] Apply suggestions from code review --- examples/radix-ui/.gitignore | 9 +++++---- examples/radix-ui/package.json | 1 - 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/radix-ui/.gitignore b/examples/radix-ui/.gitignore index 20659b2489ae9..665b475b517c5 100644 --- a/examples/radix-ui/.gitignore +++ b/examples/radix-ui/.gitignore @@ -24,10 +24,11 @@ yarn-error.log* .pnpm-debug.log* # Local env files -.env.local -.env.development.local -.env.test.local -.env.production.local +.env*.local # Vercel .vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/radix-ui/package.json b/examples/radix-ui/package.json index c24cac83073d0..3f620ccc5b54e 100644 --- a/examples/radix-ui/package.json +++ b/examples/radix-ui/package.json @@ -15,7 +15,6 @@ "@types/node": "18.8.0", "@types/react": "18.0.21", "autoprefixer": "10.4.12", - "eslint": "8.24.0", "postcss": "8.4.17", "tailwindcss": "3.1.8", "typescript": "4.8.4" From c9916a2b4a53fa7b5c3c0c4740873b3583495f0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:11:55 +0200 Subject: [PATCH 05/11] Update README.md --- examples/radix-ui/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/radix-ui/README.md b/examples/radix-ui/README.md index 90eb1b7f2b5cc..d9f45dd4b2f44 100644 --- a/examples/radix-ui/README.md +++ b/examples/radix-ui/README.md @@ -1,6 +1,6 @@ -# Radix-ui Example +# Radix UI Example -This example showcases a few basic Radix-UI components +This example showcases a few basic Radix UI components ## Deploy your own From e07fab38c93aa6999bf2f72a91ee72b96b681dd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:12:59 +0200 Subject: [PATCH 06/11] Rename examples/radix-ui/src/styles/styles.css to examples/radix-ui/styles/globals.css --- examples/radix-ui/{src/styles/styles.css => styles/globals.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename examples/radix-ui/{src/styles/styles.css => styles/globals.css} (100%) diff --git a/examples/radix-ui/src/styles/styles.css b/examples/radix-ui/styles/globals.css similarity index 100% rename from examples/radix-ui/src/styles/styles.css rename to examples/radix-ui/styles/globals.css From 20767f3c25354dfd4d1e3153ddf828c9a3587402 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:13:19 +0200 Subject: [PATCH 07/11] Update tailwind.config.js --- examples/radix-ui/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/radix-ui/tailwind.config.js b/examples/radix-ui/tailwind.config.js index 3f88c31c491d6..9affdc3a71e0c 100644 --- a/examples/radix-ui/tailwind.config.js +++ b/examples/radix-ui/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./src/pages/**/*.{js,ts,jsx,tsx}'], + content: ['./pages/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, From 80e42fce453e6393a03baa2fec16e2cb8fcac3ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:13:45 +0200 Subject: [PATCH 08/11] Update and rename examples/radix-ui/src/pages/_app.tsx to examples/radix-ui/pages/_app.tsx --- examples/radix-ui/{src => }/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename examples/radix-ui/{src => }/pages/_app.tsx (76%) diff --git a/examples/radix-ui/src/pages/_app.tsx b/examples/radix-ui/pages/_app.tsx similarity index 76% rename from examples/radix-ui/src/pages/_app.tsx rename to examples/radix-ui/pages/_app.tsx index 9cfd540fabab7..70a3fbbda0874 100644 --- a/examples/radix-ui/src/pages/_app.tsx +++ b/examples/radix-ui/pages/_app.tsx @@ -1,4 +1,4 @@ -import '../styles/styles.css' +import '../styles/globals.css' export default function MyApp({ Component, pageProps }) { return From bd8f9f592e199d5f21a60ff06a410876c90b09d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:14:03 +0200 Subject: [PATCH 09/11] Rename examples/radix-ui/src/pages/index.tsx to examples/radix-ui/pages/index.tsx --- examples/radix-ui/{src => }/pages/index.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename examples/radix-ui/{src => }/pages/index.tsx (100%) diff --git a/examples/radix-ui/src/pages/index.tsx b/examples/radix-ui/pages/index.tsx similarity index 100% rename from examples/radix-ui/src/pages/index.tsx rename to examples/radix-ui/pages/index.tsx From c88b1e860019eb4d6e02699e373d8173ec688cf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:14:37 +0200 Subject: [PATCH 10/11] Update index.tsx --- examples/radix-ui/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/radix-ui/pages/index.tsx b/examples/radix-ui/pages/index.tsx index afeae92a310b1..aa209bff372dd 100644 --- a/examples/radix-ui/pages/index.tsx +++ b/examples/radix-ui/pages/index.tsx @@ -79,7 +79,7 @@ export default function Home() { return (

- Radix-UI + Tailwindcss + Radix UI + Tailwind CSS

Click me!

From 7de754bf990114b4bf3d2d43f99a214dc12ea017 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 5 Oct 2022 16:33:34 +0200 Subject: [PATCH 11/11] Apply suggestions from code review --- examples/radix-ui/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/radix-ui/package.json b/examples/radix-ui/package.json index 3f620ccc5b54e..3cb4e5d156791 100644 --- a/examples/radix-ui/package.json +++ b/examples/radix-ui/package.json @@ -1,4 +1,5 @@ { + "private": true, "scripts": { "dev": "next dev", "build": "next build",