@better-auth-ui/heroui 1.6.8 → 1.6.10

package/src/components/auth/organization/organization-invitations.tsx

@@ -0,0 +1,351 @@
+import type { OrganizationLocalization } from "@better-auth-ui/core/plugins"
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useHasPermission,
+  useListOrganizationInvitations
+} from "@better-auth-ui/react"
+import { ChevronUp, Funnel, Xmark } from "@gravity-ui/icons"
+import {
+  Button,
+  Chip,
+  cn,
+  Dropdown,
+  Label,
+  SearchField,
+  type SortDescriptor,
+  Table
+} from "@heroui/react"
+import { type ComponentProps, type ReactNode, useMemo, useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { InviteMemberDialog } from "./invite-member-dialog"
+import { OrganizationInvitationTableRow } from "./organization-invitation-row"
+import { OrganizationInvitationRowSkeleton } from "./organization-invitation-row-skeleton"
+import { OrganizationInvitationsEmpty } from "./organization-invitations-empty"
+
+/** Props for the {@link OrganizationInvitations} component. */
+export type OrganizationInvitationsProps = {
+  className?: string
+}
+
+/**
+ * Organization invitations table with invite control and per-row actions.
+ */
+export function OrganizationInvitations({
+  className,
+  ...props
+}: OrganizationInvitationsProps & ComponentProps<"div">) {
+  const { authClient, localization } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: invitations, isPending: invitationsPending } =
+    useListOrganizationInvitations(authClient as OrganizationAuthClient)
+
+  const { isPending: invitationPermissionPending } = useHasPermission(
+    authClient as OrganizationAuthClient,
+    {
+      permissions: { invitation: ["cancel"] }
+    }
+  )
+
+  const isPending = invitationsPending || invitationPermissionPending
+
+  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>()
+  const [roleFilter, setRoleFilter] = useState("all")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [search, setSearch] = useState("")
+
+  const filteredInvitations = useMemo(() => {
+    return invitations?.filter(
+      (invitation) =>
+        (roleFilter === "all" || invitation.role === roleFilter) &&
+        (statusFilter === "all" || invitation.status === statusFilter) &&
+        invitation.email.toLowerCase().includes(search.toLowerCase())
+    )
+  }, [search, invitations, roleFilter, statusFilter])
+
+  const sortedInvitations = useMemo(() => {
+    if (!sortDescriptor) return filteredInvitations
+    if (!filteredInvitations) return filteredInvitations
+
+    return [...filteredInvitations].sort((a, b) => {
+      const col = sortDescriptor.column as keyof typeof a
+      let cmp = 0
+
+      if (col === "createdAt") {
+        cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      } else {
+        cmp = String(a[col]).localeCompare(String(b[col]))
+      }
+
+      if (sortDescriptor.direction === "descending") {
+        cmp *= -1
+      }
+
+      return cmp
+    })
+  }, [sortDescriptor, filteredInvitations])
+
+  const [inviteOpen, setInviteOpen] = useState(false)
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)} {...props}>
+      <h3 className="truncate text-sm font-semibold">
+        {organizationLocalization.invitations}
+      </h3>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <SearchField
+            className="min-w-0"
+            aria-label={organizationLocalization.search}
+            value={search}
+            onChange={setSearch}
+            isDisabled={isPending}
+          >
+            <SearchField.Group>
+              <SearchField.SearchIcon />
+
+              <SearchField.Input
+                placeholder={organizationLocalization.search}
+                className="sm:w-[200px]"
+              />
+
+              <SearchField.ClearButton />
+            </SearchField.Group>
+          </SearchField>
+
+          <Dropdown>
+            <Button size="sm" variant="secondary" isDisabled={isPending}>
+              <Funnel />
+
+              {organizationLocalization.role}
+            </Button>
+
+            <Dropdown.Popover>
+              <Dropdown.Menu
+                selectionMode="single"
+                selectedKeys={new Set([roleFilter])}
+                onSelectionChange={(keys) => {
+                  const key = [...keys][0] as string | undefined
+                  setRoleFilter(key ?? "all")
+                }}
+              >
+                <Dropdown.Item
+                  id="all"
+                  textValue={organizationLocalization.all}
+                >
+                  <Label>{organizationLocalization.all}</Label>
+
+                  <Dropdown.ItemIndicator />
+                </Dropdown.Item>
+
+                {Object.entries(roles).map(([key, label]) => (
+                  <Dropdown.Item key={key} id={key} textValue={label}>
+                    <Label>{label}</Label>
+
+                    <Dropdown.ItemIndicator />
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown.Popover>
+          </Dropdown>
+
+          <Dropdown>
+            <Button size="sm" variant="secondary" isDisabled={isPending}>
+              <Funnel />
+
+              {organizationLocalization.status}
+            </Button>
+
+            <Dropdown.Popover>
+              <Dropdown.Menu
+                selectionMode="single"
+                selectedKeys={new Set([statusFilter])}
+                onSelectionChange={(keys) => {
+                  const key = [...keys][0] as string | undefined
+                  setStatusFilter(key ?? "all")
+                }}
+              >
+                <Dropdown.Item
+                  id="all"
+                  textValue={organizationLocalization.all}
+                >
+                  <Label>{organizationLocalization.all}</Label>
+
+                  <Dropdown.ItemIndicator />
+                </Dropdown.Item>
+
+                {["pending", "accepted", "rejected", "canceled"].map(
+                  (status) => (
+                    <Dropdown.Item
+                      key={status}
+                      id={status}
+                      textValue={
+                        organizationLocalization[
+                          status as keyof OrganizationLocalization
+                        ] ?? status
+                      }
+                    >
+                      <Label>
+                        {organizationLocalization[
+                          status as keyof OrganizationLocalization
+                        ] ?? status}
+                      </Label>
+
+                      <Dropdown.ItemIndicator />
+                    </Dropdown.Item>
+                  )
+                )}
+              </Dropdown.Menu>
+            </Dropdown.Popover>
+          </Dropdown>
+        </div>
+
+        {(roleFilter !== "all" || statusFilter !== "all") && (
+          <div className="flex flex-wrap gap-2">
+            {roleFilter !== "all" && (
+              <Chip size="sm" variant="secondary" className="w-fit">
+                <Chip.Label>
+                  {organizationLocalization.role}:{" "}
+                  <span className="capitalize">
+                    {roles?.[roleFilter] ?? roleFilter}
+                  </span>
+                </Chip.Label>
+
+                <button
+                  type="button"
+                  aria-label={organizationLocalization.clear}
+                  className="text-muted hover:text-foreground inline-flex cursor-pointer items-center"
+                  onClick={() => setRoleFilter("all")}
+                >
+                  <Xmark className="size-3" />
+                </button>
+              </Chip>
+            )}
+
+            {statusFilter !== "all" && (
+              <Chip size="sm" variant="secondary" className="w-fit">
+                <Chip.Label>
+                  {organizationLocalization.status}:{" "}
+                  {organizationLocalization[
+                    statusFilter as keyof OrganizationLocalization
+                  ] ?? statusFilter}
+                </Chip.Label>
+
+                <button
+                  type="button"
+                  aria-label={organizationLocalization.clear}
+                  className="text-muted hover:text-foreground inline-flex cursor-pointer items-center"
+                  onClick={() => setStatusFilter("all")}
+                >
+                  <Xmark className="size-3" />
+                </button>
+              </Chip>
+            )}
+          </div>
+        )}
+
+        <Table>
+          <Table.ScrollContainer>
+            <Table.Content
+              aria-label={organizationLocalization.invitations}
+              sortDescriptor={sortDescriptor}
+              onSortChange={(descriptor) => {
+                const shouldReset =
+                  sortDescriptor?.column === descriptor.column &&
+                  descriptor.direction === "ascending"
+                setSortDescriptor(shouldReset ? undefined : descriptor)
+              }}
+            >
+              <Table.Header>
+                <Table.Column allowsSorting isRowHeader id="email">
+                  {({ sortDirection }) => (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {localization.auth.email}
+                    </SortableColumnHeader>
+                  )}
+                </Table.Column>
+
+                <Table.Column allowsSorting id="createdAt">
+                  {({ sortDirection }) => (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {organizationLocalization.invitedAt}
+                    </SortableColumnHeader>
+                  )}
+                </Table.Column>
+
+                <Table.Column allowsSorting id="role">
+                  {({ sortDirection }) => (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {organizationLocalization.role}
+                    </SortableColumnHeader>
+                  )}
+                </Table.Column>
+
+                <Table.Column allowsSorting id="status">
+                  {({ sortDirection }) => (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {organizationLocalization.status}
+                    </SortableColumnHeader>
+                  )}
+                </Table.Column>
+
+                <Table.Column className="text-end">
+                  {organizationLocalization.actions}
+                </Table.Column>
+              </Table.Header>
+
+              <Table.Body
+                renderEmptyState={() => (
+                  <OrganizationInvitationsEmpty
+                    onInvitePress={() => setInviteOpen(true)}
+                  />
+                )}
+              >
+                {isPending ? (
+                  <OrganizationInvitationRowSkeleton />
+                ) : (
+                  sortedInvitations?.map((invitation) => (
+                    <OrganizationInvitationTableRow
+                      key={invitation.id}
+                      invitation={invitation}
+                    />
+                  ))
+                )}
+              </Table.Body>
+            </Table.Content>
+          </Table.ScrollContainer>
+        </Table>
+      </div>
+
+      <InviteMemberDialog isOpen={inviteOpen} onOpenChange={setInviteOpen} />
+    </div>
+  )
+}
+
+function SortableColumnHeader({
+  children,
+  sortDirection
+}: {
+  children: ReactNode
+  sortDirection?: "ascending" | "descending"
+}) {
+  return (
+    <span className="flex items-center justify-between">
+      {children}
+
+      {!!sortDirection && (
+        <ChevronUp
+          className={cn(
+            "size-3 transform transition-transform duration-100 ease-out",
+            sortDirection === "descending" ? "rotate-180" : ""
+          )}
+        />
+      )}
+    </span>
+  )
+}

package/src/components/auth/organization/organization-logo.tsx

@@ -0,0 +1,64 @@
+import { Briefcase } from "@gravity-ui/icons"
+import { Avatar, type AvatarProps, cn, Skeleton } from "@heroui/react"
+import type { Organization } from "better-auth/client"
+import type { ReactNode } from "react"
+
+export type OrganizationLogoProps = {
+  className?: string
+  fallback?: ReactNode
+  isPending?: boolean
+  organization?: Partial<Organization>
+  size?: AvatarProps["size"]
+}
+
+/**
+ * Renders an organization logo image, initials fallback, or a briefcase icon;
+ * shows a circular skeleton while loading when `isPending` is set and `organization` is undefined.
+ */
+export function OrganizationLogo({
+  className,
+  fallback,
+  isPending,
+  organization,
+  size = "sm",
+  style,
+  ...props
+}: OrganizationLogoProps & AvatarProps) {
+  if (isPending && !organization) {
+    return (
+      <Skeleton
+        className={cn(
+          "rounded-full",
+          size === "sm" ? "size-8" : size === "md" ? "size-10" : "size-12",
+          className
+        )}
+        style={style}
+      />
+    )
+  }
+
+  const initials = organization?.name?.slice(0, 2).toUpperCase()
+
+  return (
+    <Avatar
+      size={size}
+      className={cn("rounded-full", className)}
+      style={style}
+      {...props}
+    >
+      <Avatar.Image
+        alt={organization?.name ?? "Organization"}
+        src={organization?.logo ?? undefined}
+      />
+
+      <Avatar.Fallback
+        className={cn(
+          size === "lg" ? "text-xl" : size === "md" ? "text-base" : "text-sm"
+        )}
+        delayMs={organization?.logo ? 600 : undefined}
+      >
+        {fallback || initials || <Briefcase className="size-4" />}
+      </Avatar.Fallback>
+    </Avatar>
+  )
+}

package/src/components/auth/organization/organization-member-row-skeleton.tsx

@@ -0,0 +1,24 @@
+import { Skeleton, Table } from "@heroui/react"
+
+import { UserView } from "../user/user-view"
+
+/**
+ * Placeholder row matching {@link OrganizationMemberRow} while members load.
+ */
+export function OrganizationMemberRowSkeleton() {
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <UserView isPending />
+      </Table.Cell>
+
+      <Table.Cell>
+        <Skeleton className="h-4 w-18 rounded-lg" />
+      </Table.Cell>
+
+      <Table.Cell className="flex justify-end">
+        <Skeleton className="size-8 rounded-full" />
+      </Table.Cell>
+    </Table.Row>
+  )
+}

