@better-auth-ui/heroui 1.6.8 → 1.6.10

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

@@ -0,0 +1,233 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin,
+  useListOrganizations,
+  useSession,
+  useSetActiveOrganization
+} from "@better-auth-ui/react"
+import { ChevronsExpandVertical, CirclePlus, Gear } from "@gravity-ui/icons"
+import {
+  Button,
+  type ButtonProps,
+  cn,
+  Dropdown,
+  type DropdownPopoverProps,
+  Label,
+  Link
+} from "@heroui/react"
+import { buttonVariants } from "@heroui/styles"
+import type { Organization } from "better-auth/client"
+import { type ReactNode, useState } from "react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { UserView } from "../user/user-view"
+import { CreateOrganizationDialog } from "./create-organization-dialog"
+import { OrganizationView } from "./organization-view"
+
+/** Props for the {@link OrganizationSwitcher} component. */
+export type OrganizationSwitcherProps = {
+  className?: string
+  placement?: DropdownPopoverProps["placement"]
+  variant?: ButtonProps["variant"]
+  trigger?: ReactNode
+  hideCreate?: boolean
+  hidePersonal?: boolean
+  hideSettings?: boolean
+  hideSlug?: boolean
+  setActive?: (organization: Organization | null) => void
+}
+
+/**
+ * Renders an organizations dropdown with a trigger button,
+ * header summary, and a menu of organizations to switch to.
+ */
+export function OrganizationSwitcher({
+  className,
+  hideCreate,
+  hidePersonal,
+  hideSettings,
+  hideSlug = true,
+  setActive,
+  placement,
+  variant = "ghost",
+  size = "md",
+  trigger,
+  ...props
+}: OrganizationSwitcherProps & ButtonProps) {
+  const { authClient, navigate, basePaths, localization, viewPaths } = useAuth()
+  const { data: session, isPending: sessionPending } = useSession(authClient)
+  const {
+    localization: organizationLocalization,
+    viewPaths: organizationViewPaths,
+    slug
+  } = useAuthPlugin(organizationPlugin)
+
+  const { data: activeOrganization, isPending: activeOrganizationPending } =
+    useActiveOrganization(authClient as OrganizationAuthClient)
+
+  const { data: organizations, isPending: organizationsPending } =
+    useListOrganizations(authClient as OrganizationAuthClient)
+
+  const { mutate: setActiveOrganization } = useSetActiveOrganization(
+    authClient as OrganizationAuthClient
+  )
+
+  const isPending =
+    sessionPending ||
+    (!!session && (organizationsPending || activeOrganizationPending))
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+
+  function handleSetActive(organization: Organization | null) {
+    if (setActive) {
+      setActive(organization)
+    } else if (slug !== undefined) {
+      navigate({
+        to: organization
+          ? `${basePaths.organization}/${organization.slug}/${organizationViewPaths.organization.settings}`
+          : `${basePaths.settings}/${viewPaths.settings.account}`
+      })
+    } else {
+      setActiveOrganization({ organizationId: organization?.id ?? null })
+    }
+  }
+
+  return (
+    <>
+      <Dropdown isOpen={dropdownOpen} onOpenChange={setDropdownOpen}>
+        {trigger ? (
+          <Dropdown.Trigger>{trigger}</Dropdown.Trigger>
+        ) : (
+          <Button
+            variant={variant}
+            className={cn("h-auto px-2 py-2 text-left", className)}
+            isDisabled={!session || isPending}
+            aria-label={organizationLocalization.organization}
+            {...props}
+          >
+            {isPending ? (
+              <OrganizationView
+                size={size}
+                isPending
+                hideRole
+                hideSlug={hideSlug}
+              />
+            ) : activeOrganization ? (
+              <OrganizationView size={size} hideRole hideSlug={hideSlug} />
+            ) : session && !hidePersonal ? (
+              <UserView size={size} hideSubtitle={hideSlug} />
+            ) : (
+              <OrganizationView
+                size={size}
+                hideRole
+                hideSlug={hideSlug}
+                organization={{
+                  name: organizationLocalization.organization
+                }}
+              />
+            )}
+
+            <ChevronsExpandVertical className="size-3 shrink-0 text-muted" />
+          </Button>
+        )}
+
+        <Dropdown.Popover placement={placement} className="max-w-svw">
+          {activeOrganization ? (
+            <div className="flex items-center justify-between gap-4 px-4 pt-3">
+              <OrganizationView
+                hideRole
+                hideSlug={hideSlug}
+                organization={activeOrganization}
+              />
+
+              {!hideSettings && (
+                <Link
+                  href={
+                    slug
+                      ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.settings}`
+                      : `${basePaths.organization}/${organizationViewPaths.organization.settings}`
+                  }
+                  className={cn(
+                    buttonVariants({ variant: "outline", size: "sm" }),
+                    "shrink-0 gap-2"
+                  )}
+                  onPress={() => setDropdownOpen(false)}
+                >
+                  <Gear className="text-muted" />
+
+                  {organizationLocalization.manage}
+                </Link>
+              )}
+            </div>
+          ) : !isPending && session?.user && !hidePersonal ? (
+            <div className="flex items-center justify-between gap-4 px-4 pt-3">
+              <UserView hideSubtitle={hideSlug} />
+
+              {!hideSettings && (
+                <Link
+                  href={`${basePaths.settings}/${viewPaths.settings.account}`}
+                  className={cn(
+                    buttonVariants({ variant: "outline", size: "sm" }),
+                    "shrink-0 gap-2"
+                  )}
+                  onPress={() => setDropdownOpen(false)}
+                >
+                  <Gear className="text-muted" />
+
+                  {localization.settings.settings}
+                </Link>
+              )}
+            </div>
+          ) : null}
+
+          <Dropdown.Menu>
+            {!!activeOrganization && !hidePersonal && (
+              <Dropdown.Item
+                textValue={organizationLocalization.personalAccount}
+                onPress={() => handleSetActive(null)}
+              >
+                <UserView hideSubtitle={hideSlug} />
+              </Dropdown.Item>
+            )}
+
+            {organizations
+              ?.filter(
+                (organization) => organization.id !== activeOrganization?.id
+              )
+              ?.map((organization) => (
+                <Dropdown.Item
+                  key={organization.id}
+                  textValue={organization.name}
+                  onPress={() => handleSetActive(organization)}
+                >
+                  <OrganizationView
+                    hideRole
+                    hideSlug={hideSlug}
+                    organization={organization}
+                  />
+                </Dropdown.Item>
+              ))}
+
+            {!hideCreate && (
+              <Dropdown.Item
+                textValue={organizationLocalization.createOrganization}
+                onPress={() => setCreateOpen(true)}
+              >
+                <CirclePlus className="text-muted" />
+
+                <Label>{organizationLocalization.createOrganization}</Label>
+              </Dropdown.Item>
+            )}
+          </Dropdown.Menu>
+        </Dropdown.Popover>
+      </Dropdown>
+
+      <CreateOrganizationDialog
+        isOpen={createOpen}
+        onOpenChange={setCreateOpen}
+      />
+    </>
+  )
+}

package/src/components/auth/organization/organization-view-skeleton.tsx

@@ -0,0 +1,36 @@
+import { cn, Skeleton } from "@heroui/react"
+import type { ComponentProps } from "react"
+
+import { OrganizationLogo } from "./organization-logo"
+import type { OrganizationViewProps } from "./organization-view"
+
+/**
+ * Placeholder matching {@link OrganizationView} while organization data loads.
+ */
+export function OrganizationViewSkeleton({
+  className,
+  hideSlug,
+  size = "md",
+  ...props
+}: OrganizationViewProps & ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex min-w-0 items-center gap-2", className)}
+      {...props}
+    >
+      <OrganizationLogo
+        isPending
+        className={size === "sm" ? "size-5" : undefined}
+        size={size === "lg" ? "md" : "sm"}
+      />
+
+      <div className="flex flex-col min-w-0 gap-1">
+        <Skeleton className="h-3.5 w-20 rounded-lg" />
+
+        {!hideSlug && (
+          <Skeleton className="h-3 w-28 rounded-lg mt-[0.5px] mb-0.5" />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,109 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin,
+  useListOrganizationMembers,
+  useSession
+} from "@better-auth-ui/react"
+import { type AvatarProps, Chip, cn } from "@heroui/react"
+import type { Organization } from "better-auth/client"
+import type { ComponentProps } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationLogo } from "./organization-logo"
+import { OrganizationViewSkeleton } from "./organization-view-skeleton"
+
+export type OrganizationViewProps = {
+  className?: string
+  isPending?: boolean
+  size?: AvatarProps["size"]
+  hideRole?: boolean
+  hideSlug?: boolean
+  organization?: Partial<Organization>
+}
+
+/**
+ * Compact organization row: logo, primary name, secondary slug — analogous to {@link UserView}.
+ */
+export function OrganizationView({
+  className,
+  isPending,
+  size = "md",
+  hideSlug,
+  hideRole,
+  organization,
+  ...props
+}: OrganizationViewProps & ComponentProps<"div">) {
+  const { authClient } = useAuth()
+  const { roles } = useAuthPlugin(organizationPlugin)
+
+  const { data: session } = useSession(authClient)
+
+  const { data: activeOrganization, isPending: activeOrganizationPending } =
+    useActiveOrganization(authClient as OrganizationAuthClient, {
+      enabled: !organization && !isPending
+    })
+
+  const resolvedOrganization = organization ?? activeOrganization
+
+  const { data: membersList, isPending: membersPending } =
+    useListOrganizationMembers(authClient as OrganizationAuthClient, {
+      query: {
+        organizationId: resolvedOrganization?.id
+      },
+      enabled: !!resolvedOrganization?.id && !hideRole
+    })
+
+  const membership = membersList?.members?.find(
+    (member) => member.userId === session?.user.id
+  )
+
+  if (
+    isPending ||
+    (!organization && activeOrganizationPending) ||
+    (!hideRole && !!resolvedOrganization?.id && membersPending)
+  ) {
+    return (
+      <OrganizationViewSkeleton
+        className={className}
+        hideSlug={hideSlug}
+        size={size}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={cn("flex min-w-0 items-center gap-2", className)}
+      {...props}
+    >
+      <OrganizationLogo
+        organization={resolvedOrganization}
+        className={size === "sm" ? "size-5 [&>span]:text-xs" : undefined}
+        size={size === "lg" ? "md" : "sm"}
+      />
+
+      <div className="flex flex-col min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <p className="text-foreground text-sm font-medium truncate leading-tight">
+            {resolvedOrganization?.name}
+          </p>
+
+          {!hideRole && !!membership && (
+            <Chip className="shrink-0 -my-0.5" size="sm">
+              {roles?.[membership.role] ?? membership.role}
+            </Chip>
+          )}
+        </div>
+
+        {!hideSlug && (
+          <p className="text-muted text-xs truncate overflow-x-hidden font-mono leading-tight">
+            {resolvedOrganization?.slug}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,162 @@
+import type { OrganizationView } from "@better-auth-ui/core/plugins"
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthenticate,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Gear, Person } from "@gravity-ui/icons"
+import { type CardProps, cn, Tabs } from "@heroui/react"
+import { type ComponentProps, useEffect, useMemo } from "react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationPeople } from "./organization-people"
+import { OrganizationSettings } from "./organization-settings"
+
+export type OrganizationProps = {
+  className?: string
+  hideNav?: boolean
+  path?: string
+  variant?: CardProps["variant"]
+  /** @remarks `OrganizationView` */
+  view?: OrganizationView
+}
+
+/**
+ * Organization management shell: tabs for profile / danger zone and for
+ * people (members / invitations). Path segments come from
+ * `useAuthPlugin(organizationPlugin).viewPaths.organization`.
+ */
+export function Organization({
+  className,
+  hideNav,
+  path,
+  variant,
+  view,
+  ...props
+}: OrganizationProps & ComponentProps<"div">) {
+  if (!view && !path) {
+    throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
+  }
+
+  const { authClient, basePaths, localization, navigate } = useAuth()
+  useAuthenticate(authClient)
+
+  const {
+    localization: organizationLocalization,
+    viewPaths: organizationViewPaths,
+    slug
+  } = useAuthPlugin(organizationPlugin)
+
+  const { data: activeOrganization, isPending } = useActiveOrganization(
+    authClient as OrganizationAuthClient
+  )
+
+  useEffect(() => {
+    if (!isPending && !activeOrganization) {
+      navigate({
+        to: `${basePaths.settings}/${organizationViewPaths.settings?.organizations}`,
+        replace: true
+      })
+    }
+  }, [
+    basePaths.settings,
+    isPending,
+    navigate,
+    organizationViewPaths.settings?.organizations,
+    activeOrganization
+  ])
+
+  const currentView = useMemo(() => {
+    if (view) return view
+
+    const match = Object.entries(organizationViewPaths.organization).find(
+      ([, segment]) => segment === path
+    )
+
+    return match?.[0] as OrganizationView | undefined
+  }, [view, path, organizationViewPaths.organization])
+
+  if (!currentView) {
+    const validPaths = Object.values(organizationViewPaths.organization).join(
+      ", "
+    )
+    throw new Error(
+      `[Better Auth UI] Unknown organization path "${path}". Valid paths are: ${validPaths}`
+    )
+  }
+
+  if (!isPending && !activeOrganization) {
+    return null
+  }
+
+  return (
+    <Tabs
+      className={cn(className)}
+      orientation="horizontal"
+      selectedKey={currentView}
+      {...props}
+    >
+      {!hideNav && (
+        <Tabs.ListContainer>
+          <Tabs.List
+            aria-label={localization.settings.settings}
+            className="max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+          >
+            <Tabs.Tab
+              id="settings"
+              href={
+                slug
+                  ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.settings}`
+                  : `${basePaths.organization}/${organizationViewPaths.organization.settings}`
+              }
+              className="gap-2"
+              onPress={(e) =>
+                e.target.scrollIntoView({
+                  behavior: "smooth",
+                  inline: "center"
+                })
+              }
+            >
+              <Gear className="text-muted" />
+
+              {localization.settings.settings}
+
+              <Tabs.Indicator />
+            </Tabs.Tab>
+
+            <Tabs.Tab
+              id="people"
+              href={
+                slug
+                  ? `${basePaths.organization}/${slug}/${organizationViewPaths.organization.people}`
+                  : `${basePaths.organization}/${organizationViewPaths.organization.people}`
+              }
+              className="gap-2"
+              onPress={(e) =>
+                e.target.scrollIntoView({
+                  behavior: "smooth",
+                  inline: "center"
+                })
+              }
+            >
+              <Person className="text-muted" />
+
+              {organizationLocalization.people}
+
+              <Tabs.Indicator />
+            </Tabs.Tab>
+          </Tabs.List>
+        </Tabs.ListContainer>
+      )}
+
+      <Tabs.Panel id="settings" className="px-0">
+        <OrganizationSettings variant={variant} />
+      </Tabs.Panel>
+
+      <Tabs.Panel id="people" className="px-0">
+        <OrganizationPeople />
+      </Tabs.Panel>
+    </Tabs>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Briefcase } from "@gravity-ui/icons"
+import { Button, EmptyState } from "@heroui/react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+export type OrganizationsEmptyProps = {
+  onCreatePress: () => void
+}
+
+export function OrganizationsEmpty({ onCreatePress }: OrganizationsEmptyProps) {
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  return (
+    <EmptyState className="flex flex-col items-center gap-4 text-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-surface-secondary">
+        <Briefcase className="size-5" />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <p className="text-sm font-semibold text-foreground">
+          {organizationLocalization.noOrganizations}
+        </p>
+
+        <span className="text-sm text-muted">
+          {organizationLocalization.organizationsDescription}
+        </span>
+      </div>
+
+      <Button size="sm" onPress={onCreatePress}>
+        {organizationLocalization.createOrganization}
+      </Button>
+    </EmptyState>
+  )
+}

package/src/components/auth/organization/organizations-settings.tsx

@@ -0,0 +1,36 @@
+import { type CardProps, cn } from "@heroui/react"
+import type { ComponentProps } from "react"
+
+import { Organizations } from "./organizations"
+import { UserInvitations } from "./user-invitations"
+
+export type OrganizationsSettingsProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Renders the organizations settings panel.
+ *
+ * Displays all organizations the user belongs to with an empty state and
+ * create button, followed by a card for invitations to the user.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @param variant - Card variant forwarded to each card.
+ * @returns The organizations settings UI as a JSX element.
+ */
+export function OrganizationsSettings({
+  className,
+  variant,
+  ...props
+}: OrganizationsSettingsProps & ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex w-full flex-col gap-4 md:gap-6", className)}
+      {...props}
+    >
+      <Organizations variant={variant} />
+      <UserInvitations variant={variant} />
+    </div>
+  )
+}

