@uppy/react: remove prop-types dependency

[aduh95]

We can rely on TS to validate the props, it simplifies the code and remove the necessity to keep default value in sync between @uppy/react components and Uppy UI plugins.

[github-actions]

Diff output files

diff --git a/packages/@uppy/react/lib/Dashboard.js b/packages/@uppy/react/lib/Dashboard.js
index ea4a4a5..04517e8 100644
--- a/packages/@uppy/react/lib/Dashboard.js
+++ b/packages/@uppy/react/lib/Dashboard.js
@@ -1,9 +1,7 @@
 import DashboardPlugin from "@uppy/dashboard";
-import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import getHTMLProps from "./getHTMLProps.js";
 import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
-import { cssSize, locale, metaFields, plugins, uppy as uppyPropType } from "./propTypes.js";
 class Dashboard extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -58,22 +56,4 @@ class Dashboard extends Component {
     });
   }
 }
-Dashboard.propsTypes = {
-  uppy: uppyPropType,
-  disableInformer: PropTypes.bool,
-  disableStatusBar: PropTypes.bool,
-  disableThumbnailGenerator: PropTypes.bool,
-  height: cssSize,
-  hideProgressAfterFinish: PropTypes.bool,
-  hideUploadButton: PropTypes.bool,
-  locale,
-  metaFields,
-  note: PropTypes.string,
-  plugins,
-  proudlyDisplayPoweredByUppy: PropTypes.bool,
-  showProgressDetails: PropTypes.bool,
-  width: cssSize,
-  thumbnailType: PropTypes.string,
-  thumbnailWidth: PropTypes.number,
-};
 export default Dashboard;
diff --git a/packages/@uppy/react/lib/DashboardModal.js b/packages/@uppy/react/lib/DashboardModal.js
index 6d18922..f335860 100644
--- a/packages/@uppy/react/lib/DashboardModal.js
+++ b/packages/@uppy/react/lib/DashboardModal.js
@@ -1,9 +1,7 @@
 import DashboardPlugin from "@uppy/dashboard";
-import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import getHTMLProps from "./getHTMLProps.js";
 import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
-import { cssSize, locale, metaFields, plugins, uppy as uppyPropType } from "./propTypes.js";
 class DashboardModal extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -78,79 +76,8 @@ class DashboardModal extends Component {
     });
   }
 }
-DashboardModal.propTypes = {
-  uppy: uppyPropType.isRequired,
-  target: typeof window !== "undefined" ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any,
-  open: PropTypes.bool,
-  onRequestClose: PropTypes.func,
-  closeModalOnClickOutside: PropTypes.bool,
-  disablePageScrollWhenModalOpen: PropTypes.bool,
-  plugins,
-  width: cssSize,
-  height: cssSize,
-  showProgressDetails: PropTypes.bool,
-  note: PropTypes.string,
-  metaFields,
-  proudlyDisplayPoweredByUppy: PropTypes.bool,
-  autoOpenFileEditor: PropTypes.bool,
-  animateOpenClose: PropTypes.bool,
-  browserBackButtonClose: PropTypes.bool,
-  closeAfterFinish: PropTypes.bool,
-  disableStatusBar: PropTypes.bool,
-  disableInformer: PropTypes.bool,
-  disableThumbnailGenerator: PropTypes.bool,
-  disableLocalFiles: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hideCancelButton: PropTypes.bool,
-  hidePauseResumeButton: PropTypes.bool,
-  hideProgressAfterFinish: PropTypes.bool,
-  hideRetryButton: PropTypes.bool,
-  hideUploadButton: PropTypes.bool,
-  showLinkToFileUploadResult: PropTypes.bool,
-  showRemoveButtonAfterComplete: PropTypes.bool,
-  showSelectedFiles: PropTypes.bool,
-  waitForThumbnailsBeforeUpload: PropTypes.bool,
-  fileManagerSelectionType: PropTypes.string,
-  theme: PropTypes.string,
-  thumbnailType: PropTypes.string,
-  thumbnailWidth: PropTypes.number,
-  locale,
-};
 DashboardModal.defaultProps = {
-  metaFields: [],
-  plugins: [],
-  width: 750,
-  height: 550,
-  thumbnailWidth: 280,
-  thumbnailType: "image/jpeg",
-  waitForThumbnailsBeforeUpload: false,
-  showLinkToFileUploadResult: false,
-  showProgressDetails: false,
-  hideUploadButton: false,
-  hideCancelButton: false,
-  hideRetryButton: false,
-  hidePauseResumeButton: false,
-  hideProgressAfterFinish: false,
-  note: null,
-  closeModalOnClickOutside: false,
-  closeAfterFinish: false,
-  disableStatusBar: false,
-  disableInformer: false,
-  disableThumbnailGenerator: false,
-  disablePageScrollWhenModalOpen: true,
-  animateOpenClose: true,
-  fileManagerSelectionType: "files",
-  proudlyDisplayPoweredByUppy: true,
-  showSelectedFiles: true,
-  showRemoveButtonAfterComplete: false,
-  browserBackButtonClose: false,
-  theme: "light",
-  autoOpenFileEditor: false,
-  disabled: false,
-  disableLocalFiles: false,
   open: undefined,
-  target: undefined,
-  locale: null,
   onRequestClose: undefined,
 };
 export default DashboardModal;
