@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/waka-document-preview-popup/index.tsx

@@ -1,103 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog"
-
-export interface DocumentVersion {
-  id: string
-  label: string
-  date: string
-}
-
-export interface PreviewDocument {
-  name: string
-  mimeType: string
-  content?: string
-  previewUrl?: string
-  sizeBytes: number
-  uploadedBy: string
-  uploadedAt: string
-}
-
-export interface DocumentPreviewPopupProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  document: PreviewDocument
-  versions?: DocumentVersion[]
-  selectedVersion?: string
-  onVersionChange?: (versionId: string) => void
-  onDownload: (versionId?: string) => void
-}
-
-const TEXT_TYPES = ["text/", "application/json", "application/xml", "application/javascript"]
-const IMAGE_TYPES = ["image/"]
-
-function isTextual(mimeType: string): boolean {
-  return TEXT_TYPES.some((t) => mimeType.startsWith(t)) || mimeType.includes("markdown")
-}
-
-function isImage(mimeType: string): boolean {
-  return IMAGE_TYPES.some((t) => mimeType.startsWith(t))
-}
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} o`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} Ko`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
-}
-
-function DocumentPreviewPopup({
-  open, onOpenChange, document: doc, versions, selectedVersion, onVersionChange, onDownload,
-}: DocumentPreviewPopupProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-4xl max-h-[90vh] flex flex-col">
-        <DialogHeader>
-          <div className="flex items-center justify-between gap-4">
-            <DialogTitle className="truncate">{doc.name}</DialogTitle>
-            <div className="flex items-center gap-2 shrink-0">
-              {versions && versions.length > 1 && (
-                <select
-                  value={selectedVersion ?? versions[0]?.id}
-                  onChange={(e) => onVersionChange?.(e.target.value)}
-                  className="rounded-md border bg-background px-2 py-1 text-xs"
-                >
-                  {versions.map((v) => (
-                    <option key={v.id} value={v.id}>{v.label} — {v.date}</option>
-                  ))}
-                </select>
-              )}
-              <button
-                onClick={() => onDownload(selectedVersion)}
-                className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
-              >
-                Telecharger
-              </button>
-            </div>
-          </div>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-auto rounded-lg border bg-muted/30 p-4 min-h-[300px]">
-          {isTextual(doc.mimeType) && doc.content ? (
-            <pre className="whitespace-pre-wrap text-sm font-mono leading-relaxed">{doc.content}</pre>
-          ) : isImage(doc.mimeType) && doc.previewUrl ? (
-            <img src={doc.previewUrl} alt={doc.name} className="max-w-full h-auto mx-auto rounded" />
-          ) : (
-            <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground py-12">
-              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-              <p className="text-sm font-medium">Previsualisation non disponible</p>
-              <p className="text-xs">{doc.mimeType} — {formatSize(doc.sizeBytes)}</p>
-            </div>
-          )}
-        </div>
-
-        <div className="flex items-center justify-between text-xs text-muted-foreground border-t pt-2">
-          <span>{formatSize(doc.sizeBytes)}</span>
-          <span>Uploade par {doc.uploadedBy} le {doc.uploadedAt}</span>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export { DocumentPreviewPopup, formatSize }

package/src/components/waka-hour-balance-badge/index.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../utils/cn"
-
-export interface HourBalanceBadgeProps {
-  remainingMinutes: number
-  totalMinutes: number
-  className?: string
-}
-
-function formatMinutes(minutes: number): string {
-  const abs = Math.abs(minutes)
-  const h = Math.floor(abs / 60)
-  const m = abs % 60
-  const sign = minutes < 0 ? "-" : ""
-  return m > 0 ? `${sign}${h}h${m.toString().padStart(2, "0")}` : `${sign}${h}h`
-}
-
-function getColorClass(remainingMinutes: number): string {
-  if (remainingMinutes > 600) return "text-green-600 dark:text-green-400"
-  if (remainingMinutes > 300) return "text-orange-500 dark:text-orange-400"
-  return "text-red-600 dark:text-red-400 font-bold"
-}
-
-function HourBalanceBadge({ remainingMinutes, totalMinutes, className }: HourBalanceBadgeProps) {
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-0.5 text-sm tabular-nums",
-        getColorClass(remainingMinutes),
-        className,
-      )}
-      aria-label={`${formatMinutes(remainingMinutes)} restantes sur ${formatMinutes(totalMinutes)} total`}
-    >
-      <span>{formatMinutes(remainingMinutes)}</span>
-      <span className="text-muted-foreground font-normal">/</span>
-      <span className="text-muted-foreground font-normal">{formatMinutes(totalMinutes)}</span>
-    </span>
-  )
-}
-
-export { HourBalanceBadge, formatMinutes }

