react/drag-drop: add a type test and document shared props (#2003)

* Update react-dragdrop.md

DragDrop component only accept `uppy` and `locale` props according to the type declared.
```
import { Uppy, Locale } from './CommonTypes';

export interface DragDropProps {
  uppy: Uppy;
  locale?: Locale;
}

/**
 * React component that renders an area in which files can be dropped to be
 * uploaded.
 */
declare const DragDrop: React.ComponentType<DragDropProps>;
export default DragDrop;```

* drag-drop: accept a number for width/height

* docs: add back dragdrop props

* docs: use the same option style as previously [skip ci]

Co-authored-by: Renée Kooi <renee@kooi.me>

packages/@uppy/drag-drop/types/index.d.ts

@@ -7,8 +7,8 @@ declare module DragDrop {
     target?: Uppy.PluginTarget
     inputName?: string
     allowMultipleFiles?: boolean
-    width?: string
-    height?: string
+    width?: string | number
+    height?: string | number
     note?: string
     locale?: DragDropLocale
   }

packages/@uppy/react/types/index.test-d.tsx

@@ -18,3 +18,23 @@ function TestComponent() {
 // inline option should be removed from proptypes because it is always overridden
 // by the component
 expectError(<components.Dashboard inline />)
+
+{
+  const el = (
+    <components.DragDrop
+      width={200}
+      height={200}
+      note="Images up to 200×200px"
+      uppy={uppy}
+      locale={{
+        strings: {
+          // Text to show on the droppable area.
+          // `%{browse}` is replaced with a link that opens the system file selection dialog.
+          dropHereOr: "Drop here or %{browse}",
+          // Used as the label for the link that opens the system file selection dialog.
+          browse: "browse"
+        }
+      }}
+    />
+  )
+}

website/src/docs/react-dragdrop.md

@@ -67,9 +67,21 @@ class MyComponent extends React.Component {
 The `<DragDrop />` component supports all [DragDrop](/docs/drag-drop/) options as props.
 
 ```js
+// assuming `this.uppy` contains an Uppy instance:
+
 <DragDrop
   width="100%"
   height="100%"
   note="Images up to 200×200px"
+  uppy={this.uppy}
+  locale={{
+    strings: {
+      // Text to show on the droppable area.
+      // `%{browse}` is replaced with a link that opens the system file selection dialog.
+      dropHereOr: "Drop here or %{browse}",
+      // Used as the label for the link that opens the system file selection dialog.
+      browse: "browse",
+    },
+  }}
 />
 ```