@appgram/react 0.1.0

package/dist/useVote-CLhkwtLT.d.ts

@@ -0,0 +1,420 @@
+/**
+ * Wish (Feature Request) Types
+ */
+type WishStatus = 'pending' | 'under_review' | 'planned' | 'in_progress' | 'completed' | 'declined';
+type WishPriority = 'low' | 'medium' | 'high' | 'critical';
+interface Category {
+    id: string;
+    name: string;
+    slug: string;
+    color: string;
+    icon?: string | null;
+    description?: string | null;
+    wish_count?: number;
+}
+interface WishAuthor {
+    name: string;
+    email?: string | null;
+    avatar_url?: string | null;
+}
+interface Wish {
+    id: string;
+    project_id: string;
+    category_id?: string | null;
+    title: string;
+    description: string;
+    status: WishStatus;
+    priority?: WishPriority | null;
+    author_type: 'user' | 'anonymous' | 'team_member';
+    author_email?: string | null;
+    author_name?: string | null;
+    vote_count: number;
+    comment_count: number;
+    slug: string;
+    is_pinned?: boolean;
+    created_at: string;
+    updated_at: string;
+    completed_at?: string | null;
+    category?: Category | null;
+    author?: WishAuthor;
+    has_voted?: boolean;
+}
+interface WishFilters {
+    status?: WishStatus | WishStatus[];
+    category_id?: string;
+    priority?: WishPriority | WishPriority[];
+    search?: string;
+    sort_by?: 'votes' | 'created_at' | 'updated_at';
+    sort_order?: 'asc' | 'desc';
+    page?: number;
+    per_page?: number;
+    fingerprint?: string;
+}
+interface WishesResponse {
+    data: Wish[];
+    total: number;
+    page: number;
+    per_page: number;
+    total_pages: number;
+}
+
+/**
+ * Comment Types
+ */
+interface CommentAuthor {
+    name: string;
+    avatar_url?: string | null;
+}
+interface Comment {
+    id: string;
+    wish_id: string;
+    parent_id?: string | null;
+    author_type: 'user' | 'team_member' | 'anonymous';
+    author_user_id?: string | null;
+    author_name: string;
+    author_avatar_url?: string | null;
+    content: string;
+    is_official: boolean;
+    is_deleted: boolean;
+    reply_count: number;
+    created_at: string;
+    updated_at: string;
+    replies?: Comment[];
+}
+interface CommentCreateInput {
+    wish_id: string;
+    content: string;
+    author_name?: string;
+    author_email?: string;
+    parent_id?: string;
+}
+interface CommentsResponse {
+    data: Comment[];
+    total: number;
+    page: number;
+    per_page: number;
+    total_pages: number;
+}
+
+/**
+ * Roadmap Types
+ */
+
+type RoadmapVisibility = 'public' | 'private' | 'voters_only';
+interface Roadmap {
+    id: string;
+    project_id: string;
+    name: string;
+    description?: string | null;
+    visibility: RoadmapVisibility;
+    show_vote_counts: boolean;
+    show_comments: boolean;
+    is_default: boolean;
+    created_at: string;
+    updated_at: string;
+    columns?: RoadmapColumn[];
+}
+interface RoadmapColumn {
+    id: string;
+    roadmap_id: string;
+    name: string;
+    color: string;
+    sort_order: number;
+    wip_limit?: number | null;
+    created_at: string;
+    updated_at: string;
+    items?: RoadmapItem[];
+}
+interface RoadmapItem {
+    id: string;
+    roadmap_id: string;
+    column_id: string;
+    wish_id?: string | null;
+    title: string;
+    description?: string | null;
+    sort_order: number;
+    color?: string | null;
+    target_date?: string | null;
+    created_at: string;
+    updated_at: string;
+    wish?: Wish | null;
+}
+interface RoadmapData {
+    roadmap: Roadmap | null;
+    columns: RoadmapColumn[];
+    total_items: number;
+    customization?: {
+        use_custom: boolean;
+        customization_data: any;
+    } | null;
+}
+
+/**
+ * Release / Changelog Types
+ */
+type ReleaseItemType = 'feature' | 'improvement' | 'bugfix' | 'other';
+interface ReleaseItem {
+    id: string;
+    release_id: string;
+    title: string;
+    description?: string | null;
+    type: ReleaseItemType;
+    image_url?: string | null;
+    sort_order: number;
+}
+interface ReleaseFeature {
+    id: string;
+    release_id: string;
+    title: string;
+    description: string;
+    image_url?: string | null;
+    sort_order: number;
+}
+interface Release {
+    id: string;
+    project_id: string;
+    title: string;
+    content: string;
+    excerpt?: string | null;
+    cover_image_url?: string | null;
+    slug: string;
+    is_published: boolean;
+    published_at?: string | null;
+    version?: string | null;
+    labels: string[];
+    wish_ids: string[];
+    author_user_id: string;
+    created_at: string;
+    updated_at: string;
+    features?: ReleaseFeature[];
+    items?: ReleaseItem[];
+}
+interface ReleasesResponse {
+    data: Release[];
+    total: number;
+    page: number;
+    per_page: number;
+    total_pages: number;
+}
+
+/**
+ * Help Center Types
+ */
+type ArticleType = 'guide' | 'faq' | 'tutorial';
+type FlowDisplayType = 'list' | 'accordion' | 'decision_tree' | 'wizard';
+interface HelpArticle {
+    id: string;
+    flow_id: string;
+    title: string;
+    slug: string;
+    content: string;
+    excerpt?: string | null;
+    article_type: ArticleType;
+    is_published: boolean;
+    sort_order: number;
+    published_at?: string | null;
+    created_at: string;
+    updated_at: string;
+}
+interface HelpFlow {
+    id: string;
+    collection_id: string;
+    name: string;
+    slug: string;
+    description?: string | null;
+    icon?: string | null;
+    color?: string | null;
+    display_type: FlowDisplayType;
+    sort_order: number;
+    created_at: string;
+    updated_at: string;
+    articles?: HelpArticle[];
+}
+interface HelpCollection {
+    id: string;
+    project_id: string;
+    name: string;
+    version: string;
+    description?: string | null;
+    is_live: boolean;
+    created_at: string;
+    updated_at: string;
+    flows?: HelpFlow[];
+}
+interface HelpCenterData {
+    collection: HelpCollection | null;
+    flows: HelpFlow[];
+}
+interface HelpArticlesResponse {
+    data: HelpArticle[];
+    total: number;
+    page: number;
+    per_page: number;
+    total_pages: number;
+}
+
+/**
+ * Support Types
+ */
+type SupportRequestStatus = 'new' | 'open' | 'in_progress' | 'resolved' | 'closed';
+type SupportRequestPriority = 'low' | 'medium' | 'high' | 'critical';
+type SupportRequestCategory = 'bug_report' | 'feature_request' | 'general_inquiry' | 'billing' | 'account';
+interface SupportAttachment {
+    url: string;
+    name: string;
+    size: number;
+    mime_type?: string;
+}
+interface SupportMessage {
+    id: string;
+    support_request_id: string;
+    author_type: 'user' | 'team_member';
+    author_user_id?: string | null;
+    author_email?: string | null;
+    author_name?: string | null;
+    content: string;
+    is_internal: boolean;
+    attachments?: SupportAttachment[];
+    created_at: string;
+}
+interface SupportRequest {
+    id: string;
+    project_id: string;
+    subject: string;
+    description: string;
+    status: SupportRequestStatus;
+    priority?: SupportRequestPriority | null;
+    category?: SupportRequestCategory | null;
+    user_email: string;
+    user_name?: string | null;
+    assignee_id?: string | null;
+    message_count: number;
+    created_at: string;
+    updated_at: string;
+    resolved_at?: string | null;
+    messages?: SupportMessage[];
+    attachments?: SupportAttachment[];
+}
+interface SupportRequestInput {
+    subject: string;
+    description: string;
+    user_email: string;
+    user_name?: string;
+    category?: SupportRequestCategory;
+    attachments?: File[];
+}
+interface SupportRequestsResponse {
+    data: SupportRequest[];
+    total: number;
+    page: number;
+    per_page: number;
+    total_pages: number;
+}
+
+/**
+ * useVote Hook
+ *
+ * Manages voting state and actions for a wish.
+ * Provides optimistic updates for instant UI feedback.
+ *
+ * @example
+ * ```tsx
+ * import { useVote } from '@appgram/react'
+ *
+ * function VoteButton({ wishId, initialCount, initialHasVoted }) {
+ *   const { hasVoted, voteCount, toggle, isLoading } = useVote({
+ *     wishId,
+ *     initialVoteCount: initialCount,
+ *     initialHasVoted,
+ *     onVoteChange: (voted, count) => {
+ *       analytics.track('vote', { wishId, voted })
+ *     }
+ *   })
+ *
+ *   return (
+ *     <button
+ *       onClick={toggle}
+ *       disabled={isLoading}
+ *       className={hasVoted ? 'voted' : ''}
+ *     >
+ *       {hasVoted ? '✓' : '▲'} {voteCount}
+ *     </button>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Lazy vote check to avoid rate limiting
+ * const { hasVoted, voteCount, toggle } = useVote({
+ *   wishId: wish.id,
+ *   initialVoteCount: wish.vote_count,
+ *   skipAutoCheck: true, // Check on first click instead
+ * })
+ * ```
+ */
+interface UseVoteOptions {
+    /**
+     * The wish ID to vote on
+     */
+    wishId: string;
+    /**
+     * Initial vote count (optional, useful when you already have the wish data)
+     */
+    initialVoteCount?: number;
+    /**
+     * Initial hasVoted state (optional)
+     */
+    initialHasVoted?: boolean;
+    /**
+     * Voter email (optional, for identified voting)
+     */
+    voterEmail?: string;
+    /**
+     * Callback when vote state changes
+     */
+    onVoteChange?: (hasVoted: boolean, voteCount: number) => void;
+    /**
+     * Skip automatic vote check on mount to avoid rate limiting
+     * When true, vote status will be checked lazily on first interaction
+     * @default true
+     */
+    skipAutoCheck?: boolean;
+}
+interface UseVoteResult {
+    /**
+     * Whether the current user has voted
+     */
+    hasVoted: boolean;
+    /**
+     * Current vote count
+     */
+    voteCount: number;
+    /**
+     * Loading state for vote operations
+     */
+    isLoading: boolean;
+    /**
+     * Loading state for initial vote check
+     */
+    isChecking: boolean;
+    /**
+     * Error message if any
+     */
+    error: string | null;
+    /**
+     * Toggle vote (vote if not voted, unvote if voted)
+     */
+    toggle: () => Promise<void>;
+    /**
+     * Cast a vote
+     */
+    vote: () => Promise<void>;
+    /**
+     * Remove a vote
+     */
+    unvote: () => Promise<void>;
+}
+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 };

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@appgram/react",
+  "version": "0.1.0",
+  "description": "React library for integrating Appgram portal features with pre-built UI components and headless hooks",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./tailwind-preset": "./tailwind-preset.js"
+  },
+  "files": [
+    "dist",
+    "tailwind-preset.js"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist",
+    "demo": "npm run build && cd demo && npm install && npm run dev",
+    "demo:install": "cd demo && npm install",
+    "demo:dev": "cd demo && npm run dev",
+    "docs:json": "npx typedoc --json docs.json --entryPoints src/index.ts",
+    "docs:transform": "node transform-docs.js",
+    "docs:build": "npm run docs:json && npm run docs:transform"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "dompurify": "^3.3.1",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.400.0",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typedoc": "^0.26.11",
+    "typescript": "^5.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/appgram/react"
+  },
+  "keywords": [
+    "react",
+    "appgram",
+    "feedback",
+    "roadmap",
+    "feature-requests",
+    "changelog",
+    "support"
+  ],
+  "author": "Appgram",
+  "license": "MIT"
+}

