meta: fix React linter rules (#5317)

.eslintrc.js

@@ -182,6 +182,10 @@ module.exports = {
             name: 'JSX',
             message: 'Use h.JSX.Element, ComponentChild, or ComponentChildren from Preact',
           },
+          {
+            name: 'React',
+            message: 'Import the value instead of relying on global.React.',
+          },
         ],
         'import/extensions': ['error', 'ignorePackages'],
       },
@@ -207,52 +211,7 @@ module.exports = {
         'private/dev/*.js',
         'private/release/*.js',
         'private/remark-lint-uppy/*.js',
-
-        // Packages that have switched to ESM sources:
-        'packages/@uppy/audio/src/**/*.js',
-        'packages/@uppy/aws-s3-multipart/src/**/*.js',
-        'packages/@uppy/aws-s3/src/**/*.js',
-        'packages/@uppy/box/src/**/*.js',
-        'packages/@uppy/companion-client/src/**/*.js',
-        'packages/@uppy/compressor/src/**/*.js',
-        'packages/@uppy/core/src/**/*.js',
-        'packages/@uppy/dashboard/src/**/*.js',
-        'packages/@uppy/drag-drop/src/**/*.js',
-        'packages/@uppy/drop-target/src/**/*.js',
-        'packages/@uppy/dropbox/src/**/*.js',
-        'packages/@uppy/facebook/src/**/*.js',
-        'packages/@uppy/file-input/src/**/*.js',
-        'packages/@uppy/form/src/**/*.js',
-        'packages/@uppy/golden-retriever/src/**/*.js',
-        'packages/@uppy/google-drive/src/**/*.js',
-        'packages/@uppy/google-photos/src/**/*.js',
-        'packages/@uppy/image-editor/src/**/*.js',
-        'packages/@uppy/informer/src/**/*.js',
-        'packages/@uppy/instagram/src/**/*.js',
-        'packages/@uppy/locales/src/**/*.js',
-        'packages/@uppy/locales/template.js',
-        'packages/@uppy/onedrive/src/**/*.js',
-        'packages/@uppy/progress-bar/src/**/*.js',
-        'packages/@uppy/provider-views/src/**/*.js',
-        'packages/@uppy/react/src/**/*.js',
-        'packages/@uppy/redux-dev-tools/src/**/*.js',
-        'packages/@uppy/remote-sources/src/**/*.js',
-        'packages/@uppy/screen-capture/src/**/*.js',
-        'packages/@uppy/status-bar/src/**/*.js',
-        'packages/@uppy/store-default/src/**/*.js',
-        'packages/@uppy/store-redux/src/**/*.js',
-        'packages/@uppy/svelte/rollup.config.js',
-        'packages/@uppy/svelte/src/**/*.js',
-        'packages/@uppy/thumbnail-generator/src/**/*.js',
-        'packages/@uppy/transloadit/src/**/*.js',
-        'packages/@uppy/tus/src/**/*.js',
-        'packages/@uppy/unsplash/src/**/*.js',
-        'packages/@uppy/url/src/**/*.js',
-        'packages/@uppy/utils/src/**/*.js',
-        'packages/@uppy/vue/src/**/*.js',
-        'packages/@uppy/webcam/src/**/*.js',
-        'packages/@uppy/xhr-upload/src/**/*.js',
-        'packages/@uppy/zoom/src/**/*.js',
+        'packages/@uppy/!(companion|react-native)/**/*.js',
       ],
       parser: 'espree',
       parserOptions: {
@@ -287,6 +246,14 @@ module.exports = {
             name: 'require',
             message: 'Use import instead',
           },
+          {
+            name: 'JSX',
+            message: 'Use h.JSX.Element, ComponentChild, or ComponentChildren from Preact',
+          },
+          {
+            name: 'React',
+            message: 'Import the value instead of relying on global.React.',
+          },
         ],
         'import/extensions': ['error', 'ignorePackages'],
       },

e2e/cypress/integration/dashboard-tus.spec.ts

@@ -1,7 +1,7 @@
 import {
   runRemoteUrlImageUploadTest,
   runRemoteUnsplashUploadTest,
-} from './reusable-tests'
+} from './reusable-tests.ts'
 
 // NOTE: we have to use different files to upload per test
 // because we are uploading to https://tusd.tusdemo.net,

e2e/cypress/integration/dashboard-xhr.spec.ts

