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
This commit is contained in:
Robin Malfait
2024-01-03 14:26:12 +01:00
committed by GitHub
parent 3b961a690f
commit a73007388f
120 changed files with 10733 additions and 6944 deletions
+43 -43
View File
@@ -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
- `yarn clean`: this will call all `yarn {package} clean` commands
- `yarn build`: this will call all `yarn {package} build` commands
- `yarn lint`: this will `lint` all packages
- `yarn test`: this will `test` all packages
- `yarn test`: run all jest tests
- `yarn test --watch`: run all jest tests in interactive mode
- `yarn test tabs`: run all jest tests filtered by `tabs`
- `yarn test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
- `npm install`: install all dependencies for all packages
- `npm run clean`: this will call all `npm run {package} clean` commands
- `npm run build`: this will call all `npm run {package} build` commands
- `npm run lint`: this will `lint` all packages
- `npm run test`: this will `test` all packages
- `npm run test`: run all jest tests
- `npm run test --watch`: run all jest tests in interactive mode
- `npm run test tabs`: run all jest tests 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
- `yarn react test`: run all jest tests
- `yarn react test --watch`: run all jest tests in interactive mode
- `yarn 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`
- `yarn react build`: build the final artefacts
- `yarn react lint`: validate and fix the react codebase using prettier
- `yarn react watch`: start a watcher for the react esm build
- **Note**: this will be executed for you when using the `yarn react playground`
- `npm run react`: Prefix to run anything in the `@headlessui/react` package
- `npm run react test`: run all jest tests
- `npm run react test --watch`: run all jest tests in interactive mode
- `npm run react test tabs`: run all jest tests filtered by `tabs`
- `npm run react test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
- `npm run react build`: build the final artefacts
- `npm run react lint`: validate and fix the react codebase using prettier
- `npm run react watch`: start a watcher for the react esm build
- **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
- **Note**: this will also run `yarn react watch` for you, which means that you only need to execute `yarn react playground`
- `yarn react clean`: this will remove `dist` files
- `yarn vue`: Prefix to run anything in the `@headlessui/vue` package
- `yarn vue test`: run all jest tests
- `yarn vue test --watch`: run all jest tests in interactive mode
- `yarn 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`
- `yarn vue build`: build the final artefacts
- `yarn vue lint`: validate and fix the vue codebase using prettier
- `yarn vue watch`: start a watcher for the vue esm build
- **Note**: this will be executed for you when using the `yarn vue playground`
- `npm run react playground`: (alias) start a development server in the `playground-react` package
- **Note**: this will also run `npm run react watch` for you, which means that you only need to execute `npm run react playground`
- `npm run react clean`: this will remove `dist` files
- `npm run vue`: Prefix to run anything in the `@headlessui/vue` package
- `npm run vue test`: run all jest tests
- `npm run vue test --watch`: run all jest tests in interactive mode
- `npm run vue test tabs`: run all jest tests filtered by `tabs`
- `npm run vue test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`
- `npm run vue build`: build the final artefacts
- `npm run vue lint`: validate and fix the vue codebase using prettier
- `npm run vue watch`: start a watcher for the vue esm build
- **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
- **Note**: this will also run `yarn vue watch` for you, which means that you only need to execute `yarn react playground`
- `yarn vue clean`: this will remove `dist` files
- `npm run vue playground`: (alias) start a development server in the `playground-vue` package
- **Note**: this will also run `npm run vue watch` for you, which means that you only need to execute `npm run react playground`
- `npm run vue clean`: this will remove `dist` files
+10 -10
View File
@@ -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
+4 -4
View File
@@ -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
+3 -3
View File
@@ -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
+6 -1
View File
@@ -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
+10628
View File
File diff suppressed because it is too large Load Diff
+11 -10
View File
@@ -7,21 +7,22 @@
"license": "MIT",
"private": true,
"workspaces": [
"packages/*"
"packages/*",
"playgrounds/*"
],
"scripts": {
"react": "yarn workspace @headlessui/react",
"react-playground": "yarn workspace playground-react dev",
"playground-react": "yarn workspace playground-react dev",
"vue": "yarn workspace @headlessui/vue",
"playground-vue": "yarn workspace playground-vue dev",
"vue-playground": "yarn workspace playground-vue dev",
"clean": "yarn workspaces run clean",
"react": "npm run --workspace=@headlessui/react",
"react-playground": "npm run --workspace=playground-react dev",
"playground-react": "npm run --workspace=playground-react dev",
"vue": "npm run --workspace=@headlessui/vue",
"playground-vue": "npm run --workspace=playground-vue dev",
"vue-playground": "npm run --workspace=playground-vue dev",
"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,
+2 -2
View File
@@ -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",
"playground": "yarn workspace playground-react dev",
"lint-types": "npm run attw -P --workspaces --if-present",
"playground": "npm run dev --workspace=playground-react",
"clean": "rimraf ./dist"
},
"peerDependencies": {
@@ -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": {
+2 -2
View File
@@ -37,8 +37,8 @@
"watch": "../../scripts/watch.sh --external:vue",
"test": "../../scripts/test.sh",
"lint": "../../scripts/lint.sh",
"lint-types": "yarn run attw -P",
"playground": "yarn workspace playground-vue dev",
"lint-types": "npm run attw -P --workspaces --if-present",
"playground": "npm run dev --workspace=playground-vue",
"clean": "rimraf ./dist"
},
"peerDependencies": {
@@ -3,10 +3,10 @@
"private": true,
"version": "0.0.0",
"scripts": {
"prebuild": "yarn workspace @headlessui/react build && yarn workspace @headlessui/tailwindcss build",
"predev": "yarn workspace @headlessui/react build && yarn workspace @headlessui/tailwindcss build",
"dev:tailwindcss": "yarn workspace @headlessui/tailwindcss watch",
"dev:headlessui": "yarn workspace @headlessui/react watch",
"prebuild": "npm run build --workspace=@headlessui/react && npm run build --workspace=@headlessui/tailwindcss",
"predev": "npm run build --workspace=@headlessui/react && npm run build --workspace=@headlessui/tailwindcss",
"dev:tailwindcss": "npm run watch --workspace=@headlessui/tailwindcss",
"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",
@@ -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>
@@ -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>
@@ -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
@@ -6,10 +6,10 @@
"example": "examples"
},
"scripts": {
"prebuild": "yarn workspace @headlessui/vue build && yarn workspace @headlessui/tailwindcss build",
"predev": "yarn workspace @headlessui/vue build && yarn workspace @headlessui/tailwindcss build",
"dev:tailwindcss": "yarn workspace @headlessui/tailwindcss watch",
"dev:headlessui": "yarn workspace @headlessui/vue watch",
"prebuild": "npm run build --workspace=@headlessui/vue && npm run build --workspace=@headlessui/tailwindcss",
"predev": "npm run build --workspace=@headlessui/vue && npm run build --workspace=@headlessui/tailwindcss",
"dev:tailwindcss": "npm run watch --workspace=@headlessui/tailwindcss",
"dev:headlessui": "npm run watch --workspace=@headlessui/vue",
"dev:next": "vite serve",
"dev": "npm-run-all -p dev:*",
"build": "NODE_ENV=production vite build",

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Some files were not shown because too many files have changed in this diff Show More