docs: Add new docs content for all components (#8799)

* added llms.txt to markdown generation

* add aria-expanded and aria-controls to search menu trigger action button

* add aria-expanded and aria-controls to fake search field button

* layout improvements

* add descriptions to menu and remove from card list

* Fix font-family in anatomy diagrams

* Fix some starter issues (relying on css reset)

* Only show components relevant to current section in sidenav

* fixes

* improve OG image generator script

* rename generateMd -> generateMarkdownDocs

* add illustrations to card list in search menu

* add image styles to thumbnails

* fix z-index in copy/share ActionButtonGroup to avoid showing over dialog

* update button docs

* Update async loading docs

* Make StateTable style match PropTable

* Merge CSS bundles

* Fix combobox displaying both description and error message

* Avoid duplicate ids and fix mobile scrolling

* Add library to page titles

* Revert "fix z-index in copy/share ActionButtonGroup to avoid showing over dialog"

This reverts commit e5f538d.

* use ui-2xl font for search menu button and tabs

* fix overscroll behavior

* Add Tree docs

* add generateMarkdownDocs and generateOGImages to makefile

* TagGroup docs

* RangeCalendar

* add docs for ColorArea, ColorField, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel

* docs: add S2 tableview docs to new docs

* fix alerts

* DateRangePicker

* add type s2 to all examples for codesandbox

* TimeField

* chore: s2 docs taggroup

* make examples better and add group actions

* add calendar/date component docs

* add InlineAlert docs

* add docs for Checkbox/CheckboxGroup

* add Switch docs

* add NumberField docs

* add RangeSlider

* add SearchField docs

* add TextField docs

* add TextArea docs

* add Form docs

* docs: S2 Tabs docs

* update content

* Popover, Modal, and Tooltip

* more updates

* Make it so type is always propagated to CodePlatter and general formatting fixes

* remove unneeded changes

* add ButtonGroup component

* add ToggleButton docs

* add Meter docs

* add ProgressBar docs

* Move anatomy section to the bottom

* add ProgressCircle docs

* Fix hydration error in ColorWheel

* add StatusLight docs

* add Badge docs

* cleanup examples

* add RadioGroup docs

* Make checkbox/radio anatomy diagrams smaller

* more components

* add Divider docs

* add links docs

* add IllustratedMessage docs

* add ContextualHelp docs

* add Avatar docs

* add TreeView docs

* add docs for Menu

* add ActionMenu docs

* cleanup

* Breadcrumbs, Link, ProgressBar

* add Combobox docs

* Meter

* add AlertDialog docs

* add Breadcrumbs docs

* cleanup

* FileTrigger and DropZone

* ColorSwatchPicker

* fixes

* add Tooltip docs

* add ActionButtonGroup docs

* add ToggleButtonGroup docs

* add LinkButton docs

* add Popover docs

* add SegmentedControl docs

* add Dialog docs

* add ActionBar docs

* add missing examples

* add Accordion docs

* add Disclosure docs

* use CardView and TagGroup in search menu

* add disallowEmptySelection to TagGroup

* Remaining RAC component docs

* add Toast docs

* remove theme.css tab from every page

* enable client navigation

* Fix placement control for toast

* faster builds and smaller bundle size

* remove expanded from examples

* remove dedicated Accessibility sections

* remove dedicated Internationalization sections

* remove dedicated Contextual help sections

* remove dedicated Help text sections

* remove dedicated Label positioning sections

* remove dedicated Error state sections

* cleanup props tables

* remove Labeling sections

* remove extra sections

* remove extra content

* more improvements

* fix menu autofocus

* close search menu on cardview action

* add aria-label to search menu dialog

* fixes

* build fixes

* Fix nav

* try again

* add og:image to layout

* mmm

* add css var for font name in generateOGImages

* update dnd guide

* Update Selection guide

* collections guide

* init mobile search

* revert taggroup fixes as they are now in another pr

* add mcp server

* Update Spectrum docs to match RAC

* mobile menu sticky positioning

* Update TagGroup

* use cards in mobile search menu

* cleanup

* Update Tabs docs

* remove "All" tag for now

* add textValue to card

* fix initial selected tag when changing tabs

* Fix lint and revert ListLayout changes for now

* markdown table code improvements

* set content-type of txt/md files in azure

* remove horizontal scroll snapping for now

* Fix some stackblitz issues

* docs updates from testing

* fix keyboard shortcut for opening search menu

* SearchMenu improvements/refactor

* fix Toast docs content

* close search menu on navigation

* add 'All' tag when searching

* add "all" tag to mobile search

* Card and CardView docs

* DropZone

* Dialog

* mobile menu improvements

* add textValues to Tags docs

* fix search menu max-width

* add mcp tools for searching icons and illustrations

* consolidate RAC docs examples

* add aliases to mcp icon/illustration search

* Form

* AvatarGroup

* IllustratedMessage

* Toast

* SelectBoxGroup

* lint

* Add Menu and Popover changes needed for autocomplete examples

TODO: move this to a separate PR

* Add basic RAC styling guide

* Image and Skeleton

* docs: add icons documentation to website

* add section where I will put searchable icons

* RAC example styling fixes

* fix lint

* more RAC example fixes

* fix tabs remount issue in ExampleSwitcher

* improve search menu empty state

* fix S2 tabs example resize

* fix deploy step

* Add grid and search, add color and size examples

* separate mcp servers for s2 and react-aria

* add preview badge to header

* add icon to preview badge

* align TagGroup and CardView in SearchMenu

* improve Icons page

* markdown fixes

* add Illustrations page

* fix Github link

* add <meta name="description" />

* add VersionBadge + add alpha to SelectBoxGroup

* add S2 Release Notes page

* add favicon

* linter

* add InstallCommand component

---------

Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Yihui Liao <[email protected]>

Author: 5 people

.circleci/config.yml

@@ -757,7 +757,9 @@ jobs:
           name: deploy
           command: |
             if [ $AZURE_STORAGE_SAS_TOKEN ]; then
-              azcopy copy "/tmp/dist/*" "https://reactspectrum.blob.core.windows.net/reactspectrum${AZURE_STORAGE_SAS_TOKEN}" --recursive
+              azcopy copy "/tmp/dist/*" "https://reactspectrum.blob.core.windows.net/reactspectrum${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt"
+              azcopy copy "/tmp/dist/*" "https://reactspectrum.blob.core.windows.net/reactspectrum${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8"
+              azcopy copy "/tmp/dist/*" "https://reactspectrum.blob.core.windows.net/reactspectrum${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8"
             fi
 
   # Separate deploy workflow for the test docs built w/ verdaccio packages so it doesn't hold up the other deploy workflows
@@ -778,7 +780,9 @@ jobs:
           command: |
             if [ $AZURE_STORAGE_SAS_TOKEN ]; then
               for dir in /tmp/verdaccio_dist/*/verdaccio; do
-                azcopy copy "$dir/*" "https://reactspectrum.blob.core.windows.net/reactspectrum/$CIRCLE_SHA1/verdaccio${AZURE_STORAGE_SAS_TOKEN}" --recursive
+                azcopy copy "$dir/*" "https://reactspectrum.blob.core.windows.net/reactspectrum/$CIRCLE_SHA1/verdaccio${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt"
+                azcopy copy "$dir/*" "https://reactspectrum.blob.core.windows.net/reactspectrum/$CIRCLE_SHA1/verdaccio${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8"
+                azcopy copy "$dir/*" "https://reactspectrum.blob.core.windows.net/reactspectrum/$CIRCLE_SHA1/verdaccio${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8"
               done
             fi
 
@@ -796,7 +800,10 @@ jobs:
             mv ./azcopy_linux_amd64_*/azcopy /usr/local/bin/
       - run:
           name: deploy
-          command: azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive
+          command: |
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8"
 
   comment:
     executor: rsp

Makefile

@@ -143,7 +143,8 @@ s2-api-diff:
 	node scripts/api-diff.js --skip-same --skip-style-props
 
 s2-docs:
-	node scripts/extractStarter.mjs
+	yarn workspace @react-spectrum/s2-docs generate:md
+	yarn workspace @react-spectrum/s2-docs generate:og
 	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)

