Add retool type definitions

Author: Flaviu Tamas

package.json

@@ -12,6 +12,9 @@
       "url": "https://github.com/tryretool/react-retool/blob/main/LICENSE"
     }
   ],
+  "types": "Retool.d.ts",
+  "main": "Retool.js",
+  "type": "commonjs",
   "keywords": [
     "react",
     "react-component",
@@ -37,14 +40,20 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-dom": ">=17.0.0",
+    "@types/react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "publish:npm": "rm -rf dst && mkdir dst && babel src/components -d dst --copy-files && mv ./dst/Retool.js ./dst/index.js && cp ./package.json ./dst/package.json && cp ./README.md ./dst/README.md"
+    "publish:npm": "babel src/components --copy-files --extensions .js,.jsx -d dst --source-maps && cp ./package.json ./dst/package.json && cp ./README.md ./dst/README.md"
   },
   "eslintConfig": {
     "extends": [

src/components/Retool.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+export interface RetoolProps<T> {
+  /**
+   * url prop pointing to an embedded Retool application. You can generate this URL in the editor
+   * mode of a Retool app by clicking "Share" then "Public".
+   */
+  url: string
+  /**
+   * an optional data object, which is made available to the embedded application. When an embedded
+   * Retool application runs a Parent Window Query, <Retool> will check if data contains a key
+   * matching the Parent Window Query's selector, and if so, return that value to the query.
+   */
+  data?: Record<string, T>
+  /**
+   * optional height and width props which will be used for the dimensions of the embedded window.
+   */
+  height?: string | number
+  /**
+   * optional height and width props which will be used for the dimensions of the embedded window.
+   */
+  width?: string | number
+  /**
+   * optional onData callback that will be called with the data of an event that is sent from the
+   * embedded Retool app. These events can be sent from a JavaScript query inside of Retool by using
+   * the parent.postMessage() syntax.
+   */
+  onData?: (data: T) => void
+  /**
+   * optional sandbox parameter to configure permissions of the iframe used to embed the Retool
+   * app. allow-scripts and allow-same-origin are required in order to run Retool, so if sandbox is
+   * specified, allow-scripts and allow-same-origin will always be appended to ensure the Retool app
+   * works.
+   */
+  sandbox?: boolean | string
+  /**
+   * optional allow parameter to configure permissions of the iframe used to embed the Retool app.
+   */
+  allow?: string
+  /**
+   * optional styling prop object that can be used to pass in styles to the iframe component.
+   */
+  styling?: React.CSSProperties
+}
+
+declare const Retool: <T> (props: RetoolProps<T>) => React.ReactElement
+
+export default Retool