@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/pricing/WakaPricing.stories.tsx

@@ -0,0 +1,530 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPricing, defaultPricingPlans, defaultPricingFAQ } from './index'
+import type { PricingPlan, PricingFAQ } from './index'
+import * as React from 'react'
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props} onClick={(e) => e.preventDefault()}>
+    {children}
+  </a>
+)
+
+const meta: Meta<typeof WakaPricing> = {
+  title: 'Blocks/Pricing',
+  component: WakaPricing,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A pricing section with plan cards, comparison table, billing toggle, and FAQ. Supports monthly/yearly pricing.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['cards', 'table'],
+    },
+    columns: {
+      control: 'select',
+      options: [2, 3, 4],
+    },
+    showBillingToggle: {
+      control: 'boolean',
+    },
+    showComparison: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPricing>
+
+export const Default: Story = {
+  render: () => (
+    <WakaPricing
+      title="Choose your plan"
+      description="Start free and scale as you grow. No hidden fees."
+      plans={defaultPricingPlans}
+      yearlyDiscount="20%"
+      faq={defaultPricingFAQ}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const WithoutBillingToggle: Story = {
+  render: () => (
+    <WakaPricing
+      title="Simple Pricing"
+      description="One price, all features included."
+      plans={defaultPricingPlans}
+      showBillingToggle={false}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const TwoPlans: Story = {
+  render: () => {
+    const twoPlans: PricingPlan[] = [
+      {
+        id: 'starter',
+        name: 'Starter',
+        description: 'For individuals',
+        price: 9,
+        priceYearly: 7,
+        features: [
+          { name: '1 user', included: true },
+          { name: '10 projects', included: true },
+          { name: 'Basic support', included: true },
+          { name: 'API access', included: false },
+        ],
+        buttonText: 'Get Started',
+        buttonVariant: 'outline',
+      },
+      {
+        id: 'pro',
+        name: 'Pro',
+        description: 'For teams',
+        price: 29,
+        priceYearly: 24,
+        popular: true,
+        features: [
+          { name: 'Unlimited users', included: true },
+          { name: 'Unlimited projects', included: true },
+          { name: 'Priority support', included: true },
+          { name: 'API access', included: true },
+        ],
+        buttonText: 'Start Free Trial',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Pick a plan"
+        plans={twoPlans}
+        columns={2}
+        yearlyDiscount="20%"
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const FourPlans: Story = {
+  render: () => {
+    const fourPlans: PricingPlan[] = [
+      {
+        id: 'hobby',
+        name: 'Hobby',
+        price: 0,
+        features: [
+          { name: '1 user', included: true },
+          { name: '3 projects', included: true },
+          { name: 'Community support', included: true },
+        ],
+        buttonText: 'Start Free',
+        buttonVariant: 'outline',
+      },
+      {
+        id: 'starter',
+        name: 'Starter',
+        price: 15,
+        priceYearly: 12,
+        features: [
+          { name: '3 users', included: true },
+          { name: '10 projects', included: true },
+          { name: 'Email support', included: true },
+        ],
+        buttonText: 'Get Started',
+        buttonVariant: 'outline',
+      },
+      {
+        id: 'pro',
+        name: 'Pro',
+        price: 49,
+        priceYearly: 39,
+        popular: true,
+        features: [
+          { name: '10 users', included: true },
+          { name: 'Unlimited projects', included: true },
+          { name: 'Priority support', included: true },
+        ],
+        buttonText: 'Start Trial',
+      },
+      {
+        id: 'enterprise',
+        name: 'Enterprise',
+        price: 'Custom',
+        features: [
+          { name: 'Unlimited users', included: true },
+          { name: 'Unlimited everything', included: true },
+          { name: 'Dedicated support', included: true },
+        ],
+        buttonText: 'Contact Sales',
+        buttonVariant: 'outline',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Plans for every team"
+        plans={fourPlans}
+        columns={4}
+        yearlyDiscount="20%"
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const TableLayout: Story = {
+  render: () => (
+    <WakaPricing
+      title="Compare Plans"
+      description="See all features side by side"
+      plans={defaultPricingPlans}
+      layout="table"
+      showComparison
+      yearlyDiscount="20%"
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const WithFAQ: Story = {
+  render: () => {
+    const customFAQ: PricingFAQ[] = [
+      {
+        question: 'What payment methods do you accept?',
+        answer: 'We accept all major credit cards (Visa, Mastercard, Amex), PayPal, and wire transfers for enterprise customers.',
+      },
+      {
+        question: 'Can I change plans later?',
+        answer: 'Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately.',
+      },
+      {
+        question: 'Is there a free trial?',
+        answer: 'Yes, all paid plans include a 14-day free trial. No credit card required.',
+      },
+      {
+        question: 'What happens if I exceed my limits?',
+        answer: "We'll notify you when you're approaching your limits. You can upgrade or we'll help you optimize your usage.",
+      },
+      {
+        question: 'Do you offer refunds?',
+        answer: 'Yes, we offer a 30-day money-back guarantee for all paid plans.',
+      },
+      {
+        question: 'Is there a discount for nonprofits?',
+        answer: 'Yes! Nonprofits and educational institutions get 50% off all plans. Contact us for details.',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Pricing"
+        plans={defaultPricingPlans}
+        yearlyDiscount="20%"
+        faq={customFAQ}
+        faqTitle="Frequently Asked Questions"
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const ControlledBillingPeriod: Story = {
+  render: () => {
+    const [period, setPeriod] = React.useState<'monthly' | 'yearly'>('monthly')
+
+    return (
+      <div>
+        <div className="text-center mb-4">
+          <p className="text-sm text-muted-foreground">
+            Current period: <strong>{period}</strong>
+          </p>
+        </div>
+        <WakaPricing
+          title="Pricing"
+          plans={defaultPricingPlans}
+          billingPeriod={period}
+          onBillingPeriodChange={setPeriod}
+          yearlyDiscount="20%"
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithTooltips: Story = {
+  render: () => {
+    const plansWithTooltips: PricingPlan[] = [
+      {
+        id: 'basic',
+        name: 'Basic',
+        price: 0,
+        features: [
+          { name: 'Storage', included: true, value: '5 GB', tooltip: 'Cloud storage for your files' },
+          { name: 'API calls', included: 'limited', value: '1K/month', tooltip: 'Number of API requests per month' },
+          { name: 'Support', included: true, tooltip: 'Community forum support' },
+          { name: 'Analytics', included: false, tooltip: 'Advanced analytics and reporting' },
+        ],
+        buttonText: 'Start Free',
+        buttonVariant: 'outline',
+      },
+      {
+        id: 'pro',
+        name: 'Pro',
+        price: 29,
+        priceYearly: 24,
+        popular: true,
+        features: [
+          { name: 'Storage', included: true, value: '100 GB', tooltip: 'Cloud storage for your files' },
+          { name: 'API calls', included: true, value: '100K/month', tooltip: 'Number of API requests per month' },
+          { name: 'Support', included: true, tooltip: 'Priority email support' },
+          { name: 'Analytics', included: true, tooltip: 'Advanced analytics and reporting' },
+        ],
+        buttonText: 'Start Trial',
+      },
+      {
+        id: 'enterprise',
+        name: 'Enterprise',
+        price: 'Custom',
+        features: [
+          { name: 'Storage', included: true, value: 'Unlimited', tooltip: 'No storage limits' },
+          { name: 'API calls', included: true, value: 'Unlimited', tooltip: 'No API rate limits' },
+          { name: 'Support', included: true, tooltip: 'Dedicated account manager + SLA' },
+          { name: 'Analytics', included: true, tooltip: 'Custom analytics and white-label reports' },
+        ],
+        buttonText: 'Contact Sales',
+        buttonVariant: 'outline',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Compare Features"
+        description="Hover over features to learn more"
+        plans={plansWithTooltips}
+        yearlyDiscount="20%"
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const CustomCurrency: Story = {
+  render: () => {
+    const euroPlans: PricingPlan[] = [
+      {
+        id: 'basic',
+        name: 'Basic',
+        price: 0,
+        currency: '€',
+        features: [
+          { name: '1 utilisateur', included: true },
+          { name: '5 projets', included: true },
+        ],
+        buttonText: 'Commencer',
+        buttonVariant: 'outline',
+      },
+      {
+        id: 'pro',
+        name: 'Pro',
+        price: 25,
+        priceYearly: 20,
+        currency: '€',
+        period: '/mois',
+        periodYearly: '/mois (facturé annuellement)',
+        popular: true,
+        features: [
+          { name: '5 utilisateurs', included: true },
+          { name: 'Projets illimités', included: true },
+        ],
+        buttonText: 'Essai gratuit',
+      },
+      {
+        id: 'enterprise',
+        name: 'Enterprise',
+        price: 'Sur devis',
+        currency: '',
+        features: [
+          { name: 'Utilisateurs illimités', included: true },
+          { name: 'Support dédié', included: true },
+        ],
+        buttonText: 'Contacter',
+        buttonVariant: 'outline',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Tarification"
+        description="Choisissez le plan qui vous convient"
+        plans={euroPlans}
+        yearlyDiscount="20%"
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedPlan, setSelectedPlan] = React.useState<string | null>(null)
+
+    const interactivePlans: PricingPlan[] = defaultPricingPlans.map((plan) => ({
+      ...plan,
+      onSelect: () => {
+        setSelectedPlan(plan.id)
+        console.log('Selected plan:', plan.name)
+      },
+    }))
+
+    return (
+      <div>
+        {selectedPlan && (
+          <div className="bg-primary/10 p-4 text-center mb-4 rounded-lg">
+            <p className="text-sm">
+              You selected: <strong className="capitalize">{selectedPlan}</strong>
+            </p>
+          </div>
+        )}
+        <WakaPricing
+          title="Select a Plan"
+          plans={interactivePlans}
+          yearlyDiscount="20%"
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const PartialFeatures: Story = {
+  render: () => {
+    const plansWithPartial: PricingPlan[] = [
+      {
+        id: 'starter',
+        name: 'Starter',
+        price: 9,
+        features: [
+          { name: 'Projects', included: true, value: '5' },
+          { name: 'Storage', included: 'limited', value: '1 GB' },
+          { name: 'API Access', included: 'partial', value: 'Read-only' },
+          { name: 'Team members', included: false },
+          { name: 'Analytics', included: false },
+        ],
+        buttonText: 'Get Started',
+        buttonVariant: 'outline',
+      },
+      {
+        id: 'growth',
+        name: 'Growth',
+        price: 29,
+        popular: true,
+        features: [
+          { name: 'Projects', included: true, value: '25' },
+          { name: 'Storage', included: true, value: '25 GB' },
+          { name: 'API Access', included: true, value: 'Full access' },
+          { name: 'Team members', included: 'limited', value: 'Up to 5' },
+          { name: 'Analytics', included: 'partial', value: 'Basic' },
+        ],
+        buttonText: 'Start Trial',
+      },
+      {
+        id: 'scale',
+        name: 'Scale',
+        price: 99,
+        features: [
+          { name: 'Projects', included: true, value: 'Unlimited' },
+          { name: 'Storage', included: true, value: '100 GB' },
+          { name: 'API Access', included: true, value: 'Full access' },
+          { name: 'Team members', included: true, value: 'Unlimited' },
+          { name: 'Analytics', included: true, value: 'Advanced' },
+        ],
+        buttonText: 'Contact Sales',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Feature Comparison"
+        description="Yellow checkmarks indicate limited access"
+        plans={plansWithPartial}
+        showBillingToggle={false}
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const DisabledPlans: Story = {
+  render: () => {
+    const plansWithDisabled: PricingPlan[] = [
+      {
+        ...defaultPricingPlans[0],
+        disabled: true,
+        buttonText: 'Coming Soon',
+      },
+      defaultPricingPlans[1],
+      {
+        ...defaultPricingPlans[2],
+        badge: 'Limited',
+        buttonText: 'Waitlist',
+      },
+    ]
+
+    return (
+      <WakaPricing
+        title="Available Plans"
+        plans={plansWithDisabled}
+        showBillingToggle={false}
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const CompletePricingPage: Story = {
+  render: () => (
+    <div className="min-h-screen">
+      <header className="border-b py-4">
+        <div className="container flex items-center justify-between">
+          <span className="font-bold text-xl">SaaSApp</span>
+          <nav className="flex gap-6 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Features</a>
+            <a href="#" className="text-foreground font-medium">Pricing</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Docs</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Blog</a>
+          </nav>
+          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
+            Sign In
+          </button>
+        </div>
+      </header>
+
+      <WakaPricing
+        title="Simple, transparent pricing"
+        description="No hidden fees. No surprises. Start free and scale as you grow."
+        plans={defaultPricingPlans}
+        yearlyDiscount="20%"
+        faq={defaultPricingFAQ}
+        faqTitle="Common Questions"
+        LinkComponent={MockLink}
+      />
+
+      <footer className="border-t py-8 bg-muted/30">
+        <div className="container text-center text-sm text-muted-foreground">
+          © 2024 SaaSApp Inc. All rights reserved.
+        </div>
+      </footer>
+    </div>
+  ),
+}

package/src/blocks/pricing/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Button } from "../../components/button"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/card"
 import { Badge } from "../../components/badge"
@@ -82,6 +83,22 @@ export interface WakaPricingProps {
   showComparison?: boolean
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface PricingContextValue {
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+const PricingContext = React.createContext<PricingContextValue>({})
+
+function usePricingContext() {
+  return React.useContext(PricingContext)
 }
 
 // ============================================
@@ -135,6 +152,8 @@ interface PricingCardProps {
 }
 
 function PricingCard({ plan, billingPeriod }: PricingCardProps) {
+  const { LinkComponent } = usePricingContext()
+
   const price = billingPeriod === "yearly" && plan.priceYearly !== undefined
     ? plan.priceYearly
     : plan.price
@@ -236,7 +255,11 @@ function PricingCard({ plan, billingPeriod }: PricingCardProps) {
           asChild={!!plan.href}
         >
           {plan.href ? (
-            <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+            LinkComponent ? (
+              <LinkComponent href={plan.href}>{plan.buttonText || "Choisir"}</LinkComponent>
+            ) : (
+              <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+            )
           ) : (
             plan.buttonText || "Choisir"
           )}
@@ -252,6 +275,8 @@ interface PricingTableProps {
 }
 
 function PricingTable({ plans, billingPeriod }: PricingTableProps) {
+  const { LinkComponent } = usePricingContext()
+
   // Get all unique features
   const allFeatures = Array.from(
     new Set(plans.flatMap((plan) => plan.features.map((f) => f.name)))
@@ -367,7 +392,11 @@ function PricingTable({ plans, billingPeriod }: PricingTableProps) {
                   asChild={!!plan.href}
                 >
                   {plan.href ? (
-                    <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+                    LinkComponent ? (
+                      <LinkComponent href={plan.href}>{plan.buttonText || "Choisir"}</LinkComponent>
+                    ) : (
+                      <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+                    )
                   ) : (
                     plan.buttonText || "Choisir"
                   )}
@@ -420,6 +449,7 @@ export function WakaPricing({
   columns = 3,
   showComparison = false,
   className,
+  LinkComponent,
 }: WakaPricingProps) {
   const [internalBillingPeriod, setInternalBillingPeriod] = React.useState<"monthly" | "yearly">("monthly")
 
@@ -439,8 +469,11 @@ export function WakaPricing({
     4: "md:grid-cols-2 lg:grid-cols-4",
   }
 
+  const contextValue = React.useMemo(() => ({ LinkComponent }), [LinkComponent])
+
   return (
-    <div className={cn("container py-16", className)}>
+    <PricingContext.Provider value={contextValue}>
+      <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">
@@ -477,7 +510,8 @@ export function WakaPricing({
       {faq && faq.length > 0 && (
         <PricingFAQSection title={faqTitle} items={faq} />
       )}
-    </div>
+      </div>
+    </PricingContext.Provider>
   )
 }