@wakastellar/ui 3.1.0 → 3.3.0

package/src/components/waka-doc-search/WakaDocSearch.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocSearch } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDocSearch> = {
+  title: 'Components/Documentation/WakaDocSearch',
+  component: WakaDocSearch,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Full-text search for documentation with Ctrl+K shortcut, keyboard navigation, and result highlighting.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocSearch>
+
+const samplePages = [
+  {
+    id: '1',
+    title: 'Installation',
+    content: 'Install the package using pnpm: pnpm add @wakastellar/ui. Then import the components you need.',
+    category: 'Getting Started',
+  },
+  {
+    id: '2',
+    title: 'WakaDocRenderer',
+    content: 'The WakaDocRenderer component converts markdown content into styled React components with syntax highlighting.',
+    category: 'Components',
+  },
+  {
+    id: '3',
+    title: 'Theming',
+    content: 'Wakastart supports multiple themes including forest, twilight, sunset, and monochrome. Use the ThemeProvider to switch themes.',
+    category: 'Customization',
+  },
+  {
+    id: '4',
+    title: 'Dark Mode',
+    content: 'Dark mode is supported via the .dark class on the root element. All components adapt automatically.',
+    category: 'Customization',
+  },
+  {
+    id: '5',
+    title: 'API Reference',
+    content: 'Complete API reference for all documentation components including props, types, and examples.',
+    category: 'Reference',
+  },
+]
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaDocSearch
+        pages={samplePages}
+        onSelect={(page) => console.log('Selected:', page.title)}
+      />
+    </div>
+  ),
+}

