@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/waka-rank-badge/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-engagement` (workspace package
+ * `packages/ui-blocks-engagement`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-engagement'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-engagement` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"
@@ -575,7 +589,7 @@ export function WakaRankBadge({
           <svg
             className="absolute inset-0 -rotate-90"
             viewBox="0 0 100 100"
-          >
+           aria-hidden="true" focusable="false">
             <circle
               cx="50"
               cy="50"

package/src/components/waka-rating-input/WakaRatingInput.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaRatingInput.stories'
+
+<Meta of={Stories} />
+
+# WakaRatingInput
+
+Star rating input with half-step precision and read-only mode.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaRatingInput } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-rating-input`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Half Stars
+
+<Canvas of={Stories.HalfStars} />
+
+### Large
+
+<Canvas of={Stories.Large} />
+
+### Small
+
+<Canvas of={Stories.Small} />
+
+### Read Only
+
+<Canvas of={Stories.ReadOnly} />
+
+### Ten Stars
+
+<Canvas of={Stories.TenStars} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-rating-input.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-rating-input/WakaRatingInput.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaRatingInput> = {
   title: "Forms/WakaRatingInput",
   component: WakaRatingInput,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     value: { control: { type: "number", min: 0, max: 5, step: 0.5 }, description: "Valeur" },
     max: { control: "number", description: "Note maximale" },

package/src/components/waka-reaction-picker/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-engagement` (workspace package
+ * `packages/ui-blocks-engagement`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-engagement'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-engagement` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-region-map/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-resource-gauge/WakaResourceGauge.mdx

@@ -0,0 +1,117 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaResourceGauge.stories'
+
+<Meta of={Stories} />
+
+# WakaResourceGauge
+
+Single-resource gauge (CPU, memory, etc.) with threshold colour bands.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaResourceGauge } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-resource-gauge`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### Variants
+
+<Canvas of={Stories.Variants} />
+
+### Threshold Zones
+
+<Canvas of={Stories.ThresholdZones} />
+
+### Custom Thresholds
+
+<Canvas of={Stories.CustomThresholds} />
+
+### Preset Gauges
+
+<Canvas of={Stories.PresetGauges} />
+
+### With History
+
+<Canvas of={Stories.WithHistory} />
+
+### Gauge Group
+
+<Canvas of={Stories.GaugeGroup} />
+
+### Vertical Group
+
+<Canvas of={Stories.VerticalGroup} />
+
+### No Value
+
+<Canvas of={Stories.NoValue} />
+
+### No Label
+
+<Canvas of={Stories.NoLabel} />
+
+### No Glow
+
+<Canvas of={Stories.NoGlow} />
+
+### No Animation
+
+<Canvas of={Stories.NoAnimation} />
+
+### With Hook
+
+<Canvas of={Stories.WithHook} />
+
+### Server Dashboard
+
+<Canvas of={Stories.ServerDashboard} />
+
+### Compact Resource Monitor
+
+<Canvas of={Stories.CompactResourceMonitor} />
+
+### Critical Alert
+
+<Canvas of={Stories.CriticalAlert} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-resource-gauge.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-resource-gauge/WakaResourceGauge.stories.tsx

@@ -21,7 +21,6 @@ const meta: Meta<typeof WakaResourceGauge> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     value: {
       control: { type: 'range', min: 0, max: 100, step: 1 },
@@ -185,43 +184,47 @@ export const WithHistory: Story = {
 }
 
 export const GaugeGroup: Story = {
-  render: () => (
-    <WakaResourceGaugeGroup
-      gauges={[
+  args: {
+    gauges: [
         { id: 'cpu', value: 72, label: 'CPU' },
         { id: 'ram', value: 58, label: 'RAM', unit: 'GB', max: 64 },
         { id: 'disk', value: 340, label: 'Disk', unit: 'GB', max: 500 },
         { id: 'net', value: 45, label: 'Network', unit: 'Mbps' },
-      ]}
-      gap="lg"
-    />
-  ),
+      ],
+    gap: "lg",
+  },
+  render: (args) => <WakaResourceGaugeGroup {...args} />,
 }
 
 export const VerticalGroup: Story = {
-  render: () => (
-    <WakaResourceGaugeGroup
-      gauges={[
+  args: {
+    gauges: [
         { id: 'cpu', value: 72, label: 'CPU', size: 'sm' },
         { id: 'ram', value: 58, label: 'RAM', size: 'sm' },
         { id: 'disk', value: 85, label: 'Disk', size: 'sm' },
-      ]}
-      direction="vertical"
-      gap="md"
-    />
-  ),
+      ],
+    direction: "vertical",
+    gap: "md",
+  },
+  render: (args) => <WakaResourceGaugeGroup {...args} />,
 }
 
 export const NoValue: Story = {
-  render: () => (
-    <WakaResourceGauge value={75} label="CPU" showValue={false} />
-  ),
+  args: {
+    value: 75,
+    label: "CPU",
+    showValue: false,
+  },
+  render: (args) => <WakaResourceGauge {...args} />,
 }
 
 export const NoLabel: Story = {
-  render: () => (
-    <WakaResourceGauge value={75} label="CPU" showLabel={false} />
-  ),
+  args: {
+    value: 75,
+    label: "CPU",
+    showLabel: false,
+  },
+  render: (args) => <WakaResourceGauge {...args} />,
 }
 
 export const NoGlow: Story = {
@@ -238,9 +241,12 @@ export const NoGlow: Story = {
 }
 
 export const NoAnimation: Story = {
-  render: () => (
-    <WakaResourceGauge value={75} label="Static" animated={false} />
-  ),
+  args: {
+    value: 75,
+    label: "Static",
+    animated: false,
+  },
+  render: (args) => <WakaResourceGauge {...args} />,
 }
 
 export const WithHook: Story = {

package/src/components/waka-resource-gauge/index.tsx

@@ -203,7 +203,7 @@ function Sparkline({ data, width, height, color, className }: SparklineProps) {
       height={height}
       className={cn("overflow-visible", className)}
       viewBox={`0 0 ${width} ${height}`}
-    >
+     aria-hidden="true" focusable="false">
       <defs>
         <linearGradient id={`sparkline-gradient-${color}`} x1="0" y1="0" x2="0" y2="1">
           <stop offset="0%" stopColor={color} stopOpacity="0.3" />
@@ -393,7 +393,7 @@ export function WakaResourceGauge({
           style={{
             transform: `rotate(${variantConfig.rotation}deg)`,
           }}
-        >
+         aria-hidden="true" focusable="false">
           <defs>
             {/* Gradient for the progress arc */}
             <linearGradient id={`gauge-gradient-${size}-${variant}`} x1="0%" y1="0%" x2="100%" y2="0%">

package/src/components/waka-resource-pool/WakaResourcePool.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaResourcePool.stories'
+
+<Meta of={Stories} />
+
+# WakaResourcePool
+
+Resource Pool component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaResourcePool } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-resource-pool`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Blocks
+
+<Canvas of={Stories.Blocks} />
+
+### Liquid
+
+<Canvas of={Stories.Liquid} />
+
+### Critical
+
+<Canvas of={Stories.Critical} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-resource-pool.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

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

@@ -5,7 +5,6 @@ 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" },

package/src/components/waka-resource-pool/index.tsx

@@ -454,7 +454,7 @@ function LiquidVisualization({ pool, animated = true, onClick }: LiquidVisualiza
       >
         {/* Wave effect at top */}
         <div className="absolute inset-x-0 -top-2 h-4">
-          <svg viewBox="0 0 100 20" preserveAspectRatio="none" className="w-full h-full">
+          <svg viewBox="0 0 100 20" preserveAspectRatio="none" className="w-full h-full" aria-hidden="true" focusable="false">
             <path
               d={animated
                 ? "M0,10 Q25,0 50,10 T100,10 V20 H0 Z"
@@ -715,6 +715,7 @@ function SinglePool({
         <div className="mt-3 flex items-center gap-2">
           {onRelease && pool.used > 0 && (
             <button
+              type="button"
               onClick={handleQuickRelease}
               className={cn(
                 "flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
@@ -727,6 +728,7 @@ function SinglePool({
           )}
           {onAllocate && available > 0 && (
             <button
+              type="button"
               onClick={handleQuickAllocate}
               className={cn(
                 "flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",

package/src/components/waka-rich-text-editor/WakaRichTextEditor.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaRichTextEditor.stories'
+
+<Meta of={Stories} />
+
+# WakaRichTextEditor
+
+Plate-based rich text editor with markdown shortcuts and mention support.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaRichTextEditor } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-rich-text-editor`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Content
+
+<Canvas of={Stories.WithContent} />
+
+### Read Only
+
+<Canvas of={Stories.ReadOnly} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### With Error
+
+<Canvas of={Stories.WithError} />
+
+### Minimal Toolbar
+
+<Canvas of={Stories.MinimalToolbar} />
+
+### Large Editor
+
+<Canvas of={Stories.LargeEditor} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-rich-text-editor.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

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

@@ -8,7 +8,6 @@ const meta: Meta<typeof WakaRichTextEditor> = {
   parameters: {
     layout: "padded",
   },
-  tags: ["autodocs"],
   argTypes: {
     placeholder: {
       control: "text",

package/src/components/waka-rich-text-editor/index.tsx

@@ -117,6 +117,12 @@ export interface WakaRichTextEditorProps {
   description?: string
   /** Mode éditable */
   editable?: boolean
+  /**
+   * Si false (défaut), Tiptap reporte le rendu de l'éditeur au prochain tick
+   * pour éviter les hydration mismatches Next.js / React 19.
+   * Mettre à true uniquement dans un environnement purement client (ex. SPA Vite).
+   */
+  immediatelyRender?: boolean
 }
 
 // Configuration par défaut de la toolbar
@@ -148,6 +154,7 @@ export const WakaRichTextEditor = React.forwardRef<HTMLDivElement, WakaRichTextE
       label,
       description,
       editable = true,
+      immediatelyRender = false,
     },
     ref
   ) => {
@@ -210,6 +217,7 @@ export const WakaRichTextEditor = React.forwardRef<HTMLDivElement, WakaRichTextE
           label={label}
           description={description}
           editable={editable}
+          immediatelyRender={immediatelyRender}
           linkUrl={linkUrl}
           setLinkUrl={setLinkUrl}
           editor={editor}
@@ -267,6 +275,7 @@ const TiptapEditorComponent = React.forwardRef<HTMLDivElement, WakaRichTextEdito
       label,
       description,
       editable,
+      immediatelyRender = false,
       linkUrl,
       setLinkUrl,
       setEditor,
@@ -293,6 +302,7 @@ const TiptapEditorComponent = React.forwardRef<HTMLDivElement, WakaRichTextEdito
       ],
       content: value,
       editable: editable && !disabled,
+      immediatelyRender,
       onUpdate: ({ editor: ed }: { editor: TiptapEditor }) => {
         const html = ed.getHTML()
         if (!maxLength || html.length <= maxLength) {

package/src/components/waka-rollback-slider/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"