package/tailwind-preset.js

@@ -0,0 +1,48 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        appgram: {
+          primary: 'var(--appgram-primary, #6366f1)',
+          secondary: 'var(--appgram-secondary, #8b5cf6)',
+          accent: 'var(--appgram-accent, #06b6d4)',
+          background: 'var(--appgram-background, #ffffff)',
+          foreground: 'var(--appgram-foreground, #09090b)',
+          muted: 'var(--appgram-muted, #f4f4f5)',
+          'muted-foreground': 'var(--appgram-muted-foreground, #71717a)',
+          card: 'var(--appgram-card, #ffffff)',
+          'card-foreground': 'var(--appgram-card-foreground, #09090b)',
+          border: 'var(--appgram-border, #e4e4e7)',
+        },
+      },
+      borderRadius: {
+        appgram: 'var(--appgram-radius, 0.5rem)',
+      },
+      fontFamily: {
+        appgram: 'var(--appgram-font-family, inherit)',
+      },
+      animation: {
+        'appgram-fade-in': 'appgram-fade-in 0.3s ease-out',
+        'appgram-slide-up': 'appgram-slide-up 0.3s ease-out',
+        'appgram-vote-pop': 'appgram-vote-pop 0.4s ease-out',
+      },
+      keyframes: {
+        'appgram-fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'appgram-slide-up': {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'appgram-vote-pop': {
+          '0%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.2)' },
+          '100%': { transform: 'scale(1)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}