Type check docs examples (#3710)

Author: devongovett

.circleci/config.yml

@@ -290,6 +290,16 @@ jobs:
           paths:
             - 'ts-diff.txt'
 
+  typecheck-docs:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: check-examples
+          command: make check-examples
+
   storybook:
     executor: rsp-large
     steps:
@@ -498,6 +508,9 @@ workflows:
           filters:
             branches:
               ignore: main
+      - typecheck-docs:
+          requires:
+            - install
       - storybook:
           requires:
             - install

Makefile

@@ -96,3 +96,7 @@ website:
 website-production:
 	node scripts/buildWebsite.js
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
+
+check-examples:
+	node scripts/extractExamples.mjs
+	yarn tsc --project dist/docs-examples/tsconfig.json

packages/@react-aria/autocomplete/docs/useSearchAutocomplete.mdx

@@ -140,6 +140,7 @@ function SearchAutocomplete(props) {
   let inputRef = React.useRef(null);
   let listBoxRef = React.useRef(null);
   let popoverRef = React.useRef(null);
+  let buttonRef = React.useRef(null);
 
   let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
     {
@@ -151,7 +152,7 @@ function SearchAutocomplete(props) {
     state
   );
 
-  let {buttonProps} = useButton(clearButtonProps);
+  let {buttonProps} = useButton(clearButtonProps, buttonRef);
 
   return (
     <div style={{display: 'inline-flex', flexDirection: 'column'}}>
@@ -167,7 +168,7 @@ function SearchAutocomplete(props) {
             fontSize: 16
           }} />
           {state.inputValue !== '' &&
-            <button {...buttonProps}>❎</button>
+            <button {...buttonProps} ref={buttonRef}>❎</button>
           }
         {state.isOpen &&
           <Popover state={state} triggerRef={inputRef} popoverRef={popoverRef} isNonModal placement="bottom start">
@@ -203,21 +204,23 @@ See [usePopover](usePopover.html) for more examples of popovers.
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
 
 ```tsx example export=true render=false
+import type {AriaPopoverProps} from 'react-aria';
+import type {OverlayTriggerState} from 'react-stately';
 import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
 
-function Popover({children, state, ...props}) {
-  let ref = React.useRef();
-  let {popoverRef = ref} = props;
-  let {popoverProps} = usePopover({
-    ...props,
-    popoverRef
-  }, state);
+interface PopoverProps extends AriaPopoverProps {
+  children: React.ReactNode,
+  state: OverlayTriggerState
+}
+
+function Popover({children, state, ...props}: PopoverProps) {
+  let {popoverProps} = usePopover(props, state);
 
   return (
     <Overlay>
       <div
         {...popoverProps}
-        ref={popoverRef}
+        ref={props.popoverRef as React.RefObject<HTMLDivElement>}
         style={{
           ...popoverProps.style,
           background: 'lightgray',
@@ -246,7 +249,7 @@ user types in the SearchAutocomplete. They can also be shared with other compone
 import {useListBox, useOption} from '@react-aria/listbox';
 
 function ListBox(props) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {listBoxRef = ref, state} = props;
   let {listBoxProps} = useListBox(props, state, listBoxRef);
 
@@ -273,7 +276,7 @@ function ListBox(props) {
 }
 
 function Option({item, state}) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {optionProps, isSelected, isFocused, isDisabled} = useOption({key: item.key}, state, ref);
 
   let backgroundColor;
@@ -350,7 +353,7 @@ function Example() {
     {id: 8, name: 'Agricultural'},
     {id: 9, name: 'Electrical'}
   ];
-  let [major, setMajor] = React.useState();
+  let [major, setMajor] = React.useState(null);
 
   let onSubmit = (value, key) => {
     if (value) {

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

@@ -92,21 +92,21 @@ import {useBreadcrumbs, useBreadcrumbItem} from '@react-aria/breadcrumbs';
 
 function Breadcrumbs(props) {
   let {navProps} = useBreadcrumbs(props);
-  let children = React.Children.toArray(props.children);
+  let childCount = React.Children.count(props.children);
 
   return (
     <nav {...navProps}>
       <ol style={{display: 'flex', listStyle: 'none', margin: 0, padding: 0}}>
-        {children.map((child, i) =>
-          React.cloneElement(child, {isCurrent: i === children.length - 1})
+        {React.Children.map(props.children, (child, i) =>
+          React.cloneElement(child, {isCurrent: i === childCount - 1})
         )}
       </ol>
     </nav>
   )
 }
 
 function BreadcrumbItem(props) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {itemProps} = useBreadcrumbItem({...props, elementType: 'span'}, ref);
   return (
     <li>
@@ -144,21 +144,21 @@ for each BreadcrumbItem. This is the default `elementType`, so the option can be
 ///- begin collapse -///
 function Breadcrumbs(props) {
   let {navProps} = useBreadcrumbs(props);
-  let children = React.Children.toArray(props.children);
+  let childCount = React.Children.count(props.children);
 
   return (
     <nav {...navProps}>
       <ol style={{display: 'flex', listStyle: 'none', margin: 0, padding: 0}}>
-        {children.map((child, i) =>
-          React.cloneElement(child, {isCurrent: i === children.length - 1})
+        {React.Children.map(props.children, (child, i) =>
+          React.cloneElement(child, {isCurrent: i === childCount - 1})
         )}
       </ol>
     </nav>
   );
 }
 ///- end collapse -///
 function BreadcrumbItem(props) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {itemProps} = useBreadcrumbItem(props, ref);
   return (
     <li>
@@ -200,21 +200,21 @@ the current has elementType `h3` and all other breadcrumbs are of type `a`.
 ///- begin collapse -///
 function Breadcrumbs(props) {
   let {navProps} = useBreadcrumbs(props);
-  let children = React.Children.toArray(props.children);
+  let childCount = React.Children.count(props.children);
 
   return (
     <nav {...navProps}>
       <ol style={{display: 'flex', listStyle: 'none', margin: 0, padding: 0}}>
-        {children.map((child, i) =>
-          React.cloneElement(child, {isCurrent: i === children.length - 1})
+        {React.Children.map(props.children, (child, i) =>
+          React.cloneElement(child, {isCurrent: i === childCount - 1})
         )}
       </ol>
     </nav>
   )
 }
 ///- end collapse -///
 function BreadcrumbItem(props) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {itemProps} = useBreadcrumbItem({
     ...props,
     elementType: props.isCurrent ? 'h3' : 'a'

packages/@react-aria/calendar/docs/useCalendar.mdx

@@ -120,11 +120,10 @@ function Calendar(props) {
     createCalendar
   });
 
-  let ref = React.useRef();
-  let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state, ref);
+  let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state);
 
   return (
-    <div {...calendarProps} ref={ref} className="calendar">
+    <div {...calendarProps} className="calendar">
       <div className="header">
         <h2>{title}</h2>
         <Button {...prevButtonProps}>&lt;</Button>
@@ -193,7 +192,7 @@ Finally, the `CalendarCell` component renders an individual cell in a calendar.
 import {useCalendarCell} from '@react-aria/calendar';
 
 function CalendarCell({state, date}) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {
     cellProps,
     buttonProps,
@@ -280,7 +279,7 @@ The `Button` component is used in the above example to navigate between months.
 import {useButton} from '@react-aria/button';
 
 function Button(props) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {buttonProps} = useButton(props, ref);
   return <button {...buttonProps} ref={ref}>{props.children}</button>;
 }

packages/@react-aria/calendar/docs/useRangeCalendar.mdx

@@ -119,7 +119,7 @@ function RangeCalendar(props) {
     createCalendar
   });
 
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {calendarProps, prevButtonProps, nextButtonProps, title} = useRangeCalendar(props, state, ref);
 
   return (
@@ -192,7 +192,7 @@ Finally, the `CalendarCell` component renders an individual cell in a calendar.
 import {useCalendarCell} from '@react-aria/calendar';
 
 function CalendarCell({state, date}) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {
     cellProps,
     buttonProps,
@@ -279,7 +279,7 @@ The `Button` component is used in the above example to navigate between months.
 import {useButton} from '@react-aria/button';
 
 function Button(props) {
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {buttonProps} = useButton(props, ref);
   return <button {...buttonProps} ref={ref}>{props.children}</button>;
 }
@@ -408,7 +408,6 @@ This example includes multiple unavailable date ranges, e.g. dates when a rental
 
 ```tsx example
 import {today} from '@internationalized/date';
-import {useLocale} from '@react-aria/i18n';
 
 function Example() {
   let now = today(getLocalTimeZone());
@@ -418,7 +417,6 @@ function Example() {
     [now.add({days: 23}), now.add({days: 24})],
   ];
 
-  let {locale} = useLocale();
   let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
 
   return <RangeCalendar aria-label="Trip dates" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />

packages/@react-aria/checkbox/docs/useCheckbox.mdx

@@ -84,7 +84,7 @@ import {useToggleState} from '@react-stately/toggle';
 function Checkbox(props) {
   let {children} = props;
   let state = useToggleState(props);
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {inputProps} = useCheckbox(props, state, ref);
 
   return (
@@ -118,7 +118,7 @@ import {useFocusRing} from '@react-aria/focus';
 
 function Checkbox(props) {
   let state = useToggleState(props);
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {inputProps} = useCheckbox(props, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let isSelected = state.isSelected && !props.isIndeterminate;

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -126,7 +126,7 @@ function CheckboxGroup(props) {
 function Checkbox(props) {
   let {children} = props;
   let state = React.useContext(CheckboxGroupContext);
-  let ref = React.useRef();
+  let ref = React.useRef(null);
   let {inputProps} = useCheckboxGroupItem(props, state, ref);
 
   let isDisabled = state.isDisabled || props.isDisabled;

packages/@react-aria/color/docs/useColorArea.mdx

@@ -304,8 +304,8 @@ It is built using the [useColorSlider](useColorSlider.html) hook, and can be sha
   function ColorSlider(props) {
     let {locale} = useLocale();
     let state = useColorSliderState({...props, locale});
-    let trackRef = React.useRef();
-    let inputRef = React.useRef();
+    let trackRef = React.useRef(null);
+    let inputRef = React.useRef(null);
 
     // Default label to the channel name in the current locale
     let label = props.label || state.value.getChannelName(props.channel, locale);

packages/@react-aria/color/docs/useColorField.mdx

@@ -82,7 +82,7 @@ import {useColorFieldState} from '@react-stately/color';
 
 function ColorField(props) {
   let state = useColorFieldState(props);
-  let inputRef = React.useRef();
+  let inputRef = React.useRef(null);
   let {
     labelProps,
     inputProps