Version Packages (#10020)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    { "repo": "vercel/vercel" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/CONTRIBUTING.md

@@ -15,7 +15,6 @@ git clone https://github.com/vercel/vercel
 cd vercel
 corepack enable
 pnpm install
-pnpm bootstrap
 pnpm build
 pnpm lint
 pnpm test-unit

.github/workflows/release.yml

@@ -1,75 +1,78 @@
-name: Publish
+name: Release
 
 on:
   push:
     branches:
       - main
-    tags:
-      - '!*'
 
 env:
   TURBO_REMOTE_ONLY: 'true'
   TURBO_TEAM: 'vercel'
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
-  publish:
-    name: Publish
+  release:
+    name: Release
     runs-on: ubuntu-latest
     permissions:
       contents: write
       id-token: write
     steps:
-      - name: Checkout
+      - name: Checkout Repo
         uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Check Release
-        id: check-release
-        run: |
-          tag="$(git describe --tags --exact-match 2> /dev/null || :)"
-          if [[ -z "$tag" ]];
-            then
-              echo "IS_RELEASE=false" >> $GITHUB_OUTPUT
-            else
-              echo "IS_RELEASE=true" >> $GITHUB_OUTPUT
-          fi
-      - name: Setup Go
-        if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-        uses: actions/setup-go@v3
-        with:
-          go-version: '1.13.15'
+
+      - name: Fetch git tags
+        run: git fetch origin 'refs/tags/*:refs/tags/*'
+
       - name: Setup Node
-        if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
         uses: actions/setup-node@v3
         with:
           node-version: 16
+
       - name: install npm@9
         run: npm i -g npm@9
+
       - name: install pnpm@8.3.1
         run: npm i -g pnpm@8.3.1
-      - name: Install
-        if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-        run: pnpm install
-      - name: Build
-        if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Packages
         run: pnpm build
         env:
           GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-      - name: Publish
-        if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-        run: pnpm publish-from-github
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: pnpm ci:version
+          publish: pnpm ci:publish
         env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN_PULL_REQUESTS }}
           NPM_CONFIG_PROVENANCE: 'true'
           NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}
           GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-      - name: Trigger Update
-        if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
+
+      - name: Trigger Update (if a Publish Happened)
+        if: steps.changesets.outputs.published == 'true'
         uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GH_TOKEN_PULL_REQUESTS }}
           script: |
             const script = require('./utils/trigger-update-workflow.js')
             await script({ github, context })
+
+      - name: Set latest Release to `vercel` (if a Publish Happened)
+        if: steps.changesets.outputs.published == 'true'
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GH_TOKEN_PULL_REQUESTS }}
+          script: |
+            const script = require('./utils/update-latest-release.js')
+            await script({ github, context })

.github/workflows/required-pr-label.yml

@@ -1,26 +0,0 @@
-name: Required PR Label
-on:
-  pull_request:
-    types: [opened, labeled, unlabeled, synchronize]
-jobs:
-  label:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check PR Labels
-        uses: actions/github-script@v6
-        with:
-          script: |
-            let missing = false;
-            const labels = context.payload.pull_request.labels.map(l => l.name);
-            if (labels.filter(l => l.startsWith('area:')).length === 0) {
-              console.error('::error::Missing label: Please add at least one "area" label.');
-              missing = true;
-            }
-            if (labels.filter(l => l.startsWith('semver:')).length !== 1) {
-              console.error('::error::Missing label: Please add exactly one "semver" label.');
-              missing = true;
-            }
-            if (missing) {
-              process.exit(1);
-            }
-            console.log('::notice::Success: This pull request has correct labels, thanks!');

.github/workflows/test.yml

@@ -41,7 +41,7 @@ jobs:
           echo "Files to test:"
           echo "$TESTS_ARRAY"
           echo "tests=$TESTS_ARRAY" >> $GITHUB_OUTPUT
-      - uses: patrickedqvist/wait-for-vercel-preview@ae34b392ef30297f2b672f9afb3c329bde9bd487
+      - uses: patrickedqvist/wait-for-vercel-preview@bfdff514ff78a669f2536e9f4dd4ef5813a704a2
         id: waitForTarball
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -97,11 +97,21 @@ jobs:
         if: matrix.runner != 'windows-latest'
         run: echo | openssl s_client -showcerts -servername 'api.vercel.com' -connect 76.76.21.21:443
 
-  conclusion:
+  summary:
+    name: Summary
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    if: always()
     needs:
       - test
-    runs-on: ubuntu-latest
-    name: E2E
     steps:
-      - name: Done
-        run: echo "Done."
+      - name: Check All
+        run: |-
+          for status in ${{ join(needs.*.result, ' ') }}
+          do
+            if [ "$status" != "success" ] && [ "$status" != "skipped" ]
+            then
+              echo "Some checks failed"
+              exit 1
+            fi
+          done

.prettierignore

@@ -12,6 +12,7 @@ packages/gatsby-plugin-vercel-analytics
 node_modules
 dist
 pnpm-lock.yaml
+.changeset
 .vscode
 .DS_Store
 .next
@@ -31,4 +32,4 @@ packages/**/test/fixtures
 packages/**/test/dev/fixtures
 packages/**/test/build-fixtures
 packages/**/test/cache-fixtures
