@captchafox/react 1.0.0

package/README.md

@@ -0,0 +1,93 @@
+# @captchafox/react
+
+[![NPM version](https://img.shields.io/npm/v/@captchafox/react.svg)](https://www.npmjs.com/package/@captchafox/react)
+
+## Installation
+
+Install the library using your prefered package manager
+
+```sh
+npm install @captchafox/react
+```
+
+```sh
+yarn add @captchafox/react
+```
+
+```sh
+pnpm add @captchafox/react
+```
+
+## Usage
+
+```tsx
+import { CaptchaFox } from '@captchafox/react'
+
+function Example() {
+    return <CaptchaFox sitekey="sk_11111111000000001111111100000000" />
+}
+```
+
+### Props
+
+| **Prop** | **Type**                | **Description**                                                                 | **Required** |
+| -------- | ----------------------- | ------------------------------------------------------------------------------- | ------------ |
+| sitekey  | `string`                | The sitekey for the widget                                                      | ✅            |
+| lng      | `string`                | The language the widget should display. Defaults to automatically detecting it. |              |
+| mode     | `inline\|popup\|hidden` | The mode the widget should be displayed in                                      |              |
+| onVerify | `function`              | Called with the response token after successful verification                    |              |
+| onFail   | `function`              | Called after unsuccessful verification                                          |              |
+| onError  | `function`              | Called if an error occured                                                      |              |
+| onExpire | `function`              | Called if the challenge expired                                                 |              |
+| onClose  | `function`              | Called if the challenge was closed                                              |              |
+
+### Using the verification callback
+
+```jsx
+import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/react'
+
+function Example() {
+    const handleVerify = (token: string) => {
+        // do something with the token here (e.g. submit the form)
+        const formData = {
+            // your form data
+            [CAPTCHA_RESPONSE_KEY]: token
+      };
+    }
+
+    return (
+        <CaptchaFox
+            sitekey="sk_11111111000000001111111100000000"
+            onVerify={handleVerify}
+        />
+    )
+}
+```
+
+### Interacting with the instance
+
+```jsx
+import { useRef } from 'react'
+import { CaptchaFox, CaptchaFoxInstance } from '@captchafox/react'
+
+function Example() {
+    const captchaRef = useRef<CaptchaFoxInstance | null>(null);
+
+    const triggerAction = async () => {
+        // execute the captcha
+        try {
+            const token = await captchaRef.current?.execute()
+        } catch {
+            // unsuccessful verification
+        }
+    }
+
+    return (
+        <CaptchaFox
+            sitekey="sk_11111111000000001111111100000000"
+            ref={captchaRef}
+        />
+        <button onClick={triggerAction}>Action</button>
+    )
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { WidgetApi, WidgetOptions } from '@captchafox/types';
+
+type CaptchaFoxInstance = Omit<WidgetApi, 'render'>;
+declare const CaptchaFox: react.ForwardRefExoticComponent<WidgetOptions & {
+    /** Called after the widget has been loaded */
+    onLoad?: (() => void) | undefined;
+    className?: string | undefined;
+} & react.RefAttributes<CaptchaFoxInstance>>;
+
+declare const CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
+
+export { CAPTCHA_RESPONSE_KEY, CaptchaFox, CaptchaFoxInstance };

package/dist/index.js

@@ -0,0 +1,163 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  CAPTCHA_RESPONSE_KEY: () => CAPTCHA_RESPONSE_KEY,
+  CaptchaFox: () => CaptchaFox
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../internal/dist/index.mjs
+var resolveFn;
+var rejectFn;
+var mountInstance = new Promise((resolve, reject) => {
+  resolveFn = resolve;
+  rejectFn = reject;
+});
+var LOAD_FUNC_KEY = "captchaFoxOnLoad";
+var SCRIPT_SRC = `https://cdn.captchafox.com/api.js?render=explicit&onload=${LOAD_FUNC_KEY}`;
+function loadCaptchaScript() {
+  return __async(this, null, function* () {
+    if (document.querySelector(`script[src="${SCRIPT_SRC}"]`))
+      return mountInstance;
+    window[LOAD_FUNC_KEY] = resolveFn;
+    const script = document.createElement("script");
+    script.src = SCRIPT_SRC;
+    script.async = true;
+    script.defer = true;
+    script.type = "module";
+    script.onerror = rejectFn;
+    document.body.appendChild(script);
+    return mountInstance;
+  });
+}
+var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !== "undefined";
+
+// src/CaptchaFox.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CaptchaFox = (0, import_react.forwardRef)(
+  ({ sitekey, lng, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
+    const containerRef = (0, import_react.createRef)();
+    const [widgetId, setWidgetId] = (0, import_react.useState)();
+    const firstRendered = (0, import_react.useRef)(false);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => {
+        return {
+          getResponse() {
+            if (!isApiReady() || !widgetId) {
+              console.warn("[CaptchaFox] Widget has not been loaded");
+              return "";
+            }
+            return window.captchafox.getResponse(widgetId);
+          },
+          reset() {
+            if (!isApiReady() || !widgetId) {
+              console.warn("[CaptchaFox] Widget has not been loaded");
+              return;
+            }
+            window.captchafox.reset(widgetId);
+          },
+          remove() {
+            if (!isApiReady() || !widgetId) {
+              console.warn("[CaptchaFox] Widget has not been loaded");
+              return;
+            }
+            setWidgetId("");
+            window.captchafox.remove(widgetId);
+          },
+          execute: () => {
+            if (!isApiReady() || !widgetId) {
+              return Promise.reject("[CaptchaFox] Widget has not been loaded");
+            }
+            return window.captchafox.execute(widgetId);
+          }
+        };
+      },
+      [widgetId]
+    );
+    const renderCaptcha = () => __async(void 0, null, function* () {
+      var _a, _b, _c, _d;
+      (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
+      if (!containerRef.current || ((_c = (_b = containerRef.current) == null ? void 0 : _b.children) == null ? void 0 : _c.length) === 1)
+        return;
+      const newWidgetId = yield (_d = window.captchafox) == null ? void 0 : _d.render(containerRef.current, {
+        lng,
+        sitekey,
+        mode,
+        onError,
+        onFail,
+        onClose,
+        onVerify
+      });
+      setWidgetId(newWidgetId);
+      onLoad == null ? void 0 : onLoad();
+    });
+    (0, import_react.useEffect)(() => {
+      if (firstRendered.current) {
+        if (isApiReady()) {
+          renderCaptcha();
+        }
+      } else {
+        loadCaptchaScript().then(() => __async(void 0, null, function* () {
+          if (isApiReady()) {
+            firstRendered.current = true;
+            yield renderCaptcha();
+          }
+        })).catch((err) => {
+          onError == null ? void 0 : onError(err);
+          console.error("[CaptchaFox] Could not load script:", err);
+        });
+      }
+    }, [sitekey, lng, mode]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, id: widgetId, className });
+  }
+);
+CaptchaFox.displayName = "CaptchaFox";
+
+// src/index.tsx
+var CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CAPTCHA_RESPONSE_KEY,
+  CaptchaFox
+});

