@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/wizard/Wizard.stories.tsx

@@ -0,0 +1,683 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaWizard, defaultWizardSteps } from './index'
+import type { WizardStep, WizardSubmitData } from './index'
+import * as React from 'react'
+import { User, Settings, Shield, CheckCircle, Mail, CreditCard, Package, Rocket } from 'lucide-react'
+
+const meta: Meta<typeof WakaWizard> = {
+  title: 'Blocks/Wizard',
+  component: WakaWizard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A multi-step wizard component with validation, progress tracking, step navigation, and multiple layouts (card, page, minimal).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['card', 'page', 'minimal'],
+    },
+    stepperPosition: {
+      control: 'select',
+      options: ['top', 'left'],
+    },
+    showProgress: {
+      control: 'boolean',
+    },
+    showStepper: {
+      control: 'boolean',
+    },
+    showStepNumbers: {
+      control: 'boolean',
+    },
+    showCancelButton: {
+      control: 'boolean',
+    },
+    allowBackNavigation: {
+      control: 'boolean',
+    },
+    confirmCancel: {
+      control: 'boolean',
+    },
+    submitting: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaWizard>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        title="Assistant de configuration"
+        description="Suivez les étapes pour configurer votre compte."
+        onSubmit={(data) => console.log('Submit:', data)}
+        onCancel={() => console.log('Cancel')}
+      />
+    </div>
+  ),
+}
+
+export const CardLayout: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        layout="card"
+        title="Créer un compte"
+        description="Complétez ces étapes pour créer votre compte."
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const PageLayout: Story = {
+  render: () => (
+    <div className="w-full max-w-4xl">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        layout="page"
+        title="Onboarding"
+        description="Bienvenue ! Configurons votre espace de travail."
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const MinimalLayout: Story = {
+  render: () => (
+    <div className="w-[600px] p-6 border rounded-lg">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        layout="minimal"
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const LeftStepper: Story = {
+  render: () => (
+    <div className="w-[900px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        stepperPosition="left"
+        title="Configuration du projet"
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => {
+    const stepsWithIcons: WizardStep[] = [
+      {
+        id: 'account',
+        title: 'Compte',
+        description: 'Créez votre compte utilisateur',
+        icon: <User className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Créer votre compte</h3>
+            <p className="text-muted-foreground">Entrez votre email et créez un mot de passe.</p>
+            <div className="grid gap-4 max-w-md">
+              <input type="email" placeholder="Email" className="px-3 py-2 border rounded-md" />
+              <input type="password" placeholder="Mot de passe" className="px-3 py-2 border rounded-md" />
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'preferences',
+        title: 'Préférences',
+        description: 'Personnalisez votre expérience',
+        icon: <Settings className="h-4 w-4" />,
+        optional: true,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Préférences</h3>
+            <p className="text-muted-foreground">Configurez vos préférences (optionnel).</p>
+            <div className="space-y-2">
+              <label className="flex items-center gap-2">
+                <input type="checkbox" className="rounded" />
+                <span>Recevoir les notifications par email</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" className="rounded" />
+                <span>Activer le mode sombre</span>
+              </label>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'security',
+        title: 'Sécurité',
+        description: 'Renforcez la sécurité de votre compte',
+        icon: <Shield className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Sécurité</h3>
+            <p className="text-muted-foreground">Configurez l'authentification à deux facteurs.</p>
+            <div className="p-4 bg-muted rounded-lg">
+              <p className="text-sm">Scannez ce QR code avec votre application d'authentification.</p>
+              <div className="mt-4 w-32 h-32 bg-background border rounded flex items-center justify-center">
+                [QR Code]
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'complete',
+        title: 'Terminé',
+        description: 'Votre compte est prêt',
+        icon: <CheckCircle className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4 text-center py-8">
+            <CheckCircle className="h-16 w-16 text-green-500 mx-auto" />
+            <h3 className="text-lg font-medium">Configuration terminée !</h3>
+            <p className="text-muted-foreground">Votre compte est maintenant configuré et prêt à l'emploi.</p>
+          </div>
+        ),
+      },
+    ]
+
+    return (
+      <div className="w-[700px]">
+        <WakaWizard
+          steps={stepsWithIcons}
+          title="Création de compte"
+          onSubmit={(data) => console.log('Submit:', data)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithValidation: Story = {
+  render: () => {
+    const [email, setEmail] = React.useState('')
+    const [name, setName] = React.useState('')
+
+    const validatedSteps: WizardStep[] = [
+      {
+        id: 'name',
+        title: 'Nom',
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Comment vous appelez-vous ?</h3>
+            <input
+              type="text"
+              placeholder="Votre nom"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="px-3 py-2 border rounded-md w-full max-w-md"
+            />
+            <p className="text-sm text-muted-foreground">Le nom est requis pour continuer.</p>
+          </div>
+        ),
+        validate: () => {
+          if (name.length < 2) {
+            alert('Le nom doit contenir au moins 2 caractères')
+            return false
+          }
+          return true
+        },
+      },
+      {
+        id: 'email',
+        title: 'Email',
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Quel est votre email ?</h3>
+            <input
+              type="email"
+              placeholder="votre@email.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="px-3 py-2 border rounded-md w-full max-w-md"
+            />
+          </div>
+        ),
+        validate: () => {
+          if (!email.includes('@')) {
+            alert('Veuillez entrer un email valide')
+            return false
+          }
+          return true
+        },
+      },
+      {
+        id: 'confirm',
+        title: 'Confirmation',
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Confirmer vos informations</h3>
+            <div className="p-4 bg-muted rounded-lg space-y-2">
+              <p><strong>Nom:</strong> {name || '(non renseigné)'}</p>
+              <p><strong>Email:</strong> {email || '(non renseigné)'}</p>
+            </div>
+          </div>
+        ),
+      },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaWizard
+          steps={validatedSteps}
+          title="Inscription avec validation"
+          onSubmit={(data) => {
+            console.log('Submit:', data, { name, email })
+            alert(`Inscription réussie pour ${name} (${email})`)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManySteps: Story = {
+  render: () => {
+    const manySteps: WizardStep[] = [
+      {
+        id: 'step-1',
+        title: 'Introduction',
+        content: <div className="py-4"><p>Bienvenue dans l'assistant de configuration.</p></div>,
+      },
+      {
+        id: 'step-2',
+        title: 'Profil',
+        content: <div className="py-4"><p>Configurez votre profil utilisateur.</p></div>,
+      },
+      {
+        id: 'step-3',
+        title: 'Organisation',
+        content: <div className="py-4"><p>Ajoutez votre organisation.</p></div>,
+        optional: true,
+      },
+      {
+        id: 'step-4',
+        title: 'Équipe',
+        content: <div className="py-4"><p>Invitez des membres de votre équipe.</p></div>,
+        optional: true,
+      },
+      {
+        id: 'step-5',
+        title: 'Intégrations',
+        content: <div className="py-4"><p>Connectez vos outils existants.</p></div>,
+        optional: true,
+      },
+      {
+        id: 'step-6',
+        title: 'Notifications',
+        content: <div className="py-4"><p>Configurez vos préférences de notification.</p></div>,
+      },
+      {
+        id: 'step-7',
+        title: 'Finalisation',
+        content: <div className="py-4"><p>Vérifiez et confirmez votre configuration.</p></div>,
+      },
+    ]
+
+    return (
+      <div className="w-[900px]">
+        <WakaWizard
+          steps={manySteps}
+          stepperPosition="left"
+          title="Configuration complète"
+          description="Un assistant en 7 étapes"
+          onSubmit={(data) => console.log('Submit:', data)}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoProgress: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        showProgress={false}
+        title="Sans barre de progression"
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const NoStepper: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        showStepper={false}
+        title="Sans stepper visuel"
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const NoBackNavigation: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        allowBackNavigation={false}
+        title="Navigation avant uniquement"
+        description="Vous ne pouvez pas revenir aux étapes précédentes."
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const NoCancelButton: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        showCancelButton={false}
+        title="Sans bouton annuler"
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const Submitting: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        submitting
+        title="En cours de soumission"
+        onSubmit={(data) => console.log('Submit:', data)}
+      />
+    </div>
+  ),
+}
+
+export const CustomButtonTexts: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaWizard
+        steps={defaultWizardSteps}
+        title="Textes personnalisés"
+        prevButtonText="Back"
+        nextButtonText="Continue"
+        finishButtonText="Complete Setup"
+        cancelButtonText="Exit"
+        skipButtonText="Skip this step"
+        onSubmit={(data) => console.log('Submit:', data)}
+        onCancel={() => console.log('Cancel')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = React.useState(0)
+    const [submitting, setSubmitting] = React.useState(false)
+    const [completed, setCompleted] = React.useState(false)
+
+    const handleSubmit = async (data: WizardSubmitData) => {
+      setSubmitting(true)
+      console.log('Submitting:', data)
+      await new Promise((r) => setTimeout(r, 2000))
+      setSubmitting(false)
+      setCompleted(true)
+    }
+
+    if (completed) {
+      return (
+        <div className="w-[600px] p-8 text-center border rounded-lg">
+          <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
+          <h2 className="text-xl font-bold mb-2">Wizard terminé !</h2>
+          <p className="text-muted-foreground mb-4">Toutes les étapes ont été complétées avec succès.</p>
+          <button
+            onClick={() => {
+              setCurrentStep(0)
+              setCompleted(false)
+            }}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
+          >
+            Recommencer
+          </button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="w-[600px]">
+        <div className="mb-4 p-4 bg-muted rounded-lg">
+          <p className="text-sm text-muted-foreground">
+            Étape actuelle: {currentStep + 1} / {defaultWizardSteps.length}
+          </p>
+        </div>
+        <WakaWizard
+          steps={defaultWizardSteps}
+          currentStep={currentStep}
+          onStepChange={setCurrentStep}
+          submitting={submitting}
+          title="Wizard interactif"
+          onSubmit={handleSubmit}
+          onCancel={() => {
+            setCurrentStep(0)
+            alert('Wizard annulé')
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const CheckoutWizard: Story = {
+  render: () => {
+    const checkoutSteps: WizardStep[] = [
+      {
+        id: 'shipping',
+        title: 'Livraison',
+        description: 'Adresse de livraison',
+        icon: <Package className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Adresse de livraison</h3>
+            <div className="grid gap-4 max-w-md">
+              <input type="text" placeholder="Nom complet" className="px-3 py-2 border rounded-md" />
+              <input type="text" placeholder="Adresse" className="px-3 py-2 border rounded-md" />
+              <div className="grid grid-cols-2 gap-4">
+                <input type="text" placeholder="Ville" className="px-3 py-2 border rounded-md" />
+                <input type="text" placeholder="Code postal" className="px-3 py-2 border rounded-md" />
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'payment',
+        title: 'Paiement',
+        description: 'Informations de paiement',
+        icon: <CreditCard className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Informations de paiement</h3>
+            <div className="grid gap-4 max-w-md">
+              <input type="text" placeholder="Numéro de carte" className="px-3 py-2 border rounded-md" />
+              <div className="grid grid-cols-2 gap-4">
+                <input type="text" placeholder="MM/AA" className="px-3 py-2 border rounded-md" />
+                <input type="text" placeholder="CVC" className="px-3 py-2 border rounded-md" />
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'contact',
+        title: 'Contact',
+        description: 'Email de confirmation',
+        icon: <Mail className="h-4 w-4" />,
+        optional: true,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Email de confirmation</h3>
+            <p className="text-muted-foreground">Recevez les mises à jour de votre commande (optionnel).</p>
+            <input type="email" placeholder="votre@email.com" className="px-3 py-2 border rounded-md max-w-md w-full" />
+          </div>
+        ),
+      },
+      {
+        id: 'confirm',
+        title: 'Confirmation',
+        description: 'Vérifier la commande',
+        icon: <CheckCircle className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Résumé de la commande</h3>
+            <div className="border rounded-lg divide-y">
+              <div className="p-4 flex justify-between">
+                <span>Produit A x 2</span>
+                <span>€59.98</span>
+              </div>
+              <div className="p-4 flex justify-between">
+                <span>Produit B x 1</span>
+                <span>€29.99</span>
+              </div>
+              <div className="p-4 flex justify-between">
+                <span>Livraison</span>
+                <span>€5.00</span>
+              </div>
+              <div className="p-4 flex justify-between font-bold">
+                <span>Total</span>
+                <span>€94.97</span>
+              </div>
+            </div>
+          </div>
+        ),
+      },
+    ]
+
+    return (
+      <div className="w-[700px]">
+        <WakaWizard
+          steps={checkoutSteps}
+          title="Finaliser la commande"
+          finishButtonText="Payer €94.97"
+          onSubmit={(data) => {
+            console.log('Order submitted:', data)
+            alert('Commande validée !')
+          }}
+          onCancel={() => console.log('Checkout cancelled')}
+        />
+      </div>
+    )
+  },
+}
+
+export const OnboardingWizard: Story = {
+  render: () => {
+    const onboardingSteps: WizardStep[] = [
+      {
+        id: 'welcome',
+        title: 'Bienvenue',
+        icon: <Rocket className="h-4 w-4" />,
+        content: (
+          <div className="text-center py-8">
+            <Rocket className="h-16 w-16 text-primary mx-auto mb-4" />
+            <h3 className="text-2xl font-bold mb-2">Bienvenue sur notre plateforme !</h3>
+            <p className="text-muted-foreground max-w-md mx-auto">
+              Nous allons vous guider pour configurer votre espace de travail en quelques étapes simples.
+            </p>
+          </div>
+        ),
+      },
+      {
+        id: 'profile',
+        title: 'Profil',
+        icon: <User className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Créez votre profil</h3>
+            <div className="flex items-center gap-4">
+              <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center">
+                <User className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <button className="px-4 py-2 border rounded-md hover:bg-muted">
+                Ajouter une photo
+              </button>
+            </div>
+            <div className="grid gap-4 max-w-md">
+              <input type="text" placeholder="Nom d'affichage" className="px-3 py-2 border rounded-md" />
+              <textarea placeholder="Bio (optionnel)" className="px-3 py-2 border rounded-md" rows={3} />
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'workspace',
+        title: 'Espace de travail',
+        icon: <Settings className="h-4 w-4" />,
+        content: (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Configurez votre espace</h3>
+            <div className="grid gap-4 max-w-md">
+              <input type="text" placeholder="Nom de l'espace" className="px-3 py-2 border rounded-md" />
+              <select className="px-3 py-2 border rounded-md">
+                <option>Personnel</option>
+                <option>Équipe (2-10)</option>
+                <option>Organisation (10+)</option>
+              </select>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: 'ready',
+        title: 'Prêt !',
+        icon: <CheckCircle className="h-4 w-4" />,
+        content: (
+          <div className="text-center py-8">
+            <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
+            <h3 className="text-2xl font-bold mb-2">Tout est prêt !</h3>
+            <p className="text-muted-foreground max-w-md mx-auto">
+              Votre espace de travail est configuré. Cliquez sur "Commencer" pour accéder à votre tableau de bord.
+            </p>
+          </div>
+        ),
+      },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center p-8">
+        <div className="w-full max-w-3xl">
+          <WakaWizard
+            steps={onboardingSteps}
+            layout="card"
+            showCancelButton={false}
+            finishButtonText="Commencer"
+            onSubmit={(data) => {
+              console.log('Onboarding complete:', data)
+              alert('Bienvenue ! Redirection vers le tableau de bord...')
+            }}
+          />
+        </div>
+      </div>
+    )
+  },
+}