From 71944153a9b7cdda24786f2e7db9701a295bfb81 Mon Sep 17 00:00:00 2001 From: thomasbeaudry Date: Fri, 30 Oct 2026 13:46:15 -0400 Subject: [PATCH] fix: annotate props with named react type imports `import type React from 'react'` fixed the declarations of each component's own file, but a component aggregated with `Object.assign` re-emits its members' annotations textually, so `Tabs.d.ts` names `React` without importing it. Six aggregates still leaked a bare `React.` into `dist`. Importing each type by name makes the emitter write `import("react").X` everywhere, which no local binding has to exist for. Only the value uses of the namespace (`React.useState` and friends) keep `import * as React`. Co-Authored-By: Claude Opus 5 --- .../ActionDropdown/ActionDropdown.spec.tsx | 6 +++--- src/components/ArrowToggle/ArrowToggle.tsx | 5 +++-- src/components/Badge/Badge.tsx | 4 ++-- src/components/Button/Button.tsx | 6 +++--- src/components/Card/Card.tsx | 14 +++++++------- src/components/Checkbox/Checkbox.tsx | 4 ++-- src/components/ClientTable/ClientTable.tsx | 3 ++- src/components/ComboBox/ComboBoxChips.tsx | 4 ++-- src/components/CopyButton/CopyButton.tsx | 5 +++-- src/components/DataTable/DataTableBody.tsx | 6 +++--- src/components/DataTable/DataTableControls.tsx | 5 +++-- src/components/DataTable/DataTableEmptyState.tsx | 9 ++------- src/components/DataTable/DataTableHead.tsx | 4 ++-- src/components/DataTable/store.ts | 4 ++-- src/components/DataTable/types.ts | 8 ++++---- src/components/DataTable/utils.tsx | 8 ++++---- src/components/DatePicker/Calendar.tsx | 4 ++-- src/components/DatePicker/DatePicker.tsx | 7 ++++--- src/components/Dialog/DialogBody.tsx | 4 ++-- src/components/Dialog/DialogContent.tsx | 4 ++-- src/components/Dialog/DialogDescription.tsx | 4 ++-- src/components/Dialog/DialogFooter.tsx | 4 ++-- src/components/Dialog/DialogHeader.tsx | 4 ++-- src/components/Dialog/DialogOverlay.tsx | 4 ++-- src/components/Dialog/DialogTitle.tsx | 4 ++-- src/components/DropdownButton/DropdownButton.tsx | 4 ++-- .../DropdownMenu/DropdownMenuCheckboxItem.tsx | 4 ++-- .../DropdownMenu/DropdownMenuContent.tsx | 4 ++-- src/components/DropdownMenu/DropdownMenuItem.tsx | 4 ++-- src/components/DropdownMenu/DropdownMenuLabel.tsx | 4 ++-- .../DropdownMenu/DropdownMenuRadioItem.tsx | 4 ++-- .../DropdownMenu/DropdownMenuSeparator.tsx | 4 ++-- .../DropdownMenu/DropdownMenuShortcut.tsx | 4 ++-- .../DropdownMenu/DropdownMenuSubContent.tsx | 4 ++-- .../DropdownMenu/DropdownMenuSubTrigger.tsx | 4 ++-- src/components/Form/DynamicField.tsx | 5 +++-- src/components/Form/ErrorMessage.tsx | 4 ++-- .../Form/FieldGroup/FieldGroupDescription.tsx | 9 +++++---- src/components/Form/FieldGroup/FieldGroupRoot.tsx | 4 ++-- src/components/Form/FieldGroup/FieldGroupRow.tsx | 4 ++-- src/components/Form/FieldsComponent.tsx | 6 +++--- src/components/Form/Form.stories.tsx | 4 ++-- src/components/Form/Form.tsx | 12 ++++++------ .../Form/NumberField/NumberFieldInput.tsx | 4 ++-- src/components/Form/StaticField.tsx | 5 +++-- src/components/HoverCard/HoverCardContent.tsx | 4 ++-- src/components/Input/Input.tsx | 4 ++-- src/components/InputGroup/InputGroup.tsx | 4 ++-- src/components/InputGroup/InputGroupAddon.tsx | 4 ++-- src/components/InputGroup/InputGroupButton.tsx | 4 ++-- src/components/InputGroup/InputGroupInput.tsx | 4 ++-- src/components/InputGroup/InputGroupText.tsx | 4 ++-- src/components/InputGroup/InputGroupTextArea.tsx | 4 ++-- src/components/Label/Label.tsx | 4 ++-- src/components/ListboxDropdown/ListboxDropdown.tsx | 4 ++-- .../OneTimePasswordInput.spec.tsx | 6 +++--- src/components/Popover/PopoverContent.tsx | 6 +++--- src/components/RadioGroup/RadioGroup.tsx | 6 +++--- src/components/RadioGroup/RadioGroupItem.tsx | 4 ++-- src/components/ScrollArea/ScrollArea.tsx | 4 ++-- src/components/Select/SelectContent.tsx | 4 ++-- src/components/Select/SelectItem.tsx | 9 ++------- src/components/Select/SelectLabel.tsx | 4 ++-- src/components/Select/SelectScrollDownButton.tsx | 4 ++-- src/components/Select/SelectScrollUpButton.tsx | 4 ++-- src/components/Select/SelectSeparator.tsx | 8 ++------ src/components/Select/SelectTrigger.tsx | 4 ++-- src/components/Separator/Separator.tsx | 4 ++-- src/components/Sheet/SheetBody.tsx | 4 ++-- src/components/Sheet/SheetContent.tsx | 4 ++-- src/components/Sheet/SheetDescription.tsx | 4 ++-- src/components/Sheet/SheetFooter.tsx | 4 ++-- src/components/Sheet/SheetHeader.tsx | 4 ++-- src/components/Sheet/SheetOverlay.tsx | 4 ++-- src/components/Sheet/SheetTitle.tsx | 4 ++-- src/components/Slider/Slider.tsx | 4 ++-- src/components/Table/TableBody.tsx | 4 ++-- src/components/Table/TableCaption.tsx | 4 ++-- src/components/Table/TableCell.tsx | 4 ++-- src/components/Table/TableFooter.tsx | 4 ++-- src/components/Table/TableHead.tsx | 4 ++-- src/components/Table/TableHeader.tsx | 4 ++-- src/components/Table/TableRoot.tsx | 4 ++-- src/components/Table/TableRow.tsx | 4 ++-- src/components/Tabs/TabsContent.tsx | 4 ++-- src/components/Tabs/TabsList.tsx | 4 ++-- src/components/Tabs/TabsRoot.tsx | 4 ++-- src/components/Tabs/TabsTrigger.tsx | 4 ++-- src/components/TextArea/TextArea.tsx | 4 ++-- src/components/Tooltip/TooltipContent.tsx | 6 +++--- src/components/Tooltip/TooltipRoot.tsx | 4 ++-- src/components/Tooltip/TooltipTrigger.tsx | 4 ++-- .../CoreProvider/CoreProvider.stories.tsx | 4 ++-- src/providers/CoreProvider/CoreProvider.tsx | 4 ++-- 94 files changed, 219 insertions(+), 225 deletions(-) diff --git a/src/components/ActionDropdown/ActionDropdown.spec.tsx b/src/components/ActionDropdown/ActionDropdown.spec.tsx index f4b44f3c..7ab7469c 100644 --- a/src/components/ActionDropdown/ActionDropdown.spec.tsx +++ b/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; +type Props = ComponentPropsWithoutRef; const TEST_ID = 'ActionDropdown'; -const TestActionDropdown: React.FC> = (props) => { +const TestActionDropdown: FC> = (props) => { return ( & { + HTMLAttributes & { /** 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; + ref?: Ref; /** 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; diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 8b8083c3..b6e55430 100644 --- a/src/components/Badge/Badge.tsx +++ b/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 & VariantProps; +type BadgeProps = HTMLAttributes & VariantProps; const Badge = ({ className, variant, ...props }: BadgeProps) => { return
; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 9e04cdde..c83bb525 100644 --- a/src/components/Button/Button.tsx +++ b/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 & + ButtonHTMLAttributes & VariantProps & { asChild?: boolean; /** @deprecated - use children */ label?: string; - ref?: React.Ref; + ref?: Ref; } >; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index d5d029ef..9e023d79 100644 --- a/src/components/Card/Card.tsx +++ b/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 (
) => }; export const Card = Object.assign(CardRoot, { - Content: ({ className, ...props }: React.HTMLAttributes) => ( + Content: ({ className, ...props }: HTMLAttributes) => (
), - Description: ({ className, ...props }: React.HTMLAttributes) => ( + Description: ({ className, ...props }: HTMLAttributes) => (

), - Footer: ({ className, ...props }: React.HTMLAttributes) => { + Footer: ({ className, ...props }: HTMLAttributes) => { return

; }, - Header: ({ className, ...props }: React.HTMLAttributes) => ( + Header: ({ className, ...props }: HTMLAttributes) => (
), - Title: ({ children, className, ...props }: React.HTMLAttributes) => ( + Title: ({ children, className, ...props }: HTMLAttributes) => (

{children}

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 599064a7..64acd695 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/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) => { +export const Checkbox = ({ className, ref, ...props }: ComponentProps) => { return ( = { }; export type ClientTableDropdownOptions = { - icon?: React.ComponentType, 'ref'>>; + icon?: ComponentType, 'ref'>>; label: string; onSelection: (column: ClientTableColumn) => void; }[]; diff --git a/src/components/ComboBox/ComboBoxChips.tsx b/src/components/ComboBox/ComboBoxChips.tsx index 97b0e21b..b88b16a5 100644 --- a/src/components/ComboBox/ComboBoxChips.tsx +++ b/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) => { +}: ComboboxPrimitive.Chips.Props & ComponentPropsWithRef) => { return ( = ({ +export const CopyButton: FC<{ size?: ButtonProps['size']; text: string; variant?: ButtonProps['variant'] }> = ({ size, text, variant diff --git a/src/components/DataTable/DataTableBody.tsx b/src/components/DataTable/DataTableBody.tsx index 4c7d8f94..c9ae7612 100644 --- a/src/components/DataTable/DataTableBody.tsx +++ b/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, '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') { diff --git a/src/components/DataTable/DataTableControls.tsx b/src/components/DataTable/DataTableControls.tsx index 3314664c..f2d05ae8 100644 --- a/src/components/DataTable/DataTableControls.tsx +++ b/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 = ({ togglesComponent: Toggles }: { onSearchChange?: DataTableSearchChangeHandler; - togglesComponent?: React.FC<{ table: Table }>; + togglesComponent?: FC<{ table: Table }>; }) => { const table = useDataTableHandle('table'); const setGlobalFilter = useDataTableStore((store) => store.setGlobalFilter); diff --git a/src/components/DataTable/DataTableEmptyState.tsx b/src/components/DataTable/DataTableEmptyState.tsx index f217cc24..d07fc1a6 100644 --- a/src/components/DataTable/DataTableEmptyState.tsx +++ b/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 = ({ - className, - description, - icon: Icon, - title -}) => { +export const DataTableEmptyState: FC = ({ className, description, icon: Icon, title }) => { return (
{Icon && } diff --git a/src/components/DataTable/DataTableHead.tsx b/src/components/DataTable/DataTableHead.tsx index 00637b3b..38dcfcb8 100644 --- a/src/components/DataTable/DataTableHead.tsx +++ b/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) => (
{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)` diff --git a/src/components/DataTable/store.ts b/src/components/DataTable/store.ts index 69ecfd35..6c84bcba 100644 --- a/src/components/DataTable/store.ts +++ b/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(params: DataTableStoreParams) { 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) { diff --git a/src/components/DataTable/types.ts b/src/components/DataTable/types.ts index 7ea4e689..f19d5126 100644 --- a/src/components/DataTable/types.ts +++ b/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 = { onRowDoubleClick?: (row: T) => Promisable; onSearchChange?: DataTableSearchChangeHandler>; rootStyle?: DataTableRootStyle; - togglesComponent?: React.FC<{ table: Table }>; + togglesComponent?: FC<{ table: Table }>; }; export type DataTableHandles = { @@ -168,5 +168,5 @@ export type DataTableStore = { setContainerWidth: (containerWidth: number) => void; setGlobalFilter: (globalFilter: GlobalFilter) => void; setPageIndex: (index: number) => void; - style: React.CSSProperties; + style: CSSProperties; }; diff --git a/src/components/DataTable/utils.tsx b/src/components/DataTable/utils.tsx index 32a691ee..eb2d7064 100644 --- a/src/components/DataTable/utils.tsx +++ b/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 any>(target: T) { } function flexRender( - Comp: React.ComponentType | React.ReactNode, + Comp: ComponentType | ReactNode, props: TProps -): React.JSX.Element | React.ReactNode { +): JSX.Element | ReactNode { return !Comp ? null : isReactComponent(Comp) ? : Comp; } @@ -172,7 +172,7 @@ function getTanstackTableState({ initialState, rowActions }: DataTableStorePa return state; } -function isReactComponent(component: unknown): component is React.ComponentType { +function isReactComponent(component: unknown): component is ComponentType { return typeof component === 'function'; } diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx index 274384b7..601f5ef7 100644 --- a/src/components/DatePicker/Calendar.tsx +++ b/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; + ref?: Ref; year: number; }; diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index 4ad93172..f824248a 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/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; - onMouseLeave?: React.MouseEventHandler; + onMouseEnter?: MouseEventHandler; + onMouseLeave?: MouseEventHandler; onSelection: (value: Date) => void; - ref?: React.Ref; + ref?: Ref; }; export const DatePicker = ({ onSelection, ref, ...props }: DatePickerProps) => { diff --git a/src/components/Dialog/DialogBody.tsx b/src/components/Dialog/DialogBody.tsx index fcce7e92..a7b34598 100644 --- a/src/components/Dialog/DialogBody.tsx +++ b/src/components/Dialog/DialogBody.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { DetailedHTMLProps, HTMLAttributes } from 'react'; import { cn } from '#utils'; @@ -6,7 +6,7 @@ export const DialogBody = ({ children, className, ...props -}: React.DetailedHTMLProps, HTMLDivElement>) => { +}: DetailedHTMLProps, HTMLDivElement>) => { return (
{children} diff --git a/src/components/Dialog/DialogContent.tsx b/src/components/Dialog/DialogContent.tsx index 44a44ac3..5fe88fd5 100644 --- a/src/components/Dialog/DialogContent.tsx +++ b/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) => { +export const DialogContent = ({ children, className, ...props }: ComponentProps) => { return ( diff --git a/src/components/Dialog/DialogDescription.tsx b/src/components/Dialog/DialogDescription.tsx index 8dc8afed..913af502 100644 --- a/src/components/Dialog/DialogDescription.tsx +++ b/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) => { +export const DialogDescription = ({ className, ...props }: ComponentProps) => { return ; }; diff --git a/src/components/Dialog/DialogFooter.tsx b/src/components/Dialog/DialogFooter.tsx index 1b870876..5b410c41 100644 --- a/src/components/Dialog/DialogFooter.tsx +++ b/src/components/Dialog/DialogFooter.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; +import type { HTMLAttributes } from 'react'; import { cn } from '#utils'; -export const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => ( +export const DialogFooter = ({ className, ...props }: HTMLAttributes) => (
); diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index 4d96c7da..200a581a 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; +import type { HTMLAttributes } from 'react'; import { cn } from '#utils'; -export const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => ( +export const DialogHeader = ({ className, ...props }: HTMLAttributes) => (
); diff --git a/src/components/Dialog/DialogOverlay.tsx b/src/components/Dialog/DialogOverlay.tsx index abb76153..2ae667d4 100644 --- a/src/components/Dialog/DialogOverlay.tsx +++ b/src/components/Dialog/DialogOverlay.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { Overlay } from '@radix-ui/react-dialog'; import { cn } from '#utils'; -export const DialogOverlay = ({ className, ...props }: React.ComponentProps) => { +export const DialogOverlay = ({ className, ...props }: ComponentProps) => { return ( ) => { +export const DialogTitle = ({ className, ...props }: ComponentProps) => { return ; }; diff --git a/src/components/DropdownButton/DropdownButton.tsx b/src/components/DropdownButton/DropdownButton.tsx index 136a022f..72e767c8 100644 --- a/src/components/DropdownButton/DropdownButton.tsx +++ b/src/components/DropdownButton/DropdownButton.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { ChevronDownIcon } from 'lucide-react'; import { cn } from '#utils'; -export const DropdownButton = ({ children, className, ref, ...props }: React.ComponentProps<'button'>) => { +export const DropdownButton = ({ children, className, ref, ...props }: ComponentProps<'button'>) => { return ( <button className={cn( diff --git a/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx b/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx index bb856b47..f06e3033 100644 --- a/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx +++ b/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { CheckIcon } from 'lucide-react'; @@ -11,7 +11,7 @@ export const DropdownMenuCheckboxItem = ({ className, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => { +}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => { return ( <DropdownMenuPrimitive.CheckboxItem checked={checked} diff --git a/src/components/DropdownMenu/DropdownMenuContent.tsx b/src/components/DropdownMenu/DropdownMenuContent.tsx index 8bd5f2f5..1d26b07e 100644 --- a/src/components/DropdownMenu/DropdownMenuContent.tsx +++ b/src/components/DropdownMenu/DropdownMenuContent.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { cn } from '#utils'; -export type DropdownMenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> & { +export type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> & { widthFull?: boolean; }; export const DropdownMenuContent = ({ diff --git a/src/components/DropdownMenu/DropdownMenuItem.tsx b/src/components/DropdownMenu/DropdownMenuItem.tsx index 854939dc..1de44419 100644 --- a/src/components/DropdownMenu/DropdownMenuItem.tsx +++ b/src/components/DropdownMenu/DropdownMenuItem.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; @@ -9,7 +9,7 @@ export const DropdownMenuItem = ({ inset, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { +}: ComponentProps<typeof DropdownMenuPrimitive.Item> & { inset?: boolean; }) => { return ( diff --git a/src/components/DropdownMenu/DropdownMenuLabel.tsx b/src/components/DropdownMenu/DropdownMenuLabel.tsx index 77ef0bda..8bf3772f 100644 --- a/src/components/DropdownMenu/DropdownMenuLabel.tsx +++ b/src/components/DropdownMenu/DropdownMenuLabel.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; @@ -9,7 +9,7 @@ export const DropdownMenuLabel = ({ inset, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { +}: ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean; }) => { return ( diff --git a/src/components/DropdownMenu/DropdownMenuRadioItem.tsx b/src/components/DropdownMenu/DropdownMenuRadioItem.tsx index d07ff3c2..55ee5350 100644 --- a/src/components/DropdownMenu/DropdownMenuRadioItem.tsx +++ b/src/components/DropdownMenu/DropdownMenuRadioItem.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { CheckIcon } from 'lucide-react'; @@ -10,7 +10,7 @@ export const DropdownMenuRadioItem = ({ className, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => { +}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => { return ( <DropdownMenuPrimitive.RadioItem className={cn( diff --git a/src/components/DropdownMenu/DropdownMenuSeparator.tsx b/src/components/DropdownMenu/DropdownMenuSeparator.tsx index d7afa7dd..67d7fe9a 100644 --- a/src/components/DropdownMenu/DropdownMenuSeparator.tsx +++ b/src/components/DropdownMenu/DropdownMenuSeparator.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; @@ -8,6 +8,6 @@ export const DropdownMenuSeparator = ({ className, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => { +}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) => { return <DropdownMenuPrimitive.Separator className={cn('bg-muted -mx-1 my-1 h-px', className)} ref={ref} {...props} />; }; diff --git a/src/components/DropdownMenu/DropdownMenuShortcut.tsx b/src/components/DropdownMenu/DropdownMenuShortcut.tsx index fa790eb8..018d3a66 100644 --- a/src/components/DropdownMenu/DropdownMenuShortcut.tsx +++ b/src/components/DropdownMenu/DropdownMenuShortcut.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; +import type { HTMLAttributes } from 'react'; import { cn } from '#utils'; -export const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => { +export const DropdownMenuShortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => { return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />; }; diff --git a/src/components/DropdownMenu/DropdownMenuSubContent.tsx b/src/components/DropdownMenu/DropdownMenuSubContent.tsx index c6bc0535..e89c20c4 100644 --- a/src/components/DropdownMenu/DropdownMenuSubContent.tsx +++ b/src/components/DropdownMenu/DropdownMenuSubContent.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; @@ -8,7 +8,7 @@ export const DropdownMenuSubContent = ({ className, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => { +}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => { return ( <DropdownMenuPrimitive.SubContent className={cn( diff --git a/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx b/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx index 145002a6..453209c5 100644 --- a/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx +++ b/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { ChevronRightIcon } from 'lucide-react'; @@ -11,7 +11,7 @@ export const DropdownMenuSubTrigger = ({ inset, ref, ...props -}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { +}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean; }) => { return ( diff --git a/src/components/Form/DynamicField.tsx b/src/components/Form/DynamicField.tsx index 3155f170..8806aa42 100644 --- a/src/components/Form/DynamicField.tsx +++ b/src/components/Form/DynamicField.tsx @@ -1,4 +1,5 @@ import { useEffect, useMemo, useState } from 'react'; +import type { Dispatch, SetStateAction } from 'react'; import * as React from 'react'; import type { DynamicFormField, FormDataType, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types'; @@ -13,8 +14,8 @@ export type DynamicFieldProps<TData extends FormDataType> = { field: DynamicFormField<TData>; name: string; readOnly?: boolean; - setErrors: React.Dispatch<React.SetStateAction<FormErrors<TData>>>; - setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>; + setErrors: Dispatch<SetStateAction<FormErrors<TData>>>; + setValues: Dispatch<SetStateAction<PartialFormDataType<TData>>>; values: PartialFormDataType<TData>; }; diff --git a/src/components/Form/ErrorMessage.tsx b/src/components/Form/ErrorMessage.tsx index 0f489604..ad8d61e1 100644 --- a/src/components/Form/ErrorMessage.tsx +++ b/src/components/Form/ErrorMessage.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import type { FC } from 'react'; import { CircleAlertIcon } from 'lucide-react'; import { cn } from '#utils'; -export const ErrorMessage: React.FC<{ className?: string; error?: null | string[]; hideIconOnWrap?: boolean }> = ({ +export const ErrorMessage: FC<{ className?: string; error?: null | string[]; hideIconOnWrap?: boolean }> = ({ className, error, hideIconOnWrap diff --git a/src/components/Form/FieldGroup/FieldGroupDescription.tsx b/src/components/Form/FieldGroup/FieldGroupDescription.tsx index 3bac0868..e80ad8d4 100644 --- a/src/components/Form/FieldGroup/FieldGroupDescription.tsx +++ b/src/components/Form/FieldGroup/FieldGroupDescription.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import type { FC, PointerEvent } from 'react'; import { CircleHelpIcon } from 'lucide-react'; @@ -7,9 +8,9 @@ import { Popover } from '#components'; /** Lets the pointer cross the gap between the icon and the description without closing it. */ const HOVER_CLOSE_DELAY_MS = 100; -const isMouse = (event: React.PointerEvent) => event.pointerType === 'mouse'; +const isMouse = (event: PointerEvent) => event.pointerType === 'mouse'; -export const FieldGroupDescription: React.FC<{ description?: null | string }> = ({ description }) => { +export const FieldGroupDescription: FC<{ description?: null | string }> = ({ description }) => { const [isOpen, setIsOpen] = React.useState(false); const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined); @@ -19,14 +20,14 @@ export const FieldGroupDescription: React.FC<{ description?: null | string }> = return null; } - const openOnHover = (event: React.PointerEvent) => { + const openOnHover = (event: PointerEvent) => { if (isMouse(event)) { clearTimeout(closeTimeoutRef.current); setIsOpen(true); } }; - const closeOnLeave = (event: React.PointerEvent) => { + const closeOnLeave = (event: PointerEvent) => { if (isMouse(event)) { closeTimeoutRef.current = setTimeout(() => setIsOpen(false), HOVER_CLOSE_DELAY_MS); } diff --git a/src/components/Form/FieldGroup/FieldGroupRoot.tsx b/src/components/Form/FieldGroup/FieldGroupRoot.tsx index c4291868..316c20b5 100644 --- a/src/components/Form/FieldGroup/FieldGroupRoot.tsx +++ b/src/components/Form/FieldGroup/FieldGroupRoot.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; +import type { FC, ReactNode } from 'react'; -export const FieldGroupRoot: React.FC<{ children: React.ReactNode; name: string }> = ({ children, name }) => ( +export const FieldGroupRoot: FC<{ children: ReactNode; name: string }> = ({ children, name }) => ( <div className="@container flex flex-col gap-3" data-field-group={name}> {children} </div> diff --git a/src/components/Form/FieldGroup/FieldGroupRow.tsx b/src/components/Form/FieldGroup/FieldGroupRow.tsx index 590efc47..bd847a6d 100644 --- a/src/components/Form/FieldGroup/FieldGroupRow.tsx +++ b/src/components/Form/FieldGroup/FieldGroupRow.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; +import type { FC, ReactNode } from 'react'; -export const FieldGroupRow: React.FC<{ children: React.ReactNode }> = ({ children }) => ( +export const FieldGroupRow: FC<{ children: ReactNode }> = ({ children }) => ( <div className="relative flex items-center gap-2">{children}</div> ); diff --git a/src/components/Form/FieldsComponent.tsx b/src/components/Form/FieldsComponent.tsx index 6cd11005..b72d7664 100644 --- a/src/components/Form/FieldsComponent.tsx +++ b/src/components/Form/FieldsComponent.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { Dispatch, SetStateAction } from 'react'; import type { FormDataType, FormFields, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types'; @@ -11,8 +11,8 @@ export type FieldsComponentProps<T extends FormDataType> = { errors: FormErrors<T>; fields: FormFields<T>; readOnly?: boolean; - setErrors: React.Dispatch<React.SetStateAction<FormErrors<T>>>; - setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<T>>>; + setErrors: Dispatch<SetStateAction<FormErrors<T>>>; + setValues: Dispatch<SetStateAction<PartialFormDataType<T>>>; values: PartialFormDataType<T>; }; diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index 0a856644..77912fce 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -1,6 +1,6 @@ /* eslint-disable perfectionist/sort-objects */ -import type React from 'react'; +import type { Dispatch, SetStateAction } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { filterObject, sleep } from '@douglasneuroinformatics/libjs'; @@ -629,7 +629,7 @@ export const WithSubscribe: StoryObj< const handleChange = useCallback( ( values: Partial<{ options: string; searchTerm: string }>, - setValues: React.Dispatch<React.SetStateAction<Partial<{ options: string; searchTerm: string }>>> + setValues: Dispatch<SetStateAction<Partial<{ options: string; searchTerm: string }>>> ) => { clearTimeout(timeoutRef.current); const lowerCaseSearch = values.searchTerm?.toLowerCase(); diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index 24221872..ae2472d4 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { Dispatch, FormEvent, ReactNode, SetStateAction } from 'react'; import { Fragment, useEffect, useState } from 'react'; import type { ZodErrorLike, ZodTypeLike } from '@douglasneuroinformatics/libjs'; @@ -32,8 +32,8 @@ type FormSubmitHandler<TData> = (data: NoInfer<TData>) => Promisable<FormSubmitR type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['_output'] = TSchema['_output']> = { [key: `data-${string}`]: unknown; additionalButtons?: { - left?: React.ReactNode; - right?: React.ReactNode; + left?: ReactNode; + right?: ReactNode; }; className?: string; content: FormContent<TData>; @@ -41,7 +41,7 @@ type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema[ resetBtn?: string; submitBtn?: string; }; - fieldsFooter?: React.ReactNode; + fieldsFooter?: ReactNode; id?: string; initialValues?: PartialNullableFormDataType<NoInfer<TData>>; onBeforeSubmit?: FormSubmitHandler<NoInfer<TData>> | null; @@ -56,7 +56,7 @@ type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema[ subscribe?: { onChange: ( values: PartialFormDataType<TData>, - setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>> + setValues: Dispatch<SetStateAction<PartialFormDataType<TData>>> ) => Promisable<void>; selector: (values: PartialFormDataType<TData>) => unknown; }; @@ -130,7 +130,7 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema[' } }; - const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { + const handleSubmit = async (event: FormEvent<HTMLFormElement>) => { event.preventDefault(); const result = await validationSchema.safeParseAsync(values); if (!result.success) { diff --git a/src/components/Form/NumberField/NumberFieldInput.tsx b/src/components/Form/NumberField/NumberFieldInput.tsx index c63da39f..33c3f4af 100644 --- a/src/components/Form/NumberField/NumberFieldInput.tsx +++ b/src/components/Form/NumberField/NumberFieldInput.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ChangeEventHandler } from 'react'; import { useEffect, useId, useRef, useState } from 'react'; import { parseNumber } from '@douglasneuroinformatics/libjs'; @@ -44,7 +44,7 @@ export const NumberFieldInput = ({ return NaN; }; - const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => { + const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => { const updatedValue = parseInputValue(event.target.value); if (Number.isNaN(updatedValue)) { return; diff --git a/src/components/Form/StaticField.tsx b/src/components/Form/StaticField.tsx index b42064c6..328451e4 100644 --- a/src/components/Form/StaticField.tsx +++ b/src/components/Form/StaticField.tsx @@ -1,4 +1,5 @@ import { useCallback } from 'react'; +import type { Dispatch, SetStateAction } from 'react'; import * as React from 'react'; import type { @@ -25,8 +26,8 @@ export type StaticFieldProps<TData extends FormDataType> = { field: NumberRecordFormField | RecordArrayFormField | ScalarFieldProps['field']; name: string; readOnly?: boolean; - setErrors: React.Dispatch<React.SetStateAction<FormErrors<TData>>>; - setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>; + setErrors: Dispatch<SetStateAction<FormErrors<TData>>>; + setValues: Dispatch<SetStateAction<PartialFormDataType<TData>>>; values: PartialFormDataType<TData>; }; diff --git a/src/components/HoverCard/HoverCardContent.tsx b/src/components/HoverCard/HoverCardContent.tsx index fa349695..7702aa87 100644 --- a/src/components/HoverCard/HoverCardContent.tsx +++ b/src/components/HoverCard/HoverCardContent.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Content } from '@radix-ui/react-hover-card'; @@ -10,7 +10,7 @@ export const HoverCardContent = ({ ref, sideOffset = 4, ...props -}: React.ComponentProps<typeof Content>) => { +}: ComponentProps<typeof Content>) => { return ( <Content align={align} diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index eb407a2c..1d03751b 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export type InputProps = React.ComponentProps<'input'>; +export type InputProps = ComponentProps<'input'>; export const Input = ({ className, ref, type, ...props }: InputProps) => { return ( diff --git a/src/components/InputGroup/InputGroup.tsx b/src/components/InputGroup/InputGroup.tsx index 68bcb498..55203014 100644 --- a/src/components/InputGroup/InputGroup.tsx +++ b/src/components/InputGroup/InputGroup.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -const InputGroup = ({ className, ...props }: React.ComponentProps<'div'>) => { +const InputGroup = ({ className, ...props }: ComponentProps<'div'>) => { return ( <div className={cn( diff --git a/src/components/InputGroup/InputGroupAddon.tsx b/src/components/InputGroup/InputGroupAddon.tsx index f860ba21..f7cfb40a 100644 --- a/src/components/InputGroup/InputGroupAddon.tsx +++ b/src/components/InputGroup/InputGroupAddon.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cva } from 'class-variance-authority'; import type { VariantProps } from 'class-variance-authority'; @@ -28,7 +28,7 @@ const InputGroupAddon = ({ align = 'inline-start', className, ...props -}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) => { +}: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) => { return ( <div className={cn(inputGroupAddonVariants({ align }), className)} diff --git a/src/components/InputGroup/InputGroupButton.tsx b/src/components/InputGroup/InputGroupButton.tsx index 276e8f92..73cf621c 100644 --- a/src/components/InputGroup/InputGroupButton.tsx +++ b/src/components/InputGroup/InputGroupButton.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cva } from 'class-variance-authority'; import type { VariantProps } from 'class-variance-authority'; @@ -34,7 +34,7 @@ const InputGroupButton = ({ type = 'button', variant = 'ghost', ...props -}: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>) => { +}: Omit<ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>) => { return ( <Button className={cn(inputGroupButtonVariants({ size }), className)} diff --git a/src/components/InputGroup/InputGroupInput.tsx b/src/components/InputGroup/InputGroupInput.tsx index 503d35f7..7fd9907f 100644 --- a/src/components/InputGroup/InputGroupInput.tsx +++ b/src/components/InputGroup/InputGroupInput.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; import { Input } from '../Input/Input.tsx'; -const InputGroupInput = ({ className, ...props }: React.ComponentProps<'input'>) => { +const InputGroupInput = ({ className, ...props }: ComponentProps<'input'>) => { return ( <Input className={cn( diff --git a/src/components/InputGroup/InputGroupText.tsx b/src/components/InputGroup/InputGroupText.tsx index e54a9000..8c40b504 100644 --- a/src/components/InputGroup/InputGroupText.tsx +++ b/src/components/InputGroup/InputGroupText.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -const InputGroupText = ({ className, ...props }: React.ComponentProps<'span'>) => { +const InputGroupText = ({ className, ...props }: ComponentProps<'span'>) => { return ( <span className={cn( diff --git a/src/components/InputGroup/InputGroupTextArea.tsx b/src/components/InputGroup/InputGroupTextArea.tsx index 53387e71..4dd21e34 100644 --- a/src/components/InputGroup/InputGroupTextArea.tsx +++ b/src/components/InputGroup/InputGroupTextArea.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; import { TextArea } from '../TextArea/TextArea.tsx'; -const InputGroupTextArea = ({ className, ...props }: React.ComponentProps<'textarea'>) => { +const InputGroupTextArea = ({ className, ...props }: ComponentProps<'textarea'>) => { return ( <TextArea className={cn( diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 17d3776c..5494738b 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as LabelPrimitive from '@radix-ui/react-label'; import { cva } from 'class-variance-authority'; @@ -14,6 +14,6 @@ export const Label = ({ className, ref, ...props -}: React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>) => { +}: ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>) => { return <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />; }; diff --git a/src/components/ListboxDropdown/ListboxDropdown.tsx b/src/components/ListboxDropdown/ListboxDropdown.tsx index 6dedcce2..4224f81c 100644 --- a/src/components/ListboxDropdown/ListboxDropdown.tsx +++ b/src/components/ListboxDropdown/ListboxDropdown.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { Dispatch, SetStateAction } from 'react'; import { cn } from '#utils'; @@ -19,7 +19,7 @@ export type ListboxDropdownProps<T extends ListboxDropdownOption> = { disabled?: boolean; options: T[]; selected: T[]; - setSelected: React.Dispatch<React.SetStateAction<T[]>>; + setSelected: Dispatch<SetStateAction<T[]>>; title: string; triggerClassName?: string; variant?: ButtonProps['variant']; diff --git a/src/components/OneTimePasswordInput/OneTimePasswordInput.spec.tsx b/src/components/OneTimePasswordInput/OneTimePasswordInput.spec.tsx index b5c91696..a7321189 100644 --- a/src/components/OneTimePasswordInput/OneTimePasswordInput.spec.tsx +++ b/src/components/OneTimePasswordInput/OneTimePasswordInput.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 } from 'vitest'; import { OneTimePasswordInput } from './OneTimePasswordInput.tsx'; -type Props = React.ComponentPropsWithoutRef<typeof OneTimePasswordInput>; +type Props = ComponentPropsWithoutRef<typeof OneTimePasswordInput>; const TEST_ID = 'OneTimePasswordInput'; -const TestOneTimePasswordInput: React.FC<Partial<Props>> = (props) => { +const TestOneTimePasswordInput: FC<Partial<Props>> = (props) => { return <OneTimePasswordInput data-testid={TEST_ID} {...(props as Props)} />; }; diff --git a/src/components/Popover/PopoverContent.tsx b/src/components/Popover/PopoverContent.tsx index f884529d..90ee2268 100644 --- a/src/components/Popover/PopoverContent.tsx +++ b/src/components/Popover/PopoverContent.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { ComponentRef, ReactNode, Ref } from 'react'; import { Content, Portal } from '@radix-ui/react-popover'; @@ -12,13 +12,13 @@ export type PopoverContentProps = { /** Whether the content should be automatically focused when opened (default = true) */ autofocus?: boolean; /** The content to display when the user opens the popover */ - children: React.ReactNode; + children: ReactNode; /** Additional CSS classes to add to the component, potentially overriding default styling */ className?: string; /** The distance in pixels from the viewport edges where collision detection should occur */ collisionPadding?: number; /** A ref to the underlying content element */ - ref?: React.Ref<React.ComponentRef<typeof Content>>; + ref?: Ref<ComponentRef<typeof Content>>; /** The distance in pixels from the anchor */ sideOffset?: number; }; diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx index 137d0edd..f855a6c7 100644 --- a/src/components/RadioGroup/RadioGroup.tsx +++ b/src/components/RadioGroup/RadioGroup.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { ComponentProps, FC } from 'react'; import { Root } from '@radix-ui/react-radio-group'; @@ -6,9 +6,9 @@ import { cn } from '#utils'; import { RadioGroupItem } from './RadioGroupItem.tsx'; -type RadioGroupProps = React.ComponentProps<typeof Root>; +type RadioGroupProps = ComponentProps<typeof Root>; -const RadioGroupRoot: React.FC<RadioGroupProps> = ({ className, ...props }) => { +const RadioGroupRoot: FC<RadioGroupProps> = ({ className, ...props }) => { return <Root className={cn('grid gap-2', className)} data-testid="radio-group" {...props} />; }; diff --git a/src/components/RadioGroup/RadioGroupItem.tsx b/src/components/RadioGroup/RadioGroupItem.tsx index f27da60f..16224122 100644 --- a/src/components/RadioGroup/RadioGroupItem.tsx +++ b/src/components/RadioGroup/RadioGroupItem.tsx @@ -1,11 +1,11 @@ -import type React from 'react'; +import type { ComponentProps, FC } from 'react'; import { Indicator, Item } from '@radix-ui/react-radio-group'; import { CircleIcon } from 'lucide-react'; import { cn } from '#utils'; -export const RadioGroupItem: React.FC<React.ComponentProps<typeof Item>> = ({ className, ...props }) => { +export const RadioGroupItem: FC<ComponentProps<typeof Item>> = ({ className, ...props }) => { return ( <Item className={cn( diff --git a/src/components/ScrollArea/ScrollArea.tsx b/src/components/ScrollArea/ScrollArea.tsx index 289c7e49..aa2a1285 100644 --- a/src/components/ScrollArea/ScrollArea.tsx +++ b/src/components/ScrollArea/ScrollArea.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Corner, Root, Scrollbar, Thumb, Viewport } from '@radix-ui/react-scroll-area'; import { cn } from '#utils'; -export const ScrollArea = ({ children, className, ...props }: React.ComponentProps<typeof Root>) => { +export const ScrollArea = ({ children, className, ...props }: ComponentProps<typeof Root>) => { return ( <Root className={cn('relative overflow-hidden', className)} data-testid="scroll-area" {...props}> <Viewport className="h-full w-full rounded-[inherit]">{children}</Viewport> diff --git a/src/components/Select/SelectContent.tsx b/src/components/Select/SelectContent.tsx index f9cbe657..05751bdb 100644 --- a/src/components/Select/SelectContent.tsx +++ b/src/components/Select/SelectContent.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; @@ -13,7 +13,7 @@ export const SelectContent = ({ position = 'popper', ref, ...props -}: React.ComponentProps<typeof SelectPrimitive.Content>) => { +}: ComponentProps<typeof SelectPrimitive.Content>) => { return ( <SelectPrimitive.Portal> <SelectPrimitive.Content diff --git a/src/components/Select/SelectItem.tsx b/src/components/Select/SelectItem.tsx index 56d6ac48..0b6694d9 100644 --- a/src/components/Select/SelectItem.tsx +++ b/src/components/Select/SelectItem.tsx @@ -1,16 +1,11 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; import { CheckIcon } from 'lucide-react'; import { cn } from '#utils'; -export const SelectItem = ({ - children, - className, - ref, - ...props -}: React.ComponentProps<typeof SelectPrimitive.Item>) => { +export const SelectItem = ({ children, className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Item>) => { return ( <SelectPrimitive.Item className={cn( diff --git a/src/components/Select/SelectLabel.tsx b/src/components/Select/SelectLabel.tsx index 43227e7f..6e856335 100644 --- a/src/components/Select/SelectLabel.tsx +++ b/src/components/Select/SelectLabel.tsx @@ -1,9 +1,9 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; import { cn } from '#utils'; -export const SelectLabel = ({ className, ref, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) => { +export const SelectLabel = ({ className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Label>) => { return <SelectPrimitive.Label className={cn('px-2 py-1.5 text-sm font-semibold', className)} ref={ref} {...props} />; }; diff --git a/src/components/Select/SelectScrollDownButton.tsx b/src/components/Select/SelectScrollDownButton.tsx index 89335e23..c386a09b 100644 --- a/src/components/Select/SelectScrollDownButton.tsx +++ b/src/components/Select/SelectScrollDownButton.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; import { ChevronDownIcon } from 'lucide-react'; @@ -9,7 +9,7 @@ export const SelectScrollDownButton = ({ className, ref, ...props -}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) => { +}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) => { return ( <SelectPrimitive.ScrollDownButton className={cn('flex cursor-default items-center justify-center py-1', className)} diff --git a/src/components/Select/SelectScrollUpButton.tsx b/src/components/Select/SelectScrollUpButton.tsx index 4e21c910..91015f3e 100644 --- a/src/components/Select/SelectScrollUpButton.tsx +++ b/src/components/Select/SelectScrollUpButton.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; import { ChevronUpIcon } from 'lucide-react'; @@ -9,7 +9,7 @@ export const SelectScrollUpButton = ({ className, ref, ...props -}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) => { +}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) => { return ( <SelectPrimitive.ScrollUpButton className={cn('flex cursor-default items-center justify-center py-1', className)} diff --git a/src/components/Select/SelectSeparator.tsx b/src/components/Select/SelectSeparator.tsx index 8d36a614..4a24924b 100644 --- a/src/components/Select/SelectSeparator.tsx +++ b/src/components/Select/SelectSeparator.tsx @@ -1,13 +1,9 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; import { cn } from '#utils'; -export const SelectSeparator = ({ - className, - ref, - ...props -}: React.ComponentProps<typeof SelectPrimitive.Separator>) => { +export const SelectSeparator = ({ className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Separator>) => { return <SelectPrimitive.Separator className={cn('bg-muted -mx-1 my-1 h-px', className)} ref={ref} {...props} />; }; diff --git a/src/components/Select/SelectTrigger.tsx b/src/components/Select/SelectTrigger.tsx index 6293b78d..4ded4eb8 100644 --- a/src/components/Select/SelectTrigger.tsx +++ b/src/components/Select/SelectTrigger.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; @@ -9,7 +9,7 @@ export const SelectTrigger = ({ className, ref, ...props -}: React.ComponentProps<typeof SelectPrimitive.Trigger>) => { +}: ComponentProps<typeof SelectPrimitive.Trigger>) => { return ( <SelectPrimitive.Trigger asChild className={className} ref={ref} {...props}> <DropdownButton>{children}</DropdownButton> diff --git a/src/components/Separator/Separator.tsx b/src/components/Separator/Separator.tsx index 06fd21eb..309094a5 100644 --- a/src/components/Separator/Separator.tsx +++ b/src/components/Separator/Separator.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as SeparatorPrimitive from '@radix-ui/react-separator'; @@ -10,7 +10,7 @@ export const Separator = ({ orientation = 'horizontal', ref, ...props -}: React.ComponentProps<typeof SeparatorPrimitive.Root>) => { +}: ComponentProps<typeof SeparatorPrimitive.Root>) => { return ( <SeparatorPrimitive.Root className={cn( diff --git a/src/components/Sheet/SheetBody.tsx b/src/components/Sheet/SheetBody.tsx index 0562d0a5..700102fc 100644 --- a/src/components/Sheet/SheetBody.tsx +++ b/src/components/Sheet/SheetBody.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { DetailedHTMLProps, HTMLAttributes } from 'react'; import { cn } from '#utils'; @@ -6,7 +6,7 @@ export const SheetBody = ({ children, className, ...props -}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => { +}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => { return ( <div className={cn('py-4', className)} {...props}> {children} diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx index 9ad248d8..ec1ce38d 100644 --- a/src/components/Sheet/SheetContent.tsx +++ b/src/components/Sheet/SheetContent.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 { cva } from 'class-variance-authority'; @@ -28,7 +28,7 @@ export const sheetVariants = cva( } ); -export type SheetContentProps = React.ComponentProps<typeof Content> & VariantProps<typeof sheetVariants>; +export type SheetContentProps = ComponentProps<typeof Content> & VariantProps<typeof sheetVariants>; export const SheetContent = ({ children, className, ref, side = 'right', ...props }: SheetContentProps) => { return ( diff --git a/src/components/Sheet/SheetDescription.tsx b/src/components/Sheet/SheetDescription.tsx index 5f6a94d4..c77e3ea8 100644 --- a/src/components/Sheet/SheetDescription.tsx +++ b/src/components/Sheet/SheetDescription.tsx @@ -1,9 +1,9 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Description } from '@radix-ui/react-dialog'; import { cn } from '#utils'; -export const SheetDescription = ({ className, ref, ...props }: React.ComponentProps<typeof Description>) => { +export const SheetDescription = ({ className, ref, ...props }: ComponentProps<typeof Description>) => { return <Description className={cn('text-muted-foreground text-sm', className)} ref={ref} {...props} />; }; diff --git a/src/components/Sheet/SheetFooter.tsx b/src/components/Sheet/SheetFooter.tsx index d633fbed..45032f2f 100644 --- a/src/components/Sheet/SheetFooter.tsx +++ b/src/components/Sheet/SheetFooter.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; +import type { HTMLAttributes } from 'react'; import { cn } from '#utils'; -export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( +export const SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => ( <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} /> ); diff --git a/src/components/Sheet/SheetHeader.tsx b/src/components/Sheet/SheetHeader.tsx index acd599f5..3804ed06 100644 --- a/src/components/Sheet/SheetHeader.tsx +++ b/src/components/Sheet/SheetHeader.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; +import type { HTMLAttributes } from 'react'; import { cn } from '#utils'; -export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( +export const SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => ( <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} /> ); diff --git a/src/components/Sheet/SheetOverlay.tsx b/src/components/Sheet/SheetOverlay.tsx index 8ea844d2..f8701a94 100644 --- a/src/components/Sheet/SheetOverlay.tsx +++ b/src/components/Sheet/SheetOverlay.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Overlay } from '@radix-ui/react-dialog'; import { cn } from '#utils'; -export const SheetOverlay = ({ className, ref, ...props }: React.ComponentProps<typeof Overlay>) => { +export const SheetOverlay = ({ className, ref, ...props }: ComponentProps<typeof Overlay>) => { return ( <Overlay className={cn( diff --git a/src/components/Sheet/SheetTitle.tsx b/src/components/Sheet/SheetTitle.tsx index c0934a52..bb038cfd 100644 --- a/src/components/Sheet/SheetTitle.tsx +++ b/src/components/Sheet/SheetTitle.tsx @@ -1,9 +1,9 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Title } from '@radix-ui/react-dialog'; import { cn } from '#utils'; -export const SheetTitle = ({ className, ref, ...props }: React.ComponentProps<typeof Title>) => { +export const SheetTitle = ({ className, ref, ...props }: ComponentProps<typeof Title>) => { return <Title className={cn('text-foreground text-lg font-semibold', className)} ref={ref} {...props} />; }; diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 00e2f701..95fa38fe 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'; import { cn } from '#utils'; -export const Slider = ({ className, disabled, ref, ...props }: React.ComponentProps<typeof Root>) => { +export const Slider = ({ className, disabled, ref, ...props }: ComponentProps<typeof Root>) => { return ( <Root className={cn('relative flex w-full touch-none items-center py-1.5 select-none', className)} diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx index e34e657e..a9b674cd 100644 --- a/src/components/Table/TableBody.tsx +++ b/src/components/Table/TableBody.tsx @@ -1,7 +1,7 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableBody = ({ className, ref, ...props }: React.ComponentProps<'tbody'>) => { +export const TableBody = ({ className, ref, ...props }: ComponentProps<'tbody'>) => { return <tbody className={cn('[&_tr:last-child]:border-0', className)} ref={ref} {...props} />; }; diff --git a/src/components/Table/TableCaption.tsx b/src/components/Table/TableCaption.tsx index 1138f229..d7bd11af 100644 --- a/src/components/Table/TableCaption.tsx +++ b/src/components/Table/TableCaption.tsx @@ -1,7 +1,7 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableCaption = ({ className, ref, ...props }: React.ComponentProps<'caption'>) => { +export const TableCaption = ({ className, ref, ...props }: ComponentProps<'caption'>) => { return <caption className={cn('text-muted-foreground mt-4 text-sm', className)} ref={ref} {...props} />; }; diff --git a/src/components/Table/TableCell.tsx b/src/components/Table/TableCell.tsx index d9374575..9a3ae808 100644 --- a/src/components/Table/TableCell.tsx +++ b/src/components/Table/TableCell.tsx @@ -1,7 +1,7 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableCell = ({ className, ref, ...props }: React.ComponentProps<'td'>) => { +export const TableCell = ({ className, ref, ...props }: ComponentProps<'td'>) => { return <td className={cn('px-6 py-3 align-middle [&:has([role=checkbox])]:pr-0', className)} ref={ref} {...props} />; }; diff --git a/src/components/Table/TableFooter.tsx b/src/components/Table/TableFooter.tsx index b3be6ac4..47207957 100644 --- a/src/components/Table/TableFooter.tsx +++ b/src/components/Table/TableFooter.tsx @@ -1,8 +1,8 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableFooter = ({ className, ref, ...props }: React.ComponentProps<'tfoot'>) => { +export const TableFooter = ({ className, ref, ...props }: ComponentProps<'tfoot'>) => { return ( <tfoot className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} ref={ref} {...props} /> ); diff --git a/src/components/Table/TableHead.tsx b/src/components/Table/TableHead.tsx index 029a3646..3af84cf2 100644 --- a/src/components/Table/TableHead.tsx +++ b/src/components/Table/TableHead.tsx @@ -1,8 +1,8 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableHead = ({ className, ref, ...props }: React.ComponentProps<'th'>) => { +export const TableHead = ({ className, ref, ...props }: ComponentProps<'th'>) => { return ( <th className={cn( diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx index 3c7c0c29..8342276f 100644 --- a/src/components/Table/TableHeader.tsx +++ b/src/components/Table/TableHeader.tsx @@ -1,7 +1,7 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableHeader = ({ className, ref, ...props }: React.ComponentProps<'thead'>) => { +export const TableHeader = ({ className, ref, ...props }: ComponentProps<'thead'>) => { return <thead className={cn('[&_tr]:border-b', className)} ref={ref} {...props} />; }; diff --git a/src/components/Table/TableRoot.tsx b/src/components/Table/TableRoot.tsx index c30536f2..90ddfda9 100644 --- a/src/components/Table/TableRoot.tsx +++ b/src/components/Table/TableRoot.tsx @@ -1,8 +1,8 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableRoot = ({ className, ref, ...props }: React.ComponentProps<'table'>) => { +export const TableRoot = ({ className, ref, ...props }: ComponentProps<'table'>) => { return ( <div className="relative w-full overflow-auto"> <table className={cn('w-full caption-bottom text-sm', className)} ref={ref} {...props} /> diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx index 0a8da8d2..b34bdd88 100644 --- a/src/components/Table/TableRow.tsx +++ b/src/components/Table/TableRow.tsx @@ -1,8 +1,8 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export const TableRow = ({ className, ref, ...props }: React.ComponentProps<'tr'>) => { +export const TableRow = ({ className, ref, ...props }: ComponentProps<'tr'>) => { return ( <tr className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)} diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/TabsContent.tsx index a3723b03..1a71e166 100644 --- a/src/components/Tabs/TabsContent.tsx +++ b/src/components/Tabs/TabsContent.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as TabsPrimitive from '@radix-ui/react-tabs'; import { cn } from '#utils'; -export const TabsContent = ({ className, ref, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) => { +export const TabsContent = ({ className, ref, ...props }: ComponentProps<typeof TabsPrimitive.Content>) => { return ( <TabsPrimitive.Content className={cn( diff --git a/src/components/Tabs/TabsList.tsx b/src/components/Tabs/TabsList.tsx index cb150856..9ef2d92e 100644 --- a/src/components/Tabs/TabsList.tsx +++ b/src/components/Tabs/TabsList.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as TabsPrimitive from '@radix-ui/react-tabs'; import { cn } from '#utils'; -export const TabsList = ({ className, ref, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) => { +export const TabsList = ({ className, ref, ...props }: ComponentProps<typeof TabsPrimitive.List>) => { return ( <TabsPrimitive.List className={cn( diff --git a/src/components/Tabs/TabsRoot.tsx b/src/components/Tabs/TabsRoot.tsx index 3c3c1dce..f283eae1 100644 --- a/src/components/Tabs/TabsRoot.tsx +++ b/src/components/Tabs/TabsRoot.tsx @@ -1,7 +1,7 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import { Root } from '@radix-ui/react-tabs'; -export const TabsRoot = ({ ref, ...props }: React.ComponentProps<typeof Root>) => { +export const TabsRoot = ({ ref, ...props }: ComponentProps<typeof Root>) => { return <Root ref={ref} {...props} />; }; diff --git a/src/components/Tabs/TabsTrigger.tsx b/src/components/Tabs/TabsTrigger.tsx index b45597ce..bf1c536f 100644 --- a/src/components/Tabs/TabsTrigger.tsx +++ b/src/components/Tabs/TabsTrigger.tsx @@ -1,10 +1,10 @@ -import type React from 'react'; +import type { ComponentProps } from 'react'; import * as TabsPrimitive from '@radix-ui/react-tabs'; import { cn } from '#utils'; -export const TabsTrigger = ({ className, ref, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) => { +export const TabsTrigger = ({ className, ref, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) => { return ( <TabsPrimitive.Trigger className={cn( diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx index 55129af1..14d1bf80 100644 --- a/src/components/TextArea/TextArea.tsx +++ b/src/components/TextArea/TextArea.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; +import type { ComponentProps } from 'react'; import { cn } from '#utils'; -export type TextAreaProps = React.ComponentProps<'textarea'>; +export type TextAreaProps = ComponentProps<'textarea'>; export const TextArea = ({ className, ref, ...props }: TextAreaProps) => { return ( diff --git a/src/components/Tooltip/TooltipContent.tsx b/src/components/Tooltip/TooltipContent.tsx index 2c396bab..d5bfe870 100644 --- a/src/components/Tooltip/TooltipContent.tsx +++ b/src/components/Tooltip/TooltipContent.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type { ComponentRef, ReactNode, Ref } from 'react'; import { Content } from '@radix-ui/react-tooltip'; @@ -8,13 +8,13 @@ export type TooltipContentProps = { /** The preferred alignment against the trigger, which may change when collisions occur. */ align?: 'center' | 'end' | 'start'; /** The content to display when the user hovers over the tooltip trigger */ - children: React.ReactNode; + children: ReactNode; /** Additional CSS classes to add to the component, potentially overriding default styling */ className?: string; /** The distance in pixels from the viewport edges where collision detection should occur */ collisionPadding?: number; /** A ref to the underlying content element */ - ref?: React.Ref<React.ComponentRef<typeof Content>>; + ref?: Ref<ComponentRef<typeof Content>>; /** The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. */ side?: 'bottom' | 'left' | 'right' | 'top'; /** The distance in pixels from the trigger */ diff --git a/src/components/Tooltip/TooltipRoot.tsx b/src/components/Tooltip/TooltipRoot.tsx index 4c13a2cf..90aa2701 100644 --- a/src/components/Tooltip/TooltipRoot.tsx +++ b/src/components/Tooltip/TooltipRoot.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import type { ReactNode } from 'react'; import { Provider, Root } from '@radix-ui/react-tooltip'; export type TooltipRootProps = { /** The tooltip trigger and content */ - children: React.ReactNode; + children: ReactNode; /** The duration from when the mouse enters a tooltip trigger until the tooltip opens. */ delayDuration?: number; /** Event handler called when the open state of the tooltip changes. */ diff --git a/src/components/Tooltip/TooltipTrigger.tsx b/src/components/Tooltip/TooltipTrigger.tsx index d8d9c49e..08224f1b 100644 --- a/src/components/Tooltip/TooltipTrigger.tsx +++ b/src/components/Tooltip/TooltipTrigger.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { ComponentRef, Ref } from 'react'; import { Trigger } from '@radix-ui/react-tooltip'; @@ -7,7 +7,7 @@ import { Button } from '../Button/Button.tsx'; import type { ButtonProps } from '../Button/Button.tsx'; export type TooltipTriggerProps = Omit<ButtonProps, 'asChild' | 'ref'> & { - ref?: React.Ref<React.ComponentRef<typeof Trigger>>; + ref?: Ref<ComponentRef<typeof Trigger>>; }; export const TooltipTrigger = ({ ref, variant = 'outline', ...props }: TooltipTriggerProps) => { diff --git a/src/providers/CoreProvider/CoreProvider.stories.tsx b/src/providers/CoreProvider/CoreProvider.stories.tsx index 5de1c7d1..14d287bc 100644 --- a/src/providers/CoreProvider/CoreProvider.stories.tsx +++ b/src/providers/CoreProvider/CoreProvider.stories.tsx @@ -1,4 +1,4 @@ -import type React from 'react'; +import type { MouseEvent } from 'react'; import { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react-vite'; @@ -33,7 +33,7 @@ const DestructiveActionsChildren = () => { const [description, setDescription] = useState(''); const destructiveAction = useDestructiveAction({ - action: (event: React.MouseEvent<HTMLButtonElement>) => { + action: (event: MouseEvent<HTMLButtonElement>) => { alert(`Delete at Event Time: ${event.timeStamp}`); }, description: description || undefined, diff --git a/src/providers/CoreProvider/CoreProvider.tsx b/src/providers/CoreProvider/CoreProvider.tsx index c4defa90..58d2f71b 100644 --- a/src/providers/CoreProvider/CoreProvider.tsx +++ b/src/providers/CoreProvider/CoreProvider.tsx @@ -1,9 +1,9 @@ -import type React from 'react'; +import type { FC, ReactNode } from 'react'; import { DestructiveActionDialog } from './DestructiveActionDialog.tsx'; import { NotificationHub } from './NotificationHub.tsx'; -export const CoreProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { +export const CoreProvider: FC<{ children: ReactNode }> = ({ children }) => { return ( <> <DestructiveActionDialog />