@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/src/blocks/team-form/index.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+import { Search } from "lucide-react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Label } from "../../components/label"
+import { Textarea } from "../../components/textarea"
+import { Checkbox } from "../../components/checkbox"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { RoleSelect } from "../_shared/identity/RoleSelect"
+import type { UserRecord, RoleDefinition } from "../_shared/identity/types"
+
+export interface TeamFormValues {
+  name: string
+  description?: string
+  members: Array<{ userId: string; roleId: string }>
+}
+
+export interface WakaTeamFormProps {
+  availableUsers: UserRecord[]
+  teamRoles: RoleDefinition[]
+  defaultRole?: string
+  initialValues?: Partial<TeamFormValues>
+  onSubmit: (values: TeamFormValues) => Promise<void> | void
+  onCancel?: () => void
+  searchPlaceholder?: string
+  isSubmitting?: boolean
+  className?: string
+}
+
+/** Returns 1-2 uppercase initials for an avatar fallback. */
+function userInitials(u: UserRecord): string {
+  const f = u.firstName?.[0] ?? ''
+  const l = u.lastName?.[0] ?? ''
+  return (f + l).toUpperCase() || u.email[0]?.toUpperCase() || '?'
+}
+
+/**
+ * Formulaire de création/édition d'une équipe avec sélection de membres et attribution de rôles.
+ * Conçu pour être intégré dans un SidePushLayout (~520px).
+ */
+export function WakaTeamForm({
+  availableUsers,
+  teamRoles,
+  defaultRole,
+  initialValues,
+  onSubmit,
+  onCancel,
+  searchPlaceholder = "Rechercher un utilisateur",
+  isSubmitting,
+  className,
+}: WakaTeamFormProps): React.ReactElement {
+  const fallbackRole = defaultRole ?? teamRoles[0]?.id ?? ''
+  const [name, setName] = React.useState(initialValues?.name ?? '')
+  const [description, setDescription] = React.useState(initialValues?.description ?? '')
+  const initialSelection = React.useMemo(() => {
+    const map = new Map<string, string>()
+    initialValues?.members?.forEach((m) => map.set(m.userId, m.roleId))
+    return map
+  }, [initialValues])
+  const [selection, setSelection] = React.useState<Map<string, string>>(initialSelection)
+  const [search, setSearch] = React.useState('')
+  const [submitError, setSubmitError] = React.useState<string | null>(null)
+
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return availableUsers
+    return availableUsers.filter((u) => {
+      const fullName = `${u.firstName ?? ''} ${u.lastName ?? ''}`.toLowerCase()
+      return u.email.toLowerCase().includes(q) || fullName.includes(q)
+    })
+  }, [availableUsers, search])
+
+  const toggle = (userId: string) => {
+    setSelection((prev) => {
+      const next = new Map(prev)
+      if (next.has(userId)) next.delete(userId)
+      else next.set(userId, fallbackRole)
+      return next
+    })
+  }
+
+  const setRole = (userId: string, roleId: string) => {
+    setSelection((prev) => {
+      const next = new Map(prev)
+      if (next.has(userId)) next.set(userId, roleId)
+      return next
+    })
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setSubmitError(null)
+    if (selection.size === 0) {
+      setSubmitError("Aucun membre sélectionné")
+      return
+    }
+    const members = Array.from(selection.entries()).map(([userId, roleId]) => ({ userId, roleId }))
+    await onSubmit({ name, description: description || undefined, members })
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('flex flex-col h-full', className)}>
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="team-name">Nom *</Label>
+          <Input
+            id="team-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            minLength={2}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="team-desc">Description</Label>
+          <Textarea
+            id="team-desc"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label>Membres</Label>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+            <Input
+              aria-label="Rechercher un utilisateur"
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <div className="border rounded-md divide-y max-h-96 overflow-y-auto">
+            {filtered.map((u) => {
+              const checked = selection.has(u.id)
+              const role = selection.get(u.id) ?? fallbackRole
+              const label = `${u.firstName ?? ''} ${u.lastName ?? ''}`.trim() || u.email
+              return (
+                <div key={u.id} className="flex items-center gap-3 p-2">
+                  <Checkbox
+                    id={`m-${u.id}`}
+                    checked={checked}
+                    onCheckedChange={() => toggle(u.id)}
+                    aria-label={label}
+                  />
+                  <Avatar className="size-7">
+                    {u.avatarUrl && <AvatarImage src={u.avatarUrl} alt="" />}
+                    <AvatarFallback className="text-xs">{userInitials(u)}</AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium truncate">{label}</div>
+                    <div className="text-xs text-muted-foreground truncate">{u.email}</div>
+                  </div>
+                  <RoleSelect
+                    value={role}
+                    onChange={(r) => setRole(u.id, r)}
+                    roles={teamRoles}
+                    disabled={!checked}
+                    triggerClassName="w-28"
+                  />
+                </div>
+              )
+            })}
+            {filtered.length === 0 && (
+              <div className="p-4 text-sm text-muted-foreground text-center">Aucun résultat</div>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {selection.size} / {availableUsers.length} membres sélectionnés
+          </p>
+        </div>
+        {submitError && <p role="alert" className="text-sm text-destructive">{submitError}</p>}
+      </div>
+
+      <div className="sticky bottom-0 flex justify-end gap-2 border-t bg-card p-4">
+        {onCancel && (
+          <Button type="button" variant="ghost" onClick={onCancel} disabled={isSubmitting}>
+            Annuler
+          </Button>
+        )}
+        <Button type="submit" disabled={isSubmitting || !name}>
+          {isSubmitting ? "Création…" : "Créer l'équipe"}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/blocks/theme-creator-block/index.tsx

@@ -21,7 +21,7 @@ import { Input } from "../../components/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible"
 import { ScrollArea } from "../../components/scroll-area"
-import { useToast } from "../../hooks/useToast"
+import { useToast } from "../../hooks/use-toast"
 import { useTheme, type ShadcnRegistryItem } from "../../context/theme-provider"
 import { Login, type LoginConfig } from "../login"
 
@@ -484,7 +484,7 @@ function PreviewLogin({ assets, isDark }: { assets?: ThemeBlockAssets; isDark: b
             allow_sso_instagram: false,
             allow_sso_france_connect: false,
           },
-        } as any}
+        } as Partial<LoginConfig> as LoginConfig}
         showSocialLogin
         onSSOGoogle={() => {}}
         onSSOGithub={() => {}}