@appgram/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,645 @@
+export { useWish } from './chunk-KPIKYXAN.mjs';
+export { HelpArticleDetail, HelpArticles, HelpCenter, HelpCollections, ReleaseCard, ReleaseDetail, ReleaseList, Releases, RoadmapBoard, RoadmapColumn, StatusBoard, StatusIncidentDetail, SubmitWishForm, SupportForm, VoteButton, WhatsNewPopup, WishCard, WishDetail, WishList } from './chunk-AIDLOCVJ.mjs';
+import { getFingerprint, AppgramContext } from './chunk-N6PJDQCU.mjs';
+export { cn, getFingerprint, resetFingerprint, useAppgramContext, useComments, useHelpArticle, useHelpCenter, useHelpFlow, useRelease, useReleases, useRoadmap, useSupport, useVote, useWishes } from './chunk-N6PJDQCU.mjs';
+import { useState, useEffect, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/client/AppgramClient.ts
+var AppgramClient = class {
+  constructor(config) {
+    this.baseUrl = config.baseUrl.replace(/\/$/, "");
+    this.projectId = config.projectId;
+    this.orgSlug = config.orgSlug;
+    this.projectSlug = config.projectSlug;
+  }
+  // ============================================================================
+  // HTTP Methods
+  // ============================================================================
+  async request(method, endpoint, options) {
+    let url = `${this.baseUrl}${endpoint}`;
+    if (options?.params) {
+      const searchParams = new URLSearchParams();
+      Object.entries(options.params).forEach(([key, value]) => {
+        if (value !== void 0 && value !== null && value !== "") {
+          searchParams.append(key, value);
+        }
+      });
+      const queryString = searchParams.toString();
+      if (queryString) {
+        url += `?${queryString}`;
+      }
+    }
+    try {
+      const response = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: options?.body ? JSON.stringify(options.body) : void 0
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        return {
+          success: false,
+          error: {
+            code: String(response.status),
+            message: data.message || data.error || "An error occurred"
+          }
+        };
+      }
+      if (data && typeof data === "object" && "success" in data) {
+        return data;
+      }
+      return {
+        success: true,
+        data
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: {
+          code: "NETWORK_ERROR",
+          message: error instanceof Error ? error.message : "Network error"
+        }
+      };
+    }
+  }
+  get(endpoint, params) {
+    return this.request("GET", endpoint, { params });
+  }
+  /**
+   * Raw request that returns the API response as-is without transformation
+   */
+  async requestRaw(endpoint, params) {
+    let url = `${this.baseUrl}${endpoint}`;
+    if (params) {
+      const searchParams = new URLSearchParams();
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== void 0 && value !== null && value !== "") {
+          searchParams.append(key, value);
+        }
+      });
+      const queryString = searchParams.toString();
+      if (queryString) {
+        url += `?${queryString}`;
+      }
+    }
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        return {
+          success: false,
+          error: {
+            code: String(response.status),
+            message: data.message || data.error || "An error occurred"
+          }
+        };
+      }
+      return data;
+    } catch (error) {
+      return {
+        success: false,
+        error: {
+          code: "NETWORK_ERROR",
+          message: error instanceof Error ? error.message : "Network error"
+        }
+      };
+    }
+  }
+  post(endpoint, body) {
+    return this.request("POST", endpoint, { body });
+  }
+  delete(endpoint) {
+    return this.request("DELETE", endpoint);
+  }
+  // ============================================================================
+  // Wishes
+  // ============================================================================
+  /**
+   * Get public wishes for the project
+   */
+  async getPublicWishes(filters) {
+    const params = {
+      project_id: this.projectId
+    };
+    if (filters?.status) {
+      params.status = Array.isArray(filters.status) ? filters.status.join(",") : filters.status;
+    }
+    if (filters?.category_id) params.category_id = filters.category_id;
+    if (filters?.search) params.search = filters.search;
+    if (filters?.sort_by) params.sort_by = filters.sort_by;
+    if (filters?.sort_order) params.sort_order = filters.sort_order;
+    if (filters?.page) params.page = String(filters.page);
+    if (filters?.per_page) params.per_page = String(filters.per_page);
+    if (filters?.fingerprint) params.fingerprint = filters.fingerprint;
+    const rawResponse = await this.requestRaw("/portal/wishes", params);
+    if (!rawResponse.success) {
+      return {
+        success: false,
+        error: rawResponse.error
+      };
+    }
+    return {
+      success: true,
+      data: {
+        data: rawResponse.data || [],
+        total: rawResponse.total || 0,
+        page: rawResponse.page || 1,
+        per_page: rawResponse.per_page || 20,
+        total_pages: rawResponse.total_pages || 0
+      }
+    };
+  }
+  /**
+   * Get a single wish by ID
+   */
+  async getWish(wishId) {
+    return this.get(`/portal/wishes/${wishId}`, {
+      project_id: this.projectId
+    });
+  }
+  /**
+   * Create a new wish (feature request)
+   */
+  async createWish(data) {
+    return this.post("/portal/wishes", {
+      project_id: this.projectId,
+      ...data
+    });
+  }
+  // ============================================================================
+  // Votes
+  // ============================================================================
+  /**
+   * Check if a fingerprint has voted on a wish
+   */
+  async checkVote(wishId, fingerprint) {
+    return this.get(`/api/v1/votes/check/${wishId}`, {
+      fingerprint
+    });
+  }
+  /**
+   * Create a vote
+   */
+  async createVote(wishId, fingerprint, voterEmail) {
+    return this.post("/api/v1/votes", {
+      wish_id: wishId,
+      fingerprint,
+      voter_email: voterEmail
+    });
+  }
+  /**
+   * Delete a vote
+   */
+  async deleteVote(voteId) {
+    return this.delete(`/api/v1/votes/${voteId}`);
+  }
+  // ============================================================================
+  // Comments
+  // ============================================================================
+  /**
+   * Get comments for a wish
+   */
+  async getComments(wishId, options) {
+    const params = {
+      wish_id: wishId
+    };
+    if (options?.page) params.page = String(options.page);
+    if (options?.per_page) params.per_page = String(options.per_page);
+    const response = await this.get("/api/v1/comments", params);
+    if (!response.success) {
+      return {
+        success: false,
+        error: response.error
+      };
+    }
+    const comments = response.data || [];
+    return {
+      success: true,
+      data: {
+        data: comments,
+        total: comments.length,
+        page: options?.page || 1,
+        per_page: options?.per_page || 20,
+        total_pages: 1
+      }
+    };
+  }
+  /**
+   * Create a comment
+   */
+  async createComment(data) {
+    return this.post("/api/v1/comments", {
+      ...data,
+      author_type: "anonymous",
+      is_official: false
+    });
+  }
+  // ============================================================================
+  // Roadmap
+  // ============================================================================
+  /**
+   * Get roadmap data for the project
+   */
+  async getRoadmapData() {
+    const params = {
+      project_id: this.projectId
+    };
+    if (this.orgSlug && this.projectSlug) {
+      params.org_slug = this.orgSlug;
+      params.project_slug = this.projectSlug;
+    }
+    return this.get("/portal/roadmap-data", params);
+  }
+  // ============================================================================
+  // Releases
+  // ============================================================================
+  /**
+   * Get public releases for the project
+   */
+  async getReleases(options) {
+    if (!this.orgSlug || !this.projectSlug) {
+      return {
+        success: false,
+        error: {
+          code: "MISSING_SLUGS",
+          message: "orgSlug and projectSlug are required for releases endpoint"
+        }
+      };
+    }
+    const params = {};
+    if (options?.limit) params.limit = String(options.limit);
+    return this.get(
+      `/api/v1/releases/public/${this.orgSlug}/${this.projectSlug}`,
+      params
+    );
+  }
+  /**
+   * Get a single release by slug
+   */
+  async getRelease(releaseSlug) {
+    if (!this.orgSlug || !this.projectSlug) {
+      return {
+        success: false,
+        error: {
+          code: "MISSING_SLUGS",
+          message: "orgSlug and projectSlug are required for releases endpoint"
+        }
+      };
+    }
+    return this.get(
+      `/api/v1/releases/public/${this.orgSlug}/${this.projectSlug}/${releaseSlug}`
+    );
+  }
+  /**
+   * Get features for a release (public endpoint)
+   */
+  async getReleaseFeatures(releaseSlug) {
+    if (!this.orgSlug || !this.projectSlug) {
+      return {
+        success: false,
+        error: {
+          code: "MISSING_SLUGS",
+          message: "orgSlug and projectSlug are required for release features endpoint"
+        }
+      };
+    }
+    return this.get(
+      `/api/v1/releases/public/${this.orgSlug}/${this.projectSlug}/${releaseSlug}/features`
+    );
+  }
+  // ============================================================================
+  // Help Center
+  // ============================================================================
+  /**
+   * Get help center collection for the project
+   */
+  async getHelpCollection() {
+    return this.get("/portal/help", {
+      project_id: this.projectId
+    });
+  }
+  /**
+   * Get a help flow by slug
+   */
+  async getHelpFlow(slug) {
+    return this.get(`/portal/help/flows/${slug}`, {
+      project_id: this.projectId
+    });
+  }
+  /**
+   * Get a help article by slug
+   */
+  async getHelpArticle(slug, flowId) {
+    return this.get(`/portal/help/articles/${slug}`, {
+      flow_id: flowId
+    });
+  }
+  // ============================================================================
+  // Support
+  // ============================================================================
+  /**
+   * Upload a file via public portal (no auth required)
+   */
+  async uploadFile(file) {
+    const url = `${this.baseUrl}/portal/files/upload`;
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("project_id", this.projectId);
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        body: formData
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        return {
+          success: false,
+          error: {
+            code: data.error?.code || "UPLOAD_ERROR",
+            message: data.error?.message || data.message || "File upload failed"
+          }
+        };
+      }
+      return {
+        success: true,
+        data: data.data || data
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: {
+          code: "UPLOAD_ERROR",
+          message: error instanceof Error ? error.message : "File upload failed"
+        }
+      };
+    }
+  }
+  /**
+   * Submit a support request
+   */
+  async submitSupportRequest(data) {
+    const uploadedAttachments = [];
+    if (data.attachments && data.attachments.length > 0) {
+      for (const file of data.attachments) {
+        if (file.size > 10 * 1024 * 1024) {
+          return {
+            success: false,
+            error: {
+              code: "FILE_TOO_LARGE",
+              message: `File "${file.name}" is too large. Maximum size is 10MB.`
+            }
+          };
+        }
+        const uploadResponse = await this.uploadFile(file);
+        if (uploadResponse.success && uploadResponse.data) {
+          uploadedAttachments.push({
+            url: uploadResponse.data.url,
+            name: uploadResponse.data.name,
+            size: uploadResponse.data.size,
+            mime_type: uploadResponse.data.mime_type
+          });
+        } else {
+          return {
+            success: false,
+            error: uploadResponse.error || {
+              code: "UPLOAD_ERROR",
+              message: "Failed to upload attachment"
+            }
+          };
+        }
+      }
+    }
+    const payload = {
+      project_id: this.projectId,
+      subject: data.subject,
+      description: data.description,
+      user_email: data.user_email
+    };
+    if (data.user_name) payload.user_name = data.user_name;
+    if (data.category) payload.category = data.category;
+    if (uploadedAttachments.length > 0) payload.attachments = uploadedAttachments;
+    return this.post("/portal/support-requests", payload);
+  }
+  /**
+   * Request a magic link to access support tickets
+   */
+  async sendSupportMagicLink(userEmail) {
+    return this.post("/portal/support-requests/send-magic-link", {
+      project_id: this.projectId,
+      user_email: userEmail
+    });
+  }
+  /**
+   * Verify magic link token and get user's support tickets
+   */
+  async verifySupportToken(token) {
+    return this.get(
+      "/portal/support-requests/verify-token",
+      {
+        token,
+        project_id: this.projectId
+      }
+    );
+  }
+  /**
+   * Get a specific support ticket using magic link token
+   */
+  async getSupportTicket(ticketId, token) {
+    return this.get(`/portal/support-requests/${ticketId}`, {
+      token
+    });
+  }
+  /**
+   * Add a message to a support ticket
+   */
+  async addSupportMessage(ticketId, token, content) {
+    const url = `/portal/support-requests/${ticketId}/messages`;
+    const fullUrl = `${this.baseUrl}${url}`;
+    try {
+      const response = await fetch(fullUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({ content })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        return {
+          success: false,
+          error: {
+            code: String(response.status),
+            message: data.message || data.error || "An error occurred"
+          }
+        };
+      }
+      if (data && typeof data === "object" && "success" in data) {
+        return data;
+      }
+      return {
+        success: true,
+        data
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: {
+          code: "NETWORK_ERROR",
+          message: error instanceof Error ? error.message : "Network error"
+        }
+      };
+    }
+  }
+  // ============================================================================
+  // Page Data (Combined)
+  // ============================================================================
+  /**
+   * Get all public page data in one request
+   */
+  async getPageData() {
+    const params = {
+      project_id: this.projectId
+    };
+    if (this.orgSlug) params.org_slug = this.orgSlug;
+    if (this.projectSlug) params.project_slug = this.projectSlug;
+    return this.get("/portal/page-data", params);
+  }
+};
+var DEFAULT_API_URL = "https://api.appgram.dev";
+var DEFAULT_LIGHT_COLORS = {
+  primary: "#0EA5E9",
+  // Arctic blue
+  secondary: "#6B7280",
+  // Gray
+  accent: "#0EA5E9",
+  // Arctic blue
+  background: "#FFFFFF",
+  // White
+  text: "#242424",
+  // Near-black
+  cardBackground: "#F7F7F7",
+  cardText: "#242424"
+};
+var DEFAULT_DARK_COLORS = {
+  primary: "#38BDF8",
+  // Lighter arctic blue
+  secondary: "#3A3A3A",
+  // Dark gray (subtle for borders)
+  accent: "#38BDF8",
+  // Lighter arctic blue
+  background: "#0A0A0A",
+  // Near-black
+  text: "#E5E5E5",
+  // Light gray
+  cardBackground: "#1A1A1A",
+  cardText: "#E5E5E5"
+};
+var DEFAULT_THEME = {
+  typography: {
+    fontFamily: "inherit"
+  },
+  borderRadius: 8
+};
+function getSystemIsDark() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function resolveIsDark(mode) {
+  if (mode === "dark") return true;
+  if (mode === "light") return false;
+  return getSystemIsDark();
+}
+function AppgramProvider({
+  config,
+  children
+}) {
+  const [fingerprint, setFingerprint] = useState(null);
+  const themeMode = config.theme?.mode ?? "system";
+  const [isDark, setIsDark] = useState(() => resolveIsDark(themeMode));
+  useEffect(() => {
+    if (config.enableFingerprinting !== false) {
+      setFingerprint(getFingerprint());
+    }
+  }, [config.enableFingerprinting]);
+  useEffect(() => {
+    if (themeMode !== "system" || typeof window === "undefined") {
+      setIsDark(resolveIsDark(themeMode));
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    setIsDark(mediaQuery.matches);
+    const handler = (e) => setIsDark(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [themeMode]);
+  const client = useMemo(() => {
+    return new AppgramClient({
+      baseUrl: config.apiUrl || DEFAULT_API_URL,
+      projectId: config.projectId,
+      orgSlug: config.orgSlug,
+      projectSlug: config.projectSlug
+    });
+  }, [config.apiUrl, config.projectId, config.orgSlug, config.projectSlug]);
+  const lightColors = useMemo(() => ({
+    ...DEFAULT_LIGHT_COLORS,
+    ...config.theme?.colors
+  }), [config.theme?.colors]);
+  const darkColors = useMemo(() => ({
+    ...DEFAULT_DARK_COLORS,
+    ...config.theme?.darkColors
+  }), [config.theme?.darkColors]);
+  const currentColors = isDark ? darkColors : lightColors;
+  const theme = useMemo(() => {
+    return {
+      mode: themeMode,
+      colors: lightColors,
+      darkColors,
+      typography: {
+        ...DEFAULT_THEME.typography,
+        ...config.theme?.typography
+      },
+      borderRadius: config.theme?.borderRadius ?? DEFAULT_THEME.borderRadius,
+      // Include resolved state for components
+      isDark,
+      currentColors
+    };
+  }, [themeMode, lightColors, darkColors, config.theme?.typography, config.theme?.borderRadius, isDark, currentColors]);
+  const contextValue = useMemo(() => ({
+    config: {
+      ...config,
+      apiUrl: config.apiUrl || DEFAULT_API_URL
+    },
+    client,
+    fingerprint,
+    theme
+  }), [config, client, fingerprint, theme]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const colors = currentColors;
+    root.setAttribute("data-appgram-theme", isDark ? "dark" : "light");
+    if (colors.primary) root.style.setProperty("--appgram-primary", colors.primary);
+    if (colors.secondary) root.style.setProperty("--appgram-secondary", colors.secondary);
+    if (colors.accent) root.style.setProperty("--appgram-accent", colors.accent);
+    if (colors.background) root.style.setProperty("--appgram-background", colors.background);
+    if (colors.text) root.style.setProperty("--appgram-foreground", colors.text);
+    if (colors.cardBackground) root.style.setProperty("--appgram-card", colors.cardBackground);
+    if (colors.cardText) root.style.setProperty("--appgram-card-foreground", colors.cardText);
+    if (theme.borderRadius) root.style.setProperty("--appgram-radius", `${theme.borderRadius}px`);
+    if (theme.typography?.fontFamily) root.style.setProperty("--appgram-font-family", theme.typography.fontFamily);
+  }, [currentColors, isDark, theme.borderRadius, theme.typography?.fontFamily]);
+  return /* @__PURE__ */ jsx(AppgramContext.Provider, { value: contextValue, children });
+}
+
+export { AppgramClient, AppgramProvider };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map