-
+packages/cli/src/util/dev/templates/*.ts

README.md

@@ -19,9 +19,7 @@
 
 ## Vercel
 
-Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.
-
-We enable teams to iterate quickly and develop, preview, and ship delightful user experiences. Vercel has zero-configuration support for 35+ frontend frameworks and integrates with your headless content, commerce, or database of choice.
+Vercel's frontend cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web.
 
 ## Deploy
 

errors/missing-env-file.md

@@ -4,7 +4,7 @@
 
 You ran `vercel dev` inside a project that contains a `vercel.json` file with `env` or `build.env` properties that use [Vercel Secrets](https://vercel.com/docs/concepts/projects/environment-variables).
 
-In order to use environment variables in your project locally that have values defined using the Vercel Secrets format (e.g. `@my-secret-value`), you will need to provide the value as an environment variable using a `.env`.
+In order to use environment variables in your project locally that have values defined using the Vercel Secrets format (e.g. `@my-secret-value`), you will need to provide the value as an environment variable using a `.env.local`.
 
 We require this to ensure your app works as you intend it to, in the development environment, and to provide you with a way to mirror or separate private environment variables within your applications, for example when connecting to a database.
 
@@ -12,11 +12,11 @@ Read below for how to address this error.
 
 #### Possible Ways to Fix It
 
-The error message will list environment variables that are required and which file they are required to be included in `.env`.
+The error message will list environment variables that are required and which file they are required to be included in `.env.local`.
 
 If the file does not exist yet, please create the file that the error message mentions and insert the missing environment variable into it.
 
-For example, if the error message shows that the environment variable `TEST` is missing from `.env`, then the `.env` file should look like this:
+For example, if the error message shows that the environment variable `TEST` is missing from `.env.local`, then the `.env.local` file should look like this:
 
 ```
 TEST=value

examples/__tests__/integration/storybook.test.ts

@@ -0,0 +1,4 @@
+import { deployExample } from '../test-utils';
+it('should deploy', async () => {
+  await deployExample(__filename);
+});

examples/nextjs/README.md

@@ -14,11 +14,7 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

examples/nextjs/app/layout.js

@@ -0,0 +1,17 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

examples/nextjs/app/page.js

@@ -0,0 +1,95 @@
+import Image from 'next/image'
+import styles from './page.module.css'
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Get started by editing&nbsp;
+          <code className={styles.code}>app/page.js</code>
+        </p>
+        <div>
+          <a
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className={styles.vercelLogo}
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.center}>
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className={styles.grid}>
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Docs <span>-&gt;</span>
+          </h2>
+          <p>Find in-depth information about Next.js features and API.</p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Learn <span>-&gt;</span>
+          </h2>
+          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Templates <span>-&gt;</span>
+          </h2>
+          <p>Explore the Next.js 13 playground.</p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Deploy <span>-&gt;</span>
+          </h2>
+          <p>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}

examples/nextjs/next.config.js

@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
+const nextConfig = {}
 
 module.exports = nextConfig

examples/nextjs/package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "eslint": "8.39.0",
-    "eslint-config-next": "13.3.1",
-    "next": "13.3.1",
+    "eslint": "8.41.0",
+    "eslint-config-next": "13.4.4",
+    "next": "13.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

examples/nextjs/pages/_app.js

@@ -1,5 +0,0 @@
-import '@/styles/globals.css'
-
-export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}

examples/nextjs/pages/_document.js

@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}

examples/nextjs/pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
-}

examples/nextjs/pages/index.js

@@ -1,114 +0,0 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={`${styles.main} ${inter.className}`}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>pages/index.js</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-    </>
-  )
-}

examples/package.json

@@ -9,6 +9,6 @@
   },
   "devDependencies": {
     "@types/jest": "27.4.1",
-    "@vercel/frameworks": "1.3.0"
+    "@vercel/frameworks": "1.4.2"
   }
 }

examples/preact/package.json

@@ -1,14 +1,14 @@
 {
   "private": true,
   "scripts": {
-    "build": "preact build",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider preact build",
     "serve": "sirv build --port 8080 --cors --single",
     "dev": "preact watch",
     "lint": "eslint src",
     "test": "jest"
   },
   "engines": {
-    "node": "16.x"
+    "node": "18.x"
   },
   "eslintConfig": {
     "extends": "preact",
@@ -17,19 +17,19 @@
     ]
   },
   "devDependencies": {
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-preact-pure": "^2.0.0",
-    "eslint": "^6.0.1",
-    "eslint-config-preact": "^1.1.0",
-    "jest": "^24.9.0",
-    "jest-preset-preact": "^1.0.0",
-    "preact-cli": "^3.0.0",
-    "sirv-cli": "1.0.3"
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-preact-pure": "^4.1.0",
+    "eslint": "^8.41.0",
+    "eslint-config-preact": "^1.3.0",
+    "jest": "^29.5.0",
+    "jest-preset-preact": "^4.0.4",
+    "preact-cli": "^3.4.5",
+    "sirv-cli": "2.0.2"
   },
   "dependencies": {
-    "preact": "^10.3.2",
-    "preact-render-to-string": "^5.1.4",
-    "preact-router": "^3.2.1"
+    "preact": "^10.15.0",
+    "preact-render-to-string": "6.0.3",
+    "preact-router": "^4.1.1"
   },
   "jest": {
     "preset": "jest-preset-preact",

examples/solidstart/package.json

@@ -7,18 +7,18 @@
   "type": "module",
   "private": true,
   "devDependencies": {
-    "solid-start-vercel": "^0.2.0",
-    "typescript": "^4.8.3",
-    "vite": "^3.1.0"
+    "solid-start-vercel": "^0.2.26",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.8"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.28.2",
-    "@solidjs/router": "^0.5.0",
-    "solid-js": "^1.6.0",
-    "solid-start": "^0.2.0",
-    "undici": "^5.11.0"
+    "@solidjs/meta": "^0.28.5",
+    "@solidjs/router": "^0.8.2",
+    "solid-js": "^1.7.5",
+    "solid-start": "^0.2.26",
+    "undici": "^5.22.1"
   },
   "engines": {
-    "node": "16.x"
+    "node": "18.x"
   }
 }

examples/storybook/.gitignore

@@ -0,0 +1,35 @@
+# 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/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/storybook/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

examples/storybook/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

examples/storybook/README.md

@@ -0,0 +1,17 @@
+# Storybook
+
+This is a [Next.js](https://nextjs.org/) with [Storybook](https://storybook.js.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run storybook
+# or
+yarn storybook
+# or
+pnpm storybook
+```
+
+Navigate to [localhost:6006](http://localhost:6006/).

examples/storybook/app/api/hello/route.ts

@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response('Hello, Next.js!')
+}

examples/storybook/app/globals.css

@@ -0,0 +1,107 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

examples/storybook/app/layout.tsx

@@ -0,0 +1,18 @@
+import './globals.css'
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

examples/storybook/app/page.module.css

@@ -0,0 +1,229 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  width: var(--max-width);
+  max-width: 100%;
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo {
+  position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(var(--background-end-rgb)) 40%
+    );
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}

examples/storybook/app/page.tsx

@@ -0,0 +1,102 @@
+import Image from 'next/image'
+import { Inter } from 'next/font/google'
+import styles from './page.module.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Get started by editing&nbsp;
+          <code className={styles.code}>app/page.tsx</code>
+        </p>
+        <div>
+          <a
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className={styles.vercelLogo}
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.center}>
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className={styles.grid}>
+        <a
+          href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={inter.className}>
+            Docs <span>-&gt;</span>
+          </h2>
+          <p className={inter.className}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={inter.className}>
+            Learn <span>-&gt;</span>
+          </h2>
+          <p className={inter.className}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={inter.className}>
+            Templates <span>-&gt;</span>
+          </h2>
+          <p className={inter.className}>Explore the Next.js 13 playground.</p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={inter.className}>
+            Deploy <span>-&gt;</span>
+          </h2>
+          <p className={inter.className}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}

examples/storybook/next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+}
+
+module.exports = nextConfig

examples/storybook/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "storybook-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@types/node": "18.15.12",
+    "@types/react": "18.0.37",
+    "@types/react-dom": "18.0.11",
+    "next": "13.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/nextjs": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "storybook": "^7.0.6"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

examples/storybook/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

examples/storybook/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

examples/storybook/stories/Button.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

examples/storybook/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};

examples/storybook/stories/Header.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

examples/storybook/stories/Header.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+  name: string;
+};
+
+interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <header>
+    <div className="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);

examples/storybook/stories/Introduction.mdx

@@ -0,0 +1,230 @@
+import { Meta } from '@storybook/blocks';
+import Image from 'next/image';
+
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item-img-wrapper {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={Plugin} alt="plugin" />
+    </div>
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={StackAlt} alt="Build" />
+    </div>
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={Colors} alt="colors" />
+    </div>
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={Flow} alt="flow" />
+    </div>
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Repo} alt="repo" />
+    </div>
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Direction} alt="direction" />
+    </div>
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Code} alt="code" />
+    </div>
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Comments} alt="comments" />
+    </div>
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.mdx</code>
+</div>

examples/storybook/stories/Page.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};

examples/storybook/stories/Page.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+type User = {
+  name: string;
+};
+
+export const Page: React.FC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

examples/storybook/stories/assets/code-brackets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>

examples/storybook/stories/assets/comments.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>

examples/storybook/stories/assets/direction.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>

examples/storybook/stories/assets/flow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>

examples/storybook/stories/assets/plugin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>

examples/storybook/stories/assets/repo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>

examples/storybook/stories/assets/stackalt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>

examples/storybook/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

examples/storybook/stories/header.css

@@ -0,0 +1,32 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

examples/storybook/stories/page.css

@@ -0,0 +1,69 @@
+section {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+section h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+section p {
+  margin: 1em 0;
+}
+
+section a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+section ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+section li {
+  margin-bottom: 8px;
+}
+
+section .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+section .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+section .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+section .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

examples/storybook/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/sveltekit-1/.eslintrc.cjs

@@ -1,11 +1,10 @@
 module.exports = {
 	root: true,
-	extends: ['eslint:recommended', 'prettier'],
-	plugins: ['svelte3'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,

examples/sveltekit-1/.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+resolution-mode=highest

examples/sveltekit-1/README.md

@@ -1,18 +1,12 @@
-# create-svelte
+# SvelteKit Demo app
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+The official demo app for SvelteKit, hosted on Vercel.
 
-## Creating a project
+## Deploy Your Own
 
-If you're seeing this, you've probably already done this step. Congrats!
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fsveltekit-1&project-name=sveltekit-vercel&repository-name=sveltekit-vercel&demo-title=SvelteKit%20%2B%20Vercel&demo-url=https%3A%2F%2Fsveltekit-template.vercel.app%2F)
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+_Live Example: https://sveltekit-template.vercel.app_
 
 ## Developing
 
@@ -35,4 +29,8 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+## Speed Insights
+
+Once deployed on Vercel, you can benefit from [Speed Insights](https://vercel.com/docs/concepts/speed-insights) simply by navigating to Vercel's dashboard, clicking on the 'Speed Insights' tab, and enabling the product.
+
+You will get data once your application will be re-deployed and will receive visitors.

examples/sveltekit-1/package.json

@@ -16,19 +16,20 @@
 		"@fontsource/fira-mono": "^4.5.10",
 		"@neoconfetti/svelte": "^1.0.0",
 		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-vercel": "^1.0.0",
-		"@sveltejs/kit": "^1.0.0",
+		"@sveltejs/adapter-vercel": "^3.0.0",
+		"@sveltejs/kit": "^1.5.0",
 		"@types/cookie": "^0.5.1",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint-plugin-svelte": "^2.26.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
-		"svelte-check": "^2.9.2",
-		"typescript": "^4.9.3",
-		"vite": "^4.0.0",
-		"vitest": "^0.25.3"
+		"svelte-check": "^3.0.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.3.0",
+		"vitest": "^0.25.3",
+		"web-vitals": "^3.3.1"
 	},
 	"type": "module"
 }

examples/sveltekit-1/playwright.config.js

@@ -4,7 +4,8 @@ const config = {
 		command: 'npm run build && npm run preview',
 		port: 4173
 	},
-	testDir: 'tests'
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
 };
 
 export default config;

examples/sveltekit-1/src/app.d.ts

@@ -1,9 +1,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-	// interface Error {}
-	// interface Locals {}
-	// interface PageData {}
-	// interface Platform {}
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
 }
+
+export {};

examples/sveltekit-1/src/lib/vitals.js

@@ -0,0 +1,63 @@
+import { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';
+
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
+
+function getConnectionSpeed() {
+	// @ts-ignore
+	return navigator?.connection?.effectiveType ?? '';
+}
+
+/**
+ * @param {import("web-vitals").Metric} metric
+ * @param {{ params: { [s: string]: any; } | ArrayLike<any>; path: string; analyticsId: string; debug: boolean; }} options
+ */
+function sendToAnalytics(metric, options) {
+	const page = Object.entries(options.params).reduce(
+		(acc, [key, value]) => acc.replace(value, `[${key}]`),
+		options.path
+	);
+
+	const body = {
+		dsn: options.analyticsId,
+		id: metric.id,
+		page,
+		href: location.href,
+		event_name: metric.name,
+		value: metric.value.toString(),
+		speed: getConnectionSpeed()
+	};
+
+	if (options.debug) {
+		console.log('[Web Vitals]', metric.name, JSON.stringify(body, null, 2));
+	}
+
+	const blob = new Blob([new URLSearchParams(body).toString()], {
+		// This content type is necessary for `sendBeacon`
+		type: 'application/x-www-form-urlencoded'
+	});
+	if (navigator.sendBeacon) {
+		navigator.sendBeacon(vitalsUrl, blob);
+	} else
+		fetch(vitalsUrl, {
+			body: blob,
+			method: 'POST',
+			credentials: 'omit',
+			keepalive: true
+		});
+}
+
+/**
+ * @param {any} options
+ */
+export function webVitals(options) {
+	try {
+		console.log(`[Web Vitals] for page ${options.path}`);
+		onFID((metric) => sendToAnalytics(metric, options));
+		onTTFB((metric) => sendToAnalytics(metric, options));
+		onLCP((metric) => sendToAnalytics(metric, options));
+		onCLS((metric) => sendToAnalytics(metric, options));
+		onFCP((metric) => sendToAnalytics(metric, options));
+	} catch (err) {
+		console.error(`[Web Vitals] for page ${options.path}`, err);
+	}
+}

