Add surveys & contact forms support (v0.1.2)

Add survey rendering with branching logic (6 question types) and
contact form support with validation and rate limiting. Includes
types, client methods, hooks, and UI components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: nedimf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appgram/react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React library for integrating Appgram portal features with pre-built UI components and headless hooks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/client/AppgramClient.ts

@@ -21,6 +21,13 @@ import type {
   HelpArticle,
   SupportRequest,
   SupportRequestInput,
+  Survey,
+  SurveyNode,
+  SurveyResponse,
+  SurveySubmitInput,
+  ContactForm,
+  ContactFormSubmission,
+  ContactFormSubmitInput,
 } from '../types'
 
 export interface AppgramClientConfig {
@@ -612,48 +619,65 @@ export class AppgramClient {
     token: string,
     content: string
   ): Promise<ApiResponse<{ id: string; content: string; created_at: string }>> {
-    const url = `/portal/support-requests/${ticketId}/messages`
-    const fullUrl = `${this.baseUrl}${url}`
+    return this.post<{ id: string; content: string; created_at: string }>(
+      `/portal/support-requests/${ticketId}/messages?token=${encodeURIComponent(token)}`,
+      { content }
+    )
+  }
 
-    try {
-      const response = await fetch(fullUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-        },
-        body: JSON.stringify({ content }),
-      })
+  // ============================================================================
+  // Surveys
+  // ============================================================================
 
-      const data = await response.json()
+  /**
+   * Get a public survey by slug
+   */
+  async getPublicSurvey(slug: string): Promise<ApiResponse<Survey & { nodes: SurveyNode[] }>> {
+    return this.get<Survey & { nodes: SurveyNode[] }>(`/portal/surveys/${slug}`, {
+      project_id: this.projectId,
+    })
+  }
 
-      if (!response.ok) {
-        return {
-          success: false,
-          error: {
-            code: String(response.status),
-            message: data.message || data.error || 'An error occurred',
-          },
-        }
-      }
+  /**
+   * Submit a survey response
+   */
+  async submitSurveyResponse(
+    surveyId: string,
+    data: SurveySubmitInput
+  ): Promise<ApiResponse<SurveyResponse>> {
+    return this.post<SurveyResponse>(`/portal/surveys/${surveyId}/responses`, data)
+  }
 
-      if (data && typeof data === 'object' && 'success' in data) {
-        return data
-      }
+  /**
+   * Get survey customization settings
+   */
+  async getPublicSurveyCustomization(surveyId: string): Promise<ApiResponse<Record<string, unknown>>> {
+    return this.get<Record<string, unknown>>(`/portal/surveys/customization/${surveyId}`)
+  }
 
-      return {
-        success: true,
-        data: data as { id: string; content: string; created_at: string },
-      }
-    } catch (error) {
-      return {
-        success: false,
-        error: {
-          code: 'NETWORK_ERROR',
-          message: error instanceof Error ? error.message : 'Network error',
-        },
-      }
-    }
+  // ============================================================================
+  // Contact Forms
+  // ============================================================================
+
+  /**
+   * Get a public contact form by ID
+   */
+  async getPublicForm(formId: string): Promise<ApiResponse<ContactForm>> {
+    return this.get<ContactForm>(`/api/v1/forms/${formId}`)
+  }
+
+  /**
+   * Submit a contact form
+   */
+  async submitContactForm(
+    projectId: string,
+    formId: string,
+    data: ContactFormSubmitInput
+  ): Promise<ApiResponse<ContactFormSubmission>> {
+    return this.post<ContactFormSubmission>(
+      `/api/v1/projects/${projectId}/contact-forms/${formId}/submit`,
+      data
+    )
   }
 
   // ============================================================================

src/components/feedback/SubmitWishForm.tsx

@@ -232,7 +232,6 @@ export function SubmitWishForm({
                       setFormData({ ...formData, title: e.target.value })
                     }
                     required
-                    maxLength={150}
                     className="w-full h-11 px-4 text-sm border focus:outline-none focus:ring-2 transition-all"
                     style={{
                       borderColor: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)',
@@ -277,7 +276,6 @@ export function SubmitWishForm({
                       setFormData({ ...formData, description: e.target.value })
                     }
                     required
-                    maxLength={500}
                     rows={5}
                     className="w-full px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all"
                     style={{

src/components/feedback/WishDetail.tsx

@@ -404,7 +404,6 @@ export function WishDetail({
                     placeholder="Your name (optional)"
                     value={authorName}
                     onChange={(e) => setAuthorName(e.target.value)}
-                    maxLength={100}
                     className="w-full h-10 px-4 text-sm border focus:outline-none focus:ring-2 transition-all"
                     style={{
                       borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
@@ -418,7 +417,6 @@ export function WishDetail({
                       placeholder="Write a comment..."
                       value={newComment}
                       onChange={(e) => setNewComment(e.target.value)}
-                      maxLength={1000}
                       className="flex-1 min-h-[60px] px-4 py-3 text-sm border focus:outline-none focus:ring-2 resize-none transition-all"
                       style={{
                         borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',