72Commencer

Équipe

Membres d’équipe et invitations pour les paramètres d’espace de travail d’un produit d’IA. Un compteur de places qui prévisualise les invitations en cours de saisie, une zone d’invitation qui transforme une liste collée en chips vérifiées, des membres avec rôles, recherche, filtres et tri, des invitations en attente avec délais avant renvoi et liens copiables, le transfert de propriété avec confirmation saisie, et la suppression avec annulation.

Open in new tab

Vue d’ensemble

Chaque produit d’IA avec des espaces de travail finit par avoir la même page : qui est dans l’équipe, ce que chacun peut faire, qui a été invité et combien de places il reste. Team est cette page en un seul composant à placer dans une section de paramètres. Il lit vos membres, invitations et nombre de places, et appelle vos handlers quand quelqu’un agit. Il ne modifie jamais les données de lui-même, donc ce qu’il affiche correspond toujours à ce que dit votre serveur.

La zone d’invitation accepte les adresses telles que les gens les ont. Tapez puis appuyez sur virgule, espace ou Enter, ou collez une colonne de tableur, une ligne To: d’un e-mail ou une liste avec des noms comme Ana Lima <[email protected]>. Chaque adresse devient une chip. Les doublons sont supprimés, les mots qui ne sont pas des adresses sont ignorés au collage, et les chips d’adresses invalides, de membres existants et de personnes déjà invitées sont signalées avec la raison, plus un bouton pour toutes les retirer d’un coup. Choisissez le rôle, ajoutez une note facultative et envoyez.

Le compteur de places montre les membres, les invitations en attente et les chips en cours de saisie sur trois couches, pour voir le coût d’une invitation avant de l’envoyer. Les invitations expirées ne retiennent pas de place. Quand les invitations dépasseraient la limite, l’envoi est bloqué en indiquant combien en retirer, et à la limite le compteur devient un appel à l’action Add seats.

Chaque ligne de membre a le rôle de la personne sous forme de menu indiquant ce que chaque rôle peut faire. Les garde-fous sont intégrés : l’unique propriétaire ne peut ni se rétrograder ni partir avant d’avoir transféré la propriété, et les menus le disent au lieu de masquer discrètement l’option. Les admins ne peuvent pas toucher aux propriétaires. Faire de quelqu’un un propriétaire ou baisser votre propre rôle demande d’abord confirmation. Transférer la propriété demande de saisir l’e-mail du nouveau propriétaire, pour que la mauvaise Ana ne reçoive jamais les clés.

Les invitations en attente indiquent quand elles ont été envoyées, quand elles vont expirer et quand elles ont expiré. Resend renouvelle le lien et démarre un délai compté depuis le dernier envoi, donc le compte à rebours survit à un rechargement. Copy invite link place le vrai lien dans le presse-papiers. Supprimer un membre demande une confirmation, puis propose Undo, et le focus passe à la personne suivante au lieu de retomber en haut de la page.

