feat: Setup new S2 docs website (#8300)

* wip

* sidenav

* bump parcel

* wip

* wip

* 19.1

* wip

* more wip

* wip

* cleanup

* build in circleci

* yarn is a jerk

* update parcel to latest

* gdi yarn

* temporarily fix self reference resolution

REVERT THIS

* fixes

* dedupe lightningcss

* lint

* Revert "temporarily fix self reference resolution"

This reverts commit 96474a4.

# Conflicts:
#	packages/@react-aria/dnd/stories/Reorderable.tsx

* bump parcel

* reorganize

* Fix indented props

* Create common code platter component

* Content improvements

* dnd and gridlist

* table

* Select and ComboBox updates

* remove features section

* display relevant part of code block when collapsed

* More components

* ignore example folder in tsconfig

* eslintignore

* Show check mark in copy button when copied

* add anchor links to headings

* Fix empty codeProps

* use link icon on headings

* more content

* initialize search menu

* search menu styles

* add aria-labels to heading anchor links

* mobile layout

* filter cards in search menu by selected library

* use sections in search menu

* generate OG images

* fix og font

* lint

* tabs fix

* lock file

* Add codesandbox, stackblitz, and download zip

* tabs type fix

* centralize all menu show/hide logic in view transition

* fix 'esc' handling to only close

* fix view transitions

* close button on search menu

* add view transition to search field

* cleanup

* tabs cleanup

* fix submenu search field position

* Add shadcn registry and improve share links

* layout fixes

* fix header alignment

* improve nav scrolling mask

* remove submenu TOC feature

* add script to generate markdown docs

* handle StateTable in markdown script

* md script: support text-based PageDescription

* md script: fix remaining missing page descriptions

* md script: fix missing slider description

* cleanup

* md script: handle ExampleSwitcher and VisualExample

* md script: add 'Related Types' with tables for TypeLinks on page

* add button to copy markdown

* add meta tag for llm-friendly version

* md script: fix default className rendering in StateTable

* md script: fix missing PickerItem/PickerSection prop tables

* md script: fix TypeLink for hooks

* lint

* fixes

* layout chaneg

* lint

* build registry in ci

* add correct registry url

* upgrade parcel

* fix scrolling

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: 3 people

.circleci/comment.js

@@ -81,7 +81,8 @@ async function run() {
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
   * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
-  * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
+  * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
+  * [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)`
       });
     } catch (err) {
       console.error(err)

.circleci/config.yml

@@ -470,6 +470,21 @@ jobs:
           paths:
             - '*/docs/'
 
+  s2-docs:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build s2 docs
+          command: make s2-docs
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/s2-docs/'
+
   verdaccio:
     executor: rsp-xlarge
     steps:
@@ -874,6 +889,9 @@ workflows:
       - docs:
           requires:
             - install
+      - s2-docs:
+          requires:
+            - install
       - verdaccio:
           filters:
             branches:
@@ -928,6 +946,7 @@ workflows:
             - storybook
             - storybook-s2
             - docs
+            - s2-docs
       - deploy-verdaccio:
           requires:
             - v-docs

.gitignore

@@ -17,3 +17,5 @@ test-reports.xml
 storage
 packages/dev/storybook-builder-parcel/iframe.html
 packages/dev/storybook-builder-parcel/preview.js
+starters/docs/registry
+starters/tailwind/registry

Makefile

@@ -110,7 +110,7 @@ website-production:
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
 	$(MAKE) starter-zip
 	$(MAKE) tailwind-starter
-	$(MAKE) s2-docs
+	$(MAKE) s2-storybook-docs
 
 check-examples:
 	node scripts/extractExamples.mjs
@@ -135,9 +135,19 @@ tailwind-starter:
 	cd starters/tailwind && yarn build-storybook
 	mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter
 
-s2-docs:
-	yarn build:s2-docs -o dist/production/docs/s2
+s2-storybook-docs:
+	yarn build:s2-storybook-docs -o dist/production/docs/s2
 
 s2-api-diff:
 	node scripts/buildBranchAPI.js
 	node scripts/api-diff.js --skip-same --skip-style-props
+
+s2-docs:
+	node scripts/extractStarter.mjs
+	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry node scripts/buildRegistry.mjs
+	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry yarn build:s2-docs --public-url /reactspectrum/$$(git rev-parse HEAD)/s2-docs/
+	mkdir -p dist/$$(git rev-parse HEAD)
+	mv packages/dev/s2-docs/dist dist/$$(git rev-parse HEAD)/s2-docs
+	mkdir -p dist/$$(git rev-parse HEAD)/s2-docs/registry
+	mv starters/docs/registry dist/$$(git rev-parse HEAD)/s2-docs/registry/vanilla
+	mv starters/tailwind/registry dist/$$(git rev-parse HEAD)/s2-docs/registry/tailwind

bin/imports.js

@@ -56,6 +56,10 @@ module.exports = {
         return;
       }
 
+      if (pkgName === 'vanilla-starter' || pkgName === 'tailwind-starter') {
+        return;
+      }
+
       if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName) && pkgName !== pkg.name) {
         context.report({
           node,

eslint.config.mjs

@@ -54,7 +54,8 @@ export default [{
         "starters/**/*",
         "scripts/icon-builder-fixture/**/*",
         "packages/@react-spectrum/s2/icon.d.ts",
-        "packages/@react-spectrum/s2/spectrum-illustrations"
+        "packages/@react-spectrum/s2/spectrum-illustrations",
+        "packages/dev/s2-docs/pages/**"
     ],
 }, ...compat.extends("eslint:recommended"), {
     plugins: {
@@ -493,7 +494,7 @@ export default [{
         }],
     },
 }, {
-    files: ["packages/@react-spectrum/s2/**"],
+    files: ["packages/@react-spectrum/s2/**", "packages/dev/s2-docs/**"],
 
     rules: {
         "react/react-in-jsx-scope": OFF,

package.json

@@ -22,9 +22,11 @@
     "build:chromatic-fc": "CHROMATIC=1 storybook build -c .chromatic-fc -o dist/$(git rev-parse HEAD)/chromatic-fc",
     "start:s2": "NODE_ENV=storybook storybook dev -p 6006 --ci -c '.storybook-s2'",
     "build:storybook-s2": "NODE_ENV=storybook storybook build -c .storybook-s2 -o dist/$(git rev-parse HEAD)/storybook-s2",
-    "build:s2-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
+    "build:s2-storybook-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
     "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
+    "start:s2-docs": "yarn workspace @react-spectrum/s2-docs start",
+    "build:s2-docs": "yarn workspace @react-spectrum/s2-docs build",
     "test": "cross-env STRICT_MODE=1 VIRT_ON=1 yarn jest",
     "test:lint": "node packages/**/*.test-lint.js",
     "test-loose": "cross-env VIRT_ON=1 yarn jest",
@@ -85,19 +87,21 @@
     "@faker-js/faker": "^8.4.1",
     "@jdb8/eslint-plugin-monorepo": "^1.0.1",
     "@octokit/rest": "*",
-    "@parcel/bundler-library": "^2.14.0",
-    "@parcel/config-default": "^2.14.0",
-    "@parcel/config-storybook": "0.0.2",
-    "@parcel/core": "^2.14.0",
-    "@parcel/optimizer-data-url": "^2.14.0",
-    "@parcel/optimizer-terser": "^2.14.0",
-    "@parcel/packager-ts": "^2.14.0",
-    "@parcel/reporter-cli": "^2.14.0",
-    "@parcel/resolver-glob": "^2.14.0",
-    "@parcel/transformer-inline": "^2.14.0",
-    "@parcel/transformer-inline-string": "^2.14.0",
-    "@parcel/transformer-svg-react": "^2.14.0",
-    "@parcel/transformer-typescript-types": "^2.14.0",
+    "@parcel/bundler-library": "^2.15.4",
+    "@parcel/config-default": "^2.15.4",
+    "@parcel/config-storybook": "^0.0.2",
+    "@parcel/core": "^2.15.4",
+    "@parcel/optimizer-data-url": "^2.15.4",
+    "@parcel/optimizer-terser": "^2.15.4",
+    "@parcel/packager-react-static": "^2.15.4",
+    "@parcel/packager-ts": "^2.15.4",
+    "@parcel/reporter-cli": "^2.15.4",
+    "@parcel/resolver-glob": "^2.15.4",
+    "@parcel/transformer-inline": "^2.15.4",
+    "@parcel/transformer-inline-string": "^2.15.4",
+    "@parcel/transformer-react-static": "^2.15.4",
+    "@parcel/transformer-svg-react": "^2.15.4",
+    "@parcel/transformer-typescript-types": "^2.15.4",
     "@react-spectrum/parcel-namer-s2": "^0.3.0",
     "@react-spectrum/s2-icon-builder": "^0.3.0",
     "@spectrum-css/component-builder": "workspace:^",
@@ -122,7 +126,7 @@
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.36",
     "@swc/jest": "^0.2.36",
-    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.17",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.0.0",
@@ -178,7 +182,7 @@
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",
-    "parcel": "^2.14.0",
+    "parcel": "^2.15.4",
     "parcel-optimizer-strict-mode": "workspace:^",
     "patch-package": "^6.2.0",
     "playwright": "^1.45.3",
@@ -222,9 +226,6 @@
     "@babel/preset-env": "7.24.4",
     "@babel/traverse": "7.24.1",
     "@babel/types": "7.24.0",
-    "@parcel/transformer-react-refresh-wrap": "2.14.0",
-    "@parcel/transformer-js": "2.14.0",
-    "@parcel/codeframe": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",
@@ -242,7 +243,8 @@
     "@types/node@npm:>= 8": "^22",
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
-    "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch"
+    "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
+    "lightningcss": "1.30.1"
   },
   "@parcel/transformer-css": {
     "cssModules": {
@@ -256,7 +258,9 @@
         "packages/@react-spectrum/color/src/*.tsx",
         "packages/@react-spectrum/s2/**/*.{js,ts,tsx}",
         "packages/@react-spectrum/s2/stories/**",
-        ".storybook-s2/**"
+        ".storybook-s2/**",
+        "packages/dev/s2-docs/**",
+        "starters/**"
       ]
     },
     "drafts": {