package/src/components/waka-hour-consumption-table/index.tsx

@@ -1,72 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { formatMinutes } from "../waka-hour-balance-badge"
-
-export interface HourConsumption {
-  date: string
-  consultant: string
-  reason: string
-  stepName?: string
-  minutes: number
-}
-
-export interface HourConsumptionTableProps {
-  consumptions: HourConsumption[]
-  page: number
-  totalPages: number
-  onPageChange: (page: number) => void
-}
-
-function HourConsumptionTable({ consumptions, page, totalPages, onPageChange }: HourConsumptionTableProps) {
-  return (
-    <div className="space-y-2">
-      <table className="w-full text-sm">
-        <thead>
-          <tr className="border-b text-xs text-muted-foreground">
-            <th className="text-left p-2">Date</th>
-            <th className="text-left p-2">Consultant</th>
-            <th className="text-left p-2">Motif</th>
-            <th className="text-left p-2">Etape</th>
-            <th className="text-right p-2">Duree</th>
-          </tr>
-        </thead>
-        <tbody>
-          {consumptions.map((c, i) => (
-            <tr key={i} className="border-b hover:bg-muted/30">
-              <td className="p-2 text-xs">{c.date}</td>
-              <td className="p-2">{c.consultant}</td>
-              <td className="p-2 truncate max-w-[200px]">{c.reason}</td>
-              <td className="p-2 text-xs text-muted-foreground">{c.stepName ?? "—"}</td>
-              <td className="p-2 text-right tabular-nums font-medium">{formatMinutes(c.minutes)}</td>
-            </tr>
-          ))}
-          {consumptions.length === 0 && (
-            <tr><td colSpan={5} className="p-4 text-center text-muted-foreground">Aucune consommation</td></tr>
-          )}
-        </tbody>
-      </table>
-      {totalPages > 1 && (
-        <div className="flex items-center justify-center gap-2">
-          <button
-            onClick={() => onPageChange(page - 1)}
-            disabled={page <= 1}
-            className="rounded border px-2 py-1 text-xs disabled:opacity-50 hover:bg-accent"
-          >
-            Precedent
-          </button>
-          <span className="text-xs text-muted-foreground">{page}/{totalPages}</span>
-          <button
-            onClick={() => onPageChange(page + 1)}
-            disabled={page >= totalPages}
-            className="rounded border px-2 py-1 text-xs disabled:opacity-50 hover:bg-accent"
-          >
-            Suivant
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { HourConsumptionTable }

package/src/components/waka-hour-pack-dialog/index.tsx

@@ -1,72 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../dialog"
-
-export interface HourPackDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onSubmit: (hours: number, comment: string) => void
-  isLoading?: boolean
-}
-
-function HourPackDialog({ open, onOpenChange, onSubmit, isLoading }: HourPackDialogProps) {
-  const [hours, setHours] = React.useState(25)
-  const [comment, setComment] = React.useState("")
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (hours < 1 || comment.trim().length < 10) return
-    onSubmit(hours, comment.trim())
-    setHours(25)
-    setComment("")
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Ajouter un pack d'heures</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="text-sm font-medium">Nombre d'heures</label>
-            <input
-              type="number"
-              min={1}
-              value={hours}
-              onChange={(e) => setHours(Math.max(1, parseInt(e.target.value) || 1))}
-              className="mt-1 w-full rounded-md border bg-background px-3 py-2 text-sm"
-            />
-          </div>
-          <div>
-            <label className="text-sm font-medium">Commentaire (obligatoire, min 10 chars)</label>
-            <textarea
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              placeholder="Ex: Commande initiale Biped du 30 mars 2026"
-              className="mt-1 w-full min-h-[80px] rounded-md border bg-background px-3 py-2 text-sm resize-none"
-            />
-            {comment.length > 0 && comment.length < 10 && (
-              <p className="text-xs text-red-500 mt-1">{10 - comment.length} caracteres restants</p>
-            )}
-          </div>
-          <DialogFooter>
-            <button type="button" onClick={() => onOpenChange(false)} className="rounded-md border px-4 py-2 text-sm hover:bg-accent">
-              Annuler
-            </button>
-            <button
-              type="submit"
-              disabled={hours < 1 || comment.trim().length < 10 || isLoading}
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-            >
-              Ajouter
-            </button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export { HourPackDialog }

package/src/components/waka-project-stats-header/index.tsx

@@ -1,69 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../utils/cn"
-import { HourBalanceBadge, formatMinutes } from "../waka-hour-balance-badge"
-
-export interface ProjectStatsHeaderProps {
-  stats: {
-    ppMinutes: number
-    wakaMinutes: number
-    billableMinutes: number
-    billableTotalMinutes: number
-    breakdown?: { role: string; minutes: number }[]
-  }
-  onExpand?: (category: "pp" | "waka" | "billable") => void
-}
-
-function StatPill({
-  label, value, colorClass, onClick,
-}: {
-  label: string; value: React.ReactNode; colorClass: string; onClick?: () => void
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
-        "hover:bg-accent",
-        colorClass,
-      )}
-    >
-      <span>{label}</span>
-      <span className="font-bold tabular-nums">{value}</span>
-    </button>
-  )
-}
-
-function ProjectStatsHeader({ stats, onExpand }: ProjectStatsHeaderProps) {
-  return (
-    <div className="flex items-center gap-2 flex-wrap">
-      <StatPill
-        label="PP"
-        value={formatMinutes(stats.ppMinutes)}
-        colorClass="border-emerald-200 text-emerald-700 dark:text-emerald-400"
-        onClick={() => onExpand?.("pp")}
-      />
-      <StatPill
-        label="Waka"
-        value={formatMinutes(stats.wakaMinutes)}
-        colorClass="border-blue-200 text-blue-700 dark:text-blue-400"
-        onClick={() => onExpand?.("waka")}
-      />
-      <StatPill
-        label="Facturables"
-        value={
-          <HourBalanceBadge
-            remainingMinutes={stats.billableTotalMinutes - stats.billableMinutes}
-            totalMinutes={stats.billableTotalMinutes}
-            className="text-xs"
-          />
-        }
-        colorClass="border-amber-200"
-        onClick={() => onExpand?.("billable")}
-      />
-    </div>
-  )
-}
-
-export { ProjectStatsHeader }

package/src/components/waka-step-comment-bubble/index.tsx

@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../utils/cn"
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card"
-
-export interface RecentComment {
-  author: string
-  content: string
-  date: string
-}
-
-export interface StepCommentBubbleProps {
-  count: number
-  recentComments?: RecentComment[]
-  onClick: () => void
-  className?: string
-}
-
-function StepCommentBubble({ count, recentComments, onClick, className }: StepCommentBubbleProps) {
-  const hasComments = count > 0
-
-  const button = (
-    <button
-      onClick={onClick}
-      className={cn(
-        "relative inline-flex items-center justify-center h-8 w-8 rounded-full transition-colors",
-        hasComments
-          ? "bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400"
-          : "bg-muted text-muted-foreground hover:bg-accent",
-        className,
-      )}
-      aria-label={`${count} commentaire${count !== 1 ? "s" : ""}`}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
-      {hasComments && (
-        <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold text-white">
-          {count > 9 ? "9+" : count}
-        </span>
-      )}
-    </button>
-  )
-
-  if (!recentComments?.length) return button
-
-  return (
-    <HoverCard openDelay={200}>
-      <HoverCardTrigger asChild>{button}</HoverCardTrigger>
-      <HoverCardContent className="w-72 p-3" side="top">
-        <div className="space-y-2">
-          {recentComments.slice(0, 3).map((c, i) => (
-            <div key={i} className="text-xs">
-              <div className="flex justify-between text-muted-foreground">
-                <span className="font-medium">{c.author}</span>
-                <span>{c.date}</span>
-              </div>
-              <p className="line-clamp-2 mt-0.5">{c.content}</p>
-            </div>
-          ))}
-          {count > 3 && (
-            <p className="text-xs text-muted-foreground text-center">
-              +{count - 3} autre{count - 3 > 1 ? "s" : ""}
-            </p>
-          )}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  )
-}
-
-export { StepCommentBubble }

package/src/components/waka-step-comment-panel/index.tsx

@@ -1,106 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../sheet"
-import { ActorBadge } from "../waka-actor-badge"
-
-export interface StepComment {
-  id: string
-  authorName: string
-  authorRole: string
-  content: string
-  createdAt: string
-  isEdited: boolean
-}
-
-export interface StepCommentPanelProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  comments: StepComment[]
-  onAdd: (content: string) => void
-  onEdit?: (id: string, content: string) => void
-  onDelete?: (id: string) => void
-  canEditDelete?: boolean
-  isLoading?: boolean
-}
-
-function StepCommentPanel({
-  open, onOpenChange, comments, onAdd, onEdit, onDelete, canEditDelete, isLoading,
-}: StepCommentPanelProps) {
-  const [draft, setDraft] = React.useState("")
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!draft.trim()) return
-    onAdd(draft.trim())
-    setDraft("")
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex flex-col w-full sm:max-w-md">
-        <SheetHeader>
-          <SheetTitle>Commentaires ({comments.length})</SheetTitle>
-        </SheetHeader>
-
-        <div className="flex-1 overflow-y-auto space-y-3 py-4">
-          {comments.length === 0 && (
-            <p className="text-sm text-muted-foreground text-center py-8">Aucun commentaire</p>
-          )}
-          {comments.map((c) => (
-            <div key={c.id} className="rounded-lg border p-3 space-y-1.5">
-              <div className="flex items-center justify-between">
-                <ActorBadge role={c.authorRole} name={c.authorName} />
-                <span className="text-xs text-muted-foreground">{c.createdAt}</span>
-              </div>
-              <p className="text-sm whitespace-pre-wrap">{c.content}</p>
-              <div className="flex items-center gap-2">
-                {c.isEdited && <span className="text-xs text-muted-foreground italic">(modifie)</span>}
-                {canEditDelete && onEdit && (
-                  <button
-                    className="text-xs text-blue-600 hover:underline"
-                    onClick={() => {
-                      const newContent = prompt("Modifier le commentaire:", c.content)
-                      if (newContent && newContent !== c.content) onEdit(c.id, newContent)
-                    }}
-                  >
-                    Modifier
-                  </button>
-                )}
-                {canEditDelete && onDelete && (
-                  <button
-                    className="text-xs text-red-600 hover:underline"
-                    onClick={() => {
-                      if (confirm("Supprimer ce commentaire ?")) onDelete(c.id)
-                    }}
-                  >
-                    Supprimer
-                  </button>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <form onSubmit={handleSubmit} className="border-t pt-3 flex gap-2">
-          <textarea
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            placeholder="Ajouter un commentaire..."
-            className="flex-1 min-h-[60px] rounded-md border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
-            disabled={isLoading}
-          />
-          <button
-            type="submit"
-            disabled={!draft.trim() || isLoading}
-            className="self-end rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-          >
-            Envoyer
-          </button>
-        </form>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-export { StepCommentPanel }

package/src/components/waka-step-permission-matrix/index.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip"
-
-export interface PermissionAction {
-  key: string
-  label: string
-}
-
-export interface StepPermissionMatrixProps {
-  roles: string[]
-  actions: PermissionAction[]
-  value: Record<string, string[]>
-  onChange: (role: string, action: string, enabled: boolean) => void
-}
-
-function StepPermissionMatrix({ roles, actions, value, onChange }: StepPermissionMatrixProps) {
-  return (
-    <TooltipProvider>
-      <div className="overflow-x-auto">
-        <table className="w-full text-xs">
-          <thead>
-            <tr className="border-b">
-              <th className="text-left p-2 font-medium text-muted-foreground sticky left-0 bg-background">Role</th>
-              {actions.map((a) => (
-                <th key={a.key} className="p-2 text-center">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="font-medium cursor-help">{a.key.replace("_", " ").slice(0, 8)}</span>
-                    </TooltipTrigger>
-                    <TooltipContent>{a.label}</TooltipContent>
-                  </Tooltip>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {roles.map((role) => (
-              <tr key={role} className="border-b hover:bg-muted/30">
-                <td className="p-2 font-medium sticky left-0 bg-background">{role}</td>
-                {actions.map((a) => {
-                  const checked = (value[role] ?? []).includes(a.key)
-                  return (
-                    <td key={a.key} className="p-2 text-center">
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        onChange={(e) => onChange(role, a.key, e.target.checked)}
-                        className="rounded border-input"
-                        aria-label={`${role} — ${a.label}`}
-                      />
-                    </td>
-                  )
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </TooltipProvider>
-  )
-}
-
-export { StepPermissionMatrix }