Installation

  1. Ajouter le registre Pro à components.json

    components.json
    {
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

  2. Ajouter votre token

    Créez un token sur votre page de compte et placez-le dans .env.local sous le nom HEXTAUI_PRO_TOKEN.

  3. Ajouter le block

    pnpm dlx shadcn@latest add @hextaui-pro/team

Utilisation

Branchez-le à votre API

TeamSettings est contrôlé : passez members, invites et seats, et mettez-les à jour dans chaque handler. Retournez { email: message } depuis onInvite pour conserver les adresses que votre serveur a refusées, avec la raison sur chaque chip.

"use client"

import * as React from "react"

import { SettingsSection, SettingsShell } from "../settings/settings"
import { TeamSettings, type TeamInvite, type TeamMember } from "@/components/blocks/team/team"

type Team = { seats: number; members: TeamMember[]; invites: TeamInvite[] }

async function call<Result = void>(path: string, init?: RequestInit) {
  const response = await fetch(path, {
    ...init,
    headers: { "content-type": "application/json" },
  })
  if (!response.ok) throw new Error((await response.text()) || "Try again in a moment.")
  return (response.status === 204 ? undefined : await response.json()) as Result
}

export function TeamPage({ team: initial, userId }: { team: Team; userId: string }) {
  const [team, setTeam] = React.useState(initial)
  const reload = async () => setTeam(await call<Team>("/api/team"))

  return (
    <SettingsShell sections={[{ id: "team", label: "Members" }]} className="h-svh">
      <SettingsSection id="team">
        <TeamSettings
          members={team.members}
          invites={team.invites}
          seats={team.seats}
          currentUserId={userId}
          onInvite={async (request) => {
            const { errors } = await call<{ errors: Record<string, string> }>("/api/team/invites", {
              method: "POST",
              body: JSON.stringify(request),
            })
            await reload()
            return errors
          }}
          onRoleChange={async (id, role) => {
            await call(`/api/team/members/${id}`, { method: "PATCH", body: JSON.stringify({ role }) })
            await reload()
          }}
          onRemove={async (id) => {
            await call(`/api/team/members/${id}`, { method: "DELETE" })
            await reload()
          }}
          onResend={async (id) => {
            await call(`/api/team/invites/${id}/resend`, { method: "POST" })
            await reload()
          }}
          onRevoke={async (id) => {
            await call(`/api/team/invites/${id}`, { method: "DELETE" })
            await reload()
          }}
          upgradeHref="/billing?add=seats"
        />
      </SettingsSection>
    </SettingsShell>
  )
}

Uniquement ce que vous autorisez

Chaque action n’apparaît que si son handler est défini, et seulement pour les personnes qui y ont droit. Sans onInvite, il n’y a pas de zone d’invitation, et les membres et lecteurs voient la liste sans menus.

"use client"

import { TeamSettings, type TeamMember } from "@/components/blocks/team/team"

const members: TeamMember[] = [
  { id: "u1", name: "Mia Chen", email: "[email protected]", role: "owner", lastActiveAt: Date.now() },
  { id: "u2", name: "Jonas Weber", email: "[email protected]", role: "admin", lastActiveAt: null },
]

export function ReadOnlyTeam({ userId }: { userId: string }) {
  return <TeamSettings members={members} currentUserId={userId} seats={5} />
}

export function OwnerTeam({ userId }: { userId: string }) {
  return (
    <TeamSettings
      members={members}
      currentUserId={userId}
      seats={5}
      onRoleChange={async () => {}}
      onRemove={async () => {}}
      onTransferOwnership={async (id) => {
        await fetch(`/api/team/owner`, { method: "PUT", body: JSON.stringify({ id }) })
      }}
    />
  )
}

Annuler une suppression

Passez onRestore et le toast après une suppression reçoit un bouton Undo qui vous remet le membre supprimé à rajouter.

"use client"

import * as React from "react"

import { TeamSettings, type TeamMember } from "@/components/blocks/team/team"

export function TeamWithUndo({ initial, userId }: { initial: TeamMember[]; userId: string }) {
  const [members, setMembers] = React.useState(initial)

  return (
    <TeamSettings
      members={members}
      currentUserId={userId}
      onRemove={async (id) => {
        await fetch(`/api/team/members/${id}`, { method: "DELETE" })
        setMembers((current) => current.filter((member) => member.id !== id))
      }}
      onRestore={async (member) => {
        await fetch(`/api/team/members`, { method: "POST", body: JSON.stringify(member) })
        setMembers((current) => [...current, member])
      }}
    />
  )
}

Anatomie

Les parties à composer, de l’extérieur vers l’intérieur.

PartieDescription
TeamSettingsToute la page : places, zone d’invitation, invitations en attente, membres et ligne facultative d’adhésion automatique par domaine. À placer dans une SettingsSection.
parseEmailListL’analyseur derrière la zone d’invitation. Découpe le texte collé ou saisi en adresses en minuscules, déballe les formes Name <email> et mailto:, et au collage ignore les mots qui ne sont pas des adresses.
teamRolesLes quatre rôles avec leurs libellés et descriptions, du plus au moins d’accès.

Référence de l’API

TeamSettings

PropTypePar défaut
members{ id, name, email, role, avatarUrl?, lastActiveAt?, joinedAt? }. lastActiveAt à null affiche Not yet active.
TeamMember[]–
invites{ id, email, role, sentAt, expiresAt, link? }. Les heures acceptent un Date, une chaîne ISO ou des millisecondes. link active Copy invite link.
TeamInvite[][]
currentUserIdLe membre connecté. Son rôle détermine quelles actions apparaissent.
string–
seatsPlaces du forfait. Les membres et les invitations non expirées en utilisent une chacun. Omettez-le pour des places illimitées.
number–
domainAffiche une ligne qui permet aux personnes ayant une adresse e-mail d’entreprise vérifiée de rejoindre sans invitation.
{ name, verified, autoJoin, role? }–
resendCooldownSecondes après l’envoi d’une invitation avant de pouvoir la renvoyer.
number60
pageSizeNombre de membres affichés avant Show more.
number50
onInviteAjoute la zone d’invitation. Retournez des messages par e-mail pour les adresses que votre serveur a refusées ; elles restent sous forme de chips avec le message. Levez une erreur pour conserver toutes les chips et afficher l’erreur sur le bouton.
({ emails, role, note }) => void | { [email]: message } | Promise–
onRoleChangeAjoute le menu de rôle. La ligne affiche un spinner jusqu’à la résolution, et un toast en cas d’erreur.
(memberId, role) => void | Promise–
onRemoveAjoute Remove from team, et Leave team sur votre propre ligne. S’il lève une erreur, la boîte de dialogue reste ouverte avec le message.
(memberId) => void | Promise–
onRestoreAjoute Undo au toast après une suppression, avec le membre tel qu’il était.
(member) => void | Promise–
onTransferOwnershipAjoute Transfer ownership pour les propriétaires, confirmé en saisissant l’e-mail du nouveau propriétaire.
(memberId) => void | Promise–
onResendAjoute Resend. Mettez à jour sentAt et expiresAt pour que le délai redémarre et que le lien soit renouvelé.
(inviteId) => void | Promise–
onRevokeAjoute Revoke invite.
(inviteId) => void | Promise–
onAutoJoinChangeFait fonctionner le switch de domaine. Il vibre et reste en place si cet appel lève une erreur.
(enabled) => void | Promise–
onUpgradeAjoute un bouton Add seats, qui devient l’action principale quand toutes les places sont prises.
() => void–
upgradeHrefFait de Add seats un lien à la place.
string–
classNameClasses pour le wrapper, une colonne de groupes.
string–

parseEmailList

Renvoie { emails, skipped }.

PropTypePar défaut
textN’importe quel texte contenant des adresses, séparées par des virgules, des points-virgules, des espaces, des tabulations ou des retours à la ligne.
string–
options.pasteIgnore les mots sans @ quand au moins une adresse est présente, et les compte dans skipped.
booleanfalse

Clavier

ToucheAction
EnterDans la zone d’invitation, transforme ce que vous avez saisi en chip. Appuyez de nouveau sur une zone vide pour envoyer.
,Transforme aussi ce que vous avez saisi en chip, tout comme l’espace et le point-virgule.
BackspaceDans une zone d’invitation vide, passe à la dernière chip. Backspace ou Delete la supprime et passe à la précédente.
⌘EnterEnvoie les invitations depuis la zone d’adresses ou la note. Ctrl+Enter sous Windows et Linux.
EscapeEfface la recherche de membres, ou ferme un menu ou une boîte de dialogue ouverts.

Accessibilité

  • Les lignes de membres sont des éléments de liste nommés d’après la personne. Les menus de rôle sont nommés comme « Admin, change role for Ana Lima » et le bouton supplémentaire comme « More actions for Ana Lima ».
  • Les chips qui ne peuvent pas être envoyées portent leur raison dans leur nom, et la liste des problèmes sous la zone est rattachée au champ comme description.
  • L’ajout d’adresses, l’envoi, les changements de rôle et les suppressions sont annoncés poliment dans une seule région live. Les erreurs dans les boîtes de dialogue sont annoncées comme des alertes.
  • Les actions désactivées s’expliquent : le menu de rôle et le menu supplémentaire disent pourquoi l’unique propriétaire ne peut pas changer de rôle ni partir, et Resend reste focalisable pendant son délai avec le temps restant dans son nom.
  • Après une suppression, le focus passe aux actions du membre suivant, ou du précédent en fin de liste. Révoquer une invitation fait de même pour les invitations.
  • Le compteur de places est un meter avec son libellé et le total en texte. Avec réduction des animations, il change sans glisser.

Construit avec

Les composants HextaUI gratuits dont Team est constitué. Chacun s’installe séparément.

Code

3 fichiers, ajoutés à components/blocks/team.