@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-resource-pool/WakaResourcePool.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaResourcePool, type ResourcePool } from "./index"
+
+const meta: Meta<typeof WakaResourcePool> = {
+  title: "DevOps/WakaResourcePool",
+  component: WakaResourcePool,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["blocks", "bar", "liquid"], description: "Style visuel" },
+    showLabels: { control: "boolean", description: "Afficher les labels" },
+    showCapacity: { control: "boolean", description: "Afficher la capacité" },
+    animated: { control: "boolean", description: "Animations" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaResourcePool>
+
+const pools: ResourcePool[] = [
+  { id: "cpu", name: "CPU", total: 100, used: 65, reserved: 10, type: "compute", unit: "%" },
+  { id: "memory", name: "Memory", total: 128, used: 96, reserved: 16, type: "memory", unit: "GB" },
+  { id: "storage", name: "Storage", total: 1000, used: 450, type: "storage", unit: "GB" },
+  { id: "network", name: "Network", total: 1000, used: 200, type: "network", unit: "Mbps" },
+]
+
+export const Default: Story = {
+  args: { pools, variant: "bar", showLabels: true, showCapacity: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaResourcePool {...args} />
+    </div>
+  ),
+}
+
+export const Blocks: Story = {
+  args: { pools, variant: "blocks", showLabels: true },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaResourcePool {...args} />
+    </div>
+  ),
+}
+
+export const Liquid: Story = {
+  args: { pools: pools.slice(0, 2), variant: "liquid", showLabels: true, animated: true },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaResourcePool {...args} />
+    </div>
+  ),
+}
+
+export const Critical: Story = {
+  args: {
+    pools: [
+      { id: "cpu", name: "CPU", total: 100, used: 95, type: "compute", unit: "%" },
+      { id: "memory", name: "Memory", total: 128, used: 125, type: "memory", unit: "GB" },
+    ],
+    variant: "bar",
+    showLabels: true,
+    showCapacity: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaResourcePool {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-rich-text-editor/WakaRichTextEditor.stories.tsx

@@ -1,31 +1,46 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaRichTextEditor } from './index'
-import * as React from 'react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaRichTextEditor } from "./index"
+import { useState } from "react"
 
 const meta: Meta<typeof WakaRichTextEditor> = {
-  title: 'Components/Forms/WakaRichTextEditor',
+  title: "Forms/WakaRichTextEditor",
   component: WakaRichTextEditor,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A rich text editor with toolbar, formatting options, and character count.',
-      },
-    },
+    layout: "padded",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    showCharacterCount: {
-      control: 'boolean',
-      description: 'Show character count',
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
     },
     disabled: {
-      control: 'boolean',
-      description: 'Disable the editor',
+      control: "boolean",
+      description: "État désactivé",
+    },
+    readOnly: {
+      control: "boolean",
+      description: "Mode lecture seule",
+    },
+    showToolbar: {
+      control: "boolean",
+      description: "Afficher la barre d'outils",
+    },
+    minHeight: {
+      control: "number",
+      description: "Hauteur minimale en pixels",
+    },
+    maxHeight: {
+      control: "number",
+      description: "Hauteur maximale en pixels",
     },
-    editable: {
-      control: 'boolean',
-      description: 'Make content editable',
+    label: {
+      control: "text",
+      description: "Label du champ",
+    },
+    error: {
+      control: "text",
+      description: "Message d'erreur",
     },
   },
 }
@@ -34,205 +49,101 @@ export default meta
 type Story = StoryObj<typeof WakaRichTextEditor>
 
 export const Default: Story = {
-  render: function EditorDemo() {
-    const [content, setContent] = React.useState('<p>Start typing...</p>')
-
-    return (
-      <div className="w-[600px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Content"
-          placeholder="Write something..."
-        />
-      </div>
-    )
-  },
-}
-
-export const WithCharacterCount: Story = {
-  render: function CharCountDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[600px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Description"
-          showCharacterCount
-          maxLength={500}
-          placeholder="Enter description (max 500 characters)"
-        />
-      </div>
-    )
+  args: {
+    placeholder: "Commencez à écrire...",
+    showToolbar: true,
+    minHeight: 200,
+    label: "Contenu",
   },
+  render: (args) => (
+    <div style={{ maxWidth: 700 }}>
+      <WakaRichTextEditor {...args} />
+    </div>
+  ),
 }
 
