@wakastellar/ui 3.2.0 → 3.3.0

package/src/components/waka-doc-code-block/index.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Copy, Check, FileCode } from "lucide-react"
+import { Button } from "../button"
+import Prism from "prismjs"
+import "prismjs/components/prism-typescript"
+import "prismjs/components/prism-javascript"
+import "prismjs/components/prism-jsx"
+import "prismjs/components/prism-tsx"
+import "prismjs/components/prism-css"
+import "prismjs/components/prism-json"
+import "prismjs/components/prism-bash"
+import "prismjs/components/prism-python"
+import "prismjs/components/prism-go"
+import "prismjs/components/prism-rust"
+import "prismjs/components/prism-sql"
+import "prismjs/components/prism-yaml"
+import "prismjs/components/prism-docker"
+import "prismjs/components/prism-markdown"
+
+export interface WakaDocCodeBlockProps {
+  code: string
+  language?: string
+  filename?: string
+  showLineNumbers?: boolean
+  highlightLines?: number[]
+  className?: string
+}
+
+export function WakaDocCodeBlock({
+  code,
+  language,
+  filename,
+  showLineNumbers = false,
+  highlightLines = [],
+  className,
+}: WakaDocCodeBlockProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  const lines = code.split("\n")
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {}
+  }
+
+  return (
+    <div
+      className={cn(
+        "group relative my-4 overflow-hidden rounded-lg",
+        "border border-border/50",
+        "bg-muted/30 backdrop-blur-sm",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border/50 bg-muted/50 px-4 py-2">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <FileCode className="h-3.5 w-3.5" />
+          <span className="font-medium">
+            {filename || language?.toUpperCase() || "CODE"}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5 text-emerald-500" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      </div>
+
+      {/* Code */}
+      <div className="overflow-x-auto">
+        <pre className="p-4 text-sm leading-relaxed">
+          <code>
+            {lines.map((line, i) => {
+              let highlightedLine = line
+              try {
+                if (language && Prism.languages[language]) {
+                  highlightedLine = Prism.highlight(line, Prism.languages[language], language)
+                }
+              } catch {}
+
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    "flex",
+                    highlightLines.includes(i + 1) &&
+                      "bg-primary/10 -mx-4 px-4 border-l-2 border-primary"
+                  )}
+                >
+                  {showLineNumbers && (
+                    <span className="mr-4 inline-block w-8 select-none text-right text-muted-foreground/50">
+                      {i + 1}
+                    </span>
+                  )}
+                  <span
+                    dangerouslySetInnerHTML={{ __html: highlightedLine }}
+                  />
+                </div>
+              )
+            })}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}

