@appgram/react 0.1.0 → 0.1.3

package/dist/{useVote-CLhkwtLT.d.mts → StatusBoard-DhKRu-An.d.mts}

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * Wish (Feature Request) Types
  */
@@ -417,4 +419,126 @@ interface UseVoteResult {
 }
 declare function useVote(options: UseVoteOptions): UseVoteResult;
 
-export { type ArticleType as A, type WishPriority as B, type CommentsResponse as C, type WishStatus as D, useVote as E, type FlowDisplayType as F, type HelpCollection as H, type RoadmapData as R, type SupportRequestInput as S, type UseVoteOptions as U, type WishFilters as W, type WishesResponse as a, type Wish as b, type Comment as c, type Release as d, type ReleaseFeature as e, type HelpFlow as f, type HelpArticle as g, type SupportRequest as h, type Category as i, type CommentAuthor as j, type CommentCreateInput as k, type HelpArticlesResponse as l, type HelpCenterData as m, type ReleasesResponse as n, type Roadmap as o, type RoadmapColumn as p, type RoadmapItem as q, type RoadmapVisibility as r, type SupportAttachment as s, type SupportMessage as t, type SupportRequestCategory as u, type SupportRequestPriority as v, type SupportRequestStatus as w, type SupportRequestsResponse as x, type UseVoteResult as y, type WishAuthor as z };
+/**
+ * StatusBoard Component
+ *
+ * Modern system status page with service health indicators and incident tracking.
+ * Adapted from StatusModern variant.
+ *
+ * @example
+ * ```tsx
+ * import { StatusBoard } from '@appgram/react'
+ *
+ * <StatusBoard
+ *   heading="System Status"
+ *   description="Current operational status of all services"
+ *   status={statusData}
+ *   onIncidentClick={(incident) => openIncidentDetail(incident.id)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom component rendering
+ * <StatusBoard
+ *   status={statusData}
+ *   renderComponent={(component) => (
+ *     <div className="custom-card">
+ *       <Icon name={component.status} />
+ *       <span>{component.name}</span>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+
+type OverallStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+type ComponentStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+type IncidentStatus = 'investigating' | 'identified' | 'monitoring' | 'resolved';
+type IncidentImpact = 'minor' | 'major' | 'critical';
+interface StatusComponent {
+    id: string;
+    name: string;
+    description?: string;
+    status: ComponentStatus;
+    group?: string;
+}
+interface IncidentUpdate {
+    id: string;
+    message: string;
+    status: IncidentStatus;
+    created_at: string;
+}
+interface StatusIncident {
+    id: string;
+    title: string;
+    status: IncidentStatus;
+    impact: IncidentImpact;
+    created_at: string;
+    resolved_at?: string | null;
+    updates: IncidentUpdate[];
+    affected_components?: string[];
+}
+interface StatusData {
+    overall_status: OverallStatus;
+    components: StatusComponent[];
+    incidents: StatusIncident[];
+    last_updated?: string;
+}
+interface StatusBoardProps {
+    /**
+     * Status data to display
+     */
+    status: StatusData;
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Show component descriptions
+     * @default true
+     */
+    showComponentDescriptions?: boolean;
+    /**
+     * Show incident history
+     * @default true
+     */
+    showIncidentHistory?: boolean;
+    /**
+     * Max number of past incidents to show
+     * @default 5
+     */
+    maxPastIncidents?: number;
+    /**
+     * Click handler for incidents
+     */
+    onIncidentClick?: (incident: StatusIncident) => void;
+    /**
+     * Custom render for overall status
+     */
+    renderOverallStatus?: (status: OverallStatus) => React.ReactNode;
+    /**
+     * Custom render for component
+     */
+    renderComponent?: (component: StatusComponent) => React.ReactNode;
+    /**
+     * Custom render for incident
+     */
+    renderIncident?: (incident: StatusIncident) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function StatusBoard({ status, heading, description, headingAlignment, showComponentDescriptions, showIncidentHistory, maxPastIncidents, onIncidentClick, renderOverallStatus, renderComponent, renderIncident, className, }: StatusBoardProps): React.ReactElement;
+
+export { type ArticleType as A, type SupportAttachment as B, type CommentsResponse as C, type SupportMessage as D, type SupportRequestCategory as E, type FlowDisplayType as F, type SupportRequestPriority as G, type HelpCollection as H, type IncidentImpact as I, type SupportRequestStatus as J, type SupportRequestsResponse as K, type UseVoteResult as L, type WishAuthor as M, type WishPriority as N, type OverallStatus as O, type WishStatus as P, useVote as Q, type RoadmapData as R, type SupportRequestInput as S, type UseVoteOptions as U, type WishFilters as W, type WishesResponse as a, type Wish as b, type Comment as c, type Release as d, type ReleaseFeature as e, type HelpFlow as f, type HelpArticle as g, type SupportRequest as h, type Category as i, type CommentAuthor as j, type CommentCreateInput as k, type ComponentStatus as l, type HelpArticlesResponse as m, type HelpCenterData as n, type IncidentStatus as o, type IncidentUpdate as p, type ReleasesResponse as q, type Roadmap as r, type RoadmapColumn as s, type RoadmapItem as t, type RoadmapVisibility as u, StatusBoard as v, type StatusBoardProps as w, type StatusComponent as x, type StatusData as y, type StatusIncident as z };

