@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-activity-feed/index.tsx

@@ -0,0 +1,686 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  Trophy,
+  TrendingUp,
+  ShoppingCart,
+  UserPlus,
+  Swords,
+  Flag,
+  Heart,
+  MessageCircle,
+  Loader2,
+  ChevronDown,
+} from "lucide-react"
+import { Button } from "../button"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ActivityType =
+  | "achievement"
+  | "level_up"
+  | "purchase"
+  | "follow"
+  | "challenge"
+  | "milestone"
+
+export interface ActivityUser {
+  /** Unique user identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Avatar URL */
+  avatar?: string
+}
+
+export interface Activity {
+  /** Unique activity identifier */
+  id: string
+  /** Activity type */
+  type: ActivityType
+  /** User who performed the activity */
+  user: ActivityUser
+  /** Activity content/description */
+  content: string
+  /** Additional metadata */
+  metadata?: Record<string, any>
+  /** When the activity occurred */
+  timestamp: Date
+  /** Number of likes */
+  likes?: number
+  /** Whether current user liked this activity */
+  liked?: boolean
+}
+
+export interface GroupedActivity extends Omit<Activity, "user"> {
+  /** Primary user */
+  user: ActivityUser
+  /** Additional users in the group */
+  groupedUsers: ActivityUser[]
+  /** Total count of users */
+  totalUsers: number
+}
+
+export interface WakaActivityFeedProps {
+  /** List of activities to display */
+  activities: Activity[]
+  /** Callback when like button is clicked */
+  onLike?: (activityId: string) => void
+  /** Callback when load more is triggered */
+  onLoadMore?: () => void
+  /** Whether more activities can be loaded */
+  hasMore?: boolean
+  /** Whether activities are currently loading */
+  loading?: boolean
+  /** Show like button and count */
+  showLikes?: boolean
+  /** Group similar activities from multiple users */
+  groupSimilar?: boolean
+  /** Maximum number of items to display */
+  maxItems?: number
+  /** Enable entry animations */
+  animated?: boolean
+  /** Custom className */
+  className?: string
+}
+
+// ============================================================================
+// Activity Type Configuration
+// ============================================================================
+
+const activityConfig: Record<
+  ActivityType,
+  { icon: React.ElementType; color: string; bgColor: string; label: string }
+> = {
+  achievement: {
+    icon: Trophy,
+    color: "text-yellow-600",
+    bgColor: "bg-yellow-100",
+    label: "Achievement",
+  },
+  level_up: {
+    icon: TrendingUp,
+    color: "text-green-600",
+    bgColor: "bg-green-100",
+    label: "Level Up",
+  },
+  purchase: {
+    icon: ShoppingCart,
+    color: "text-blue-600",
+    bgColor: "bg-blue-100",
+    label: "Purchase",
+  },
+  follow: {
+    icon: UserPlus,
+    color: "text-purple-600",
+    bgColor: "bg-purple-100",
+    label: "Follow",
+  },
+  challenge: {
+    icon: Swords,
+    color: "text-red-600",
+    bgColor: "bg-red-100",
+    label: "Challenge",
+  },
+  milestone: {
+    icon: Flag,
+    color: "text-orange-600",
+    bgColor: "bg-orange-100",
+    label: "Milestone",
+  },
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (diffInSeconds < 60) {
+    return "just now"
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}m ago`
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  if (diffInHours < 24) {
+    return `${diffInHours}h ago`
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24)
+  if (diffInDays < 7) {
+    return `${diffInDays}d ago`
+  }
+
+  const diffInWeeks = Math.floor(diffInDays / 7)
+  if (diffInWeeks < 4) {
+    return `${diffInWeeks}w ago`
+  }
+
+  const diffInMonths = Math.floor(diffInDays / 30)
+  if (diffInMonths < 12) {
+    return `${diffInMonths}mo ago`
+  }
+
+  const diffInYears = Math.floor(diffInDays / 365)
+  return `${diffInYears}y ago`
+}
+
+function groupActivities(activities: Activity[]): (Activity | GroupedActivity)[] {
+  const grouped: (Activity | GroupedActivity)[] = []
+  const processed = new Set<string>()
+
+  for (const activity of activities) {
+    if (processed.has(activity.id)) continue
+
+    // Find similar activities (same type and content within a time window)
+    const similar = activities.filter((a) => {
+      if (a.id === activity.id || processed.has(a.id)) return false
+      if (a.type !== activity.type) return false
+      if (a.content !== activity.content) return false
+
+      // Within 1 hour time window
+      const timeDiff = Math.abs(
+        new Date(a.timestamp).getTime() - new Date(activity.timestamp).getTime()
+      )
+      return timeDiff < 60 * 60 * 1000
+    })
+
+    if (similar.length > 0) {
+      // Create grouped activity
+      const groupedUsers = similar.map((a) => a.user)
+      const allUsers = [activity.user, ...groupedUsers]
+
+      grouped.push({
+        ...activity,
+        user: activity.user,
+        groupedUsers,
+        totalUsers: allUsers.length,
+      } as GroupedActivity)
+
+      // Mark all as processed
+      similar.forEach((a) => processed.add(a.id))
+    } else {
+      grouped.push(activity)
+    }
+
+    processed.add(activity.id)
+  }
+
+  return grouped
+}
+
+function isGroupedActivity(
+  activity: Activity | GroupedActivity
+): activity is GroupedActivity {
+  return "groupedUsers" in activity && "totalUsers" in activity
+}
+
+// ============================================================================
+// Avatar Component
+// ============================================================================
+
+interface AvatarProps {
+  user: ActivityUser
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+function Avatar({ user, size = "md", className }: AvatarProps) {
+  const sizeClasses = {
+    sm: "h-6 w-6 text-[10px]",
+    md: "h-10 w-10 text-sm",
+    lg: "h-12 w-12 text-base",
+  }
+
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2)
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative flex items-center justify-center rounded-full font-semibold flex-shrink-0",
+        sizeClasses[size],
+        user.avatar ? "" : "bg-muted text-muted-foreground",
+        className
+      )}
+    >
+      {user.avatar ? (
+        <img
+          src={user.avatar}
+          alt={user.name}
+          className="h-full w-full rounded-full object-cover"
+        />
+      ) : (
+        getInitials(user.name)
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Stacked Avatars Component
+// ============================================================================
+
+interface StackedAvatarsProps {
+  users: ActivityUser[]
+  max?: number
+  size?: "sm" | "md"
+}
+
+function StackedAvatars({ users, max = 3, size = "sm" }: StackedAvatarsProps) {
+  const displayUsers = users.slice(0, max)
+  const remaining = users.length - max
+
+  return (
+    <div className="flex -space-x-2">
+      {displayUsers.map((user, index) => (
+        <Avatar
+          key={user.id}
+          user={user}
+          size={size}
+          className={cn(
+            "ring-2 ring-background",
+            index > 0 && "relative"
+          )}
+        />
+      ))}
+      {remaining > 0 && (
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium ring-2 ring-background",
+            size === "sm" ? "h-6 w-6 text-[10px]" : "h-8 w-8 text-xs"
+          )}
+        >
+          +{remaining}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Activity Icon Component
+// ============================================================================
+
+interface ActivityIconProps {
+  type: ActivityType
+  className?: string
+}
+
+function ActivityIcon({ type, className }: ActivityIconProps) {
+  const config = activityConfig[type]
+  const Icon = config.icon
+
+  return (
+    <div
+      className={cn(
+        "flex h-8 w-8 items-center justify-center rounded-full flex-shrink-0",
+        config.bgColor,
+        className
+      )}
+    >
+      <Icon className={cn("h-4 w-4", config.color)} />
+    </div>
+  )
+}
+
+// ============================================================================
+// Activity Item Component
+// ============================================================================
+
+interface ActivityItemProps {
+  activity: Activity | GroupedActivity
+  showLikes: boolean
+  onLike?: (activityId: string) => void
+  animated: boolean
+  isNew?: boolean
+}
+
+function ActivityItem({
+  activity,
+  showLikes,
+  onLike,
+  animated,
+  isNew,
+}: ActivityItemProps) {
+  const [isAnimating, setIsAnimating] = React.useState(isNew && animated)
+  const isGrouped = isGroupedActivity(activity)
+
+  React.useEffect(() => {
+    if (isNew && animated) {
+      setIsAnimating(true)
+      const timer = setTimeout(() => setIsAnimating(false), 500)
+      return () => clearTimeout(timer)
+    }
+  }, [isNew, animated])
+
+  const handleLike = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onLike?.(activity.id)
+  }
+
+  const renderUserInfo = () => {
+    if (isGrouped) {
+      const otherCount = activity.totalUsers - 1
+      return (
+        <span className="font-medium">
+          {activity.user.name}
+          {otherCount > 0 && (
+            <span className="text-muted-foreground font-normal">
+              {" "}
+              and {otherCount} {otherCount === 1 ? "other" : "others"}
+            </span>
+          )}
+        </span>
+      )
+    }
+    return <span className="font-medium">{activity.user.name}</span>
+  }
+
+  return (
+    <div
+      className={cn(
+        "group flex gap-3 rounded-lg border bg-card p-4 transition-all duration-300",
+        "hover:bg-accent/50 hover:shadow-sm",
+        isAnimating && "animate-slide-in-fade"
+      )}
+    >
+      {/* Avatar Section */}
+      <div className="flex-shrink-0">
+        {isGrouped && activity.groupedUsers.length > 0 ? (
+          <StackedAvatars
+            users={[activity.user, ...activity.groupedUsers]}
+            max={3}
+            size="sm"
+          />
+        ) : (
+          <Avatar user={activity.user} size="md" />
+        )}
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              {renderUserInfo()}
+              <ActivityIcon type={activity.type} className="h-5 w-5" />
+            </div>
+            <p className="mt-1 text-sm text-foreground">{activity.content}</p>
+          </div>
+
+          {/* Timestamp */}
+          <span className="flex-shrink-0 text-xs text-muted-foreground">
+            {formatRelativeTime(new Date(activity.timestamp))}
+          </span>
+        </div>
+
+        {/* Metadata */}
+        {activity.metadata && Object.keys(activity.metadata).length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-2">
+            {Object.entries(activity.metadata).map(([key, value]) => (
+              <span
+                key={key}
+                className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+              >
+                {key}: {String(value)}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Actions */}
+        {showLikes && (
+          <div className="mt-3 flex items-center gap-4">
+            <button
+              onClick={handleLike}
+              className={cn(
+                "flex items-center gap-1.5 text-sm transition-colors",
+                activity.liked
+                  ? "text-red-500"
+                  : "text-muted-foreground hover:text-red-500"
+              )}
+            >
+              <Heart
+                className={cn("h-4 w-4", activity.liked && "fill-current")}
+              />
+              <span>{activity.likes || 0}</span>
+            </button>
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        @keyframes slide-in-fade {
+          0% {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-slide-in-fade {
+          animation: slide-in-fade 0.3s ease-out;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaActivityFeed({
+  activities,
+  onLike,
+  onLoadMore,
+  hasMore = false,
+  loading = false,
+  showLikes = true,
+  groupSimilar = false,
+  maxItems,
+  animated = true,
+  className,
+}: WakaActivityFeedProps) {
+  const [newActivityIds, setNewActivityIds] = React.useState<Set<string>>(new Set())
+  const prevActivityIdsRef = React.useRef<Set<string>>(new Set())
+
+  // Track new activities for animation
+  React.useEffect(() => {
+    const currentIds = new Set(activities.map((a) => a.id))
+    const newIds = new Set<string>()
+
+    currentIds.forEach((id) => {
+      if (!prevActivityIdsRef.current.has(id)) {
+        newIds.add(id)
+      }
+    })
+
+    if (newIds.size > 0 && prevActivityIdsRef.current.size > 0) {
+      setNewActivityIds(newIds)
+      const timer = setTimeout(() => setNewActivityIds(new Set()), 500)
+      return () => clearTimeout(timer)
+    }
+
+    prevActivityIdsRef.current = currentIds
+  }, [activities])
+
+  // Process activities
+  const processedActivities = React.useMemo(() => {
+    let result: (Activity | GroupedActivity)[] = groupSimilar
+      ? groupActivities(activities)
+      : activities
+
+    if (maxItems && maxItems > 0) {
+      result = result.slice(0, maxItems)
+    }
+
+    return result
+  }, [activities, groupSimilar, maxItems])
+
+  if (processedActivities.length === 0 && !loading) {
+    return (
+      <div className={cn("flex flex-col items-center justify-center py-12 text-center", className)}>
+        <MessageCircle className="h-12 w-12 text-muted-foreground/50 mb-4" />
+        <h3 className="text-lg font-medium text-muted-foreground">No activities yet</h3>
+        <p className="text-sm text-muted-foreground/70 mt-1">
+          When there's activity, you'll see it here.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Activity List */}
+      {processedActivities.map((activity) => (
+        <ActivityItem
+          key={activity.id}
+          activity={activity}
+          showLikes={showLikes}
+          onLike={onLike}
+          animated={animated}
+          isNew={newActivityIds.has(activity.id)}
+        />
+      ))}
+
+      {/* Loading State */}
+      {loading && (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {/* Load More */}
+      {!loading && hasMore && onLoadMore && (
+        <div className="flex justify-center pt-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onLoadMore}
+            className="gap-2"
+          >
+            <ChevronDown className="h-4 w-4" />
+            Load more
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Hook for managing activity feed data
+// ============================================================================
+
+export interface UseActivityFeedOptions {
+  /** Initial activities */
+  initialActivities?: Activity[]
+  /** Maximum activities to keep in memory */
+  maxActivities?: number
+}
+
+export function useActivityFeed({
+  initialActivities = [],
+  maxActivities = 100,
+}: UseActivityFeedOptions = {}) {
+  const [activities, setActivities] = React.useState<Activity[]>(initialActivities)
+  const [loading, setLoading] = React.useState(false)
+
+  const addActivity = React.useCallback(
+    (activity: Activity) => {
+      setActivities((prev) => {
+        const updated = [activity, ...prev]
+        return updated.slice(0, maxActivities)
+      })
+    },
+    [maxActivities]
+  )
+
+  const addActivities = React.useCallback(
+    (newActivities: Activity[]) => {
+      setActivities((prev) => {
+        const updated = [...newActivities, ...prev]
+        return updated.slice(0, maxActivities)
+      })
+    },
+    [maxActivities]
+  )
+
+  const removeActivity = React.useCallback((activityId: string) => {
+    setActivities((prev) => prev.filter((a) => a.id !== activityId))
+  }, [])
+
+  const toggleLike = React.useCallback((activityId: string) => {
+    setActivities((prev) =>
+      prev.map((a) =>
+        a.id === activityId
+          ? {
+              ...a,
+              liked: !a.liked,
+              likes: a.liked ? (a.likes || 1) - 1 : (a.likes || 0) + 1,
+            }
+          : a
+      )
+    )
+  }, [])
+
+  const loadMore = React.useCallback(
+    async (fetcher: () => Promise<Activity[]>) => {
+      setLoading(true)
+      try {
+        const moreActivities = await fetcher()
+        setActivities((prev) => {
+          const existingIds = new Set(prev.map((a) => a.id))
+          const newActivities = moreActivities.filter((a) => !existingIds.has(a.id))
+          return [...prev, ...newActivities].slice(0, maxActivities)
+        })
+      } finally {
+        setLoading(false)
+      }
+    },
+    [maxActivities]
+  )
+
+  const refresh = React.useCallback((newActivities: Activity[]) => {
+    setActivities(newActivities)
+  }, [])
+
+  const clear = React.useCallback(() => {
+    setActivities([])
+  }, [])
+
+  return {
+    activities,
+    loading,
+    addActivity,
+    addActivities,
+    removeActivity,
+    toggleLike,
+    loadMore,
+    refresh,
+    clear,
+    setLoading,
+  }
+}
+
+export default WakaActivityFeed