🤖 Merge PR DefinitelyTyped#70438 [react-retool]: add typings for react-retool package by @ImmortalJoker

Author: ImmortalJoker

types/react-retool/.npmignore

@@ -0,0 +1,5 @@
+*
+!**/*.d.ts
+!**/*.d.cts
+!**/*.d.mts
+!**/*.d.*.ts

types/react-retool/components/Retool.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, FunctionComponent, IframeHTMLAttributes } from "react";
+
+export interface RetoolProps {
+    width?: IframeHTMLAttributes<HTMLIFrameElement>["width"];
+    height?: IframeHTMLAttributes<HTMLIFrameElement>["height"];
+    url: IframeHTMLAttributes<HTMLIFrameElement>["src"];
+    data?: Record<string, unknown>;
+    onData?: (data: unknown) => void;
+    sandbox?: true | IframeHTMLAttributes<HTMLIFrameElement>["sandbox"];
+    allow?: IframeHTMLAttributes<HTMLIFrameElement>["allow"];
+    styling?: CSSProperties;
+}
+
+export const Retool: FunctionComponent<RetoolProps>;
+
+export default Retool;

types/react-retool/index.d.ts

@@ -0,0 +1,3 @@
+import Retool from "./components/Retool";
+
+export default Retool;

types/react-retool/package.json

@@ -0,0 +1,28 @@
+{
+    "private": true,
+    "name": "@types/react-retool",
+    "version": "1.4.9999",
+    "projects": [
+        "https://github.com/tryretool/react-retool#readme"
+    ],
+    "dependencies": {
+        "@types/react": "*"
+    },
+    "devDependencies": {
+        "@types/react-retool": "workspace:."
+    },
+    "owners": [
+        {
+            "name": "Kent Walters",
+            "githubUsername": "kentwalters"
+        },
+        {
+            "name": "Ben Baker",
+            "githubUsername": "BenjamynBaker"
+        },
+        {
+            "name": "Yehor Krasnov",
+            "githubUsername": "immortaljoker"
+        }
+    ]
+}

types/react-retool/react-retool-tests.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Retool from "react-retool";
+
+<>
+    <Retool url="http://test.com" />
+
+    <Retool url="http://test.com" width={10} />
+    <Retool url="http://test.com" width={"10px"} height={10} />
+
+    <Retool url="http://test.com" sandbox={true} />
+    <Retool url="http://test.com" sandbox={"allow-scripts"} />
+
+    <Retool url="http://test.com" allow="fullscreen" />
+
+    <Retool url="http://test.com" styling={{ width: "100%" }} />
+
+    <Retool url="http://test.com" data={{ anyProperty: "100%" }} />
+
+    <Retool url="http://test.com" onData={(data: unknown) => {}} />
+</>;

types/react-retool/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+        "module": "node16",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-retool-tests.tsx"
+    ]
+}