chore: add links to old docs for hooks we haven't migrated yet (#9203)

* chore: add links to old docs for hooks we haven't migrated yet

* fix lint

* removing links to non-existant pages

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: snowystinger

packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx

@@ -7,6 +7,7 @@ import Anatomy from '@react-aria/breadcrumbs/docs/anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['navigation'];
+export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html'}];
 
 # Breadcrumbs
 

packages/dev/s2-docs/pages/react-aria/Button.mdx

@@ -12,6 +12,7 @@ import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 
 export const tags = ['btn'];
+export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}];
 
 # Button
 

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg';
 
 export const tags = ['date'];
+export const relatedPages = [{'title': 'useCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useCalendar.html'}];
 
 # Calendar
 
@@ -45,7 +46,7 @@ import {useState} from 'react';
 function Example() {
   let [date, setDate] = useState(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
-  
+
   return (
     <>
       <Calendar
@@ -212,13 +213,13 @@ function Example(props) {
         [...Array(props.visibleDuration.months).keys()].map(i => (
           <div key={i} style={{flex: 1}}>
             <header style={{minHeight: 32}}>
-              {i === 0 && 
+              {i === 0 &&
                 <Button slot="previous" variant="quiet">
                   <ChevronLeft />
                 </Button>
               }
               <Heading>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</Heading>
-              {i === props.visibleDuration.months - 1 && 
+              {i === props.visibleDuration.months - 1 &&
                 <Button slot="next" variant="quiet">
                   <ChevronRight />
                 </Button>

packages/dev/s2-docs/pages/react-aria/Checkbox.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useCheckbox', 'url': 'https://react-spectrum.adobe.com/react-aria/useCheckbox.html'}];
 
 # Checkbox
 
@@ -46,7 +47,7 @@ function Example(props) {
 
   return (
     <>
-      <Checkbox 
+      <Checkbox
         {...props}
         ///- begin highlight -///
         isSelected={selected}

packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx

@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useCheckboxGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html'}];
 
 # CheckboxGroup
 

packages/dev/s2-docs/pages/react-aria/ColorArea.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/color/docs/ColorAreaAnatomy.svg';
 
 export const tags = [];
+export const relatedPages = [{'title': 'useColorArea', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorArea.html'}];
 
 # ColorArea
 

packages/dev/s2-docs/pages/react-aria/ColorField.mdx

@@ -9,6 +9,7 @@ import docs from 'docs:react-aria-components';
 import Anatomy from '@react-aria/color/docs/ColorFieldAnatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorField', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorField.html'}];
 
 # ColorField
 
@@ -76,7 +77,7 @@ function Example() {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <ColorField
         label="Hue"
-        
+
         value={color}
         onChange={setColor}
         /*- begin highlight -*/

packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx

@@ -8,6 +8,7 @@ import {ColorPicker as TailwindColorPicker} from 'tailwind-starter/ColorPicker';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorPicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorPicker.html'}];
 
 # ColorPicker
 
@@ -108,7 +109,7 @@ import {ColorArea} from 'vanilla-starter/ColorArea';
 
 <ColorPicker label="Stroke color" defaultValue="#345">
   <ColorWheel />
-  <ColorArea 
+  <ColorArea
     colorSpace="hsb"
     xChannel="saturation"
     yChannel="brightness"

packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/color/docs/ColorSliderAnatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorSlider', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorSlider.html'}];
 
 # ColorSlider
 

packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx

@@ -8,6 +8,7 @@ import {ColorSwatch as TailwindColorSwatch} from 'tailwind-starter/ColorSwatch';
 import '../../tailwind/tailwind.css';
 
 export const tags = [];
+export const relatedPages = [{'title': 'useColorSwatch', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorSwatch.html'}];
 
 # ColorSwatch