@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-file-upload/WakaFileUpload.stories.tsx

@@ -1,40 +1,54 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaFileUpload } from './index'
-import * as React from 'react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaFileUpload } from "./index"
 
 const meta: Meta<typeof WakaFileUpload> = {
-  title: 'Components/Forms/WakaFileUpload',
+  title: "Forms/WakaFileUpload",
   component: WakaFileUpload,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A file upload component with drag & drop, preview, and progress tracking.',
-      },
-    },
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     variant: {
-      control: 'select',
-      options: ['dropzone', 'button', 'inline'],
-      description: 'Display variant',
+      control: "select",
+      options: ["dropzone", "button", "inline"],
+      description: "Variante d'affichage",
+    },
+    accept: {
+      control: "text",
+      description: "Types de fichiers acceptés",
+    },
+    maxSize: {
+      control: "number",
+      description: "Taille max par fichier en bytes",
+    },
+    maxFiles: {
+      control: "number",
+      description: "Nombre max de fichiers",
     },
     multiple: {
-      control: 'boolean',
-      description: 'Allow multiple files',
+      control: "boolean",
+      description: "Upload multiple",
     },
     showPreview: {
-      control: 'boolean',
-      description: 'Show file preview',
+      control: "boolean",
+      description: "Afficher la prévisualisation",
     },
     showProgress: {
-      control: 'boolean',
-      description: 'Show upload progress',
+      control: "boolean",
+      description: "Afficher la barre de progression",
     },
     disabled: {
-      control: 'boolean',
-      description: 'Disable upload',
+      control: "boolean",
+      description: "État désactivé",
+    },
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
+    label: {
+      control: "text",
+      description: "Label du champ",
     },
   },
 }
@@ -43,197 +57,127 @@ export default meta
 type Story = StoryObj<typeof WakaFileUpload>
 
 // Mock upload function
-const mockUpload = (file: File, onProgress: (progress: number) => void): Promise<string> => {
-  return new Promise((resolve) => {
-    let progress = 0
-    const interval = setInterval(() => {
-      progress += 10
-      onProgress(progress)
-      if (progress >= 100) {
-        clearInterval(interval)
-        resolve(`https://example.com/uploads/${file.name}`)
-      }
-    }, 200)
-  })
+const mockUpload = async (file: File, onProgress: (progress: number) => void): Promise<string> => {
+  for (let i = 0; i <= 100; i += 10) {
+    await new Promise(resolve => setTimeout(resolve, 100))
+    onProgress(i)
+  }
+  return `https://example.com/uploads/${file.name}`
 }
 
 export const Default: Story = {
   args: {
-    label: 'Upload Files',
-    description: 'Drag and drop files here or click to browse',
+    variant: "dropzone",
+    placeholder: "Glissez vos fichiers ici ou cliquez pour sélectionner",
+    label: "Téléverser des fichiers",
+    multiple: true,
+    showPreview: true,
+    showProgress: true,
   },
   render: (args) => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        {...args}
-        onUpload={mockUpload}
-        onComplete={(files) => console.log('Uploaded:', files)}
-      />
-    </div>
-  ),
-}
-
-export const Dropzone: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        variant="dropzone"
-        label="Documents"
-        placeholder="Drop your documents here"
-        onUpload={mockUpload}
-      />
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
     </div>
   ),
 }
 
 export const ButtonVariant: Story = {
-  render: () => (
-    <WakaFileUpload
-      variant="button"
-      placeholder="Upload File"
-      onUpload={mockUpload}
-    />
+  args: {
+    variant: "button",
+    placeholder: "Sélectionner des fichiers",
+    multiple: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
+    </div>
   ),
 }
 
 export const InlineVariant: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <WakaFileUpload
-        variant="inline"
-        placeholder="Add attachment"
-        onUpload={mockUpload}
-      />
+  args: {
+    variant: "inline",
+    placeholder: "Choisir un fichier",
+    multiple: false,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
     </div>
   ),
 }
 
 export const ImagesOnly: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Upload Images"
-        accept="image/*"
-        placeholder="Drop images here (PNG, JPG, GIF)"
-        onUpload={mockUpload}
-      />
+  args: {
+    variant: "dropzone",
+    accept: "image/*",
+    placeholder: "Glissez vos images ici",
+    label: "Téléverser des images",
+    multiple: true,
+    showPreview: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
     </div>
   ),
 }
 
 export const PDFOnly: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Upload PDF"
-        accept=".pdf"
-        placeholder="Drop PDF files here"
-        onUpload={mockUpload}
-      />
+  args: {
+    variant: "dropzone",
+    accept: ".pdf",
+    placeholder: "Glissez vos fichiers PDF ici",
+    label: "Téléverser des PDF",
+    multiple: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
     </div>
   ),
 }
 
