@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-sponsored-card/WakaSponsoredCard.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSponsoredCard } from "./index"
+
+const meta: Meta<typeof WakaSponsoredCard> = {
+  title: "Sponsoring/WakaSponsoredCard",
+  component: WakaSponsoredCard,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["article", "product", "compact", "horizontal"], description: "Variante" },
+    showImage: { control: "boolean", description: "Afficher l'image" },
+    showDescription: { control: "boolean", description: "Afficher la description" },
+    showCta: { control: "boolean", description: "Afficher le CTA" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSponsoredCard>
+
+export const Default: Story = {
+  args: { slotId: "slot-1", variant: "article", showImage: true, showDescription: true, showCta: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSponsoredCard {...args} />
+    </div>
+  ),
+}
+
+export const Product: Story = {
+  args: { slotId: "slot-2", variant: "product", showImage: true, showDescription: true, showCta: true },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaSponsoredCard {...args} />
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  args: { slotId: "slot-3", variant: "compact", showImage: true, showDescription: false },
+  render: (args) => (
+    <div style={{ width: 250 }}>
+      <WakaSponsoredCard {...args} />
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: { slotId: "slot-4", variant: "horizontal", showImage: true, showDescription: true, showCta: true },
+  render: (args) => (
+    <div style={{ width: 600 }}>
+      <WakaSponsoredCard {...args} />
+    </div>
+  ),
+}
+
+export const NoImage: Story = {
+  args: { slotId: "slot-5", variant: "article", showImage: false, showDescription: true, showCta: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSponsoredCard {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-sponsored-feed/WakaSponsoredFeed.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSponsoredFeed } from "./index"
+
+const meta: Meta<typeof WakaSponsoredFeed> = {
+  title: "Sponsoring/WakaSponsoredFeed",
+  component: WakaSponsoredFeed,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    adFrequency: { control: "number", description: "Fréquence des pubs" },
+    adStartPosition: { control: "number", description: "Position de départ" },
+    maxAds: { control: "number", description: "Max pubs affichées" },
+    adVariant: { control: "select", options: ["article", "product", "compact", "horizontal"], description: "Variante des pubs" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSponsoredFeed>
+
+const items = Array.from({ length: 10 }, (_, i) => ({
+  id: `item-${i}`,
+  title: `Article ${i + 1}`,
+  content: `Contenu de l'article numéro ${i + 1}`,
+}))
+
+const adSlots = [
+  { slotId: "feed-ad-1" },
+  { slotId: "feed-ad-2" },
+  { slotId: "feed-ad-3" },
+]
+
+const renderItem = (item: typeof items[0]) => (
+  <div key={item.id} className="tw-p-4 tw-border tw-rounded-lg tw-bg-card">
+    <h3 className="tw-font-semibold">{item.title}</h3>
+    <p className="tw-text-sm tw-text-muted-foreground">{item.content}</p>
+  </div>
+)
+
+export const Default: Story = {
+  args: { items, adSlots, renderItem, adFrequency: 3, adStartPosition: 2, adVariant: "compact" },
+  render: (args) => <WakaSponsoredFeed {...args} />,
+}
+
+export const HighFrequency: Story = {
+  args: { items, adSlots, renderItem, adFrequency: 2, adStartPosition: 1, maxAds: 3 },
+  render: (args) => <WakaSponsoredFeed {...args} />,
+}
+
+export const LowFrequency: Story = {
+  args: { items, adSlots, renderItem, adFrequency: 5, adStartPosition: 4, maxAds: 2 },
+  render: (args) => <WakaSponsoredFeed {...args} />,
+}
+
+export const ArticleVariant: Story = {
+  args: { items: items.slice(0, 6), adSlots, renderItem, adFrequency: 3, adVariant: "article" },
+  render: (args) => <WakaSponsoredFeed {...args} />,
+}
+

package/src/components/waka-spotlight/WakaSpotlight.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSpotlight } from "./index"
+
+const meta: Meta<typeof WakaSpotlight> = {
+  title: "Navigation/WakaSpotlight",
+  component: WakaSpotlight,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    isOpen: { control: "boolean", description: "Ouvert" },
+    placeholder: { control: "text", description: "Placeholder" },
+    showRecentSearches: { control: "boolean", description: "Recherches récentes" },
+    showCategories: { control: "boolean", description: "Catégories" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSpotlight>
+
+const items = [
+  { id: "1", title: "Accueil", category: "Pages", action: () => {} },
+  { id: "2", title: "Paramètres", category: "Pages", action: () => {} },
+  { id: "3", title: "Mon profil", category: "Compte", action: () => {} },
+  { id: "4", title: "Déconnexion", category: "Compte", action: () => {} },
+]
+
+export const Default: Story = {
+  args: { isOpen: true, items, placeholder: "Rechercher...", showRecentSearches: true, showCategories: true },
+  render: (args) => (
+    <div style={{ width: 500, height: 400 }}>
+      <WakaSpotlight {...args} />
+    </div>
+  ),
+}
+
+export const NoCategories: Story = {
+  args: { isOpen: true, items, placeholder: "Que cherchez-vous ?", showCategories: false },
+  render: (args) => (
+    <div style={{ width: 500, height: 400 }}>
+      <WakaSpotlight {...args} />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  args: { isOpen: true, items: [], placeholder: "Rechercher..." },
+  render: (args) => (
+    <div style={{ width: 500, height: 300 }}>
+      <WakaSpotlight {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-stats-hexagon/WakaStatsHexagon.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaStatsHexagon, HexagonStat, HexagonProfile } from "./index"
+
+const playerStats: HexagonStat[] = [
+  { id: "strength", label: "Strength", value: 85, description: "Physical power" },
+  { id: "speed", label: "Speed", value: 70, description: "Movement speed" },
+  { id: "defense", label: "Defense", value: 60, description: "Damage resistance" },
+  { id: "magic", label: "Magic", value: 45, description: "Magical power" },
+  { id: "luck", label: "Luck", value: 90, description: "Critical hit chance" },
+  { id: "stamina", label: "Stamina", value: 75, description: "Energy reserves" },
+]
+
+const playerProfile: HexagonProfile = {
+  id: "player-1",
+  name: "Current Stats",
+  stats: [85, 70, 60, 45, 90, 75],
+  color: "#3b82f6",
+  fillOpacity: 0.3,
+}
+
+const comparisonProfile: HexagonProfile = {
+  id: "player-2",
+  name: "Opponent Stats",
+  stats: [60, 85, 70, 80, 50, 65],
+  color: "#ef4444",
+  fillOpacity: 0.2,
+}
+
+const meta: Meta<typeof WakaStatsHexagon> = {
+  title: "Components/Gamification/WakaStatsHexagon",
+  component: WakaStatsHexagon,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "number", min: 200, max: 500 },
+      description: "Hexagon size in pixels",
+    },
+    theme: {
+      control: "select",
+      options: ["default", "blue", "green", "purple", "orange", "pink", "cyan", "gradient"],
+      description: "Color theme",
+    },
+    levels: {
+      control: { type: "number", min: 2, max: 6 },
+      description: "Number of grid levels",
+    },
+    showGrid: {
+      control: "boolean",
+      description: "Show grid lines",
+    },
+    showLabels: {
+      control: "boolean",
+      description: "Show stat labels",
+    },
+    showValues: {
+      control: "boolean",
+      description: "Show values in labels",
+    },
+    showPoints: {
+      control: "boolean",
+      description: "Show data points",
+    },
+    showTooltips: {
+      control: "boolean",
+      description: "Enable tooltips",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+    showLegend: {
+      control: "boolean",
+      description: "Show legend",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaStatsHexagon>
+
+export const Default: Story = {
+  args: {
+    stats: playerStats,
+    profile: playerProfile,
+    size: 350,
+    theme: "default",
+    levels: 4,
+    showGrid: true,
+    showLabels: true,
+    showValues: true,
+    showPoints: true,
+    showTooltips: true,
+    animated: true,
+  },
+  render: (args) => <WakaStatsHexagon {...args} />,
+}
+
+export const WithComparison: Story = {
+  args: {
+    stats: playerStats,
+    profile: playerProfile,
+    comparisonProfile: comparisonProfile,
+    size: 400,
+    theme: "default",
+    showGrid: true,
+    showLabels: true,
+    showPoints: true,
+    showLegend: true,
+    animated: true,
+  },
+  render: (args) => <WakaStatsHexagon {...args} />,
+}
+
+export const Purple: Story = {
+  args: {
+    stats: playerStats,
+    profile: { ...playerProfile, color: "#8b5cf6" },
+    size: 300,
+    theme: "purple",
+    showGrid: true,
+    showLabels: true,
+    showValues: false,
+    animated: true,
+  },
+  render: (args) => <WakaStatsHexagon {...args} />,
+}
+
+export const Minimal: Story = {
+  args: {
+    stats: playerStats,
+    profile: playerProfile,
+    size: 250,
+    theme: "cyan",
+    showGrid: false,
+    showLabels: true,
+    showValues: false,
+    showPoints: false,
+    animated: true,
+  },
+  render: (args) => <WakaStatsHexagon {...args} />,
+}
+
+export const Large: Story = {
+  args: {
+    stats: playerStats,
+    profile: playerProfile,
+    size: 450,
+    theme: "gradient",
+    levels: 5,
+    showGrid: true,
+    showLabels: true,
+    showValues: true,
+    showPoints: true,
+    animated: true,
+  },
+  render: (args) => <WakaStatsHexagon {...args} />,
+}
+