package/src/components/waka-doc-search/index.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Search } from "lucide-react"
+import { Input } from "../input"
+
+export interface DocSearchPage {
+  id: string
+  title: string
+  content: string
+  category?: string
+  href?: string
+}
+
+export interface DocSearchResult {
+  page: DocSearchPage
+  snippet: string
+}
+
+export interface WakaDocSearchProps {
+  pages: DocSearchPage[]
+  onSelect?: (page: DocSearchPage) => void
+  placeholder?: string
+  className?: string
+}
+
+export function WakaDocSearch({
+  pages,
+  onSelect,
+  placeholder = "Rechercher dans la documentation...",
+  className,
+}: WakaDocSearchProps) {
+  const [query, setQuery] = React.useState("")
+  const [results, setResults] = React.useState<DocSearchResult[]>([])
+  const [open, setOpen] = React.useState(false)
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  // Raccourci clavier Ctrl+K / Cmd+K
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault()
+        inputRef.current?.focus()
+        setOpen(true)
+      }
+      if (e.key === "Escape") {
+        setOpen(false)
+        setQuery("")
+      }
+    }
+    document.addEventListener("keydown", handler)
+    return () => document.removeEventListener("keydown", handler)
+  }, [])
+
+  // Recherche
+  React.useEffect(() => {
+    if (!query.trim()) {
+      setResults([])
+      return
+    }
+
+    const q = query.toLowerCase()
+    const found: DocSearchResult[] = []
+
+    for (const page of pages) {
+      const titleMatch = page.title.toLowerCase().includes(q)
+      const contentIdx = page.content.toLowerCase().indexOf(q)
+
+      if (titleMatch || contentIdx !== -1) {
+        const start = Math.max(0, contentIdx - 40)
+        const end = Math.min(page.content.length, contentIdx + query.length + 40)
+        const snippet = contentIdx !== -1
+          ? (start > 0 ? "..." : "") + page.content.slice(start, end) + (end < page.content.length ? "..." : "")
+          : page.content.slice(0, 80) + "..."
+
+        found.push({ page, snippet })
+      }
+    }
+
+    setResults(found.slice(0, 8))
+    setSelectedIndex(0)
+  }, [query, pages])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.min(i + 1, results.length - 1))
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === "Enter" && results[selectedIndex]) {
+      onSelect?.(results[selectedIndex].page)
+      setOpen(false)
+      setQuery("")
+    }
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          ref={inputRef}
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value)
+            setOpen(true)
+          }}
+          onFocus={() => query && setOpen(true)}
+          onBlur={() => setTimeout(() => setOpen(false), 200)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="pl-9 pr-16"
+        />
+        <kbd className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border/50 bg-muted/50 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+          Ctrl K
+        </kbd>
+      </div>
+
+      {/* Résultats */}
+      {open && results.length > 0 && (
+        <div className="absolute top-full z-50 mt-2 w-full overflow-hidden rounded-lg border border-border/50 bg-background/95 shadow-lg backdrop-blur-md">
+          {results.map((result, i) => (
+            <button
+              key={result.page.id}
+              onMouseDown={() => {
+                onSelect?.(result.page)
+                setOpen(false)
+                setQuery("")
+              }}
+              className={cn(
+                "flex w-full flex-col gap-1 px-4 py-3 text-left transition-colors",
+                i === selectedIndex ? "bg-primary/10" : "hover:bg-muted/50",
+                i > 0 && "border-t border-border/30"
+              )}
+            >
+              <span className="text-sm font-medium">{result.page.title}</span>
+              {result.page.category && (
+                <span className="text-xs text-muted-foreground">{result.page.category}</span>
+              )}
+              <span className="line-clamp-1 text-xs text-muted-foreground/70">
+                {result.snippet}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {open && query && results.length === 0 && (
+        <div className="absolute top-full z-50 mt-2 w-full rounded-lg border border-border/50 bg-background/95 p-4 text-center text-sm text-muted-foreground shadow-lg backdrop-blur-md">
+          Aucun résultat pour &quot;{query}&quot;
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/waka-doc-table/WakaDocTable.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocTable } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDocTable> = {
+  title: 'Components/Documentation/WakaDocTable',
+  component: WakaDocTable,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Styled table wrapper for documentation with striped rows, hover effects, and optional sticky header.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    stickyHeader: { control: 'boolean' },
+    striped: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocTable>
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaDocTable {...args}>
+        <thead>
+          <tr>
+            <th>Composant</th>
+            <th>Description</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>WakaDocRenderer</td><td>Markdown rendering</td><td>Stable</td></tr>
+          <tr><td>WakaDocNav</td><td>Sidebar navigation</td><td>Stable</td></tr>
+          <tr><td>WakaDocSearch</td><td>Full-text search</td><td>Beta</td></tr>
+          <tr><td>WakaDocToc</td><td>Table of contents</td><td>Stable</td></tr>
+          <tr><td>WakaDocVersion</td><td>Version selector</td><td>Stable</td></tr>
+        </tbody>
+      </WakaDocTable>
+    </div>
+  ),
+}

package/src/components/waka-doc-table/index.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+
+export interface WakaDocTableProps {
+  children: React.ReactNode
+  stickyHeader?: boolean
+  striped?: boolean
+  className?: string
+}
+
+export function WakaDocTable({
+  children,
+  stickyHeader = false,
+  striped = true,
+  className,
+}: WakaDocTableProps) {
+  return (
+    <div className={cn("my-4 overflow-x-auto rounded-lg border border-border/50", className)}>
+      <table
+        className={cn(
+          "w-full text-sm",
+          striped && "[&_tbody_tr:nth-child(even)]:bg-muted/30",
+          stickyHeader && "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-10",
+          "[&_thead]:bg-muted/50 [&_thead]:backdrop-blur-sm",
+          "[&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-semibold [&_th]:text-foreground/80",
+          "[&_td]:px-4 [&_td]:py-3 [&_td]:text-foreground/70",
+          "[&_tr]:border-b [&_tr]:border-border/30 [&_tbody_tr:last-child]:border-0",
+          "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/50"
+        )}
+      >
+        {children}
+      </table>
+    </div>
+  )
+}

package/src/components/waka-doc-toc/WakaDocToc.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocToc } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDocToc> = {
+  title: 'Components/Documentation/WakaDocToc',
+  component: WakaDocToc,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Sticky table of contents with scroll spy, smooth scrolling, and a glowing active indicator.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocToc>
+
+const sampleItems = [
+  { id: 'getting-started', text: 'Getting Started', level: 2 },
+  { id: 'installation', text: 'Installation', level: 3 },
+  { id: 'configuration', text: 'Configuration', level: 3 },
+  { id: 'api-reference', text: 'API Reference', level: 2 },
+  { id: 'props', text: 'Props', level: 3 },
+  { id: 'methods', text: 'Methods', level: 3 },
+  { id: 'events', text: 'Events', level: 3 },
+  { id: 'examples', text: 'Examples', level: 2 },
+  { id: 'basic-usage', text: 'Basic Usage', level: 3 },
+  { id: 'advanced', text: 'Advanced', level: 3 },
+]
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+    activeId: 'configuration',
+  },
+}
+
+export const DeepNesting: Story = {
+  args: {
+    items: [
+      { id: 'overview', text: 'Overview', level: 2 },
+      { id: 'architecture', text: 'Architecture', level: 3 },
+      { id: 'components', text: 'Components', level: 4 },
+      { id: 'hooks', text: 'Hooks', level: 4 },
+      { id: 'setup', text: 'Setup', level: 2 },
+      { id: 'prerequisites', text: 'Prerequisites', level: 3 },
+    ],
+    activeId: 'components',
+  },
+}

package/src/components/waka-doc-toc/index.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+
+export interface TocItem {
+  id: string
+  text: string
+  level: number
+}
+
+export interface WakaDocTocProps {
+  items: TocItem[]
+  activeId?: string
+  className?: string
+}
+
+export function WakaDocToc({ items, activeId, className }: WakaDocTocProps) {
+  const [currentId, setCurrentId] = React.useState(activeId || "")
+
+  // Intersection observer pour détecter la section active
+  React.useEffect(() => {
+    if (activeId !== undefined) return // Contrôlé par le parent
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setCurrentId(entry.target.id)
+            break
+          }
+        }
+      },
+      { rootMargin: "-80px 0px -80% 0px", threshold: 0 }
+    )
+
+    for (const item of items) {
+      const el = document.getElementById(item.id)
+      if (el) observer.observe(el)
+    }
+
+    return () => observer.disconnect()
+  }, [items, activeId])
+
+  const active = activeId ?? currentId
+
+  if (items.length === 0) return null
+
+  return (
+    <nav className={cn("sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto", className)}>
+      <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        Sur cette page
+      </p>
+      <ul className="relative space-y-1 border-l border-border/50">
+        {items.map((item) => {
+          const isActive = active === item.id
+          return (
+            <li key={item.id}>
+              <a
+                href={`#${item.id}`}
+                onClick={(e) => {
+                  e.preventDefault()
+                  document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" })
+                  setCurrentId(item.id)
+                }}
+                className={cn(
+                  "relative block py-1 text-sm transition-all duration-200",
+                  item.level === 2 && "pl-4",
+                  item.level === 3 && "pl-7",
+                  item.level === 4 && "pl-10",
+                  isActive
+                    ? "font-medium text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {/* Indicateur lumineux actif */}
+                {isActive && (
+                  <span
+                    className="absolute -left-px top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-primary shadow-[0_0_8px_var(--color-primary)]"
+                  />
+                )}
+                {item.text}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

package/src/components/waka-doc-toolbar/WakaDocToolbar.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocToolbar } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDocToolbar> = {
+  title: 'Components/Documentation/WakaDocToolbar',
+  component: WakaDocToolbar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Documentation toolbar with copy, download (MD/PDF), edit/view toggle, and auto-save status indicator.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: { control: 'select', options: ['view', 'edit'] },
+    canEdit: { control: 'boolean' },
+    saveStatus: { control: 'select', options: ['idle', 'saving', 'saved', 'error'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocToolbar>
+
+const sampleMarkdown = '# Hello World\n\nThis is a sample markdown document.\n\n## Features\n\n- Copy to clipboard\n- Download as .md\n- Download as .pdf'
+
+export const ViewMode: Story = {
+  args: {
+    content: sampleMarkdown,
+    mode: 'view',
+    canEdit: false,
+  },
+}
+
+export const EditableViewMode: Story = {
+  args: {
+    content: sampleMarkdown,
+    mode: 'view',
+    canEdit: true,
+  },
+}
+
+export const EditMode: Story = {
+  args: {
+    content: sampleMarkdown,
+    mode: 'edit',
+    canEdit: true,
+    saveStatus: 'idle',
+  },
+}
+
+export const Saving: Story = {
+  args: {
+    content: sampleMarkdown,
+    mode: 'edit',
+    canEdit: true,
+    saveStatus: 'saving',
+  },
+}
+
+export const Saved: Story = {
+  args: {
+    content: sampleMarkdown,
+    mode: 'edit',
+    canEdit: true,
+    saveStatus: 'saved',
+  },
+}
+
+export const SaveError: Story = {
+  args: {
+    content: sampleMarkdown,
+    mode: 'edit',
+    canEdit: true,
+    saveStatus: 'error',
+  },
+}

package/src/components/waka-doc-toolbar/index.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../button"
+import { Separator } from "../separator"
+import {
+  Copy,
+  Check,
+  Download,
+  FileText,
+  Pencil,
+  Eye,
+  Loader2,
+  CheckCircle2,
+  AlertCircle,
+} from "lucide-react"
+
+export type SaveStatus = "idle" | "saving" | "saved" | "error"
+
+export interface WakaDocToolbarProps {
+  content: string
+  mode?: "view" | "edit"
+  canEdit?: boolean
+  onModeChange?: (mode: "view" | "edit") => void
+  saveStatus?: SaveStatus
+  className?: string
+}
+
+export function WakaDocToolbar({
+  content,
+  mode = "view",
+  canEdit = false,
+  onModeChange,
+  saveStatus = "idle",
+  className,
+}: WakaDocToolbarProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {}
+  }
+
+  const handleDownloadMd = () => {
+    const blob = new Blob([content], { type: "text/markdown" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "document.md"
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const handleDownloadPdf = async () => {
+    try {
+      const { default: jsPDF } = await import("jspdf")
+      const doc = new jsPDF()
+      const lines = doc.splitTextToSize(content, 180)
+      doc.setFontSize(10)
+      doc.text(lines, 15, 15)
+      doc.save("document.pdf")
+    } catch {
+      // jspdf not available, fallback print
+      window.print()
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1 rounded-lg border border-border/50 bg-background/80 px-2 py-1 backdrop-blur-sm",
+        className
+      )}
+    >
+      {/* Copy */}
+      <Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs" onClick={handleCopy}>
+        {copied ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />}
+        {copied ? "Copié" : "Copier"}
+      </Button>
+
+      <Separator orientation="vertical" className="mx-1 h-5" />
+
+      {/* Download MD */}
+      <Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs" onClick={handleDownloadMd}>
+        <Download className="h-3.5 w-3.5" />
+        .md
+      </Button>
+
+      {/* Download PDF */}
+      <Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs" onClick={handleDownloadPdf}>
+        <FileText className="h-3.5 w-3.5" />
+        .pdf
+      </Button>
+
+      {/* Edit/View toggle */}
+      {canEdit && (
+        <>
+          <Separator orientation="vertical" className="mx-1 h-5" />
+          <Button
+            variant={mode === "edit" ? "secondary" : "ghost"}
+            size="sm"
+            className="h-7 gap-1.5 text-xs"
+            onClick={() => onModeChange?.(mode === "edit" ? "view" : "edit")}
+          >
+            {mode === "edit" ? (
+              <><Eye className="h-3.5 w-3.5" />Visualiser</>
+            ) : (
+              <><Pencil className="h-3.5 w-3.5" />Modifier</>
+            )}
+          </Button>
+
+          {/* Save status indicator */}
+          {mode === "edit" && saveStatus !== "idle" && (
+            <>
+              <Separator orientation="vertical" className="mx-1 h-5" />
+              <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                {saveStatus === "saving" && <><Loader2 className="h-3 w-3 animate-spin" />Sauvegarde...</>}
+                {saveStatus === "saved" && <><CheckCircle2 className="h-3 w-3 text-emerald-500" />Sauvegardé</>}
+                {saveStatus === "error" && <><AlertCircle className="h-3 w-3 text-destructive" />Erreur</>}
+              </span>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  )
+}