package.json

@@ -27,6 +27,9 @@
     "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",
+    "build:mcp": "yarn workspace @react-spectrum/mcp build",
+    "start:mcp": "yarn workspace @react-spectrum/s2-docs generate:md && yarn workspace @react-spectrum/mcp build && node packages/dev/mcp/dist/index.js",
+    "test:mcp": "yarn build:s2-docs && yarn build:mcp && node packages/dev/mcp/scripts/smoke-list-pages.mjs",
     "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",
@@ -64,7 +67,8 @@
     "packages/react-aria",
     "packages/react-aria-components",
     "packages/tailwindcss-react-aria-components",
-    "packages/*/*"
+    "packages/*/*",
+    "packages/dev/mcp"
   ],
   "devDependencies": {
     "@actions/core": "^1.1.0",
@@ -245,7 +249,8 @@
     "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",
-    "lightningcss": "1.30.1"
+    "lightningcss": "1.30.1",
+    "react-server-dom-parcel": "canary"
   },
   "@parcel/transformer-css": {
     "cssModules": {
@@ -280,7 +285,8 @@
       {
         "name": "s2-styles",
         "assets": [
-          "packages/@react-spectrum/s2/**"
+          "packages/@react-spectrum/s2/**",
+          "packages/dev/s2-docs/src/**"
         ],
         "types": [
           "css"