package/dist/index.mjs

@@ -0,0 +1,136 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// ../internal/dist/index.mjs
+var resolveFn;
+var rejectFn;
+var mountInstance = new Promise((resolve, reject) => {
+  resolveFn = resolve;
+  rejectFn = reject;
+});
+var LOAD_FUNC_KEY = "captchaFoxOnLoad";
+var SCRIPT_SRC = `https://cdn.captchafox.com/api.js?render=explicit&onload=${LOAD_FUNC_KEY}`;
+function loadCaptchaScript() {
+  return __async(this, null, function* () {
+    if (document.querySelector(`script[src="${SCRIPT_SRC}"]`))
+      return mountInstance;
+    window[LOAD_FUNC_KEY] = resolveFn;
+    const script = document.createElement("script");
+    script.src = SCRIPT_SRC;
+    script.async = true;
+    script.defer = true;
+    script.type = "module";
+    script.onerror = rejectFn;
+    document.body.appendChild(script);
+    return mountInstance;
+  });
+}
+var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !== "undefined";
+
+// src/CaptchaFox.tsx
+import { createRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var CaptchaFox = forwardRef(
+  ({ sitekey, lng, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
+    const containerRef = createRef();
+    const [widgetId, setWidgetId] = useState();
+    const firstRendered = useRef(false);
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          getResponse() {
+            if (!isApiReady() || !widgetId) {
+              console.warn("[CaptchaFox] Widget has not been loaded");
+              return "";
+            }
+            return window.captchafox.getResponse(widgetId);
+          },
+          reset() {
+            if (!isApiReady() || !widgetId) {
+              console.warn("[CaptchaFox] Widget has not been loaded");
+              return;
+            }
+            window.captchafox.reset(widgetId);
+          },
+          remove() {
+            if (!isApiReady() || !widgetId) {
+              console.warn("[CaptchaFox] Widget has not been loaded");
+              return;
+            }
+            setWidgetId("");
+            window.captchafox.remove(widgetId);
+          },
+          execute: () => {
+            if (!isApiReady() || !widgetId) {
+              return Promise.reject("[CaptchaFox] Widget has not been loaded");
+            }
+            return window.captchafox.execute(widgetId);
+          }
+        };
+      },
+      [widgetId]
+    );
+    const renderCaptcha = () => __async(void 0, null, function* () {
+      var _a, _b, _c, _d;
+      (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
+      if (!containerRef.current || ((_c = (_b = containerRef.current) == null ? void 0 : _b.children) == null ? void 0 : _c.length) === 1)
+        return;
+      const newWidgetId = yield (_d = window.captchafox) == null ? void 0 : _d.render(containerRef.current, {
+        lng,
+        sitekey,
+        mode,
+        onError,
+        onFail,
+        onClose,
+        onVerify
+      });
+      setWidgetId(newWidgetId);
+      onLoad == null ? void 0 : onLoad();
+    });
+    useEffect(() => {
+      if (firstRendered.current) {
+        if (isApiReady()) {
+          renderCaptcha();
+        }
+      } else {
+        loadCaptchaScript().then(() => __async(void 0, null, function* () {
+          if (isApiReady()) {
+            firstRendered.current = true;
+            yield renderCaptcha();
+          }
+        })).catch((err) => {
+          onError == null ? void 0 : onError(err);
+          console.error("[CaptchaFox] Could not load script:", err);
+        });
+      }
+    }, [sitekey, lng, mode]);
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, id: widgetId, className });
+  }
+);
+CaptchaFox.displayName = "CaptchaFox";
+
+// src/index.tsx
+var CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
+export {
+  CAPTCHA_RESPONSE_KEY,
+  CaptchaFox
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@captchafox/react",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "test": "jest --coverage",
+    "test:watch": "jest --watch"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@captchafox/types": "*"
+  },
+  "devDependencies": {
+    "@captchafox/internal": "*",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "eslint": "^8.15.0",
+    "eslint-config-captchafox": "*",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "react": "^18.1.0",
+    "tsup": "^6.6.3",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.5"
+  },
+  "bugs": {
+    "url": "https://github.com/CaptchaFox/javascript-integrations/issues"
+  },
+  "homepage": "https://github.com/CaptchaFox/javascript-integrations#readme"
+}