@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/login/types.ts

@@ -0,0 +1,131 @@
+/**
+ * Configuration des couleurs du thème
+ */
+export interface LoginColorConfig {
+  /** Couleur principale */
+  primary: string
+  /** Couleur secondaire */
+  secondary: string
+  /** Couleur d'accent */
+  accent: string
+}
+
+/**
+ * Configuration du thème
+ */
+export interface LoginThemeConfig {
+  /** Nom du thème */
+  name: string
+  /** Mode sombre activé */
+  dark_mode: boolean
+}
+
+/**
+ * Assets (logos et images)
+ */
+export interface LoginAssetsConfig {
+  /** Logo du thème en mode sombre */
+  theme_logo_dark?: string
+  /** Logo du thème en mode clair */
+  theme_logo_light?: string
+  /** Image du thème en mode clair */
+  theme_image_light?: string
+  /** Image du thème en mode sombre */
+  theme_image_dark?: string
+  /** Image du sponsor en mode clair */
+  sponsor_image_light?: string
+  /** Image du sponsor en mode sombre */
+  sponsor_image_dark?: string
+}
+
+/**
+ * Options d'inscription et de connexion
+ */
+export interface LoginSignupOptions {
+  /** Autoriser la connexion classique */
+  allow_login: boolean
+  /** Requérir la MFA */
+  require_MFA: boolean
+  /** MFA par email */
+  MFA_email: boolean
+  /** MFA par WhatsApp */
+  MFA_whatsapp: boolean
+  /** MFA par RCS */
+  MFA_RCS: boolean
+  /** Autoriser SSO Google */
+  allow_sso_google: boolean
+  /** Autoriser SSO Microsoft */
+  allow_sso_microsoft: boolean
+  /** Autoriser SSO Apple */
+  allow_sso_apple: boolean
+  /** Autoriser SSO LinkedIn */
+  allow_sso_linkedIn: boolean
+  /** Autoriser SSO GitHub */
+  allow_sso_github: boolean
+  /** Autoriser SSO Facebook */
+  allow_sso_facebook: boolean
+  /** Autoriser SSO Instagram */
+  allow_sso_instagram: boolean
+  /** Autoriser SSO France Connect */
+  allow_sso_france_connect: boolean
+}
+
+/**
+ * Configuration complète du composant Login
+ * 
+ * Structure JSON attendue :
+ * {
+ *   "color_json": {
+ *     "primary": "#000000",
+ *     "secondary": "#FFFFFF",
+ *     "accent": "#FF9900"
+ *   },
+ *   "theme_json": {
+ *     "name": "Default Theme",
+ *     "dark_mode": true
+ *   },
+ *   "assets": {
+ *     "theme_logo_dark": "https://...",
+ *     "theme_logo_light": "https://...",
+ *     "theme_image_light": "https://...",
+ *     "theme_image_dark": "https://...",
+ *     "sponsor_image_light": "https://...",
+ *     "sponsor_image_dark": "https://..."
+ *   },
+ *   "waka_powered": true,
+ *   "lang_code": "fr_FR",
+ *   "signup_options": {
+ *     "allow_login": true,
+ *     "require_MFA": false,
+ *     "MFA_email": true,
+ *     "MFA_whatsapp": false,
+ *     "MFA_RCS": false,
+ *     "allow_sso_google": true,
+ *     "allow_sso_microsoft": true,
+ *     "allow_sso_apple": false,
+ *     "allow_sso_linkedIn": false,
+ *     "allow_sso_github": false,
+ *     "allow_sso_facebook": false,
+ *     "allow_sso_instagram": false,
+ *     "allow_sso_france_connect": false
+ *   },
+ *   "oem_resolution_rules": ["..."]
+ * }
+ */
+export interface LoginConfig {
+  /** Configuration des couleurs du thème */
+  color_json: LoginColorConfig
+  /** Configuration du thème (nom et mode dark/light) */
+  theme_json: LoginThemeConfig
+  /** Assets (logos et images selon le thème) */
+  assets: LoginAssetsConfig
+  /** Afficher le badge "Waka Powered" en bas du formulaire */
+  waka_powered: boolean
+  /** Code de langue (ex: "fr_FR", "en_US") - utilisé pour l'i18n */
+  lang_code: string
+  /** Options d'inscription et de connexion (SSO, MFA, etc.) */
+  signup_options: LoginSignupOptions
+  /** Règles de résolution OEM (optionnel, utilisé pour la documentation/logique métier) */
+  oem_resolution_rules?: string[]
+}
+

package/src/blocks/pricing/index.tsx

