@wakastellar/ui 1.0.12 → 2.1.0

package/src/blocks/faq/index.tsx

@@ -0,0 +1,479 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Input } from "../../components/input"
+import { Badge } from "../../components/badge"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/accordion"
+import { Search, HelpCircle, MessageCircle } from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface FAQItem {
+  id: string
+  question: string
+  answer: string | React.ReactNode
+  category?: string
+  tags?: string[]
+  helpful?: number
+  notHelpful?: number
+}
+
+export interface FAQCategory {
+  id: string
+  name: string
+  icon?: React.ReactNode
+  description?: string
+}
+
+export interface WakaFAQProps {
+  /** Liste des questions/réponses */
+  items: FAQItem[]
+  /** Catégories */
+  categories?: FAQCategory[]
+  /** Titre */
+  title?: string
+  /** Description */
+  description?: string
+  /** Afficher la recherche */
+  showSearch?: boolean
+  /** Placeholder de recherche */
+  searchPlaceholder?: string
+  /** Afficher les catégories comme filtres */
+  showCategoryFilter?: boolean
+  /** Catégorie active */
+  activeCategory?: string
+  /** Callback changement de catégorie */
+  onCategoryChange?: (categoryId: string | null) => void
+  /** Permettre plusieurs accordéons ouverts */
+  allowMultiple?: boolean
+  /** Éléments ouverts par défaut */
+  defaultOpen?: string[]
+  /** Afficher le feedback (utile/pas utile) */
+  showFeedback?: boolean
+  /** Callback feedback */
+  onFeedback?: (itemId: string, helpful: boolean) => void
+  /** Layout */
+  layout?: "default" | "cards" | "grouped"
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface FAQSearchProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+}
+
+function FAQSearch({ value, onChange, placeholder }: FAQSearchProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="pl-10"
+      />
+    </div>
+  )
+}
+
+interface FAQCategoryFilterProps {
+  categories: FAQCategory[]
+  activeCategory: string | null
+  onCategoryChange: (categoryId: string | null) => void
+  itemCounts: Record<string, number>
+}
+
+function FAQCategoryFilter({
+  categories,
+  activeCategory,
+  onCategoryChange,
+  itemCounts,
+}: FAQCategoryFilterProps) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <button
+        type="button"
+        onClick={() => onCategoryChange(null)}
+        className={cn(
+          "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors",
+          activeCategory === null
+            ? "bg-primary text-primary-foreground"
+            : "bg-muted hover:bg-muted/80"
+        )}
+      >
+        Tous
+        <Badge variant="secondary" className="ml-1">
+          {Object.values(itemCounts).reduce((a, b) => a + b, 0)}
+        </Badge>
+      </button>
+      {categories.map((category) => (
+        <button
+          key={category.id}
+          type="button"
+          onClick={() => onCategoryChange(category.id)}
+          className={cn(
+            "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors",
+            activeCategory === category.id
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted hover:bg-muted/80"
+          )}
+        >
+          {category.icon}
+          {category.name}
+          <Badge variant="secondary" className="ml-1">
+            {itemCounts[category.id] || 0}
+          </Badge>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+interface FAQFeedbackProps {
+  itemId: string
+  helpful?: number
+  notHelpful?: number
+  onFeedback: (itemId: string, helpful: boolean) => void
+}
+
+function FAQFeedback({ itemId, helpful = 0, notHelpful = 0, onFeedback }: FAQFeedbackProps) {
+  const [voted, setVoted] = React.useState<boolean | null>(null)
+
+  const handleVote = (isHelpful: boolean) => {
+    if (voted === null) {
+      setVoted(isHelpful)
+      onFeedback(itemId, isHelpful)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-4 mt-4 pt-4 border-t">
+      <span className="text-sm text-muted-foreground">Cette réponse vous a-t-elle aidé ?</span>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => handleVote(true)}
+          disabled={voted !== null}
+          className={cn(
+            "inline-flex items-center gap-1 px-2 py-1 text-sm rounded transition-colors",
+            voted === true
+              ? "bg-green-100 text-green-700"
+              : voted === null
+              ? "hover:bg-muted"
+              : "opacity-50"
+          )}
+        >
+          👍 {helpful + (voted === true ? 1 : 0)}
+        </button>
+        <button
+          type="button"
+          onClick={() => handleVote(false)}
+          disabled={voted !== null}
+          className={cn(
+            "inline-flex items-center gap-1 px-2 py-1 text-sm rounded transition-colors",
+            voted === false
+              ? "bg-red-100 text-red-700"
+              : voted === null
+              ? "hover:bg-muted"
+              : "opacity-50"
+          )}
+        >
+          👎 {notHelpful + (voted === false ? 1 : 0)}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaFAQ({
+  items,
+  categories = [],
+  title = "Questions fréquentes",
+  description,
+  showSearch = true,
+  searchPlaceholder = "Rechercher une question...",
+  showCategoryFilter = true,
+  activeCategory: externalActiveCategory,
+  onCategoryChange,
+  allowMultiple = false,
+  defaultOpen = [],
+  showFeedback = false,
+  onFeedback,
+  layout = "default",
+  size = "md",
+  className,
+}: WakaFAQProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [internalActiveCategory, setInternalActiveCategory] = React.useState<string | null>(null)
+
+  const activeCategory = externalActiveCategory ?? internalActiveCategory
+
+  const handleCategoryChange = (categoryId: string | null) => {
+    if (onCategoryChange) {
+      onCategoryChange(categoryId)
+    } else {
+      setInternalActiveCategory(categoryId)
+    }
+  }
+
+  // Filter items
+  const filteredItems = React.useMemo(() => {
+    return items.filter((item) => {
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase()
+        const matchesSearch =
+          item.question.toLowerCase().includes(query) ||
+          (typeof item.answer === "string" && item.answer.toLowerCase().includes(query)) ||
+          item.tags?.some((tag) => tag.toLowerCase().includes(query))
+        if (!matchesSearch) return false
+      }
+
+      // Category filter
+      if (activeCategory && item.category !== activeCategory) {
+        return false
+      }
+
+      return true
+    })
+  }, [items, searchQuery, activeCategory])
+
+  // Count items per category
+  const itemCounts = React.useMemo(() => {
+    const counts: Record<string, number> = {}
+    items.forEach((item) => {
+      if (item.category) {
+        counts[item.category] = (counts[item.category] || 0) + 1
+      }
+    })
+    return counts
+  }, [items])
+
+  // Group items by category for grouped layout
+  const groupedItems = React.useMemo(() => {
+    if (layout !== "grouped") return null
+
+    const groups: Record<string, FAQItem[]> = {}
+    filteredItems.forEach((item) => {
+      const category = item.category || "other"
+      if (!groups[category]) {
+        groups[category] = []
+      }
+      groups[category].push(item)
+    })
+    return groups
+  }, [filteredItems, layout])
+
+  const sizeClasses = {
+    sm: { title: "text-xl", question: "text-sm", answer: "text-sm" },
+    md: { title: "text-2xl", question: "text-base", answer: "text-sm" },
+    lg: { title: "text-3xl", question: "text-lg", answer: "text-base" },
+  }
+
+  const renderAccordionItems = (itemsToRender: FAQItem[]) => (
+    <>
+      {itemsToRender.map((item) => (
+        <AccordionItem
+          key={item.id}
+          value={item.id}
+          className={cn(
+            layout === "cards" && "border rounded-lg px-4 bg-card"
+          )}
+        >
+          <AccordionTrigger className={cn("hover:no-underline", sizeClasses[size].question)}>
+            <span className="text-left">{item.question}</span>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className={cn("text-muted-foreground", sizeClasses[size].answer)}>
+              {typeof item.answer === "string" ? (
+                <p>{item.answer}</p>
+              ) : (
+                item.answer
+              )}
+            </div>
+            {item.tags && item.tags.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-3">
+                {item.tags.map((tag) => (
+                  <Badge key={tag} variant="outline" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+            {showFeedback && onFeedback && (
+              <FAQFeedback
+                itemId={item.id}
+                helpful={item.helpful}
+                notHelpful={item.notHelpful}
+                onFeedback={onFeedback}
+              />
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </>
+  )
+
+  const renderAccordion = (itemsToRender: FAQItem[]) => {
+    if (allowMultiple) {
+      return (
+        <Accordion
+          type="multiple"
+          defaultValue={defaultOpen}
+          className="space-y-2"
+        >
+          {renderAccordionItems(itemsToRender)}
+        </Accordion>
+      )
+    }
+    return (
+      <Accordion
+        type="single"
+        defaultValue={defaultOpen[0]}
+        collapsible
+        className="space-y-2"
+      >
+        {renderAccordionItems(itemsToRender)}
+      </Accordion>
+    )
+  }
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="text-center">
+        <h2 className={cn("font-bold tracking-tight", sizeClasses[size].title)}>
+          {title}
+        </h2>
+        {description && (
+          <p className="text-muted-foreground mt-2 max-w-2xl mx-auto">
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Search */}
+      {showSearch && (
+        <div className="max-w-md mx-auto">
+          <FAQSearch
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder={searchPlaceholder}
+          />
+        </div>
+      )}
+
+      {/* Category Filter */}
+      {showCategoryFilter && categories.length > 0 && (
+        <div className="flex justify-center">
+          <FAQCategoryFilter
+            categories={categories}
+            activeCategory={activeCategory}
+            onCategoryChange={handleCategoryChange}
+            itemCounts={itemCounts}
+          />
+        </div>
+      )}
+
+      {/* FAQ Items */}
+      {filteredItems.length === 0 ? (
+        <div className="text-center py-12">
+          <HelpCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+          <p className="text-muted-foreground">
+            Aucune question ne correspond à votre recherche.
+          </p>
+        </div>
+      ) : layout === "grouped" && groupedItems ? (
+        <div className="space-y-8">
+          {Object.entries(groupedItems).map(([categoryId, categoryItems]) => {
+            const category = categories.find((c) => c.id === categoryId)
+            return (
+              <div key={categoryId}>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  {category?.icon}
+                  {category?.name || categoryId}
+                </h3>
+                {renderAccordion(categoryItems)}
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        <div className="max-w-3xl mx-auto">
+          {renderAccordion(filteredItems)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultFAQCategories: FAQCategory[] = [
+  { id: "general", name: "Général", icon: <HelpCircle className="h-4 w-4" /> },
+  { id: "billing", name: "Facturation", icon: <MessageCircle className="h-4 w-4" /> },
+  { id: "technical", name: "Technique", icon: <MessageCircle className="h-4 w-4" /> },
+]
+
+export const defaultFAQItems: FAQItem[] = [
+  {
+    id: "1",
+    question: "Comment créer un compte ?",
+    answer: "Pour créer un compte, cliquez sur le bouton 'S'inscrire' en haut à droite de la page, puis remplissez le formulaire avec vos informations personnelles.",
+    category: "general",
+    tags: ["compte", "inscription"],
+  },
+  {
+    id: "2",
+    question: "Comment réinitialiser mon mot de passe ?",
+    answer: "Cliquez sur 'Mot de passe oublié' sur la page de connexion, entrez votre email et suivez les instructions envoyées par email.",
+    category: "general",
+    tags: ["mot de passe", "sécurité"],
+  },
+  {
+    id: "3",
+    question: "Quels moyens de paiement acceptez-vous ?",
+    answer: "Nous acceptons les cartes de crédit (Visa, Mastercard, Amex), PayPal et les virements bancaires pour les entreprises.",
+    category: "billing",
+    tags: ["paiement", "carte"],
+  },
+  {
+    id: "4",
+    question: "Comment annuler mon abonnement ?",
+    answer: "Vous pouvez annuler votre abonnement à tout moment depuis les paramètres de votre compte, section 'Abonnement'.",
+    category: "billing",
+    tags: ["abonnement", "annulation"],
+  },
+  {
+    id: "5",
+    question: "L'API est-elle disponible ?",
+    answer: "Oui, notre API REST est disponible pour tous les plans payants. Consultez notre documentation développeur pour plus d'informations.",
+    category: "technical",
+    tags: ["API", "développeur"],
+  },
+]
+
+export default WakaFAQ