fix: annotate props with named react type imports

src/components/ActionDropdown/ActionDropdown.spec.tsx

@@ -1,15 +1,15 @@
-import type React from 'react';
+import type { ComponentPropsWithoutRef, FC } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { ActionDropdown } from './ActionDropdown.tsx';
 
-type Props = React.ComponentPropsWithoutRef<typeof ActionDropdown>;
+type Props = ComponentPropsWithoutRef<typeof ActionDropdown>;
 
 const TEST_ID = 'ActionDropdown';
 
-const TestActionDropdown: React.FC<Partial<Props>> = (props) => {
+const TestActionDropdown: FC<Partial<Props>> = (props) => {
   return (
     <ActionDropdown
       data-testid={TEST_ID}

src/components/ArrowToggle/ArrowToggle.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { HTMLAttributes, Ref } from 'react';
 import * as React from 'react';
 
 import { ChevronUpIcon } from 'lucide-react';
@@ -11,14 +12,14 @@ import { Button } from '../Button/Button.tsx';
 import type { ButtonProps } from '../Button/Button.tsx';
 
 export type ArrowToggleProps = Simplify<
-  React.HTMLAttributes<HTMLButtonElement> & {
+  HTMLAttributes<HTMLButtonElement> & {
     /** Whether or not the arrow is currently toggled */
     isToggled?: boolean;
 
     /** The starting position of the arrow (i.e., which direction does it point to) */
     position: 'down' | 'left' | 'right' | 'up';
 
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: Ref<HTMLButtonElement>;
 
     /** The clockwise rotation of the arrow when toggled (e.g., if the position is 'right' and rotation is 90, the arrow will point down) */
     rotation?: number;

src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
@@ -22,7 +22,7 @@ const badgeVariants = cva(
   }
 );
 
-type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
+type BadgeProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
 
 const Badge = ({ className, variant, ...props }: BadgeProps) => {
   return <div className={cn(badgeVariants({ variant }), className)} data-testid="badge" {...props} />;

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { ButtonHTMLAttributes, Ref } from 'react';
 
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -40,12 +40,12 @@ export const buttonVariants = cva(
 );
 
 export type ButtonProps = Simplify<
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  ButtonHTMLAttributes<HTMLButtonElement> &
     VariantProps<typeof buttonVariants> & {
       asChild?: boolean;
       /** @deprecated - use children   */
       label?: string;
-      ref?: React.Ref<HTMLButtonElement>;
+      ref?: Ref<HTMLButtonElement>;
     }
 >;
 

src/components/Card/Card.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type { ComponentProps, HTMLAttributes } from 'react';
 
 import { cn } from '#utils';
 
-const CardRoot = ({ className, ref, ...props }: React.ComponentProps<'div'>) => {
+const CardRoot = ({ className, ref, ...props }: ComponentProps<'div'>) => {
   return (
     <div
       className={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)}
@@ -14,19 +14,19 @@ const CardRoot = ({ className, ref, ...props }: React.ComponentProps<'div'>) =>
 };
 
 export const Card = Object.assign(CardRoot, {
-  Content: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  Content: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn('p-6 pt-0', className)} {...props} />
   ),
-  Description: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+  Description: ({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) => (
     <p className={cn('text-muted-foreground text-sm', className)} {...props} />
   ),
-  Footer: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  Footer: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => {
     return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />;
   },
-  Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  Header: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
   ),
-  Title: ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  Title: ({ children, className, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
     <h3 className={cn('leading-none font-semibold tracking-tight', className)} {...props}>
       {children}
     </h3>

src/components/Checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
-import type React from 'react';
+import type { ComponentProps } from 'react';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 
 import { cn } from '#utils';
 
-export const Checkbox = ({ className, ref, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) => {
+export const Checkbox = ({ className, ref, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>) => {
   return (
     <CheckboxPrimitive.Root
       className={cn(

src/components/ClientTable/ClientTable.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import type { ComponentType, SVGProps } from 'react';
 import * as React from 'react';
 
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
@@ -42,7 +43,7 @@ export type ClientTableColumn<T extends ClientTableEntry> = {
 };
 
 export type ClientTableDropdownOptions<T extends ClientTableEntry> = {
-  icon?: React.ComponentType<Omit<React.SVGProps<SVGSVGElement>, 'ref'>>;
+  icon?: ComponentType<Omit<SVGProps<SVGSVGElement>, 'ref'>>;
   label: string;
   onSelection: (column: ClientTableColumn<T>) => void;
 }[];

src/components/ComboBox/ComboBoxChips.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { ComponentPropsWithRef } from 'react';
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { XIcon } from 'lucide-react';
@@ -10,7 +10,7 @@ import { Button } from '../Button/Button.tsx';
 const ComboboxChips = ({
   className,
   ...props
-}: ComboboxPrimitive.Chips.Props & React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips>) => {
+}: ComboboxPrimitive.Chips.Props & ComponentPropsWithRef<typeof ComboboxPrimitive.Chips>) => {
   return (
     <ComboboxPrimitive.Chips
       className={cn(

src/components/CopyButton/CopyButton.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import type { FC } from 'react';
 
 import { ClipboardCheckIcon, ClipboardListIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
@@ -8,7 +9,7 @@ import { Button } from '../Button/Button.tsx';
 
 import type { ButtonProps } from '../Button/Button.tsx';
 
-export const CopyButton: React.FC<{ size?: ButtonProps['size']; text: string; variant?: ButtonProps['variant'] }> = ({
+export const CopyButton: FC<{ size?: ButtonProps['size']; text: string; variant?: ButtonProps['variant'] }> = ({
   size,
   text,
   variant

src/components/DataTable/DataTableBody.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { CSSProperties, FC } from 'react';
 
 import { useTranslation } from '#hooks';
 import { cn } from '#utils';
@@ -9,7 +9,7 @@ import { flexRender } from './utils.tsx';
 
 import type { DataTableContentProps } from './types.ts';
 
-export const DataTableBody: React.FC<
+export const DataTableBody: FC<
   Pick<DataTableContentProps<any>, 'emptyStateProps' | 'onRowClick' | 'onRowDoubleClick'>
 > = ({ emptyStateProps, onRowClick, onRowDoubleClick }) => {
   const rows = useDataTableHandle('rows');
@@ -44,7 +44,7 @@ export const DataTableBody: React.FC<
             onDoubleClick={onRowDoubleClick ? () => void onRowDoubleClick(row.original) : undefined}
           >
             {row.getVisibleCells().map((cell) => {
-              const style: React.CSSProperties = {
+              const style: CSSProperties = {
                 width: `calc(var(--col-${cell.column.id}-size) * 1px)`
               };
               if (cell.column.getIsPinned() === 'left') {

src/components/DataTable/DataTableControls.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
 
 import type { RowData, Table } from '@tanstack/table-core';
 
@@ -14,7 +15,7 @@ export const DataTableControls = <T extends RowData>({
   togglesComponent: Toggles
 }: {
   onSearchChange?: DataTableSearchChangeHandler<T>;
-  togglesComponent?: React.FC<{ table: Table<T> }>;
+  togglesComponent?: FC<{ table: Table<T> }>;
 }) => {
   const table = useDataTableHandle('table');
   const setGlobalFilter = useDataTableStore((store) => store.setGlobalFilter);

src/components/DataTable/DataTableEmptyState.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { FC } from 'react';
 
 import type { LucideIcon } from 'lucide-react';
 
@@ -11,12 +11,7 @@ export type DataTableEmptyStateProps = {
   title: string;
 };
 
-export const DataTableEmptyState: React.FC<DataTableEmptyStateProps> = ({
-  className,
-  description,
-  icon: Icon,
-  title
-}) => {
+export const DataTableEmptyState: FC<DataTableEmptyStateProps> = ({ className, description, icon: Icon, title }) => {
   return (
     <div className={cn('flex flex-col items-center justify-center', className)} data-testid="data-table-empty-state">
       {Icon && <Icon className="text-muted-foreground mb-2" style={{ height: '20px', width: '20px' }} />}

src/components/DataTable/DataTableHead.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { CSSProperties } from 'react';
 
 import { ACTIONS_COLUMN_ID } from './constants.ts';
 import { useDataTableHandle } from './hooks.ts';
@@ -13,7 +13,7 @@ export const DataTableHead = () => {
       {headerGroups.map((headerGroup) => (
         <div className="flex" key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
-            const style: React.CSSProperties = {
+            const style: CSSProperties = {
               // TODO - add more robust solution - should be able to block centering also - also set correct typing
               justifyContent: header.column.columnDef.meta?.centered ? 'center' : 'start',
               width: `calc(var(--header-${header?.id}-size) * 1px)`

src/components/DataTable/store.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { CSSProperties } from 'react';
 
 import {
   createTable,
@@ -52,7 +52,7 @@ export function createDataTableStore<T>(params: DataTableStoreParams<T>) {
     const updateStyle = () => {
       set((state) => {
         const headers = table.getFlatHeaders();
-        const style: React.CSSProperties & { [key: string]: any } = {
+        const style: CSSProperties & { [key: string]: any } = {
           width: table.getTotalSize()
         };
         if (state._containerWidth === null) {

src/components/DataTable/types.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { CSSProperties, FC } from 'react';
 
 import type {
   ColumnDef,
@@ -60,7 +60,7 @@ export type DataTableColumnBreakpoints = {
   1280: number;
 };
 
-export type DataTableRootStyle = React.CSSProperties & {
+export type DataTableRootStyle = CSSProperties & {
   [property: `--${string}`]: number | string | undefined;
 };
 
@@ -71,7 +71,7 @@ export type DataTableContentProps<T extends RowData> = {
   onRowDoubleClick?: (row: T) => Promisable<void>;
   onSearchChange?: DataTableSearchChangeHandler<NoInfer<T>>;
   rootStyle?: DataTableRootStyle;
-  togglesComponent?: React.FC<{ table: Table<T> }>;
+  togglesComponent?: FC<{ table: Table<T> }>;
 };
 
 export type DataTableHandles<T extends { [key: string]: unknown }> = {
@@ -168,5 +168,5 @@ export type DataTableStore = {
   setContainerWidth: (containerWidth: number) => void;
   setGlobalFilter: (globalFilter: GlobalFilter) => void;
   setPageIndex: (index: number) => void;
-  style: React.CSSProperties;
+  style: CSSProperties;
 };

src/components/DataTable/utils.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { ComponentType, JSX, ReactNode } from 'react';
 
 import type {
   ColumnDef,
@@ -97,9 +97,9 @@ function defineMemoizedHandle<T extends (...args: any[]) => any>(target: T) {
 }
 
 function flexRender<TProps extends object>(
-  Comp: React.ComponentType<TProps> | React.ReactNode,
+  Comp: ComponentType<TProps> | ReactNode,
   props: TProps
-): React.JSX.Element | React.ReactNode {
+): JSX.Element | ReactNode {
   return !Comp ? null : isReactComponent<TProps>(Comp) ? <Comp {...props} /> : Comp;
 }
 
@@ -172,7 +172,7 @@ function getTanstackTableState<T>({ initialState, rowActions }: DataTableStorePa
   return state;
 }
 
-function isReactComponent<TProps>(component: unknown): component is React.ComponentType<TProps> {
+function isReactComponent<TProps>(component: unknown): component is ComponentType<TProps> {
   return typeof component === 'function';
 }
 

src/components/DatePicker/Calendar.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { Ref } from 'react';
 
 import { range } from 'lodash-es';
 import { AnimatePresence, motion } from 'motion/react';
@@ -10,7 +10,7 @@ export const CALENDAR_ANIMATION_DURATION = 0.2; // seconds
 export type CalendarProps = {
   month: number;
   onSelection: (date: Date) => void;
-  ref?: React.Ref<HTMLDivElement>;
+  ref?: Ref<HTMLDivElement>;
   year: number;
 };
 

src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,5 @@
 import { useReducer, useState } from 'react';
+import type { MouseEventHandler, Ref } from 'react';
 import * as React from 'react';
 
 import { AnimatePresence, motion } from 'motion/react';
@@ -57,10 +58,10 @@ const reducer = (previousDate: Date, action: ReducerAction) => {
 };
 
 export type DatePickerProps = {
-  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
   onSelection: (value: Date) => void;
-  ref?: React.Ref<HTMLDivElement>;
+  ref?: Ref<HTMLDivElement>;
 };
 
 export const DatePicker = ({ onSelection, ref, ...props }: DatePickerProps) => {

src/components/Dialog/DialogBody.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { cn } from '#utils';
 
 export const DialogBody = ({
   children,
   className,
   ...props
-}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
   return (
     <div className={cn('py-4', className)} {...props}>
       {children}

src/components/Dialog/DialogContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { ComponentProps } from 'react';
 
 import { Close, Content, Portal } from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
@@ -7,7 +7,7 @@ import { cn } from '#utils';
 
 import { DialogOverlay } from './DialogOverlay.tsx';
 
-export const DialogContent = ({ children, className, ...props }: React.ComponentProps<typeof Content>) => {
+export const DialogContent = ({ children, className, ...props }: ComponentProps<typeof Content>) => {
   return (
     <Portal>
       <DialogOverlay />

src/components/Dialog/DialogDescription.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import type { ComponentProps } from 'react';
 
 import { Description } from '@radix-ui/react-dialog';
 
 import { cn } from '#utils';
 
-export const DialogDescription = ({ className, ...props }: React.ComponentProps<typeof Description>) => {
+export const DialogDescription = ({ className, ...props }: ComponentProps<typeof Description>) => {
   return <Description className={cn('text-muted-foreground text-sm', className)} {...props} />;
 };