-export const MultipleFiles: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Upload Multiple Files"
-        multiple
-        maxFiles={5}
-        placeholder="Drop up to 5 files here"
-        onUpload={mockUpload}
-      />
+export const SingleFile: Story = {
+  args: {
+    variant: "dropzone",
+    placeholder: "Glissez un fichier ici",
+    label: "Fichier unique",
+    multiple: false,
+    maxFiles: 1,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
     </div>
   ),
 }
 
 export const WithSizeLimit: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Upload (Max 2MB)"
-        maxSize={2 * 1024 * 1024}
-        onUpload={mockUpload}
-        onError={(error) => console.error('Error:', error)}
-      />
-    </div>
-  ),
-}
-
-export const NoPreview: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Upload"
-        showPreview={false}
-        onUpload={mockUpload}
-      />
-    </div>
-  ),
-}
-
-export const NoProgress: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Quick Upload"
-        showProgress={false}
-        onUpload={mockUpload}
-      />
+  args: {
+    variant: "dropzone",
+    placeholder: "Max 5 MB par fichier",
+    label: "Fichiers limités",
+    multiple: true,
+    maxSize: 5 * 1024 * 1024, // 5MB
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} onUpload={mockUpload} />
     </div>
   ),
 }
 
 export const Disabled: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <WakaFileUpload
