Convert React Aria Components examples to TypeScript (#4212)

Author: devongovett

packages/@react-aria/calendar/src/index.ts

@@ -15,7 +15,7 @@ export {useRangeCalendar} from './useRangeCalendar';
 export {useCalendarGrid} from './useCalendarGrid';
 export {useCalendarCell} from './useCalendarCell';
 
-export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, RangeCalendarProps} from '@react-types/calendar';
+export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';
 export type {CalendarAria} from './useCalendarBase';
 export type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid';
 export type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell';

packages/@react-aria/combobox/src/index.ts

@@ -3,11 +3,12 @@
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
 export {useComboBox} from './useComboBox';
 export type {AriaComboBoxOptions, ComboBoxAria} from './useComboBox';
+export type {AriaComboBoxProps} from '@react-types/combobox';

packages/@react-aria/datepicker/src/index.ts

@@ -16,8 +16,8 @@ export {useDateField, useTimeField} from './useDateField';
 export {useDateRangePicker} from './useDateRangePicker';
 export {useDisplayNames} from './useDisplayNames';
 
-export type {AriaDatePickerProps, AriaDateRangePickerProps} from '@react-types/datepicker';
-export type {AriaDateFieldProps, DateFieldAria} from './useDateField';
+export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker';
+export type {AriaDateFieldOptions, DateFieldAria} from './useDateField';
 export type {DatePickerAria} from './useDatePicker';
 export type {DateRangePickerAria} from './useDateRangePicker';
 export type {DateSegmentAria} from './useDateSegment';

packages/@react-aria/datepicker/src/useDateField.ts