-export const CustomToolbar: Story = {
-  render: function CustomToolbarDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[600px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Simple Editor"
-          toolbar={[
-            ['bold', 'italic', 'underline'],
-            ['bulletList', 'orderedList'],
-            ['undo', 'redo'],
-          ]}
-          placeholder="Simple toolbar..."
-        />
-      </div>
-    )
+export const WithContent: Story = {
+  args: {
+    content: "<h2>Titre de l'article</h2><p>Voici un paragraphe avec du <strong>texte en gras</strong> et du <em>texte en italique</em>.</p><ul><li>Premier élément</li><li>Deuxième élément</li></ul>",
+    showToolbar: true,
+    minHeight: 200,
+    label: "Article",
   },
+  render: (args) => (
+    <div style={{ maxWidth: 700 }}>
+      <WakaRichTextEditor {...args} />
+    </div>
+  ),
 }
 
-export const FullToolbar: Story = {
-  render: function FullToolbarDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[700px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Full Editor"
-          toolbar={[
-            ['bold', 'italic', 'underline', 'strike'],
-            ['h1', 'h2', 'h3'],
-            ['bulletList', 'orderedList', 'blockquote'],
-            ['alignLeft', 'alignCenter', 'alignRight'],
-            ['link', 'code'],
-            ['undo', 'redo'],
-          ]}
-          minHeight={300}
-          showCharacterCount
-        />
-      </div>
-    )
+export const ReadOnly: Story = {
+  args: {
+    content: "<h2>Contenu en lecture seule</h2><p>Ce contenu ne peut pas être modifié.</p><blockquote>Citation importante</blockquote>",
+    readOnly: true,
+    showToolbar: false,
+    minHeight: 150,
   },
+  render: (args) => (
+    <div style={{ maxWidth: 700 }}>
+      <WakaRichTextEditor {...args} />
+    </div>
+  ),
 }
 
-export const WithDescription: Story = {
-  render: function DescriptionDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[600px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Article Content"
-          description="Write your article content. Use the toolbar to format text."
-          placeholder="Start writing your article..."
-          minHeight={250}
-        />
-      </div>
-    )
+export const Disabled: Story = {
+  args: {
+    placeholder: "Éditeur désactivé",
+    disabled: true,
+    showToolbar: true,
+    minHeight: 150,
+    label: "Contenu désactivé",
   },
+  render: (args) => (
+    <div style={{ maxWidth: 700 }}>
+      <WakaRichTextEditor {...args} />
+    </div>
+  ),
 }
 
 export const WithError: Story = {
-  render: function ErrorDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[600px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Required Content"
-          error="Content is required"
-          placeholder="Enter required content..."
-        />
-      </div>
-    )
+  args: {
+    placeholder: "Commencez à écrire...",
+    showToolbar: true,
+    minHeight: 150,
+    label: "Description",
+    error: "Le contenu est obligatoire et doit contenir au moins 100 caractères",
   },
-}
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="w-[600px]">
-      <WakaRichTextEditor
-        value="<p>This content cannot be edited.</p>"
-        label="Disabled Editor"
-        disabled
-      />
+  render: (args) => (
+    <div style={{ maxWidth: 700 }}>
+      <WakaRichTextEditor {...args} />
     </div>
   ),
 }
 
-export const ReadOnly: Story = {
-  render: () => (
-    <div className="w-[600px]">
-      <WakaRichTextEditor
-        value="<p><strong>Read-only content</strong></p><p>This content is displayed but cannot be edited.</p>"
-        label="Read Only"
-        editable={false}
-      />
+export const MinimalToolbar: Story = {
+  args: {
+    placeholder: "Écrivez ici...",
+    showToolbar: true,
+    minHeight: 100,
+    maxHeight: 300,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 500 }}>
+      <WakaRichTextEditor {...args} />
     </div>
   ),
 }
 
-export const MinimalHeight: Story = {
-  render: function MinimalDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[600px]">
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Short Note"
-          minHeight={100}
-          toolbar={[['bold', 'italic'], ['undo', 'redo']]}
-          placeholder="Quick note..."
-        />
-      </div>
-    )
-  },
-}
-
-export const BlogPostEditor: Story = {
-  render: function BlogPostDemo() {
-    const [content, setContent] = React.useState('')
-
-    return (
-      <div className="w-[700px] space-y-4 p-4 border rounded-lg">
-        <div>
-          <h3 className="font-semibold text-lg">Create Blog Post</h3>
-          <p className="text-sm text-muted-foreground">
-            Write and format your blog post content
-          </p>
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium">Title</label>
-          <input
-            type="text"
-            className="w-full px-3 py-2 border rounded-md"
-            placeholder="Enter post title..."
-          />
-        </div>
-        <WakaRichTextEditor
-          value={content}
-          onChange={setContent}
-          label="Content"
-          minHeight={350}
-          showCharacterCount
-          toolbar={[
-            ['bold', 'italic', 'underline'],
-            ['h2', 'h3'],
-            ['bulletList', 'orderedList', 'blockquote'],
-            ['link', 'code'],
-            ['undo', 'redo'],
-          ]}
-          placeholder="Write your blog post content..."
-        />
-      </div>
-    )
+export const LargeEditor: Story = {
+  args: {
+    placeholder: "Rédigez votre article complet...",
+    showToolbar: true,
+    minHeight: 400,
+    label: "Article de blog",
   },
+  render: (args) => (
+    <div style={{ maxWidth: 900 }}>
+      <WakaRichTextEditor {...args} />
+    </div>
+  ),
 }

package/src/components/waka-rollback-slider/WakaRollbackSlider.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaRollbackSlider, type DeploymentVersion } from "./index"
+
+const meta: Meta<typeof WakaRollbackSlider> = {
+  title: "DevOps/WakaRollbackSlider",
+  component: WakaRollbackSlider,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showHealth: { control: "boolean", description: "Afficher l'état de santé" },
+    showCommitInfo: { control: "boolean", description: "Afficher les infos de commit" },
+    allowRollback: { control: "boolean", description: "Permettre le rollback" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaRollbackSlider>
+
+const versions: DeploymentVersion[] = [
+  { id: "v5", version: "v2.1.0", commit: "abc1234", commitMessage: "feat: add new dashboard", health: "healthy", deployedAt: new Date() },
+  { id: "v4", version: "v2.0.1", commit: "def5678", commitMessage: "fix: performance issue", health: "healthy", deployedAt: new Date(Date.now() - 86400000) },
+  { id: "v3", version: "v2.0.0", commit: "ghi9012", commitMessage: "feat: major update", health: "degraded", deployedAt: new Date(Date.now() - 172800000) },
+  { id: "v2", version: "v1.5.2", commit: "jkl3456", commitMessage: "fix: security patch", health: "healthy", deployedAt: new Date(Date.now() - 259200000) },
+  { id: "v1", version: "v1.5.1", commit: "mno7890", commitMessage: "chore: dependencies", health: "unhealthy", deployedAt: new Date(Date.now() - 345600000) },
+]
+
+export const Default: Story = {
+  args: { versions, currentVersion: "v5", showHealth: true, showCommitInfo: true, allowRollback: true },
+  render: (args) => <WakaRollbackSlider {...args} />,
+}
+
+export const WithDegraded: Story = {
+  args: { versions, currentVersion: "v3", showHealth: true, showCommitInfo: true, allowRollback: true },
+  render: (args) => <WakaRollbackSlider {...args} />,
+}
+
+export const ReadOnly: Story = {
+  args: { versions, currentVersion: "v5", showHealth: true, allowRollback: false },
+  render: (args) => <WakaRollbackSlider {...args} />,
+}
+

package/src/components/waka-schedule-picker/WakaSchedulePicker.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSchedulePicker } from "./index"
+
+const meta: Meta<typeof WakaSchedulePicker> = {
+  title: "Forms/WakaSchedulePicker",
+  component: WakaSchedulePicker,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: { control: "select", options: ["single", "range", "recurring"], description: "Mode" },
+    showTime: { control: "boolean", description: "Afficher l'heure" },
+    showTimezone: { control: "boolean", description: "Afficher le fuseau" },
+    disabled: { control: "boolean", description: "Désactivé" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSchedulePicker>
+
+export const Default: Story = {
+  args: { mode: "single", showTime: true, showTimezone: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSchedulePicker {...args} />
+    </div>
+  ),
+}
+
+export const DateRange: Story = {
+  args: { mode: "range", showTime: false },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSchedulePicker {...args} />
+    </div>
+  ),
+}
+
+export const Recurring: Story = {
+  args: { mode: "recurring", showTime: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSchedulePicker {...args} />
+    </div>
+  ),
+}
+
+export const DateOnly: Story = {
+  args: { mode: "single", showTime: false, showTimezone: false },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaSchedulePicker {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { mode: "single", disabled: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSchedulePicker {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-season-pass/WakaSeasonPass.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSeasonPass, SeasonPassLevel } from "./index"
+
+const generateLevels = (count: number): SeasonPassLevel[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    level: i + 1,
+    xpRequired: (i + 1) * 1000,
+    freeReward: {
+      type: i % 3 === 0 ? "xp" : i % 3 === 1 ? "currency" : "item",
+      value: i % 3 === 0 ? 100 * (i + 1) : i % 3 === 1 ? 50 * (i + 1) : `Item ${i + 1}`,
+      claimed: i < 5,
+    },
+    premiumReward: {
+      type: i % 4 === 0 ? "badge" : i % 4 === 1 ? "skin" : i % 4 === 2 ? "xp" : "currency",
+      value: i % 4 === 0 ? `Badge ${i + 1}` : i % 4 === 1 ? `Skin ${i + 1}` : i % 4 === 2 ? 500 * (i + 1) : 200 * (i + 1),
+      claimed: i < 5,
+    },
+  }))
+}
+
+const sampleLevels = generateLevels(30)
+
+const meta: Meta<typeof WakaSeasonPass> = {
+  title: "Components/Gamification/WakaSeasonPass",
+  component: WakaSeasonPass,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentLevel: {
+      control: { type: "number", min: 1, max: 30 },
+      description: "Current player level",
+    },
+    currentXP: {
+      control: "number",
+      description: "Current XP amount",
+    },
+    isPremium: {
+      control: "boolean",
+      description: "Has premium pass",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSeasonPass>
+
+export const FreeTier: Story = {
+  args: {
+    levels: sampleLevels,
+    currentLevel: 8,
+    currentXP: 8500,
+    isPremium: false,
+    seasonEndsAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+  },
+  render: (args) => (
+    <div className="p-4">
+      <WakaSeasonPass {...args} />
+    </div>
+  ),
+}
+
+export const Premium: Story = {
+  args: {
+    levels: sampleLevels,
+    currentLevel: 12,
+    currentXP: 12800,
+    isPremium: true,
+    seasonEndsAt: new Date(Date.now() + 45 * 24 * 60 * 60 * 1000),
+  },
+  render: (args) => (
+    <div className="p-4">
+      <WakaSeasonPass {...args} />
+    </div>
+  ),
+}
+
+export const EndingSoon: Story = {
+  args: {
+    levels: sampleLevels,
+    currentLevel: 20,
+    currentXP: 20500,
+    isPremium: true,
+    seasonEndsAt: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
+  },
+  render: (args) => (
+    <div className="p-4">
+      <WakaSeasonPass {...args} />
+    </div>
+  ),
+}
+
+export const Completed: Story = {
+  args: {
+    levels: sampleLevels,
+    currentLevel: 30,
+    currentXP: 35000,
+    isPremium: true,
+  },
+  render: (args) => (
+    <div className="p-4">
+      <WakaSeasonPass {...args} />
+    </div>
+  ),
+}
+