feat: Add initial typescript definition (#591)

.eslintignore

@@ -1,2 +1,3 @@
 dist/
 coverage/
+typings/*

package.json

@@ -19,7 +19,8 @@
     "logo": "cd logo && sketchtool export artboards logo.sketch",
     "imagemin": "imagemin --out-dir=logo --plugin=pngquant --plugin=svgo",
     "size": "size-limit",
-    "size:why": "size-limit --why"
+    "size:why": "size-limit --why",
+    "typescript": "tsc --project ./typings/tests"
   },
   "size-limit": [
     {
@@ -36,6 +37,9 @@
       "eslint --fix",
       "git add"
     ],
+    "*.ts": [
+      "tslint"
+    ],
     "*.{svg,png}": [
       "imagemin",
       "git add"
@@ -81,6 +85,8 @@
     "@commitlint/config-angular": "^7.0.1",
     "@commitlint/prompt": "^7.0.0",
     "@commitlint/prompt-cli": "^7.0.0",
+    "@types/react": "^16.3.2",
+    "@types/react-dom": "^16.0.4",
     "babel-cli": "^6.9.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "*",
@@ -123,8 +129,14 @@
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-uglify": "^3.0.0",
     "size-limit": "^0.19.2",
-    "webpack-blocks": "^1.0.0"
+    "webpack-blocks": "^1.0.0",
+    "sinon": "^3.2.1",
+    "style-loader": "^0.18.2",
+    "tslint": "^5.9.1",
+    "typescript": "^2.8.1",
+    "webpack": "^3.5.5"
   },
+  "typings": "typings/react-dropzone.d.ts",
   "config": {
     "commitizen": {
       "path": "@commitlint/prompt"

tslint.json

@@ -0,0 +1,101 @@
+{
+  "jsRules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "no-duplicate-variable": true,
+    "no-eval": true,
+    "no-trailing-whitespace": true,
+    "no-unsafe-finally": true,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "double"
+    ],
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  },
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "no-eval": true,
+    "no-internal-module": true,
+    "no-trailing-whitespace": true,
+    "no-unsafe-finally": true,
+    "no-var-keyword": true,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "double"
+    ],
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}

typings/react-dropzone.d.ts

@@ -0,0 +1,60 @@
+import {
+  CSSProperties,
+  Component,
+  DragEvent,
+  InputHTMLAttributes
+} from "react";
+
+export interface FileWithPreview extends File {
+  preview?: string;
+}
+
+export type DropFileEventHandler = (
+  acceptedOrRejected: FileWithPreview[],
+  event: DragEvent<HTMLDivElement>
+) => void;
+export type DropFilesEventHandler = (
+  accepted: FileWithPreview[],
+  rejected: FileWithPreview[],
+  event: DragEvent<HTMLDivElement>
+) => void;
+
+type DropzoneRenderArgs = {
+  draggedFiles: FileWithPreview[];
+  acceptedFiles: FileWithPreview[];
+  rejectedFiles: FileWithPreview[];
+  isDragActive: boolean;
+  isDragAccept: boolean;
+  isDragReject: boolean;
+};
+
+export type DropzoneRenderFunction = (x: DropzoneRenderArgs) => JSX.Element;
+
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type DropzoneProps = Omit<React.HTMLProps<HTMLDivElement>, "onDrop"> & {
+  disableClick?: boolean;
+  disabled?: boolean;
+  disablePreview?: boolean;
+  preventDropOnDocument?: boolean;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  maxSize?: number;
+  minSize?: number;
+  activeClassName?: string;
+  acceptClassName?: string;
+  rejectClassName?: string;
+  disabledClassName?: string;
+  activeStyle?: CSSProperties;
+  acceptStyle?: CSSProperties;
+  rejectStyle?: CSSProperties;
+  disabledStyle?: CSSProperties;
+  onDrop?: DropFilesEventHandler;
+  onDropAccepted?: DropFileEventHandler;
+  onDropRejected?: DropFileEventHandler;
+  onFileDialogCancel?: () => void;
+  children: React.ReactNode | DropzoneRenderFunction;
+};
+
+export default class Dropzone extends Component<DropzoneProps> {
+  open: () => void;
+}

typings/tests/accept.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class Accept extends React.Component {
+  state = {
+    accepted: [],
+    rejected: []
+  };
+
+  render() {
+    return (
+      <section>
+        <div className="dropzone">
+          <Dropzone
+            accept="image/jpeg, image/png"
+            onDrop={(accepted, rejected) => {
+              this.setState({ accepted, rejected });
+            }}
+          >
+            <p>
+              Try dropping some files here, or click to select files to upload.
+            </p>
+            <p>Only *.jpeg and *.png images will be accepted</p>
+          </Dropzone>
+        </div>
+        <aside>
+          <h2>Accepted files</h2>
+          <ul>
+            {this.state.accepted.map(f => (
+              <li key={f.name}>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+          <h2>Rejected files</h2>
+          <ul>
+            {this.state.rejected.map(f => (
+              <li key={f.name}>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+        </aside>
+      </section>
+    );
+  }
+}
+
+const a = (
+  <Dropzone accept=".jpeg,.png">
+    {({ isDragActive, isDragReject }) => {
+      if (isDragActive) {
+        return "All files will be accepted";
+      }
+      if (isDragReject) {
+        return "Some files will be rejected";
+      }
+      return "Dropping some files here...";
+    }}
+  </Dropzone>
+);
+
+const b = (
+  <Dropzone accept="image/jpeg, image/png">
+    {({ isDragActive, isDragReject }) => {
+      if (isDragActive) {
+        return "All files will be accepted";
+      }
+      if (isDragReject) {
+        return "Some files will be rejected";
+      }
+      return "Dropping some files here...";
+    }}
+  </Dropzone>
+);

typings/tests/all.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class Test extends React.Component {
+  dz: Dropzone;
+
+  open() {
+    this.dz.open();
+  }
+
+  handleFileDialog = () => {};
+
+  render() {
+    return (
+      <div>
+        <Dropzone
+          ref={node => {
+            this.dz = node;
+          }}
+          onClick={event => console.log(event)}
+          onDrop={(acceptedFiles, rejectedFiles, event) =>
+            console.log(acceptedFiles, rejectedFiles, event)}
+          onDragStart={event => console.log(event)}
+          onDragEnter={event => console.log(event)}
+          onDragOver={event => console.log(event)}
+          onDragLeave={event => console.log(event)}
+          onDropAccepted={event => console.log(event)}
+          onDropRejected={event => console.log(event)}
+          onFileDialogCancel={() => console.log("abc")}
+          style={{ borderStyle: "dashed" }}
+          activeStyle={{ borderStyle: "dotted" }}
+          acceptStyle={{ borderStyle: "dotted" }}
+          rejectStyle={{ borderStyle: "dotted" }}
+          disabledStyle={{ borderStyle: "dotted" }}
+          className="regular"
+          activeClassName="active"
+          acceptClassName="accept"
+          rejectClassName="reject"
+          disabledClassName="disabled"
+          minSize={2000}
+          maxSize={Infinity}
+          disablePreview
+          disableClick
+          disabled
+          multiple={false}
+          accept="*.png"
+          name="dropzone"
+          inputProps={{ id: "dropzone" }}
+        >
+          Hi
+        </Dropzone>
+      </div>
+    );
+  }
+}
+
+export default Test;