Ensure playgrounds work + switch to npm workspaces (#2907)

* bump Next in playground

* convert legacy Link after Next.js bump

* update yarn.lock

* switch to npm workspaces

* move `packages/playground-*` to `playgrounds/*`

* use `npm` instead of `yarn`

* sync package-lock.json

* use node 20 for insiders releases

.github/CONTRIBUTING.md

@@ -19,14 +19,14 @@ Also make sure that you are making changes to both the `React` and `Vue` version
 
 ## Monorepo
 
-The Headless UI repo is a monorepo using `yarn` workspaces. Note that we are using `yarn` **version 1**.
+The Headless UI repo is a monorepo using `npm` workspaces.
 
 ## Installation
 
-You only require a `yarn install` in the root directory to install everything you need.
+You only require a `npm install` in the root directory to install everything you need.
 
 ```sh
-yarn install
+npm install
 ```
 
 ## Coding standards
@@ -35,28 +35,28 @@ We use `prettier` for making sure that the codebase is formatted consistently.
 To automatically fix any style violations in your code, you can run:
 
 ```sh
-yarn lint
+npm lint
 ```
 
 **Note**: Whenever you commit, the lint check will run on all staged files.
-**Note**: In CI, we will only check your code, and not write with the formatted files. If you want to just check, then you can either run `yarn lint-check` or `CI=true yarn lint`
+**Note**: In CI, we will only check your code, and not write with the formatted files. If you want to just check, then you can either run `npm run lint-check` or `CI=true npm run lint`
 
 ## Running tests
 
 You can run the test suite using the following commands:
 
 ```sh
-yarn test
+npm run test
 ```
 
 You can also run them for React or Vue individually:
 
 ```sh
-yarn react test
+npm run react test
 
 # or
 
-yarn vue test
+npm run vue test
 ```
 
 Please ensure that the tests are passing when submitting a pull request. If you're adding new features to Headless UI, please include tests.
@@ -68,11 +68,11 @@ Currently the `React` playground (located in `packages/playground-react`) is a N
 You can launch them by running:
 
 ```sh
-yarn react playground
+npm run react playground
 
 # or
 
-yarn vue playground
+npm run vue playground
 ```
 
 This will also start the necessary watchers so that you don't have to care about them.
@@ -81,41 +81,41 @@ This will also start the necessary watchers so that you don't have to care about
 
 Global scripts, and some aliases:
 
-- `yarn install`: install all dependencies for all packages
+- `npm install`: install all dependencies for all packages
-- `yarn clean`: this will call all `yarn {package} clean` commands
+- `npm run clean`: this will call all `npm run {package} clean` commands
-- `yarn build`: this will call all `yarn {package} build` commands
+- `npm run build`: this will call all `npm run {package} build` commands
-- `yarn lint`: this will `lint` all packages
+- `npm run lint`: this will `lint` all packages
-- `yarn test`: this will `test` all packages
+- `npm run test`: this will `test` all packages
-  - `yarn test`: run all jest tests
+  - `npm run test`: run all jest tests
-  - `yarn test --watch`: run all jest tests in interactive mode
+  - `npm run test --watch`: run all jest tests in interactive mode
-  - `yarn test tabs`: run all jest tests filtered by `tabs`
+  - `npm run test tabs`: run all jest tests filtered by `tabs`
-  - `yarn test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
+  - `npm run test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
 
 Scripts per package:
 
-- `yarn react`: Prefix to run anything in the `@headlessui/react` package
+- `npm run react`: Prefix to run anything in the `@headlessui/react` package
-  - `yarn react test`: run all jest tests
+  - `npm run react test`: run all jest tests
-  - `yarn react test --watch`: run all jest tests in interactive mode
+  - `npm run react test --watch`: run all jest tests in interactive mode
-  - `yarn react test tabs`: run all jest tests filtered by `tabs`
+  - `npm run react test tabs`: run all jest tests filtered by `tabs`
-  - `yarn react test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
+  - `npm run react test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
-  - `yarn react build`: build the final artefacts
+  - `npm run react build`: build the final artefacts
-  - `yarn react lint`: validate and fix the react codebase using prettier
+  - `npm run react lint`: validate and fix the react codebase using prettier
-  - `yarn react watch`: start a watcher for the react esm build
+  - `npm run react watch`: start a watcher for the react esm build
-    - **Note**: this will be executed for you when using the `yarn react playground`
+    - **Note**: this will be executed for you when using the `npm run react playground`
     - **Note**: this is not required for jest. You will probably never need this
-  - `yarn react playground`: (alias) start a development server in the `playground-react` package
+  - `npm run react playground`: (alias) start a development server in the `playground-react` package
-    - **Note**: this will also run `yarn react watch` for you, which means that you only need to execute `yarn react playground`
+    - **Note**: this will also run `npm run react watch` for you, which means that you only need to execute `npm run react playground`
-  - `yarn react clean`: this will remove `dist` files
+  - `npm run react clean`: this will remove `dist` files
-- `yarn vue`: Prefix to run anything in the `@headlessui/vue` package
+- `npm run vue`: Prefix to run anything in the `@headlessui/vue` package
-  - `yarn vue test`: run all jest tests
+  - `npm run vue test`: run all jest tests
-  - `yarn vue test --watch`: run all jest tests in interactive mode
+  - `npm run vue test --watch`: run all jest tests in interactive mode
-  - `yarn vue test tabs`: run all jest tests filtered by `tabs`
+  - `npm run vue test tabs`: run all jest tests filtered by `tabs`
-  - `yarn vue test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
+  - `npm run vue test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
-  - `yarn vue build`: build the final artefacts
+  - `npm run vue build`: build the final artefacts
-  - `yarn vue lint`: validate and fix the vue codebase using prettier
+  - `npm run vue lint`: validate and fix the vue codebase using prettier
-  - `yarn vue watch`: start a watcher for the vue esm build
+  - `npm run vue watch`: start a watcher for the vue esm build
-    - **Note**: this will be executed for you when using the `yarn vue playground`
+    - **Note**: this will be executed for you when using the `npm run vue playground`
     - **Note**: this is not required for jest. You will probably never need this
-  - `yarn vue playground`: (alias) start a development server in the `playground-vue` package
+  - `npm run vue playground`: (alias) start a development server in the `playground-vue` package
-    - **Note**: this will also run `yarn vue watch` for you, which means that you only need to execute `yarn react playground`
+    - **Note**: this will also run `npm run vue watch` for you, which means that you only need to execute `npm run react playground`
-  - `yarn vue clean`: this will remove `dist` files
+  - `npm run vue clean`: this will remove `dist` files

.github/workflows/main.yml

@@ -26,9 +26,9 @@ jobs:
       - uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
         env:
           CI: true
 
@@ -42,9 +42,9 @@ jobs:
       - uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Lint
-        run: yarn lint
+        run: npm run lint
         env:
           CI: true
 
@@ -58,10 +58,10 @@ jobs:
       - uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Test
         run: |
-          yarn test || yarn test || yarn test || exit 1
+          npm run test || npm run test || npm run test || exit 1
         env:
           CI: true
 
@@ -75,9 +75,9 @@ jobs:
       - uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Build
-        run: yarn build
+        run: npm run build
         env:
           CI: true
 
@@ -91,8 +91,8 @@ jobs:
       - uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Check Types
-        run: yarn lint-types
+        run: npm run lint-types
         env:
           CI: true

.github/workflows/release-insiders.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
 
     steps:
       - uses: actions/checkout@v3
@@ -30,18 +30,18 @@ jobs:
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             nodeModules-
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
         env:
           CI: true
 
       - name: Test
         run: |
-          yarn test || yarn test || yarn test || exit 1
+          npm run test || npm run test || npm run test || exit 1
         env:
           CI: true
 

.github/workflows/release.yml

@@ -36,18 +36,18 @@ jobs:
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             nodeModules-
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
         env:
           CI: true
 
       - name: Test
         run: |
-          yarn test || yarn test || yarn test || exit 1
+          npm run test || npm run test || npm run test || exit 1
         env:
           CI: true
 

.gitignore

@@ -3,24 +3,29 @@
 # dependencies
 /node_modules
 /packages/**/node_modules
+/playgrounds/**/node_modules
 
 # testing
 /coverage
 /packages/**/coverage
+/playgrounds/**/coverage
 
 # logs
 *.log
 /packages/**/*.log
+/playgrounds/**/*.log
 
 # next.js
 /.next/
-/packages/**/.next/
+/playgrounds/**/.next/
 /out/
 /packages/**/out/
+/playgrounds/**/out/
 
 # production
 /dist
 /packages/**/dist
+/playgrounds/**/dist
 
 # misc
 .DS_Store

package.json

@@ -7,21 +7,22 @@
   "license": "MIT",
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "playgrounds/*"
   ],
   "scripts": {
-    "react": "yarn workspace @headlessui/react",
+    "react": "npm run --workspace=@headlessui/react",
-    "react-playground": "yarn workspace playground-react dev",
+    "react-playground": "npm run --workspace=playground-react dev",
-    "playground-react": "yarn workspace playground-react dev",
+    "playground-react": "npm run --workspace=playground-react dev",
-    "vue": "yarn workspace @headlessui/vue",
+    "vue": "npm run --workspace=@headlessui/vue",
-    "playground-vue": "yarn workspace playground-vue dev",
+    "playground-vue": "npm run --workspace=playground-vue dev",
-    "vue-playground": "yarn workspace playground-vue dev",
+    "vue-playground": "npm run --workspace=playground-vue dev",
-    "clean": "yarn workspaces run clean",
+    "clean": "npm run clean --workspaces --if-present",
     "build": "npm-run-all -p 'react build' 'vue build'",
     "test": "./scripts/test.sh",
     "lint": "./scripts/lint.sh",
     "lint-check": "CI=true ./scripts/lint.sh",
-    "lint-types": "CI=true yarn workspaces run lint-types",
+    "lint-types": "CI=true npm run lint-types --workspaces --if-present",
     "release-channel": "node ./scripts/release-channel.js",
     "release-notes": "node ./scripts/release-notes.js",
     "package-path": "node ./scripts/package-path.js"
@@ -32,7 +33,7 @@
     }
   },
   "lint-staged": {
-    "*": "yarn lint"
+    "*": "npm run lint"
   },
   "prettier": {
     "printWidth": 100,

packages/@headlessui-react/package.json

@@ -37,8 +37,8 @@
     "watch": "../../scripts/watch.sh --external:react --external:react-dom",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",
-    "lint-types": "yarn run attw -P",
+    "lint-types": "npm run attw -P --workspaces --if-present",
-    "playground": "yarn workspace playground-react dev",
+    "playground": "npm run dev --workspace=playground-react",
     "clean": "rimraf ./dist"
   },
   "peerDependencies": {

packages/@headlessui-tailwindcss/package.json

@@ -36,7 +36,7 @@
     "watch": "../../scripts/watch.sh --external:tailwindcss",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",
-    "lint-types": "yarn run attw -P",
+    "lint-types": "npm run attw -P --workspaces --if-present",
     "clean": "rimraf ./dist"
   },
   "peerDependencies": {

packages/@headlessui-vue/package.json

@@ -37,8 +37,8 @@
     "watch": "../../scripts/watch.sh --external:vue",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",
-    "lint-types": "yarn run attw -P",
+    "lint-types": "npm run attw -P --workspaces --if-present",
-    "playground": "yarn workspace playground-vue dev",
+    "playground": "npm run dev --workspace=playground-vue",
     "clean": "rimraf ./dist"
   },
   "peerDependencies": {

playgrounds/react/package.json

@@ -3,10 +3,10 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "prebuild": "yarn workspace @headlessui/react build && yarn workspace @headlessui/tailwindcss build",
+    "prebuild": "npm run build --workspace=@headlessui/react && npm run build --workspace=@headlessui/tailwindcss",
-    "predev": "yarn workspace @headlessui/react build && yarn workspace @headlessui/tailwindcss build",
+    "predev": "npm run build --workspace=@headlessui/react && npm run build --workspace=@headlessui/tailwindcss",
-    "dev:tailwindcss": "yarn workspace @headlessui/tailwindcss watch",
+    "dev:tailwindcss": "npm run watch --workspace=@headlessui/tailwindcss",
-    "dev:headlessui": "yarn workspace @headlessui/react watch",
+    "dev:headlessui": "npm run watch --workspace=@headlessui/react",
     "dev:next": "next dev",
     "dev": "npm-run-all -p dev:*",
     "build": "next build",
@@ -23,7 +23,7 @@
     "@tailwindcss/typography": "^0.5.2",
     "autoprefixer": "^10.4.7",
     "framer-motion": "^6.0.0",
-    "next": "^12.1.4",
+    "next": "^14.0.4",
     "postcss": "^8.4.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

playgrounds/react/pages/_app.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useRouter } from 'next/router'
 import 'tailwindcss/tailwind.css'