package/src/components/auth/organization/organizations.tsx

@@ -0,0 +1,80 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useListOrganizations
+} from "@better-auth-ui/react"
+import { Button, Card, type CardProps } from "@heroui/react"
+import { useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { CreateOrganizationDialog } from "./create-organization-dialog"
+import { OrganizationRow } from "./organization-row"
+import { OrganizationViewSkeleton } from "./organization-view-skeleton"
+import { OrganizationsEmpty } from "./organizations-empty"
+
+export type OrganizationsProps = {
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Lists organizations the user belongs to (via {@link useListOrganizations}): loading skeleton,
+ * empty state with create, or a card of rows with a Manage control per organization.
+ * Owns {@link CreateOrganizationDialog} open state and the create actions.
+ */
+export function Organizations({ variant }: OrganizationsProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const [createOpen, setCreateOpen] = useState(false)
+
+  const { data: organizations, isPending: organizationsPending } =
+    useListOrganizations(authClient as OrganizationAuthClient)
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <div className="flex items-end justify-between gap-3">
+          <h2 className="truncate text-sm font-semibold">
+            {organizationLocalization.organizations}
+          </h2>
+
+          <Button
+            className="shrink-0"
+            size="sm"
+            isDisabled={organizationsPending}
+            onPress={() => setCreateOpen(true)}
+          >
+            {organizationLocalization.createOrganization}
+          </Button>
+        </div>
+
+        <Card variant={variant}>
+          <Card.Content className="gap-0">
+            {organizationsPending ? (
+              <OrganizationViewSkeleton />
+            ) : !organizations?.length ? (
+              <OrganizationsEmpty onCreatePress={() => setCreateOpen(true)} />
+            ) : (
+              organizations.map((organization, index) => (
+                <div key={organization.id}>
+                  {index > 0 && (
+                    <div className="-mx-4 my-4 border-b border-dashed" />
+                  )}
+
+                  <OrganizationRow organization={organization} />
+                </div>
+              ))
+            )}
+          </Card.Content>
+        </Card>
+      </div>
+
+      <CreateOrganizationDialog
+        isOpen={createOpen}
+        onOpenChange={setCreateOpen}
+      />
+    </>
+  )
+}