@@ -24,7 +24,7 @@ import {useFocusWithin} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
-export interface AriaDateFieldProps<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
+export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
 
 export interface DateFieldAria {
    /** Props for the field's visible label element, if any. */
@@ -57,7 +57,7 @@ export const focusManagerSymbol = '__focusManager_' + Date.now();
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
+export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span'

packages/@react-aria/overlays/src/index.ts

@@ -28,3 +28,4 @@ export type {DismissButtonProps} from './DismissButton';
 export type {AriaPopoverProps, PopoverAria} from './usePopover';
 export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';
 export type {OverlayProps} from './Overlay';
+export type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';

packages/@react-aria/radio/src/index.ts

@@ -12,5 +12,6 @@
 export {useRadio} from './useRadio';
 export {useRadioGroup} from './useRadioGroup';
 export type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';
+export type {Orientation} from '@react-types/shared';
 export type {RadioAria} from './useRadio';
 export type {RadioGroupAria} from './useRadioGroup';

packages/@react-aria/select/src/index.ts

@@ -3,7 +3,7 @@
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
@@ -13,3 +13,4 @@ export {useSelect} from './useSelect';
 export {useHiddenSelect, HiddenSelect} from './HiddenSelect';
 export type {AriaSelectOptions, SelectAria} from './useSelect';
 export type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';
+export type {AriaSelectProps} from '@react-types/select';

packages/@react-aria/slider/src/index.ts

@@ -14,3 +14,5 @@ export {useSliderThumb} from './useSliderThumb';
 export type {AriaSliderProps} from '@react-types/slider';
 export type {SliderAria} from './useSlider';
 export type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb';
+export type {AriaSliderThumbProps} from '@react-types/slider';
+export type {Orientation} from '@react-types/shared';

packages/@react-aria/tabs/src/index.ts

@@ -13,6 +13,7 @@ export {useTab} from './useTab';
 export {useTabPanel} from './useTabPanel';
 export {useTabList} from './useTabList';
 export type {AriaTabListProps, AriaTabPanelProps, AriaTabProps} from '@react-types/tabs';
+export type {Orientation} from '@react-types/shared';
 export type {TabAria} from './useTab';
 export type {TabPanelAria} from './useTabPanel';
 export type {TabListAria} from './useTabList';

packages/@react-stately/table/src/index.ts

@@ -22,5 +22,5 @@ export {Column} from './Column';
 export {Row} from './Row';
 export {Cell} from './Cell';
 export {Section} from '@react-stately/collections';
-export {TableCollection} from './TableCollection';
+export {TableCollection, buildHeaderRows} from './TableCollection';
 export {TableColumnLayout} from './TableColumnLayout';

packages/dev/docs/src/docs.css

@@ -365,6 +365,10 @@ footer li:last-child:after {
   margin-bottom: 0;
 }
 
+.propTable td[data-column="CSS Selector"] code {
+  white-space: nowrap;
+}
+
 .type-description {
   margin-top: 0;
 }
@@ -720,6 +724,10 @@ h2.sectionHeader {
   main {
     margin-right: 0;
   }
+
+  .propTable td[data-column="CSS Selector"] code {
+    white-space: normal;
+  }
 }
 
 @define-mixin small-propTable {

packages/dev/parcel-transformer-docs/DocsTransformer.js

@@ -649,12 +649,19 @@ module.exports = new Transformer({
         return false;
       }
 
-      if (!t.isMemberExpression(path.node.callee)) {
-        return path.get('callee').referencesImport(module, name);
+      let callee = path.node.callee;
+      let calleePath = path.get('callee');
+      if (t.isTSAsExpression(callee)) {
+        callee = callee.expression;
+        calleePath = calleePath.get('expression');
       }
 
-      if (path.get('callee.object').referencesImport(module, 'default')) {
-        return t.isIdentifier(path.node.callee.property, {name});
+      if (!t.isMemberExpression(callee)) {
+        return calleePath.referencesImport(module, name);
+      }
+
+      if (calleePath.get('object').referencesImport(module, 'default')) {
+        return t.isIdentifier(callee.property, {name});
       }
 
       return false;
@@ -664,7 +671,7 @@ module.exports = new Transformer({
       if (path.isFunction()) {
         if (
           path.node.returnType &&
-          t.isTSTypeReference(path.node.returnType.typeAnnotation) && 
+          t.isTSTypeReference(path.node.returnType.typeAnnotation) &&
           t.isTSQualifiedName(path.node.returnType.typeAnnotation.typeName) &&
           t.isIdentifier(path.node.returnType.typeAnnotation.typeName.left, {name: 'JSX'}) &&
           t.isIdentifier(path.node.returnType.typeAnnotation.typeName.right, {name: 'Element'})

packages/react-aria-components/docs/Calendar.mdx

@@ -382,9 +382,14 @@ If you will use a Calendar in multiple places in your app, you can wrap all of t
 This example also shows how to use the `errorMessage` slot to render help text in case of a validation error ([see below for details](#error-message)).
 
 ```tsx example export=true
+import type {CalendarProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyCalendar({errorMessage, ...props}) {
+interface MyCalendarProps<T extends DateValue> extends CalendarProps<T> {
+  errorMessage?: string
+}
+
+function MyCalendar<T extends DateValue>({errorMessage, ...props}: MyCalendarProps<T>) {
   return (
     <Calendar {...props}>
       <header>
@@ -468,7 +473,7 @@ The below example displays a `Calendar` in the Hindi language, using the Indian
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [date, setDate] = React.useState(null);
+  let [date, setDate] = React.useState<DateValue>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyCalendar aria-label="Date" value={date} onChange={setDate} />

packages/react-aria-components/docs/Checkbox.mdx

@@ -260,7 +260,9 @@ If you will use a Checkbox in multiple places in your app, you can wrap all of t
 This example wraps `Checkbox` and all of its children together into a single component. It also shows how to use render props to conditionally render a different indicator icon when the checkbox is in an indeterminate state.
 
 ```tsx example export=true
-function MyCheckbox({children, ...props}) {
+import type {CheckboxProps} from 'react-aria-components';
+
+function MyCheckbox({children, ...props}: CheckboxProps) {
   return (
     <Checkbox {...props}>
       {({isIndeterminate}) => <>

packages/react-aria-components/docs/CheckboxGroup.mdx

@@ -341,15 +341,22 @@ If you will use a CheckboxGroup in multiple places in your app, you can wrap all
 This example wraps `CheckboxGroup` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {CheckboxGroupProps, CheckboxProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
+interface MyCheckboxGroupProps extends CheckboxGroupProps {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
 function MyCheckboxGroup({
   label,
   description,
   errorMessage,
   children,
   ...props
-}) {
+}: MyCheckboxGroupProps) {
   return (
     <CheckboxGroup {...props}>
       {label}
@@ -360,7 +367,7 @@ function MyCheckboxGroup({
   );
 }
 
-function MyCheckbox({children, ...props}) {
+function MyCheckbox({children, ...props}: CheckboxProps) {
   return (
     <Checkbox {...props}>
       <div className="checkbox" aria-hidden="true">

packages/react-aria-components/docs/ComboBox.mdx

@@ -462,9 +462,17 @@ If you will use a ComboBox in multiple places in your app, you can wrap all of t
 This example wraps `ComboBox` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)). The `Item` component is also wrapped to apply class names based on the current state, as described [above](#styling).
 
 ```tsx example export=true
+import type {ComboBoxProps, ItemProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyComboBox({label, description, errorMessage, children, ...props}) {
+interface MyComboBoxProps<T extends object> extends ComboBoxProps<T> {
+  label?: string,
+  description?: string | null,
+  errorMessage?: string | null,
+  children: React.ReactNode | ((item: T) => React.ReactNode)
+}
+
+function MyComboBox<T extends object>({label, description, errorMessage, children, ...props}: MyComboBoxProps<T>) {
   return (
     <ComboBox {...props}>
       <Label>{label}</Label>
@@ -483,7 +491,7 @@ function MyComboBox({label, description, errorMessage, children, ...props}) {
   );
 }
 
-function MyItem(props) {
+function MyItem(props: ItemProps) {
   return <Item {...props} className={({isFocused, isSelected}) => `my-item ${isFocused ? 'focused' : ''} ${isSelected ? 'selected' : ''}`} />
 }
 
@@ -565,7 +573,7 @@ function Example() {
     {id: 8, name: 'Agricultural'},
     {id: 9, name: 'Electrical'}
   ];
-  let [majorId, setMajorId] = React.useState();
+  let [majorId, setMajorId] = React.useState<React.Key | null>(null);
 
   return (
     <>
@@ -791,7 +799,7 @@ function ControlledComboBox() {
   let onInputChange = (value) => {
     setFieldState(prevState => ({
       inputValue: value,
-      selectedKey: value === '' ? null : prevState.selectedKey,
+      selectedKey: value === '' ? '' : prevState.selectedKey,
       items: optionList.filter(item => startsWith(item.name, value))
     }));
   };
@@ -875,8 +883,12 @@ of a ComboBox supporting those features.
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
 
+interface Character {
+  name: string
+}
+
 function AsyncLoadingExample() {
-  let list = useAsyncList({
+  let list = useAsyncList<Character>({
     async load({signal, filterText}) {
       let res = await fetch(
         `https://swapi.py4e.com/api/people/?search=${filterText}`,
@@ -908,7 +920,7 @@ The `description` slot can be used to associate additional help text with a Comb
 
 ```tsx example
 function Example() {
-  let [animalId, setAnimalId] = React.useState();
+  let [animalId, setAnimalId] = React.useState<React.Key | null>(null);
   let options = [
     { id: 1, name: 'Aardvark' },
     { id: 2, name: 'Cat' },

packages/react-aria-components/docs/DateField.mdx

@@ -308,9 +308,16 @@ If you will use a DateField in multiple places in your app, you can wrap all of
 This example wraps `DateField` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {DateFieldProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyDateField({label, description, errorMessage, ...props}) {
+interface MyDateFieldProps<T extends DateValue> extends DateFieldProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyDateField<T extends DateValue>({label, description, errorMessage, ...props}: MyDateFieldProps<T>) {
   return (
     <DateField {...props}>
       <Label>{label}</Label>
@@ -464,7 +471,7 @@ The below example displays a `DateField` in the Hindi language, using the Indian
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [date, setDate] = React.useState(null);
+  let [date, setDate] = React.useState<DateValue>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDateField label="Date" value={date} onChange={setDate} />

packages/react-aria-components/docs/DatePicker.mdx

@@ -664,9 +664,16 @@ If you will use a DatePicker in multiple places in your app, you can wrap all of
 This example wraps `DatePicker` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {DatePickerProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyDatePicker({label, description, errorMessage, ...props}) {
+interface MyDatePickerProps<T extends DateValue> extends DatePickerProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyDatePicker<T extends DateValue>({label, description, errorMessage, ...props}: MyDatePickerProps<T>) {
   return (
     <DatePicker {...props}>
       <Label>{label}</Label>
@@ -838,7 +845,7 @@ The below example displays a `DatePicker` in the Hindi language, using the India
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [date, setDate] = React.useState(null);
+  let [date, setDate] = React.useState<DateValue>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDatePicker label="Date" value={date} onChange={setDate} />
@@ -909,8 +916,8 @@ function Example() {
       value={date}
       onChange={setDate}
       validationState={isInvalid ? 'invalid' : 'valid'}
-      description={isInvalid ? null : 'Select a weekday'}
-      errorMessage={isInvalid ? 'We are closed on weekends' : null} />
+      description={isInvalid ? undefined : 'Select a weekday'}
+      errorMessage={isInvalid ? 'We are closed on weekends' : undefined} />
   );
 }
 ```