@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/editor/blocks/waka-slash-menu-block.tsx

@@ -1,9 +1,29 @@
 "use client"
 
 import * as React from "react"
+import {
+  Users,
+  CheckCircle2,
+  Zap,
+  GitBranch,
+  Sparkles,
+  GitCompare,
+  ExternalLink,
+  Terminal,
+  MessageSquare,
+} from "lucide-react"
 import { cn } from "../../../utils/cn"
 import type { SlashCommand } from "../waka-slash-menu"
 import { DEFAULT_SLASH_COMMANDS } from "../waka-slash-menu"
+import { createUserStoryNodes } from "./waka-user-story-block"
+import { createAcceptanceCriteriaNodes } from "./waka-acceptance-criteria-block"
+import { createApiEndpointNodes } from "./waka-api-endpoint-block"
+import { createDiagramNodes } from "./waka-diagram-block"
+import { createAiAssistNodes } from "./waka-ai-assist-block"
+import { createVersionDiffNodes } from "./waka-version-diff-block"
+import { createEmbedNodes } from "./waka-embed-block"
+import { createCodePlaygroundNodes } from "./waka-code-playground-block"
+import { createCommentThreadNodes } from "./waka-comment-thread-block"
 
 // ============================================================================
 // Types
@@ -47,19 +67,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "user-story",
     label: "User Story",
     description: "Structured user story (As a / I want / So that)",
-    icon: (() => {
-      // Lazy icon - we use a simple component approach
-      const { Users } = require("lucide-react") as { Users: React.ComponentType<{ className?: string }> }
-      return Users
-    })(),
+    icon: Users,
     group: "WakaStart Blocks",
     keywords: ["user", "story", "agile", "requirement", "persona"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createUserStoryNodes } = require("./waka-user-story-block")
-        editor.insertNodes(createUserStoryNodes())
-      } catch { /* */ }
+      editor.insertNodes(createUserStoryNodes())
     },
   },
   // Acceptance Criteria
@@ -67,18 +80,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "acceptance-criteria",
     label: "Acceptance Criteria",
     description: "Gherkin-format criteria (Given / When / Then)",
-    icon: (() => {
-      const { CheckCircle2 } = require("lucide-react") as { CheckCircle2: React.ComponentType<{ className?: string }> }
-      return CheckCircle2
-    })(),
+    icon: CheckCircle2,
     group: "WakaStart Blocks",
     keywords: ["acceptance", "criteria", "gherkin", "given", "when", "then", "test"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createAcceptanceCriteriaNodes } = require("./waka-acceptance-criteria-block")
-        editor.insertNodes(createAcceptanceCriteriaNodes())
-      } catch { /* */ }
+      editor.insertNodes(createAcceptanceCriteriaNodes())
     },
   },
   // API Endpoint
@@ -86,18 +93,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "api-endpoint",
     label: "API Endpoint",
     description: "REST API documentation (method, route, body, response)",
-    icon: (() => {
-      const { Zap } = require("lucide-react") as { Zap: React.ComponentType<{ className?: string }> }
-      return Zap
-    })(),
+    icon: Zap,
     group: "WakaStart Blocks",
     keywords: ["api", "endpoint", "rest", "route", "get", "post", "put", "delete"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createApiEndpointNodes } = require("./waka-api-endpoint-block")
-        editor.insertNodes(createApiEndpointNodes())
-      } catch { /* */ }
+      editor.insertNodes(createApiEndpointNodes())
     },
   },
   // Diagram
@@ -105,18 +106,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "diagram",
     label: "Diagram",
     description: "Mermaid / PlantUML diagram with live preview",
-    icon: (() => {
-      const { GitBranch } = require("lucide-react") as { GitBranch: React.ComponentType<{ className?: string }> }
-      return GitBranch
-    })(),
+    icon: GitBranch,
     group: "WakaStart Blocks",
     keywords: ["diagram", "mermaid", "plantuml", "flowchart", "sequence", "graph"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createDiagramNodes } = require("./waka-diagram-block")
-        editor.insertNodes(createDiagramNodes())
-      } catch { /* */ }
+      editor.insertNodes(createDiagramNodes())
     },
   },
   // AI Assist
@@ -124,18 +119,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "ai-assist",
     label: "AI Assistant",
     description: "Ask the AI to generate content for your document",
-    icon: (() => {
-      const { Sparkles } = require("lucide-react") as { Sparkles: React.ComponentType<{ className?: string }> }
-      return Sparkles
-    })(),
+    icon: Sparkles,
     group: "WakaStart Blocks",
     keywords: ["ai", "ia", "assistant", "generate", "write", "help", "claude"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createAiAssistNodes } = require("./waka-ai-assist-block")