examples/sveltekit-1/src/routes/+layout.server.js

@@ -0,0 +1,6 @@
+import { env } from '$env/dynamic/private';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export function load() {
+	return { analyticsId: env.VERCEL_ANALYTICS_ID };
+}

examples/sveltekit-1/src/routes/+layout.svelte

@@ -1,6 +1,20 @@
 <script>
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { webVitals } from '$lib/vitals';
 	import Header from './Header.svelte';
 	import './styles.css';
+
+	/** @type {import('./$types').LayoutServerData} */
+	export let data;
+
+	$: if (browser && data?.analyticsId) {
+		webVitals({
+			path: $page.url.pathname,
+			params: $page.params,
+			analyticsId: data.analyticsId
+		});
+	}
 </script>
 
 <div class="app">

examples/sveltekit-1/src/routes/sverdle/+page.svelte

@@ -107,11 +107,11 @@
 	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
 
 	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
-		{#each Array(6) as _, row}
+		{#each Array.from(Array(6).keys()) as row (row)}
 			{@const current = row === i}
 			<h2 class="visually-hidden">Row {row + 1}</h2>
 			<div class="row" class:current>
-				{#each Array(5) as _, column}
+				{#each Array.from(Array(5).keys()) as column (column)}
 					{@const answer = data.answers[row]?.[column]}
 					{@const value = data.guesses[row]?.[column] ?? ''}
 					{@const selected = current && column === data.guesses[row].length}

examples/sveltekit-1/tests/test.js

@@ -2,5 +2,5 @@ import { expect, test } from '@playwright/test';
 
 test('about page has expected h1', async ({ page }) => {
 	await page.goto('/about');
-	expect(await page.textContent('h1')).toBe('About this app');
+	await expect(page.getByRole('heading', { name: 'About this app' })).toBeVisible();
 });

examples/sveltekit-1/vite.config.js

@@ -1,11 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
 
-/** @type {import('vite').UserConfig} */
-const config = {
+export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}
-};
-
-export default config;
+});

examples/vue/package.json

@@ -6,20 +6,20 @@
     "lint": "vue-cli-service lint"
   },
   "engines": {
-    "node": "16.x"
+    "node": "18.x"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "core-js": "^3.30.2",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@babel/eslint-parser": "^7.21.8",
+    "eslint": "^8.4.1",
+    "eslint-plugin-vue": "^9.14.0"
   },
   "eslintConfig": {
     "root": true,
@@ -31,7 +31,7 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "rules": {}
   },

