@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-permission-matrix/WakaPermissionMatrix.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPermissionMatrix, type Permission, type Role, type PermissionCategory, type PermissionValue } from "./index"
+
+const meta: Meta<typeof WakaPermissionMatrix> = {
+  title: "Security/WakaPermissionMatrix",
+  component: WakaPermissionMatrix,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    readOnly: { control: "boolean", description: "Mode lecture seule" },
+    enableSearch: { control: "boolean", description: "Activer la recherche" },
+    showInheritance: { control: "boolean", description: "Afficher l'heritage" },
+    enableComparison: { control: "boolean", description: "Activer la comparaison" },
+    enableBulkOperations: { control: "boolean", description: "Activer les operations en masse" },
+    cellSize: { control: "select", options: ["sm", "md", "lg"], description: "Taille des cellules" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPermissionMatrix>
+
+const categories: PermissionCategory[] = [
+  { id: "data", name: "Donnees", order: 1 },
+  { id: "system", name: "Systeme", order: 2 },
+  { id: "users", name: "Utilisateurs", order: 3 },
+  { id: "finance", name: "Finance", order: 4 },
+]
+
+const permissions: Permission[] = [
+  { id: "read", name: "Lecture", categoryId: "data", description: "Lire les donnees" },
+  { id: "write", name: "Ecriture", categoryId: "data", description: "Modifier les donnees" },
+  { id: "delete", name: "Suppression", categoryId: "data", description: "Supprimer les donnees" },
+  { id: "admin", name: "Administration", categoryId: "system", description: "Acces administrateur" },
+  { id: "invite", name: "Inviter des utilisateurs", categoryId: "users", description: "Inviter de nouveaux utilisateurs" },
+  { id: "billing", name: "Facturation", categoryId: "finance", description: "Gerer la facturation" },
+]
+
+const roles: Role[] = [
+  { id: "admin", name: "Administrateur", order: 1, color: "#ef4444" },
+  { id: "manager", name: "Manager", order: 2, color: "#3b82f6" },
+  { id: "user", name: "Utilisateur", order: 3, color: "#22c55e" },
+  { id: "viewer", name: "Lecteur", order: 4, color: "#a855f7" },
+]
+
+const initialValues: PermissionValue[] = [
+  // Admin has all permissions
+  { roleId: "admin", permissionId: "read", granted: true },
+  { roleId: "admin", permissionId: "write", granted: true },
+  { roleId: "admin", permissionId: "delete", granted: true },
+  { roleId: "admin", permissionId: "admin", granted: true },
+  { roleId: "admin", permissionId: "invite", granted: true },
+  { roleId: "admin", permissionId: "billing", granted: true },
+  // Manager has read, write, invite
+  { roleId: "manager", permissionId: "read", granted: true },
+  { roleId: "manager", permissionId: "write", granted: true },
+  { roleId: "manager", permissionId: "invite", granted: true },
+  // User has read only
+  { roleId: "user", permissionId: "read", granted: true },
+  // Viewer has read only
+  { roleId: "viewer", permissionId: "read", granted: true },
+]
+
+export const Default: Story = {
+  args: {
+    permissions,
+    roles,
+    categories,
+    initialValues,
+    readOnly: true,
+    enableSearch: true,
+  },
+  render: (args) => <WakaPermissionMatrix {...args} />,
+}
+
+export const Editable: Story = {
+  args: {
+    permissions,
+    roles,
+    categories,
+    initialValues,
+    readOnly: false,
+    enableSearch: true,
+    enableBulkOperations: true,
+    onPermissionChange: (roleId, permissionId, granted) => {
+      console.log(`Permission changed: ${roleId} - ${permissionId} = ${granted}`)
+    },
+  },
+  render: (args) => <WakaPermissionMatrix {...args} />,
+}
+
+export const WithInheritance: Story = {
+  args: {
+    permissions,
+    roles: roles.map((r, i) => ({
+      ...r,
+      inheritsFrom: i > 0 ? roles[i - 1].id : undefined,
+    })),
+    categories,
+    initialValues: [
+      ...initialValues,
+      // Add some inherited values
+      { roleId: "manager", permissionId: "admin", granted: false, inherited: true, inheritedFrom: "admin" },
+      { roleId: "user", permissionId: "write", granted: false, inherited: true, inheritedFrom: "manager" },
+    ],
+    showInheritance: true,
+  },
+  render: (args) => <WakaPermissionMatrix {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    permissions: permissions.slice(0, 4),
+    roles: roles.slice(0, 3),
+    categories: categories.slice(0, 2),
+    initialValues: initialValues.filter(
+      (v) =>
+        ["read", "write", "delete", "admin"].includes(v.permissionId) &&
+        ["admin", "manager", "user"].includes(v.roleId)
+    ),
+    enableSearch: false,
+    cellSize: "sm",
+  },
+  render: (args) => <WakaPermissionMatrix {...args} />,
+}

package/src/components/waka-phone-input/WakaPhoneInput.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPhoneInput } from "./index"
+
+const meta: Meta<typeof WakaPhoneInput> = {
+  title: "Forms/WakaPhoneInput",
+  component: WakaPhoneInput,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultCountry: { control: "text", description: "Pays par défaut" },
+    placeholder: { control: "text", description: "Placeholder" },
+    disabled: { control: "boolean", description: "Désactivé" },
+    showCountrySelect: { control: "boolean", description: "Sélecteur de pays" },
+    showFlag: { control: "boolean", description: "Afficher le drapeau" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPhoneInput>
+
+export const Default: Story = {
+  args: { defaultCountry: "FR", placeholder: "Numéro de téléphone", showCountrySelect: true, showFlag: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPhoneInput {...args} />
+    </div>
+  ),
+}
+
+export const USDefault: Story = {
+  args: { defaultCountry: "US", placeholder: "Phone number", showCountrySelect: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPhoneInput {...args} />
+    </div>
+  ),
+}
+
+export const NoCountrySelect: Story = {
+  args: { defaultCountry: "FR", placeholder: "06 00 00 00 00", showCountrySelect: false, showFlag: true },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaPhoneInput {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { defaultCountry: "FR", disabled: true, value: "+33 6 12 34 56 78" },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPhoneInput {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-points-popup/WakaPointsPopup.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPointsPopup, usePointsPopup } from "./index"
+import { Button } from "../button"
+import * as React from "react"
+
+const InteractiveDemo = () => {
+  const { trigger, PopupContainer } = usePointsPopup()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  const handleClick = (points: number, e: React.MouseEvent) => {
+    const rect = containerRef.current?.getBoundingClientRect()
+    if (rect) {
+      trigger(points, {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      })
+    }
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-[400px] h-[300px] bg-card border rounded-lg flex flex-col items-center justify-center gap-4"
+    >
+      <PopupContainer />
+      <p className="text-muted-foreground text-sm">Click buttons to trigger popups</p>
+      <div className="flex gap-2">
+        <Button onClick={(e) => handleClick(10, e)} variant="default">+10 XP</Button>
+        <Button onClick={(e) => handleClick(50, e)} variant="secondary">+50 XP</Button>
+        <Button onClick={(e) => handleClick(100, e)} variant="outline">+100 XP</Button>
+        <Button onClick={(e) => handleClick(-25, e)} variant="destructive">-25 XP</Button>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta<typeof WakaPointsPopup> = {
+  title: "Components/Gamification/WakaPointsPopup",
+  component: WakaPointsPopup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    points: {
+      control: "number",
+      description: "Points value to display",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size variant",
+    },
+    prefix: {
+      control: "text",
+      description: "Prefix text (e.g., XP)",
+    },
+    duration: {
+      control: "number",
+      description: "Animation duration (ms)",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPointsPopup>
+
+export const Interactive: Story = {
+  render: () => <InteractiveDemo />,
+}
+
+export const Positive: Story = {
+  args: {
+    points: 100,
+    size: "lg",
+    prefix: "XP",
+  },
+  render: (args) => (
+    <div className="relative w-[200px] h-[200px] bg-card border rounded-lg flex items-center justify-center">
+      <WakaPointsPopup {...args} />
+    </div>
+  ),
+}
+
+export const Negative: Story = {
+  args: {
+    points: -50,
+    size: "lg",
+  },
+  render: (args) => (
+    <div className="relative w-[200px] h-[200px] bg-card border rounded-lg flex items-center justify-center">
+      <WakaPointsPopup {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-power-up/WakaPowerUp.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPowerUp, PowerUp } from "./index"
+
+const speedPowerUp: PowerUp = {
+  id: "speed-1",
+  type: "speed",
+  name: "Speed Boost",
+  description: "Move 2x faster for 30 seconds",
+  duration: 30000,
+  multiplier: 2,
+  isActive: true,
+  activatedAt: Date.now(),
+}
+
+const shieldPowerUp: PowerUp = {
+  id: "shield-1",
+  type: "shield",
+  name: "Protection Shield",
+  description: "Blocks the next 3 attacks",
+  duration: 60000,
+  multiplier: 3,
+  stackCount: 3,
+  maxStack: 3,
+  isActive: true,
+  activatedAt: Date.now(),
+}
+
+const coinsPowerUp: PowerUp = {
+  id: "coins-1",
+  type: "coins",
+  name: "Coin Magnet",
+  description: "Automatically collect nearby coins",
+  duration: 45000,
+  multiplier: 1,
+  isActive: true,
+  activatedAt: Date.now(),
+}
+
+const meta: Meta<typeof WakaPowerUp> = {
+  title: "Components/Gamification/WakaPowerUp",
+  component: WakaPowerUp,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size variant",
+    },
+    variant: {
+      control: "select",
+      options: ["card", "badge", "compact"],
+      description: "Visual variant",
+    },
+    showCountdown: {
+      control: "boolean",
+      description: "Show countdown timer",
+    },
+    showDescription: {
+      control: "boolean",
+      description: "Show description",
+    },
+    glowEnabled: {
+      control: "boolean",
+      description: "Enable glow animation",
+    },
+    pulseEnabled: {
+      control: "boolean",
+      description: "Enable pulse animation",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPowerUp>
+
+export const Card: Story = {
+  args: {
+    powerUp: speedPowerUp,
+    variant: "card",
+    size: "md",
+    showCountdown: true,
+    showDescription: true,
+    glowEnabled: true,
+  },
+  render: (args) => <WakaPowerUp {...args} />,
+}
+
+export const Badge: Story = {
+  args: {
+    powerUp: shieldPowerUp,
+    variant: "badge",
+    size: "md",
+    showCountdown: true,
+    glowEnabled: true,
+  },
+  render: (args) => <WakaPowerUp {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    powerUp: coinsPowerUp,
+    variant: "compact",
+    size: "sm",
+    showCountdown: true,
+  },
+  render: (args) => <WakaPowerUp {...args} />,
+}
+
+export const MultiplePowerUps: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <WakaPowerUp powerUp={speedPowerUp} variant="badge" showCountdown glowEnabled />
+      <WakaPowerUp powerUp={shieldPowerUp} variant="badge" showCountdown glowEnabled />
+      <WakaPowerUp powerUp={coinsPowerUp} variant="badge" showCountdown glowEnabled />
+    </div>
+  ),
+}
+

package/src/components/waka-presence-indicator/WakaPresenceIndicator.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPresenceIndicator } from "./index"
+
+const meta: Meta<typeof WakaPresenceIndicator> = {
+  title: "UI/WakaPresenceIndicator",
+  component: WakaPresenceIndicator,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    status: { control: "select", options: ["online", "offline", "away", "busy", "dnd"], description: "Statut" },
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille" },
+    showLabel: { control: "boolean", description: "Afficher le label" },
+    animated: { control: "boolean", description: "Animation" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPresenceIndicator>
+
+export const Online: Story = {
+  args: { status: "online", size: "md", showLabel: true, animated: true },
+  render: (args) => <WakaPresenceIndicator {...args} />,
+}
+
+export const Offline: Story = {
+  args: { status: "offline", size: "md", showLabel: true },
+  render: (args) => <WakaPresenceIndicator {...args} />,
+}
+
+export const Away: Story = {
+  args: { status: "away", size: "md", showLabel: true },
+  render: (args) => <WakaPresenceIndicator {...args} />,
+}
+
+export const Busy: Story = {
+  args: { status: "busy", size: "md", showLabel: true },
+  render: (args) => <WakaPresenceIndicator {...args} />,
+}
+
+export const DoNotDisturb: Story = {
+  args: { status: "dnd", size: "lg", showLabel: true },
+  render: (args) => <WakaPresenceIndicator {...args} />,
+}
+
+export const Small: Story = {
+  args: { status: "online", size: "sm", showLabel: false },
+  render: (args) => <WakaPresenceIndicator {...args} />,
+}
+

package/src/components/waka-pricing-table/WakaPricingTable.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPricingTable, type PricingTier, type PricingFeature } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaPricingTable> = {
+  title: "E-commerce/WakaPricingTable",
+  component: WakaPricingTable,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    billingPeriod: {
+      control: "select",
+      options: ["monthly", "annual"],
+      description: "Période de facturation",
+    },
+    showToggle: {
+      control: "boolean",
+      description: "Afficher le toggle mensuel/annuel",
+    },
+    highlightPopular: {
+      control: "boolean",
+      description: "Mettre en avant le plan populaire",
+    },
+    currency: {
+      control: "text",
+      description: "Symbole de devise",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPricingTable>
+
+const features: PricingFeature[] = [
+  { name: "Utilisateurs", tooltip: "Nombre d'utilisateurs inclus" },
+  { name: "Stockage", tooltip: "Espace de stockage cloud" },
+  { name: "Projets", tooltip: "Nombre de projets simultanés" },
+  { name: "Support", tooltip: "Type de support inclus" },
+  { name: "API Access" },
+  { name: "Analytics avancés" },
+  { name: "SSO" },
+]
+
+const tiers: PricingTier[] = [
+  {
+    id: "free",
+    name: "Gratuit",
+    description: "Pour démarrer",
+    monthlyPrice: 0,
+    annualPrice: 0,
+    features: [
+      { name: "Utilisateurs", included: true, value: "1" },
+      { name: "Stockage", included: true, value: "1 GB" },
+      { name: "Projets", included: true, value: "3" },
+      { name: "Support", included: true, value: "Email" },
+      { name: "API Access", included: false },
+      { name: "Analytics avancés", included: false },
+      { name: "SSO", included: false },
+    ],
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    description: "Pour les équipes",
+    monthlyPrice: 2900,
+    annualPrice: 24900,
+    isPopular: true,
+    features: [
+      { name: "Utilisateurs", included: true, value: "10" },
+      { name: "Stockage", included: true, value: "100 GB" },
+      { name: "Projets", included: true, value: "Illimité" },
+      { name: "Support", included: true, value: "Prioritaire" },
+      { name: "API Access", included: true },
+      { name: "Analytics avancés", included: true },
+      { name: "SSO", included: false },
+    ],
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    description: "Pour les grandes organisations",
+    monthlyPrice: null,
+    annualPrice: null,
+    customPriceLabel: "Sur devis",
+    features: [
+      { name: "Utilisateurs", included: true, value: "Illimité" },
+      { name: "Stockage", included: true, value: "Illimité" },
+      { name: "Projets", included: true, value: "Illimité" },
+      { name: "Support", included: true, value: "24/7 dédié" },
+      { name: "API Access", included: true },
+      { name: "Analytics avancés", included: true },
+      { name: "SSO", included: true },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: {
+    tiers,
+    features,
+    billingPeriod: "monthly",
+    showToggle: true,
+    highlightPopular: true,
+    currency: "€",
+  },
+  render: (args) => <WakaPricingTable {...args} />,
+}
+
+export const Annual: Story = {
+  args: {
+    tiers,
+    features,
+    billingPeriod: "annual",
+    showToggle: true,
+    highlightPopular: true,
+    currency: "€",
+  },
+  render: (args) => <WakaPricingTable {...args} />,
+}
+
+export const WithoutToggle: Story = {
+  args: {
+    tiers,
+    features,
+    billingPeriod: "monthly",
+    showToggle: false,
+    currency: "€",
+  },
+  render: (args) => <WakaPricingTable {...args} />,
+}
+
+export const TwoTiers: Story = {
+  args: {
+    tiers: tiers.slice(0, 2),
+    features: features.slice(0, 5),
+    billingPeriod: "monthly",
+    showToggle: true,
+    currency: "€",
+  },
+  render: (args) => <WakaPricingTable {...args} />,
+}
+
+export const USD: Story = {
+  args: {
+    tiers: tiers.map(t => ({
+      ...t,
+      monthlyPrice: t.monthlyPrice ? Math.round(t.monthlyPrice * 1.1) : null,
+      annualPrice: t.annualPrice ? Math.round(t.annualPrice * 1.1) : null,
+    })),
+    features,
+    billingPeriod: "monthly",
+    showToggle: true,
+    currency: "$",
+  },
+  render: (args) => <WakaPricingTable {...args} />,
+}
+