@uppy/progress-bar: refactor to TypeScript

packages/@uppy/file-input/.npmignore

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

packages/@uppy/file-input/src/FileInput.jsx → packages/@uppy/file-input/src/FileInput.tsx

@@ -1,14 +1,40 @@
-import { UIPlugin } from '@uppy/core'
+import { h, type ComponentChild } from 'preact'
+import type { CSSProperties } from 'preact/compat'
+
+import { UIPlugin, Uppy, type UIPluginOptions } from '@uppy/core'
 import toArray from '@uppy/utils/lib/toArray'
-import { h } from 'preact'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
-import locale from './locale.js'
+import locale from './locale.ts'
+
+
+interface FileInputOptions extends UIPluginOptions {
+  target: HTMLElement | string | null
+  pretty?: boolean,
+  inputName?: string,
+}
+interface FileInputState {
+  audioReady: boolean
+  recordingLengthSeconds: number
+  hasAudio: boolean
+  cameraError: null
+  audioSources: MediaDeviceInfo[]
+  currentDeviceId?: null | string | MediaStreamTrack
+  isRecording: boolean
+  showAudioSourceDropdown: boolean
+  [id: string]: unknown
+}
 
-export default  class FileInput extends UIPlugin {
+export default  class FileInput<M extends Meta, B extends Body> extends
+  UIPlugin<FileInputOptions, M, B, FileInputState> {
   static VERSION = packageJson.version
 
-  constructor (uppy, opts) {
+  input: HTMLInputElement | null
+
+  constructor (uppy: Uppy<M, B>, opts?: FileInputOptions) {
     super(uppy, opts)
     this.id = this.opts.id || 'FileInput'
     this.title = 'File Input'
@@ -33,7 +59,7 @@ export default  class FileInput extends UIPlugin {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  addFiles (files) {
+  addFiles (files: File[]): void {
     const descriptors = files.map((file) => ({
       source: this.id,
       name: file.name,
@@ -48,9 +74,9 @@ export default  class FileInput extends UIPlugin {
     }
   }
 
-  handleInputChange (event) {
+  handleInputChange (event: Parameters<React.ChangeEventHandler<HTMLInputElement>>[0]): void {
     this.uppy.log('[FileInput] Something selected through input...')
-    const files = toArray(event.target.files)
+    const files = toArray((event.target as HTMLInputElement | null)?.files ?? [])
     this.addFiles(files)
 
     // We clear the input after a file is selected, because otherwise
@@ -59,16 +85,17 @@ export default  class FileInput extends UIPlugin {
     // ___Why not use value="" on <input/> instead?
     //    Because if we use that method of clearing the input,
     //    Chrome will not trigger change if we drop the same file twice (Issue #768).
+    // @ts-expect-error yes
     event.target.value = null // eslint-disable-line no-param-reassign
   }
 
-  handleClick () {
-    this.input.click()
+  handleClick (): void {
+    this.input?.click()
   }
 
-  render () {
+  render (): ComponentChild {
     /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
-    const hiddenInputStyle = {
+    const hiddenInputStyle: CSSProperties = {
       width: '0.1px',
       height: '0.1px',
       opacity: 0,
@@ -78,13 +105,13 @@ export default  class FileInput extends UIPlugin {
     }
 
     const { restrictions } = this.uppy.opts
-    const accept = restrictions.allowedFileTypes ? restrictions.allowedFileTypes.join(',') : null
+    const accept = restrictions.allowedFileTypes ? restrictions.allowedFileTypes.join(',') : undefined
 
     return (
       <div className="uppy-FileInput-container">
         <input
           className="uppy-FileInput-input"
-          style={this.opts.pretty && hiddenInputStyle}
+          style={this.opts.pretty ? hiddenInputStyle : undefined}
           type="file"
           name={this.opts.inputName}
           onChange={this.handleInputChange}
@@ -106,14 +133,14 @@ export default  class FileInput extends UIPlugin {
     )
   }
 
-  install () {
+  install (): void {
     const { target } = this.opts
     if (target) {
       this.mount(target, this)
     }
   }
 
-  uninstall () {
+  uninstall (): void {
     this.unmount()
   }
 }

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

@@ -0,0 +1 @@
+export { default } from './FileInput.tsx'

packages/@uppy/file-input/tsconfig.build.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "outDir": "./lib",
+    "paths": {
+      "@uppy/utils/lib/*": [
+        "../utils/src/*"
+      ],
+      "@uppy/core": [
+        "../core/src/index.js"
+      ],
+      "@uppy/core/lib/*": [
+        "../core/src/*"
+      ]
+    },
+    "resolveJsonModule": false,
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src/**/*.*"
+  ],
+  "exclude": [
+    "./src/**/*.test.ts"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}

packages/@uppy/file-input/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true,
+    "paths": {
+      "@uppy/utils/lib/*": [
+        "../utils/src/*"
+      ],
+      "@uppy/core": [
+        "../core/src/index.js"
+      ],
+      "@uppy/core/lib/*": [
+        "../core/src/*"
+      ]
+    }
+  },
+  "include": [
+    "./package.json",
+    "./src/**/*.*"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}

packages/@uppy/progress-bar/.npmignore

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

packages/@uppy/progress-bar/src/ProgressBar.jsx → packages/@uppy/progress-bar/src/ProgressBar.tsx

@@ -1,16 +1,38 @@
-import { h } from 'preact'
-import { UIPlugin } from '@uppy/core'
+import { h, type ComponentChild } from 'preact'
+import { UIPlugin, Uppy, type UIPluginOptions } from '@uppy/core'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 
+
+interface ProgressBarOptions extends UIPluginOptions {
+  target?: HTMLElement | string
+  hideAfterFinish?: boolean,
+  fixed?: boolean,
+}
+interface ProgressBarState {
+  audioReady: boolean
+  recordingLengthSeconds: number
+  hasAudio: boolean
+  cameraError: null
+  audioSources: MediaDeviceInfo[]
+  currentDeviceId?: null | string | MediaStreamTrack
+  isRecording: boolean
+  showAudioSourceDropdown: boolean
+  [id: string]: unknown
+}
+
 /**
  * Progress bar
  *
  */
-export default class ProgressBar extends UIPlugin {
+export default class ProgressBar<M extends Meta, B extends Body>
+  extends UIPlugin<ProgressBarOptions, M, B, ProgressBarState> {
   static VERSION = packageJson.version
 
-  constructor (uppy, opts) {
+  constructor (uppy: Uppy<M, B>, opts?: ProgressBarOptions) {
     super(uppy, opts)
     this.id = this.opts.id || 'ProgressBar'
     this.title = 'Progress Bar'
@@ -29,7 +51,7 @@ export default class ProgressBar extends UIPlugin {
     this.render = this.render.bind(this)
   }
 
-  render (state) {
+  render (state: ProgressBarState): ComponentChild {
     const progress = state.totalProgress || 0
     // before starting and after finish should be hidden if specified in the options
     const isHidden = (progress === 0 || progress === 100) && this.opts.hideAfterFinish
@@ -45,14 +67,14 @@ export default class ProgressBar extends UIPlugin {
     )
   }
 
-  install () {
+  install (): void {
     const { target } = this.opts
     if (target) {
       this.mount(target, this)
     }
   }
 
-  uninstall () {
+  uninstall (): void {
     this.unmount()
   }
 }

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

@@ -0,0 +1 @@
+export { default } from './ProgressBar.tsx'

packages/@uppy/progress-bar/tsconfig.build.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "outDir": "./lib",
+    "paths": {
+      "@uppy/utils/lib/*": [
+        "../utils/src/*"
+      ],
+      "@uppy/core": [
+        "../core/src/index.js"
+      ],
+      "@uppy/core/lib/*": [
+        "../core/src/*"
+      ]
+    },
+    "resolveJsonModule": false,
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src/**/*.*"
+  ],
+  "exclude": [
+    "./src/**/*.test.ts"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}

packages/@uppy/progress-bar/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true,
+    "paths": {
+      "@uppy/utils/lib/*": [
+        "../utils/src/*"
+      ],
+      "@uppy/core": [
+        "../core/src/index.js"
+      ],
+      "@uppy/core/lib/*": [
+        "../core/src/*"
+      ]
+    }
+  },
+  "include": [
+    "./package.json",
+    "./src/**/*.*"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}