@uppy/provider-views: migrate to TS

packages/@uppy/provider-views/.npmignore

@@ -0,0 +1 @@
+tsconfig.*

packages/@uppy/provider-views/src/Breadcrumbs.tsx

@@ -26,15 +26,15 @@ const Breadcrumb = (props: BreadcrumbProps) => {
   )
 }
 
-type BreadcrumpsProps<M extends Meta, B extends Body> = {
+type BreadcrumbsProps<M extends Meta, B extends Body> = {
   getFolder: ProviderView<M, B>['getFolder']
   title: string
   breadcrumbsIcon: JSX.Element
   breadcrumbs: UnknownProviderPluginState['breadcrumbs']
 }
 
-export default function Breadcrumps<M extends Meta, B extends Body>(
-  props: BreadcrumpsProps<M, B>,
+export default function Breadcrumbs<M extends Meta, B extends Body>(
+  props: BreadcrumbsProps<M, B>,
 ): JSX.Element {
   const { getFolder, title, breadcrumbsIcon, breadcrumbs } = props
 

packages/@uppy/provider-views/src/Browser.tsx

@@ -23,7 +23,7 @@ type ListItemProps<M extends Meta, B extends Body> = {
   viewType: string
   isChecked: (file: any) => boolean
   toggleCheckbox: (event: Event, file: CompanionFile) => void
-  recordShiftKeyPress: (event: KeyboardEvent) => void
+  recordShiftKeyPress: (event: KeyboardEvent | MouseEvent) => void
   showTitles: boolean
   i18n: I18n
   validateRestrictions: Uppy<M, B>['validateRestrictions']
@@ -100,7 +100,7 @@ type BrowserProps<M extends Meta, B extends Body> = {
   showBreadcrumbs: boolean
   isChecked: (file: any) => boolean
   toggleCheckbox: (event: Event, file: CompanionFile) => void
-  recordShiftKeyPress: (event: KeyboardEvent) => void
+  recordShiftKeyPress: (event: KeyboardEvent | MouseEvent) => void
   handleScroll: (event: Event) => Promise<void>
   showTitles: boolean
   i18n: I18n

packages/@uppy/provider-views/src/Item/components/ListLi.tsx

@@ -17,7 +17,7 @@ type ListItemProps<M extends Meta, B extends Body> = {
   isCheckboxDisabled: boolean
   isChecked: boolean
   toggleCheckbox: (event: Event) => void
-  recordShiftKeyPress: (event: KeyboardEvent) => void
+  recordShiftKeyPress: (event: KeyboardEvent | MouseEvent) => void
   type: string
   id: string
   itemIconEl: any
@@ -58,7 +58,6 @@ export default function ListItem<M extends Meta, B extends Body>(
           className={`uppy-u-reset uppy-ProviderBrowserItem-checkbox ${isChecked ? 'uppy-ProviderBrowserItem-checkbox--is-checked' : ''}`}
           onChange={toggleCheckbox}
           onKeyDown={recordShiftKeyPress}
-          // @ts-expect-error this is fine onMouseDown too
           onMouseDown={recordShiftKeyPress}
           // for the <label/>
           name="listitem"

packages/@uppy/provider-views/src/Item/index.tsx

@@ -16,7 +16,7 @@ type ItemProps<M extends Meta, B extends Body> = {
   id: string
   title: string
   toggleCheckbox: (event: Event) => void
-  recordShiftKeyPress: (event: KeyboardEvent) => void
+  recordShiftKeyPress: (event: KeyboardEvent | MouseEvent) => void
   handleFolderClick?: () => void
   restrictionError?: RestrictionError<M, B> | null
   isCheckboxDisabled: boolean

packages/@uppy/provider-views/src/ProviderView/AuthView.tsx

@@ -67,7 +67,7 @@ function DefaultForm<M extends Meta, B extends Body>({
   const onSubmit = useCallback(
     (e: Event) => {
       e.preventDefault()
-      onAuth(undefined)
+      onAuth()
     },
     [onAuth],
   )
@@ -117,20 +117,12 @@ export default function AuthView<M extends Meta, B extends Body>(
     renderForm = defaultRenderForm,
   } = props
 
-  const pluginNameComponent = (
-    <span className="uppy-Provider-authTitleName">
-      {pluginName}
-      <br />
-    </span>
-  )
   return (
     <div className="uppy-Provider-auth">
       <div className="uppy-Provider-authIcon">{pluginIcon()}</div>
       <div className="uppy-Provider-authTitle">
         {i18n('authenticateWithTitle', {
-          // @ts-expect-error how it possible to pass `Element` to `i18n`?
-          // It seems like like that shouldn't work.
-          pluginName: pluginNameComponent,
+          pluginName,
         })}
       </div>
 

packages/@uppy/provider-views/src/ProviderView/Header.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/destructuring-assignment */
-import { h, Fragment } from 'preact'
+import { h } from 'preact'
 import type { I18n } from '@uppy/utils/lib/Translator'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type { UnknownProviderPluginState } from '@uppy/core/lib/Uppy.ts'
@@ -22,7 +22,7 @@ export default function Header<M extends Meta, B extends Body>(
   props: HeaderProps<M, B>,
 ): JSX.Element {
   return (
-    <Fragment>
+    <>
       {props.showBreadcrumbs && (
         <Breadcrumbs
           getFolder={props.getFolder}
@@ -32,6 +32,6 @@ export default function Header<M extends Meta, B extends Body>(
         />
       )}
       <User logout={props.logout} username={props.username} i18n={props.i18n} />
-    </Fragment>
+    </>
   )
 }

packages/@uppy/provider-views/src/ProviderView/ProviderView.tsx

@@ -337,7 +337,7 @@ export default class ProviderView<M extends Meta, B extends Body> extends View<
     this.plugin.setPluginState({ filterInput: '' })
   }
 
-  async handleAuth(authFormData: unknown): Promise<void> {
+  async handleAuth(authFormData?: unknown): Promise<void> {
     try {
       await this.#withAbort(async (signal) => {
         this.setLoading(true)

packages/@uppy/provider-views/src/ProviderView/User.tsx

@@ -1,4 +1,4 @@
-import { h, Fragment } from 'preact'
+import { h } from 'preact'
 
 type UserProps = {
   i18n: (phrase: string) => string
@@ -12,7 +12,7 @@ export default function User({
   username,
 }: UserProps): JSX.Element {
   return (
-    <Fragment>
+    <>
       <span className="uppy-ProviderBrowser-user" key="username">
         {username}
       </span>
@@ -24,6 +24,6 @@ export default function User({
       >
         {i18n('logOut')}
       </button>
-    </Fragment>
+    </>
   )
 }

packages/@uppy/provider-views/src/SearchFilterInput.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import { h, Fragment } from 'preact'
+import { h } from 'preact'
 import { useEffect, useState, useCallback } from 'preact/hooks'
 import { nanoid } from 'nanoid/non-secure'
 
@@ -72,7 +72,7 @@ export default function SearchFilterInput(props: Props): JSX.Element {
   }, [form, validateAndSearch])
 
   return (
-    <Fragment>
+    <>
       <input
         className={`uppy-u-reset ${inputClassName}`}
         type="search"
@@ -122,6 +122,6 @@ export default function SearchFilterInput(props: Props): JSX.Element {
           {buttonLabel}
         </button>
       )}
-    </Fragment>
+    </>
   )
 }

packages/@uppy/provider-views/src/View.ts

@@ -130,8 +130,10 @@ export default class View<
 
     uppy.log(error.toString())
 
-    // @ts-expect-error AuthError lives in @uppy/companion-client
-    if (error.isAuthError || error.cause?.name === 'AbortError') {
+    if (
+      (error as any).isAuthError ||
+      (error.cause as Error)?.name === 'AbortError'
+    ) {
       // authError just means we're not authenticated, don't show to user
       // AbortError means the user has clicked "cancel" on an operation
       return
@@ -213,7 +215,7 @@ export default class View<
     })
   }
 
-  recordShiftKeyPress = (e: KeyboardEvent): void => {
+  recordShiftKeyPress = (e: KeyboardEvent | MouseEvent): void => {
     this.isShiftKeyPressed = e.shiftKey
   }
 

packages/@uppy/utils/src/UppyFile.ts

@@ -1,4 +1,3 @@
-import type { CompanionFile } from './CompanionFile'
 import type { FileProgress } from './FileProgress'
 
 export type Meta = Record<string, unknown>