@@ -2,7 +2,7 @@ import {
   interceptCompanionUrlMetaRequest,
   runRemoteUrlImageUploadTest,
   runRemoteUnsplashUploadTest,
-} from './reusable-tests'
+} from './reusable-tests.ts'
 
 describe('Dashboard with XHR', () => {
   beforeEach(() => {

e2e/cypress/support/commands.ts

@@ -25,6 +25,6 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 //
 
-import { createFakeFile } from './createFakeFile'
+import { createFakeFile } from './createFakeFile.ts'
 
 Cypress.Commands.add('createFakeFile', createFakeFile)

e2e/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands.ts'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/@uppy/compressor/src/index.test.ts

@@ -16,8 +16,8 @@ CompressorPlugin.prototype.compress = async (blob: File) => {
   }
 }
 
-// eslint-disable-next-line no-restricted-globals
 const sampleImage = fs.readFileSync(
+  // eslint-disable-next-line no-restricted-globals
   path.join(__dirname, '../../../../e2e/cypress/fixtures/images/image.jpg'),
 )
 

packages/@uppy/core/src/Uppy.test.ts

@@ -24,8 +24,8 @@ import InvalidPluginWithoutType from './mocks/invalidPluginWithoutType.ts'
 import DeepFrozenStore from '../../../../e2e/cypress/fixtures/DeepFrozenStore.mjs'
 import type { State } from './Uppy.ts'
 
-// eslint-disable-next-line no-restricted-globals
 const sampleImage = fs.readFileSync(
+  // eslint-disable-next-line no-restricted-globals
   path.join(__dirname, '../../../../e2e/cypress/fixtures/images/image.jpg'),
 )
 

packages/@uppy/core/src/types.test.ts

@@ -1,8 +1,8 @@
 import { expectTypeOf, test } from 'vitest'
 
 import type { Body, InternalMetadata, Meta } from '@uppy/utils/lib/UppyFile'
-import Uppy, { type UnknownPlugin } from './Uppy'
-import UIPlugin, { type UIPluginOptions } from './UIPlugin'
+import Uppy, { type UnknownPlugin } from './Uppy.ts'
+import UIPlugin, { type UIPluginOptions } from './UIPlugin.ts'
 
 interface Opts extends UIPluginOptions {
   foo: string

packages/@uppy/react/README.md

@@ -16,7 +16,8 @@ a versatile file encoding service.
 
 <!-- eslint-disable react/state-in-constructor -->
 
-```js
+```jsx
+/** @jsx React */
 import React from 'react'
 import Uppy from '@uppy/core'
 import { DashboardModal } from '@uppy/react'
@@ -27,10 +28,11 @@ class Example extends React.Component {
   state = { open: false }
 
   render() {
+    const { open } = this.state
     return (
       <DashboardModal
         uppy={uppy}
-        open={this.state.open}
+        open={open}
         onRequestClose={this.handleClose}
       />
     )

packages/@uppy/react/src/Dashboard.ts

@@ -1,4 +1,5 @@
 import { createElement as h, Component } from 'react'
+import type React from 'react'
 import type { UnknownPlugin, Uppy } from '@uppy/core'
 import DashboardPlugin from '@uppy/dashboard'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'

packages/@uppy/react/src/DashboardModal.ts

@@ -1,4 +1,5 @@
 import { createElement as h, Component } from 'react'
+import type React from 'react'
 import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type { Uppy } from '@uppy/core'

packages/@uppy/react/src/useUppyEvent.test.ts

@@ -5,7 +5,7 @@ import { renderHook, act } from '@testing-library/react'
 
 import Uppy from '@uppy/core'
 import type { Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
-import { useUppyEvent } from '.'
+import { useUppyEvent } from './index.ts'
 
 describe('useUppyEvent', () => {
   it('should return and update value with the correct type', () => {

packages/@uppy/vue/src/dashboard-modal.ts

@@ -2,7 +2,7 @@ import { defineComponent, ref, watch, h, type PropType } from 'vue'
 import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
 import { Uppy } from '@uppy/core'
 import type { Meta, Body } from '../../utils/src/UppyFile.js'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 type DashboardModalOptions<M extends Meta, B extends Body> = Omit<
   DashboardOptions<M, B> & { inline: false },

packages/@uppy/vue/src/dashboard.ts

@@ -2,7 +2,7 @@ import { defineComponent, ref, h, type PropType } from 'vue'
 import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
 import type { Uppy } from '@uppy/core'
 import type { Meta, Body } from '../../utils/src/UppyFile.js'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 type DashboardInlineOptions<M extends Meta, B extends Body> = Omit<
   DashboardOptions<M, B> & { inline: true },

packages/@uppy/vue/src/drag-drop.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import DragDropPlugin, { type DragDropOptions } from '@uppy/drag-drop'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'DragDrop',

packages/@uppy/vue/src/file-input.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import FileInputPlugin, { type FileInputOptions } from '@uppy/file-input'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'FileInput',

packages/@uppy/vue/src/progress-bar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import ProgressBarPlugin, { type ProgressBarOptions } from '@uppy/progress-bar'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'ProgressBar',

packages/@uppy/vue/src/status-bar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import StatusBarPlugin, { type StatusBarOptions } from '@uppy/status-bar'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'StatusBar',