internals/constants/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @vercel-internals/constants
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`c7bcea408`](https://github.com/vercel/vercel/commit/c7bcea408131df2d65338e50ce319a6d8e4a8a82)]:
+  - @vercel/build-utils@6.7.4

internals/constants/package.json

@@ -1,17 +1,18 @@
 {
   "private": true,
   "name": "@vercel-internals/constants",
+  "version": "1.0.1",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@vercel/build-utils": "6.3.2",
-    "@vercel/routing-utils": "2.1.10"
+    "@vercel/build-utils": "6.7.4",
+    "@vercel/routing-utils": "2.2.1"
   },
   "devDependencies": {
-    "@vercel-internals/tsconfig": "*",
+    "@vercel-internals/tsconfig": "1.0.0",
     "@vercel/style-guide": "4.0.2",
     "typescript": "4.9.4"
   }

internals/get-package-json/package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "name": "@vercel-internals/get-package-json",
+  "version": "1.0.0",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "files": [
@@ -14,7 +15,7 @@
   "devDependencies": {
     "@types/jest": "29.5.0",
     "@types/node": "14.14.31",
-    "@vercel-internals/tsconfig": "*",
+    "@vercel-internals/tsconfig": "1.0.0",
     "@vercel/style-guide": "4.0.2",
     "jest": "29.5.0",
     "ts-jest": "29.1.0",

internals/tsconfig/package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "name": "@vercel-internals/tsconfig",
+  "version": "1.0.0",
   "description": "Node.js tsconfig file based on `@vercel/style-guide`",
   "files": [
     "tsconfig.json"

internals/types/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @vercel-internals/types
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`c7bcea408`](https://github.com/vercel/vercel/commit/c7bcea408131df2d65338e50ce319a6d8e4a8a82)]:
+  - @vercel/build-utils@6.7.4
+  - @vercel-internals/constants@1.0.1

internals/types/index.d.ts

@@ -157,6 +157,7 @@ export type Deployment = {
   errorLink?: string;
   errorMessage?: string | null;
   errorStep?: string;
+  forced?: boolean;
   functions?: BuilderFunctions | null;
   gitSource?: {
     org?: string;
@@ -183,6 +184,7 @@ export type Deployment = {
   ownerId?: string;
   plan?: 'enterprise' | 'hobby' | 'oss' | 'pro';
   previewCommentsEnabled?: boolean;
+  private?: boolean;
   projectId?: string;
   projectSettings?: {
     buildCommand?: string | null;
@@ -353,7 +355,7 @@ export interface Project extends ProjectSettings {
   link?: ProjectLinkData;
   alias?: ProjectAliasTarget[];
   latestDeployments?: Partial<Deployment>[];
-  lastRollbackTarget: RollbackTarget | null;
+  lastAliasRequest?: LastAliasRequest | null;
 }
 
 export interface Org {
@@ -363,8 +365,19 @@ export interface Org {
 }
 
 export interface ProjectLink {
+  /**
+   * ID of the Vercel Project.
+   */
   projectId: string;
+  /**
+   * User or Team ID of the owner of the Vercel Project.
+   */
   orgId: string;
+  /**
+   * When linked as a repository, contains the absolute path
+   * to the root directory of the repository.
+   */
+  repoRoot?: string;
 }
 
 export interface PaginationOptions {
@@ -374,7 +387,7 @@ export interface PaginationOptions {
 }
 
 export type ProjectLinkResult =
-  | { status: 'linked'; org: Org; project: Project }
+  | { status: 'linked'; org: Org; project: Project; repoRoot?: string }
   | { status: 'not_linked'; org: null; project: null }
   | {
       status: 'error';
@@ -388,6 +401,9 @@ export type ProjectLinkResult =
         | 'MISSING_PROJECT_SETTINGS';
     };
 
+/**
+ * @deprecated - `RollbackJobStatus` has been replace by `LastAliasRequest['jobStatus']`.
+ */
 export type RollbackJobStatus =
   | 'pending'
   | 'in-progress'
@@ -395,6 +411,10 @@ export type RollbackJobStatus =
   | 'failed'
   | 'skipped';
 
+/**
+ * @deprecated - `RollbackTarget` has been renamed to `LastAliasRequest` so it can
+ * be shared with "promote".
+ */
 export interface RollbackTarget {
   fromDeploymentId: string;
   jobStatus: RollbackJobStatus;
@@ -402,6 +422,14 @@ export interface RollbackTarget {
   toDeploymentId: string;
 }
 
+export interface LastAliasRequest {
+  fromDeploymentId: string;
+  jobStatus: 'pending' | 'in-progress' | 'succeeded' | 'failed' | 'skipped';
+  requestedAt: number;
+  toDeploymentId: string;
+  type: 'rollback' | 'promote';
+}
+
 export interface Token {
   id: string;
   name: string;

internals/types/package.json

@@ -1,16 +1,17 @@
 {
   "private": true,
   "name": "@vercel-internals/types",
+  "version": "1.0.1",
   "types": "index.d.ts",
   "main": "index.d.ts",
   "dependencies": {
     "@types/node": "14.14.31",
-    "@vercel-internals/constants": "*",
-    "@vercel/build-utils": "6.3.2",
-    "@vercel/routing-utils": "2.1.10"
+    "@vercel-internals/constants": "1.0.1",
+    "@vercel/build-utils": "6.7.4",
+    "@vercel/routing-utils": "2.2.1"
   },
   "devDependencies": {
-    "@vercel-internals/tsconfig": "*",
+    "@vercel-internals/tsconfig": "1.0.0",
     "@vercel/style-guide": "4.0.2",
     "typescript": "4.9.4"
   }

package.json

@@ -4,10 +4,9 @@
   "private": true,
   "license": "Apache-2.0",
   "packageManager": "pnpm@8.3.1",
-  "dependencies": {
-    "lerna": "5.6.2"
-  },
   "devDependencies": {
+    "@changesets/cli": "2.26.1",
+    "@svitejs/changesets-changelog-github-compact": "1.1.0",
     "@types/node": "14.18.33",
     "@typescript-eslint/eslint-plugin": "5.21.0",
     "@typescript-eslint/parser": "5.21.0",
@@ -22,6 +21,7 @@
     "eslint-plugin-jest": "26.1.5",
     "execa": "3.2.0",
     "fs-extra": "11.1.0",
+    "glob": "10.2.3",
     "husky": "7.0.4",
     "jest": "29.5.0",
     "json5": "2.1.1",
@@ -32,16 +32,10 @@
     "source-map-support": "0.5.12",
     "ts-eager": "2.0.2",
     "ts-jest": "29.1.0",
-    "typescript": "4.9.5",
-    "turbo": "1.9.3"
+    "turbo": "1.9.9",
+    "typescript": "4.9.5"
   },
   "scripts": {
-    "lerna": "lerna",
-    "version": "pnpm install && git add pnpm-lock.yaml",
-    "bootstrap": "lerna bootstrap",
-    "publish-stable": "echo 'Run `pnpm changelog` for instructions'",
-    "publish-from-github": "./utils/publish.sh",
-    "changelog": "node utils/changelog.js",
     "build": "node utils/gen.js && turbo --no-update-notifier run build",
     "vercel-build": "pnpm build && pnpm run pack && cd api && node -r ts-eager/register ./_lib/script/build.ts",
     "pre-commit": "lint-staged",
@@ -53,7 +47,9 @@
     "lint": "eslint . --cache --ext .ts,.js",
     "prettier-check": "prettier --check .",
     "prepare": "husky install",
-    "pack": "cd utils && node -r ts-eager/register ./pack.ts"
+    "pack": "cd utils && node -r ts-eager/register ./pack.ts",
+    "ci:version": "changeset version && pnpm install --no-frozen-lockfile",
+    "ci:publish": "pnpm publish -r && changeset tag"
   },
   "lint-staged": {
     "./{*,{api,packages,test,utils}/**/*}.{js,ts}": [

packages/build-utils/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @vercel/build-utils
+
+## 6.7.4
+
+### Patch Changes
+
+- Remove usage of `env` from Edge Functions and Middleware ([#10018](https://github.com/vercel/vercel/pull/10018))
+
+## 6.7.3
+
+### Patch Changes
+
+- Deprecate Node.js 14.x and 16.x with warning ([#9976](https://github.com/vercel/vercel/pull/9976))

packages/build-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/build-utils",
-  "version": "6.7.2",
+  "version": "6.7.4",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",

packages/build-utils/src/edge-function.ts

@@ -27,12 +27,6 @@ export class EdgeFunction {
    */
   files: Files;
 
-  /**
-   * Extra environment variables in use for the user code, to be
-   * assigned to the edge function.
-   */
-  envVarsInUse?: string[];
-
   /**
    * Extra binary files to be included in the edge function
    */
@@ -50,7 +44,6 @@ export class EdgeFunction {
     this.deploymentTarget = params.deploymentTarget;
     this.entrypoint = params.entrypoint;
     this.files = params.files;
-    this.envVarsInUse = params.envVarsInUse;
     this.assets = params.assets;
     this.regions = params.regions;
     this.framework = params.framework;

packages/build-utils/src/fs/node-version.ts

@@ -6,8 +6,18 @@ import debug from '../debug';
 function getOptions() {
   const options = [
     { major: 18, range: '18.x', runtime: 'nodejs18.x' },
-    { major: 16, range: '16.x', runtime: 'nodejs16.x' },
-    { major: 14, range: '14.x', runtime: 'nodejs14.x' },
+    {
+      major: 16,
+      range: '16.x',
+      runtime: 'nodejs16.x',
+      discontinueDate: new Date('2023-08-15'),
+    },
+    {
+      major: 14,
+      range: '14.x',
+      runtime: 'nodejs14.x',
+      discontinueDate: new Date('2023-08-15'),
+    },
     {
       major: 12,
       range: '12.x',

packages/build-utils/test/pkg-engine-node-exact/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
   "engines": {
-    "node": "16.14.0"
+    "node": "18.2.0"
   }
 }

packages/build-utils/test/pkg-engine-node/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
   "engines": {
-    "node": "14.x"
+    "node": "18.x"
   }
 }

packages/build-utils/test/unit.test.ts

@@ -140,20 +140,20 @@ it('should ignore node version in vercel dev getNodeVersion()', async () => {
 
 it('should select project setting from config when no package.json is found and fallback undefined', async () => {
   expect(
-    await getNodeVersion('/tmp', undefined, { nodeVersion: '16.x' }, {})
-  ).toHaveProperty('range', '16.x');
+    await getNodeVersion('/tmp', undefined, { nodeVersion: '18.x' }, {})
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([]);
 });
 
 it('should select project setting from config when no package.json is found and fallback is null', async () => {
   expect(
-    await getNodeVersion('/tmp', null as any, { nodeVersion: '16.x' }, {})
-  ).toHaveProperty('range', '16.x');
+    await getNodeVersion('/tmp', null as any, { nodeVersion: '18.x' }, {})
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([]);
 });
 
 it('should select project setting from fallback when no package.json is found', async () => {
-  expect(await getNodeVersion('/tmp', '16.x')).toHaveProperty('range', '16.x');
+  expect(await getNodeVersion('/tmp', '18.x')).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([]);
 });
 
@@ -165,9 +165,9 @@ it('should prefer package.json engines over project setting from config and warn
       { nodeVersion: '12.x' },
       {}
     )
-  ).toHaveProperty('range', '14.x');
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([
-    'Warning: Due to "engines": { "node": "14.x" } in your `package.json` file, the Node.js Version defined in your Project Settings ("12.x") will not apply. Learn More: http://vercel.link/node-version',
+    'Warning: Due to "engines": { "node": "18.x" } in your `package.json` file, the Node.js Version defined in your Project Settings ("12.x") will not apply. Learn More: http://vercel.link/node-version',
   ]);
 });
 
@@ -179,9 +179,9 @@ it('should warn when package.json engines is exact version', async () => {
       {},
       {}
     )
-  ).toHaveProperty('range', '16.x');
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([
-    'Warning: Detected "engines": { "node": "16.14.0" } in your `package.json` with major.minor.patch, but only major Node.js Version can be selected. Learn More: http://vercel.link/node-version',
+    'Warning: Detected "engines": { "node": "18.2.0" } in your `package.json` with major.minor.patch, but only major Node.js Version can be selected. Learn More: http://vercel.link/node-version',
   ]);
 });
 
@@ -204,30 +204,30 @@ it('should not warn when package.json engines matches project setting from confi
     await getNodeVersion(
       path.join(__dirname, 'pkg-engine-node'),
       undefined,
-      { nodeVersion: '14' },
+      { nodeVersion: '18' },
       {}
     )
-  ).toHaveProperty('range', '14.x');
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([]);
 
   expect(
     await getNodeVersion(
       path.join(__dirname, 'pkg-engine-node'),
       undefined,
-      { nodeVersion: '14.x' },
+      { nodeVersion: '18.x' },
       {}
     )
-  ).toHaveProperty('range', '14.x');
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([]);
 
   expect(
     await getNodeVersion(
       path.join(__dirname, 'pkg-engine-node'),
       undefined,
-      { nodeVersion: '<15' },
+      { nodeVersion: '<19' },
       {}
     )
-  ).toHaveProperty('range', '14.x');
+  ).toHaveProperty('range', '18.x');
   expect(warningMessages).toStrictEqual([]);
 });
 
@@ -238,7 +238,7 @@ it('should get latest node version', async () => {
 it('should throw for discontinued versions', async () => {
   // Mock a future date so that Node 8 and 10 become discontinued
   const realDateNow = Date.now.bind(global.Date);
-  global.Date.now = () => new Date('2022-10-15').getTime();
+  global.Date.now = () => new Date('2023-10-01').getTime();
 
   expect(getSupportedNodeVersion('8.10.x', false)).rejects.toThrow();
   expect(getSupportedNodeVersion('8.10.x', true)).rejects.toThrow();
@@ -246,12 +246,18 @@ it('should throw for discontinued versions', async () => {
   expect(getSupportedNodeVersion('10.x', true)).rejects.toThrow();
   expect(getSupportedNodeVersion('12.x', false)).rejects.toThrow();
   expect(getSupportedNodeVersion('12.x', true)).rejects.toThrow();
+  expect(getSupportedNodeVersion('14.x', false)).rejects.toThrow();
+  expect(getSupportedNodeVersion('14.x', true)).rejects.toThrow();
+  expect(getSupportedNodeVersion('16.x', false)).rejects.toThrow();
+  expect(getSupportedNodeVersion('16.x', true)).rejects.toThrow();
 
   const discontinued = getDiscontinuedNodeVersions();
-  expect(discontinued.length).toBe(3);
-  expect(discontinued[0]).toHaveProperty('range', '12.x');
-  expect(discontinued[1]).toHaveProperty('range', '10.x');
-  expect(discontinued[2]).toHaveProperty('range', '8.10.x');
+  expect(discontinued.length).toBe(5);
+  expect(discontinued[0]).toHaveProperty('range', '16.x');
+  expect(discontinued[1]).toHaveProperty('range', '14.x');
+  expect(discontinued[2]).toHaveProperty('range', '12.x');
+  expect(discontinued[3]).toHaveProperty('range', '10.x');
+  expect(discontinued[4]).toHaveProperty('range', '8.10.x');
 
   global.Date.now = realDateNow;
 });
@@ -277,11 +283,31 @@ it('should warn for deprecated versions, soon to be discontinued', async () => {
     'major',
     12
   );
+  expect(await getSupportedNodeVersion('14.x', false)).toHaveProperty(
+    'major',
+    14
+  );
+  expect(await getSupportedNodeVersion('14.x', true)).toHaveProperty(
+    'major',
+    14
+  );
+  expect(await getSupportedNodeVersion('16.x', false)).toHaveProperty(
+    'major',
+    16
+  );
+  expect(await getSupportedNodeVersion('16.x', true)).toHaveProperty(
+    'major',
+    16
+  );
   expect(warningMessages).toStrictEqual([
     'Error: Node.js version 10.x has reached End-of-Life. Deployments created on or after 2021-04-20 will fail to build. Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.',
     'Error: Node.js version 10.x has reached End-of-Life. Deployments created on or after 2021-04-20 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.',
     'Error: Node.js version 12.x has reached End-of-Life. Deployments created on or after 2022-10-03 will fail to build. Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.',
     'Error: Node.js version 12.x has reached End-of-Life. Deployments created on or after 2022-10-03 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.',
+    'Error: Node.js version 14.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.',
+    'Error: Node.js version 14.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.',
+    'Error: Node.js version 16.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.',
+    'Error: Node.js version 16.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.',
   ]);
 
   global.Date.now = realDateNow;

packages/cli/CHANGELOG.md

@@ -0,0 +1,105 @@
+# vercel
+
+## 30.1.0
+
+### Minor Changes
+
+- New `vc promote` command ([#9984](https://github.com/vercel/vercel/pull/9984))
+
+### Patch Changes
+
+- Support `deploy` subcommand in "repo linked" mode ([#10013](https://github.com/vercel/vercel/pull/10013))
+
+- [cli] Update `vc rollback` to use `lastRequestAlias` instead of `lastRollbackTarget` ([#10019](https://github.com/vercel/vercel/pull/10019))
+
+- Fix `--cwd` flag with a relative path for `env`, `link`, `promote`, and `rollback` subcommands ([#10031](https://github.com/vercel/vercel/pull/10031))
+
+- Updated dependencies [[`c6c19354e`](https://github.com/vercel/vercel/commit/c6c19354e852cfc1338b223058c4b07fdc71c723), [`b56ac2717`](https://github.com/vercel/vercel/commit/b56ac2717d6769eb400f9746f0a05431929b4501), [`c63679ea0`](https://github.com/vercel/vercel/commit/c63679ea0a6bc48c0759ccf3c0c0a8106bd324f0), [`c7bcea408`](https://github.com/vercel/vercel/commit/c7bcea408131df2d65338e50ce319a6d8e4a8a82)]:
+  - @vercel/next@3.8.6
+  - @vercel/build-utils@6.7.4
+  - @vercel/node@2.14.4
+  - @vercel/remix-builder@1.8.11
+  - @vercel/static-build@1.3.33
+
+## 30.0.0
+
+### Major Changes
+
+- Change `vc env pull` default output file to `.env.local` ([#9892](https://github.com/vercel/vercel/pull/9892))
+
+- Remove `--platform-version` global common arg ([#9807](https://github.com/vercel/vercel/pull/9807))
+
+### Minor Changes
+
+- [cli] implement `vc deploy --prod --skip-build` ([#9836](https://github.com/vercel/vercel/pull/9836))
+
+- New `vc redeploy` command ([#9956](https://github.com/vercel/vercel/pull/9956))
+
+### Patch Changes
+
+- Fix `vercel git connect` command when passing a URL parameter ([#9967](https://github.com/vercel/vercel/pull/9967))
+
+## 29.4.0
+
+### Minor Changes
+
+- Add `vercel link --repo` flag to link to repository (multiple projects), rather than an individual project (alpha) ([#8931](https://github.com/vercel/vercel/pull/8931))
+
+## 29.3.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @vercel/static-build@1.3.32
+
+## 29.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`2c950d47a`](https://github.com/vercel/vercel/commit/2c950d47aeb22a3de16f983259ea6f37a4555189), [`71b9f3a94`](https://github.com/vercel/vercel/commit/71b9f3a94b7922607f8f24bf7b2bd1742e62cc05), [`f00b08a82`](https://github.com/vercel/vercel/commit/f00b08a82085c3a63059f34f67f10ced92f2979c)]:
+  - @vercel/static-build@1.3.31
+  - @vercel/build-utils@6.7.3
+  - @vercel/next@3.8.5
+  - @vercel/node@2.14.3
+  - @vercel/remix-builder@1.8.10
+
+## 29.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`67e556bc8`](https://github.com/vercel/vercel/commit/67e556bc80c821c233120a2ec1611adb8e195baa), [`ba10fb4dd`](https://github.com/vercel/vercel/commit/ba10fb4dd4155a75df79b98a0c43a6c42eac7b62)]:
+  - @vercel/remix-builder@1.8.9
+  - @vercel/next@3.8.4
+
+## 29.3.3
+
+### Patch Changes
+
+- Updated dependencies [[`6c6f3ce9d`](https://github.com/vercel/vercel/commit/6c6f3ce9d228b1e038641e4bafb38c3487e7dff7)]:
+  - @vercel/next@3.8.3
+
+## 29.3.2
+
+### Patch Changes
+
+- [vc dev] Fix serverless function size limit condition ([#9961](https://github.com/vercel/vercel/pull/9961))
+
+## 29.3.1
+
+### Patch Changes
+
+- Sort environment variables alphabetically in `vercel env pull` ([#9949](https://github.com/vercel/vercel/pull/9949))
+- Skip 50MB zip size limit for Python ([#9944](https://github.com/vercel/vercel/pull/9944))
+
+## 29.3.0
+
+### Minor Changes
+
+- [cli] remove `vc rollback` beta label ([#9928](https://github.com/vercel/vercel/pull/9928))
+
+## 29.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`6d5983eaa`](https://github.com/vercel/vercel/commit/6d5983eaaefe3fd2204f49c3228718ac64a452e3)]:
+  - @vercel/remix-builder@1.8.8

packages/cli/README.md

@@ -10,9 +10,7 @@
 
 ## Usage
 
-Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.
-
-We enable teams to iterate quickly and develop, preview, and ship delightful user experiences. Vercel has zero-configuration support for 35+ frontend frameworks and integrates with your headless content, commerce, or database of choice.
+Vercel's frontend cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web.
 
 To install the latest version of Vercel CLI, run this command:
 

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel",
-  "version": "29.0.0",
+  "version": "30.1.0",
   "preferGlobal": true,
   "license": "Apache-2.0",
   "description": "The command-line interface for Vercel",
@@ -32,19 +32,20 @@
     "node": ">= 14"
   },
   "dependencies": {
-    "@vercel/build-utils": "6.7.2",
+    "@vercel/build-utils": "6.7.4",
     "@vercel/go": "2.5.1",
     "@vercel/hydrogen": "0.0.64",
-    "@vercel/next": "3.7.6",
-    "@vercel/node": "2.13.0",
+    "@vercel/next": "3.8.6",
+    "@vercel/node": "2.14.4",
     "@vercel/python": "3.1.60",
     "@vercel/redwood": "1.1.15",
-    "@vercel/remix-builder": "1.8.6",
+    "@vercel/remix-builder": "1.8.11",
     "@vercel/ruby": "1.3.76",
-    "@vercel/static-build": "1.3.26"
+    "@vercel/static-build": "1.3.33"
   },
   "devDependencies": {
     "@alex_neo/jest-expect-message": "1.0.5",
+    "@edge-runtime/node-utils": "2.0.3",
     "@next/env": "11.1.2",
     "@sentry/node": "5.5.0",
     "@sindresorhus/slugify": "0.11.0",
@@ -81,16 +82,16 @@
     "@types/title": "3.4.1",
     "@types/universal-analytics": "0.4.2",
     "@types/update-notifier": "5.1.0",
-    "@types/which": "1.3.2",
+    "@types/which": "3.0.0",
     "@types/write-json-file": "2.2.1",
     "@types/yauzl-promise": "2.1.0",
-    "@vercel-internals/constants": "*",
-    "@vercel-internals/get-package-json": "*",
-    "@vercel-internals/types": "*",
-    "@vercel/client": "12.4.12",
+    "@vercel-internals/constants": "1.0.1",
+    "@vercel-internals/get-package-json": "1.0.0",
+    "@vercel-internals/types": "1.0.1",
+    "@vercel/client": "12.6.1",
     "@vercel/error-utils": "1.0.10",
-    "@vercel/frameworks": "1.3.5",
-    "@vercel/fs-detectors": "3.8.12",
+    "@vercel/frameworks": "1.4.2",
+    "@vercel/fs-detectors": "3.9.3",
     "@vercel/fun": "1.0.4",
     "@vercel/ncc": "0.24.0",
     "@vercel/routing-utils": "2.2.1",
@@ -100,7 +101,7 @@
     "ansi-escapes": "4.3.2",
     "ansi-regex": "5.0.1",
     "arg": "5.0.0",
-    "async-listen": "1.2.0",
+    "async-listen": "3.0.0",
     "async-retry": "1.1.3",
     "async-sema": "2.1.4",
     "bytes": "3.0.0",
@@ -118,6 +119,7 @@
     "escape-html": "1.0.3",
     "esm": "3.1.4",
     "execa": "3.2.0",
+    "expect": "29.5.0",
     "express": "4.17.1",
     "fast-deep-equal": "3.1.3",
     "find-up": "4.1.0",
@@ -147,6 +149,8 @@
     "pcre-to-regexp": "1.0.0",
     "pluralize": "7.0.0",
     "promisepipe": "3.0.0",
+    "proxy": "2.0.0",
+    "proxy-agent": "6.1.1",
     "psl": "1.1.31",
     "qr-image": "3.2.0",
     "raw-body": "2.4.1",
@@ -165,6 +169,7 @@
     "ts-node": "10.9.1",
     "universal-analytics": "0.4.20",
     "utility-types": "2.1.0",
+    "which": "3.0.0",
     "write-json-file": "2.2.0",
     "xdg-app-paths": "5.1.0",
     "yauzl-promise": "2.1.3"

packages/cli/src/args.ts

@@ -0,0 +1,84 @@
+import chalk from 'chalk';
+import logo from './util/output/logo';
+import { getPkgName } from './util/pkg-name';
+
+export const help = () => `
+  ${chalk.bold(`${logo} ${getPkgName()}`)} [options] <command | path>
+
+  ${chalk.dim('For deploy command help, run `vercel deploy --help`')}
+
+  ${chalk.dim('Commands:')}
+
+    ${chalk.dim('Basic')}
+
+      deploy               [path]      Performs a deployment ${chalk.bold(
+        '(default)'
+      )}
+      dev                              Start a local development server
+      env                              Manages the Environment Variables for your current Project
+      git                              Manage Git provider repository for your current Project
+      help                 [cmd]       Displays complete help for [cmd]
+      init                 [example]   Initialize an example project
+      inspect              [id]        Displays information related to a deployment
+      link                 [path]      Link local directory to a Vercel Project
+      ls | list            [app]       Lists deployments
+      login                [email]     Logs into your account or creates a new one
+      logout                           Logs out of your account
+      promote              [url|id]    Promote an existing deployment to current
+      pull                 [path]      Pull your Project Settings from the cloud
+      redeploy             [url|id]    Rebuild and deploy a previous deployment.
+      rollback             [url|id]    Quickly revert back to a previous deployment
+      switch               [scope]     Switches between teams and your personal account
+
+    ${chalk.dim('Advanced')}
+
+      alias                [cmd]       Manages your domain aliases
+      bisect                           Use binary search to find the deployment that introduced a bug
+      certs                [cmd]       Manages your SSL certificates
+      dns                  [name]      Manages your DNS records
+      domains              [name]      Manages your domain names
+      logs                 [url]       Displays the logs for a deployment
+      projects                         Manages your Projects
+      rm | remove          [id]        Removes a deployment
+      secrets              [name]      Manages your global Secrets, for use in Environment Variables
+      teams                            Manages your teams
+      whoami                           Shows the username of the currently logged in user
+
+  ${chalk.dim('Global Options:')}
+
+    -h, --help                     Output usage information
+    -v, --version                  Output the version number
+    --cwd                          Current working directory
+    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
+  'FILE'
+)}   Path to the local ${'`vercel.json`'} file
+    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
+  'DIR'
+)}    Path to the global ${'`.vercel`'} directory
+    -d, --debug                    Debug mode [off]
+    --no-color                     No color mode [off]
+    -S, --scope                    Set a custom scope
+    -t ${chalk.underline('TOKEN')}, --token=${chalk.underline(
+  'TOKEN'
+)}        Login token
+
+  ${chalk.dim('Examples:')}
+
+  ${chalk.gray('–')} Deploy the current directory
+
+    ${chalk.cyan(`$ ${getPkgName()}`)}
+
+  ${chalk.gray('–')} Deploy a custom path
+
+    ${chalk.cyan(`$ ${getPkgName()} /usr/src/project`)}
+
+  ${chalk.gray('–')} Deploy with Environment Variables
+
+    ${chalk.cyan(`$ ${getPkgName()} -e NODE_ENV=production`)}
+
+  ${chalk.gray('–')} Show the usage information for the sub command ${chalk.dim(
+  '`list`'
+)}
+
+    ${chalk.cyan(`$ ${getPkgName()} help list`)}
+`;

packages/cli/src/commands/build.ts

@@ -133,7 +133,7 @@ const help = () => {
 };
 
 export default async function main(client: Client): Promise<number> {
-  const { output } = client;
+  const { cwd, output } = client;
 
   // Ensure that `vc build` is not being invoked recursively
   if (process.env.__VERCEL_BUILD_RUNNING) {
@@ -165,8 +165,6 @@ export default async function main(client: Client): Promise<number> {
     return 2;
   }
 
-  const cwd = process.cwd();
-
   // Build `target` influences which environment variables will be used
   const target = argv['--prod'] ? 'production' : 'preview';
   const yes = Boolean(argv['--yes']);

packages/cli/src/commands/deploy/args.ts

@@ -2,80 +2,27 @@ import chalk from 'chalk';
 import logo from '../../util/output/logo';
 import { getPkgName } from '../../util/pkg-name';
 
-export const help = () => `
-  ${chalk.bold(`${logo} ${getPkgName()}`)} [options] <command | path>
+export const help = () => {
+  return `
+  ${chalk.bold(`${logo} ${getPkgName()} [deploy]`)} [path-to-project] [options]
 
-  ${chalk.dim('Commands:')}
-
-    ${chalk.dim('Basic')}
-
-      deploy               [path]      Performs a deployment ${chalk.bold(
-        '(default)'
-      )}
-      dev                              Start a local development server
-      env                              Manages the Environment Variables for your current Project
-      git                              Manage Git provider repository for your current Project
-      help                 [cmd]       Displays complete help for [cmd]
-      init                 [example]   Initialize an example project
-      inspect              [id]        Displays information related to a deployment
-      link                 [path]      Link local directory to a Vercel Project
-      ls | list            [app]       Lists deployments
-      login                [email]     Logs into your account or creates a new one
-      logout                           Logs out of your account
-      pull                 [path]      Pull your Project Settings from the cloud
-      rollback             [url|id]    Quickly revert back to a previous deployment [beta]
-      switch               [scope]     Switches between teams and your personal account
-
-    ${chalk.dim('Advanced')}
-
-      alias                [cmd]       Manages your domain aliases
-      bisect                           Use binary search to find the deployment that introduced a bug
-      certs                [cmd]       Manages your SSL certificates
-      dns                  [name]      Manages your DNS records
-      domains              [name]      Manages your domain names
-      logs                 [url]       Displays the logs for a deployment
-      projects                         Manages your Projects
-      rm | remove          [id]        Removes a deployment
-      secrets              [name]      Manages your global Secrets, for use in Environment Variables
-      teams                            Manages your teams
-      whoami                           Shows the username of the currently logged in user
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                     Output usage information
-    -v, --version                  Output the version number
-    --cwd                          Current working directory
-    -V, --platform-version         Set the platform version to deploy to
-    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
-  'FILE'
-)}   Path to the local ${'`vercel.json`'} file
-    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
-  'DIR'
-)}    Path to the global ${'`.vercel`'} directory
-    -d, --debug                    Debug mode [off]
-    --no-color                     No color mode [off]
-    -f, --force                    Force a new deployment even if nothing has changed
-    --with-cache                   Retain build cache when using "--force"
-    -t ${chalk.underline('TOKEN')}, --token=${chalk.underline(
-  'TOKEN'
-)}        Login token
-    -p, --public                   Deployment is public (${chalk.dim(
-      '`/_src`'
-    )} is exposed)
-    -e, --env                      Include an env var during run time (e.g.: ${chalk.dim(
-      '`-e KEY=value`'
-    )}). Can appear many times.
-    -b, --build-env                Similar to ${chalk.dim(
-      '`--env`'
-    )} but for build time only.
-    -m, --meta                     Add metadata for the deployment (e.g.: ${chalk.dim(
-      '`-m KEY=value`'
-    )}). Can appear many times.
-    --no-wait                      Don't wait for the deployment to finish
-    -S, --scope                    Set a custom scope
-    --regions                      Set default regions to enable the deployment on
-    --prod                         Create a production deployment
-    -y, --yes                      Skip questions when setting up new project using default scope and settings
+  --prod                         Create a production deployment
+  -p, --public                   Deployment is public (${chalk.dim(
+    '`/_src`'
+  )} is exposed)
+  -e, --env                      Include an env var during run time (e.g.: ${chalk.dim(
+    '`-e KEY=value`'
+  )}). Can appear many times.
+  -b, --build-env                Similar to ${chalk.dim(
+    '`--env`'
+  )} but for build time only.
+  -m, --meta                     Add metadata for the deployment (e.g.: ${chalk.dim(
+    '`-m KEY=value`'
+  )}). Can appear many times.
+  --no-wait                      Don't wait for the deployment to finish
+  -f, --force                    Force a new deployment even if nothing has changed
+  --with-cache                   Retain build cache when using "--force"
+  --regions                      Set default regions to enable the deployment on
 
   ${chalk.dim('Examples:')}
 
@@ -89,14 +36,15 @@ export const help = () => `
 
   ${chalk.gray('–')} Deploy with Environment Variables
 
-    ${chalk.cyan(
-      `$ ${getPkgName()} -e NODE_ENV=production -e SECRET=@mysql-secret`
-    )}
+    ${chalk.cyan(`$ ${getPkgName()} -e NODE_ENV=production`)}
 
-  ${chalk.gray('–')} Show the usage information for the sub command ${chalk.dim(
-  '`list`'
-)}
+  ${chalk.gray('–')} Deploy with prebuilt outputs
 
-    ${chalk.cyan(`$ ${getPkgName()} help list`)}
+    ${chalk.cyan(`$ ${getPkgName()} build`)}
+    ${chalk.cyan(`$ ${getPkgName()} deploy --prebuilt`)}
 
+  ${chalk.gray('–')} Write Deployment URL to a file
+
+    ${chalk.cyan(`$ ${getPkgName()} > deployment-url.txt`)}
 `;
+};

packages/cli/src/commands/deploy/index.ts

@@ -2,7 +2,7 @@ import ms from 'ms';
 import fs from 'fs-extra';
 import bytes from 'bytes';
 import chalk from 'chalk';
-import { join, resolve, basename } from 'path';
+import { join, resolve } from 'path';
 import {
   fileNameSymbol,
   VALID_ARCHIVE_FORMATS,
@@ -21,7 +21,6 @@ import stamp from '../../util/output/stamp';
 import createDeploy from '../../util/deploy/create-deploy';
 import getDeployment from '../../util/get-deployment';
 import parseMeta from '../../util/parse-meta';
-import linkStyle from '../../util/output/link';
 import param from '../../util/output/param';
 import {
   BuildsRateLimited,
@@ -59,7 +58,6 @@ import validatePaths, {
   validateRootDirectory,
 } from '../../util/validate-paths';
 import { getCommandName } from '../../util/pkg-name';
-import { getPreferredPreviewURL } from '../../util/deploy/get-preferred-preview-url';
 import { Output } from '../../util/output';
 import { help } from './args';
 import { getDeploymentChecks } from '../../util/deploy/get-deployment-checks';
@@ -70,8 +68,7 @@ import { isValidArchive } from '../../util/deploy/validate-archive-format';
 import { parseEnv } from '../../util/parse-env';
 import { errorToString, isErrnoException, isError } from '@vercel/error-utils';
 import { pickOverrides } from '../../util/projects/project-settings';
-import { isDeploying } from '../../util/deploy/is-deploying';
-import type { Deployment } from '@vercel-internals/types';
+import { printDeploymentStatus } from '../../util/deploy/print-deployment-status';
 
 export default async (client: Client): Promise<number> => {
   const { output } = client;
@@ -93,6 +90,7 @@ export default async (client: Client): Promise<number> => {
       '--prod': Boolean,
       '--archive': String,
       '--no-wait': Boolean,
+      '--skip-domain': Boolean,
       '--yes': Boolean,
       '-f': '--force',
       '-p': '--public',
@@ -132,24 +130,19 @@ export default async (client: Client): Promise<number> => {
   if (argv._.length > 0) {
     // If path is relative: resolve
     // if path is absolute: clear up strange `/` etc
-    paths = argv._.map(item => resolve(process.cwd(), item));
+    paths = argv._.map(item => resolve(client.cwd, item));
   } else {
-    paths = [process.cwd()];
+    paths = [client.cwd];
+  }
+
+  // check paths
+  const pathValidation = await validatePaths(client, paths);
+
+  if (!pathValidation.valid) {
+    return pathValidation.exitCode;
   }
 
   let localConfig = client.localConfig || readLocalConfig(paths[0]);
-
-  for (const path of paths) {
-    try {
-      await fs.stat(path);
-    } catch (err) {
-      output.error(
-        `The specified file or directory "${basename(path)}" does not exist.`
-      );
-      return 1;
-    }
-  }
-
   if (localConfig) {
     const { version } = localConfig;
     const file = highlight(localConfig[fileNameSymbol]!);
@@ -178,14 +171,7 @@ export default async (client: Client): Promise<number> => {
 
   const quiet = !client.stdout.isTTY;
 
-  // check paths
-  const pathValidation = await validatePaths(client, paths);
-
-  if (!pathValidation.valid) {
-    return pathValidation.exitCode;
-  }
-
-  const { path } = pathValidation;
+  let { path: cwd } = pathValidation;
   const autoConfirm = argv['--yes'];
 
   // deprecate --name
@@ -219,7 +205,7 @@ export default async (client: Client): Promise<number> => {
 
   // build `--prebuilt`
   if (argv['--prebuilt']) {
-    const prebuiltExists = await fs.pathExists(join(path, '.vercel/output'));
+    const prebuiltExists = await fs.pathExists(join(cwd, '.vercel/output'));
     if (!prebuiltExists) {
       error(
         `The ${param(
@@ -231,7 +217,7 @@ export default async (client: Client): Promise<number> => {
       return 1;
     }
 
-    const prebuiltBuild = await getPrebuiltJson(path);
+    const prebuiltBuild = await getPrebuiltJson(cwd);
 
     // Ensure that there was not a build error
     const prebuiltError =
@@ -274,7 +260,7 @@ export default async (client: Client): Promise<number> => {
   }
 
   // retrieve `project` and `org` from .vercel
-  const link = await getLinkedProject(client, path);
+  const link = await getLinkedProject(client, cwd);
 
   if (link.status === 'error') {
     return link.exitCode;
@@ -291,7 +277,7 @@ export default async (client: Client): Promise<number> => {
       autoConfirm ||
       (await confirm(
         client,
-        `Set up and deploy ${chalk.cyan(`“${toHumanPath(path)}”`)}?`,
+        `Set up and deploy ${chalk.cyan(`“${toHumanPath(cwd)}”`)}?`,
         true
       ));
 
@@ -338,7 +324,7 @@ export default async (client: Client): Promise<number> => {
 
     if (typeof projectOrNewProjectName === 'string') {
       newProjectName = projectOrNewProjectName;
-      rootDirectory = await inputRootDirectory(client, path, autoConfirm);
+      rootDirectory = await inputRootDirectory(client, cwd, autoConfirm);
     } else {
       project = projectOrNewProjectName;
       rootDirectory = project.rootDirectory;
@@ -346,8 +332,8 @@ export default async (client: Client): Promise<number> => {
 
       // we can already link the project
       await linkFolderToProject(
-        output,
-        path,
+        client,
+        cwd,
         {
           projectId: project.id,
           orgId: org.id,
@@ -359,6 +345,11 @@ export default async (client: Client): Promise<number> => {
     }
   }
 
+  // For repo-style linking, reset the path to the root of the repository
+  if (link.status === 'linked' && link.repoRoot) {
+    cwd = link.repoRoot;
+  }
+
   // At this point `org` should be populated
   if (!org) {
     throw new Error(`"org" is not defined`);
@@ -373,14 +364,14 @@ export default async (client: Client): Promise<number> => {
   // and upload the entire directory.
   const sourcePath =
     rootDirectory && !sourceFilesOutsideRootDirectory
-      ? join(path, rootDirectory)
-      : path;
+      ? join(cwd, rootDirectory)
+      : cwd;
 
   if (
     rootDirectory &&
     (await validateRootDirectory(
       output,
-      path,
+      cwd,
       sourcePath,
       project
         ? `To change your Project Settings, go to https://vercel.com/${org?.slug}/${project.name}/settings`
@@ -393,7 +384,7 @@ export default async (client: Client): Promise<number> => {
   // If Root Directory is used we'll try to read the config
   // from there instead and use it if it exists.
   if (rootDirectory) {
-    const rootDirectoryConfig = readLocalConfig(join(path, rootDirectory));
+    const rootDirectoryConfig = readLocalConfig(join(cwd, rootDirectory));
 
     if (rootDirectoryConfig) {
       debug(`Read local config from root directory (${rootDirectory})`);
@@ -469,7 +460,7 @@ export default async (client: Client): Promise<number> => {
     parseMeta(argv['--meta'])
   );
 
-  const gitMetadata = await createGitMeta(path, output, project);
+  const gitMetadata = await createGitMeta(cwd, output, project);
 
   // Merge dotenv config, `env` from vercel.json, and `--env` / `-e` arguments
   const deploymentEnv = Object.assign(
@@ -520,6 +511,8 @@ export default async (client: Client): Promise<number> => {
   }
 
   try {
+    const autoAssignCustomDomains = !argv['--skip-domain'];
+
     const createArgs: CreateOptions = {
       name,
       env: deploymentEnv,
@@ -543,6 +536,7 @@ export default async (client: Client): Promise<number> => {
       target,
       skipAutoDetectionConfirmation: autoConfirm,
       noWait,
+      autoAssignCustomDomains,
     };
 
     if (!localConfig.builds || localConfig.builds.length === 0) {
@@ -559,11 +553,11 @@ export default async (client: Client): Promise<number> => {
       client,
       now,
       contextName,
-      [sourcePath],
+      sourcePath,
       createArgs,
       org,
       !project,
-      path,
+      cwd,
       archive
     );
 
@@ -595,11 +589,11 @@ export default async (client: Client): Promise<number> => {
         client,
         now,
         contextName,
-        [sourcePath],
+        sourcePath,
         createArgs,
         org,
         false,
-        path
+        cwd
       );
     }
 
@@ -728,7 +722,7 @@ export default async (client: Client): Promise<number> => {
     return 1;
   }
 
-  return printDeploymentStatus(output, client, deployment, deployStamp, noWait);
+  return printDeploymentStatus(client, deployment, deployStamp, noWait);
 };
 
 function handleCreateDeployError(
@@ -835,112 +829,3 @@ const addProcessEnv = async (
     }
   }
 };
-
-const printDeploymentStatus = async (
-  output: Output,
-  client: Client,
-  {
-    readyState,
-    alias: aliasList,
-    aliasError,
-    target,
-    indications,
-    url: deploymentUrl,
-    aliasWarning,
-  }: {
-    readyState: Deployment['readyState'];
-    alias: string[];
-    aliasError: Error;
-    target: string;
-    indications: any;
-    url: string;
-    aliasWarning?: {
-      code: string;
-      message: string;
-      link?: string;
-      action?: string;
-    };
-  },
-  deployStamp: () => string,
-  noWait: boolean
-) => {
-  indications = indications || [];
-  const isProdDeployment = target === 'production';
-
-  let isStillBuilding = false;
-  if (noWait) {
-    if (isDeploying(readyState)) {
-      isStillBuilding = true;
-      output.print(
-        prependEmoji(
-          'Note: Deployment is still processing...',
-          emoji('notice')
-        ) + '\n'
-      );
-    }
-  }
-
-  if (!isStillBuilding && readyState !== 'READY') {
-    output.error(
-      `Your deployment failed. Please retry later. More: https://err.sh/vercel/deployment-error`
-    );
-    return 1;
-  }
-
-  if (aliasError) {
-    output.warn(
-      `Failed to assign aliases${
-        aliasError.message ? `: ${aliasError.message}` : ''
-      }`
-    );
-  } else {
-    // print preview/production url
-    let previewUrl: string;
-    // if `noWait` is true, then use the deployment url, not an alias
-    if (!noWait && Array.isArray(aliasList) && aliasList.length > 0) {
-      const previewUrlInfo = await getPreferredPreviewURL(client, aliasList);
-      if (previewUrlInfo) {
-        previewUrl = previewUrlInfo.previewUrl;
-      } else {
-        previewUrl = `https://${deploymentUrl}`;
-      }
-    } else {
-      // fallback to deployment url
-      previewUrl = `https://${deploymentUrl}`;
-    }
-
-    output.print(
-      prependEmoji(
-        `${isProdDeployment ? 'Production' : 'Preview'}: ${chalk.bold(
-          previewUrl
-        )} ${deployStamp()}`,
-        emoji('success')
-      ) + `\n`
-    );
-  }
-
-  if (aliasWarning?.message) {
-    indications.push({
-      type: 'warning',
-      payload: aliasWarning.message,
-      link: aliasWarning.link,
-      action: aliasWarning.action,
-    });
-  }
-
-  const newline = '\n';
-  for (let indication of indications) {
-    const message =
-      prependEmoji(chalk.dim(indication.payload), emoji(indication.type)) +
-      newline;
-    let link = '';
-    if (indication.link)
-      link =
-        chalk.dim(
-          `${indication.action || 'Learn More'}: ${linkStyle(indication.link)}`
-        ) + newline;
-    output.print(message + link);
-  }
-
-  return 0;
-};

packages/cli/src/commands/env/index.ts

@@ -26,7 +26,7 @@ const help = () => {
     ls      [environment] [gitbranch]         List all variables for the specified Environment
     add     [name] [environment] [gitbranch]  Add an Environment Variable (see examples below)
     rm      [name] [environment] [gitbranch]  Remove an Environment Variable (see examples below)
-    pull    [filename]                        Pull all Development Environment Variables from the cloud and write to a file [.env]
+    pull    [filename]                        Pull all Development Environment Variables from the cloud and write to a file [.env.local]
 
   ${chalk.dim('Options:')}
 
@@ -130,10 +130,9 @@ export default async function main(client: Client) {
     return 2;
   }
 
-  const cwd = argv['--cwd'] || process.cwd();
   const subArgs = argv._.slice(1);
   const { subcommand, args } = getSubcommand(subArgs, COMMAND_CONFIG);
-  const { output, config } = client;
+  const { cwd, output, config } = client;
 
   const target = argv['--environment']?.toLowerCase() || 'development';
   if (!isValidEnvTarget(target)) {