Convert to TypeScript, rework support for React 18, Refresh latest logic from JotForm

.eslintrc

@@ -1,4 +1,15 @@
 {
-  "extends": "jotform",
-  "parser": "babel-eslint"
-}
+  "root": true,
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/babel",
+    "prettier/react",
+    "prettier/unicorn",
+    "adjunct"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ]
+}

.prettierignore

@@ -0,0 +1 @@
+package.json

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "endOfLine": "crlf",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

lib/index.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface JotFormEmbedProps extends React.ComponentProps<'iframe'> {
+  formURL: string;
+  autoResize?: boolean;
+  autoFocus?: boolean;
+  heightOffset?: number;
+  initialHeight?: number;
+  onSubmit?: () => void;
+  style?: React.CSSProperties;
+}
+
+const JotFormEmbed = ({
+  formURL,
+  autoResize = true,
+  autoFocus = true,
+  heightOffset = 20,
+  initialHeight = 540,
+  style = {},
+  onSubmit = () => {
+    // do nothing
+  },
+  ...others
+}: JotFormEmbedProps) => {
+  const ifr = useRef<HTMLIFrameElement>(null);
+  const [componentStyles, setComponentStyles] = useState({
+    height: initialHeight,
+    overflow: 'hidden',
+    border: 0,
+    width: '100%',
+  });
+
+  useEffect(() => {
+    if (!ifr?.current) {
+      return;
+    }
+    if (!ifr.current.src) {
+      ifr.current.src = formURL + '?isIframeEmbed=1';
+    }
+    const formID = formURL.substring(formURL.lastIndexOf('/') + 1);
+
+    const handleMessages = (content: MessageEvent) => {
+      if (!content) {
+        return;
+      }
+      // console.log(content);
+      // Check if submission is completed.
+      if (typeof content.data === 'object' && content.data.action === 'submission-completed') {
+        onSubmit();
+        return;
+      }
+
+      // From now on we only handle style related messages
+      if (typeof content.data !== 'string') {
+        return;
+      }
+      const [method, value, targetForm] = content.data.split(':');
+      if (formID && targetForm && targetForm != formID) {
+        return;
+      }
+
+      switch (true) {
+        case method === 'scrollIntoView' && autoFocus:
+          if (typeof ifr.current?.scrollIntoView === 'function') {
+            ifr.current.scrollIntoView();
+          }
+          break;
+        case method === 'setHeight' && autoResize:
+          setComponentStyles({ ...componentStyles, height: parseInt(value, 10) + heightOffset });
+          break;
+        case method === 'reloadPage':
+          try {
+            window.location.reload();
+          } catch (e) {
+            console.log('failed to reload', e);
+          }
+          break;
+        default:
+          //console.log('unknown message');
+          //console.log(content);
+          break;
+      }
+    };
+
+    if (window.addEventListener) {
+      window.addEventListener('message', handleMessages, true);
+    }
+    return () => {
+      if (window.removeEventListener) {
+        window.removeEventListener('message', handleMessages, true);
+      }
+    };
+  }, [autoFocus, autoResize, componentStyles, formURL, heightOffset, onSubmit]);
+
+  return (
+    <iframe
+      ref={ifr}
+      title="JotForm Form"
+      style={{
+        ...componentStyles,
+        ...style,
+      }}
+      allowFullScreen
+      allow="geolocation; microphone; camera"
+      frameBorder="0"
+      scrolling="no"
+      {...others}
+    />
+  );
+};
+
+export default JotFormEmbed;
+
+export const JotFormReact = JotFormEmbed;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jotform-react",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "React Wrapper for Embedding JotForm Forms With SSR support (also supports NextJS/Gatsby/CRA)",
   "main": "dist/index.cjs.js",
   "homepage": "https://github.com/sbayd/jotform-react#readme",
@@ -21,6 +21,9 @@
   "author": "Berkay Aydin <sbayd06@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.0",
     "@babel/preset-env": "^7.14.1",
@@ -37,15 +40,16 @@
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-jotform": "^1.0.34",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^2.79.1",
-    "storybook": "^7.4.3"
+    "storybook": "^7.4.3",
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",
-    "react": "^17.0.2 | ^16.13.1",
-    "react-dom": "^17.0.2 | ^16.13.1"
+    "react": "^18.0.0 | ^17.0.2 | ^16.13.1",
+    "react-dom": "^18.0.0 | ^17.0.2 | ^16.13.1"
   },
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.13.15",