@wakastellar/ui 3.2.0 → 3.3.2

package/src/blocks/profile/index.tsx

@@ -33,11 +33,13 @@ import {
   X,
   Loader2,
   Link as LinkIcon,
-  Twitter,
-  Github,
-  Linkedin,
 } from "lucide-react"
 
+// Inline SVG for renamed/removed lucide icons
+const Twitter = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
+const Github = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
+const Linkedin = (props: any) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
+
 // ============================================
 // TYPES
 // ============================================

package/src/blocks/waka-doc-shell/WakaDocShell.stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocShell } from './index'
+import * as React from 'react'
+import { BookOpen, Code, Palette, Zap, Settings } from 'lucide-react'
+
+const meta: Meta<typeof WakaDocShell> = {
+  title: 'Blocks/WakaDocShell',
+  component: WakaDocShell,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Full documentation layout block combining sidebar navigation, search, version selector, content renderer/editor, toolbar, breadcrumbs, and table of contents. Supports view and edit modes.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocShell>
+
+const sampleMarkdown = `# Installation Guide
+
+Welcome to the **Wakastart UI** installation guide.
+
+## Prerequisites
+
+Make sure you have the following installed:
+
+- Node.js 18+
+- pnpm 8+
+
+## Installation
+
+Install the core package:
+
+\`\`\`bash
+pnpm add @wakastellar/ui
+\`\`\`
+
+For documentation components, also install:
+
+\`\`\`bash
+pnpm add react-markdown remark-gfm rehype-slug rehype-raw
+\`\`\`
+
+## Configuration
+
+### Tailwind CSS
+
+Add the preset to your Tailwind config:
+
+\`\`\`typescript
+import preset from "@wakastellar/ui/tailwind-preset"
+
+export default {
+  presets: [preset],
+  content: [
+    "./node_modules/@wakastellar/ui/dist/**/*.js",
+  ],
+}
+\`\`\`
+
+### Theme Setup
+
+Wrap your app with the ThemeProvider:
+
+\`\`\`typescript
+import { ThemeProvider } from "@wakastellar/ui"
+
+export default function App({ children }) {
+  return (
+    <ThemeProvider defaultTheme="default">
+      {children}
+    </ThemeProvider>
+  )
+}
+\`\`\`
+
+> [!tip]
+> You can use any of the built-in themes: default, forest, twilight, sunset, monochrome.
+
+## Next Steps
+
+| Topic | Description |
+|-------|-------------|
+| Components | Browse all available components |
+| Theming | Customize colors and styles |
+| API Reference | Detailed props documentation |
+
+> [!info]
+> Check out the Storybook for interactive examples of all components.
+`
+
+const navItems = [
+  {
+    id: 'getting-started',
+    label: 'Getting Started',
+    icon: <Zap className="h-4 w-4" />,
+    children: [
+      { id: 'installation', label: 'Installation' },
+      { id: 'quick-start', label: 'Quick Start' },
+      { id: 'configuration', label: 'Configuration' },
+    ],
+  },
+  {
+    id: 'components',
+    label: 'Components',
+    icon: <Code className="h-4 w-4" />,
+    badge: '10',
+    children: [
+      { id: 'doc-renderer', label: 'DocRenderer' },
+      { id: 'doc-code-block', label: 'DocCodeBlock' },
+      { id: 'doc-callout', label: 'DocCallout' },
+      { id: 'doc-toc', label: 'DocToc' },
+      { id: 'doc-nav', label: 'DocNav' },
+    ],
+  },
+  {
+    id: 'theming',
+    label: 'Theming',
+    icon: <Palette className="h-4 w-4" />,
+    children: [
+      { id: 'colors', label: 'Colors' },
+      { id: 'dark-mode', label: 'Dark Mode' },
+    ],
+  },
+  { id: 'api', label: 'API Reference', icon: <BookOpen className="h-4 w-4" /> },
+  { id: 'settings', label: 'Settings', icon: <Settings className="h-4 w-4" /> },
+]
+
+const searchPages = [
+  { id: '1', title: 'Installation', content: 'Install the package using pnpm add @wakastellar/ui.', category: 'Getting Started' },
+  { id: '2', title: 'Components', content: 'Browse all available documentation components.', category: 'Components' },
+  { id: '3', title: 'Theming', content: 'Customize colors using built-in themes or create your own.', category: 'Customization' },
+]
+
+const versions = [
+  { id: 'v4.0.0', label: 'v4.0.0', status: 'latest' as const },
+  { id: 'v3.1.0', label: 'v3.1.0', status: 'stable' as const },
+  { id: 'v3.0.0', label: 'v3.0.0' },
+]
+
+export const ViewMode: Story = {
+  render: () => (
+    <WakaDocShell
+      content={sampleMarkdown}
+      mode="view"
+      canEdit={true}
+      navItems={navItems}
+      activePageId="installation"
+      searchPages={searchPages}
+      versions={versions}
+      currentVersion="v4.0.0"
+      breadcrumbs={[
+        { id: 'docs', label: 'Documentation' },
+        { id: 'getting-started', label: 'Getting Started' },
+        { id: 'installation', label: 'Installation' },
+      ]}
+      onPageChange={(item) => console.log('Navigate:', item.id)}
+      onVersionChange={(v) => console.log('Version:', v)}
+    />
+  ),
+}
+
+export const EditMode: Story = {
+  render: () => {
+    const [content, setContent] = React.useState(sampleMarkdown)
+    const [mode, setMode] = React.useState<"view" | "edit">("edit")
+    return (
+      <WakaDocShell
+        content={content}
+        mode={mode}
+        canEdit={true}
+        onModeChange={setMode}
+        onChange={setContent}
+        saveStatus="saved"
+        navItems={navItems}
+        activePageId="installation"
+        breadcrumbs={[
+          { id: 'docs', label: 'Documentation' },
+          { id: 'installation', label: 'Installation' },
+        ]}
+      />
+    )
+  },
+}
+
+export const MinimalViewOnly: Story = {
+  render: () => (
+    <WakaDocShell
+      content={sampleMarkdown}
+      mode="view"
+      canEdit={false}
+    />
+  ),
+}

package/src/blocks/waka-doc-shell/index.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { WakaDocRenderer } from "../../components/waka-doc-renderer"
+import { WakaDocToc, type TocItem } from "../../components/waka-doc-toc"
+import { WakaDocNav } from "../../components/waka-doc-nav"
+import { WakaDocSearch } from "../../components/waka-doc-search"
+import { WakaDocVersion } from "../../components/waka-doc-version"
+import { WakaDocToolbar } from "../../components/waka-doc-toolbar"
+import { WakaDocBreadcrumb } from "../../components/waka-doc-breadcrumb"
+import { Menu, X } from "lucide-react"
+import { Button } from "../../components/button"
+import type { WakaDocShellProps } from "./types"
+
+export type { WakaDocShellProps }
+
+export function WakaDocShell({
+  content,
+  mode = "view",
+  canEdit = false,
+  onModeChange,
+  onChange,
+  debounceMs = 1500,
+  saveStatus = "idle",
+  navItems,
+  activePageId,
+  onPageChange,
+  breadcrumbs,
+  onBreadcrumbClick,
+  searchPages,
+  onSearchSelect,
+  versions,
+  currentVersion,
+  onVersionChange,
+  className,
+}: WakaDocShellProps) {
+  const [tocItems, setTocItems] = React.useState<TocItem[]>([])
+  const [sidebarOpen, setSidebarOpen] = React.useState(false)
+  const [editorContent, setEditorContent] = React.useState(content)
+
+  // Sync content externe
+  React.useEffect(() => {
+    setEditorContent(content)
+  }, [content])
+
+  // Debounce onChange
+  const debounceRef = React.useRef<ReturnType<typeof setTimeout>>()
+  const handleEditorChange = React.useCallback(
+    (html: string) => {
+      setEditorContent(html)
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(() => {
+        onChange?.(html)
+      }, debounceMs)
+    },
+    [onChange, debounceMs]
+  )
+
+  React.useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+    }
+  }, [])
+
+  const hasSidebar = navItems && navItems.length > 0
+  const hasSearch = searchPages && searchPages.length > 0
+  const hasVersions = versions && versions.length > 0 && currentVersion
+
+  return (
+    <div className={cn("relative flex min-h-screen", className)}>
+      {/* Sidebar mobile toggle */}
+      {hasSidebar && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="fixed left-4 top-4 z-50 lg:hidden"
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+        >
+          {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </Button>
+      )}
+
+      {/* Sidebar */}
+      {hasSidebar && (
+        <aside
+          className={cn(
+            "fixed inset-y-0 left-0 z-40 w-72 shrink-0 border-r border-border/50 bg-background/95 backdrop-blur-md transition-transform duration-300 lg:relative lg:translate-x-0",
+            sidebarOpen ? "translate-x-0" : "-translate-x-full"
+          )}
+        >
+          <div className="flex h-full flex-col gap-4 overflow-y-auto p-4">
+            {hasSearch && (
+              <WakaDocSearch
+                pages={searchPages}
+                onSelect={(page) => {
+                  onSearchSelect?.(page)
+                  setSidebarOpen(false)
+                }}
+              />
+            )}
+            {hasVersions && (
+              <WakaDocVersion
+                versions={versions}
+                current={currentVersion}
+                onVersionChange={onVersionChange!}
+              />
+            )}
+            <WakaDocNav
+              items={navItems}
+              activeId={activePageId}
+              onItemClick={(item) => {
+                onPageChange?.(item)
+                setSidebarOpen(false)
+              }}
+            />
+          </div>
+        </aside>
+      )}
+
+      {/* Overlay mobile */}
+      {hasSidebar && sidebarOpen && (
+        <div
+          className="fixed inset-0 z-30 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Main content */}
+      <main className="flex min-w-0 flex-1 gap-8">
+        <div className="mx-auto w-full max-w-3xl px-4 py-8 lg:px-8">
+          {/* Header */}
+          <div className="mb-6 flex flex-col gap-3">
+            {breadcrumbs && breadcrumbs.length > 0 && (
+              <WakaDocBreadcrumb items={breadcrumbs} onItemClick={onBreadcrumbClick} />
+            )}
+            <WakaDocToolbar
+              content={editorContent}
+              mode={mode}
+              canEdit={canEdit}
+              onModeChange={onModeChange}
+              saveStatus={saveStatus}
+            />
+          </div>
+
+          {/* Contenu */}
+          {mode === "view" ? (
+            <WakaDocRenderer
+              content={editorContent}
+              onHeadingsExtracted={setTocItems}
+            />
+          ) : (
+            <DocEditor
+              content={editorContent}
+              onChange={handleEditorChange}
+              onHeadingsExtracted={setTocItems}
+            />
+          )}
+        </div>
+
+        {/* TOC - desktop only */}
+        {tocItems.length > 0 && (
+          <aside className="hidden w-56 shrink-0 py-8 xl:block">
+            <WakaDocToc items={tocItems} />
+          </aside>
+        )}
+      </main>
+    </div>
+  )
+}
+
+/**
+ * Éditeur interne — charge WakaRichTextEditor dynamiquement
+ */
+function DocEditor({
+  content,
+  onChange,
+  onHeadingsExtracted,
+}: {
+  content: string
+  onChange: (content: string) => void
+  onHeadingsExtracted: (items: TocItem[]) => void
+}) {
+  const [EditorComponent, setEditorComponent] = React.useState<React.ComponentType<{
+    value?: string
+    onChange?: (html: string) => void
+    placeholder?: string
+    minHeight?: number
+    editable?: boolean
+  }> | null>(null)
+
+  React.useEffect(() => {
+    const load = async () => {
+      try {
+        const { WakaRichTextEditor } = await import("../../components/waka-rich-text-editor")
+        setEditorComponent(() => WakaRichTextEditor)
+      } catch {
+        // Tiptap not available
+      }
+    }
+    load()
+  }, [])
+
+  // Extraire les headings pour le TOC pendant l'édition
+  React.useEffect(() => {
+    const headings: TocItem[] = []
+    const lines = content.split("\n")
+    for (const line of lines) {
+      const match = line.match(/^(#{2,4})\s+(.+)$/)
+      if (match) {
+        const level = match[1].length
+        const text = match[2].replace(/[`*_~]/g, "")
+        const id = text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-")
+        headings.push({ id, text, level })
+      }
+    }
+    onHeadingsExtracted(headings)
+  }, [content, onHeadingsExtracted])
+
+  if (!EditorComponent) {
+    return (
+      <textarea
+        value={content}
+        onChange={(e) => onChange(e.target.value)}
+        className="min-h-[400px] w-full rounded-lg border border-border/50 bg-background p-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+        placeholder="Écrivez en markdown..."
+      />
+    )
+  }
+
+  return (
+    <EditorComponent
+      value={content}
+      onChange={onChange}
+      placeholder="Écrivez votre documentation..."
+      minHeight={400}
+      editable
+    />
+  )
+}

package/src/blocks/waka-doc-shell/types.ts

@@ -0,0 +1,40 @@
+import type { DocNavItem } from "../../components/waka-doc-nav"
+import type { DocSearchPage } from "../../components/waka-doc-search"
+import type { DocVersion } from "../../components/waka-doc-version"
+import type { BreadcrumbItem } from "../../components/waka-doc-breadcrumb"
+import type { SaveStatus } from "../../components/waka-doc-toolbar"
+
+export interface WakaDocShellProps {
+  /** Contenu markdown à afficher/éditer */
+  content: string
+  /** Mode d'affichage */
+  mode?: "view" | "edit"
+  /** L'utilisateur peut-il basculer en mode édition */
+  canEdit?: boolean
+  /** Callback changement de mode */
+  onModeChange?: (mode: "view" | "edit") => void
+  /** Callback changement de contenu (mode edit, debounced) */
+  onChange?: (content: string) => void
+  /** Délai debounce en ms */
+  debounceMs?: number
+  /** Statut de sauvegarde */
+  saveStatus?: SaveStatus
+
+  // Navigation
+  navItems?: DocNavItem[]
+  activePageId?: string
+  onPageChange?: (item: DocNavItem) => void
+  breadcrumbs?: BreadcrumbItem[]
+  onBreadcrumbClick?: (item: BreadcrumbItem) => void
+
+  // Recherche
+  searchPages?: DocSearchPage[]
+  onSearchSelect?: (page: DocSearchPage) => void
+
+  // Versioning
+  versions?: DocVersion[]
+  currentVersion?: string
+  onVersionChange?: (versionId: string) => void
+
+  className?: string
+}

package/src/components/index.ts

@@ -690,3 +690,49 @@ export {
   type OverlayPosition,
   type OverlayTrigger,
 } from './waka-video-overlay'
+
+// Credit Management Components
+export * from './waka-credit-balance'
+export * from './waka-credit-meter'
+export * from './waka-credit-quota'
+export * from './waka-credit-alert'
+export * from './waka-credit-transaction'
+export * from './waka-credit-history'
+export * from './waka-credit-activity-feed'
+export * from './waka-credit-usage-chart'
+export * from './waka-credit-burn-rate'
+export * from './waka-credit-breakdown'
+export * from './waka-credit-projection'
+export * from './waka-credit-pricing-pack'
+export * from './waka-credit-top-up'
+export * from './waka-credit-receipt'
+export * from './waka-credit-transfer-form'
+
+// Documentation Components
+export * from './waka-doc-callout'
+export * from './waka-doc-code-block'
+export * from './waka-doc-toc'
+export * from './waka-doc-nav'
+export * from './waka-doc-search'
+export * from './waka-doc-version'
+export * from './waka-doc-toolbar'
+// waka-doc-breadcrumb: BreadcrumbItem conflicts with waka-breadcrumb, re-export only the component
+export { WakaDocBreadcrumb, type WakaDocBreadcrumbProps } from './waka-doc-breadcrumb'
+export * from './waka-doc-table'
+export * from './waka-doc-renderer'
+
+// WakaProject Sprint Components
+export * from './waka-hour-balance-badge'
+export * from './waka-actor-badge'
+export * from './waka-step-comment-bubble'
+export * from './waka-step-comment-panel'
+export * from './waka-time-entry-dialog'
+export * from './waka-time-tracking-flyover'
+export * from './waka-document-preview-popup'
+export * from './waka-document-flyover'
+export * from './waka-ai-assistant-button'
+export * from './waka-step-permission-matrix'
+export * from './waka-actors-list'
+export * from './waka-project-stats-header'
+export * from './waka-hour-pack-dialog'
+export * from './waka-hour-consumption-table'

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

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+const WAKA_ROLES = ["CW", "SW", "IW", "LW", "DW", "TW", "AW", "BW", "FW", "EW"]
+
+export interface ActorBadgeProps {
+  role: string
+  name?: string
+  isPrimary?: boolean
+  className?: string
+}
+
+function ActorBadge({ role, name, isPrimary, className }: ActorBadgeProps) {
+  const isWaka = WAKA_ROLES.includes(role)
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
+        isWaka
+          ? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
+          : "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+        className,
+      )}
+    >
+      <span className="font-bold">{role}</span>
+      {name && <span className="font-normal truncate max-w-[120px]">{name}</span>}
+      {isPrimary && <span className="text-amber-500" aria-label="Principal">&#9733;</span>}
+    </span>
+  )
+}
+
+export { ActorBadge }