@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/release-notes/index.tsx

@@ -0,0 +1,643 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Input } from "../../components/input"
+import { Textarea } from "../../components/textarea"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Tag,
+  GitCommit,
+  GitBranch,
+  GitPullRequest,
+  Plus,
+  Trash2,
+  Rocket,
+  Bug,
+  Sparkles,
+  Wrench,
+  AlertTriangle,
+  ShieldCheck,
+  Zap,
+  BookOpen,
+  Users,
+  Calendar,
+  Link,
+  ExternalLink,
+  Eye,
+  Edit,
+  Copy,
+  Download,
+  Clock,
+  CheckCircle2,
+} from "lucide-react"
+
+export type ChangeType = "feature" | "fix" | "improvement" | "breaking" | "security" | "performance" | "docs" | "deprecation"
+export type ReleaseType = "major" | "minor" | "patch" | "prerelease"
+export type ReleaseStatus = "draft" | "published" | "scheduled"
+
+export interface Contributor {
+  id: string
+  name: string
+  username: string
+  avatar?: string
+}
+
+export interface ChangeItem {
+  id: string
+  type: ChangeType
+  title: string
+  description?: string
+  pullRequest?: {
+    number: number
+    url: string
+  }
+  commits?: string[]
+  contributors?: Contributor[]
+  breaking?: boolean
+}
+
+export interface Release {
+  id: string
+  version: string
+  name?: string
+  releaseType: ReleaseType
+  status: ReleaseStatus
+  publishedAt?: Date
+  scheduledAt?: Date
+  createdAt: Date
+  changes: ChangeItem[]
+  summary?: string
+  upgradeNotes?: string
+  contributors: Contributor[]
+  compareUrl?: string
+  downloadUrl?: string
+}
+
+export interface ReleaseNotesProps {
+  releases: Release[]
+  onCreateRelease?: () => void
+  onEditRelease?: (release: Release) => void
+  onPublishRelease?: (release: Release) => void
+  onAddChange?: (releaseId: string, change: ChangeItem) => void
+  showEditor?: boolean
+  className?: string
+}
+
+const changeTypeConfig: Record<ChangeType, { icon: React.ElementType; color: string; bgColor: string; label: string }> = {
+  feature: { icon: Sparkles, color: "text-green-500", bgColor: "bg-green-500/10", label: "New Feature" },
+  fix: { icon: Bug, color: "text-red-500", bgColor: "bg-red-500/10", label: "Bug Fix" },
+  improvement: { icon: Wrench, color: "text-blue-500", bgColor: "bg-blue-500/10", label: "Improvement" },
+  breaking: { icon: AlertTriangle, color: "text-orange-500", bgColor: "bg-orange-500/10", label: "Breaking Change" },
+  security: { icon: ShieldCheck, color: "text-purple-500", bgColor: "bg-purple-500/10", label: "Security" },
+  performance: { icon: Zap, color: "text-yellow-500", bgColor: "bg-yellow-500/10", label: "Performance" },
+  docs: { icon: BookOpen, color: "text-cyan-500", bgColor: "bg-cyan-500/10", label: "Documentation" },
+  deprecation: { icon: AlertTriangle, color: "text-gray-500", bgColor: "bg-gray-500/10", label: "Deprecation" },
+}
+
+const releaseTypeConfig: Record<ReleaseType, { label: string; color: string }> = {
+  major: { label: "Major", color: "text-red-500" },
+  minor: { label: "Minor", color: "text-blue-500" },
+  patch: { label: "Patch", color: "text-green-500" },
+  prerelease: { label: "Pre-release", color: "text-purple-500" },
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  })
+}
+
+function ChangeEntry({ change }: { change: ChangeItem }) {
+  const config = changeTypeConfig[change.type]
+  const Icon = config.icon
+
+  return (
+    <div className={cn(
+      "flex items-start gap-3 p-3 rounded-lg",
+      config.bgColor
+    )}>
+      <div className="p-1.5 rounded bg-background">
+        <Icon className={cn("h-4 w-4", config.color)} />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="font-medium">{change.title}</span>
+          {change.breaking && (
+            <Badge className="bg-orange-500 text-xs">Breaking</Badge>
+          )}
+          {change.pullRequest && (
+            <a
+              href={change.pullRequest.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-muted-foreground hover:text-primary flex items-center gap-1"
+            >
+              <GitPullRequest className="h-3 w-3" />
+              #{change.pullRequest.number}
+            </a>
+          )}
+        </div>
+
+        {change.description && (
+          <p className="text-sm text-muted-foreground mt-1">
+            {change.description}
+          </p>
+        )}
+
+        {change.contributors && change.contributors.length > 0 && (
+          <div className="flex items-center gap-1 mt-2">
+            {change.contributors.map((contributor) => (
+              <Avatar key={contributor.id} className="h-5 w-5">
+                <AvatarImage src={contributor.avatar} />
+                <AvatarFallback className="text-xs">
+                  {contributor.name.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ReleaseCard({
+  release,
+  onEdit,
+  onPublish,
+  expanded = false,
+}: {
+  release: Release
+  onEdit?: () => void
+  onPublish?: () => void
+  expanded?: boolean
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(expanded)
+  const releaseConf = releaseTypeConfig[release.releaseType]
+
+  // Group changes by type
+  const groupedChanges = React.useMemo(() => {
+    const groups: Record<ChangeType, ChangeItem[]> = {
+      breaking: [],
+      security: [],
+      feature: [],
+      improvement: [],
+      performance: [],
+      fix: [],
+      docs: [],
+      deprecation: [],
+    }
+    release.changes.forEach((change) => {
+      groups[change.type].push(change)
+    })
+    return groups
+  }, [release.changes])
+
+  return (
+    <Card className={cn(
+      release.status === "draft" && "border-dashed",
+      release.status === "scheduled" && "border-blue-500/30"
+    )}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Tag className="h-5 w-5" />
+              <CardTitle className="text-xl">{release.version}</CardTitle>
+              {release.name && (
+                <span className="text-muted-foreground">- {release.name}</span>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className={releaseConf.color}>
+                {releaseConf.label}
+              </Badge>
+              <Badge
+                variant={release.status === "published" ? "default" : "secondary"}
+                className={release.status === "published" ? "bg-green-500" : ""}
+              >
+                {release.status === "published" ? (
+                  <CheckCircle2 className="h-3 w-3 mr-1" />
+                ) : release.status === "scheduled" ? (
+                  <Clock className="h-3 w-3 mr-1" />
+                ) : (
+                  <Edit className="h-3 w-3 mr-1" />
+                )}
+                {release.status}
+              </Badge>
+              <span className="text-sm text-muted-foreground flex items-center gap-1">
+                <Calendar className="h-3 w-3" />
+                {release.publishedAt ? formatDate(release.publishedAt) : formatDate(release.createdAt)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {release.compareUrl && (
+              <Button variant="ghost" size="sm" asChild>
+                <a href={release.compareUrl} target="_blank" rel="noopener noreferrer">
+                  <GitCommit className="h-4 w-4 mr-1" />
+                  Compare
+                </a>
+              </Button>
+            )}
+            {onEdit && release.status === "draft" && (
+              <Button variant="outline" size="sm" onClick={onEdit}>
+                <Edit className="h-4 w-4 mr-1" />
+                Edit
+              </Button>
+            )}
+            {onPublish && release.status === "draft" && (
+              <Button size="sm" onClick={onPublish}>
+                <Rocket className="h-4 w-4 mr-1" />
+                Publish
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Summary */}
+        {release.summary && (
+          <p className="text-muted-foreground">{release.summary}</p>
+        )}
+
+        {/* Upgrade Notes */}
+        {release.upgradeNotes && (
+          <div className="p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+            <div className="flex items-center gap-2 font-medium text-yellow-600 mb-1">
+              <AlertTriangle className="h-4 w-4" />
+              Upgrade Notes
+            </div>
+            <p className="text-sm text-muted-foreground">{release.upgradeNotes}</p>
+          </div>
+        )}
+
+        {/* Changes */}
+        <div className="space-y-4">
+          {Object.entries(groupedChanges).map(([type, changes]) => {
+            if (changes.length === 0) return null
+            const config = changeTypeConfig[type as ChangeType]
+
+            return (
+              <div key={type}>
+                <h4 className="font-medium flex items-center gap-2 mb-2">
+                  <config.icon className={cn("h-4 w-4", config.color)} />
+                  {config.label}s ({changes.length})
+                </h4>
+                <div className="space-y-2">
+                  {(isExpanded ? changes : changes.slice(0, 3)).map((change) => (
+                    <ChangeEntry key={change.id} change={change} />
+                  ))}
+                  {!isExpanded && changes.length > 3 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="w-full"
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      Show {changes.length - 3} more...
+                    </Button>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Contributors */}
+        {release.contributors.length > 0 && (
+          <div className="pt-4 border-t">
+            <h4 className="font-medium flex items-center gap-2 mb-2">
+              <Users className="h-4 w-4" />
+              Contributors ({release.contributors.length})
+            </h4>
+            <div className="flex flex-wrap gap-2">
+              {release.contributors.map((contributor) => (
+                <div
+                  key={contributor.id}
+                  className="flex items-center gap-2 px-2 py-1 bg-muted rounded-full"
+                >
+                  <Avatar className="h-5 w-5">
+                    <AvatarImage src={contributor.avatar} />
+                    <AvatarFallback className="text-xs">
+                      {contributor.name.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span className="text-sm">@{contributor.username}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Download */}
+        {release.downloadUrl && (
+          <div className="pt-4 border-t">
+            <Button variant="outline" asChild>
+              <a href={release.downloadUrl} download>
+                <Download className="h-4 w-4 mr-2" />
+                Download Release
+              </a>
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function ReleaseNotes({
+  releases,
+  onCreateRelease,
+  onEditRelease,
+  onPublishRelease,
+  onAddChange,
+  showEditor = false,
+  className,
+}: ReleaseNotesProps) {
+  const [filterType, setFilterType] = React.useState<ReleaseType | "all">("all")
+  const [filterStatus, setFilterStatus] = React.useState<ReleaseStatus | "all">("all")
+
+  // Filter releases
+  const filteredReleases = React.useMemo(() => {
+    return releases
+      .filter((r) => {
+        if (filterType !== "all" && r.releaseType !== filterType) return false
+        if (filterStatus !== "all" && r.status !== filterStatus) return false
+        return true
+      })
+      .sort((a, b) => {
+        // Sort by version (semantic versioning)
+        const parseVersion = (v: string) => {
+          const parts = v.replace(/^v/, "").split(/[.-]/)
+          return parts.map((p) => parseInt(p) || 0)
+        }
+        const aVer = parseVersion(a.version)
+        const bVer = parseVersion(b.version)
+        for (let i = 0; i < Math.max(aVer.length, bVer.length); i++) {
+          const diff = (bVer[i] || 0) - (aVer[i] || 0)
+          if (diff !== 0) return diff
+        }
+        return 0
+      })
+  }, [releases, filterType, filterStatus])
+
+  // Stats
+  const stats = React.useMemo(() => {
+    return {
+      total: releases.length,
+      published: releases.filter((r) => r.status === "published").length,
+      draft: releases.filter((r) => r.status === "draft").length,
+      features: releases.reduce((acc, r) => acc + r.changes.filter((c) => c.type === "feature").length, 0),
+      fixes: releases.reduce((acc, r) => acc + r.changes.filter((c) => c.type === "fix").length, 0),
+    }
+  }, [releases])
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Rocket className="h-6 w-6" />
+              <div>
+                <CardTitle>Release Notes</CardTitle>
+                <p className="text-sm text-muted-foreground">
+                  Track changes and publish releases
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-6 text-sm">
+                <span className="flex items-center gap-1">
+                  <Tag className="h-4 w-4 text-muted-foreground" />
+                  <strong>{stats.total}</strong> releases
+                </span>
+                <span className="flex items-center gap-1">
+                  <Sparkles className="h-4 w-4 text-green-500" />
+                  <strong>{stats.features}</strong> features
+                </span>
+                <span className="flex items-center gap-1">
+                  <Bug className="h-4 w-4 text-red-500" />
+                  <strong>{stats.fixes}</strong> fixes
+                </span>
+              </div>
+
+              {onCreateRelease && (
+                <Button onClick={onCreateRelease}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  New Release
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="pt-0">
+          <div className="flex items-center gap-3">
+            <Select value={filterType} onValueChange={(v) => setFilterType(v as ReleaseType | "all")}>
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="major">Major</SelectItem>
+                <SelectItem value="minor">Minor</SelectItem>
+                <SelectItem value="patch">Patch</SelectItem>
+                <SelectItem value="prerelease">Pre-release</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={filterStatus} onValueChange={(v) => setFilterStatus(v as ReleaseStatus | "all")}>
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="published">Published</SelectItem>
+                <SelectItem value="draft">Draft</SelectItem>
+                <SelectItem value="scheduled">Scheduled</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Releases */}
+      <ScrollArea className="h-[600px]">
+        <div className="space-y-4 pr-4">
+          {filteredReleases.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-48 text-muted-foreground">
+              <Tag className="h-12 w-12 mb-4" />
+              <p className="text-lg font-medium">No releases found</p>
+              <p className="text-sm">Create your first release to get started</p>
+            </div>
+          ) : (
+            filteredReleases.map((release, index) => (
+              <ReleaseCard
+                key={release.id}
+                release={release}
+                expanded={index === 0}
+                onEdit={onEditRelease ? () => onEditRelease(release) : undefined}
+                onPublish={onPublishRelease ? () => onPublishRelease(release) : undefined}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample data
+const sampleContributors: Contributor[] = [
+  { id: "1", name: "John Doe", username: "johndoe", avatar: "" },
+  { id: "2", name: "Jane Smith", username: "janesmith", avatar: "" },
+  { id: "3", name: "Bob Wilson", username: "bobwilson", avatar: "" },
+]
+
+export const defaultReleases: Release[] = [
+  {
+    id: "1",
+    version: "v2.5.0",
+    name: "Aurora",
+    releaseType: "minor",
+    status: "published",
+    publishedAt: new Date(Date.now() - 2 * 24 * 3600000),
+    createdAt: new Date(Date.now() - 5 * 24 * 3600000),
+    summary: "This release introduces new authentication features, performance improvements, and several bug fixes.",
+    contributors: sampleContributors,
+    compareUrl: "https://github.com/example/repo/compare/v2.4.0...v2.5.0",
+    changes: [
+      {
+        id: "c1",
+        type: "feature",
+        title: "Added OAuth 2.0 support for GitHub and Google",
+        description: "Users can now sign in using their GitHub or Google accounts",
+        pullRequest: { number: 234, url: "#" },
+        contributors: [sampleContributors[0]],
+      },
+      {
+        id: "c2",
+        type: "feature",
+        title: "New dashboard widgets for analytics",
+        pullRequest: { number: 238, url: "#" },
+        contributors: [sampleContributors[1]],
+      },
+      {
+        id: "c3",
+        type: "improvement",
+        title: "Redesigned settings page with better UX",
+        pullRequest: { number: 241, url: "#" },
+      },
+      {
+        id: "c4",
+        type: "performance",
+        title: "Reduced initial bundle size by 30%",
+        description: "Implemented code splitting and lazy loading for major routes",
+        pullRequest: { number: 245, url: "#" },
+        contributors: [sampleContributors[2]],
+      },
+      {
+        id: "c5",
+        type: "fix",
+        title: "Fixed memory leak in WebSocket connection",
+        pullRequest: { number: 250, url: "#" },
+      },
+      {
+        id: "c6",
+        type: "fix",
+        title: "Fixed date picker not respecting timezone",
+        pullRequest: { number: 252, url: "#" },
+      },
+      {
+        id: "c7",
+        type: "security",
+        title: "Updated dependencies with security vulnerabilities",
+        description: "Updated axios, lodash, and other packages with known CVEs",
+        pullRequest: { number: 248, url: "#" },
+      },
+    ],
+  },
+  {
+    id: "2",
+    version: "v2.4.1",
+    releaseType: "patch",
+    status: "published",
+    publishedAt: new Date(Date.now() - 14 * 24 * 3600000),
+    createdAt: new Date(Date.now() - 15 * 24 * 3600000),
+    contributors: [sampleContributors[0]],
+    changes: [
+      {
+        id: "c8",
+        type: "fix",
+        title: "Fixed critical authentication bypass vulnerability",
+        breaking: false,
+        pullRequest: { number: 230, url: "#" },
+      },
+      {
+        id: "c9",
+        type: "fix",
+        title: "Fixed incorrect pagination in search results",
+        pullRequest: { number: 231, url: "#" },
+      },
+    ],
+  },
+  {
+    id: "3",
+    version: "v3.0.0-beta.1",
+    name: "Next Generation",
+    releaseType: "prerelease",
+    status: "draft",
+    createdAt: new Date(Date.now() - 1 * 24 * 3600000),
+    contributors: sampleContributors,
+    upgradeNotes: "This is a major release with breaking changes. Please review the migration guide before upgrading.",
+    changes: [
+      {
+        id: "c10",
+        type: "breaking",
+        title: "Removed deprecated API endpoints",
+        description: "The v1 API endpoints have been removed. Please migrate to v2 endpoints.",
+        breaking: true,
+      },
+      {
+        id: "c11",
+        type: "feature",
+        title: "New real-time collaboration features",
+        description: "Multiple users can now edit documents simultaneously with live cursors",
+      },
+      {
+        id: "c12",
+        type: "feature",
+        title: "Dark mode support throughout the application",
+      },
+      {
+        id: "c13",
+        type: "breaking",
+        title: "Changed authentication token format",
+        description: "Tokens now use JWT format. Old tokens will be invalidated.",
+        breaking: true,
+      },
+    ],
+  },
+]

package/src/blocks/sidebar/index.tsx

@@ -554,13 +554,13 @@ export function WakaSidebar({
     onClose: () => setIsOpen(false),
   }
 
-  // Styles personnalisés
+  // Styles personnalisés - utilise les variables CSS du thème par défaut
   const customStyles = {
-    "--sidebar-bg": backgroundColor || "hsl(222 47% 11%)",
-    "--sidebar-text": textColor || "hsl(210 40% 96%)",
-    "--sidebar-active": activeColor || "hsl(187 85% 43%)",
-    "--sidebar-active-foreground": "hsl(222 47% 11%)",
-    "--sidebar-hover": hoverColor || "rgba(255, 255, 255, 0.1)",
+    "--sidebar-bg": backgroundColor || "hsl(var(--sidebar-background, var(--card)))",
+    "--sidebar-text": textColor || "hsl(var(--sidebar-foreground, var(--card-foreground)))",
+    "--sidebar-active": activeColor || "hsl(var(--sidebar-primary, var(--primary)))",
+    "--sidebar-active-foreground": "hsl(var(--sidebar-primary-foreground, var(--primary-foreground)))",
+    "--sidebar-hover": hoverColor || "hsl(var(--sidebar-accent, var(--accent)))",
   } as React.CSSProperties
 
   const sidebarClasses = cn(

package/src/components/DataTable/templates/index.tsx

@@ -28,6 +28,7 @@ import {
   AlertDialogTitle,
 } from "../../alert-dialog"
 import { cn } from "../../../utils/cn"
+import { createHighlightRegex } from "../../../utils/security"
 import { formatters } from "../formatters"
 import type { ColumnTemplate, ColumnTemplateOptions, ColumnTemplateAction } from "../types"
 
@@ -715,9 +716,9 @@ export const textTemplate: ColumnTemplate<unknown, unknown> = {
       ? formatters.truncate(strValue, options.maxLength)
       : strValue
 
-    // Highlight si spécifié
+    // Highlight si spécifié (with escaped regex for security)
     if (options?.highlight) {
-      const regex = new RegExp(`(${options.highlight})`, "gi")
+      const regex = createHighlightRegex(options.highlight)
       const parts = displayValue.split(regex)
 
       return (