-        editor.insertNodes(createAiAssistNodes())
-      } catch { /* */ }
+      editor.insertNodes(createAiAssistNodes())
     },
   },
   // Version Diff
@@ -143,18 +132,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "version-diff",
     label: "Version Diff",
     description: "Compare two versions of text with visual diff",
-    icon: (() => {
-      const { GitCompare } = require("lucide-react") as { GitCompare: React.ComponentType<{ className?: string }> }
-      return GitCompare
-    })(),
+    icon: GitCompare,
     group: "WakaStart Blocks",
     keywords: ["diff", "version", "compare", "change", "history", "git"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createVersionDiffNodes } = require("./waka-version-diff-block")
-        editor.insertNodes(createVersionDiffNodes())
-      } catch { /* */ }
+      editor.insertNodes(createVersionDiffNodes())
     },
   },
   // Embed
@@ -162,18 +145,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "embed",
     label: "Embed",
     description: "Embed external content (Figma, YouTube, CodeSandbox...)",
-    icon: (() => {
-      const { ExternalLink } = require("lucide-react") as { ExternalLink: React.ComponentType<{ className?: string }> }
-      return ExternalLink
-    })(),
+    icon: ExternalLink,
     group: "WakaStart Blocks",
     keywords: ["embed", "figma", "youtube", "codesandbox", "loom", "iframe", "video"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createEmbedNodes } = require("./waka-embed-block")
-        editor.insertNodes(createEmbedNodes(""))
-      } catch { /* */ }
+      editor.insertNodes(createEmbedNodes(""))
     },
   },
   // Code Playground
@@ -181,18 +158,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "code-playground",
     label: "Code Playground",
     description: "Executable code block with console output",
-    icon: (() => {
-      const { Terminal } = require("lucide-react") as { Terminal: React.ComponentType<{ className?: string }> }
-      return Terminal
-    })(),
+    icon: Terminal,
     group: "WakaStart Blocks",
     keywords: ["code", "playground", "run", "execute", "terminal", "console", "sandbox"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createCodePlaygroundNodes } = require("./waka-code-playground-block")
-        editor.insertNodes(createCodePlaygroundNodes())
-      } catch { /* */ }
+      editor.insertNodes(createCodePlaygroundNodes())
     },
   },
   // Comment Thread
@@ -200,18 +171,12 @@ export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
     key: "comment-thread",
     label: "Comment Thread",
     description: "Inline discussion thread (like Google Docs)",
-    icon: (() => {
-      const { MessageSquare } = require("lucide-react") as { MessageSquare: React.ComponentType<{ className?: string }> }
-      return MessageSquare
-    })(),
+    icon: MessageSquare,
     group: "WakaStart Blocks",
     keywords: ["comment", "thread", "discussion", "review", "feedback", "note"],
     isCustom: true,
     action: (editor) => {
-      try {
-        const { createCommentThreadNodes } = require("./waka-comment-thread-block")
-        editor.insertNodes(createCommentThreadNodes())
-      } catch { /* */ }
+      editor.insertNodes(createCommentThreadNodes())
     },
   },
 ]
@@ -364,7 +329,7 @@ export function WakaSlashMenuBlock({
                     ? "border-primary/20 bg-primary/5"
                     : "border-border bg-background"
                 )}>
-                  {typeof Icon === "function" ? <Icon className="h-4 w-4" /> : Icon}
+                  <Icon className="h-4 w-4" />
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-1.5">

