@jamwidgets/astro 0.1.0

package/src/Poll.astro

@@ -0,0 +1,490 @@
+---
+/**
+ * JamWidgets Poll Component
+ *
+ * Displays an interactive poll with voting.
+ * Results are shown based on poll settings.
+ *
+ * @example
+ * <Poll
+ *   siteKey={import.meta.env.JAMWIDGETS_SITE_KEY}
+ *   slug="favorite-framework"
+ * />
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** The poll slug (required) */
+  slug: string;
+  /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
+  endpoint?: string;
+  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
+  theme?: "light" | "dark" | "auto";
+  /** CSS class to add to the container */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  slug,
+  endpoint = DEFAULT_ENDPOINT,
+  theme = "light",
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-poll", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-poll
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-poll-slug={slug}
+>
+  <div class="jamwidgets-poll-loading">
+    <span class="jamwidgets-poll-spinner"></span>
+  </div>
+  <div class="jamwidgets-poll-content" style="display: none;">
+    <h3 class="jamwidgets-poll-question"></h3>
+    <div class="jamwidgets-poll-options"></div>
+    <div class="jamwidgets-poll-footer">
+      <span class="jamwidgets-poll-total"></span>
+      <span class="jamwidgets-poll-status"></span>
+    </div>
+    <button type="button" class="jamwidgets-poll-submit" style="display: none;">Vote</button>
+  </div>
+  <div class="jamwidgets-poll-error" style="display: none;"></div>
+</div>
+
+<script>
+  interface PollOption {
+    id: string;
+    text: string;
+  }
+
+  interface PollWithResults {
+    id: string;
+    question: string;
+    options: PollOption[];
+    settings: {
+      multiSelect: boolean;
+      showResults: "always" | "afterVote" | "afterEnd" | "never";
+    };
+    endsAt?: string;
+    isActive: boolean;
+    results: Record<string, number>;
+    totalVotes: number;
+    userVotes?: string[];
+  }
+
+  // Get or create a visitor ID for anonymous users
+  const VISITOR_KEY = "jamwidgets_visitor_id";
+  function getVisitorId(): string {
+    let id = localStorage.getItem(VISITOR_KEY);
+    if (!id) {
+      id = crypto.randomUUID();
+      localStorage.setItem(VISITOR_KEY, id);
+    }
+    return id;
+  }
+
+  document.querySelectorAll("[data-jamwidgets-poll]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+    const pollSlug = (container as HTMLElement).dataset.pollSlug;
+
+    if (!endpoint || !siteKey || !pollSlug) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "X-JamWidgets-Visitor": visitorId,
+    };
+
+    const loadingEl = container.querySelector(".jamwidgets-poll-loading") as HTMLElement;
+    const contentEl = container.querySelector(".jamwidgets-poll-content") as HTMLElement;
+    const errorEl = container.querySelector(".jamwidgets-poll-error") as HTMLElement;
+    const questionEl = container.querySelector(".jamwidgets-poll-question") as HTMLElement;
+    const optionsEl = container.querySelector(".jamwidgets-poll-options") as HTMLElement;
+    const totalEl = container.querySelector(".jamwidgets-poll-total") as HTMLElement;
+    const statusEl = container.querySelector(".jamwidgets-poll-status") as HTMLElement;
+    const submitBtn = container.querySelector(".jamwidgets-poll-submit") as HTMLButtonElement;
+
+    let poll: PollWithResults | null = null;
+    let selectedOptions: Set<string> = new Set();
+
+    async function loadPoll() {
+      try {
+        const response = await fetch(`${endpoint}/polls/${pollSlug}`, { headers });
+        if (!response.ok) throw new Error("Failed to load poll");
+        const data = await response.json();
+        poll = data.poll_with_results;
+        renderPoll();
+      } catch (e) {
+        console.error("Failed to load poll:", e);
+        loadingEl.style.display = "none";
+        errorEl.style.display = "block";
+        errorEl.textContent = "Failed to load poll";
+      }
+    }
+
+    function renderPoll() {
+      if (!poll) return;
+
+      loadingEl.style.display = "none";
+      contentEl.style.display = "block";
+
+      questionEl.textContent = poll.question;
+
+      const hasVoted = poll.userVotes && poll.userVotes.length > 0;
+      const isEnded = poll.endsAt ? new Date(poll.endsAt) < new Date() : false;
+      const canVote = poll.isActive && !isEnded && !hasVoted;
+      const showResults = Object.keys(poll.results).length > 0;
+
+      // Pre-select user's votes if any
+      if (poll.userVotes) {
+        selectedOptions = new Set(poll.userVotes);
+      }
+
+      optionsEl.innerHTML = "";
+      poll.options.forEach((option) => {
+        const optionEl = document.createElement("div");
+        optionEl.className = "jamwidgets-poll-option";
+
+        const votes = poll!.results[option.id] || 0;
+        const percent = poll!.totalVotes > 0 ? Math.round((votes / poll!.totalVotes) * 100) : 0;
+        const isSelected = selectedOptions.has(option.id);
+
+        if (canVote) {
+          // Interactive option
+          const inputType = poll!.settings.multiSelect ? "checkbox" : "radio";
+          optionEl.innerHTML = `
+            <label class="jamwidgets-poll-label ${isSelected ? "jamwidgets-selected" : ""}">
+              <input type="${inputType}" name="poll-${poll!.id}" value="${option.id}" ${isSelected ? "checked" : ""} />
+              <span class="jamwidgets-poll-text">${option.text}</span>
+            </label>
+          `;
+          const input = optionEl.querySelector("input")!;
+          input.addEventListener("change", () => {
+            if (poll!.settings.multiSelect) {
+              if (input.checked) {
+                selectedOptions.add(option.id);
+              } else {
+                selectedOptions.delete(option.id);
+              }
+            } else {
+              selectedOptions = new Set([option.id]);
+            }
+            updateSubmitButton();
+            // Update visual selection
+            optionsEl.querySelectorAll(".jamwidgets-poll-label").forEach((label) => {
+              const labelInput = label.querySelector("input") as HTMLInputElement;
+              label.classList.toggle("jamwidgets-selected", labelInput.checked);
+            });
+          });
+        } else if (showResults) {
+          // Show results
+          optionEl.innerHTML = `
+            <div class="jamwidgets-poll-result ${isSelected ? "jamwidgets-voted" : ""}">
+              <div class="jamwidgets-poll-bar" style="width: ${percent}%"></div>
+              <span class="jamwidgets-poll-text">${option.text}</span>
+              <span class="jamwidgets-poll-percent">${percent}%</span>
+            </div>
+          `;
+        } else {
+          // Show without results (voted but results hidden)
+          optionEl.innerHTML = `
+            <div class="jamwidgets-poll-result jamwidgets-no-results ${isSelected ? "jamwidgets-voted" : ""}">
+              <span class="jamwidgets-poll-text">${option.text}</span>
+            </div>
+          `;
+        }
+        optionsEl.appendChild(optionEl);
+      });
+
+      // Footer
+      if (showResults) {
+        totalEl.textContent = `${poll.totalVotes} vote${poll.totalVotes !== 1 ? "s" : ""}`;
+      } else {
+        totalEl.textContent = "";
+      }
+
+      if (isEnded) {
+        statusEl.textContent = "Ended";
+      } else if (!poll.isActive) {
+        statusEl.textContent = "Closed";
+      } else if (hasVoted) {
+        statusEl.textContent = "Voted";
+      } else {
+        statusEl.textContent = "";
+      }
+
+      // Submit button
+      if (canVote) {
+        submitBtn.style.display = "";
+        updateSubmitButton();
+      } else {
+        submitBtn.style.display = "none";
+      }
+    }
+
+    function updateSubmitButton() {
+      submitBtn.disabled = selectedOptions.size === 0;
+    }
+
+    submitBtn.addEventListener("click", async () => {
+      if (selectedOptions.size === 0) return;
+
+      submitBtn.disabled = true;
+      submitBtn.textContent = "Voting...";
+
+      try {
+        const response = await fetch(`${endpoint}/polls/${pollSlug}/vote`, {
+          method: "POST",
+          headers: {
+            ...headers,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ selectedOptions: Array.from(selectedOptions) }),
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || "Failed to vote");
+        }
+
+        const data = await response.json();
+        const result = data.vote_response;
+
+        // Update poll with new results
+        if (poll) {
+          poll.results = result.results;
+          poll.totalVotes = result.totalVotes;
+          poll.userVotes = Array.from(selectedOptions);
+        }
+
+        container.dispatchEvent(
+          new CustomEvent("jamwidgets:poll-voted", {
+            detail: { pollSlug, selectedOptions: Array.from(selectedOptions), results: result },
+          }),
+        );
+
+        renderPoll();
+      } catch (e) {
+        console.error("Failed to vote:", e);
+        submitBtn.disabled = false;
+        submitBtn.textContent = "Vote";
+        errorEl.style.display = "block";
+        errorEl.textContent = e instanceof Error ? e.message : "Failed to vote";
+        setTimeout(() => {
+          errorEl.style.display = "none";
+        }, 3000);
+      }
+    });
+
+    loadPoll();
+  });
+</script>
+
+<style is:global>
+  .jamwidgets-poll {
+    --jamwidgets-border-color: #e5e7eb;
+    --jamwidgets-bg-color: white;
+    --jamwidgets-text-color: inherit;
+    --jamwidgets-text-muted: #6b7280;
+    --jamwidgets-hover-bg: #f3f4f6;
+    --jamwidgets-selected-bg: #dbeafe;
+    --jamwidgets-selected-border: #3b82f6;
+    --jamwidgets-bar-bg: #dbeafe;
+    --jamwidgets-voted-bar-bg: #3b82f6;
+    --jamwidgets-button-bg: #3b82f6;
+    --jamwidgets-button-text: white;
+    --jamwidgets-button-hover: #2563eb;
+
+    font-family: inherit;
+  }
+
+  /* Dark theme */
+  .jamwidgets-poll.jamwidgets-theme-dark {
+    --jamwidgets-border-color: #374151;
+    --jamwidgets-bg-color: transparent;
+    --jamwidgets-text-color: #f3f4f6;
+    --jamwidgets-text-muted: #9ca3af;
+    --jamwidgets-hover-bg: #374151;
+    --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
+    --jamwidgets-selected-border: #3b82f6;
+    --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
+    --jamwidgets-voted-bar-bg: #3b82f6;
+  }
+
+  /* Auto theme */
+  @media (prefers-color-scheme: dark) {
+    .jamwidgets-poll.jamwidgets-theme-auto {
+      --jamwidgets-border-color: #374151;
+      --jamwidgets-bg-color: transparent;
+      --jamwidgets-text-color: #f3f4f6;
+      --jamwidgets-text-muted: #9ca3af;
+      --jamwidgets-hover-bg: #374151;
+      --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
+      --jamwidgets-selected-border: #3b82f6;
+      --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
+      --jamwidgets-voted-bar-bg: #3b82f6;
+    }
+  }
+
+  .jamwidgets-poll-loading {
+    display: flex;
+    justify-content: center;
+    padding: 2rem;
+  }
+
+  .jamwidgets-poll-spinner {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid var(--jamwidgets-border-color);
+    border-top-color: var(--jamwidgets-button-bg);
+    border-radius: 50%;
+    animation: jamwidgets-spin 0.8s linear infinite;
+  }
+
+  @keyframes jamwidgets-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .jamwidgets-poll-question {
+    font-weight: 600;
+    font-size: 1.125rem;
+    margin: 0 0 0.75rem;
+    color: var(--jamwidgets-text-color);
+  }
+
+  .jamwidgets-poll-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .jamwidgets-poll-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .jamwidgets-poll-label:hover {
+    background: var(--jamwidgets-hover-bg);
+  }
+
+  .jamwidgets-poll-label.jamwidgets-selected {
+    background: var(--jamwidgets-selected-bg);
+    border-color: var(--jamwidgets-selected-border);
+  }
+
+  .jamwidgets-poll-label input {
+    margin: 0;
+  }
+
+  .jamwidgets-poll-result {
+    position: relative;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .jamwidgets-poll-result.jamwidgets-voted {
+    border-color: var(--jamwidgets-selected-border);
+  }
+
+  .jamwidgets-poll-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background: var(--jamwidgets-bar-bg);
+    transition: width 0.3s ease;
+  }
+
+  .jamwidgets-poll-result.jamwidgets-voted .jamwidgets-poll-bar {
+    background: var(--jamwidgets-voted-bar-bg);
+    opacity: 0.2;
+  }
+
+  .jamwidgets-poll-text {
+    position: relative;
+    z-index: 1;
+  }
+
+  .jamwidgets-poll-percent {
+    position: relative;
+    z-index: 1;
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--jamwidgets-text-muted);
+  }
+
+  .jamwidgets-poll-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--jamwidgets-text-muted);
+  }
+
+  .jamwidgets-poll-submit {
+    margin-top: 0.75rem;
+    width: 100%;
+    padding: 0.625rem 1rem;
+    background: var(--jamwidgets-button-bg);
+    color: var(--jamwidgets-button-text);
+    border: none;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .jamwidgets-poll-submit:hover:not(:disabled) {
+    background: var(--jamwidgets-button-hover);
+  }
+
+  .jamwidgets-poll-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .jamwidgets-poll-error {
+    padding: 0.75rem;
+    background: #fef2f2;
+    color: #991b1b;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .jamwidgets-theme-dark .jamwidgets-poll-error,
+  .jamwidgets-theme-auto .jamwidgets-poll-error {
+    background: rgba(239, 68, 68, 0.15);
+    color: #fca5a5;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .jamwidgets-theme-auto .jamwidgets-poll-error {
+      background: rgba(239, 68, 68, 0.15);
+      color: #fca5a5;
+    }
+  }
+</style>