@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-security-scan-result/WakaSecurityScanResult.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSecurityScanResult, type Vulnerability } from "./index"
+
+const meta: Meta<typeof WakaSecurityScanResult> = {
+  title: "Security/WakaSecurityScanResult",
+  component: WakaSecurityScanResult,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    scanType: {
+      control: "select",
+      options: ["sast", "dast", "sca", "secret", "container", "all"],
+      description: "Type de scan",
+    },
+    title: { control: "text", description: "Titre du rapport" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSecurityScanResult>
+
+const vulnerabilities: Vulnerability[] = [
+  {
+    id: "1",
+    title: "SQL Injection",
+    severity: "critical",
+    type: "sast",
+    file: "src/api/users.ts",
+    line: 45,
+    cweId: "CWE-89",
+    description: "User input is not sanitized before SQL query",
+    remediation: "Use parameterized queries or prepared statements",
+    cvssScore: 9.8,
+  },
+  {
+    id: "2",
+    title: "Cross-Site Scripting (XSS)",
+    severity: "high",
+    type: "dast",
+    file: "src/components/Comment.tsx",
+    line: 23,
+    cweId: "CWE-79",
+    description: "Unsanitized HTML rendering allows script injection",
+    remediation: "Sanitize and escape all user-provided content",
+    cvssScore: 7.5,
+  },
+  {
+    id: "3",
+    title: "Insecure Dependency",
+    severity: "medium",
+    type: "sca",
+    package: "lodash",
+    version: "4.17.20",
+    fixedVersion: "4.17.21",
+    description: "Prototype pollution vulnerability in lodash",
+    remediation: "Upgrade lodash to version 4.17.21 or later",
+    cveId: "CVE-2021-23337",
+    cvssScore: 6.5,
+  },
+  {
+    id: "4",
+    title: "Hardcoded Secret",
+    severity: "high",
+    type: "secret",
+    file: "src/config.ts",
+    line: 12,
+    description: "API key found in source code",
+    remediation: "Remove the hardcoded key and use environment variables",
+  },
+  {
+    id: "5",
+    title: "Missing HTTPS",
+    severity: "low",
+    type: "dast",
+    file: "src/api/client.ts",
+    line: 8,
+    description: "HTTP connection instead of HTTPS",
+    remediation: "Use HTTPS for all API connections",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    vulnerabilities,
+    scanType: "all",
+    scannedAt: new Date(),
+    title: "Security Scan Results",
+  },
+  render: (args) => <WakaSecurityScanResult {...args} />,
+}
+
+export const Clean: Story = {
+  args: {
+    vulnerabilities: [],
+    scanType: "sast",
+    scannedAt: new Date(),
+    title: "SAST Scan Results",
+  },
+  render: (args) => <WakaSecurityScanResult {...args} />,
+}
+
+export const CriticalOnly: Story = {
+  args: {
+    vulnerabilities: vulnerabilities.filter(
+      (v) => v.severity === "critical" || v.severity === "high"
+    ),
+    scanType: "dast",
+    scannedAt: new Date(),
+    title: "Critical Issues",
+  },
+  render: (args) => <WakaSecurityScanResult {...args} />,
+}
+
+export const DependencyScan: Story = {
+  args: {
+    vulnerabilities: [
+      {
+        id: "1",
+        title: "Prototype Pollution",
+        severity: "critical",
+        type: "sca",
+        package: "lodash",
+        version: "4.17.20",
+        fixedVersion: "4.17.21",
+        description: "Prototype pollution vulnerability allows property injection",
+        cveId: "CVE-2021-23337",
+        cvssScore: 9.1,
+      },
+      {
+        id: "2",
+        title: "ReDoS",
+        severity: "medium",
+        type: "sca",
+        package: "minimatch",
+        version: "3.0.4",
+        fixedVersion: "3.1.2",
+        description: "Regular expression denial of service vulnerability",
+        cvssScore: 5.3,
+      },
+    ],
+    scanType: "sca",
+    scannedAt: new Date(),
+    title: "Dependency Scan Results",
+  },
+  render: (args) => <WakaSecurityScanResult {...args} />,
+}

package/src/components/waka-security-score/WakaSecurityScore.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSecurityScore } from "./index"
+
+const meta: Meta<typeof WakaSecurityScore> = {
+  title: "Security/WakaSecurityScore",
+  component: WakaSecurityScore,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    score: { control: { type: "number", min: 0, max: 100 }, description: "Score de sécurité" },
+    showBreakdown: { control: "boolean", description: "Afficher le détail" },
+    showTrend: { control: "boolean", description: "Afficher la tendance" },
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSecurityScore>
+
+const breakdown = [
+  { category: "Authentication", score: 95, maxScore: 100 },
+  { category: "Data Protection", score: 80, maxScore: 100 },
+  { category: "Network Security", score: 70, maxScore: 100 },
+  { category: "Access Control", score: 85, maxScore: 100 },
+]
+
+export const Default: Story = {
+  args: { score: 82, showBreakdown: true, breakdown, showTrend: true, trend: "up", previousScore: 78 },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSecurityScore {...args} />
+    </div>
+  ),
+}
+
+export const Excellent: Story = {
+  args: { score: 95, showBreakdown: true, breakdown: breakdown.map(b => ({ ...b, score: 90 + Math.random() * 10 })), showTrend: true, trend: "up" },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSecurityScore {...args} />
+    </div>
+  ),
+}
+
+export const Poor: Story = {
+  args: { score: 45, showBreakdown: true, breakdown: breakdown.map(b => ({ ...b, score: 30 + Math.random() * 30 })), showTrend: true, trend: "down" },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSecurityScore {...args} />
+    </div>
+  ),
+}
+
+export const ScoreOnly: Story = {
+  args: { score: 72, showBreakdown: false, size: "lg" },
+  render: (args) => <WakaSecurityScore {...args} />,
+}
+
+export const SmallSize: Story = {
+  args: { score: 88, size: "sm" },
+  render: (args) => <WakaSecurityScore {...args} />,
+}
+

