@wakastellar/ui 4.0.0 → 4.1.1

package/src/blocks/api-keys-manager/index.tsx

@@ -0,0 +1,442 @@
+"use client"
+
+import * as React from "react"
+import { KeyRound, Plus, MoreHorizontal, RefreshCw, Trash2, Copy, AlertTriangle } from "lucide-react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Label } from "../../components/label"
+import { Badge } from "../../components/badge"
+import { Checkbox } from "../../components/checkbox"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../components/alert-dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+
+export interface ScopeDefinition {
+  id: string
+  label: string
+  description?: string
+}
+
+export interface ApiKeyRecord {
+  id: string
+  name: string
+  prefix: string
+  scopes: string[]
+  lastUsedAt?: Date
+  expiresAt?: Date
+  status: 'active' | 'rotating' | 'revoked'
+  createdAt: Date
+}
+
+export interface CreateKeyPayload {
+  name: string
+  scopes: string[]
+  expiresAt?: Date
+}
+
+export interface WakaApiKeysManagerProps {
+  keys: ApiKeyRecord[]
+  scopes: ScopeDefinition[]
+  onCreate: (payload: CreateKeyPayload) => Promise<{ token: string }>
+  onRevoke: (keyId: string) => Promise<void> | void
+  onRotate: (keyId: string, gracePeriodDays: number) => Promise<{ newToken: string }>
+  graceDaysOptions?: number[]
+  isLoading?: boolean
+  className?: string
+}
+
+type DialogState =
+  | { kind: 'closed' }
+  | { kind: 'create' }
+  | { kind: 'rotate'; key: ApiKeyRecord }
+  | { kind: 'revoke'; key: ApiKeyRecord }
+  | { kind: 'one-time'; token: string; keyName: string }
+
+/** Manages API keys for a tenant: list, create, rotate (with grace period), and revoke. Token is shown once and cleared from state on dialog close. */
+export function WakaApiKeysManager({
+  keys,
+  scopes,
+  onCreate,
+  onRevoke,
+  onRotate,
+  graceDaysOptions = [0, 7, 30],
+  isLoading,
+  className,
+}: WakaApiKeysManagerProps): React.ReactElement {
+  const [dialog, setDialog] = React.useState<DialogState>({ kind: 'closed' })
+  const close = () => setDialog({ kind: 'closed' })
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold flex items-center gap-2">
+          <KeyRound className="size-5" /> Clés API
+        </h2>
+        <Button onClick={() => setDialog({ kind: 'create' })}>
+          <Plus className="size-4 mr-2" /> Créer une clé
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="p-6 text-sm text-muted-foreground">Chargement…</div>
+      ) : keys.length === 0 ? (
+        <div className="border rounded-md p-12 text-center text-sm text-muted-foreground">
+          Aucune clé API. Créez votre première clé pour démarrer.
+        </div>
+      ) : (
+        <div className="border rounded-md overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Nom</TableHead>
+                <TableHead>Préfixe</TableHead>
+                <TableHead>Scopes</TableHead>
+                <TableHead>Dernière utilisation</TableHead>
+                <TableHead>Expiration</TableHead>
+                <TableHead>Statut</TableHead>
+                <TableHead className="w-12" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {keys.map((k) => (
+                <TableRow key={k.id}>
+                  <TableCell className="font-medium">{k.name}</TableCell>
+                  <TableCell className="font-mono text-xs">{k.prefix}…</TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {k.scopes.map((s) => {
+                        const def = scopes.find((sd) => sd.id === s)
+                        return <Badge key={s} variant="secondary">{def?.label ?? s}</Badge>
+                      })}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {k.lastUsedAt ? k.lastUsedAt.toLocaleDateString() : '—'}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {k.expiresAt ? k.expiresAt.toLocaleDateString() : '—'}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={k.status === 'active' ? 'default' : k.status === 'rotating' ? 'secondary' : 'destructive'}>
+                      {k.status === 'active' ? 'Actif' : k.status === 'rotating' ? 'En rotation' : 'Révoqué'}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" aria-label="Actions">
+                          <MoreHorizontal className="size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => setDialog({ kind: 'rotate', key: k })}
+                          disabled={k.status === 'revoked'}
+                        >
+                          <RefreshCw className="size-4 mr-2" /> Rotation
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => setDialog({ kind: 'revoke', key: k })}
+                          disabled={k.status === 'revoked'}
+                          className="text-destructive focus:text-destructive"
+                        >
+                          <Trash2 className="size-4 mr-2" /> Révoquer
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {dialog.kind === 'create' && (
+        <CreateKeyDialog
+          scopes={scopes}
+          onCancel={close}
+          onSubmit={async (payload) => {
+            const { token } = await onCreate(payload)
+            setDialog({ kind: 'one-time', token, keyName: payload.name })
+          }}
+        />
+      )}
+
+      {dialog.kind === 'rotate' && (
+        <RotateKeyDialog
+          keyRecord={dialog.key}
+          graceDaysOptions={graceDaysOptions}
+          onCancel={close}
+          onSubmit={async (graceDays) => {
+            const rotateKey = dialog.kind === 'rotate' ? dialog.key : null
+            if (!rotateKey) return
+            const { newToken } = await onRotate(rotateKey.id, graceDays)
+            setDialog({ kind: 'one-time', token: newToken, keyName: rotateKey.name })
+          }}
+        />
+      )}
+
+      {dialog.kind === 'revoke' && (
+        <AlertDialog open onOpenChange={(o) => !o && close()}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Révoquer cette clé ?</AlertDialogTitle>
+              <AlertDialogDescription>
+                La clé "{dialog.key.name}" sera immédiatement invalidée. Cette action est irréversible.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Annuler</AlertDialogCancel>
+              <AlertDialogAction onClick={async () => { await onRevoke(dialog.key.id); close() }}>
+                Révoquer
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+
+      {dialog.kind === 'one-time' && (
+        <OneTimeTokenDialog
+          token={dialog.token}
+          keyName={dialog.keyName}
+          onClose={close}
+        />
+      )}
+    </div>
+  )
+}
+
+interface CreateKeyDialogProps {
+  scopes: ScopeDefinition[]
+  onCancel: () => void
+  onSubmit: (payload: CreateKeyPayload) => Promise<void>
+}
+
+function CreateKeyDialog({ scopes, onCancel, onSubmit }: CreateKeyDialogProps): React.ReactElement {
+  const [name, setName] = React.useState('')
+  const [selected, setSelected] = React.useState<Set<string>>(new Set())
+  const [expiresInDays, setExpiresInDays] = React.useState<string>('never')
+  const [busy, setBusy] = React.useState(false)
+
+  const toggle = (id: string) =>
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const submit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!name || selected.size === 0) return
+    setBusy(true)
+    try {
+      const expiresAt =
+        expiresInDays === 'never'
+          ? undefined
+          : new Date(Date.now() + parseInt(expiresInDays, 10) * 86400000)
+      await onSubmit({ name, scopes: Array.from(selected), expiresAt })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Créer une clé API</DialogTitle>
+          <DialogDescription className="sr-only">
+            Formulaire de création d'une clé API
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={submit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="key-name">Nom</Label>
+            <Input id="key-name" value={name} onChange={(e) => setName(e.target.value)} required />
+          </div>
+          <div className="space-y-2">
+            <Label>Scopes</Label>
+            <div className="space-y-1.5">
+              {scopes.map((s) => (
+                <label key={s.id} className="flex items-center gap-2 text-sm">
+                  <Checkbox
+                    id={`scope-${s.id}`}
+                    checked={selected.has(s.id)}
+                    onCheckedChange={() => toggle(s.id)}
+                    aria-label={s.label}
+                  />
+                  <span>{s.label}</span>
+                  {s.description && <span className="text-xs text-muted-foreground">— {s.description}</span>}
+                </label>
+              ))}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="key-exp">Expiration</Label>
+            <Select value={expiresInDays} onValueChange={setExpiresInDays}>
+              <SelectTrigger id="key-exp"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="never">Jamais</SelectItem>
+                <SelectItem value="30">30 jours</SelectItem>
+                <SelectItem value="90">90 jours</SelectItem>
+                <SelectItem value="365">1 an</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={onCancel}>Annuler</Button>
+            <Button type="submit" disabled={busy || !name || selected.size === 0}>
+              {busy ? "Génération…" : "Générer la clé"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+interface RotateKeyDialogProps {
+  keyRecord: ApiKeyRecord
+  graceDaysOptions: number[]
+  onCancel: () => void
+  onSubmit: (graceDays: number) => Promise<void>
+}
+
+function RotateKeyDialog({ keyRecord, graceDaysOptions, onCancel, onSubmit }: RotateKeyDialogProps): React.ReactElement {
+  const [graceDays, setGraceDays] = React.useState<string>(String(graceDaysOptions[0] ?? 0))
+  const [busy, setBusy] = React.useState(false)
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rotation de "{keyRecord.name}"</DialogTitle>
+          <DialogDescription>
+            Une nouvelle clé sera générée. Vous pouvez choisir une période de grâce durant laquelle l'ancienne clé reste valide.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 py-2">
+          <Label htmlFor="grace">Période de grâce</Label>
+          <Select value={graceDays} onValueChange={setGraceDays}>
+            <SelectTrigger id="grace"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {graceDaysOptions.map((d) => (
+                <SelectItem key={d} value={String(d)}>
+                  {d === 0 ? "Immédiat" : `${d} jour${d > 1 ? 's' : ''}`}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <DialogFooter>
+          <Button type="button" variant="ghost" onClick={onCancel} disabled={busy}>Annuler</Button>
+          <Button
+            type="button"
+            onClick={async () => {
+              setBusy(true)
+              try { await onSubmit(parseInt(graceDays, 10)) } finally { setBusy(false) }
+            }}
+            disabled={busy}
+          >
+            {busy ? "Rotation…" : "Lancer la rotation"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+interface OneTimeTokenDialogProps {
+  token: string
+  keyName: string
+  onClose: () => void
+}
+
+function OneTimeTokenDialog({ token, keyName, onClose }: OneTimeTokenDialogProps): React.ReactElement {
+  const [copied, setCopied] = React.useState(false)
+  const tokenRef = React.useRef(token)
+
+  React.useEffect(() => {
+    return () => {
+      tokenRef.current = ''
+    }
+  }, [])
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(token)
+      setCopied(true)
+    } catch {
+      // clipboard may be blocked; user can copy manually
+    }
+  }
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Token de "{keyName}"</DialogTitle>
+          <DialogDescription className="flex items-start gap-2 text-destructive">
+            <AlertTriangle className="size-4 mt-0.5 shrink-0" />
+            <span>
+              Ce token ne sera plus affiché. Copiez-le maintenant et stockez-le dans un coffre-fort.
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+        <div
+          aria-live="polite"
+          className="font-mono text-sm break-all rounded bg-muted p-3 select-all"
+        >
+          {token}
+        </div>
+        <DialogFooter className="gap-2">
+          <Button type="button" variant="outline" onClick={copy}>
+            <Copy className="size-4 mr-2" /> {copied ? "Copié !" : "Copier"}
+          </Button>
+          <Button type="button" onClick={onClose}>J'ai copié le token</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/blocks/avatar-upload/AvatarUpload.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { WakaAvatarUpload } from './index'
+
+const meta: Meta<typeof WakaAvatarUpload> = {
+  title: 'Blocks/Identity/AvatarUpload',
+  component: WakaAvatarUpload,
+}
+export default meta
+
+type Story = StoryObj<typeof WakaAvatarUpload>
+
+export const Default: Story = {
+  args: {
+    onChange: (blob, dataUrl) => console.log('saved', blob.size, dataUrl.slice(0, 64)),
+  },
+}
+
+export const WithExistingAvatar: Story = {
+  args: {
+    value: 'https://i.pravatar.cc/256?img=12',
+    onChange: () => {},
+  },
+}
+
+export const Square: Story = {
+  args: { shape: 'square', onChange: () => {} },
+}

package/src/blocks/avatar-upload/WakaAvatarUpload.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Blocks/Identity/AvatarUpload/Docs" />
+
+# WakaAvatarUpload
+
+Drop / pick + crop interactif (zoom, rotation) + resize Canvas vers un format compact (`image/webp` par défaut). Retourne un `Blob` et un `dataUrl` au consommateur via `onChange`.
+
+## Usage
+
+```tsx
+import { WakaAvatarUpload } from '@wakastellar/ui'
+
+<WakaAvatarUpload
+  value={user.avatarUrl}
+  size={256}
+  outputFormat="image/webp"
+  outputQuality={0.85}
+  onChange={async (blob) => {
+    const fd = new FormData()
+    fd.append('avatar', blob, 'avatar.webp')
+    await fetch('/api/me/avatar', { method: 'POST', body: fd })
+  }}
+/>
+```
+
+## Sécurité
+
+- Refus côté client si MIME ≠ `image/*`
+- Refus si taille source > `maxSourceSizeMB` (défaut 8)
+- Aucune image n'est persistée côté client après `onChange` (les `URL.createObjectURL` sont révoquées).