-        label="Upload (Disabled)"
-        disabled
-      />
-    </div>
-  ),
-}
-
-export const ProfilePicture: Story = {
-  render: () => (
-    <div className="w-[400px] space-y-4">
-      <h3 className="font-semibold">Profile Picture</h3>
-      <WakaFileUpload
-        accept="image/*"
-        maxSize={5 * 1024 * 1024}
-        maxFiles={1}
-        placeholder="Upload a profile picture (max 5MB)"
-        onUpload={mockUpload}
-      />
-    </div>
-  ),
-}
-
-export const DocumentUpload: Story = {
-  render: () => (
-    <div className="w-[400px] space-y-4 p-4 border rounded-lg">
-      <div>
-        <h3 className="font-semibold">Document Submission</h3>
-        <p className="text-sm text-muted-foreground">
-          Upload your required documents
-        </p>
-      </div>
-      <WakaFileUpload
-        label="ID Document"
-        accept=".pdf,.jpg,.png"
-        maxSize={10 * 1024 * 1024}
-        placeholder="Upload ID (PDF, JPG, PNG)"
-        onUpload={mockUpload}
-      />
-      <WakaFileUpload
-        label="Proof of Address"
-        accept=".pdf,.jpg,.png"
-        maxSize={10 * 1024 * 1024}
-        placeholder="Upload proof of address"
-        onUpload={mockUpload}
-      />
+  args: {
+    variant: "dropzone",
+    placeholder: "Upload désactivé",
+    label: "Fichiers",
+    disabled: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaFileUpload {...args} />
     </div>
   ),
 }

package/src/components/waka-floating-nav/WakaFloatingNav.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaFloatingNav, type FloatingNavItem } from "./index"
+import { Home, Search, Bell, User, Settings } from "lucide-react"
+
+const meta: Meta<typeof WakaFloatingNav> = {
+  title: "Navigation/WakaFloatingNav",
+  component: WakaFloatingNav,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    position: { control: "select", options: ["bottom", "top", "left", "right"], description: "Position" },
+    variant: { control: "select", options: ["pill", "bar", "floating"], description: "Variante" },
+    showLabels: { control: "boolean", description: "Afficher les labels" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFloatingNav>
+
+const items: FloatingNavItem[] = [
+  { id: "home", label: "Accueil", icon: <Home className="tw-h-5 tw-w-5" />, active: true },
+  { id: "search", label: "Recherche", icon: <Search className="tw-h-5 tw-w-5" /> },
+  { id: "notifications", label: "Notifications", icon: <Bell className="tw-h-5 tw-w-5" /> },
+  { id: "profile", label: "Profil", icon: <User className="tw-h-5 tw-w-5" /> },
+]
+
+export const Default: Story = {
+  args: { items, position: "bottom", variant: "pill", showLabels: false },
+  render: (args) => (
+    <div style={{ position: "relative", width: 400, height: 200 }}>
+      <WakaFloatingNav {...args} />
+    </div>
+  ),
+}
+
+export const WithLabels: Story = {
+  args: { items, position: "bottom", variant: "bar", showLabels: true },
+  render: (args) => (
+    <div style={{ position: "relative", width: 500, height: 200 }}>
+      <WakaFloatingNav {...args} />
+    </div>
+  ),
+}
+
+export const TopPosition: Story = {
+  args: { items, position: "top", variant: "pill" },
+  render: (args) => (
+    <div style={{ position: "relative", width: 400, height: 200 }}>
+      <WakaFloatingNav {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-goal-progress/WakaGoalProgress.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaGoalProgress, WakaGoalCard } from "./index"
+
+const meta: Meta<typeof WakaGoalProgress> = {
+  title: "Components/Gamification/WakaGoalProgress",
+  component: WakaGoalProgress,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "default", "lg"],
+      description: "Size variant",
+    },
+    theme: {
+      control: "select",
+      options: ["default", "success", "warning", "danger", "purple", "blue"],
+      description: "Color theme",
+    },
+    goalType: {
+      control: "select",
+      options: ["revenue", "users", "sales", "engagement", "custom"],
+      description: "Goal type for formatting",
+    },
+    showPercentage: {
+      control: "boolean",
+      description: "Show percentage",
+    },
+    showValues: {
+      control: "boolean",
+      description: "Show current/target values",
+    },
+    showTimeRemaining: {
+      control: "boolean",
+      description: "Show time remaining",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaGoalProgress>
+
+export const Default: Story = {
+  args: {
+    currentValue: 7500,
+    targetValue: 10000,
+    title: "Monthly Revenue Goal",
+    description: "Reach $10K in monthly revenue",
+    goalType: "revenue",
+    theme: "default",
+    showPercentage: true,
+    showValues: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="max-w-md">
+      <WakaGoalProgress {...args} />
+    </div>
+  ),
+}
+
+export const WithDeadline: Story = {
+  args: {
+    currentValue: 450,
+    targetValue: 1000,
+    title: "New Users Goal",
+    goalType: "users",
+    startDate: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000),
+    endDate: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000),
+    showTimeRemaining: true,
+    theme: "purple",
+  },
+  render: (args) => (
+    <div className="max-w-md">
+      <WakaGoalProgress {...args} />
+    </div>
+  ),
+}
+
+export const WithMilestones: Story = {
+  args: {
+    currentValue: 65,
+    targetValue: 100,
+    title: "Engagement Rate",
+    goalType: "engagement",
+    milestones: [
+      { value: 25, label: "25%" },
+      { value: 50, label: "Halfway!" },
+      { value: 75, label: "Almost there" },
+    ],
+    theme: "success",
+  },
+  render: (args) => (
+    <div className="max-w-md">
+      <WakaGoalProgress {...args} />
+    </div>
+  ),
+}
+
+export const Completed: Story = {
+  args: {
+    currentValue: 10500,
+    targetValue: 10000,
+    title: "Sales Target",
+    goalType: "sales",
+    theme: "success",
+  },
+  render: (args) => (
+    <div className="max-w-md">
+      <WakaGoalProgress {...args} />
+    </div>
+  ),
+}
+
+export const AsCard: Story = {
+  args: {
+    currentValue: 3200,
+    targetValue: 5000,
+    title: "Community Growth",
+    description: "Grow our community to 5000 members",
+    goalType: "users",
+    unit: "members",
+    theme: "blue",
+  },
+  render: (args) => (
+    <div className="max-w-md">
+      <WakaGoalCard {...args} bordered />
+    </div>
+  ),
+}
+

package/src/components/waka-hotspot/WakaHotspot.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaHotspot } from "./index"
+
+const meta: Meta<typeof WakaHotspot> = {
+  title: "UI/WakaHotspot",
+  component: WakaHotspot,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["dot", "icon", "badge"], description: "Variante" },
+    size: { control: "select", options: ["sm", "default", "lg"], description: "Taille" },
+    trigger: { control: "select", options: ["click", "hover", "both"], description: "Déclencheur" },
+    position: { control: "select", options: ["top", "bottom", "left", "right"], description: "Position tooltip" },
+    iconType: { control: "select", options: ["help", "info", "lightbulb", "star", "zap", "alert"], description: "Icône" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaHotspot>
+
+export const Default: Story = {
+  args: { id: "hotspot-1", content: "Cliquez ici pour plus d'informations", variant: "dot", trigger: "click" },
+  render: (args) => (
+    <div style={{ padding: 50 }}>
+      <WakaHotspot {...args} />
+    </div>
+  ),
+}
+
+export const IconVariant: Story = {
+  args: { id: "hotspot-2", content: "Aide contextuelle", title: "Astuce", variant: "icon", iconType: "info", trigger: "hover" },
+  render: (args) => (
+    <div style={{ padding: 50 }}>
+      <WakaHotspot {...args} />
+    </div>
+  ),
+}
+
+export const Badge: Story = {
+  args: { id: "hotspot-3", content: "Nouvelle fonctionnalité disponible !", variant: "badge", size: "lg" },
+  render: (args) => (
+    <div style={{ padding: 50 }}>
+      <WakaHotspot {...args} />
+    </div>
+  ),
+}
+
+export const Small: Story = {
+  args: { id: "hotspot-4", content: "Info rapide", variant: "dot", size: "sm", trigger: "hover" },
+  render: (args) => (
+    <div style={{ padding: 50 }}>
+      <WakaHotspot {...args} />
+    </div>
+  ),
+}
+