docs: Restructure old docs in preparation of new docs site (#9154)

* add temp banner to stately

* add banner to all pages

* move react spectrum pages to v3

* move releases under v3

* make sure intro and concept pages appear in sidebar for v3

* move stately hooks to aria and remove uneeded aria hooks

* lint

* test redirect

* add redirect pages for v3 and releases

* fix redirects for intro and concepts pages

* add redirects for react aria

* redirect release index page and rename script for consistency

* add redirects for blog and internationalized

* get rid of chevron

* properly redirect examples and point to new concepts page

* update more redirects

* have both stately and aria hooks in sidenav for react stately too

* rename sidebar headers

* add redirects for the remaining Foundation section pages

* Remove redirect pages. Will handle in CDN instead.

* Remove old docs that we migrated

* Update URL structure

* Update URLs

* Build old docs as part of s2 build

* Add stage docs build

* Remove RedirectLayout

* Fix more URLs

* Fix more URLs

* Remove Dialog from DatePicker examples

* More broken links

* Fix broken links

* More links

* Open search menu on components link at bottom of homepage

Also fix more links

* update migration banner

* make react spectrum links relative and bring back s2 gradient

* create relative links for aria and stately hook banner

* remove banner from releases and fix filetrigger link

* Fix one more url

* Move Support page to v3

* Remove unused useStepList docs

* Fix links

* Fix separator link

* Fix useDialog links

* Fix stately links from migration banner

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>

Author: LFDanLu

.circleci/comment.js

@@ -59,7 +59,6 @@ async function run() {
       [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)
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
-      [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
       [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
       [S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
       [S2 docs](https://d1pzu54gtk2aed.cloudfront.net/main/${process.env.CIRCLE_SHA1}/)
@@ -83,7 +82,6 @@ async function run() {
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
   * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
-  * [View the v3 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
   * [View the S2 docs](https://d1pzu54gtk2aed.cloudfront.net/pr/${process.env.CIRCLE_SHA1}/)
   * [View the React Aria docs](https://d5iwopk28bdhl.cloudfront.net/pr/${process.env.CIRCLE_SHA1}/)`
       });

.circleci/config.yml

@@ -485,45 +485,45 @@ jobs:
           paths:
             - '*/storybook-s2/'
 
-  docs:
+  docs-production:
     executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
           name: build docs
-          command: make website
+          command: make website-production
 
       - persist_to_workspace:
           root: dist
           paths:
             - '*/docs/'
 
-  docs-production:
+  s2-docs:
     executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
-          name: build docs
-          command: make website-production
+          name: build s2 docs
+          command: make s2-docs
 
       - persist_to_workspace:
           root: dist
           paths:
-            - '*/docs/'
+            - 's2-docs/'
 
-  s2-docs:
+  s2-docs-stage:
     executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
           name: build s2 docs
-          command: make s2-docs
+          command: make s2-docs-stage
 
       - persist_to_workspace:
           root: dist
@@ -567,37 +567,6 @@ jobs:
           paths:
             - storage
 
-  v-docs:
-    executor: rsp-2xlarge
-    steps:
-      - restore_cache:
-          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
-
-      - attach_workspace:
-          at: /tmp/verdaccio-workspace
-
-      - run:
-          name: build docs off verdaccio
-          command: |
-            ./scripts/verdaccio-ci.sh
-            ./scripts/verdaccio-build.sh
-          environment:
-            VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
-
-      - run:
-          name: build docs off verdaccio retry
-          command: |
-            ./scripts/verdaccio-ci.sh
-            ./scripts/verdaccio-build.sh
-          environment:
-            VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
-          when: on_fail
-
-      - persist_to_workspace:
-          root: verdaccio_dist
-          paths:
-            - '*/verdaccio/docs'
-
   v-rsp-cra-18:
     executor: rsp-xlarge
     steps:
@@ -973,13 +942,10 @@ workflows:
       - storybook-s2:
           requires:
             - install
-      - docs:
-          requires:
-            - install
       - s2-docs:
           requires:
             - install
-      - s2-docs-production:
+      - s2-docs-stage:
           requires:
             - install
           filters:
@@ -991,9 +957,6 @@ workflows:
               only: main
           requires:
             - install
-      - v-docs:
-          requires:
-            - verdaccio
       - v-rsp-cra-18:
           requires:
             - verdaccio
@@ -1038,7 +1001,6 @@ workflows:
             - test-esm
             - storybook
             - storybook-s2
-            - docs
       - deploy-s3-stage:
           name: deploy-s3-commit
           requires:
@@ -1050,13 +1012,12 @@ workflows:
           name: deploy-s3-main
           requires:
             - s2-docs
-            - s2-docs-production
+            - s2-docs-stage
           filters:
             branches:
               only: main
       - deploy-verdaccio:
           requires:
-            - v-docs
             - v-rsp-cra-18
             - v-webpack-4
             - v-nextjs

Makefile

@@ -117,6 +117,10 @@ website-production:
 	$(MAKE) starter-zip
 	$(MAKE) tailwind-starter
 	$(MAKE) s2-storybook-docs
+	mv starters/docs/storybook-static dist/production/docs/react-aria-starter
+	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
+	mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter
+	mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip
 
 check-examples:
 	node scripts/extractExamples.mjs
@@ -128,18 +132,14 @@ starter:
 starter-zip: starter
 	cp LICENSE starters/docs/.
 	cd starters/docs && zip -r react-aria-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
-	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
 	cd starters/docs && yarn build-storybook
-	mv starters/docs/storybook-static dist/production/docs/react-aria-starter
 
 tailwind-starter:
 	cp LICENSE starters/tailwind/.
 	cd starters/tailwind && yarn --no-immutable && yarn up react-aria-components && yarn up tailwindcss-react-aria-components && yarn tsc
 
 	cd starters/tailwind && zip -r react-aria-tailwind-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
-	mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip
 	cd starters/tailwind && yarn build-storybook
-	mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter
 
 s2-storybook-docs:
 	yarn build:s2-storybook-docs -o dist/production/docs/s2
@@ -153,10 +153,17 @@ s2-docs:
 	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/react-aria/$(BRANCH_TYPE)/$(HASH)/robots.txt
 	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/s2/$(BRANCH_TYPE)/$(HASH)/robots.txt
 
+s2-docs-stage:
+	DOCS_ENV=stage PUBLIC_URL=/ $(MAKE) build-s2-docs
+	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/react-aria/$(BRANCH_TYPE)/$(HASH)/robots.txt
+	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/s2/$(BRANCH_TYPE)/$(HASH)/robots.txt
+	$(MAKE) starters
+
 s2-docs-production:
 	DOCS_ENV=prod PUBLIC_URL=/ $(MAKE) build-s2-docs
 	cp packages/dev/docs/pages/robots.txt dist/s2-docs/react-aria/robots.txt
 	cp packages/dev/docs/pages/robots.txt dist/s2-docs/s2/robots.txt
+	$(MAKE) starters
 
 build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:md
@@ -171,3 +178,16 @@ build-s2-docs:
 	mkdir -p dist/s2-docs/react-aria/$(PUBLIC_URL)/registry
 	mv starters/docs/registry dist/s2-docs/react-aria/$(PUBLIC_URL)/registry/vanilla
 	mv starters/tailwind/registry dist/s2-docs/react-aria/$(PUBLIC_URL)/registry/tailwind
+
+	# Build old docs pages, which get inter-mixed with the new pages
+	# TODO: We probably don't need to build this on every PR
+	yarn parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx' --dist-dir dist/s2-docs/s2/$(PUBLIC_URL) --public-url $(PUBLIC_URL)
+	yarn parcel build 'packages/@react-{aria,stately}/*/docs/*.mdx'  --dist-dir dist/s2-docs/react-aria/$(PUBLIC_URL) --public-url $(PUBLIC_URL)
+
+starters:
+	$(MAKE) starter-zip
+	$(MAKE) tailwind-starter
+	mv starters/docs/storybook-static dist/s2-docs/react-aria-starter
+	mv starters/docs/react-aria-starter.zip dist/s2-docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
+	mv starters/tailwind/storybook-static dist/s2-docs/react-aria-tailwind-starter
+	mv starters/tailwind/react-aria-tailwind-starter.zip dist/s2-docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip

README.md

@@ -47,4 +47,4 @@ React Spectrum includes several libraries, which you can choose depending on you
 
 One of the goals of the React Spectrum project is to make building design systems and component libraries as easy as possible, while maintaining high quality interactions and accessibility support. We aim to raise the bar for web applications. The best way to achieve that goal is **together**. We would love contributions from the community no matter how big or small. 😍
 
-Read our [contributing guide](https://react-spectrum.adobe.com/contribute.html) to learn about how to propose bugfixes and improvements, and how the development process works. For detailed information about our architecture, and how all of the pieces fit together, read our [architecture docs](https://react-spectrum.adobe.com/architecture.html).
+Read our [contributing guide](https://github.com/adobe/react-spectrum/blob/main/CONTRIBUTING.md) to learn about how to propose bugfixes and improvements, and how the development process works. For detailed information about our architecture, and how all of the pieces fit together, read our [architecture docs](https://react-spectrum.adobe.com/architecture.html).

package.json

@@ -23,8 +23,8 @@
     "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-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:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx'",
+    "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.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 && yarn workspace @react-aria/mcp build",

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -25,7 +25,7 @@ export interface SearchAutocompleteAria<T> extends ValidationResult {
   labelProps: DOMAttributes,
   /** Props for the search input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
-  /** Props for the list box, to be passed to [useListBox](useListBox.html). */
+  /** Props for the list box, to be passed to `useListBox`. */
   listBoxProps: AriaListBoxOptions<T>,
   /** Props for the search input's clear button. */
   clearButtonProps: AriaButtonProps,

packages/@react-aria/breadcrumbs/docs/useBreadcrumbs.mdx

@@ -180,8 +180,8 @@ function BreadcrumbItem(props) {
 }
 
 <Breadcrumbs>
-  <BreadcrumbItem href="/">Home</BreadcrumbItem>
-  <BreadcrumbItem href="/react-aria/">React Aria</BreadcrumbItem>
+  <BreadcrumbItem href="#">Home</BreadcrumbItem>
+  <BreadcrumbItem href="#">React Aria</BreadcrumbItem>
   <BreadcrumbItem>useBreadcrumbs</BreadcrumbItem>
 </Breadcrumbs>
 ```
@@ -196,8 +196,8 @@ Breadcrumbs can be disabled using the `isDisabled` prop, passed to each disabled
 
 ```tsx example
 <Breadcrumbs>
-  <BreadcrumbItem href="/" isDisabled>Home</BreadcrumbItem>
-  <BreadcrumbItem href="/react-aria/">React Aria</BreadcrumbItem>
+  <BreadcrumbItem href="#" isDisabled>Home</BreadcrumbItem>
+  <BreadcrumbItem href="#">React Aria</BreadcrumbItem>
   <BreadcrumbItem>useBreadcrumbs</BreadcrumbItem>
 </Breadcrumbs>
 ```

packages/@react-aria/button/docs/useButton.mdx

@@ -48,7 +48,7 @@ cross browser inconsistencies in interactions and accessibility features to cons
 * Keyboard focus management and cross browser normalization
 * Keyboard event support for <Keyboard>Space</Keyboard> and <Keyboard>Enter</Keyboard> keys
 
-Read our [blog post](/blog/building-a-button-part-1.html) about the complexities of building buttons that work well across devices and interaction methods.
+Read our [blog post](../blog/building-a-button-part-1) about the complexities of building buttons that work well across devices and interaction methods.
 
 ## Anatomy
 
@@ -131,7 +131,7 @@ The following examples show how to use the `Button` component created in the abo
 
 `useButton` supports user interactions via mouse, keyboard, and touch. You can handle all of these via the `onPress` prop. This is similar to the standard `onClick` event, but normalized to support all interaction methods equally. In addition, the `onPressStart`, `onPressEnd`, and `onPressChange` events are fired as the user interacts with the button.
 
-Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which exposes information about the target and the type of event that triggered the interaction. See [usePress](usePress.html) for more details.
+Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which exposes information about the target and the type of event that triggered the interaction. See [usePress](../usePress) for more details.
 
 ```tsx example
 function Example() {

packages/@react-aria/button/docs/useToggleButton.mdx

@@ -70,7 +70,7 @@ If a visual label is not provided (e.g. an icon only button), then an `aria-labe
 ## Example
 
 By default, `useToggleButton` assumes that you are using it with a native `<button>` element. You can use a custom
-element type by passing the `elementType` prop to `useToggleButton`. See the [useButton](useButton.html#custom-element-type)
+element type by passing the `elementType` prop to `useToggleButton`. See the [useButton](../Button/useButton.html#custom-element-type)
 docs for an example of this.
 
 The following example shows how to use the `useToggleButton` and `useToggleState` hooks to build a toggle button.

packages/@react-aria/button/docs/useToggleButtonGroup.mdx

@@ -70,7 +70,7 @@ hook in `@react-stately/toggle`. The state object should be passed as an option
 and `useToggleButtonGroupItem`.
 
 **Note:** `useToggleButtonGroupItem` should only be used when it is contained within a toggle button group. For a
-standalone toggle button, use the [useToggleButton](useToggleButton.html) hook instead.
+standalone toggle button, use the [useToggleButton](../ToggleButton/useToggleButton.html) hook instead.
 
 ## Example