docs: Type check examples (#9299)

* docs: Type check examples

* fix some type errors

* more typescript fixes

* more typescript fixes

* more typescript fixes

* more typescript fixes

* API bugs - will revert this one after API audit fixes are merged

* more typescript fixes

* more typescript fixes

* more typescript fixes

* more typescript fixes

* final typescript fixes

* Revert "API bugs - will revert this one after API audit fixes are merged"

This reverts commit f7ec69e.

* RowProps types fix

* remaining typescript fixes

* cleanup types

* cleanup types

* fix SelectBoxGroupProps prop types

* address review comments

* homepage fixes

* fix dnd types

* fix merge

* id required fix

---------

Co-authored-by: Reid Barber <[email protected]>

Author: devongovett

Makefile

@@ -124,7 +124,7 @@ website-production:
 	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
+	node scripts/extractExamplesS2.mjs
 	yarn tsc --project dist/docs-examples/tsconfig.json
 
 starter:

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

@@ -21,6 +21,7 @@ import {
   Provider
 } from 'react-aria-components';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared';
+import {forwardRefType} from './types';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from '../src/Icon';
 import {pressScale} from './pressScale';
@@ -33,7 +34,7 @@ export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
-  children: ReactNode,
+  children: ReactNode | ((item: T) => ReactNode),
   /**
    * The layout direction of the content in each SelectBox.
    * @default 'vertical'
@@ -384,7 +385,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 /**
  * SelectBoxGroup allows users to select one or more options from a list.
  */
-export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const SelectBoxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
 
   let {

packages/@react-spectrum/s2/src/TableView.tsx

@@ -58,7 +58,7 @@ import Chevron from '../ui-icons/Chevron';
 import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg';
 import {ColumnSize} from '@react-types/table';
 import {CustomDialog, DialogContainer} from '..';
-import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared';
 import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
@@ -1446,7 +1446,7 @@ const row = style<RowRenderProps & S2TableProps>({
   forcedColorAdjust: 'none'
 });
 
-export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>  {}
+export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'isDisabled' | 'onAction' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>, LinkDOMProps {}
 
 /**
  * A row within a `<Table>`.

packages/dev/s2-docs/pages/WelcomeHeader.tsx

@@ -1,5 +1,6 @@
 import {ProductCard, Content, Footer, Text, LinkButton} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+// @ts-ignore
 import {TAB_DEFS} from '../src/constants';
 // @ts-ignore
 import url from 'url:../assets/wallpaper_collaborative_S2_desktop.webp';

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

@@ -1081,7 +1081,6 @@ function AsyncLoadingExample() {
   return (
     <Autocomplete
       /*- begin highlight -*/
-      filter={null}
       inputValue={list.filterText}
       onInputChange={list.setFilterText}>
       {/*- end highlight -*/}

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

@@ -42,11 +42,11 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to
 ```tsx render
 "use client";
 import {ColorField} from 'vanilla-starter/ColorField';
-import {parseColor} from 'react-aria-components';
+import {parseColor, type Color} from 'react-aria-components';
 import {useState} from 'react';
 
 function Example() {
-  let [value, setValue] = useState(parseColor('#e73623'));
+  let [value, setValue] = useState<Color | null>(parseColor('#e73623'));
 
   return (
     <div>
@@ -68,11 +68,11 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel`
 ```tsx render
 "use client";
 import {ColorField} from 'vanilla-starter/ColorField';
-import {parseColor} from 'react-aria-components';
+import {parseColor, type Color} from 'react-aria-components';
 import {useState} from 'react';
 
 function Example() {
-  let [color, setColor] = useState(parseColor('#7f007f'));
+  let [color, setColor] = useState<Color | null>(parseColor('#7f007f'));
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -109,7 +109,7 @@ Use the `name` prop to submit the text value to the server. Set the `isRequired`
 
 ```tsx render
 "use client";
-import {ColorField, Button, Form} from 'vanilla-starter/ColorField';
+import {ColorField} from 'vanilla-starter/ColorField';
 import {Button} from 'vanilla-starter/Button';
 import {Form} from 'vanilla-starter/Form';
 

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

@@ -113,12 +113,12 @@ Use the `defaultSelectedKey` or `selectedKey` prop to set the selected item. The
 
 ```tsx render
 "use client";
-import type {Key} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {useState} from 'react';
+import type {Key} from 'react-aria-components';
 
 function Example() {
-  let [animal, setAnimal] = useState<Key>("bison");
+  let [animal, setAnimal] = useState<Key | null>("bison");
 
   return (
     <div>
@@ -148,12 +148,11 @@ Use the `inputValue` or `defaultInputValue` prop to set the value of the input f
 
 ```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['allowsCustomValue']} initialProps={{defaultSelectedKey: 'kangaroo'}}
 "use client";
-import type {Key} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {useState} from 'react';
 
 function Example(props) {
-  let [value, setValue] = useState<Key>('Kangaroo');
+  let [value, setValue] = useState('Kangaroo');
 
   return (
     <div>
@@ -204,15 +203,15 @@ function ControlledComboBox() {
   ];
   /*- end collapse -*/
 
-  let [fieldState, setFieldState] = useState({
+  let [fieldState, setFieldState] = useState<{selectedKey: Key | null, inputValue: string}>({
     selectedKey: null,
     inputValue: ''
   });
 
-  let onSelectionChange = (id: Key) => {
+  let onSelectionChange = (id: Key | null) => {
     // Update inputValue when selectedKey changes.
     setFieldState({
-      inputValue: options.find(o => o.id === id)?.name ?? '',
+      inputValue: id == null ? '' : options.find(o => o.id === id)?.name ?? '',
       selectedKey: id
     });
   };
@@ -227,7 +226,7 @@ function ControlledComboBox() {
 
   return (
     <div>
-       <ComboBox
+      <ComboBox
         label="Engineering major"
         placeholder="Select a major"
         /*- begin highlight -*/

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

@@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t
 
 ```tsx render
 "use client";
-import {parseDate, getLocalTimeZone} from '@internationalized/date';
+import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
 import {useDateFormatter} from 'react-aria';
 import {DateField} from 'vanilla-starter/DateField';
 import {useState} from 'react';
 
 function Example() {
-  let [date, setDate] = useState(parseDate('2020-02-03'));
+  let [date, setDate] = useState<CalendarDate | null>(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
 
   return (

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

@@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t
 
 ```tsx render
 "use client";
-import {parseDate, getLocalTimeZone} from '@internationalized/date';
+import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
 import {useDateFormatter} from 'react-aria';
 import {DatePicker} from 'vanilla-starter/DatePicker';
 import {useState} from 'react';
 
 function Example() {
-  let [date, setDate] = useState(parseDate('2020-02-03'));
+  let [date, setDate] = useState<CalendarDate | null>(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
 
   return (

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

@@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj
 
 ```tsx render
 "use client";
-import {parseDate, getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from 'react-aria';
+import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
+import {useDateFormatter, type RangeValue} from 'react-aria';
 import {DateRangePicker} from 'vanilla-starter/DateRangePicker';
 import {useState} from 'react';
 
 function Example() {
-  let [range, setRange] = useState({
+  let [range, setRange] = useState<RangeValue<CalendarDate> | null>({
     start: parseDate('2025-02-03'),
     end: parseDate('2025-02-12')
   });
@@ -60,10 +60,10 @@ function Example() {
         value={range}
         onChange={setRange} />
         {/*- end highlight -*/}
-      <p>Selected range: {formatter.formatRange(
+      <p>Selected range: {range ? formatter.formatRange(
         range.start.toDate(getLocalTimeZone()),
         range.end.toDate(getLocalTimeZone())
-      )}</p>
+      ) : '--'}</p>
     </>
   );
 }