@wakastellar/ui 4.0.0 → 4.0.1

package/src/blocks/avatar-upload/index.tsx

@@ -0,0 +1,258 @@
+"use client"
+
+import * as React from "react"
+import Cropper, { type Area } from "react-easy-crop"
+import { Upload, RotateCw, ZoomIn } from "lucide-react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Slider } from "../../components/slider"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+
+export interface WakaAvatarUploadProps {
+  value?: string
+  onChange: (blob: Blob, dataUrl: string) => void
+  size?: number
+  outputFormat?: 'image/webp' | 'image/jpeg' | 'image/png'
+  outputQuality?: number
+  maxSourceSizeMB?: number
+  shape?: 'circle' | 'square'
+  labels?: {
+    dropzone?: string
+    zoom?: string
+    rotate?: string
+    save?: string
+    cancel?: string
+  }
+  className?: string
+}
+
+const DEFAULTS = {
+  size: 256,
+  outputFormat: 'image/webp' as const,
+  outputQuality: 0.85,
+  maxSourceSizeMB: 8,
+  shape: 'circle' as const,
+}
+
+/**
+ * Computes the bounding-box dimensions after rotating a rectangle of given width/height.
+ */
+function rotateSize(width: number, height: number, rotation: number): { width: number; height: number } {
+  const rotRad = (rotation * Math.PI) / 180
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
+  }
+}
+
+/**
+ * Crops and resizes an image to a square blob using Canvas.
+ *
+ * Uses a two-canvas pipeline because `react-easy-crop`'s `croppedAreaPixels`
+ * are expressed in the rotated bounding-box coordinate space:
+ *   1. Draw the source rotated onto a temporary canvas the size of the rotated bbox
+ *   2. Crop from that rotated canvas into the final square output canvas
+ */
+async function cropToBlob(
+  sourceUrl: string,
+  pixels: Area,
+  rotation: number,
+  size: number,
+  format: string,
+  quality: number
+): Promise<{ blob: Blob; dataUrl: string }> {
+  const img = await loadImage(sourceUrl)
+  const rotRad = (rotation * Math.PI) / 180
+  const { width: bBoxWidth, height: bBoxHeight } = rotateSize(img.width, img.height, rotation)
+
+  // 1) Draw rotated source into an intermediate canvas
+  const rotated = document.createElement('canvas')
+  rotated.width = bBoxWidth
+  rotated.height = bBoxHeight
+  const rctx = rotated.getContext('2d')
+  if (!rctx) throw new Error('Canvas 2D context not available')
+  rctx.translate(bBoxWidth / 2, bBoxHeight / 2)
+  rctx.rotate(rotRad)
+  rctx.translate(-img.width / 2, -img.height / 2)
+  rctx.drawImage(img, 0, 0)
+
+  // 2) Crop from the rotated canvas into the final output canvas
+  const output = document.createElement('canvas')
+  output.width = size
+  output.height = size
+  const octx = output.getContext('2d')
+  if (!octx) throw new Error('Canvas 2D context not available')
+  octx.drawImage(
+    rotated,
+    pixels.x,
+    pixels.y,
+    pixels.width,
+    pixels.height,
+    0,
+    0,
+    size,
+    size
+  )
+
+  const dataUrl = output.toDataURL(format, quality)
+  const blob: Blob = await new Promise((resolve, reject) =>
+    output.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error('toBlob failed'))),
+      format,
+      quality
+    )
+  )
+  return { blob, dataUrl }
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.src = src
+  })
+}
+
+/**
+ * Avatar upload block with interactive crop (zoom, pan, rotation) and Canvas resize.
+ */
+export function WakaAvatarUpload({
+  value,
+  onChange,
+  size = DEFAULTS.size,
+  outputFormat = DEFAULTS.outputFormat,
+  outputQuality = DEFAULTS.outputQuality,
+  maxSourceSizeMB = DEFAULTS.maxSourceSizeMB,
+  shape = DEFAULTS.shape,
+  labels,
+  className,
+}: WakaAvatarUploadProps): React.ReactElement {
+  const [sourceUrl, setSourceUrl] = React.useState<string | null>(null)
+  const [crop, setCrop] = React.useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = React.useState(1)
+  const [rotation, setRotation] = React.useState(0)
+  const [pixels, setPixels] = React.useState<Area | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
+  const [busy, setBusy] = React.useState(false)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const onPick = () => inputRef.current?.click()
+
+  const onFile = (file: File | undefined | null) => {
+    setError(null)
+    if (!file) return
+    if (!file.type.startsWith('image/')) {
+      setError('Format invalide : seules les images sont acceptées')
+      return
+    }
+    if (file.size > maxSourceSizeMB * 1024 * 1024) {
+      setError(`Fichier trop volumineux (max ${maxSourceSizeMB} Mo)`)
+      return
+    }
+    const url = URL.createObjectURL(file)
+    setSourceUrl(url)
+    setCrop({ x: 0, y: 0 })
+    setZoom(1)
+    setRotation(0)
+  }
+
+  const handleSave = async () => {
+    if (!sourceUrl || !pixels) return
+    setBusy(true)
+    try {
+      const { blob, dataUrl } = await cropToBlob(
+        sourceUrl,
+        pixels,
+        rotation,
+        size,
+        outputFormat,
+        outputQuality
+      )
+      await Promise.resolve(onChange(blob, dataUrl))
+      URL.revokeObjectURL(sourceUrl)
+      setSourceUrl(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Échec du traitement de l'image")
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleCancel = () => {
+    if (sourceUrl) URL.revokeObjectURL(sourceUrl)
+    setSourceUrl(null)
+    setError(null)
+  }
+
+  if (!sourceUrl) {
+    return (
+      <div className={cn('flex flex-col items-center gap-3', className)}>
+        <Avatar className={cn('size-24', shape === 'square' && 'rounded-md')}>
+          {value && <AvatarImage src={value} alt="" />}
+          <AvatarFallback>
+            <Upload className="size-6" />
+          </AvatarFallback>
+        </Avatar>
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/*"
+          aria-label="Sélectionner un avatar"
+          className="sr-only"
+          onChange={(e) => onFile(e.target.files?.[0])}
+        />
+        <Button type="button" variant="outline" onClick={onPick}>
+          {labels?.dropzone ?? 'Sélectionner une image'}
+        </Button>
+        {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="relative w-full h-64 bg-muted rounded-md overflow-hidden">
+        <Cropper
+          image={sourceUrl}
+          crop={crop}
+          zoom={zoom}
+          rotation={rotation}
+          aspect={1}
+          cropShape={shape === 'circle' ? 'round' : 'rect'}
+          onCropChange={setCrop}
+          onZoomChange={setZoom}
+          onRotationChange={setRotation}
+          onCropComplete={(_, areaPixels) => setPixels(areaPixels)}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <label className="flex items-center gap-2 text-xs text-muted-foreground">
+            <ZoomIn className="size-3" /> {labels?.zoom ?? 'Zoom'}
+          </label>
+          <Slider min={1} max={3} step={0.05} value={[zoom]} onValueChange={(v) => setZoom(v[0])} />
+        </div>
+        <div className="space-y-2">
+          <label className="flex items-center gap-2 text-xs text-muted-foreground">
+            <RotateCw className="size-3" /> {labels?.rotate ?? 'Rotation'}
+          </label>
+          <Slider min={0} max={360} step={1} value={[rotation]} onValueChange={(v) => setRotation(v[0])} />
+        </div>
+      </div>
+
+      {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
+
+      <div className="flex justify-end gap-2">
+        <Button type="button" variant="ghost" onClick={handleCancel} disabled={busy}>
+          {labels?.cancel ?? 'Annuler'}
+        </Button>
+        <Button type="button" onClick={handleSave} disabled={busy || !pixels}>
+          {busy ? 'Traitement…' : (labels?.save ?? 'Enregistrer')}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/blocks/empty-states/index.tsx

@@ -370,7 +370,7 @@ export function WakaEmptyState({
           {illustration || (
             icon ? (
               <div className="flex items-center justify-center rounded-full bg-muted p-6">
-                {React.cloneElement(icon as React.ReactElement, {
+                {React.cloneElement(icon as React.ReactElement<{ className?: string }>, {
                   className: cn(sizeClasses[size].icon, "text-muted-foreground"),
                 })}
               </div>

package/src/blocks/index.ts

@@ -33,7 +33,10 @@ export type { WakaHeaderProps, HeaderAction, HeaderFilter, HeaderNotification, H
 export * from './dashboard'
 export * from './settings'
 export * from './profile'
+export * from './profile-list'
 export * from './user-management'
+export * from './avatar-upload'
+export * from './team-form'
 
 // Content Blocks
 export * from './activity-timeline'
@@ -373,3 +376,9 @@ export {
   type ReportPreview,
   type ScanReportGeneratorProps,
 } from './scan-report-generator'
+
+export * from './api-keys-manager'
+
+// Identity shared utilities
+export { SidePushLayout } from './_shared/identity/SidePushLayout'
+export type { SidePushLayoutProps } from './_shared/identity/SidePushLayout'

package/src/blocks/on-call-schedule/index.tsx

@@ -294,7 +294,7 @@ function WeekView({
   onShiftClick?: (shift: OnCallShift) => void
 }) {
   const days = React.useMemo(() => {
-    const result = []
+    const result: Date[] = []
     for (let i = 0; i < 7; i++) {
       const date = new Date(weekStart)
       date.setDate(date.getDate() + i)

package/src/blocks/profile-list/ProfileList.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { WakaProfileList } from './index'
+import type { ProfileSummary } from './index'
+
+const profiles: ProfileSummary[] = [
+  { id: 'p1', displayName: 'Alice Martin', email: 'alice@x.com', title: 'RSSI', badges: [{ label: 'Admin' }] },
+  { id: 'p2', displayName: 'Bob Dupont', email: 'bob@x.com', title: 'Lead Dev' },
+  { id: 'p3', displayName: 'Claire Petit', email: 'claire@x.com', title: 'Designer', badges: [{ label: 'Pro', variant: 'secondary' }] },
+  { id: 'p4', displayName: 'David Durand', email: 'david@x.com', title: 'Marketing' },
+]
+
+const meta: Meta<typeof WakaProfileList> = {
+  title: 'Blocks/Identity/ProfileList',
+  component: WakaProfileList,
+}
+export default meta
+
+type Story = StoryObj<typeof WakaProfileList>
+
+export const Grid: Story = { args: { profiles, layout: 'grid' } }
+export const List: Story = { args: { profiles, layout: 'list' } }
+export const Empty: Story = { args: { profiles: [] } }
+export const Loading: Story = { args: { profiles: [], isLoading: true } }
+export const Clickable: Story = {
+  args: {
+    profiles,
+    onProfileClick: (p) => alert(`Clicked ${p.displayName}`),
+  },
+}

package/src/blocks/profile-list/WakaProfileList.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Blocks/Identity/ProfileList/Docs" />
+
+# WakaProfileList
+
+Affichage de profils en grille ou en liste. Lecture seule (pour de l'administration utilisateur, voir `WakaUserManagement`).
+
+## Usage
+
+```tsx
+<WakaProfileList
+  profiles={team}
+  layout="grid"
+  onProfileClick={(p) => router.push(`/users/${p.id}`)}
+/>
+```
+
+## Différences avec WakaUserManagement
+
+- `ProfileList` : consultation, navigation, vitrine d'équipe
+- `UserManagement` : administration, invitation, révocation, changement de rôle

package/src/blocks/profile-list/index.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Badge } from "../../components/badge"
+import { Skeleton } from "../../components/skeleton"
+
+export interface ProfileSummary {
+  id: string
+  displayName: string
+  email?: string
+  avatarUrl?: string
+  title?: string
+  badges?: Array<{ label: string; variant?: 'default' | 'secondary' | 'destructive' }>
+  meta?: Array<{ icon?: React.ReactNode; label: string }>
+}
+
+export interface WakaProfileListProps {
+  profiles: ProfileSummary[]
+  layout?: 'grid' | 'list'
+  onProfileClick?: (profile: ProfileSummary) => void
+  renderActions?: (profile: ProfileSummary) => React.ReactNode
+  emptyState?: React.ReactNode
+  isLoading?: boolean
+  className?: string
+}
+
+function profileInitials(p: ProfileSummary): string {
+  const parts = p.displayName.trim().split(/\s+/)
+  return ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')).toUpperCase() || '?'
+}
+
+export function WakaProfileList({
+  profiles,
+  layout = 'grid',
+  onProfileClick,
+  renderActions,
+  emptyState,
+  isLoading,
+  className,
+}: WakaProfileListProps): React.ReactElement {
+  if (isLoading) {
+    return (
+      <div className={cn(
+        layout === 'grid'
+          ? 'grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
+          : 'flex flex-col gap-2',
+        className
+      )}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} data-skeleton="" className="h-32 rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (profiles.length === 0) {
+    return (
+      <div className={cn('p-12 text-center text-sm text-muted-foreground', className)}>
+        {emptyState ?? "Aucun profil à afficher"}
+      </div>
+    )
+  }
+
+  if (layout === 'list') {
+    return (
+      <div className={cn('flex flex-col gap-2', className)}>
+        {profiles.map((p) => (
+          <ProfileRow key={p.id} profile={p} onClick={onProfileClick} renderActions={renderActions} />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(
+      'grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+      className
+    )}>
+      {profiles.map((p) => (
+        <ProfileCard key={p.id} profile={p} onClick={onProfileClick} renderActions={renderActions} />
+      ))}
+    </div>
+  )
+}
+
+interface RowProps {
+  profile: ProfileSummary
+  onClick?: (p: ProfileSummary) => void
+  renderActions?: (p: ProfileSummary) => React.ReactNode
+}
+
+function ProfileCard({ profile, onClick, renderActions }: RowProps): React.ReactElement {
+  const interactive = !!onClick
+  if (interactive) {
+    return (
+      <button
+        type="button"
+        onClick={() => onClick!(profile)}
+        className={cn(
+          'flex flex-col items-center gap-2 rounded-lg border bg-card p-4 text-center',
+          'hover:bg-accent transition-colors'
+        )}
+        aria-label={profile.displayName}
+      >
+        <ProfileCardContent profile={profile} renderActions={renderActions} />
+      </button>
+    )
+  }
+  return (
+    <div className="flex flex-col items-center gap-2 rounded-lg border bg-card p-4 text-center">
+      <ProfileCardContent profile={profile} renderActions={renderActions} />
+    </div>
+  )
+}
+
+function ProfileCardContent({ profile, renderActions }: { profile: ProfileSummary; renderActions?: (p: ProfileSummary) => React.ReactNode }): React.ReactElement {
+  return (
+    <>
+      <Avatar className="size-14">
+        {profile.avatarUrl && <AvatarImage src={profile.avatarUrl} alt="" />}
+        <AvatarFallback>{profileInitials(profile)}</AvatarFallback>
+      </Avatar>
+      <div className="text-center w-full">
+        <div className="font-medium truncate">{profile.displayName}</div>
+        {profile.title && (
+          <div className="text-xs text-muted-foreground truncate">{profile.title}</div>
+        )}
+        {profile.email && (
+          <div className="text-xs text-muted-foreground truncate">{profile.email}</div>
+        )}
+      </div>
+      {profile.badges && profile.badges.length > 0 && (
+        <div className="flex flex-wrap gap-1 justify-center">
+          {profile.badges.map((b, i) => (
+            <Badge key={i} variant={b.variant ?? 'default'}>{b.label}</Badge>
+          ))}
+        </div>
+      )}
+      {renderActions && <div className="mt-2">{renderActions(profile)}</div>}
+    </>
+  )
+}
+
+function ProfileRow({ profile, onClick, renderActions }: RowProps): React.ReactElement {
+  const interactive = !!onClick
+  if (interactive) {
+    return (
+      <button
+        type="button"
+        onClick={() => onClick!(profile)}
+        className={cn(
+          'flex items-center gap-3 rounded-md border bg-card p-3 w-full text-left',
+          'hover:bg-accent transition-colors'
+        )}
+        aria-label={profile.displayName}
+      >
+        <ProfileRowContent profile={profile} renderActions={renderActions} />
+      </button>
+    )
+  }
+  return (
+    <div className="flex items-center gap-3 rounded-md border bg-card p-3 w-full text-left">
+      <ProfileRowContent profile={profile} renderActions={renderActions} />
+    </div>
+  )
+}
+
+function ProfileRowContent({ profile, renderActions }: { profile: ProfileSummary; renderActions?: (p: ProfileSummary) => React.ReactNode }): React.ReactElement {
+  return (
+    <>
+      <Avatar className="size-10 shrink-0">
+        {profile.avatarUrl && <AvatarImage src={profile.avatarUrl} alt="" />}
+        <AvatarFallback>{profileInitials(profile)}</AvatarFallback>
+      </Avatar>
+      <div className="flex-1 min-w-0">
+        <div className="font-medium truncate">{profile.displayName}</div>
+        <div className="text-xs text-muted-foreground truncate">
+          {[profile.title, profile.email].filter(Boolean).join(' • ')}
+        </div>
+      </div>
+      {profile.badges && profile.badges.length > 0 && (
+        <div className="hidden sm:flex gap-1">
+          {profile.badges.map((b, i) => (
+            <Badge key={i} variant={b.variant ?? 'default'}>{b.label}</Badge>
+          ))}
+        </div>
+      )}
+      {renderActions && <div className="ml-2">{renderActions(profile)}</div>}
+    </>
+  )
+}

package/src/blocks/scan-report-generator/index.tsx

@@ -15,6 +15,7 @@
 "use client"
 
 import { useState } from "react"
+import { localDateKey } from "../../utils/local-date"
 import { Badge } from "../../components/badge"
 import { Button } from "../../components/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
@@ -202,7 +203,7 @@ export function ScanReportGenerator({
                 <Input
                   id="startDate"
                   type="date"
-                  value={config.startDate.toISOString().split("T")[0]}
+                  value={localDateKey(config.startDate)}
                   onChange={(e) =>
                     setConfig({ ...config, startDate: new Date(e.target.value) })
                   }
@@ -213,7 +214,7 @@ export function ScanReportGenerator({
                 <Input
                   id="endDate"
                   type="date"
-                  value={config.endDate.toISOString().split("T")[0]}
+                  value={localDateKey(config.endDate)}
                   onChange={(e) => setConfig({ ...config, endDate: new Date(e.target.value) })}
                 />
               </div>

package/src/blocks/team-form/TeamForm.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { WakaTeamForm } from './index'
+import { SidePushLayout } from '../_shared/identity'
+import { Button } from '../../components/button'
+import type { UserRecord, RoleDefinition } from '../_shared/identity'
+
+const roles: RoleDefinition[] = [
+  { id: 'lead', label: 'Lead' },
+  { id: 'member', label: 'Membre' },
+  { id: 'viewer', label: 'Observateur' },
+]
+
+const users: UserRecord[] = Array.from({ length: 12 }, (_, i) => ({
+  id: `u${i}`,
+  email: `user${i}@example.com`,
+  firstName: ['Alice', 'Bob', 'Claire', 'David'][i % 4],
+  lastName: ['Martin', 'Dupont', 'Petit', 'Durand'][i % 4],
+  roleId: 'member',
+  status: 'active' as const,
+}))
+
+const meta: Meta<typeof WakaTeamForm> = {
+  title: 'Blocks/Identity/TeamForm',
+  component: WakaTeamForm,
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+type Story = StoryObj<typeof WakaTeamForm>
+
+export const Default: Story = {
+  args: {
+    availableUsers: users,
+    teamRoles: roles,
+    defaultRole: 'member',
+    onSubmit: (v) => console.log('submit', v),
+  },
+  render: (args) => (
+    <div className="max-w-[520px] h-screen border-l">
+      <WakaTeamForm {...args} />
+    </div>
+  ),
+}
+
+export const InSidePushLayout: Story = {
+  args: { availableUsers: users, teamRoles: roles, defaultRole: 'member', onSubmit: (v) => console.log('submit', v) },
+  render: (args) => {
+    const [open, setOpen] = useState(false)
+    return (
+      <div className="h-screen">
+        <SidePushLayout
+          panel={open ? <WakaTeamForm {...args} onCancel={() => setOpen(false)} /> : null}
+          panelTitle="Nouvelle équipe"
+          onClose={() => setOpen(false)}
+        >
+          <div className="p-6">
+            <Button onClick={() => setOpen(true)}>Créer une équipe</Button>
+          </div>
+        </SidePushLayout>
+      </div>
+    )
+  },
+}

package/src/blocks/team-form/WakaTeamForm.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Blocks/Identity/TeamForm/Docs" />
+
+# WakaTeamForm
+
+Formulaire de création/édition d'une équipe. Sélection multiple d'utilisateurs existants via cases à cocher + Select de rôle par ligne. Pensé pour vivre dans un `SidePushLayout` ~520px.
+
+## Usage seul
+
+```tsx
+<div className="max-w-[520px] h-full border-l">
+  <WakaTeamForm
+    availableUsers={users}
+    teamRoles={roles}
+    onSubmit={async (values) => api.createTeam(values)}
+    onCancel={() => setOpen(false)}
+  />
+</div>
+```
+
+## Usage dans un push panel
+
+```tsx
+<SidePushLayout
+  panel={open ? <WakaTeamForm ... onCancel={() => setOpen(false)} /> : null}
+  panelTitle="Nouvelle équipe"
+  onClose={() => setOpen(false)}
+>
+  <YourTeamsTable />
+</SidePushLayout>
+```