diff --git a/packages/@uppy/react/lib/DragDrop.js b/packages/@uppy/react/lib/DragDrop.js
index bda3b42..4bfa1a2 100644
--- a/packages/@uppy/react/lib/DragDrop.js
+++ b/packages/@uppy/react/lib/DragDrop.js
@@ -1,9 +1,7 @@
 import DragDropPlugin from "@uppy/drag-drop";
-import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import getHTMLProps from "./getHTMLProps.js";
 import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
-import * as propTypes from "./propTypes.js";
 class DragDrop extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -66,19 +64,4 @@ class DragDrop extends Component {
     });
   }
 }
-DragDrop.propTypes = {
-  uppy: propTypes.uppy.isRequired,
-  locale: propTypes.locale,
-  inputName: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  note: PropTypes.string,
-};
-DragDrop.defaultProps = {
-  locale: null,
-  inputName: "files[]",
-  width: "100%",
-  height: "100%",
-  note: null,
-};
 export default DragDrop;
diff --git a/packages/@uppy/react/lib/FileInput.js b/packages/@uppy/react/lib/FileInput.js
index d826e67..3451e6a 100644
--- a/packages/@uppy/react/lib/FileInput.js
+++ b/packages/@uppy/react/lib/FileInput.js
@@ -1,7 +1,5 @@
 import FileInputPlugin from "@uppy/file-input";
-import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
-import * as propTypes from "./propTypes.js";
 class FileInput extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -50,12 +48,6 @@ class FileInput extends Component {
     });
   }
 }
-FileInput.propTypes = {
-  uppy: propTypes.uppy.isRequired,
-  locale: propTypes.locale,
-  pretty: PropTypes.bool,
-  inputName: PropTypes.string,
-};
 FileInput.defaultProps = {
   locale: undefined,
   pretty: true,
diff --git a/packages/@uppy/react/lib/ProgressBar.js b/packages/@uppy/react/lib/ProgressBar.js
index f445cca..3d0e39d 100644
--- a/packages/@uppy/react/lib/ProgressBar.js
+++ b/packages/@uppy/react/lib/ProgressBar.js
@@ -1,9 +1,7 @@
 import ProgressBarPlugin from "@uppy/progress-bar";
-import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import getHTMLProps from "./getHTMLProps.js";
 import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
-import { uppy as uppyPropType } from "./propTypes.js";
 class ProgressBar extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -60,13 +58,4 @@ class ProgressBar extends Component {
     });
   }
 }
-ProgressBar.propTypes = {
-  uppy: uppyPropType.isRequired,
-  fixed: PropTypes.bool,
-  hideAfterFinish: PropTypes.bool,
-};
-ProgressBar.defaultProps = {
-  fixed: false,
-  hideAfterFinish: true,
-};
 export default ProgressBar;
diff --git a/packages/@uppy/react/lib/StatusBar.js b/packages/@uppy/react/lib/StatusBar.js
index 15ef807..cd96dc3 100644
--- a/packages/@uppy/react/lib/StatusBar.js
+++ b/packages/@uppy/react/lib/StatusBar.js
@@ -1,9 +1,7 @@
 import StatusBarPlugin from "@uppy/status-bar";
-import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import getHTMLProps from "./getHTMLProps.js";
 import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
-import { uppy as uppyPropType } from "./propTypes.js";
 class StatusBar extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -70,23 +68,4 @@ class StatusBar extends Component {
     });
   }
 }
-StatusBar.propTypes = {
-  uppy: uppyPropType.isRequired,
-  hideUploadButton: PropTypes.bool,
-  hideRetryButton: PropTypes.bool,
-  hidePauseResumeButton: PropTypes.bool,
-  hideCancelButton: PropTypes.bool,
-  showProgressDetails: PropTypes.bool,
-  hideAfterFinish: PropTypes.bool,
-  doneButtonHandler: PropTypes.func,
-};
-StatusBar.defaultProps = {
-  hideUploadButton: false,
-  hideRetryButton: false,
-  hidePauseResumeButton: false,
-  hideCancelButton: false,
-  showProgressDetails: false,
-  hideAfterFinish: true,
-  doneButtonHandler: null,
-};
 export default StatusBar;

[Murderlon]

I see you also removed defaultProps, which is good, but I think we need explicit setting/merging of defaults then unless that's already done in the embedded plugin?

[aduh95]

I see you also removed defaultProps, which is good, but I think we need explicit setting/merging of defaults then unless that's already done in the embedded plugin?

uppy/packages/@uppy/drag-drop/src/DragDrop.tsx

Lines 28 to 32 in 3623ed9

	const defaultOptions = {
	inputName: 'files[]',
	width: '100%',
	height: '100%',
	} satisfies Partial<DragDropOptions>