package/src/components/auth/organization/organization-member-row.tsx

@@ -0,0 +1,157 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useHasPermission,
+  useSession,
+  useUpdateMemberRole
+} from "@better-auth-ui/react"
+import { ArrowRightFromSquare, Pencil, TrashBin } from "@gravity-ui/icons"
+import { Button, Dropdown, Label, Spinner, Table, toast } from "@heroui/react"
+import type { Member, Organization, User } from "better-auth/client"
+import { useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { UserView } from "../user/user-view"
+import { LeaveOrganizationDialog } from "./leave-organization-dialog"
+import { OrganizationMemberRowSkeleton } from "./organization-member-row-skeleton"
+import { RemoveMemberDialog } from "./remove-member-dialog"
+
+export type OrganizationMemberRowProps = {
+  member: Member & { user: Partial<User> }
+  isOwner?: boolean
+  organization: Organization
+}
+
+export function OrganizationMemberRow({
+  member,
+  isOwner,
+  organization
+}: OrganizationMemberRowProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: session } = useSession(authClient)
+
+  const { data: hasUpdatePermission, isPending: updatePermissionPending } =
+    useHasPermission(authClient as OrganizationAuthClient, {
+      permissions: { member: ["update"] }
+    })
+
+  const { data: hasDeletePermission, isPending: deletePermissionPending } =
+    useHasPermission(authClient as OrganizationAuthClient, {
+      permissions: { member: ["delete"] }
+    })
+
+  const isPending = updatePermissionPending || deletePermissionPending
+
+  const { mutate: updateMemberRole, isPending: isUpdatingRole } =
+    useUpdateMemberRole(authClient as OrganizationAuthClient, {
+      onSuccess: () => toast.success(organizationLocalization.memberRoleUpdated)
+    })
+
+  const roleLabel = roles?.[member.role] ?? member.role
+
+  const assignableRoles = Object.entries(roles).filter(
+    ([key]) => isOwner || key !== "owner"
+  )
+
+  const isCurrentUser = session?.user.id === member.userId
+
+  const [removeOpen, setRemoveOpen] = useState(false)
+  const [leaveOpen, setLeaveOpen] = useState(false)
+
+  if (isPending) {
+    return <OrganizationMemberRowSkeleton />
+  }
+
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <UserView user={member.user} />
+      </Table.Cell>
+
+      <Table.Cell>{roleLabel}</Table.Cell>
+
+      <Table.Cell>
+        <div className="flex items-center justify-end gap-1">
+          {hasUpdatePermission?.success && (
+            <Dropdown>
+              <Button
+                isIconOnly
+                size="sm"
+                variant="tertiary"
+                isDisabled={isUpdatingRole}
+                aria-label={organizationLocalization.changeMemberRole}
+              >
+                {isUpdatingRole ? (
+                  <Spinner color="current" size="sm" />
+                ) : (
+                  <Pencil />
+                )}
+              </Button>
+
+              <Dropdown.Popover className="min-w-fit">
+                <Dropdown.Menu>
+                  {assignableRoles.map(([role, label]) => (
+                    <Dropdown.Item
+                      key={role}
+                      textValue={label}
+                      isDisabled={member.role === role}
+                      onAction={() =>
+                        updateMemberRole({ memberId: member.id, role })
+                      }
+                    >
+                      <Label>{label}</Label>
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown.Popover>
+            </Dropdown>
+          )}
+
+          {isCurrentUser ? (
+            <Button
+              isIconOnly
+              size="sm"
+              variant="danger-soft"
+              aria-label={organizationLocalization.leaveOrganization}
+              onPress={() => setLeaveOpen(true)}
+            >
+              <ArrowRightFromSquare />
+            </Button>
+          ) : (
+            hasDeletePermission?.success && (
+              <Button
+                isIconOnly
+                size="sm"
+                variant="danger-soft"
+                aria-label={organizationLocalization.removeMember}
+                onPress={() => setRemoveOpen(true)}
+              >
+                <TrashBin />
+              </Button>
+            )
+          )}
+        </div>
+
+        {isCurrentUser && organization ? (
+          <LeaveOrganizationDialog
+            isOpen={leaveOpen}
+            onOpenChange={setLeaveOpen}
+            organization={organization}
+          />
+        ) : (
+          hasDeletePermission?.success && (
+            <RemoveMemberDialog
+              isOpen={removeOpen}
+              onOpenChange={setRemoveOpen}
+              member={member}
+            />
+          )
+        )}
+      </Table.Cell>
+    </Table.Row>
+  )
+}