package/src/components/editor/index.ts

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-editor` (workspace package
+ * `packages/ui-editor`). 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-editor'
+ *
+ * @deprecated Moved to `@wakastellar/ui-editor` in v3.6 — core copy will be removed in v4.0.
+ */
 /**
  * WakaEditor — Plate.js rich text editor components for @wakastellar/ui
  *

package/src/components/editor/waka-floating-toolbar.tsx

@@ -43,6 +43,12 @@ export interface WakaFloatingToolbarProps {
   className?: string
   /** Whether to show in read-only mode */
   showWhenReadOnly?: boolean
+  /**
+   * Skip the runtime lazy-load of `@platejs/floating` and render a static
+   * (non-positioned) toolbar. Useful in stories/tests where no Plate editor
+   * is available and `useFloatingToolbar` would crash on the mock editor.
+   */
+  disableFloating?: boolean
 }
 
 // ─── Default buttons ─────────────────────────────────────────────────────────
@@ -140,6 +146,7 @@ export const WakaFloatingToolbar = React.forwardRef<HTMLDivElement, WakaFloating
       enableAI = false,
       onAIClick,
       className,
+      disableFloating = false,
     },
     ref
   ) => {
@@ -147,6 +154,7 @@ export const WakaFloatingToolbar = React.forwardRef<HTMLDivElement, WakaFloating
     const [floatingHook, setFloatingHook] = React.useState<any>(null)
 
     React.useEffect(() => {
+      if (disableFloating) return
       import("@platejs/floating")
         .then((mod) => {
           if (mod.useFloatingToolbar) {
@@ -156,7 +164,7 @@ export const WakaFloatingToolbar = React.forwardRef<HTMLDivElement, WakaFloating
         .catch(() => {
           // @platejs/floating not installed, use static fallback
         })
-    }, [])
+    }, [disableFloating])
 
     const allButtons = React.useMemo(() => {
       if (!enableAI) return buttons
@@ -172,15 +180,26 @@ export const WakaFloatingToolbar = React.forwardRef<HTMLDivElement, WakaFloating
       ]
     }, [buttons, enableAI, onAIClick])
 
-    // If floating hook is available, use it for positioning
-    // Otherwise render a static toolbar bar
+    // Two distinct components — one that calls the floating hook, one that
+    // doesn't — so React sees a stable hook list. Switching `floatingHook`
+    // between renders unmounts/remounts the right component.
+    if (floatingHook) {
+      return (
+        <FloatingToolbarPositioned
+          ref={ref}
+          editor={editor}
+          buttons={allButtons}
+          className={className}
+          floatingHook={floatingHook}
+        />
+      )
+    }
     return (
-      <FloatingToolbarContent
+      <FloatingToolbarStatic
         ref={ref}
         editor={editor}
         buttons={allButtons}
         className={className}
-        floatingHook={floatingHook}
       />
     )
   }
@@ -190,21 +209,97 @@ WakaFloatingToolbar.displayName = "WakaFloatingToolbar"
 
 // ─── Inner rendering ────────────────────────────────────────────────────────
 
-interface FloatingToolbarContentProps {
+interface FloatingToolbarBaseProps {
   editor: unknown
   buttons: FloatingToolbarButton[]
   className?: string
+}
+
+interface FloatingToolbarPositionedProps extends FloatingToolbarBaseProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   floatingHook: any
 }
 
-const FloatingToolbarContent = React.forwardRef<HTMLDivElement, FloatingToolbarContentProps>(
-  ({ editor, buttons, className, floatingHook }, ref) => {
-    // Use floating positioning if available
-    const floating = floatingHook
-      ? floatingHook({ editor })
-      : { ref: null, hidden: false, props: {} }
+function FloatingToolbarLayout({
+  toolbarRef,
+  toolbarProps,
+  hidden,
+  buttons,
+  editor,
+  className,
+}: {
+  toolbarRef: React.Ref<HTMLDivElement>
+  toolbarProps?: Record<string, unknown>
+  hidden?: boolean
+  buttons: FloatingToolbarButton[]
+  editor: unknown
+  className?: string
+}) {
+  if (hidden) return null
+  return (
+    <div
+      ref={toolbarRef}
+      {...(toolbarProps ?? {})}
+      className={cn(
+        "flex items-center gap-0.5 p-1",
+        "rounded-lg border bg-popover shadow-lg",
+        "animate-in fade-in-0 zoom-in-95",
+        className
+      )}
+      role="toolbar"
+      aria-label="Barre d'outils flottante"
+    >
+      {buttons.map((btn) => {
+        const active = btn.isActive?.(editor) ?? false
+        const Icon = btn.icon
+        const title = btn.shortcut ? `${btn.label} (${btn.shortcut})` : btn.label
+        return (
+          <button
+            key={btn.key}
+            type="button"
+            title={title}
+            aria-label={btn.label}
+            aria-pressed={active}
+            className={cn(
+              "inline-flex h-7 w-7 items-center justify-center rounded-md",
+              "text-sm transition-colors",
+              active
+                ? "bg-accent text-accent-foreground"
+                : "hover:bg-accent/50 text-foreground/70 hover:text-foreground"
+            )}
+            onMouseDown={(e) => {
+              e.preventDefault()
+              btn.action(editor)
+            }}
+          >
+            <Icon className="h-3.5 w-3.5" />
+          </button>
+        )
+      })}
+    </div>
+  )
+}
 
+// Static (no positioning hook) — calls zero hooks of its own beyond useCallback.
+const FloatingToolbarStatic = React.forwardRef<HTMLDivElement, FloatingToolbarBaseProps>(
+  ({ editor, buttons, className }, ref) => {
+    return (
+      <FloatingToolbarLayout
+        toolbarRef={ref}
+        buttons={buttons}
+        editor={editor}
+        className={className}
+      />
+    )
+  }
+)
+FloatingToolbarStatic.displayName = "FloatingToolbarStatic"
+
+// Positioned — always calls floatingHook. Mounted only when a hook is supplied,
+// so its hook list is stable across all renders of THIS component.
+const FloatingToolbarPositioned = React.forwardRef<HTMLDivElement, FloatingToolbarPositionedProps>(
+  ({ editor, buttons, className, floatingHook }, ref) => {
+    const floating = floatingHook({ editor })
     const mergedRef = React.useCallback(
       (node: HTMLDivElement | null) => {
         if (typeof ref === "function") ref(node)
@@ -216,53 +311,16 @@ const FloatingToolbarContent = React.forwardRef<HTMLDivElement, FloatingToolbarC
       },
       [ref, floating.ref]
     )
-
-    if (floating.hidden) return null
-
     return (
-      <div
-        ref={mergedRef}
-        {...floating.props}
-        className={cn(
-          "flex items-center gap-0.5 p-1",
-          "rounded-lg border bg-popover shadow-lg",
-          "animate-in fade-in-0 zoom-in-95",
-          className
-        )}
-        role="toolbar"
-        aria-label="Barre d'outils flottante"
-      >
-        {buttons.map((btn, i) => {
-          const active = btn.isActive?.(editor) ?? false
-          const Icon = btn.icon
-          const title = btn.shortcut ? `${btn.label} (${btn.shortcut})` : btn.label
-
-          return (
-            <button
-              key={btn.key}
-              type="button"
-              title={title}
-              aria-label={btn.label}
-              aria-pressed={active}
-              className={cn(
-                "inline-flex h-7 w-7 items-center justify-center rounded-md",
-                "text-sm transition-colors",
-                active
-                  ? "bg-accent text-accent-foreground"
-                  : "hover:bg-accent/50 text-foreground/70 hover:text-foreground"
-              )}
-              onMouseDown={(e) => {
-                e.preventDefault() // Keep selection
-                btn.action(editor)
-              }}
-            >
-              <Icon className="h-3.5 w-3.5" />
-            </button>
-          )
-        })}
-      </div>
+      <FloatingToolbarLayout
+        toolbarRef={mergedRef}
+        toolbarProps={floating.props}
+        hidden={floating.hidden}
+        buttons={buttons}
+        editor={editor}
+        className={className}
+      />
     )
   }
 )
-
-FloatingToolbarContent.displayName = "FloatingToolbarContent"
+FloatingToolbarPositioned.displayName = "FloatingToolbarPositioned"

package/src/components/error-boundary/ErrorBoundary.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './ErrorBoundary.stories'
+
+<Meta of={Stories} />
+
+# ErrorBoundary
+
+Error Boundary component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { ErrorBoundary } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add error-boundary`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Custom Fallback
+
+<Canvas of={Stories.WithCustomFallback} />
+
+### With Component Name
+
+<Canvas of={Stories.WithComponentName} />
+
+
+## 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/error-boundary.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/error-boundary/ErrorBoundary.stories.tsx

