@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-stepper/WakaStepper.stories.tsx

@@ -1,40 +1,46 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaStepper, StepperNavigation } from './index'
-import type { Step } from './index'
-import * as React from 'react'
-import { User, CreditCard, CheckCircle, Package, Truck, MapPin } from 'lucide-react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaStepper, type Step } from "./index"
+import { useState } from "react"
+import { User, CreditCard, CheckCircle, Settings } from "lucide-react"
 
 const meta: Meta<typeof WakaStepper> = {
-  title: 'Components/Display/WakaStepper',
+  title: "Forms/WakaStepper",
   component: WakaStepper,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A step wizard component for multi-step forms and processes with progress tracking.',
-      },
-    },
+    layout: "padded",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
+    currentStep: {
+      control: { type: "number", min: 0, max: 4 },
+      description: "Index de l'étape courante",
+    },
     orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Stepper orientation',
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Orientation du stepper",
     },
     variant: {
-      control: 'select',
-      options: ['default', 'simple', 'numbered'],
-      description: 'Visual variant',
+      control: "select",
+      options: ["default", "simple", "numbered"],
+      description: "Variante visuelle",
     },
     size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the stepper',
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille du stepper",
     },
     clickable: {
-      control: 'boolean',
-      description: 'Allow clicking on steps',
+      control: "boolean",
+      description: "Navigation en cliquant sur les étapes",
+    },
+    allowPrevious: {
+      control: "boolean",
+      description: "Navigation vers les étapes précédentes uniquement",
+    },
+    showContent: {
+      control: "boolean",
+      description: "Afficher le contenu de l'étape",
     },
   },
 }
