@jamwidgets/astro 0.1.0

package/src/Feedback.astro

@@ -0,0 +1,327 @@
+---
+/**
+ * JamWidgets Feedback Component
+ *
+ * Displays a feedback form for collecting user suggestions.
+ * Supports different feedback types (bug, feature, improvement, other).
+ *
+ * @example
+ * <Feedback siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} />
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: 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";
+  /** Placeholder text for the feedback input (default: 'Share your feedback...') */
+  placeholder?: string;
+  /** Show feedback type selector (default: true) */
+  showTypeSelector?: boolean;
+  /** CSS class to add to the container */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  endpoint = DEFAULT_ENDPOINT,
+  theme = "light",
+  placeholder = "Share your feedback...",
+  showTypeSelector = true,
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-feedback", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-feedback
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+>
+  <form class="jamwidgets-feedback-form">
+    {showTypeSelector && (
+      <div class="jamwidgets-feedback-type-selector">
+        <label class="jamwidgets-feedback-type">
+          <input type="radio" name="feedbackType" value="feature" checked />
+          <span>Feature</span>
+        </label>
+        <label class="jamwidgets-feedback-type">
+          <input type="radio" name="feedbackType" value="bug" />
+          <span>Bug</span>
+        </label>
+        <label class="jamwidgets-feedback-type">
+          <input type="radio" name="feedbackType" value="improvement" />
+          <span>Improvement</span>
+        </label>
+        <label class="jamwidgets-feedback-type">
+          <input type="radio" name="feedbackType" value="other" />
+          <span>Other</span>
+        </label>
+      </div>
+    )}
+    <textarea
+      name="content"
+      class="jamwidgets-feedback-textarea"
+      placeholder={placeholder}
+      rows="3"
+      required
+    ></textarea>
+    <div class="jamwidgets-feedback-footer">
+      <span class="jamwidgets-feedback-message"></span>
+      <button type="submit" class="jamwidgets-feedback-submit">
+        Send Feedback
+      </button>
+    </div>
+  </form>
+</div>
+
+<script>
+  // 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-feedback]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+
+    if (!endpoint || !siteKey) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "X-JamWidgets-Visitor": visitorId,
+      "Content-Type": "application/json",
+    };
+
+    const form = container.querySelector(".jamwidgets-feedback-form") as HTMLFormElement;
+    const textarea = container.querySelector(".jamwidgets-feedback-textarea") as HTMLTextAreaElement;
+    const submitBtn = container.querySelector(".jamwidgets-feedback-submit") as HTMLButtonElement;
+    const messageEl = container.querySelector(".jamwidgets-feedback-message") as HTMLElement;
+
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const content = textarea.value.trim();
+      if (!content) return;
+
+      const typeInput = form.querySelector('input[name="feedbackType"]:checked') as HTMLInputElement | null;
+      const feedbackType = typeInput?.value || "other";
+
+      submitBtn.disabled = true;
+      submitBtn.textContent = "Sending...";
+      messageEl.textContent = "";
+      messageEl.className = "jamwidgets-feedback-message";
+
+      try {
+        const response = await fetch(`${endpoint}/feedback`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ content, feedbackType }),
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || "Failed to submit feedback");
+        }
+
+        textarea.value = "";
+        messageEl.textContent = "Thank you for your feedback!";
+        messageEl.className = "jamwidgets-feedback-message jamwidgets-success";
+
+        container.dispatchEvent(
+          new CustomEvent("jamwidgets:feedback-submitted", {
+            detail: { content, feedbackType },
+          }),
+        );
+
+        setTimeout(() => {
+          messageEl.textContent = "";
+          messageEl.className = "jamwidgets-feedback-message";
+        }, 3000);
+      } catch (e) {
+        console.error("Failed to submit feedback:", e);
+        messageEl.textContent = e instanceof Error ? e.message : "Failed to submit feedback";
+        messageEl.className = "jamwidgets-feedback-message jamwidgets-error";
+      } finally {
+        submitBtn.disabled = false;
+        submitBtn.textContent = "Send Feedback";
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  .jamwidgets-feedback {
+    --jamwidgets-border-color: #9ca3af;
+    --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-button-bg: #3b82f6;
+    --jamwidgets-button-text: white;
+    --jamwidgets-button-hover: #2563eb;
+    --jamwidgets-success-color: #16a34a;
+    --jamwidgets-error-color: #dc2626;
+    font-family: inherit;
+  }
+
+  .jamwidgets-feedback.jamwidgets-theme-dark {
+    --jamwidgets-border-color: #9ca3af;
+    --jamwidgets-bg-color: #374151;
+    --jamwidgets-text-color: #f3f4f6;
+    --jamwidgets-text-muted: #9ca3af;
+    --jamwidgets-hover-bg: #4b5563;
+    --jamwidgets-selected-bg: rgba(59, 130, 246, 0.3);
+    --jamwidgets-selected-border: #60a5fa;
+    --jamwidgets-success-color: #22c55e;
+    --jamwidgets-error-color: #ef4444;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .jamwidgets-feedback.jamwidgets-theme-auto {
+      --jamwidgets-border-color: #9ca3af;
+      --jamwidgets-bg-color: #374151;
+      --jamwidgets-text-color: #f3f4f6;
+      --jamwidgets-text-muted: #9ca3af;
+      --jamwidgets-hover-bg: #4b5563;
+      --jamwidgets-selected-bg: rgba(59, 130, 246, 0.3);
+      --jamwidgets-selected-border: #60a5fa;
+      --jamwidgets-success-color: #22c55e;
+      --jamwidgets-error-color: #ef4444;
+    }
+  }
+
+  .jamwidgets-feedback-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .jamwidgets-feedback-type-selector {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .jamwidgets-feedback-type {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .jamwidgets-feedback-type input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .jamwidgets-feedback-type span {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 9999px;
+    transition: all 0.15s;
+    color: var(--jamwidgets-text-color);
+    background: transparent;
+  }
+
+  .jamwidgets-feedback-type:hover span {
+    background: var(--jamwidgets-hover-bg);
+  }
+
+  .jamwidgets-feedback-type input:checked + span {
+    background: var(--jamwidgets-selected-bg);
+    border-color: var(--jamwidgets-selected-border);
+    color: var(--jamwidgets-selected-border);
+  }
+
+  .jamwidgets-feedback .jamwidgets-feedback-textarea {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.875rem;
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 0.5rem;
+    background: var(--jamwidgets-bg-color);
+    color: var(--jamwidgets-text-color);
+    resize: vertical;
+    min-height: 80px;
+    font-family: inherit;
+  }
+
+  .jamwidgets-feedback .jamwidgets-feedback-textarea:focus {
+    outline: none;
+    border-color: var(--jamwidgets-selected-border);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  }
+
+  .jamwidgets-feedback .jamwidgets-feedback-textarea::placeholder {
+    color: var(--jamwidgets-text-muted);
+  }
+
+  .jamwidgets-feedback-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .jamwidgets-feedback-message {
+    font-size: 0.875rem;
+    color: var(--jamwidgets-text-muted);
+  }
+
+  .jamwidgets-feedback-message.jamwidgets-success {
+    color: var(--jamwidgets-success-color);
+  }
+
+  .jamwidgets-feedback-message.jamwidgets-error {
+    color: var(--jamwidgets-error-color);
+  }
+
+  .jamwidgets-feedback .jamwidgets-feedback-submit {
+    padding: 0.5rem 1rem;
+    background: var(--jamwidgets-button-bg);
+    color: var(--jamwidgets-button-text);
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+    white-space: nowrap;
+  }
+
+  .jamwidgets-feedback .jamwidgets-feedback-submit:hover:not(:disabled) {
+    background: var(--jamwidgets-button-hover);
+  }
+
+  .jamwidgets-feedback .jamwidgets-feedback-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/src/Form.astro

@@ -0,0 +1,237 @@
+---
+/**
+ * JamWidgets Form Component
+ *
+ * A wrapper component that handles form submission to JamWidgets.
+ * You provide your own form fields via the default slot.
+ *
+ * @example
+ * <Form siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} formSlug="contact">
+ *   <input name="name" placeholder="Name" required />
+ *   <input name="email" type="email" placeholder="Email" required />
+ *   <textarea name="message" placeholder="Message" required></textarea>
+ *   <button type="submit">Send</button>
+ * </Form>
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** The form slug as configured in JamWidgets (required) */
+  formSlug: 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 form */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  formSlug,
+  endpoint = DEFAULT_ENDPOINT,
+  theme = "light",
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<form
+  class:list={["jamwidgets-form", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-form
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-form-slug={formSlug}
+>
+  <slot />
+
+  <!-- Honeypot field for spam protection (hidden from users, catches bots) -->
+  <div style="position: absolute; left: -9999px;" aria-hidden="true">
+    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" />
+  </div>
+
+  <!-- Success/Error message container (hidden by default) -->
+  <div class="jamwidgets-form-message" style="display: none;" aria-live="polite"></div>
+</form>
+
+<script>
+  interface FormSubmitResponse {
+    success: boolean;
+    message: 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;
+  }
+
+  // Store form load timestamps for spam detection
+  const formTimestamps = new WeakMap<Element, number>();
+
+  document.querySelectorAll("[data-jamwidgets-form]").forEach((form) => {
+    // Record when form was loaded (for time-based spam detection)
+    formTimestamps.set(form, Math.floor(Date.now() / 1000));
+
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const formEl = e.target as HTMLFormElement;
+      const endpoint = formEl.dataset.endpoint;
+      const siteKey = formEl.dataset.siteKey;
+      const formSlug = formEl.dataset.formSlug;
+      const messageEl = formEl.querySelector(".jamwidgets-form-message") as HTMLElement | null;
+      const submitBtn = formEl.querySelector('[type="submit"]') as HTMLButtonElement | null;
+
+      if (!endpoint || !siteKey || !formSlug) {
+        const missing = [];
+        if (!endpoint) missing.push("endpoint");
+        if (!formSlug) missing.push("formSlug");
+        if (!siteKey) {
+          missing.push("siteKey (check JAMWIDGETS_SITE_KEY in your .env)");
+        }
+        console.error(`JamWidgets form missing required props: ${missing.join(", ")}`);
+        return;
+      }
+
+      // Collect form data
+      const formData = new FormData(formEl);
+      const data: Record<string, unknown> = {};
+      formData.forEach((value, key) => {
+        data[key] = value;
+      });
+
+      // Add timestamp for time-based spam detection
+      const loadTimestamp = formTimestamps.get(formEl);
+      if (loadTimestamp) {
+        data._jamwidgets_ts = loadTimestamp;
+      }
+
+      // Dispatch loading event
+      formEl.dispatchEvent(new CustomEvent("jamwidgets:loading"));
+
+      // Disable submit button
+      if (submitBtn) {
+        submitBtn.disabled = true;
+      }
+
+      try {
+        const response = await fetch(`${endpoint}/forms/${formSlug}/submit`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-JamWidgets-Key": siteKey,
+            "X-JamWidgets-Visitor": getVisitorId(),
+          },
+          body: JSON.stringify(data),
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(errorText || "Submission failed");
+        }
+
+        const result: FormSubmitResponse = await response.json();
+
+        // Show success message
+        if (messageEl) {
+          messageEl.textContent = result.message;
+          messageEl.style.display = "block";
+          messageEl.className = "jamwidgets-form-message jamwidgets-form-success";
+        }
+
+        // Dispatch success event with response data
+        formEl.dispatchEvent(
+          new CustomEvent("jamwidgets:success", {
+            detail: result,
+          }),
+        );
+
+        // Reset form on success
+        formEl.reset();
+      } catch (error) {
+        // Show error message
+        if (messageEl) {
+          messageEl.textContent = error instanceof Error ? error.message : "Something went wrong";
+          messageEl.style.display = "block";
+          messageEl.className = "jamwidgets-form-message jamwidgets-form-error";
+        }
+
+        formEl.dispatchEvent(
+          new CustomEvent("jamwidgets:error", {
+            detail: error,
+          }),
+        );
+      } finally {
+        // Re-enable submit button
+        if (submitBtn) {
+          submitBtn.disabled = false;
+        }
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  @layer jamwidgets {
+    .jamwidgets-form {
+      --jamwidgets-success-bg: #dcfce7;
+      --jamwidgets-success-text: #166534;
+      --jamwidgets-success-border: #bbf7d0;
+      --jamwidgets-error-bg: #fef2f2;
+      --jamwidgets-error-text: #991b1b;
+      --jamwidgets-error-border: #fecaca;
+    }
+
+    /* Dark theme */
+    .jamwidgets-form.jamwidgets-theme-dark {
+      --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
+      --jamwidgets-success-text: #86efac;
+      --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
+      --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
+      --jamwidgets-error-text: #fca5a5;
+      --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
+    }
+
+    /* Auto theme - follows prefers-color-scheme */
+    @media (prefers-color-scheme: dark) {
+      .jamwidgets-form.jamwidgets-theme-auto {
+        --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
+        --jamwidgets-success-text: #86efac;
+        --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
+        --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
+        --jamwidgets-error-text: #fca5a5;
+        --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
+      }
+    }
+
+    .jamwidgets-form-message {
+      margin-top: 1rem;
+      padding: 0.75rem 1rem;
+      border-radius: 0.375rem;
+    }
+
+    .jamwidgets-form-success {
+      background-color: var(--jamwidgets-success-bg);
+      color: var(--jamwidgets-success-text);
+      border: 1px solid var(--jamwidgets-success-border);
+    }
+
+    .jamwidgets-form-error {
+      background-color: var(--jamwidgets-error-bg);
+      color: var(--jamwidgets-error-text);
+      border: 1px solid var(--jamwidgets-error-border);
+    }
+  }
+</style>