Avoid using global React type

Author: emmatown

.eslintrc.js

@@ -119,6 +119,14 @@ module.exports = {
         },
       },
     ],
+    'no-restricted-syntax': [
+      ERROR,
+      {
+        selector: "TSQualifiedName[left.name='React']",
+        message:
+          "Avoid using the global React type, import the specific type you want from 'react'",
+      },
+    ],
     'react/no-unknown-property': OFF,
     'react-compiler/react-compiler': [
       ERROR,

design-system/docs/app/(site)/layout.tsx

@@ -5,6 +5,7 @@ import { Inter } from 'next/font/google';
 import { Layout } from '../../components/layout';
 import { getNavigation } from '../../utils/packages';
 import { basePageTitle } from './utils';
+import { ReactNode } from 'react';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -23,7 +24,7 @@ export const metadata: Metadata = {
 export default async function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   return (
     <NextRootProvider fontClassName={inter.variable}>

design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx

@@ -2,7 +2,7 @@ import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import { useLocale } from '@react-aria/i18n';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
-import React, { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef, ElementType } from 'react';
 
 import { Icon } from '@keystar/ui/icon';
 import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon';
@@ -35,7 +35,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
 
   let { direction } = useLocale();
   let ref = useRef(null);
-  let ElementType: React.ElementType = props.href ? 'a' : 'span';
+  let ElementType: ElementType = props.href ? 'a' : 'span';
   let { itemProps } = useBreadcrumbItem(
     { ...props, elementType: ElementType },
     ref

design-system/pkg/src/checkbox/Checkbox.tsx

@@ -3,6 +3,7 @@ import { useToggleState } from '@react-stately/toggle';
 import {
   HTMLAttributes,
   InputHTMLAttributes,
+  RefObject,
   useContext,
   useMemo,
   useRef,
@@ -70,7 +71,7 @@ function CheckboxAlone(props: CheckboxProps) {
 
 function CheckboxInner(
   props: CheckboxProps & {
-    inputRef: React.RefObject<HTMLInputElement | null>;
+    inputRef: RefObject<HTMLInputElement | null>;
     inputProps: InputHTMLAttributes<HTMLInputElement>;
   }
 ) {

design-system/pkg/src/combobox/Combobox.tsx

@@ -10,6 +10,7 @@ import { useComboBoxState } from '@react-stately/combobox';
 import { AriaButtonProps } from '@react-types/button';
 import { LoadingState } from '@react-types/shared';
 import React, {
+  CSSProperties,
   ForwardedRef,
   InputHTMLAttributes,
   ReactElement,
@@ -235,7 +236,7 @@ interface ComboboxInputProps<T> extends ComboboxProps<T> {
   inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
   triggerProps: AriaButtonProps;
   triggerRef: RefObject<HTMLButtonElement | null>;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   isOpen?: boolean;
 }
 

design-system/pkg/src/combobox/MobileCombobox.tsx

@@ -11,6 +11,7 @@ import { ComboBoxState, useComboBoxState } from '@react-stately/combobox';
 import { AriaButtonProps } from '@react-types/button';
 import { ValidationState } from '@react-types/shared';
 import React, {
+  CSSProperties,
   ForwardedRef,
   HTMLAttributes,
   KeyboardEvent,
@@ -136,7 +137,7 @@ interface ComboboxButtonProps extends AriaButtonProps {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   isPlaceholder?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   validationState?: ValidationState;
 }
 

design-system/pkg/src/combobox/MobileComboboxMulti.tsx

@@ -9,6 +9,7 @@ import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
 import { AriaButtonProps } from '@react-types/button';
 import { ValidationState } from '@react-types/shared';
 import React, {
+  CSSProperties,
   ForwardedRef,
   HTMLAttributes,
   KeyboardEvent,
@@ -133,7 +134,7 @@ interface ComboboxButtonProps extends AriaButtonProps {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   isPlaceholder?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   validationState?: ValidationState;
 }
 

design-system/pkg/src/date-time/DatePickerPopover.tsx

@@ -4,7 +4,7 @@ import {
   DatePickerState,
   DateRangePickerState,
 } from '@react-stately/datepicker';
-import { ReactNode, useRef } from 'react';
+import { ReactNode, RefObject, useRef } from 'react';
 
 import { Popover, Tray } from '@keystar/ui/overlays';
 import { css, tokenSchema, useIsMobileDevice } from '@keystar/ui/style';
@@ -17,7 +17,7 @@ export function DatePickerPopover({
   dialogProps: AriaDialogProps;
   shouldFlip?: boolean;
   state: DatePickerState | DateRangePickerState;
-  triggerRef: React.RefObject<HTMLElement | null>;
+  triggerRef: RefObject<HTMLElement | null>;
 }) {
   let scrollRef = useRef<HTMLDivElement>(null);
   let { direction } = useLocale();

design-system/pkg/src/list-view/ListViewItem.tsx

@@ -16,7 +16,7 @@ import { mergeProps } from '@react-aria/utils';
 import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { DropTarget, Node } from '@react-types/shared';
 import { assert } from 'emery';
-import React, { useRef } from 'react';
+import React, { HTMLAttributes, useRef } from 'react';
 
 import { Checkbox } from '@keystar/ui/checkbox';
 import { KeystarProvider } from '@keystar/ui/core';
@@ -355,7 +355,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
               {!isDisabled && (
                 <FocusRing>
                   <div
-                    {...(buttonProps as React.HTMLAttributes<HTMLElement>)}
+                    {...(buttonProps as HTMLAttributes<HTMLElement>)}
                     className={classNames(
                       listViewItemClassList.element('draghandle'),
                       css({

design-system/pkg/src/number-field/test/NumberField.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { expect, it, describe, afterEach, jest } from '@jest/globals';
 import { firePress, renderWithProvider } from '#test-utils';
 import userEvent from '@testing-library/user-event';
@@ -9,7 +9,7 @@ let testId = 'test-id';
 
 function renderNumberField(
   props: Partial<NumberFieldProps> = {},
-  ref?: React.RefObject<HTMLInputElement | null>
+  ref?: RefObject<HTMLInputElement | null>
 ) {
   let user = userEvent.setup();
   let result = renderWithProvider(