@@ -43,426 +49,147 @@ export default meta
 type Story = StoryObj<typeof WakaStepper>
 
 const basicSteps: Step[] = [
-  {
-    id: 'step-1',
-    title: 'Account',
-    description: 'Create your account',
-  },
-  {
-    id: 'step-2',
-    title: 'Profile',
-    description: 'Set up your profile',
-  },
-  {
-    id: 'step-3',
-    title: 'Preferences',
-    description: 'Configure settings',
-  },
-  {
-    id: 'step-4',
-    title: 'Complete',
-    description: 'Review and finish',
+  { id: "1", title: "Informations personnelles", description: "Renseignez vos coordonnées" },
+  { id: "2", title: "Adresse", description: "Adresse de livraison" },
+  { id: "3", title: "Paiement", description: "Choisissez votre mode de paiement" },
+  { id: "4", title: "Confirmation", description: "Vérifiez et validez" },
+]
+
+const stepsWithIcons: Step[] = [
+  { id: "1", title: "Compte", description: "Créez votre compte", icon: <User className="tw-h-4 tw-w-4" /> },
+  { id: "2", title: "Paramètres", description: "Configurez vos préférences", icon: <Settings className="tw-h-4 tw-w-4" /> },
+  { id: "3", title: "Paiement", description: "Ajoutez un moyen de paiement", icon: <CreditCard className="tw-h-4 tw-w-4" /> },
+  { id: "4", title: "Terminé", description: "Tout est prêt", icon: <CheckCircle className="tw-h-4 tw-w-4" /> },
+]
+
+const stepsWithContent: Step[] = [
+  { 
+    id: "1", 
+    title: "Étape 1", 
+    description: "Première étape",
+    content: <div className="tw-p-4 tw-bg-muted tw-rounded-lg">Contenu de l'étape 1</div>
+  },
+  { 
+    id: "2", 
+    title: "Étape 2", 
+    description: "Deuxième étape",
+    content: <div className="tw-p-4 tw-bg-muted tw-rounded-lg">Contenu de l'étape 2</div>
+  },
+  { 
+    id: "3", 
+    title: "Étape 3", 
+    description: "Troisième étape",
+    content: <div className="tw-p-4 tw-bg-muted tw-rounded-lg">Contenu de l'étape 3</div>
   },
 ]
 
 export const Default: Story = {
   args: {
     steps: basicSteps,
+    currentStep: 1,
+    orientation: "horizontal",
+    variant: "default",
+    size: "md",
+    clickable: false,
   },
-  render: (args) => {
-    const [currentStep, setCurrentStep] = React.useState(1)
-    return (
-      <div className="w-[700px]">
-        <WakaStepper
-          {...args}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-        />
-        <div className="mt-8 flex justify-between">
-          <button
-            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
-            disabled={currentStep === 0}
-            className="px-4 py-2 border rounded disabled:opacity-50"
-          >
-            Previous
-          </button>
-          <button
-            onClick={() => setCurrentStep(Math.min(basicSteps.length - 1, currentStep + 1))}
-            disabled={currentStep === basicSteps.length - 1}
-            className="px-4 py-2 bg-primary text-primary-foreground rounded disabled:opacity-50"
-          >
-            Next
-          </button>
-        </div>
-      </div>
-    )
-  },
+  render: (args) => <WakaStepper {...args} />,
 }
 
 export const Vertical: Story = {
-  render: () => {
-    const [currentStep, setCurrentStep] = React.useState(1)
-    return (
-      <div className="w-[400px]">
-        <WakaStepper
-          steps={basicSteps}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-          orientation="vertical"
-          clickable
-          allowPrevious
-        />
-      </div>
-    )
-  },
+  args: {
+    steps: basicSteps,
+    currentStep: 2,
+    orientation: "vertical",
+    variant: "default",
+    size: "md",
+  },
+  render: (args) => (
+    <div style={{ maxHeight: 400 }}>
+      <WakaStepper {...args} />
+    </div>
+  ),
 }
 
-export const Variants: Story = {
-  render: () => {
-    const [currentStep, setCurrentStep] = React.useState(1)
-    return (
-      <div className="space-y-12 w-[700px]">
-        <div>
-          <p className="text-sm text-muted-foreground mb-4">Default (Numbered)</p>
-          <WakaStepper
-            steps={basicSteps}
-            currentStep={currentStep}
-            variant="default"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-4">Simple (Dots)</p>
-          <WakaStepper
-            steps={basicSteps}
-            currentStep={currentStep}
-            variant="simple"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-4">Numbered</p>
-          <WakaStepper
-            steps={basicSteps}
-            currentStep={currentStep}
-            variant="numbered"
-          />
-        </div>
-      </div>
-    )
+export const WithIcons: Story = {
+  args: {
+    steps: stepsWithIcons,
+    currentStep: 1,
+    orientation: "horizontal",
+    variant: "default",
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
-export const Sizes: Story = {
-  render: () => {
-    const [currentStep, setCurrentStep] = React.useState(1)
-    return (
-      <div className="space-y-12 w-[700px]">
-        <div>
-          <p className="text-sm text-muted-foreground mb-4">Small</p>
-          <WakaStepper
-            steps={basicSteps}
-            currentStep={currentStep}
-            size="sm"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-4">Medium</p>
-          <WakaStepper
-            steps={basicSteps}
-            currentStep={currentStep}
-            size="md"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-4">Large</p>
-          <WakaStepper
-            steps={basicSteps}
-            currentStep={currentStep}
-            size="lg"
-          />
-        </div>
-      </div>
-    )
+export const Numbered: Story = {
+  args: {
+    steps: basicSteps,
+    currentStep: 0,
+    orientation: "horizontal",
+    variant: "numbered",
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
-export const WithIcons: Story = {
-  render: () => {
-    const stepsWithIcons: Step[] = [
-      {
-        id: 'account',
-        title: 'Account',
-        description: 'Create account',
-        icon: <User className="h-4 w-4" />,
-      },
-      {
-        id: 'payment',
-        title: 'Payment',
-        description: 'Add payment method',
-        icon: <CreditCard className="h-4 w-4" />,
-      },
-      {
-        id: 'confirm',
-        title: 'Confirm',
-        description: 'Review order',
-        icon: <CheckCircle className="h-4 w-4" />,
-      },
-    ]
-
-    const [currentStep, setCurrentStep] = React.useState(1)
-    return (
-      <div className="w-[600px]">
-        <WakaStepper
-          steps={stepsWithIcons}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-        />
-      </div>
-    )
+export const SimpleVariant: Story = {
+  args: {
+    steps: basicSteps,
+    currentStep: 2,
+    orientation: "horizontal",
+    variant: "simple",
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
 export const Clickable: Story = {
-  render: () => {
-    const [currentStep, setCurrentStep] = React.useState(2)
-    return (
-      <div className="w-[700px]">
-        <p className="text-sm text-muted-foreground mb-4">Click on any completed step to navigate</p>
-        <WakaStepper
-          steps={basicSteps}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-          clickable
-          allowPrevious
-        />
-      </div>
-    )
+  args: {
+    steps: basicSteps,
+    currentStep: 1,
+    orientation: "horizontal",
+    variant: "default",
+    clickable: true,
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
 export const WithContent: Story = {
-  render: () => {
-    const stepsWithContent: Step[] = [
-      {
-        id: 'step-1',
-        title: 'Personal Info',
-        description: 'Enter your details',
-        content: (
-          <div className="space-y-4">
-            <div>
-              <label className="text-sm font-medium">Name</label>
-              <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="John Doe" />
-            </div>
-            <div>
-              <label className="text-sm font-medium">Email</label>
-              <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="john@example.com" />
-            </div>
-          </div>
-        ),
-      },
-      {
-        id: 'step-2',
-        title: 'Address',
-        description: 'Shipping address',
-        content: (
-          <div className="space-y-4">
-            <div>
-              <label className="text-sm font-medium">Street</label>
-              <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="123 Main St" />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="text-sm font-medium">City</label>
-                <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="City" />
-              </div>
-              <div>
-                <label className="text-sm font-medium">ZIP</label>
-                <input className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="12345" />
-              </div>
-            </div>
-          </div>
-        ),
-      },
-      {
-        id: 'step-3',
-        title: 'Review',
-        description: 'Confirm details',
-        content: (
-          <div className="text-center py-8">
-            <CheckCircle className="h-12 w-12 text-green-500 mx-auto mb-4" />
-            <h3 className="font-semibold">All set!</h3>
-            <p className="text-muted-foreground">Review your information and submit.</p>
-          </div>
-        ),
-      },
-    ]
-
-    const [currentStep, setCurrentStep] = React.useState(0)
-    return (
-      <div className="w-[600px]">
-        <WakaStepper
-          steps={stepsWithContent}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-          showContent
-        />
-        <StepperNavigation
-          onFinish={currentStep === stepsWithContent.length - 1 ? () => alert('Submitted!') : undefined}
-          finishLabel="Submit"
-        />
-      </div>
-    )
+  args: {
+    steps: stepsWithContent,
+    currentStep: 1,
+    orientation: "horizontal",
+    variant: "default",
+    showContent: true,
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
-export const OrderTracking: Story = {
-  render: () => {
-    const orderSteps: Step[] = [
-      {
-        id: 'ordered',
-        title: 'Order Placed',
-        description: 'Jan 15, 2024',
-        icon: <Package className="h-4 w-4" />,
-      },
-      {
-        id: 'shipped',
-        title: 'Shipped',
-        description: 'Jan 16, 2024',
-        icon: <Truck className="h-4 w-4" />,
-      },
-      {
-        id: 'delivery',
-        title: 'Out for Delivery',
-        description: 'Jan 18, 2024',
-        icon: <MapPin className="h-4 w-4" />,
-      },
-      {
-        id: 'delivered',
-        title: 'Delivered',
-        description: 'Expected Jan 18',
-        icon: <CheckCircle className="h-4 w-4" />,
-      },
-    ]
-
-    return (
-      <div className="border rounded-lg p-6 w-[700px]">
-        <h3 className="font-semibold text-lg mb-6">Order #ORD-2024-001</h3>
-        <WakaStepper
-          steps={orderSteps}
-          currentStep={2}
-        />
-      </div>
-    )
+export const SmallSize: Story = {
+  args: {
+    steps: basicSteps,
+    currentStep: 2,
+    orientation: "horizontal",
+    variant: "default",
+    size: "sm",
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
-export const VerticalWithContent: Story = {
-  render: () => {
-    const setupSteps: Step[] = [
-      {
-        id: 'connect',
-        title: 'Connect Repository',
-        description: 'Link your GitHub repo',
-        content: (
-          <button className="w-full py-2 border rounded-md hover:bg-muted">
-            Connect GitHub
-          </button>
-        ),
-      },
-      {
-        id: 'configure',
-        title: 'Configure Build',
-        description: 'Set build settings',
-        content: (
-          <div className="space-y-2">
-            <input className="w-full px-3 py-2 border rounded-md" placeholder="Build command" />
-            <input className="w-full px-3 py-2 border rounded-md" placeholder="Output directory" />
-          </div>
-        ),
-      },
-      {
-        id: 'deploy',
-        title: 'Deploy',
-        description: 'Launch your project',
-        content: (
-          <button className="w-full py-2 bg-primary text-primary-foreground rounded-md">
-            Deploy Now
-          </button>
-        ),
-      },
-    ]
-
-    const [currentStep, setCurrentStep] = React.useState(1)
-    return (
-      <div className="w-[400px]">
-        <WakaStepper
-          steps={setupSteps}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-          orientation="vertical"
-          showContent
-          clickable
-        />
-      </div>
-    )
+export const LargeSize: Story = {
+  args: {
+    steps: basicSteps,
+    currentStep: 1,
+    orientation: "horizontal",
+    variant: "default",
+    size: "lg",
   },
+  render: (args) => <WakaStepper {...args} />,
 }
 
-export const OptionalSteps: Story = {
-  render: () => {
-    const stepsWithOptional: Step[] = [
-      {
-        id: 'required-1',
-        title: 'Basic Info',
-        description: 'Required',
-      },
-      {
-        id: 'optional-1',
-        title: 'Additional Details',
-        description: 'Optional step',
-        optional: true,
-      },
-      {
-        id: 'required-2',
-        title: 'Confirmation',
-        description: 'Required',
-      },
-    ]
-
-    const [currentStep, setCurrentStep] = React.useState(0)
-    return (
-      <div className="w-[600px]">
-        <WakaStepper
-          steps={stepsWithOptional}
-          currentStep={currentStep}
-          onStepChange={setCurrentStep}
-        />
-        <div className="mt-8 flex justify-between">
-          <button
-            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
-            disabled={currentStep === 0}
-            className="px-4 py-2 border rounded disabled:opacity-50"
-          >
-            Back
-          </button>
-          <div className="flex gap-2">
-            {stepsWithOptional[currentStep]?.optional && (
-              <button
-                onClick={() => setCurrentStep(currentStep + 1)}
-                className="px-4 py-2 border rounded"
-              >
-                Skip
-              </button>
-            )}
-            <button
-              onClick={() => setCurrentStep(currentStep + 1)}
-              disabled={currentStep === stepsWithOptional.length - 1}
-              className="px-4 py-2 bg-primary text-primary-foreground rounded disabled:opacity-50"
-            >
-              Continue
-            </button>
-          </div>
-        </div>
-      </div>
-    )
+export const AllCompleted: Story = {
+  args: {
+    steps: basicSteps,
+    currentStep: 4,
+    orientation: "horizontal",
+    variant: "default",
   },
+  render: (args) => <WakaStepper {...args} />,
 }

package/src/components/waka-swipe-card/WakaSwipeCard.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSwipeCard } from "./index"
+
+const meta: Meta<typeof WakaSwipeCard> = {
+  title: "UI/WakaSwipeCard",
+  component: WakaSwipeCard,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    showIndicators: { control: "boolean", description: "Indicateurs de swipe" },
+    swipeThreshold: { control: "number", description: "Seuil de swipe (px)" },
+    rotationFactor: { control: "number", description: "Facteur de rotation" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSwipeCard>
+
+const cards = [
+  { id: "1", title: "Card 1", image: "https://picsum.photos/seed/card1/300/400" },
+  { id: "2", title: "Card 2", image: "https://picsum.photos/seed/card2/300/400" },
+  { id: "3", title: "Card 3", image: "https://picsum.photos/seed/card3/300/400" },
+]
+
+export const Default: Story = {
+  args: { cards, showIndicators: true, swipeThreshold: 100 },
+  render: (args) => (
+    <div style={{ width: 350, height: 500 }}>
+      <WakaSwipeCard {...args} />
+    </div>
+  ),
+}
+
+export const NoIndicators: Story = {
+  args: { cards, showIndicators: false },
+  render: (args) => (
+    <div style={{ width: 350, height: 500 }}>
+      <WakaSwipeCard {...args} />
+    </div>
+  ),
+}
+
+export const HighThreshold: Story = {
+  args: { cards, showIndicators: true, swipeThreshold: 200 },
+  render: (args) => (
+    <div style={{ width: 350, height: 500 }}>
+      <WakaSwipeCard {...args} />
+    </div>
+  ),
+}
+