package/src/components/waka-session-manager/WakaSessionManager.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSessionManager } from "./index"
+
+const meta: Meta<typeof WakaSessionManager> = {
+  title: "Security/WakaSessionManager",
+  component: WakaSessionManager,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    showLocation: { control: "boolean", description: "Afficher la localisation" },
+    showLogoutAll: { control: "boolean", description: "Bouton déconnexion globale" },
+    showLogoutOther: { control: "boolean", description: "Déconnexion autres sessions" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSessionManager>
+
+const sessions = [
+  { id: "1", device: "Chrome on macOS", deviceType: "desktop" as const, location: { city: "Paris", country: "France" }, lastActive: new Date(), current: true, ip: "192.168.1.1" },
+  { id: "2", device: "Safari on iPhone", deviceType: "mobile" as const, location: { city: "Lyon", country: "France" }, lastActive: new Date(Date.now() - 3600000), current: false, ip: "10.0.0.1" },
+  { id: "3", device: "Firefox on Windows", deviceType: "desktop" as const, location: { city: "Berlin", country: "Germany" }, lastActive: new Date(Date.now() - 86400000), current: false, ip: "172.16.0.1" },
+]
+
+export const Default: Story = {
+  args: { sessions, showLocation: true, showLogoutAll: true, showLogoutOther: true },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaSessionManager {...args} />
+    </div>
+  ),
+}
+
+export const SingleSession: Story = {
+  args: { sessions: [sessions[0]], showLocation: true },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaSessionManager {...args} />
+    </div>
+  ),
+}
+
+export const NoLocation: Story = {
+  args: { sessions, showLocation: false, showLogoutAll: true },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaSessionManager {...args} />
+    </div>
+  ),
+}
+
+export const ManySessions: Story = {
+  args: {
+    sessions: [
+      ...sessions,
+      { id: "4", device: "Edge on Windows", deviceType: "desktop" as const, lastActive: new Date(Date.now() - 172800000), current: false },
+      { id: "5", device: "Chrome on Android", deviceType: "mobile" as const, lastActive: new Date(Date.now() - 259200000), current: false },
+    ],
+    showLocation: true,
+    showLogoutAll: true,
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaSessionManager {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-signature-pad/WakaSignaturePad.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSignaturePad } from "./index"
+
+const meta: Meta<typeof WakaSignaturePad> = {
+  title: "Forms/WakaSignaturePad",
+  component: WakaSignaturePad,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    penColor: { control: "color", description: "Couleur du stylo" },
+    backgroundColor: { control: "color", description: "Couleur de fond" },
+    penSize: { control: { type: "range", min: 1, max: 10 }, description: "Taille du stylo" },
+    showToolbar: { control: "boolean", description: "Afficher la barre d'outils" },
+    showGuideLine: { control: "boolean", description: "Afficher la ligne de guidage" },
+    disabled: { control: "boolean", description: "Désactivé" },
+    readOnly: { control: "boolean", description: "Lecture seule" },
+    placeholder: { control: "text", description: "Texte placeholder" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSignaturePad>
+
+export const Default: Story = {
+  args: {
+    penColor: "#000000",
+    backgroundColor: "#ffffff",
+    showToolbar: true,
+    showGuideLine: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const BlueInk: Story = {
+  args: {
+    penColor: "#1e40af",
+    backgroundColor: "#f8fafc",
+    showToolbar: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const DarkMode: Story = {
+  args: {
+    penColor: "#ffffff",
+    backgroundColor: "#1e293b",
+    showToolbar: true,
+    showGuideLine: true,
+    guideLineColor: "#475569",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    penColor: "#000000",
+    disabled: true,
+    showToolbar: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    penColor: "#000000",
+    readOnly: true,
+    showToolbar: false,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const NoToolbar: Story = {
+  args: {
+    showToolbar: false,
+    showGuideLine: true,
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: "Veuillez signer ici",
+    placeholderColor: "#6b7280",
+    showToolbar: true,
+    showGuideLine: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const CustomPenOptions: Story = {
+  args: {
+    penColor: "#dc2626",
+    penSize: 3,
+    penColors: ["#000000", "#dc2626", "#2563eb", "#16a34a", "#9333ea"],
+    penSizes: [1, 2, 3, 5, 8],
+    showToolbar: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  args: {
+    width: 600,
+    height: 300,
+    showToolbar: true,
+    showGuideLine: true,
+  },
+  render: (args) => (
+    <div style={{ width: 600 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}
+
+export const WithAspectRatio: Story = {
+  args: {
+    width: 500,
+    aspectRatio: 16 / 9,
+    showToolbar: true,
+    showGuideLine: true,
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaSignaturePad {...args} />
+    </div>
+  ),
+}

package/src/components/waka-signature-pad/index.tsx

@@ -77,7 +77,7 @@ export interface UseSignaturePadOptions {
 }
 
 export interface UseSignaturePadReturn {
-  canvasRef: React.RefObject<HTMLCanvasElement | null>
+  canvasRef: React.RefObject<HTMLCanvasElement>
   strokes: Stroke[]
   currentStroke: Stroke | null
   isDrawing: boolean
@@ -108,7 +108,7 @@ export function useSignaturePad(options: UseSignaturePadOptions = {}): UseSignat
     onChange,
   } = options
 
-  const canvasRef = React.useRef<HTMLCanvasElement | null>(null)
+  const canvasRef = React.useRef<HTMLCanvasElement>(null!)
   const [strokes, setStrokes] = React.useState<Stroke[]>([])
   const [currentStroke, setCurrentStroke] = React.useState<Stroke | null>(null)
   const [isDrawing, setIsDrawing] = React.useState(false)
@@ -495,10 +495,12 @@ export const WakaSignaturePad = React.forwardRef<
         if ("touches" in e) {
           const touch = e.touches[0]
           if (!touch) return null
+          // Force is a non-standard property, cast to access it safely
+          const touchWithForce = touch as Touch & { force?: number }
           return {
             x: (touch.clientX - rect.left) * scaleX,
             y: (touch.clientY - rect.top) * scaleY,
-            pressure: touch.force || 0.5,
+            pressure: touchWithForce.force ?? 0.5,
           }
         }
 

package/src/components/waka-sla-tracker/WakaSlaTracker.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSLATracker } from "./index"
+
+const meta: Meta<typeof WakaSLATracker> = {
+  title: "DevOps/WakaSLATracker",
+  component: WakaSLATracker,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    uptime: { control: { type: "number", min: 0, max: 100, step: 0.01 }, description: "Uptime actuel (%)" },
+    target: { control: { type: "number", min: 0, max: 100, step: 0.01 }, description: "Objectif SLA (%)" },
+    period: { control: "select", options: ["day", "week", "month", "quarter", "year"], description: "Période" },
+    showErrorBudget: { control: "boolean", description: "Afficher le budget d'erreur" },
+    showTrend: { control: "boolean", description: "Afficher la tendance" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSLATracker>
+
+export const Default: Story = {
+  args: { uptime: 99.95, target: 99.9, period: "month", showErrorBudget: true, showTrend: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSLATracker {...args} />
+    </div>
+  ),
+}
+
+export const Healthy: Story = {
+  args: { uptime: 99.99, target: 99.9, period: "month", showErrorBudget: true, trend: "up" },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSLATracker {...args} />
+    </div>
+  ),
+}
+
+export const Warning: Story = {
+  args: { uptime: 99.85, target: 99.9, period: "month", showErrorBudget: true, errorBudget: { used: 70, total: 100 } },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSLATracker {...args} />
+    </div>
+  ),
+}
+
+export const Breached: Story = {
+  args: { uptime: 99.5, target: 99.9, period: "quarter", showErrorBudget: true, trend: "down" },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSLATracker {...args} />
+    </div>
+  ),
+}
+
+export const YearlyView: Story = {
+  args: { uptime: 99.97, target: 99.9, period: "year", showErrorBudget: true, showTrend: true },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSLATracker {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-slider-range/WakaSliderRange.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSliderRange } from "./index"
+
+const meta: Meta<typeof WakaSliderRange> = {
+  title: "Forms/WakaSliderRange",
+  component: WakaSliderRange,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    min: { control: "number", description: "Valeur minimale" },
+    max: { control: "number", description: "Valeur maximale" },
+    step: { control: "number", description: "Pas" },
+    showLabels: { control: "boolean", description: "Afficher les labels" },
+    showValue: { control: "boolean", description: "Afficher la valeur" },
+    disabled: { control: "boolean", description: "Désactivé" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSliderRange>
+
+export const Default: Story = {
+  args: { min: 0, max: 100, value: [20, 80], step: 1, showLabels: true, showValue: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSliderRange {...args} />
+    </div>
+  ),
+}
+
+export const PriceRange: Story = {
+  args: { min: 0, max: 1000, value: [100, 500], step: 10, showLabels: true, showValue: true, formatValue: (v: number) => `${v}€` },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSliderRange {...args} />
+    </div>
+  ),
+}
+
+export const SmallStep: Story = {
+  args: { min: 0, max: 1, value: [0.2, 0.8], step: 0.1, showValue: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSliderRange {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { min: 0, max: 100, value: [25, 75], disabled: true, showValue: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaSliderRange {...args} />
+    </div>
+  ),
+}
+
+export const NoLabels: Story = {
+  args: { min: 0, max: 100, value: [30, 70], showLabels: false, showValue: false },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaSliderRange {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-sponsored-badge/WakaSponsoredBadge.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaSponsoredBadge } from "./index"
+
+const meta: Meta<typeof WakaSponsoredBadge> = {
+  title: "Sponsoring/WakaSponsoredBadge",
+  component: WakaSponsoredBadge,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["default", "subtle", "outline", "dark"], description: "Variante" },
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille" },
+    sponsor: { control: "text", description: "Nom du sponsor" },
+    label: { control: "text", description: "Label personnalisé" },
+    showIcon: { control: "boolean", description: "Afficher l'icône info" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSponsoredBadge>
+
+export const Default: Story = {
+  args: { variant: "default", size: "md" },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const WithSponsor: Story = {
+  args: { variant: "default", size: "md", sponsor: "WakaStart", showIcon: true },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const Subtle: Story = {
+  args: { variant: "subtle", size: "md", label: "Partenaire" },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const Outline: Story = {
+  args: { variant: "outline", size: "md" },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const Dark: Story = {
+  args: { variant: "dark", size: "md", sponsor: "Premium Partner" },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const Small: Story = {
+  args: { variant: "default", size: "sm" },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const Large: Story = {
+  args: { variant: "default", size: "lg", sponsor: "Sponsor Premium", showIcon: true },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+
+export const CustomLabel: Story = {
+  args: { variant: "subtle", size: "md", label: "Contenu sponsorisé" },
+  render: (args) => <WakaSponsoredBadge {...args} />,
+}
+