@wakastellar/ui 2.0.0 → 2.1.1

package/src/blocks/activity-timeline/index.tsx

@@ -0,0 +1,586 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Badge } from "../../components/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import { Input } from "../../components/input"
+import {
+  Search,
+  Filter,
+  RefreshCw,
+  ChevronDown,
+  Clock,
+  User,
+  FileText,
+  MessageSquare,
+  Settings,
+  Upload,
+  Download,
+  Trash2,
+  Edit,
+  Plus,
+  Check,
+  X,
+  AlertCircle,
+  Bell,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ActivityType =
+  | "created"
+  | "updated"
+  | "deleted"
+  | "commented"
+  | "uploaded"
+  | "downloaded"
+  | "shared"
+  | "approved"
+  | "rejected"
+  | "mentioned"
+  | "assigned"
+  | "completed"
+  | "custom"
+
+export interface ActivityUser {
+  id: string
+  name: string
+  avatar?: string
+  email?: string
+}
+
+export interface ActivityItem {
+  id: string
+  type: ActivityType
+  title: string
+  description?: string
+  user: ActivityUser
+  timestamp: Date | string
+  metadata?: {
+    targetName?: string
+    targetType?: string
+    oldValue?: string
+    newValue?: string
+    comment?: string
+    [key: string]: unknown
+  }
+  icon?: React.ReactNode
+  color?: string
+}
+
+export interface ActivityFilter {
+  id: string
+  label: string
+  types: ActivityType[]
+}
+
+export interface WakaActivityTimelineProps {
+  /** Activités */
+  activities: ActivityItem[]
+  /** Titre */
+  title?: string
+  /** Afficher la recherche */
+  showSearch?: boolean
+  /** Afficher les filtres */
+  showFilters?: boolean
+  /** Filtres disponibles */
+  filters?: ActivityFilter[]
+  /** Filtre actif */
+  activeFilter?: string
+  /** Callback changement de filtre */
+  onFilterChange?: (filterId: string | null) => void
+  /** Afficher le bouton rafraîchir */
+  showRefresh?: boolean
+  /** Callback rafraîchissement */
+  onRefresh?: () => void
+  /** En cours de chargement */
+  loading?: boolean
+  /** Regrouper par jour */
+  groupByDay?: boolean
+  /** Afficher plus */
+  showLoadMore?: boolean
+  /** Callback charger plus */
+  onLoadMore?: () => void
+  /** En cours de chargement plus */
+  loadingMore?: boolean
+  /** Afficher les avatars */
+  showAvatars?: boolean
+  /** Afficher les timestamps relatifs */
+  relativeTime?: boolean
+  /** Layout */
+  layout?: "timeline" | "feed" | "compact"
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// ACTIVITY CONFIG
+// ============================================
+
+const activityConfig: Record<ActivityType, { icon: React.ElementType; color: string; label: string }> = {
+  created: { icon: Plus, color: "text-green-500", label: "créé" },
+  updated: { icon: Edit, color: "text-blue-500", label: "modifié" },
+  deleted: { icon: Trash2, color: "text-red-500", label: "supprimé" },
+  commented: { icon: MessageSquare, color: "text-purple-500", label: "commenté" },
+  uploaded: { icon: Upload, color: "text-cyan-500", label: "uploadé" },
+  downloaded: { icon: Download, color: "text-gray-500", label: "téléchargé" },
+  shared: { icon: User, color: "text-orange-500", label: "partagé" },
+  approved: { icon: Check, color: "text-green-500", label: "approuvé" },
+  rejected: { icon: X, color: "text-red-500", label: "rejeté" },
+  mentioned: { icon: Bell, color: "text-yellow-500", label: "mentionné" },
+  assigned: { icon: User, color: "text-indigo-500", label: "assigné" },
+  completed: { icon: Check, color: "text-green-500", label: "terminé" },
+  custom: { icon: AlertCircle, color: "text-gray-500", label: "" },
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface ActivityAvatarProps {
+  user: ActivityUser
+  size?: "sm" | "md"
+}
+
+function ActivityAvatar({ user, size = "sm" }: ActivityAvatarProps) {
+  const sizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-10 w-10",
+  }
+
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+
+  return (
+    <Avatar className={sizeClasses[size]}>
+      <AvatarImage src={user.avatar} alt={user.name} />
+      <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+interface ActivityIconProps {
+  type: ActivityType
+  customIcon?: React.ReactNode
+  customColor?: string
+}
+
+function ActivityIcon({ type, customIcon, customColor }: ActivityIconProps) {
+  const config = activityConfig[type]
+  const Icon = config.icon
+
+  return (
+    <div
+      className={cn(
+        "flex h-8 w-8 items-center justify-center rounded-full bg-background border-2 shadow-sm",
+        customColor || config.color
+      )}
+    >
+      {customIcon || <Icon className="h-4 w-4" />}
+    </div>
+  )
+}
+
+interface ActivityItemComponentProps {
+  activity: ActivityItem
+  showAvatar: boolean
+  relativeTime: boolean
+  layout: "timeline" | "feed" | "compact"
+  isLast: boolean
+}
+
+function ActivityItemComponent({
+  activity,
+  showAvatar,
+  relativeTime,
+  layout,
+  isLast,
+}: ActivityItemComponentProps) {
+  const formatTime = (timestamp: Date | string): string => {
+    const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp
+
+    if (relativeTime) {
+      const now = new Date()
+      const diff = now.getTime() - date.getTime()
+      const minutes = Math.floor(diff / 60000)
+      const hours = Math.floor(minutes / 60)
+      const days = Math.floor(hours / 24)
+
+      if (minutes < 1) return "À l'instant"
+      if (minutes < 60) return `Il y a ${minutes} min`
+      if (hours < 24) return `Il y a ${hours}h`
+      if (days < 7) return `Il y a ${days}j`
+    }
+
+    return date.toLocaleDateString("fr-FR", {
+      day: "numeric",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+  }
+
+  const config = activityConfig[activity.type]
+
+  if (layout === "compact") {
+    return (
+      <div className="flex items-center gap-3 py-2">
+        <ActivityIcon
+          type={activity.type}
+          customIcon={activity.icon}
+          customColor={activity.color}
+        />
+        <div className="flex-1 min-w-0">
+          <p className="text-sm truncate">
+            <span className="font-medium">{activity.user.name}</span>{" "}
+            <span className="text-muted-foreground">{activity.title}</span>
+          </p>
+        </div>
+        <span className="text-xs text-muted-foreground flex-shrink-0">
+          {formatTime(activity.timestamp)}
+        </span>
+      </div>
+    )
+  }
+
+  if (layout === "feed") {
+    return (
+      <Card className="mb-4">
+        <CardContent className="pt-4">
+          <div className="flex gap-3">
+            {showAvatar && <ActivityAvatar user={activity.user} size="md" />}
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="font-medium">{activity.user.name}</span>
+                <Badge variant="secondary" className="text-xs">
+                  {config.label || activity.type}
+                </Badge>
+                <span className="text-xs text-muted-foreground">
+                  {formatTime(activity.timestamp)}
+                </span>
+              </div>
+              <p className="text-sm">{activity.title}</p>
+              {activity.description && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  {activity.description}
+                </p>
+              )}
+              {activity.metadata?.comment && (
+                <div className="mt-2 p-3 bg-muted rounded-lg text-sm">
+                  {activity.metadata.comment}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Timeline layout
+  return (
+    <div className="flex gap-4">
+      {/* Timeline line and icon */}
+      <div className="flex flex-col items-center">
+        <ActivityIcon
+          type={activity.type}
+          customIcon={activity.icon}
+          customColor={activity.color}
+        />
+        {!isLast && <div className="w-0.5 flex-1 bg-border mt-2" />}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 pb-8">
+        <div className="flex items-start gap-3">
+          {showAvatar && <ActivityAvatar user={activity.user} />}
+          <div className="flex-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="font-medium">{activity.user.name}</span>
+              <span className="text-muted-foreground">{activity.title}</span>
+            </div>
+            {activity.description && (
+              <p className="text-sm text-muted-foreground mt-1">
+                {activity.description}
+              </p>
+            )}
+            {activity.metadata?.comment && (
+              <div className="mt-2 p-3 bg-muted rounded-lg text-sm">
+                {activity.metadata.comment}
+              </div>
+            )}
+            <span className="text-xs text-muted-foreground mt-2 block">
+              {formatTime(activity.timestamp)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaActivityTimeline({
+  activities,
+  title = "Activité",
+  showSearch = true,
+  showFilters = true,
+  filters = [],
+  activeFilter: externalActiveFilter,
+  onFilterChange,
+  showRefresh = true,
+  onRefresh,
+  loading = false,
+  groupByDay = true,
+  showLoadMore = false,
+  onLoadMore,
+  loadingMore = false,
+  showAvatars = true,
+  relativeTime = true,
+  layout = "timeline",
+  className,
+}: WakaActivityTimelineProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [internalActiveFilter, setInternalActiveFilter] = React.useState<string | null>(null)
+
+  const activeFilter = externalActiveFilter ?? internalActiveFilter
+
+  const handleFilterChange = (filterId: string | null) => {
+    if (onFilterChange) {
+      onFilterChange(filterId)
+    } else {
+      setInternalActiveFilter(filterId)
+    }
+  }
+
+  // Filter activities
+  const filteredActivities = React.useMemo(() => {
+    let result = activities
+
+    // Search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      result = result.filter(
+        (activity) =>
+          activity.title.toLowerCase().includes(query) ||
+          activity.user.name.toLowerCase().includes(query) ||
+          activity.description?.toLowerCase().includes(query)
+      )
+    }
+
+    // Type filter
+    if (activeFilter) {
+      const filter = filters.find((f) => f.id === activeFilter)
+      if (filter) {
+        result = result.filter((activity) => filter.types.includes(activity.type))
+      }
+    }
+
+    return result
+  }, [activities, searchQuery, activeFilter, filters])
+
+  // Group by day
+  const groupedActivities = React.useMemo(() => {
+    if (!groupByDay) return null
+
+    const groups: Record<string, ActivityItem[]> = {}
+
+    filteredActivities.forEach((activity) => {
+      const date = typeof activity.timestamp === "string"
+        ? new Date(activity.timestamp)
+        : activity.timestamp
+      const dateKey = date.toLocaleDateString("fr-FR", {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      })
+
+      if (!groups[dateKey]) {
+        groups[dateKey] = []
+      }
+      groups[dateKey].push(activity)
+    })
+
+    return groups
+  }, [filteredActivities, groupByDay])
+
+  const renderActivities = (items: ActivityItem[]) => (
+    <div>
+      {items.map((activity, index) => (
+        <ActivityItemComponent
+          key={activity.id}
+          activity={activity}
+          showAvatar={showAvatars}
+          relativeTime={relativeTime}
+          layout={layout}
+          isLast={index === items.length - 1}
+        />
+      ))}
+    </div>
+  )
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <h2 className="text-xl font-semibold">{title}</h2>
+        <div className="flex items-center gap-2">
+          {showRefresh && onRefresh && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRefresh}
+              disabled={loading}
+            >
+              <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Search and Filters */}
+      {(showSearch || showFilters) && (
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          {showSearch && (
+            <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Rechercher..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+          )}
+          {showFilters && filters.length > 0 && (
+            <Select
+              value={activeFilter || "all"}
+              onValueChange={(value) => handleFilterChange(value === "all" ? null : value)}
+            >
+              <SelectTrigger className="w-[180px]">
+                <Filter className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Filtrer" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Toutes les activités</SelectItem>
+                {filters.map((filter) => (
+                  <SelectItem key={filter.id} value={filter.id}>
+                    {filter.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      )}
+
+      {/* Activities */}
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : filteredActivities.length === 0 ? (
+        <div className="text-center py-12">
+          <Clock className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+          <p className="text-muted-foreground">Aucune activité</p>
+        </div>
+      ) : groupByDay && groupedActivities ? (
+        <div className="space-y-6">
+          {Object.entries(groupedActivities).map(([date, items]) => (
+            <div key={date}>
+              <h3 className="text-sm font-medium text-muted-foreground mb-4 capitalize">
+                {date}
+              </h3>
+              {renderActivities(items)}
+            </div>
+          ))}
+        </div>
+      ) : (
+        renderActivities(filteredActivities)
+      )}
+
+      {/* Load More */}
+      {showLoadMore && onLoadMore && (
+        <div className="flex justify-center pt-4">
+          <Button
+            variant="outline"
+            onClick={onLoadMore}
+            disabled={loadingMore}
+          >
+            {loadingMore ? (
+              <RefreshCw className="h-4 w-4 animate-spin mr-2" />
+            ) : (
+              <ChevronDown className="h-4 w-4 mr-2" />
+            )}
+            Charger plus
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultActivityFilters: ActivityFilter[] = [
+  { id: "edits", label: "Modifications", types: ["created", "updated", "deleted"] },
+  { id: "comments", label: "Commentaires", types: ["commented", "mentioned"] },
+  { id: "files", label: "Fichiers", types: ["uploaded", "downloaded", "shared"] },
+  { id: "approvals", label: "Approbations", types: ["approved", "rejected", "completed"] },
+]
+
+export const defaultActivities: ActivityItem[] = [
+  {
+    id: "1",
+    type: "created",
+    title: "a créé le document 'Rapport Q4'",
+    user: { id: "1", name: "Marie Dupont" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 5),
+  },
+  {
+    id: "2",
+    type: "commented",
+    title: "a commenté sur 'Projet Alpha'",
+    user: { id: "2", name: "Pierre Martin" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 30),
+    metadata: { comment: "Super travail sur cette partie !" },
+  },
+  {
+    id: "3",
+    type: "uploaded",
+    title: "a uploadé 3 fichiers",
+    user: { id: "3", name: "Sophie Bernard" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
+  },
+  {
+    id: "4",
+    type: "approved",
+    title: "a approuvé la demande de congés",
+    user: { id: "1", name: "Marie Dupont" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24),
+  },
+]
+
+export default WakaActivityTimeline