@adsterra-ad/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,169 @@
+"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);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  AdBanner: () => AdBanner,
+  AdContainer: () => AdContainer,
+  configureAds: () => import_core.configureAds,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_core = require("@adsterra-ad/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AdBanner({
+  format,
+  provider = "adsterra",
+  className,
+  adKey,
+  adLabel = "Advertisement",
+  showAdLabel = true,
+  adLabelPosition = "top-left",
+  onLoad,
+  onError
+}) {
+  const bannerId = (0, import_react.useRef)((0, import_core.createBannerId)());
+  const [activeProvider, setActiveProvider] = (0, import_react.useState)(provider);
+  const [adLoaded, setAdLoaded] = (0, import_react.useState)(false);
+  const [adFailed, setAdFailed] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => setActiveProvider(provider), [provider]);
+  const config = (0, import_core.resolveAdConfig)(format, adKey);
+  const srcDoc = (0, import_react.useMemo)(
+    () => (0, import_core.buildSrcDoc)({ format, provider: activeProvider, config, bannerId: bannerId.current }),
+    [format, activeProvider, config]
+  );
+  (0, import_react.useEffect)(() => {
+    const handler = (event) => {
+      const data = event.data;
+      if (!data || data.bannerId !== bannerId.current) return;
+      if (data.type === "ad-load-success") {
+        setAdLoaded(true);
+        onLoad?.();
+        return;
+      }
+      if (data.type === "ad-load-error") {
+        setAdFailed(true);
+        onError?.();
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [onLoad, onError]);
+  if (adFailed) return null;
+  const wrapperStyle = getWrapperStyle(adLabelPosition);
+  const labelStyle = getLabelStyle(adLabelPosition);
+  const visibilityStyle = getVisibilityStyle(adLoaded);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${className ?? ""}`.trim(), style: { ...wrapperStyle, ...visibilityStyle }, children: [
+    showAdLabel && adLabelPosition.startsWith("top") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelStyle, children: adLabel }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": "ad-banner", style: { ...parseStyle((0, import_core.getBannerStyle)(config)), overflow: "hidden", borderRadius: 6, border: "1px solid #e5e7eb", background: "#f3f4f6" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "iframe",
+      {
+        title: "Advertisement",
+        srcDoc,
+        width: typeof config.width === "number" ? config.width : void 0,
+        height: typeof config.height === "number" ? config.height : void 0,
+        frameBorder: 0,
+        scrolling: "no",
+        sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+      }
+    ) }),
+    showAdLabel && adLabelPosition.startsWith("bottom") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelStyle, children: adLabel }) : null
+  ] });
+}
+function AdContainer({
+  format,
+  provider = "adsterra",
+  className,
+  adKey,
+  adLabel,
+  showAdLabel,
+  adLabelPosition,
+  containerClassName
+}) {
+  const [adLoaded, setAdLoaded] = (0, import_react.useState)(false);
+  const [adFailed, setAdFailed] = (0, import_react.useState)(false);
+  if (adFailed) return null;
+  const visibilityStyle = getVisibilityStyle(adLoaded);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${containerClassName ?? ""}`.trim(), style: visibilityStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AdBanner,
+    {
+      format,
+      provider,
+      className,
+      adKey,
+      adLabel,
+      showAdLabel,
+      adLabelPosition,
+      onLoad: () => setAdLoaded(true),
+      onError: () => setAdFailed(true)
+    }
+  ) });
+}
+function parseStyle(styleString) {
+  const widthMatch = styleString.match(/width:\s*([^;]+);/);
+  const heightMatch = styleString.match(/height:\s*([^;]+);/);
+  return {
+    width: widthMatch ? widthMatch[1] : void 0,
+    height: heightMatch ? heightMatch[1] : void 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+}
+function getWrapperStyle(position) {
+  return {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: position.endsWith("left") ? "flex-start" : position.endsWith("right") ? "flex-end" : "center"
+  };
+}
+function getLabelStyle(position) {
+  return {
+    fontSize: 10,
+    fontWeight: 600,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: "#9ca3af",
+    marginBottom: position.startsWith("top") ? 4 : 0,
+    marginTop: position.startsWith("bottom") ? 4 : 0,
+    textAlign: position.endsWith("left") ? "left" : position.endsWith("right") ? "right" : "center",
+    width: "100%"
+  };
+}
+function getVisibilityStyle(isVisible) {
+  if (isVisible) return { opacity: 1, transform: "scale(1)" };
+  return {
+    opacity: 0,
+    transform: "scale(0.95)",
+    pointerEvents: "none",
+    position: "absolute",
+    width: 0,
+    height: 0,
+    overflow: "hidden"
+  };
+}
+var index_default = AdBanner;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdBanner,
+  AdContainer,
+  configureAds
+});

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AdFormat, AdProvider } from '@adsterra-ad/core';
+export { configureAds } from '@adsterra-ad/core';
+
+type AdLabelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface AdBannerProps {
+    format: AdFormat;
+    provider?: AdProvider;
+    className?: string;
+    adKey?: string;
+    adLabel?: string;
+    showAdLabel?: boolean;
+    adLabelPosition?: AdLabelPosition;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+declare function AdBanner({ format, provider, className, adKey, adLabel, showAdLabel, adLabelPosition, onLoad, onError }: AdBannerProps): react_jsx_runtime.JSX.Element | null;
+interface AdContainerProps extends Omit<AdBannerProps, 'onLoad' | 'onError'> {
+    containerClassName?: string;
+}
+declare function AdContainer({ format, provider, className, adKey, adLabel, showAdLabel, adLabelPosition, containerClassName }: AdContainerProps): react_jsx_runtime.JSX.Element | null;
+
+export { AdBanner, type AdBannerProps, AdContainer, type AdContainerProps, type AdLabelPosition, AdBanner as default };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AdFormat, AdProvider } from '@adsterra-ad/core';
+export { configureAds } from '@adsterra-ad/core';
+
+type AdLabelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface AdBannerProps {
+    format: AdFormat;
+    provider?: AdProvider;
+    className?: string;
+    adKey?: string;
+    adLabel?: string;
+    showAdLabel?: boolean;
+    adLabelPosition?: AdLabelPosition;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+declare function AdBanner({ format, provider, className, adKey, adLabel, showAdLabel, adLabelPosition, onLoad, onError }: AdBannerProps): react_jsx_runtime.JSX.Element | null;
+interface AdContainerProps extends Omit<AdBannerProps, 'onLoad' | 'onError'> {
+    containerClassName?: string;
+}
+declare function AdContainer({ format, provider, className, adKey, adLabel, showAdLabel, adLabelPosition, containerClassName }: AdContainerProps): react_jsx_runtime.JSX.Element | null;
+
+export { AdBanner, type AdBannerProps, AdContainer, type AdContainerProps, type AdLabelPosition, AdBanner as default };

package/dist/index.js

@@ -0,0 +1,148 @@
+// src/index.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  buildSrcDoc,
+  configureAds,
+  createBannerId,
+  getBannerStyle,
+  resolveAdConfig
+} from "@adsterra-ad/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AdBanner({
+  format,
+  provider = "adsterra",
+  className,
+  adKey,
+  adLabel = "Advertisement",
+  showAdLabel = true,
+  adLabelPosition = "top-left",
+  onLoad,
+  onError
+}) {
+  const bannerId = useRef(createBannerId());
+  const [activeProvider, setActiveProvider] = useState(provider);
+  const [adLoaded, setAdLoaded] = useState(false);
+  const [adFailed, setAdFailed] = useState(false);
+  useEffect(() => setActiveProvider(provider), [provider]);
+  const config = resolveAdConfig(format, adKey);
+  const srcDoc = useMemo(
+    () => buildSrcDoc({ format, provider: activeProvider, config, bannerId: bannerId.current }),
+    [format, activeProvider, config]
+  );
+  useEffect(() => {
+    const handler = (event) => {
+      const data = event.data;
+      if (!data || data.bannerId !== bannerId.current) return;
+      if (data.type === "ad-load-success") {
+        setAdLoaded(true);
+        onLoad?.();
+        return;
+      }
+      if (data.type === "ad-load-error") {
+        setAdFailed(true);
+        onError?.();
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [onLoad, onError]);
+  if (adFailed) return null;
+  const wrapperStyle = getWrapperStyle(adLabelPosition);
+  const labelStyle = getLabelStyle(adLabelPosition);
+  const visibilityStyle = getVisibilityStyle(adLoaded);
+  return /* @__PURE__ */ jsxs("div", { className: `${className ?? ""}`.trim(), style: { ...wrapperStyle, ...visibilityStyle }, children: [
+    showAdLabel && adLabelPosition.startsWith("top") ? /* @__PURE__ */ jsx("span", { style: labelStyle, children: adLabel }) : null,
+    /* @__PURE__ */ jsx("div", { "data-testid": "ad-banner", style: { ...parseStyle(getBannerStyle(config)), overflow: "hidden", borderRadius: 6, border: "1px solid #e5e7eb", background: "#f3f4f6" }, children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        title: "Advertisement",
+        srcDoc,
+        width: typeof config.width === "number" ? config.width : void 0,
+        height: typeof config.height === "number" ? config.height : void 0,
+        frameBorder: 0,
+        scrolling: "no",
+        sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+      }
+    ) }),
+    showAdLabel && adLabelPosition.startsWith("bottom") ? /* @__PURE__ */ jsx("span", { style: labelStyle, children: adLabel }) : null
+  ] });
+}
+function AdContainer({
+  format,
+  provider = "adsterra",
+  className,
+  adKey,
+  adLabel,
+  showAdLabel,
+  adLabelPosition,
+  containerClassName
+}) {
+  const [adLoaded, setAdLoaded] = useState(false);
+  const [adFailed, setAdFailed] = useState(false);
+  if (adFailed) return null;
+  const visibilityStyle = getVisibilityStyle(adLoaded);
+  return /* @__PURE__ */ jsx("div", { className: `${containerClassName ?? ""}`.trim(), style: visibilityStyle, children: /* @__PURE__ */ jsx(
+    AdBanner,
+    {
+      format,
+      provider,
+      className,
+      adKey,
+      adLabel,
+      showAdLabel,
+      adLabelPosition,
+      onLoad: () => setAdLoaded(true),
+      onError: () => setAdFailed(true)
+    }
+  ) });
+}
+function parseStyle(styleString) {
+  const widthMatch = styleString.match(/width:\s*([^;]+);/);
+  const heightMatch = styleString.match(/height:\s*([^;]+);/);
+  return {
+    width: widthMatch ? widthMatch[1] : void 0,
+    height: heightMatch ? heightMatch[1] : void 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+}
+function getWrapperStyle(position) {
+  return {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: position.endsWith("left") ? "flex-start" : position.endsWith("right") ? "flex-end" : "center"
+  };
+}
+function getLabelStyle(position) {
+  return {
+    fontSize: 10,
+    fontWeight: 600,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: "#9ca3af",
+    marginBottom: position.startsWith("top") ? 4 : 0,
+    marginTop: position.startsWith("bottom") ? 4 : 0,
+    textAlign: position.endsWith("left") ? "left" : position.endsWith("right") ? "right" : "center",
+    width: "100%"
+  };
+}
+function getVisibilityStyle(isVisible) {
+  if (isVisible) return { opacity: 1, transform: "scale(1)" };
+  return {
+    opacity: 0,
+    transform: "scale(0.95)",
+    pointerEvents: "none",
+    position: "absolute",
+    width: 0,
+    height: 0,
+    overflow: "hidden"
+  };
+}
+var index_default = AdBanner;
+export {
+  AdBanner,
+  AdContainer,
+  configureAds,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@adsterra-ad/react",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@adsterra-ad/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build && npm run typecheck"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
+  }
+}