chore(eslint): enable react/jsx-uses-react and apply prettier formatting

eslint.config.mjs

@@ -45,6 +45,9 @@ export default typescriptEslint.config(
       ...eslintPluginReactHooks.configs.recommended.rules,
       'no-console': 'off',
       'no-debugger': 'off',
+      // the library compiles with the classic JSX transform (tsconfig "jsx": "react"),
+      // so the React import is required and must count as used
+      'react/jsx-uses-react': 'error',
       'unicorn/filename-case': 'off',
       'unicorn/no-array-for-each': 'off',
       'unicorn/no-null': 'off',
@@ -104,5 +107,5 @@ export default typescriptEslint.config(
       'unicorn/prefer-module': 'off',
     },
   },
-  eslintPluginPrettierRecommended,
+  eslintPluginPrettierRecommended
 )

packages/coreui-react/src/components/card/CCardImage.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CCardImageProps
-  extends ImgHTMLAttributes<HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement> {
+export interface CCardImageProps extends ImgHTMLAttributes<
+  HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

packages/coreui-react/src/components/carousel/CCarouselContext.ts

@@ -5,4 +5,4 @@ export interface CCarouselContextProps {
   setCustomInterval: (a: boolean | number) => void
 }
 
-export const CCarouselContext = createContext({} as CCarouselContextProps)
+export const CCarouselContext = createContext({} as CCarouselContextProps)

packages/coreui-react/src/components/chip-set/__tests__/CChipSet.spec.tsx

@@ -9,7 +9,7 @@ test('loads and displays CChipSet component', async () => {
     <CChipSet>
       <CChip value="a">A</CChip>
       <CChip value="b">B</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('chip-set')
@@ -20,7 +20,7 @@ test('CChipSet passes selectable down to its chips', async () => {
     <CChipSet selectable={true}>
       <CChip value="a">A</CChip>
       <CChip value="b">B</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   expect(getByText('A')).toHaveAttribute('aria-selected', 'false')
@@ -34,7 +34,7 @@ test('CChipSet allows multiple selected chips by default', async () => {
     <CChipSet selectable={true} onSelect={onSelect}>
       <CChip value="a">A</CChip>
       <CChip value="b">B</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   fireEvent.click(getByText('A'))
@@ -51,7 +51,7 @@ test('CChipSet deselects siblings in single selection mode', async () => {
     <CChipSet selectable={true} selectionMode="single" onSelect={onSelect}>
       <CChip value="a">A</CChip>
       <CChip value="b">B</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   fireEvent.click(getByText('A'))
@@ -67,7 +67,7 @@ test('CChipSet honors a controlled selected', async () => {
     <CChipSet selectable={true} selected={['b']}>
       <CChip value="a">A</CChip>
       <CChip value="b">B</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   expect(getByText('A')).not.toHaveClass('active')
@@ -78,7 +78,7 @@ test('CChipSet forwards filter so a selected chip shows a check icon', async ()
   const { getByText, container } = render(
     <CChipSet filter={true} selected={['a']}>
       <CChip value="a">A</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   expect(getByText('A')).toHaveClass('active')
@@ -91,7 +91,7 @@ test('CChipSet moves focus between chips with the keyboard', async () => {
       <CChip value="first">First</CChip>
       <CChip value="second">Second</CChip>
       <CChip value="third">Third</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   const first = getByText('First')
@@ -120,7 +120,7 @@ test('CChipSet mirrors arrow keys in RTL', async () => {
     <CChipSet selectable>
       <CChip value="first">First</CChip>
       <CChip value="second">Second</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   const first = getByText('First')
@@ -172,7 +172,7 @@ test('CChipSet fires onRemove so the parent can drop the chip', async () => {
 test('CChipSet with defaultChips removes the chip itself (uncontrolled list)', async () => {
   const onRemove = jest.fn()
   const { getByText, queryByText } = render(
-    <CChipSet removable defaultChips={['a', { value: 'b', label: 'B' }]} onRemove={onRemove} />,
+    <CChipSet removable defaultChips={['a', { value: 'b', label: 'B' }]} onRemove={onRemove} />
   )
 
   fireEvent.click(getByText('a').querySelector('.chip-remove') as Element)
@@ -186,8 +186,12 @@ test('CChipSet renders chips from the chips prop (strings and objects)', async (
   const { getByText, container } = render(
     <CChipSet
       selectable
-      chips={['react', { value: 'vue', label: 'Vue' }, { value: 'ng', label: 'Angular', selectable: false }]}
-    />,
+      chips={[
+        'react',
+        { value: 'vue', label: 'Vue' },
+        { value: 'ng', label: 'Angular', selectable: false },
+      ]}
+    />
   )
 
   expect(container.querySelectorAll('.chip')).toHaveLength(3)
@@ -203,7 +207,7 @@ test('CChipSet disables every chip', async () => {
   const { getByText } = render(
     <CChipSet disabled={true} removable={true}>
       <CChip value="a">A</CChip>
-    </CChipSet>,
+    </CChipSet>
   )
 
   expect(getByText('A')).toHaveClass('disabled')

packages/coreui-react/src/components/chip/__tests__/CChip.spec.tsx

@@ -55,7 +55,7 @@ test('CChip selectable', async () => {
   const { getByText } = render(
     <CChip selectable={true} onSelect={onSelect} onDeselect={onDeselect}>
       Selectable
-    </CChip>,
+    </CChip>
   )
   const chip = getByText('Selectable')
 
@@ -76,7 +76,7 @@ test('CChip filter shows a check icon while selected and implies selectable', as
   const { getByText, container } = render(
     <CChip filter={true} onSelect={onSelect}>
       Filter
-    </CChip>,
+    </CChip>
   )
   const chip = getByText('Filter')
 
@@ -96,7 +96,7 @@ test('CChip filter renders a custom selectedIcon', async () => {
   const { container } = render(
     <CChip filter={true} selected={true} selectedIcon={<span data-testid="custom-check" />}>
       Filter
-    </CChip>,
+    </CChip>
   )
 
   expect(container.querySelector('.chip-check [data-testid="custom-check"]')).toBeInTheDocument()
@@ -110,7 +110,7 @@ test('CChip delete triggers remove callback', async () => {
         First
       </CChip>
       <CChip removable={true}>Second</CChip>
-    </div>,
+    </div>
   )
 
   const first = getByText('First')

packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 
 const getContainer = (
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null,
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
 ) => {
   if (container) {
     return typeof container === 'function' ? container() : container

packages/coreui-react/src/components/form/CFormCheck.tsx

@@ -32,8 +32,7 @@ export type ButtonObject = {
 }
 
 export interface CFormCheckProps
-  extends CFormControlValidationProps,
-    InputHTMLAttributes<HTMLInputElement> {
+  extends CFormControlValidationProps, InputHTMLAttributes<HTMLInputElement> {
   /**
    * Create button-like checkboxes and radio buttons.
    */

packages/coreui-react/src/components/form/CFormInput.tsx

@@ -11,8 +11,7 @@ import classNames from 'classnames'
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
 export interface CFormInputProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */

packages/coreui-react/src/components/form/CFormSelect.tsx

@@ -12,8 +12,7 @@ type Option = {
 }
 
 export interface CFormSelectProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+  extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */

packages/coreui-react/src/components/form/CFormTextarea.tsx

@@ -5,8 +5,7 @@ import classNames from 'classnames'
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
 export interface CFormTextareaProps
-  extends CFormControlWrapperProps,
-    TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends CFormControlWrapperProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * A string of all className you want applied to the component.
    */

packages/coreui-react/src/components/form/CInputGroupText.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CInputGroupTextProps
-  extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+export interface CInputGroupTextProps extends LabelHTMLAttributes<
+  HTMLLabelElement | HTMLSpanElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

packages/coreui-react/src/components/form/__tests__/CChipInput.spec.tsx

@@ -53,7 +53,9 @@ test('CChipInput removes chip via remove button', async () => {
 
 test('CChipInput selectable chips', async () => {
   const onSelect = jest.fn()
-  const { container } = render(<CChipInput defaultValue={['React']} selectable onSelect={onSelect} />)
+  const { container } = render(
+    <CChipInput defaultValue={['React']} selectable onSelect={onSelect} />
+  )
 
   const chip = container.querySelector('.chip') as HTMLElement
   fireEvent.click(chip)
@@ -73,7 +75,7 @@ test('CChipInput always renders a hidden input for form submission', async () =>
 
 test('CChipInput single selection deselects siblings', async () => {
   const { container } = render(
-    <CChipInput defaultValue={['React', 'Vue']} selectable selectionMode="single" />,
+    <CChipInput defaultValue={['React', 'Vue']} selectable selectionMode="single" />
   )
 
   const chips = container.querySelectorAll<HTMLElement>('.chip')
@@ -117,7 +119,7 @@ test('CChipInput seeds initial chips from CChip children', () => {
     <CChipInput>
       <CChip value="React">React</CChip>
       <CChip value="Vue">Vue</CChip>
-    </CChipInput>,
+    </CChipInput>
   )
 
   expect(container.querySelectorAll('.chip')).toHaveLength(2)

packages/coreui-react/src/components/header/CHeaderBrand.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CHeaderBrandProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+export interface CHeaderBrandProps extends AnchorHTMLAttributes<
+  HTMLAnchorElement | HTMLSpanElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

packages/coreui-react/src/components/link/CLink.tsx

@@ -4,8 +4,10 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CLinkProps
-  extends Omit<AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'as'> {
+export interface CLinkProps extends Omit<
+  AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+  'as'
+> {
   /**
    * Toggle the active state for the component.
    */

packages/coreui-react/src/components/list-group/CListGroupItem.tsx

@@ -8,8 +8,9 @@ import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
-export interface CListGroupItemProps
-  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+export interface CListGroupItemProps extends AnchorHTMLAttributes<
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement
+> {
   /**
    * Toggle the active state for the component.
    */

packages/coreui-react/src/components/nav/CNav.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CNavProps
-  extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
+export interface CNavProps extends HTMLAttributes<
+  HTMLDivElement | HTMLUListElement | HTMLOListElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx

@@ -129,7 +129,14 @@ test('CPopover onShow and onHide', async () => {
   const onHide = jest.fn()
 
   render(
-    <CPopover content="content" title="title" trigger="click" placement="right" onShow={onShow} onHide={onHide}>
+    <CPopover
+      content="content"
+      title="title"
+      trigger="click"
+      placement="right"
+      onShow={onShow}
+      onHide={onHide}
+    >
       <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: container! }

packages/coreui-react/src/components/progress/CProgress.tsx

@@ -6,8 +6,7 @@ import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>,
-    CProgressBarProps {
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, CProgressBarProps {
   /**
    * A string of all className you want applied to the component.
    */

packages/coreui-react/src/components/search-button/__tests__/CSearchButton.spec.tsx

@@ -26,7 +26,7 @@ test('loads and displays CSearchButton component', async () => {
 
 test('CSearchButton customize', async () => {
   const { container } = render(
-    <CSearchButton className="bazinga" placeholder="Command palette" shortcut="meta+k,ctrl+k" />,
+    <CSearchButton className="bazinga" placeholder="Command palette" shortcut="meta+k,ctrl+k" />
   )
 
   expect(container).toMatchSnapshot()
@@ -56,7 +56,7 @@ test('CSearchButton ignores plain typing in editable fields', async () => {
     <>
       <input aria-label="Search input" />
       <CSearchButton onClick={onClick} shortcut="k" />
-    </>,
+    </>
   )
 
   fireEvent.keyDown(screen.getByLabelText('Search input'), { key: 'k' })