convert JavaScript to TypeScript

Author: douglasjunior

.eslintignore

@@ -0,0 +1,2 @@
+/dist
+/node_modules

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

.gitattributes

@@ -1 +1,3 @@
 *.pbxproj -text
+Sample/** linguist-vendored
+scripts/** linguist-vendored

.gitignore

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -28,32 +29,38 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+/dist
+!/dist/.gitkeep

.npmignore

@@ -1,5 +1,13 @@
-template/
+.vscode/
+.github/
+.prettierrc.js
+.eslintrc.js
+yarn.lock
+tsconfig.json
+babel.config.js
+node_modules/
+__tests__/
+screenshots/
 Sample/
-__tests__
-screenshots
-.github
+src/
+scripts/

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

README.md

@@ -129,8 +129,8 @@ For more details, see the [Sample Project](https://github.com/douglasjunior/reac
 |modalProps|[ModalProps](https://reactnative.dev/docs/modal)||Override the Modal props.|
 |webViewProps|[WebViewProps](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)||Override the WebView props.|
 |lang|`string`||[Language code](https://developers.google.com/recaptcha/docs/language).|
-|siteKey|`string`||(Required) Your sitekey.|
-|baseUrl|`string`||(Required) The URL (domain) configured in the reCAPTCHA setup. (ex. http://my.domain.com)|
+|siteKey|`string`||(Required) Your web reCAPTCHA site key.|
+|baseUrl|`string`||(Required) The URL (domain) configured in the reCAPTCHA site key setup. (ex. http://my.domain.com)|
 |size|`'invisible'`, `'normal'` or `'compact'`|`'normal'`|The size of the widget.|
 |theme|`'dark'` or `'light'`|`'light'`|The color theme of the widget.|
 |onLoad|`function()`||A callback function, executed when the reCAPTCHA is ready to use.|
@@ -141,7 +141,7 @@ For more details, see the [Sample Project](https://github.com/douglasjunior/reac
 |recaptchaDomain|`string`|`www.google.com`|The host name of the reCAPTCHA valid api. [See detail](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally).|
 |gstaticDomain|`string`|`www.gstatic.com`|Customize reCAPTCHA `gstatic` host.|
 |hideBadge|`boolean`|`false`|When `size = 'invisible'`, you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. [See detail](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed).|
-|enterprise|`boolean` (enterprise)|`false`| Use the new [reCAPTCHA Enterprise API](https://cloud.google.com/recaptcha-enterprise/docs/using-features).|
+|enterprise|`boolean` (enterprise)|`false`|Use the new [reCAPTCHA Enterprise API](https://cloud.google.com/recaptcha-enterprise/docs/using-features).|
 |action|`string` (enterprise)|| An [additional parameter](https://cloud.google.com/recaptcha-enterprise/docs/actions) for specifying the action name associated with the protected element for reCAPTCHA Enterprise API.|
 
 Note: If `lang` is not set, then device language is used.

Sample/App.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 
 import {Colors} from 'react-native/Libraries/NewAppScreen';
-import Recaptcha, { RecaptchaHandles } from 'react-native-recaptcha-that-works';
+import Recaptcha, { RecaptchaRef } from 'react-native-recaptcha-that-works';
 
 const styles = StyleSheet.create({
   safeArea: {
@@ -28,7 +28,7 @@ const App = () => {
   const size = 'invisible';
   const [token, setToken] = useState('<none>');
 
-  const $recaptcha = useRef<RecaptchaHandles>(null);
+  const $recaptcha = useRef<RecaptchaRef | null>(null);
 
   const handleOpenPress = useCallback(() => {
     $recaptcha.current?.open();

Sample/install.sh

@@ -1,12 +1,14 @@
 #!/bin/bash
 
+unameOut="$(uname -s)"
+
+echo "$unameOut";
+
 rm -rf ../node_modules/
 rm -rf node_modules/
-rm -rf ios/Pods/
-
 yarn install
-
-unameOut="$(uname -s)"
+rm -rf node_modules/react-native-recaptcha-that-works/Sample/ 
+rm -rf node_modules/react-native-recaptcha-that-works/.git/
 
 if [ "$unameOut" == "Darwin" ]; then
     cd ios

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

index.js

@@ -1,21 +1,23 @@
 {
   "name": "react-native-recaptcha-that-works",
   "displayName": "React-Native reCAPTCHA That Works",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "private": false,
   "license": "MIT",
   "description": "⚛ A reCAPTCHA bridge for React Native that works.",
   "repository": {
     "type": "git",
     "url": "https://github.com/douglasjunior/react-native-recaptcha-that-works.git"
   },
-  "main": "index.js",
-  "types": "index.d.ts",
+  "main": "src",
   "keywords": [
     "react-native",
     "ios",
     "android",
-    "recaptcha"
+    "recaptcha",
+    "captcha",
+    "security",
+    "webview"
   ],
   "author": {
     "name": "Douglas Nassif Roma Junior",
@@ -26,9 +28,32 @@
     "url": "https://github.com/douglasjunior/react-native-recaptcha-that-works/issues"
   },
   "homepage": "https://github.com/douglasjunior/react-native-recaptcha-that-works",
+  "scripts": {
+    "build": "tsc",
+    "publish-script": "node scripts/publish.js"
+  },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-native": ">=0.60.0",
-    "react-native-webview": ">=10.0.0"
+    "react-native": ">=0.60",
+    "react-native-webview": ">=10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@tsconfig/react-native": "^2.0.2",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.0.24",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.73.8",
+    "prettier": "^2.4.1",
+    "react": "18.2.0",
+    "react-native": "0.71.4",
+    "react-native-webview": "13.3.1",
+    "react-test-renderer": "18.2.0",
+    "typescript": "4.8.4"
   }
 }

package.json

@@ -0,0 +1,26 @@
+const path = require('path');
+const fs = require('fs');
+const child_process = require('child_process');
+
+const packageJson = require('../package.json');
+
+packageJson.main = 'dist';
+packageJson.types = 'dist';
+
+const packageJsonPath = path.resolve(__dirname, '..', 'package.json');
+
+const content = JSON.stringify(packageJson, null, 2) + '\n';
+
+child_process.execSync('npm run build');
+
+fs.writeFileSync(packageJsonPath, content, {
+  encoding: 'utf-8',
+});
+
+try {
+  child_process.execSync('npm publish');
+} catch (err) {
+  console.error(err);
+}
+
+child_process.execSync('git checkout -- "' + packageJsonPath + '"');