package/dist/{useVote-CLhkwtLT.d.ts → StatusBoard-DhKRu-An.d.ts}

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * Wish (Feature Request) Types
  */
@@ -417,4 +419,126 @@ interface UseVoteResult {
 }
 declare function useVote(options: UseVoteOptions): UseVoteResult;
 
-export { type ArticleType as A, type WishPriority as B, type CommentsResponse as C, type WishStatus as D, useVote as E, type FlowDisplayType as F, type HelpCollection as H, type RoadmapData as R, type SupportRequestInput as S, type UseVoteOptions as U, type WishFilters as W, type WishesResponse as a, type Wish as b, type Comment as c, type Release as d, type ReleaseFeature as e, type HelpFlow as f, type HelpArticle as g, type SupportRequest as h, type Category as i, type CommentAuthor as j, type CommentCreateInput as k, type HelpArticlesResponse as l, type HelpCenterData as m, type ReleasesResponse as n, type Roadmap as o, type RoadmapColumn as p, type RoadmapItem as q, type RoadmapVisibility as r, type SupportAttachment as s, type SupportMessage as t, type SupportRequestCategory as u, type SupportRequestPriority as v, type SupportRequestStatus as w, type SupportRequestsResponse as x, type UseVoteResult as y, type WishAuthor as z };
+/**
+ * StatusBoard Component
+ *
+ * Modern system status page with service health indicators and incident tracking.
+ * Adapted from StatusModern variant.
+ *
+ * @example
+ * ```tsx
+ * import { StatusBoard } from '@appgram/react'
+ *
+ * <StatusBoard
+ *   heading="System Status"
+ *   description="Current operational status of all services"
+ *   status={statusData}
+ *   onIncidentClick={(incident) => openIncidentDetail(incident.id)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom component rendering
+ * <StatusBoard
+ *   status={statusData}
+ *   renderComponent={(component) => (
+ *     <div className="custom-card">
+ *       <Icon name={component.status} />
+ *       <span>{component.name}</span>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+
+type OverallStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+type ComponentStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+type IncidentStatus = 'investigating' | 'identified' | 'monitoring' | 'resolved';
+type IncidentImpact = 'minor' | 'major' | 'critical';
+interface StatusComponent {
+    id: string;
+    name: string;
+    description?: string;
+    status: ComponentStatus;
+    group?: string;
+}
+interface IncidentUpdate {
+    id: string;
+    message: string;
+    status: IncidentStatus;
+    created_at: string;
+}
+interface StatusIncident {
+    id: string;
+    title: string;
+    status: IncidentStatus;
+    impact: IncidentImpact;
+    created_at: string;
+    resolved_at?: string | null;
+    updates: IncidentUpdate[];
+    affected_components?: string[];
+}
+interface StatusData {
+    overall_status: OverallStatus;
+    components: StatusComponent[];
+    incidents: StatusIncident[];
+    last_updated?: string;
+}
+interface StatusBoardProps {
+    /**
+     * Status data to display
+     */
+    status: StatusData;
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Show component descriptions
+     * @default true
+     */
+    showComponentDescriptions?: boolean;
+    /**
+     * Show incident history
+     * @default true
+     */
+    showIncidentHistory?: boolean;
+    /**
+     * Max number of past incidents to show
+     * @default 5
+     */
+    maxPastIncidents?: number;
+    /**
+     * Click handler for incidents
+     */
+    onIncidentClick?: (incident: StatusIncident) => void;
+    /**
+     * Custom render for overall status
+     */
+    renderOverallStatus?: (status: OverallStatus) => React.ReactNode;
+    /**
+     * Custom render for component
+     */
+    renderComponent?: (component: StatusComponent) => React.ReactNode;
+    /**
+     * Custom render for incident
+     */
+    renderIncident?: (incident: StatusIncident) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function StatusBoard({ status, heading, description, headingAlignment, showComponentDescriptions, showIncidentHistory, maxPastIncidents, onIncidentClick, renderOverallStatus, renderComponent, renderIncident, className, }: StatusBoardProps): React.ReactElement;
+
+export { type ArticleType as A, type SupportAttachment as B, type CommentsResponse as C, type SupportMessage as D, type SupportRequestCategory as E, type FlowDisplayType as F, type SupportRequestPriority as G, type HelpCollection as H, type IncidentImpact as I, type SupportRequestStatus as J, type SupportRequestsResponse as K, type UseVoteResult as L, type WishAuthor as M, type WishPriority as N, type OverallStatus as O, type WishStatus as P, useVote as Q, type RoadmapData as R, type SupportRequestInput as S, type UseVoteOptions as U, type WishFilters as W, type WishesResponse as a, type Wish as b, type Comment as c, type Release as d, type ReleaseFeature as e, type HelpFlow as f, type HelpArticle as g, type SupportRequest as h, type Category as i, type CommentAuthor as j, type CommentCreateInput as k, type ComponentStatus as l, type HelpArticlesResponse as m, type HelpCenterData as n, type IncidentStatus as o, type IncidentUpdate as p, type ReleasesResponse as q, type Roadmap as r, type RoadmapColumn as s, type RoadmapItem as t, type RoadmapVisibility as u, StatusBoard as v, type StatusBoardProps as w, type StatusComponent as x, type StatusData as y, type StatusIncident as z };