@@ -45,15 +45,6 @@ export function useDisposables() {
   return d
 }
 
-function NextLink(props: React.ComponentProps<'a'>) {
-  let { href, children, ...rest } = props
-  return (
-    <Link href={href}>
-      <a {...rest}>{children}</a>
-    </Link>
-  )
-}
-
 enum KeyDisplayMac {
   ArrowUp = '↑',
   ArrowDown = '↓',
@@ -147,9 +138,9 @@ function MyApp({ Component, pageProps }) {
     <>
       <div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
         <header className="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
-          <NextLink href="/">
+          <Link href="/">
             <Logo className="h-6" />
-          </NextLink>
+          </Link>
           <span className="font-bold text-white">(React)</span>
         </header>
 

playgrounds/react/pages/_error.tsx

@@ -1,19 +1,9 @@
 import ErrorPage from 'next/error'
 import Head from 'next/head'
 import Link from 'next/link'
-import React from 'react'
 
 import { ExamplesType, resolveAllExamples } from '../utils/resolve-all-examples'
 
-function NextLink(props: React.ComponentProps<'a'>) {
-  let { href, children, ...rest } = props
-  return (
-    <Link href={href}>
-      <a {...rest}>{children}</a>
-    </Link>
-  )
-}
-
 export async function getStaticProps() {
   return {
     props: {
@@ -51,9 +41,9 @@ export function Examples(props: { examples: ExamplesType[] }) {
           {example.children ? (
             <h3 className="text-xl capitalize">{example.name}</h3>
           ) : (
-            <NextLink href={example.path} className="capitalize">
+            <Link href={example.path} className="capitalize">
               {example.name}
-            </NextLink>
+            </Link>
           )}
           {example.children && <Examples examples={example.children} />}
         </li>

playgrounds/react/pages/menu/menu-with-framer-motion.tsx

@@ -1,7 +1,7 @@
 import { Menu, MenuItemProps } from '@headlessui/react'
 import { AnimatePresence, motion } from 'framer-motion'
 import Link from 'next/link'
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { Button } from '../../components/button'
 import { classNames } from '../../utils/class-names'
@@ -45,7 +45,7 @@ export default function Home() {
 
                     <div className="py-1">
                       <Item href="#account-settings">Account settings</Item>
-                      <Item as={NextLink} href="#support">
+                      <Item as={Link} href="#support">
                         Support
                       </Item>
                       <Item href="#new-feature" disabled>
@@ -68,17 +68,6 @@ export default function Home() {
   )
 }
 
-let NextLink = forwardRef<HTMLAnchorElement>((props: React.ComponentProps<'a'>, ref) => {
-  let { href, children, ...rest } = props
-  return (
-    <Link href={href}>
-      <a ref={ref} {...rest}>
-        {children}
-      </a>
-    </Link>
-  )
-})
-
 let SignOutButton = forwardRef<HTMLButtonElement>((props, ref) => {
   return (
     <form

playgrounds/vue/package.json

@@ -6,10 +6,10 @@
     "example": "examples"
   },
   "scripts": {
-    "prebuild": "yarn workspace @headlessui/vue build && yarn workspace @headlessui/tailwindcss build",
+    "prebuild": "npm run build --workspace=@headlessui/vue && npm run build --workspace=@headlessui/tailwindcss",
-    "predev": "yarn workspace @headlessui/vue build && yarn workspace @headlessui/tailwindcss build",
+    "predev": "npm run build --workspace=@headlessui/vue && npm run build --workspace=@headlessui/tailwindcss",
-    "dev:tailwindcss": "yarn workspace @headlessui/tailwindcss watch",
+    "dev:tailwindcss": "npm run watch --workspace=@headlessui/tailwindcss",
-    "dev:headlessui": "yarn workspace @headlessui/vue watch",
+    "dev:headlessui": "npm run watch --workspace=@headlessui/vue",
     "dev:next": "vite serve",
     "dev": "npm-run-all -p dev:*",
     "build": "NODE_ENV=production vite build",