@@ -67,7 +67,6 @@ const meta: Meta<typeof ErrorBoundary> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     componentName: {
       control: "text",
@@ -84,7 +83,7 @@ export default meta
 type Story = StoryObj<typeof ErrorBoundary>
 
 export const Default: Story = {
-  render: () => <ErrorBoundaryDemo />,
+  render: (args) => <ErrorBoundaryDemo {...args} />,
 }
 
 export const WithCustomFallback: Story = {

package/src/components/form/Form.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Form.stories'
+
+<Meta of={Stories} />
+
+# Form
+
+react-hook-form integration layer with FormField, FormControl, FormMessage, and contextual error rendering.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Form } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add form`} />
+
+## Usage
+
+<Canvas of={Stories.LoginForm} />
+
+<Controls of={Stories.LoginForm} />
+
+## Examples
+
+### Contact Form
+
+<Canvas of={Stories.ContactForm} />
+
+### Profile Form
+
+<Canvas of={Stories.ProfileForm} />
+
+### Settings Form
+
+<Canvas of={Stories.SettingsForm} />
+
+### Newsletter Form
+
+<Canvas of={Stories.NewsletterForm} />
+
+### Delete Account Form
+
+<Canvas of={Stories.DeleteAccountForm} />
+
+### Feedback Form
+
+<Canvas of={Stories.FeedbackForm} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.LoginForm} />
+
+## 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/form.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)