@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-product-card/WakaProductCard.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaProductCard, type ProductImage, type ColorVariant, type SizeVariant } from "./index"
+
+const meta: Meta<typeof WakaProductCard> = {
+  title: "E-commerce/WakaProductCard",
+  component: WakaProductCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "text",
+      description: "Nom du produit",
+    },
+    price: {
+      control: "number",
+      description: "Prix du produit",
+    },
+    originalPrice: {
+      control: "number",
+      description: "Prix original (barré)",
+    },
+    rating: {
+      control: { type: "number", min: 0, max: 5, step: 0.1 },
+      description: "Note du produit",
+    },
+    reviewCount: {
+      control: "number",
+      description: "Nombre d'avis",
+    },
+    isNew: {
+      control: "boolean",
+      description: "Badge Nouveau",
+    },
+    isSale: {
+      control: "boolean",
+      description: "Badge Promo",
+    },
+    isFavorite: {
+      control: "boolean",
+      description: "Dans les favoris",
+    },
+    inStock: {
+      control: "boolean",
+      description: "En stock",
+    },
+    showQuickView: {
+      control: "boolean",
+      description: "Afficher bouton aperçu",
+    },
+    showAddToCart: {
+      control: "boolean",
+      description: "Afficher bouton panier",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaProductCard>
+
+const images: ProductImage[] = [
+  { src: "https://picsum.photos/seed/prod1/400/400", alt: "Vue principale" },
+  { src: "https://picsum.photos/seed/prod2/400/400", alt: "Vue côté" },
+  { src: "https://picsum.photos/seed/prod3/400/400", alt: "Vue détail" },
+]
+
+const colors: ColorVariant[] = [
+  { id: "black", label: "Noir", value: "black", color: "#000000" },
+  { id: "white", label: "Blanc", value: "white", color: "#ffffff" },
+  { id: "blue", label: "Bleu", value: "blue", color: "#3b82f6" },
+]
+
+const sizes: SizeVariant[] = [
+  { id: "s", label: "S", value: "s" },
+  { id: "m", label: "M", value: "m" },
+  { id: "l", label: "L", value: "l" },
+  { id: "xl", label: "XL", value: "xl", available: false },
+]
+
+export const Default: Story = {
+  args: {
+    name: "T-shirt Premium",
+    price: 29.99,
+    images,
+    rating: 4.5,
+    reviewCount: 128,
+    inStock: true,
+    showQuickView: true,
+    showAddToCart: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+
+export const OnSale: Story = {
+  args: {
+    name: "Veste d'hiver",
+    price: 89.99,
+    originalPrice: 129.99,
+    images,
+    rating: 4.8,
+    reviewCount: 56,
+    isSale: true,
+    inStock: true,
+    showAddToCart: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+
+export const NewProduct: Story = {
+  args: {
+    name: "Sneakers Édition Limitée",
+    price: 149.99,
+    images,
+    rating: 5.0,
+    reviewCount: 12,
+    isNew: true,
+    inStock: true,
+    showQuickView: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+
+export const WithVariants: Story = {
+  args: {
+    name: "Polo Classic",
+    price: 39.99,
+    images,
+    colors,
+    sizes,
+    rating: 4.2,
+    reviewCount: 89,
+    inStock: true,
+    showAddToCart: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+
+export const OutOfStock: Story = {
+  args: {
+    name: "Article épuisé",
+    price: 59.99,
+    images,
+    rating: 4.7,
+    reviewCount: 234,
+    inStock: false,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+
+export const Favorite: Story = {
+  args: {
+    name: "Mon article favori",
+    price: 79.99,
+    images,
+    rating: 4.9,
+    reviewCount: 178,
+    isFavorite: true,
+    inStock: true,
+    showAddToCart: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+
+export const Minimal: Story = {
+  args: {
+    name: "Produit simple",
+    price: 19.99,
+    images: [images[0]],
+    inStock: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaProductCard {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-progress-onboarding/WakaProgressOnboarding.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaProgressOnboarding } from "./index"
+
+const meta: Meta<typeof WakaProgressOnboarding> = {
+  title: "UI/WakaProgressOnboarding",
+  component: WakaProgressOnboarding,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    currentStep: { control: "number", description: "Étape courante" },
+    totalSteps: { control: "number", description: "Total d'étapes" },
+    showPercentage: { control: "boolean", description: "Afficher le pourcentage" },
+    showStepCount: { control: "boolean", description: "Afficher le compteur" },
+    variant: { control: "select", options: ["linear", "circular", "dots"], description: "Variante" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaProgressOnboarding>
+
+export const Default: Story = {
+  args: { currentStep: 2, totalSteps: 5, showPercentage: true, showStepCount: true, variant: "linear" },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaProgressOnboarding {...args} />
+    </div>
+  ),
+}
+
+export const Circular: Story = {
+  args: { currentStep: 3, totalSteps: 4, showPercentage: true, variant: "circular" },
+  render: (args) => <WakaProgressOnboarding {...args} />,
+}
+
+export const Dots: Story = {
+  args: { currentStep: 2, totalSteps: 6, showStepCount: false, variant: "dots" },
+  render: (args) => <WakaProgressOnboarding {...args} />,
+}
+
+export const Complete: Story = {
+  args: { currentStep: 5, totalSteps: 5, showPercentage: true, variant: "linear" },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaProgressOnboarding {...args} />
+    </div>
+  ),
+}
+
+export const Starting: Story = {
+  args: { currentStep: 1, totalSteps: 5, showStepCount: true, variant: "linear" },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaProgressOnboarding {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-pull-to-refresh/WakaPullToRefresh.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPullToRefresh } from "./index"
+
+const meta: Meta<typeof WakaPullToRefresh> = {
+  title: "UI/WakaPullToRefresh",
+  component: WakaPullToRefresh,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    threshold: { control: "number", description: "Seuil de déclenchement (px)" },
+    showIndicator: { control: "boolean", description: "Afficher l'indicateur" },
+    disabled: { control: "boolean", description: "Désactivé" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPullToRefresh>
+
+const mockRefresh = async () => {
+  await new Promise(r => setTimeout(r, 1500))
+}
+
+const SampleContent = () => (
+  <div className="tw-space-y-4 tw-p-4">
+    {[1, 2, 3, 4, 5].map(i => (
+      <div key={i} className="tw-p-4 tw-bg-muted tw-rounded-lg">
+        <p className="tw-font-medium">Élément {i}</p>
+        <p className="tw-text-sm tw-text-muted-foreground">Tirez vers le bas pour rafraîchir</p>
+      </div>
+    ))}
+  </div>
+)
+
+export const Default: Story = {
+  args: { threshold: 80, showIndicator: true, children: <SampleContent /> },
+  render: (args) => (
+    <div style={{ width: 350, height: 400, overflow: "auto" }}>
+      <WakaPullToRefresh {...args} onRefresh={mockRefresh} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { threshold: 80, disabled: true, children: <SampleContent /> },
+  render: (args) => (
+    <div style={{ width: 350, height: 400, overflow: "auto" }}>
+      <WakaPullToRefresh {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-rank-badge/WakaRankBadge.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaRankBadge, RankTier } from "./index"
+
+const meta: Meta<typeof WakaRankBadge> = {
+  title: "Components/Gamification/WakaRankBadge",
+  component: WakaRankBadge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    rank: {
+      control: "select",
+      options: ["bronze", "silver", "gold", "platinum", "diamond", "master", "grandmaster"],
+      description: "Rank tier",
+    },
+    division: {
+      control: "select",
+      options: [1, 2, 3, 4, 5],
+      description: "Division within rank",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      description: "Size variant",
+    },
+    showPoints: {
+      control: "boolean",
+      description: "Show points display",
+    },
+    showDivision: {
+      control: "boolean",
+      description: "Show division",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaRankBadge>
+
+export const Default: Story = {
+  args: {
+    rank: "gold",
+    division: 2,
+    points: 1500,
+    pointsToNext: 500,
+    size: "lg",
+    showPoints: true,
+    showDivision: true,
+    animated: true,
+  },
+  render: (args) => <WakaRankBadge {...args} />,
+}
+
+export const AllRanks: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4 justify-center">
+      {(["bronze", "silver", "gold", "platinum", "diamond", "master", "grandmaster"] as RankTier[]).map((rank) => (
+        <WakaRankBadge
+          key={rank}
+          rank={rank}
+          division={2}
+          size="md"
+          showDivision
+          animated
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const Small: Story = {
+  args: {
+    rank: "platinum",
+    size: "sm",
+    animated: true,
+  },
+  render: (args) => <WakaRankBadge {...args} />,
+}
+
+export const ExtraLarge: Story = {
+  args: {
+    rank: "grandmaster",
+    size: "xl",
+    showDivision: false,
+    animated: true,
+  },
+  render: (args) => <WakaRankBadge {...args} />,
+}
+
+export const WithProgress: Story = {
+  args: {
+    rank: "diamond",
+    division: 1,
+    points: 2800,
+    pointsToNext: 200,
+    size: "lg",
+    showPoints: true,
+    showDivision: true,
+    animated: true,
+  },
+  render: (args) => <WakaRankBadge {...args} />,
+}
+

package/src/components/waka-rating-input/WakaRatingInput.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaRatingInput } from "./index"
+
+const meta: Meta<typeof WakaRatingInput> = {
+  title: "Forms/WakaRatingInput",
+  component: WakaRatingInput,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    value: { control: { type: "number", min: 0, max: 5, step: 0.5 }, description: "Valeur" },
+    max: { control: "number", description: "Note maximale" },
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille" },
+    allowHalf: { control: "boolean", description: "Demi-étoiles" },
+    readOnly: { control: "boolean", description: "Lecture seule" },
+    showValue: { control: "boolean", description: "Afficher la valeur" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaRatingInput>
+
+export const Default: Story = {
+  args: { value: 3, max: 5, size: "md", allowHalf: false, showValue: true },
+  render: (args) => <WakaRatingInput {...args} />,
+}
+
+export const HalfStars: Story = {
+  args: { value: 3.5, max: 5, allowHalf: true, showValue: true },
+  render: (args) => <WakaRatingInput {...args} />,
+}
+
+export const Large: Story = {
+  args: { value: 4, max: 5, size: "lg", showValue: true },
+  render: (args) => <WakaRatingInput {...args} />,
+}
+
+export const Small: Story = {
+  args: { value: 4.5, max: 5, size: "sm", allowHalf: true },
+  render: (args) => <WakaRatingInput {...args} />,
+}
+
+export const ReadOnly: Story = {
+  args: { value: 4.2, max: 5, readOnly: true, allowHalf: true, showValue: true },
+  render: (args) => <WakaRatingInput {...args} />,
+}
+
+export const TenStars: Story = {
+  args: { value: 7, max: 10, size: "sm" },
+  render: (args) => <WakaRatingInput {...args} />,
+}
+

package/src/components/waka-reaction-picker/WakaReactionPicker.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaReactionPicker } from "./index"
+
+const meta: Meta<typeof WakaReactionPicker> = {
+  title: "Forms/WakaReactionPicker",
+  component: WakaReactionPicker,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    showLabels: { control: "boolean", description: "Afficher les labels" },
+    multiple: { control: "boolean", description: "Sélection multiple" },
+    showCount: { control: "boolean", description: "Afficher le compteur" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaReactionPicker>
+
+const reactions = [
+  { id: "like", emoji: "👍", label: "J'aime", count: 12 },
+  { id: "love", emoji: "❤️", label: "J'adore", count: 5 },
+  { id: "haha", emoji: "😂", label: "Haha", count: 3 },
+  { id: "wow", emoji: "😮", label: "Wow", count: 1 },
+  { id: "sad", emoji: "😢", label: "Triste", count: 0 },
+  { id: "angry", emoji: "😠", label: "En colère", count: 0 },
+]
+
+export const Default: Story = {
+  args: { reactions, showLabels: false, showCount: true },
+  render: (args) => <WakaReactionPicker {...args} />,
+}
+
+export const WithLabels: Story = {
+  args: { reactions, showLabels: true, showCount: true },
+  render: (args) => <WakaReactionPicker {...args} />,
+}
+
+export const Multiple: Story = {
+  args: { reactions, multiple: true, selected: ["like", "love"], showCount: true },
+  render: (args) => <WakaReactionPicker {...args} />,
+}
+
+export const NoCount: Story = {
+  args: { reactions, showLabels: false, showCount: false },
+  render: (args) => <WakaReactionPicker {...args} />,
+}
+
+export const FewReactions: Story = {
+  args: { reactions: reactions.slice(0, 3), showCount: true },
+  render: (args) => <WakaReactionPicker {...args} />,
+}
+

package/src/components/waka-region-map/WakaRegionMap.stories.tsx

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaRegionMap, type CloudRegion } from "./index"
+import * as React from "react"
+
+const meta: Meta<typeof WakaRegionMap> = {
+  title: "Components/Data/WakaRegionMap",
+  component: WakaRegionMap,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showLatency: { control: "boolean", description: "Show latency information" },
+    showConnections: { control: "boolean", description: "Show connections between user and regions" },
+    animated: { control: "boolean", description: "Enable animations" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaRegionMap>
+
+// Cloud provider regions with proper CloudRegion format
+const cloudRegions: CloudRegion[] = [
+  { id: "us-east-1", name: "US East (N. Virginia)", location: { lat: 37.4, lng: -79.0 }, latency: 45, status: "active", provider: "aws" },
+  { id: "us-west-2", name: "US West (Oregon)", location: { lat: 45.5, lng: -122.7 }, latency: 78, status: "active", provider: "aws" },
+  { id: "eu-west-1", name: "Europe (Ireland)", location: { lat: 53.3, lng: -6.3 }, latency: 120, status: "active", provider: "aws" },
+  { id: "eu-central-1", name: "Europe (Frankfurt)", location: { lat: 50.1, lng: 8.7 }, latency: 95, status: "degraded", provider: "aws" },
+  { id: "ap-northeast-1", name: "Asia Pacific (Tokyo)", location: { lat: 35.7, lng: 139.7 }, latency: 180, status: "active", provider: "aws" },
+  { id: "ap-southeast-1", name: "Asia Pacific (Singapore)", location: { lat: 1.3, lng: 103.8 }, latency: 220, status: "active", provider: "aws" },
+]
+
+const gcpRegions: CloudRegion[] = [
+  { id: "us-central1", name: "US Central (Iowa)", location: { lat: 41.6, lng: -93.6 }, latency: 55, status: "active", provider: "gcp" },
+  { id: "europe-west1", name: "Europe West (Belgium)", location: { lat: 50.8, lng: 4.4 }, latency: 110, status: "active", provider: "gcp" },
+  { id: "asia-east1", name: "Asia East (Taiwan)", location: { lat: 25.0, lng: 121.5 }, latency: 195, status: "offline", provider: "gcp" },
+]
+
+const azureRegions: CloudRegion[] = [
+  { id: "eastus", name: "East US", location: { lat: 37.3, lng: -79.5 }, latency: 48, status: "active", provider: "azure" },
+  { id: "westeurope", name: "West Europe", location: { lat: 52.4, lng: 4.9 }, latency: 105, status: "active", provider: "azure" },
+  { id: "southeastasia", name: "Southeast Asia", location: { lat: 1.3, lng: 103.8 }, latency: 215, status: "degraded", provider: "azure" },
+]
+
+const userLocation = { lat: 48.9, lng: 2.3 } // Paris, France
+
+export const Default: Story = {
+  args: {
+    regions: cloudRegions,
+    userLocation,
+    showLatency: true,
+    showConnections: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div style={{ height: 500 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}
+
+export const MultiCloud: Story = {
+  args: {
+    regions: [...cloudRegions, ...gcpRegions, ...azureRegions],
+    userLocation,
+    showLatency: true,
+    showConnections: false,
+    animated: true,
+  },
+  render: (args) => (
+    <div style={{ height: 500 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}
+
+export const WithSelectedRegion: Story = {
+  args: {
+    regions: cloudRegions,
+    userLocation,
+    selectedRegion: "eu-west-1",
+    showLatency: true,
+    showConnections: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div style={{ height: 500 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedRegion, setSelectedRegion] = React.useState<string | undefined>()
+    
+    return (
+      <div className="space-y-4">
+        <div style={{ height: 500 }}>
+          <WakaRegionMap
+            regions={cloudRegions}
+            userLocation={userLocation}
+            selectedRegion={selectedRegion}
+            onRegionSelect={setSelectedRegion}
+            showLatency
+            showConnections
+            animated
+          />
+        </div>
+        {selectedRegion && (
+          <div className="rounded-lg border bg-muted/50 p-4">
+            <p className="text-sm">
+              <strong>Selected region:</strong> {cloudRegions.find(r => r.id === selectedRegion)?.name}
+            </p>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const NoLatency: Story = {
+  args: {
+    regions: cloudRegions.map(r => ({ ...r, latency: undefined })),
+    userLocation,
+    showLatency: false,
+    showConnections: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div style={{ height: 500 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}
+
+export const NoConnections: Story = {
+  args: {
+    regions: cloudRegions,
+    userLocation,
+    showLatency: true,
+    showConnections: false,
+    animated: true,
+  },
+  render: (args) => (
+    <div style={{ height: 500 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}
+
+export const StaticMap: Story = {
+  args: {
+    regions: cloudRegions,
+    showLatency: true,
+    showConnections: false,
+    animated: false,
+  },
+  render: (args) => (
+    <div style={{ height: 400 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}
+
+export const DegradedAndOffline: Story = {
+  args: {
+    regions: [
+      { id: "region-1", name: "Primary DC", location: { lat: 40.7, lng: -74.0 }, latency: 25, status: "active", provider: "aws" },
+      { id: "region-2", name: "EU Backup", location: { lat: 51.5, lng: -0.1 }, latency: 150, status: "degraded", provider: "azure" },
+      { id: "region-3", name: "Asia DC", location: { lat: 35.7, lng: 139.7 }, status: "offline", provider: "gcp" },
+      { id: "region-4", name: "Australia", location: { lat: -33.9, lng: 151.2 }, latency: 280, status: "active", provider: "aws" },
+    ],
+    userLocation,
+    showLatency: true,
+    showConnections: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div style={{ height: 500 }}>
+      <WakaRegionMap {...args} />
+    </div>
+  ),
+}