@queuezero/react 0.1.3

package/dist/index.mjs

@@ -0,0 +1,403 @@
+// src/context.tsx
+import { createContext, useContext, useMemo, useCallback, useState, useEffect } from "react";
+import { QueueZeroClient, QueueZeroStateManager } from "queuezero";
+import { jsx } from "react/jsx-runtime";
+var WaitlistContext = createContext(null);
+function WaitlistProvider({ campaign, config, children }) {
+  const stateManager = useMemo(() => {
+    const client = new QueueZeroClient(campaign, config);
+    return new QueueZeroStateManager(client);
+  }, [campaign, config?.apiUrl, config?.baseUrl]);
+  const [state, setState] = useState(stateManager.getState());
+  useEffect(() => {
+    return stateManager.subscribe((newState) => {
+      setState(newState);
+    });
+  }, [stateManager]);
+  const [publicConfig, setPublicConfig] = useState(null);
+  const [configLoading, setConfigLoading] = useState(true);
+  useEffect(() => {
+    let mounted = true;
+    const fetchConfig = async () => {
+      try {
+        const cfg = await stateManager.fetchPublicConfig();
+        if (mounted) setPublicConfig(cfg);
+      } catch (e) {
+        console.error("Failed to fetch config", e);
+      } finally {
+        if (mounted) setConfigLoading(false);
+      }
+    };
+    fetchConfig();
+    return () => {
+      mounted = false;
+    };
+  }, [stateManager]);
+  useEffect(() => {
+    if (stateManager.getState().isJoined) {
+      stateManager.refresh();
+    }
+  }, [stateManager]);
+  const value = useMemo(
+    () => ({
+      loading: state.loading,
+      status: state.status,
+      error: state.error,
+      isJoined: state.isJoined,
+      campaign,
+      join: stateManager.join.bind(stateManager),
+      refresh: stateManager.refresh.bind(stateManager),
+      getReferralLink: stateManager.getReferralLink.bind(stateManager),
+      getReferralCode: stateManager.getReferralCode.bind(stateManager),
+      reset: stateManager.reset.bind(stateManager),
+      config: publicConfig,
+      configLoading
+    }),
+    [state, campaign, stateManager, publicConfig, configLoading]
+  );
+  return /* @__PURE__ */ jsx(WaitlistContext.Provider, { value, children });
+}
+function useWaitlistContext() {
+  const context = useContext(WaitlistContext);
+  if (!context) {
+    throw new Error("useWaitlistContext must be used within a WaitlistProvider");
+  }
+  return context;
+}
+function useWaitlist(campaign, config) {
+  const client = useMemo(() => {
+    return new QueueZeroClient(campaign, config);
+  }, [campaign, config?.apiUrl, config?.baseUrl]);
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState(null);
+  const [error, setError] = useState(null);
+  const [isJoined, setIsJoined] = useState(false);
+  useEffect(() => {
+    const joined = client.isJoined();
+    setIsJoined(joined);
+    if (joined) {
+      refresh();
+    }
+  }, [client]);
+  const join = useCallback(
+    async (email, metadata, referrerCode) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await client.joinWaitlist(email, metadata, referrerCode);
+        const userStatus = await client.getPosition();
+        setStatus(userStatus);
+        setIsJoined(true);
+        return response;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Unknown error"));
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+  const refresh = useCallback(async () => {
+    if (!client.isJoined()) return null;
+    setLoading(true);
+    setError(null);
+    try {
+      const userStatus = await client.getPosition();
+      setStatus(userStatus);
+      return userStatus;
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  const getReferralLink = useCallback(() => client.getReferralLink(), [client]);
+  const getReferralCode = useCallback(() => client.getReferralCode(), [client]);
+  const reset = useCallback(() => {
+    client.reset();
+    setStatus(null);
+    setError(null);
+    setIsJoined(false);
+  }, [client]);
+  return { loading, status, error, isJoined, campaign, join, refresh, getReferralLink, getReferralCode, reset };
+}
+
+// src/WaitlistForm.tsx
+import { useState as useState2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { FormController } from "queuezero";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function WaitlistForm({
+  onSuccess,
+  onError,
+  referrerCode,
+  metadata,
+  className = "",
+  placeholder = "Enter your email",
+  buttonText = "Join Waitlist",
+  loadingText = "Joining...",
+  showLabel = false,
+  labelText = "Email",
+  children
+}) {
+  const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
+  const [email, setEmail] = useState2("");
+  const [formData, setFormData] = useState2({});
+  const [localError, setLocalError] = useState2(null);
+  const controller = useMemo2(
+    () => new FormController(join, config?.formFields || [], referrerCode),
+    [join, config, referrerCode]
+  );
+  const handleSubmit = useCallback2(
+    async (e) => {
+      e?.preventDefault();
+      setLocalError(null);
+      try {
+        const result = await controller.submit(email, formData, metadata);
+        if (result) {
+          setEmail("");
+          setFormData({});
+          onSuccess?.(result);
+        } else if (error) {
+          onError?.(error);
+        }
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Failed to join");
+        setLocalError(error2);
+        onError?.(error2);
+      }
+    },
+    [email, formData, controller, metadata, onSuccess, onError, error]
+  );
+  const displayError = localError || error;
+  if (isJoined) {
+    return null;
+  }
+  if (typeof children === "function") {
+    return children({
+      email,
+      setEmail,
+      submit: handleSubmit,
+      loading,
+      error: displayError
+    });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: `qz-form ${className}`.trim(), children: [
+    showLabel && /* @__PURE__ */ jsx2("label", { htmlFor: "qz-email", className: "qz-form-label", children: labelText }),
+    /* @__PURE__ */ jsx2("div", { className: "qz-form-row", children: /* @__PURE__ */ jsx2(
+      "input",
+      {
+        id: "qz-email",
+        type: "email",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        placeholder,
+        disabled: loading,
+        required: true,
+        className: "qz-form-input",
+        "aria-label": !showLabel ? labelText : void 0
+      }
+    ) }),
+    !configLoading && config?.formFields?.map((field) => /* @__PURE__ */ jsxs("div", { className: "qz-form-row", children: [
+      showLabel && /* @__PURE__ */ jsx2("label", { className: "qz-form-label", children: field.label }),
+      field.type === "select" ? /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: formData[field.key] || "",
+          onChange: (e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value })),
+          disabled: loading,
+          required: field.required,
+          className: "qz-form-select",
+          children: [
+            /* @__PURE__ */ jsx2("option", { value: "", children: field.placeholder || `Select ${field.label}` }),
+            field.options?.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt, children: opt }, opt))
+          ]
+        }
+      ) : /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: field.type === "number" ? "number" : "text",
+          value: formData[field.key] || "",
+          onChange: (e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value })),
+          placeholder: field.placeholder || field.label,
+          disabled: loading,
+          required: field.required,
+          className: "qz-form-input"
+        }
+      )
+    ] }, field.key)),
+    /* @__PURE__ */ jsx2("div", { className: "qz-form-row", children: /* @__PURE__ */ jsx2("button", { type: "submit", disabled: loading, className: "qz-form-button", children: loading ? loadingText : buttonText }) }),
+    displayError && /* @__PURE__ */ jsx2("div", { className: "qz-form-error", role: "alert", children: displayError.message }),
+    children
+  ] });
+}
+
+// src/WaitlistStatus.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function WaitlistStatus({
+  className = "",
+  showReferrals = true,
+  showScore = true,
+  positionLabel = "Position",
+  scoreLabel = "Score",
+  referralsLabel = "Referrals",
+  children
+}) {
+  const { status, loading, isJoined } = useWaitlistContext();
+  if (!isJoined || !status) {
+    return null;
+  }
+  if (loading && !status) {
+    return /* @__PURE__ */ jsx3("div", { className: `qz-status qz-status-loading ${className}`.trim(), children: "Loading..." });
+  }
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx3(Fragment, { children: children(status) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: `qz-status ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "qz-status-item qz-status-position", children: [
+      /* @__PURE__ */ jsx3("span", { className: "qz-status-label", children: positionLabel }),
+      /* @__PURE__ */ jsxs2("span", { className: "qz-status-value", children: [
+        "#",
+        status.position.toLocaleString()
+      ] })
+    ] }),
+    showScore && /* @__PURE__ */ jsxs2("div", { className: "qz-status-item qz-status-score", children: [
+      /* @__PURE__ */ jsx3("span", { className: "qz-status-label", children: scoreLabel }),
+      /* @__PURE__ */ jsx3("span", { className: "qz-status-value", children: status.priorityScore.toLocaleString() })
+    ] }),
+    showReferrals && /* @__PURE__ */ jsxs2("div", { className: "qz-status-item qz-status-referrals", children: [
+      /* @__PURE__ */ jsx3("span", { className: "qz-status-label", children: referralsLabel }),
+      /* @__PURE__ */ jsx3("span", { className: "qz-status-value", children: status.referralCount.toLocaleString() })
+    ] })
+  ] });
+}
+
+// src/ReferralShare.tsx
+import { useState as useState3, useCallback as useCallback3 } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ReferralShare({
+  className = "",
+  label = "Share your referral link:",
+  copyButtonText = "Copy",
+  copiedText = "Copied!",
+  onCopy,
+  shareMessage = "Join me on the waitlist!",
+  showSocialButtons,
+  children
+}) {
+  const { getReferralLink, getReferralCode, isJoined, config } = useWaitlistContext();
+  const [copied, setCopied] = useState3(false);
+  const referralEnabled = config?.features?.referral_enabled ?? true;
+  const showSocial = showSocialButtons ?? config?.features?.social_share_buttons ?? false;
+  if (!referralEnabled) return null;
+  const link = getReferralLink();
+  const code = getReferralCode();
+  const handleCopy = useCallback3(async () => {
+    if (!link) return;
+    try {
+      await navigator.clipboard.writeText(link);
+      setCopied(true);
+      onCopy?.(link);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      const textarea = document.createElement("textarea");
+      textarea.value = link;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      onCopy?.(link);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  }, [link, onCopy]);
+  const handleTwitterShare = useCallback3(() => {
+    if (!link) return;
+    const text = encodeURIComponent(`${shareMessage} ${link}`);
+    window.open(`https://twitter.com/intent/tweet?text=${text}`, "_blank", "noopener,noreferrer");
+  }, [link, shareMessage]);
+  const handleLinkedInShare = useCallback3(() => {
+    if (!link) return;
+    const url = encodeURIComponent(link);
+    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, "_blank", "noopener,noreferrer");
+  }, [link]);
+  const handleEmailShare = useCallback3(() => {
+    if (!link) return;
+    const subject = encodeURIComponent("Join me on the waitlist!");
+    const body = encodeURIComponent(`${shareMessage}
+
+${link}`);
+    window.location.href = `mailto:?subject=${subject}&body=${body}`;
+  }, [link, shareMessage]);
+  if (!isJoined || !link || !code) {
+    return null;
+  }
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx4(Fragment2, { children: children({ link, code, copy: handleCopy, copied }) });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: `qz-share ${className}`.trim(), children: [
+    label && /* @__PURE__ */ jsx4("div", { className: "qz-share-label", children: label }),
+    /* @__PURE__ */ jsxs3("div", { className: "qz-share-link-container", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: "text",
+          value: link,
+          readOnly: true,
+          className: "qz-share-input",
+          onClick: (e) => e.target.select()
+        }
+      ),
+      /* @__PURE__ */ jsx4("button", { onClick: handleCopy, className: "qz-share-copy-button", children: copied ? copiedText : copyButtonText })
+    ] }),
+    showSocial && /* @__PURE__ */ jsxs3("div", { className: "qz-share-social", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: handleTwitterShare,
+          className: "qz-share-social-button qz-share-twitter",
+          "aria-label": "Share on Twitter",
+          children: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ jsx4("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: handleLinkedInShare,
+          className: "qz-share-social-button qz-share-linkedin",
+          "aria-label": "Share on LinkedIn",
+          children: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ jsx4("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: handleEmailShare,
+          className: "qz-share-social-button qz-share-email",
+          "aria-label": "Share via Email",
+          children: /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: [
+            /* @__PURE__ */ jsx4("path", { d: "M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" }),
+            /* @__PURE__ */ jsx4("path", { d: "M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/index.ts
+import { QueueZeroClient as QueueZeroClient2, InMemoryStorageAdapter, LocalStorageAdapter } from "queuezero";
+export {
+  InMemoryStorageAdapter,
+  LocalStorageAdapter,
+  QueueZeroClient2 as QueueZeroClient,
+  ReferralShare,
+  WaitlistForm,
+  WaitlistProvider,
+  WaitlistStatus,
+  useWaitlist,
+  useWaitlistContext
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@queuezero/react",
+  "version": "0.1.3",
+  "description": "React components and hooks for QueueZero viral waitlists",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "keywords": [
+    "waitlist",
+    "viral",
+    "referral",
+    "react",
+    "hooks"
+  ],
+  "author": "QueueZero Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "dependencies": {
+    "queuezero": "^0.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.11",
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2"
+  }
+}