chore: Build S2 Next.js example in verdaccio and add more components (#7794)

* add more components to s2 example

* add s2 next.js example to verdaccio build

* add to CI comment

* enable verdaccio build on branch

* yarn fixes

* fix warnings/errors

* next upgrade

* typescript routing fix

* add to CI

* add TreeView and fix types

* fix VERDACCIO env variable during build

* add Provider

* add 'use client' to app/layout.tsx

* move provider into client

* add back main filters

Author: reidbarber

.circleci/comment.js

@@ -1,5 +1,4 @@
 const Octokit = require('@octokit/rest');
-const fs = require('fs');
 
 const octokit = new Octokit({
   auth: `token ${process.env.GITHUB_TOKEN}`
@@ -36,13 +35,14 @@ async function run() {
             repo: 'react-spectrum',
             pull_number
           });
+          // eslint-disable-next-line max-depth
           if (data && data.head.repo.full_name !== 'adobe/react-spectrum' && data.head.sha === forkHeadCommit) {
             pr = pull_number;
             break;
           }
         }
       } else if (process.env.CIRCLE_BRANCH === 'main') {
-        //If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build
+        // If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build
         await octokit.repos.createCommitComment({
           owner: 'adobe',
           repo: 'react-spectrum',
@@ -54,6 +54,7 @@ async function run() {
       [S2 Parcel Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-parcel-example/index.html)
       [S2 Custom Icons](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/icon-builder-fixture/index.html)
       [S2 Webpack Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-webpack-5-example/index.html)
+      [S2 Next.js Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-next-macros/index.html)
       [CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
       [NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)
       [Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
@@ -84,7 +85,7 @@ async function run() {
   * [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)`
       });
     } catch (err) {
-      console.error(err)
+      console.error(err);
     }
   }
 }

.circleci/config.yml

@@ -678,6 +678,28 @@ jobs:
           paths:
             - '*/verdaccio/s2-webpack-5-example'
 
+  v-s2-next:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - attach_workspace:
+          at: /tmp/verdaccio-workspace
+
+      - run:
+          name: build s2-next off verdaccio
+          command: |
+            ./scripts/verdaccio-ci.sh
+            ./scripts/verdaccio-build-s2-next.sh
+          environment:
+            VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
+
+      - persist_to_workspace:
+          root: verdaccio_dist
+          paths:
+            - '*/verdaccio/s2-next-macros'
+
   v-icon-builder:
     executor: rsp-xlarge
     steps:
@@ -914,6 +936,9 @@ workflows:
       - v-s2-webpack:
           requires:
             - verdaccio
+      - v-s2-next:
+          requires:
+            - verdaccio
       - v-icon-builder:
           requires:
             - verdaccio
@@ -948,6 +973,7 @@ workflows:
             - v-rac-rsp-tailwind
             - v-s2-parcel
             - v-s2-webpack
+            - v-s2-next
             - v-icon-builder
             - v-publish-stats
       - comment:

examples/s2-next-macros/.yarn/releases/yarn-4.2.2.cjs

@@ -5,6 +5,8 @@ let macrosWebpack = macrosPlugin.webpack();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: 'export',
+  basePath: process.env.VERDACCIO && process.env.CIRCLE_SHA1 ? `/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-next-macros` : "",
   webpack(config, {}) {
     config.plugins.push(macrosWebpack);
 

examples/s2-next-macros/next.config.mjs

@@ -3,25 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3456",
+    "dev": "next dev --turbopack -p 3456",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@react-spectrum/s2": "^0.3.0",
-    "next": "14.1.3",
-    "react": "^18",
-    "react-dom": "^18",
-    "unplugin-parcel-macros": "0.0.3"
+    "@react-spectrum/s2": "latest",
+    "next": "15.1.7",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
-    "typescript": "^5"
+    "eslint-config-next": "15.1.7",
+    "typescript": "^5",
+    "unplugin-parcel-macros": "0.1.1"
+  },
+  "resolutions": {
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4"
   }
 }