@@ -0,0 +1,564 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/card"
+import { Badge } from "../../components/badge"
+import { Switch } from "../../components/switch"
+import { Label } from "../../components/label"
+import {
+  Check,
+  X,
+  Zap,
+  HelpCircle,
+} from "lucide-react"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../components/tooltip"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface PricingFeature {
+  name: string
+  included: boolean | "partial" | "limited"
+  tooltip?: string
+  value?: string
+}
+
+export interface PricingPlan {
+  id: string
+  name: string
+  description?: string
+  price: number | string
+  priceYearly?: number | string
+  currency?: string
+  period?: string
+  periodYearly?: string
+  features: PricingFeature[]
+  buttonText?: string
+  buttonVariant?: "default" | "outline" | "secondary"
+  onSelect?: () => void
+  href?: string
+  popular?: boolean
+  badge?: string
+  disabled?: boolean
+}
+
+export interface PricingFAQ {
+  question: string
+  answer: string
+}
+
+export interface WakaPricingProps {
+  /** Titre */
+  title?: string
+  /** Description */
+  description?: string
+  /** Plans de tarification */
+  plans: PricingPlan[]
+  /** Afficher le toggle mensuel/annuel */
+  showBillingToggle?: boolean
+  /** Période de facturation */
+  billingPeriod?: "monthly" | "yearly"
+  /** Callback changement de période */
+  onBillingPeriodChange?: (period: "monthly" | "yearly") => void
+  /** Réduction annuelle (ex: "20%") */
+  yearlyDiscount?: string
+  /** FAQ */
+  faq?: PricingFAQ[]
+  /** Titre de la FAQ */
+  faqTitle?: string
+  /** Layout */
+  layout?: "cards" | "table"
+  /** Nombre de colonnes */
+  columns?: 2 | 3 | 4
+  /** Afficher la comparaison de features */
+  showComparison?: boolean
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface PricingToggleProps {
+  period: "monthly" | "yearly"
+  onChange: (period: "monthly" | "yearly") => void
+  yearlyDiscount?: string
+}
+
+function PricingToggle({ period, onChange, yearlyDiscount }: PricingToggleProps) {
+  return (
+    <div className="flex items-center justify-center gap-4 mb-8">
+      <Label
+        htmlFor="billing-toggle"
+        className={cn(
+          "cursor-pointer transition-colors",
+          period === "monthly" ? "text-foreground" : "text-muted-foreground"
+        )}
+      >
+        Mensuel
+      </Label>
+      <Switch
+        id="billing-toggle"
+        checked={period === "yearly"}
+        onCheckedChange={(checked) => onChange(checked ? "yearly" : "monthly")}
+      />
+      <Label
+        htmlFor="billing-toggle"
+        className={cn(
+          "cursor-pointer transition-colors flex items-center gap-2",
+          period === "yearly" ? "text-foreground" : "text-muted-foreground"
+        )}
+      >
+        Annuel
+        {yearlyDiscount && (
+          <Badge variant="secondary" className="text-xs">
+            -{yearlyDiscount}
+          </Badge>
+        )}
+      </Label>
+    </div>
+  )
+}
+
+interface PricingCardProps {
+  plan: PricingPlan
+  billingPeriod: "monthly" | "yearly"
+}
+
+function PricingCard({ plan, billingPeriod }: PricingCardProps) {
+  const price = billingPeriod === "yearly" && plan.priceYearly !== undefined
+    ? plan.priceYearly
+    : plan.price
+  const period = billingPeriod === "yearly" && plan.periodYearly
+    ? plan.periodYearly
+    : plan.period || "/mois"
+
+  const isCustomPrice = typeof price === "string"
+
+  return (
+    <Card
+      className={cn(
+        "relative flex flex-col",
+        plan.popular && "border-primary shadow-lg scale-105"
+      )}
+    >
+      {/* Popular badge */}
+      {plan.popular && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge className="px-3">
+            <Zap className="h-3 w-3 mr-1" />
+            {plan.badge || "Populaire"}
+          </Badge>
+        </div>
+      )}
+
+      <CardHeader className="text-center pb-2">
+        <CardTitle className="text-xl">{plan.name}</CardTitle>
+        {plan.description && (
+          <CardDescription>{plan.description}</CardDescription>
+        )}
+      </CardHeader>
+
+      <CardContent className="flex-1">
+        {/* Price */}
+        <div className="text-center mb-6">
+          {isCustomPrice ? (
+            <div className="text-3xl font-bold">{price}</div>
+          ) : (
+            <div className="flex items-baseline justify-center">
+              <span className="text-sm text-muted-foreground mr-1">
+                {plan.currency || "€"}
+              </span>
+              <span className="text-4xl font-bold">{price}</span>
+              <span className="text-sm text-muted-foreground ml-1">
+                {period}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Features */}
+        <ul className="space-y-3">
+          {plan.features.map((feature, index) => (
+            <li key={index} className="flex items-start gap-2">
+              {feature.included === true ? (
+                <Check className="h-5 w-5 text-green-500 flex-shrink-0" />
+              ) : feature.included === "partial" || feature.included === "limited" ? (
+                <Check className="h-5 w-5 text-yellow-500 flex-shrink-0" />
+              ) : (
+                <X className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+              )}
+              <span
+                className={cn(
+                  "text-sm",
+                  !feature.included && "text-muted-foreground"
+                )}
+              >
+                {feature.name}
+                {feature.value && (
+                  <span className="text-muted-foreground ml-1">
+                    ({feature.value})
+                  </span>
+                )}
+              </span>
+              {feature.tooltip && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p className="max-w-xs">{feature.tooltip}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+
+      <CardFooter>
+        <Button
+          className="w-full"
+          variant={plan.buttonVariant || (plan.popular ? "default" : "outline")}
+          onClick={plan.onSelect}
+          disabled={plan.disabled}
+          asChild={!!plan.href}
+        >
+          {plan.href ? (
+            <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+          ) : (
+            plan.buttonText || "Choisir"
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+interface PricingTableProps {
+  plans: PricingPlan[]
+  billingPeriod: "monthly" | "yearly"
+}
+
+function PricingTable({ plans, billingPeriod }: PricingTableProps) {
+  // Get all unique features
+  const allFeatures = Array.from(
+    new Set(plans.flatMap((plan) => plan.features.map((f) => f.name)))
+  )
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="text-left p-4 border-b bg-muted/50">Fonctionnalité</th>
+            {plans.map((plan) => (
+              <th
+                key={plan.id}
+                className={cn(
+                  "text-center p-4 border-b min-w-[150px]",
+                  plan.popular && "bg-primary/5"
+                )}
+              >
+                <div className="font-bold">{plan.name}</div>
+                {plan.popular && (
+                  <Badge className="mt-1" variant="default">
+                    Populaire
+                  </Badge>
+                )}
+              </th>
+            ))}
+          </tr>
+          {/* Price row */}
+          <tr>
+            <td className="p-4 border-b bg-muted/50 font-medium">Prix</td>
+            {plans.map((plan) => {
+              const price = billingPeriod === "yearly" && plan.priceYearly !== undefined
+                ? plan.priceYearly
+                : plan.price
+              const period = billingPeriod === "yearly" && plan.periodYearly
+                ? plan.periodYearly
+                : plan.period || "/mois"
+              const isCustomPrice = typeof price === "string"
+
+              return (
+                <td
+                  key={plan.id}
+                  className={cn(
+                    "text-center p-4 border-b",
+                    plan.popular && "bg-primary/5"
+                  )}
+                >
+                  {isCustomPrice ? (
+                    <span className="font-bold">{price}</span>
+                  ) : (
+                    <span className="font-bold">
+                      {plan.currency || "€"}{price}
+                      <span className="text-sm font-normal text-muted-foreground">
+                        {period}
+                      </span>
+                    </span>
+                  )}
+                </td>
+              )
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {allFeatures.map((featureName, index) => (
+            <tr key={index} className={index % 2 === 0 ? "bg-muted/20" : ""}>
+              <td className="p-4 border-b">{featureName}</td>
+              {plans.map((plan) => {
+                const feature = plan.features.find((f) => f.name === featureName)
+                return (
+                  <td
+                    key={plan.id}
+                    className={cn(
+                      "text-center p-4 border-b",
+                      plan.popular && "bg-primary/5"
+                    )}
+                  >
+                    {feature ? (
+                      feature.included === true ? (
+                        feature.value ? (
+                          <span>{feature.value}</span>
+                        ) : (
+                          <Check className="h-5 w-5 text-green-500 mx-auto" />
+                        )
+                      ) : feature.included === "partial" || feature.included === "limited" ? (
+                        <span className="text-yellow-600">{feature.value || "Limité"}</span>
+                      ) : (
+                        <X className="h-5 w-5 text-muted-foreground mx-auto" />
+                      )
+                    ) : (
+                      <X className="h-5 w-5 text-muted-foreground mx-auto" />
+                    )}
+                  </td>
+                )
+              })}
+            </tr>
+          ))}
+          {/* Action row */}
+          <tr>
+            <td className="p-4"></td>
+            {plans.map((plan) => (
+              <td
+                key={plan.id}
+                className={cn(
+                  "text-center p-4",
+                  plan.popular && "bg-primary/5"
+                )}
+              >
+                <Button
+                  variant={plan.buttonVariant || (plan.popular ? "default" : "outline")}
+                  onClick={plan.onSelect}
+                  disabled={plan.disabled}
+                  asChild={!!plan.href}
+                >
+                  {plan.href ? (
+                    <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+                  ) : (
+                    plan.buttonText || "Choisir"
+                  )}
+                </Button>
+              </td>
+            ))}
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+interface PricingFAQSectionProps {
+  title?: string
+  items: PricingFAQ[]
+}
+
+function PricingFAQSection({ title = "Questions fréquentes", items }: PricingFAQSectionProps) {
+  return (
+    <div className="mt-16">
+      <h2 className="text-2xl font-bold text-center mb-8">{title}</h2>
+      <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+        {items.map((item, index) => (
+          <div key={index} className="space-y-2">
+            <h3 className="font-semibold">{item.question}</h3>
+            <p className="text-muted-foreground text-sm">{item.answer}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaPricing({
+  title = "Tarification",
+  description,
+  plans,
+  showBillingToggle = true,
+  billingPeriod: externalBillingPeriod,
+  onBillingPeriodChange,
+  yearlyDiscount,
+  faq,
+  faqTitle,
+  layout = "cards",
+  columns = 3,
+  showComparison = false,
+  className,
+}: WakaPricingProps) {
+  const [internalBillingPeriod, setInternalBillingPeriod] = React.useState<"monthly" | "yearly">("monthly")
+
+  const billingPeriod = externalBillingPeriod ?? internalBillingPeriod
+
+  const handleBillingPeriodChange = (period: "monthly" | "yearly") => {
+    if (onBillingPeriodChange) {
+      onBillingPeriodChange(period)
+    } else {
+      setInternalBillingPeriod(period)
+    }
+  }
+
+  const columnClasses = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-2 lg:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4",
+  }
+
+  return (
+    <div className={cn("container py-16", className)}>
+      {/* Header */}
+      <div className="text-center mb-12">
+        <h1 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Billing toggle */}
+      {showBillingToggle && (
+        <PricingToggle
+          period={billingPeriod}
+          onChange={handleBillingPeriodChange}
+          yearlyDiscount={yearlyDiscount}
+        />
+      )}
+
+      {/* Plans */}
+      {layout === "cards" && !showComparison ? (
+        <div className={cn("grid gap-6 items-stretch", columnClasses[columns])}>
+          {plans.map((plan) => (
+            <PricingCard key={plan.id} plan={plan} billingPeriod={billingPeriod} />
+          ))}
+        </div>
+      ) : (
+        <PricingTable plans={plans} billingPeriod={billingPeriod} />
+      )}
+
+      {/* FAQ */}
+      {faq && faq.length > 0 && (
+        <PricingFAQSection title={faqTitle} items={faq} />
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultPricingPlans: PricingPlan[] = [
+  {
+    id: "free",
+    name: "Gratuit",
+    description: "Pour démarrer",
+    price: 0,
+    priceYearly: 0,
+    features: [
+      { name: "1 utilisateur", included: true },
+      { name: "5 projets", included: true },
+      { name: "1 Go de stockage", included: true },
+      { name: "Support email", included: true },
+      { name: "API Access", included: false },
+      { name: "Analytics avancés", included: false },
+      { name: "Support prioritaire", included: false },
+    ],
+    buttonText: "Commencer gratuitement",
+    buttonVariant: "outline",
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    description: "Pour les équipes",
+    price: 29,
+    priceYearly: 24,
+    periodYearly: "/mois (facturé annuellement)",
+    popular: true,
+    features: [
+      { name: "5 utilisateurs", included: true },
+      { name: "Projets illimités", included: true },
+      { name: "50 Go de stockage", included: true },
+      { name: "Support email", included: true },
+      { name: "API Access", included: true },
+      { name: "Analytics avancés", included: true },
+      { name: "Support prioritaire", included: false },
+    ],
+    buttonText: "Essai gratuit 14 jours",
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    description: "Pour les grandes équipes",
+    price: "Sur mesure",
+    features: [
+      { name: "Utilisateurs illimités", included: true },
+      { name: "Projets illimités", included: true },
+      { name: "Stockage illimité", included: true },
+      { name: "Support email", included: true },
+      { name: "API Access", included: true },
+      { name: "Analytics avancés", included: true },
+      { name: "Support prioritaire", included: true },
+    ],
+    buttonText: "Contacter les ventes",
+    buttonVariant: "outline",
+  },
+]
+
+export const defaultPricingFAQ: PricingFAQ[] = [
+  {
+    question: "Puis-je changer de plan à tout moment ?",
+    answer: "Oui, vous pouvez upgrader ou downgrader votre plan à tout moment. Les changements prennent effet immédiatement.",
+  },
+  {
+    question: "Y a-t-il une période d'essai ?",
+    answer: "Oui, tous nos plans payants incluent une période d'essai gratuite de 14 jours, sans carte bancaire requise.",
+  },
+  {
+    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.",
+  },
+  {
+    question: "Puis-je annuler à tout moment ?",
+    answer: "Absolument. Vous pouvez annuler votre abonnement à tout moment sans frais supplémentaires.",
+  },
+]
+
+export default WakaPricing