package/src/components/waka-doc-nav/WakaDocNav.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocNav } from './index'
+import * as React from 'react'
+import { BookOpen, Zap, Settings, Code, Palette } from 'lucide-react'
+
+const meta: Meta<typeof WakaDocNav> = {
+  title: 'Components/Documentation/WakaDocNav',
+  component: WakaDocNav,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Tree navigation sidebar for documentation with collapsible sections, active state, and badges.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocNav>
+
+const sampleItems = [
+  {
+    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-nav', label: 'DocNav' },
+      { id: 'doc-search', label: 'DocSearch' },
+    ],
+  },
+  {
+    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" />,
+  },
+]
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[260px] rounded-lg border p-2">
+      <WakaDocNav
+        items={sampleItems}
+        activeId="doc-callout"
+        onItemClick={(item) => console.log('Clicked:', item.id)}
+      />
+    </div>
+  ),
+}
+
+export const FlatNavigation: Story = {
+  render: () => (
+    <div className="w-[260px] rounded-lg border p-2">
+      <WakaDocNav
+        items={[
+          { id: 'intro', label: 'Introduction' },
+          { id: 'install', label: 'Installation' },
+          { id: 'usage', label: 'Usage' },
+          { id: 'api', label: 'API Reference' },
+          { id: 'changelog', label: 'Changelog', badge: 'New' },
+        ]}
+        activeId="usage"
+      />
+    </div>
+  ),
+}

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

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { ChevronRight, FileText, FolderOpen, Folder } from "lucide-react"
+
+export interface DocNavItem {
+  id: string
+  label: string
+  href?: string
+  icon?: React.ReactNode
+  children?: DocNavItem[]
+  badge?: string
+}
+
+export interface WakaDocNavProps {
+  items: DocNavItem[]
+  activeId?: string
+  onItemClick?: (item: DocNavItem) => void
+  className?: string
+}
+
+export function WakaDocNav({ items, activeId, onItemClick, className }: WakaDocNavProps) {
+  return (
+    <nav className={cn("space-y-1", className)}>
+      {items.map((item) => (
+        <NavItem
+          key={item.id}
+          item={item}
+          activeId={activeId}
+          onItemClick={onItemClick}
+          depth={0}
+        />
+      ))}
+    </nav>
+  )
+}
+
+function NavItem({
+  item,
+  activeId,
+  onItemClick,
+  depth,
+}: {
+  item: DocNavItem
+  activeId?: string
+  onItemClick?: (item: DocNavItem) => void
+  depth: number
+}) {
+  const hasChildren = item.children && item.children.length > 0
+  const isActive = activeId === item.id
+  const isParentOfActive = hasChildren && containsActive(item.children!, activeId)
+  const [expanded, setExpanded] = React.useState(isParentOfActive)
+
+  React.useEffect(() => {
+    if (isParentOfActive) setExpanded(true)
+  }, [isParentOfActive])
+
+  const handleClick = () => {
+    if (hasChildren) {
+      setExpanded((prev) => !prev)
+    }
+    onItemClick?.(item)
+  }
+
+  const DefaultIcon = hasChildren
+    ? expanded ? FolderOpen : Folder
+    : FileText
+
+  return (
+    <div>
+      <button
+        onClick={handleClick}
+        className={cn(
+          "group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all duration-200",
+          isActive
+            ? "bg-primary/10 font-medium text-primary"
+            : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+        )}
+        style={{ paddingLeft: `${depth * 12 + 12}px` }}
+      >
+        {hasChildren && (
+          <ChevronRight
+            className={cn(
+              "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+              expanded && "rotate-90"
+            )}
+          />
+        )}
+        <span className="shrink-0">
+          {item.icon || <DefaultIcon className="h-4 w-4" />}
+        </span>
+        <span className="truncate">{item.label}</span>
+        {item.badge && (
+          <span className="ml-auto shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+            {item.badge}
+          </span>
+        )}
+      </button>
+
+      {hasChildren && expanded && (
+        <div className="mt-0.5 space-y-0.5">
+          {item.children!.map((child) => (
+            <NavItem
+              key={child.id}
+              item={child}
+              activeId={activeId}
+              onItemClick={onItemClick}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function containsActive(items: DocNavItem[], activeId?: string): boolean {
+  if (!activeId) return false
+  for (const item of items) {
+    if (item.id === activeId) return true
+    if (item.children && containsActive(item.children, activeId)) return true
+  }
+  return false
+}

package/src/components/waka-doc-renderer/WakaDocRenderer.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDocRenderer } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDocRenderer> = {
+  title: 'Components/Documentation/WakaDocRenderer',
+  component: WakaDocRenderer,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Renders markdown content as styled React components with syntax highlighting, callouts, tables, and heading extraction for TOC.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDocRenderer>
+
+const fullMarkdown = `# WakaDoc Suite
+
+Welcome to the **WakaDoc Suite** documentation. This library provides a complete set of components for building beautiful documentation pages.
+
+## Getting Started
+
+### Installation
+
+Install the package and its peer dependencies:
+
+\`\`\`bash
+pnpm add @wakastellar/ui react-markdown remark-gfm rehype-slug rehype-raw
+\`\`\`
+
+### Quick Start
+
+Import and use the components:
+
+\`\`\`typescript
+import { WakaDocRenderer } from "@wakastellar/ui/doc"
+
+export function DocsPage({ content }: { content: string }) {
+  return <WakaDocRenderer content={content} />
+}
+\`\`\`
+
+## Features
+
+| Feature | Description | Status |
+|---------|-------------|--------|
+| Markdown Rendering | Full GFM support | Stable |
+| Syntax Highlighting | PrismJS with 14+ languages | Stable |
+| Callouts | Info, warning, danger, tip blocks | Stable |
+| Table of Contents | Auto-generated with scroll spy | Stable |
+| Search | Full-text client-side search | Stable |
+
+## Components
+
+### WakaDocRenderer
+
+The core rendering component. It converts markdown to React elements with custom styling.
+
+Inline code looks like \`this\` and links work like [this](https://example.com).
+
+> [!info]
+> This is an info callout using the GitHub-style syntax.
+
+> [!warning]
+> Be careful with this feature, it requires additional configuration.
+
+> [!tip]
+> You can customize the appearance using Tailwind classes.
+
+### Lists
+
+Unordered list:
+- First item
+- Second item with **bold** text
+- Third item with \`inline code\`
+
+Ordered list:
+1. Step one
+2. Step two
+3. Step three
+
+---
+
+## API Reference
+
+### Props
+
+The renderer accepts the following props:
+
+\`\`\`typescript
+interface WakaDocRendererProps {
+  content: string
+  onHeadingsExtracted?: (headings: TocItem[]) => void
+  className?: string
+}
+\`\`\`
+
+> This is a regular blockquote, not a callout.
+
+That's it! Happy documenting.
+`
+
+export const Default: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl">
+      <WakaDocRenderer content={fullMarkdown} onHeadingsExtracted={(h) => console.log('Headings:', h)} />
+    </div>
+  ),
+}
+
+export const SimpleContent: Story = {
+  args: {
+    content: '# Hello World\n\nA simple paragraph with **bold** and *italic* text.\n\n## Section\n\nMore content here.',
+  },
+}

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

@@ -0,0 +1,217 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { WakaDocCodeBlock } from "../waka-doc-code-block"
+import { WakaDocCallout, type CalloutType } from "../waka-doc-callout"
+import type { TocItem } from "../waka-doc-toc"
+
+export interface WakaDocRendererProps {
+  content: string
+  onHeadingsExtracted?: (headings: TocItem[]) => void
+  className?: string
+}
+
+interface MarkdownModule {
+  ReactMarkdown: React.ComponentType<{
+    children: string
+    remarkPlugins?: unknown[]
+    rehypePlugins?: unknown[]
+    components?: Record<string, React.ComponentType<Record<string, unknown>>>
+  }>
+  remarkGfm: unknown
+  rehypeSlug: unknown
+  rehypeRaw: unknown
+}
+
+export function WakaDocRenderer({ content, onHeadingsExtracted, className }: WakaDocRendererProps) {
+  const [mdModule, setMdModule] = React.useState<MarkdownModule | null>(null)
+  const [loadError, setLoadError] = React.useState(false)
+
+  React.useEffect(() => {
+    const load = async () => {
+      try {
+        const [rm, gfm, slug, raw] = await Promise.all([
+          import("react-markdown"),
+          import("remark-gfm"),
+          import("rehype-slug"),
+          import("rehype-raw"),
+        ])
+        setMdModule({
+          ReactMarkdown: rm.default,
+          remarkGfm: gfm.default || gfm,
+          rehypeSlug: slug.default || slug,
+          rehypeRaw: raw.default || raw,
+        })
+      } catch {
+        setLoadError(true)
+      }
+    }
+    load()
+  }, [])
+
+  // Extraire les headings du markdown
+  React.useEffect(() => {
+    if (!onHeadingsExtracted) return
+    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 (loadError) {
+    return (
+      <div className={cn("whitespace-pre-wrap font-mono text-sm", className)}>
+        {content}
+      </div>
+    )
+  }
+
+  if (!mdModule) {
+    return (
+      <div className={cn("animate-pulse space-y-4", className)}>
+        <div className="h-8 w-3/4 rounded bg-muted" />
+        <div className="h-4 w-full rounded bg-muted" />
+        <div className="h-4 w-5/6 rounded bg-muted" />
+        <div className="h-4 w-4/5 rounded bg-muted" />
+      </div>
+    )
+  }
+
+  const { ReactMarkdown, remarkGfm, rehypeSlug, rehypeRaw } = mdModule
+
+  return (
+    <div className={cn("waka-doc-renderer", className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSlug, rehypeRaw]}
+        components={{
+          h1: ({ children, ...props }: Record<string, unknown>) => (
+            <h1 className="mb-4 mt-8 scroll-mt-24 text-3xl font-bold tracking-tight first:mt-0" {...props}>
+              {children as React.ReactNode}
+            </h1>
+          ),
+          h2: ({ children, ...props }: Record<string, unknown>) => (
+            <h2 className="mb-3 mt-8 scroll-mt-24 border-b border-border/30 pb-2 text-2xl font-semibold tracking-tight first:mt-0" {...props}>
+              {children as React.ReactNode}
+            </h2>
+          ),
+          h3: ({ children, ...props }: Record<string, unknown>) => (
+            <h3 className="mb-2 mt-6 scroll-mt-24 text-xl font-semibold tracking-tight" {...props}>
+              {children as React.ReactNode}
+            </h3>
+          ),
+          h4: ({ children, ...props }: Record<string, unknown>) => (
+            <h4 className="mb-2 mt-4 scroll-mt-24 text-lg font-medium" {...props}>
+              {children as React.ReactNode}
+            </h4>
+          ),
+          p: ({ children }: Record<string, unknown>) => (
+            <p className="mb-4 leading-7 text-foreground/80">{children as React.ReactNode}</p>
+          ),
+          a: ({ href, children }: Record<string, unknown>) => (
+            <a
+              href={href as string}
+              target={(href as string)?.startsWith("http") ? "_blank" : undefined}
+              rel={(href as string)?.startsWith("http") ? "noopener noreferrer" : undefined}
+              className="font-medium text-primary underline decoration-primary/30 underline-offset-4 transition-colors hover:decoration-primary"
+            >
+              {children as React.ReactNode}
+            </a>
+          ),
+          pre: ({ children }: Record<string, unknown>) => {
+            const child = children as React.ReactElement<{ className?: string; children?: string }>
+            if (child?.props) {
+              const lang = child.props.className?.replace("language-", "") || ""
+              const code = typeof child.props.children === "string"
+                ? child.props.children.replace(/\n$/, "")
+                : ""
+              return <WakaDocCodeBlock code={code} language={lang} showLineNumbers />
+            }
+            return <pre>{children as React.ReactNode}</pre>
+          },
+          code: ({ children, className: codeClassName }: Record<string, unknown>) => {
+            if (codeClassName) return <code className={codeClassName as string}>{children as React.ReactNode}</code>
+            return (
+              <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-primary">
+                {children as React.ReactNode}
+              </code>
+            )
+          },
+          blockquote: ({ children }: Record<string, unknown>) => {
+            const text = extractText(children as React.ReactNode)
+            const calloutMatch = text.match(/^\[!(info|warning|danger|tip)\]\s*\n?(.*)$/s)
+            if (calloutMatch) {
+              const calloutType = calloutMatch[1] as CalloutType
+              const body = calloutMatch[2]
+              return <WakaDocCallout type={calloutType}><p>{body}</p></WakaDocCallout>
+            }
+            return (
+              <blockquote className="my-4 border-l-4 border-primary/30 bg-muted/20 py-1 pl-4 italic text-foreground/70">
+                {children as React.ReactNode}
+              </blockquote>
+            )
+          },
+          table: ({ children }: Record<string, unknown>) => (
+            <div className="my-4 overflow-x-auto rounded-lg border border-border/50">
+              <table className={cn(
+                "w-full text-sm",
+                "[&_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:nth-child(even)]:bg-muted/30",
+                "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/50"
+              )}>
+                {children as React.ReactNode}
+              </table>
+            </div>
+          ),
+          ul: ({ children }: Record<string, unknown>) => (
+            <ul className="my-4 ml-6 list-disc space-y-2 text-foreground/80 marker:text-primary/50">
+              {children as React.ReactNode}
+            </ul>
+          ),
+          ol: ({ children }: Record<string, unknown>) => (
+            <ol className="my-4 ml-6 list-decimal space-y-2 text-foreground/80 marker:text-primary/50">
+              {children as React.ReactNode}
+            </ol>
+          ),
+          li: ({ children }: Record<string, unknown>) => (
+            <li className="leading-7">{children as React.ReactNode}</li>
+          ),
+          hr: () => <hr className="my-8 border-border/50" />,
+          img: ({ src, alt }: Record<string, unknown>) => (
+            <img
+              src={src as string}
+              alt={(alt as string) || ""}
+              className="my-4 rounded-lg border border-border/50 shadow-sm"
+            />
+          ),
+        } as Record<string, React.ComponentType<Record<string, unknown>>>}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}
+
+function extractText(node: React.ReactNode): string {
+  if (typeof node === "string") return node
+  if (Array.isArray(node)) return node.map(extractText).join("")
+  if (React.isValidElement(node) && node.props) {
+    return extractText((node.props as { children?: React.ReactNode }).children)
+  }
+  return ""
+}