@uppy/progress-bar: refactor to TypeScript (#4921)

* port progress-bar

* port fileinput to ts

* review fixes

* revert changes in `@uppy/file-input`

* Apply suggestions from code review

Co-authored-by: Antoine du Hamel <antoine@transloadit.com>

* Apply suggestions from code review

Co-authored-by: Antoine du Hamel <antoine@transloadit.com>

* fix

* prettier

* Update packages/@uppy/progress-bar/src/ProgressBar.tsx

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

---------

Co-authored-by: Merlijn Vos <merlijn@soverin.net>
Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

packages/@uppy/progress-bar/.npmignore

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

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

@@ -1,58 +0,0 @@
-import { h } from 'preact'
-import { UIPlugin } from '@uppy/core'
-
-import packageJson from '../package.json'
-
-/**
- * Progress bar
- *
- */
-export default class ProgressBar extends UIPlugin {
-  static VERSION = packageJson.version
-
-  constructor (uppy, opts) {
-    super(uppy, opts)
-    this.id = this.opts.id || 'ProgressBar'
-    this.title = 'Progress Bar'
-    this.type = 'progressindicator'
-
-    // set default options, must kept in sync with @uppy/react/src/ProgressBar.js
-    const defaultOptions = {
-      target: 'body',
-      fixed: false,
-      hideAfterFinish: true,
-    }
-
-    // merge default options with the ones set by user
-    this.opts = { ...defaultOptions, ...opts }
-
-    this.render = this.render.bind(this)
-  }
-
-  render (state) {
-    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
-    return (
-      <div
-        className="uppy uppy-ProgressBar"
-        style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}
-        aria-hidden={isHidden}
-      >
-        <div className="uppy-ProgressBar-inner" style={{ width: `${progress}%` }} />
-        <div className="uppy-ProgressBar-percentage">{progress}</div>
-      </div>
-    )
-  }
-
-  install () {
-    const { target } = this.opts
-    if (target) {
-      this.mount(target, this)
-    }
-  }
-
-  uninstall () {
-    this.unmount()
-  }
-}

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

@@ -0,0 +1,72 @@
+import { h, type ComponentChild } from 'preact'
+import { UIPlugin, Uppy, type UIPluginOptions, type State } from '@uppy/core'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
+import type { DefinePluginOpts } from '@uppy/core/lib/BasePlugin.js'
+
+// 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'
+
+export interface ProgressBarOptions extends UIPluginOptions {
+  hideAfterFinish?: boolean
+  fixed?: boolean
+}
+// set default options, must kept in sync with @uppy/react/src/ProgressBar.js
+const defaultOptions = {
+  target: 'body',
+  fixed: false,
+  hideAfterFinish: true,
+}
+
+type Opts = DefinePluginOpts<ProgressBarOptions, keyof typeof defaultOptions>
+
+/**
+ * Progress bar
+ *
+ */
+export default class ProgressBar<
+  M extends Meta,
+  B extends Body,
+> extends UIPlugin<Opts, M, B> {
+  static VERSION = packageJson.version
+
+  constructor(uppy: Uppy<M, B>, opts?: ProgressBarOptions) {
+    super(uppy, { ...defaultOptions, ...opts })
+    this.id = this.opts.id || 'ProgressBar'
+    this.title = 'Progress Bar'
+    this.type = 'progressindicator'
+
+    this.render = this.render.bind(this)
+  }
+
+  render(state: State<M, B>): 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
+    return (
+      <div
+        className="uppy uppy-ProgressBar"
+        style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}
+        aria-hidden={isHidden}
+      >
+        <div
+          className="uppy-ProgressBar-inner"
+          style={{ width: `${progress}%` }}
+        />
+        <div className="uppy-ProgressBar-percentage">{progress}</div>
+      </div>
+    )
+  }
+
+  install(): void {
+    const { target } = this.opts
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+
+  uninstall(): void {
+    this.unmount()
+  }
+}

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

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

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,25 @@
+{
+  "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,21 @@
+{
+  "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/status-bar/src/StatusBar.tsx

@@ -1,3 +1,4 @@
+import type { ComponentChild } from 'preact'
 import type { Body, Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
 import type { Uppy, State } from '@uppy/core/src/Uppy.ts'
 import type { DefinePluginOpts } from '@uppy/core/lib/BasePlugin.ts'
@@ -151,7 +152,7 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
     }) as () => undefined)
   }
 
-  render(state: State<M, B>): JSX.Element {
+  render(state: State<M, B>): ComponentChild {
     const {
       capabilities,
       files,