@better-auth-ui/heroui 1.6.7 → 1.6.9

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

@@ -0,0 +1,97 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCancelInvitation,
+  useHasPermission
+} from "@better-auth-ui/react"
+import { Xmark } from "@gravity-ui/icons"
+import { Button, Chip, Spinner, Table } from "@heroui/react"
+
+import type { Invitation } from "better-auth/client"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationInvitationRowSkeleton } from "./organization-invitation-row-skeleton"
+
+export type OrganizationInvitationTableRowProps = {
+  invitation: Invitation
+}
+
+export function OrganizationInvitationTableRow({
+  invitation
+}: OrganizationInvitationTableRowProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const {
+    data: cancelInvitationPermission,
+    isPending: cancelPermissionPending
+  } = useHasPermission(authClient as OrganizationAuthClient, {
+    permissions: { invitation: ["cancel"] }
+  })
+
+  const { mutate: cancelInvitation, isPending: cancelPending } =
+    useCancelInvitation(authClient as OrganizationAuthClient)
+
+  const roleLabel = roles?.[invitation.role] ?? invitation.role
+
+  const statusLabel =
+    organizationLocalization[invitation.status] ?? invitation.status
+
+  const statusColor =
+    invitation.status === "pending"
+      ? "warning"
+      : invitation.status === "accepted"
+        ? "success"
+        : invitation.status === "rejected"
+          ? "danger"
+          : "default"
+
+  if (cancelPermissionPending) {
+    return <OrganizationInvitationRowSkeleton />
+  }
+
+  return (
+    <Table.Row>
+      <Table.Cell className="font-medium text-sm">
+        {invitation.email}
+      </Table.Cell>
+
+      <Table.Cell className="text-muted text-xs tabular-nums whitespace-nowrap">
+        {new Date(invitation.createdAt).toLocaleString(undefined, {
+          dateStyle: "short",
+          timeStyle: "short"
+        })}
+      </Table.Cell>
+
+      <Table.Cell className="text-sm">{roleLabel}</Table.Cell>
+
+      <Table.Cell className="text-sm">
+        <Chip color={statusColor} size="sm" variant="soft">
+          {statusLabel}
+        </Chip>
+      </Table.Cell>
+
+      <Table.Cell className="text-end">
+        {cancelInvitationPermission?.success &&
+          invitation.status === "pending" && (
+            <Button
+              isIconOnly
+              size="sm"
+              variant="danger-soft"
+              isPending={cancelPending}
+              onPress={() => cancelInvitation({ invitationId: invitation.id })}
+              aria-label={organizationLocalization.cancelInvitation}
+            >
+              {cancelPending ? (
+                <Spinner color="current" size="sm" />
+              ) : (
+                <Xmark />
+              )}
+            </Button>
+          )}
+      </Table.Cell>
+    </Table.Row>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { PaperPlane } from "@gravity-ui/icons"
+import { Button, EmptyState } from "@heroui/react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+export type OrganizationInvitationsEmptyProps = {
+  onInvitePress: () => void
+}
+
+/**
+ * Empty state for {@link OrganizationInvitations} — mirrors `ApiKeysEmpty`
+ * (icon, title, description) with an "Invite member" call to action.
+ */
+export function OrganizationInvitationsEmpty({
+  onInvitePress
+}: OrganizationInvitationsEmptyProps) {
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  return (
+    <EmptyState className="flex flex-col items-center gap-4 text-center p-4">
+      <PaperPlane className="size-6 text-muted" />
+
+      <div className="flex flex-col gap-2">
+        <p className="text-sm font-semibold text-foreground">
+          {organizationLocalization.noInvitations}
+        </p>
+
+        <span className="text-sm text-muted">
+          {organizationLocalization.organizationInvitationsEmptyDescription}
+        </span>
+      </div>
+
+      <Button size="sm" onPress={onInvitePress}>
+        {organizationLocalization.inviteMember}
+      </Button>
+    </EmptyState>
+  )
+}

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>
+  )
+}