package/dist/{chunk-N6PJDQCU.mjs → chunk-NABMGLTY.mjs}

@@ -44,9 +44,7 @@ function getBrowserCharacteristics() {
 function generateFingerprint() {
   const characteristics = getBrowserCharacteristics();
   const timestamp = Date.now().toString(36);
-  const randomBytes = new Uint8Array(6);
-  crypto.getRandomValues(randomBytes);
-  const random = Array.from(randomBytes, (b) => b.toString(36)).join("").substring(0, 10);
+  const random = Math.random().toString(36).substring(2, 10);
   return `${simpleHash(characteristics)}-${timestamp}-${random}`;
 }
 function getFingerprint() {
@@ -735,7 +733,213 @@ function useSupport(options = {}) {
     clearMessages
   };
 }
+function useSurvey(slug, options = {}) {
+  const { enabled = true } = options;
+  const { client } = useAppgramContext();
+  const [survey, setSurvey] = useState(null);
+  const [nodes, setNodes] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchSurvey = useCallback(async () => {
+    if (!slug) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await client.getPublicSurvey(slug);
+      if (response.success && response.data) {
+        const { nodes: surveyNodes, ...surveyData } = response.data;
+        setSurvey(surveyData);
+        setNodes(surveyNodes || []);
+      } else {
+        setError(getErrorMessage(response.error, "Failed to fetch survey"));
+      }
+    } catch (err) {
+      setError(getErrorMessage(err, "An error occurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, slug]);
+  useEffect(() => {
+    if (enabled) {
+      fetchSurvey();
+    }
+  }, [enabled, fetchSurvey]);
+  return {
+    survey,
+    nodes,
+    isLoading,
+    error,
+    refetch: fetchSurvey
+  };
+}
+function useSurveySubmit(options = {}) {
+  const { client } = useAppgramContext();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  const clearMessages = useCallback(() => {
+    setError(null);
+    setSuccessMessage(null);
+  }, []);
+  const submitResponse = useCallback(
+    async (surveyId, data) => {
+      setIsSubmitting(true);
+      setError(null);
+      setSuccessMessage(null);
+      try {
+        const response = await client.submitSurveyResponse(surveyId, data);
+        if (response.success && response.data) {
+          setSuccessMessage("Survey response submitted successfully.");
+          options.onSuccess?.(response.data);
+          return response.data;
+        } else {
+          const errorMsg = getErrorMessage(response.error, "Failed to submit survey response");
+          setError(errorMsg);
+          options.onError?.(errorMsg);
+          return null;
+        }
+      } catch (err) {
+        const errorMsg = getErrorMessage(err, "An error occurred");
+        setError(errorMsg);
+        options.onError?.(errorMsg);
+        return null;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [client, options]
+  );
+  return {
+    isSubmitting,
+    error,
+    successMessage,
+    submitResponse,
+    clearMessages
+  };
+}
+function useContactForm(formId, options = {}) {
+  const { enabled = true } = options;
+  const { client } = useAppgramContext();
+  const [form, setForm] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchForm = useCallback(async () => {
+    if (!formId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await client.getPublicForm(formId);
+      if (response.success && response.data) {
+        setForm(response.data);
+      } else {
+        setError(getErrorMessage(response.error, "Failed to fetch form"));
+      }
+    } catch (err) {
+      setError(getErrorMessage(err, "An error occurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, formId]);
+  useEffect(() => {
+    if (enabled) {
+      fetchForm();
+    }
+  }, [enabled, fetchForm]);
+  return {
+    form,
+    isLoading,
+    error,
+    refetch: fetchForm
+  };
+}
+function useContactFormSubmit(options = {}) {
+  const { rateLimitMs = 5e3 } = options;
+  const { client } = useAppgramContext();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  const [isRateLimited, setIsRateLimited] = useState(false);
+  const lastSubmitRef = useRef(0);
+  const clearMessages = useCallback(() => {
+    setError(null);
+    setSuccessMessage(null);
+  }, []);
+  const validateField = useCallback(
+    (value, field) => {
+      if (field.required && !value.trim()) {
+        return "This field is required";
+      }
+      if (field.type === "email" && value) {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          return "Please enter a valid email address";
+        }
+      }
+      if (field.validation) {
+        if (field.validation.minLength && value.length < field.validation.minLength) {
+          return `Must be at least ${field.validation.minLength} characters`;
+        }
+        if (field.validation.maxLength && value.length > field.validation.maxLength) {
+          return `Must be no more than ${field.validation.maxLength} characters`;
+        }
+        if (field.validation.pattern) {
+          const regex = new RegExp(field.validation.pattern);
+          if (!regex.test(value)) {
+            return "Invalid format";
+          }
+        }
+      }
+      return null;
+    },
+    []
+  );
+  const submitForm = useCallback(
+    async (projectId, formId, data) => {
+      const now = Date.now();
+      if (now - lastSubmitRef.current < rateLimitMs) {
+        setIsRateLimited(true);
+        setError("Please wait before submitting again.");
+        setTimeout(() => setIsRateLimited(false), rateLimitMs - (now - lastSubmitRef.current));
+        return null;
+      }
+      setIsSubmitting(true);
+      setError(null);
+      setSuccessMessage(null);
+      try {
+        const response = await client.submitContactForm(projectId, formId, data);
+        if (response.success && response.data) {
+          lastSubmitRef.current = Date.now();
+          setSuccessMessage("Form submitted successfully.");
+          options.onSuccess?.(response.data);
+          return response.data;
+        } else {
+          const errorMsg = getErrorMessage(response.error, "Failed to submit form");
+          setError(errorMsg);
+          options.onError?.(errorMsg);
+          return null;
+        }
+      } catch (err) {
+        const errorMsg = getErrorMessage(err, "An error occurred");
+        setError(errorMsg);
+        options.onError?.(errorMsg);
+        return null;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [client, options, rateLimitMs]
+  );
+  return {
+    isSubmitting,
+    error,
+    successMessage,
+    isRateLimited,
+    submitForm,
+    validateField,
+    clearMessages
+  };
+}
 
-export { AppgramContext, cn, getErrorMessage, getFingerprint, resetFingerprint, useAppgramContext, useComments, useHelpArticle, useHelpCenter, useHelpFlow, useRelease, useReleases, useRoadmap, useSupport, useVote, useWishes };
-//# sourceMappingURL=chunk-N6PJDQCU.mjs.map
-//# sourceMappingURL=chunk-N6PJDQCU.mjs.map
+export { AppgramContext, cn, getErrorMessage, getFingerprint, resetFingerprint, useAppgramContext, useComments, useContactForm, useContactFormSubmit, useHelpArticle, useHelpCenter, useHelpFlow, useRelease, useReleases, useRoadmap, useSupport, useSurvey, useSurveySubmit, useVote, useWishes };
+//# sourceMappingURL=chunk-NABMGLTY.mjs.map
+//# sourceMappingURL=chunk-NABMGLTY.mjs.map