feat(ui): add composed UserProfile panels and section components

.changeset/profile-composed-userprofile.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/composed/UserProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const APIKeysPage = lazy(() =>
+  import('../../components/UserProfile/APIKeysPage').then(m => ({
+    default: m.APIKeysPage,
+  })),
+);
+
+export const UserProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={APIKeysPage} />;

packages/ui/src/composed/UserProfile/Account.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { AccountPage } from '../../components/UserProfile/AccountPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function AccountComposed({ children }: PropsWithChildren): ReactNode {
+  const card = useCardState();
+  return (
+    <ProfileCard.Page>
+      <ProfileCard.PagePanel
+        pageId='account'
+        titleKey={localizationKeys('userProfile.start.headerTitle__account')}
+        alertContent={card.error}
+        outerSx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground, isolation: 'isolate' })}
+      >
+        {children}
+      </ProfileCard.PagePanel>
+    </ProfileCard.Page>
+  );
+}
+
+export function UserProfileAccountPanel({ children }: PropsWithChildren): ReactNode {
+  if (!children) {
+    return <AccountPage />;
+  }
+
+  return (
+    <PageContext.Provider value='account'>
+      <CardStateProvider>
+        <AccountComposed>{children}</AccountComposed>
+      </CardStateProvider>
+    </PageContext.Provider>
+  );
+}

packages/ui/src/composed/UserProfile/AccountConnectedAccounts.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountConnectedAccounts as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileConnectedAccountsSection = createSection('UserProfileConnectedAccountsSection', Section);

packages/ui/src/composed/UserProfile/AccountEmails.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountEmails as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileEmailSection = createSection('UserProfileEmailSection', Section);

packages/ui/src/composed/UserProfile/AccountEnterpriseAccounts.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountEnterpriseAccounts as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileEnterpriseAccountsSection = createSection('UserProfileEnterpriseAccountsSection', Section);

packages/ui/src/composed/UserProfile/AccountPhone.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountPhone as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfilePhoneSection = createSection('UserProfilePhoneSection', Section);

packages/ui/src/composed/UserProfile/AccountProfile.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { UserProfileSection } from '../../components/UserProfile/UserProfileSection';
+import { createSection } from '../createSection';
+
+export const UserProfileProfileSection = createSection('UserProfileProfileSection', UserProfileSection);

packages/ui/src/composed/UserProfile/AccountUsername.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountUsername as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileUsernameSection = createSection('UserProfileUsernameSection', Section);

packages/ui/src/composed/UserProfile/AccountWeb3.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountWeb3 as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileWeb3Section = createSection('UserProfileWeb3Section', Section);

packages/ui/src/composed/UserProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const BillingPage = lazy(() =>
+  import('../../components/UserProfile/BillingPage').then(m => ({
+    default: m.BillingPage,
+  })),
+);
+
+const PlansPage = lazy(() =>
+  import('../../components/UserProfile/PlansPage').then(m => ({
+    default: m.PlansPage,
+  })),
+);
+
+const StatementPage = lazy(() =>
+  import('../../components/Statements').then(m => ({
+    default: m.StatementPage,
+  })),
+);
+
+const PaymentAttemptPage = lazy(() =>
+  import('../../components/PaymentAttempts').then(m => ({
+    default: m.PaymentAttemptPage,
+  })),
+);
+
+export const UserProfileBillingPanel = (): ReactNode => (
+  <BillingSection
+    billing={BillingPage}
+    plans={PlansPage}
+    statement={StatementPage}
+    paymentAttempt={PaymentAttemptPage}
+  />
+);

packages/ui/src/composed/UserProfile/Security.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { SecurityPage } from '../../components/UserProfile/SecurityPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function SecurityComposed({ children }: PropsWithChildren): ReactNode {
+  const card = useCardState();
+  return (
+    <ProfileCard.Page>
+      <ProfileCard.PagePanel
+        pageId='security'
+        titleKey={localizationKeys('userProfile.start.headerTitle__security')}
+        alertContent={card.error}
+      >
+        {children}
+      </ProfileCard.PagePanel>
+    </ProfileCard.Page>
+  );
+}
+
+export function UserProfileSecurityPanel({ children }: PropsWithChildren): ReactNode {
+  if (!children) {
+    return <SecurityPage />;
+  }
+
+  return (
+    <PageContext.Provider value='security'>
+      <CardStateProvider>
+        <SecurityComposed>{children}</SecurityComposed>
+      </CardStateProvider>
+    </PageContext.Provider>
+  );
+}

packages/ui/src/composed/UserProfile/SecurityActiveDevices.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { ActiveDevicesSection } from '../../components/UserProfile/ActiveDevicesSection';
+import { createSection } from '../createSection';
+
+export const UserProfileActiveDevicesSection = createSection('UserProfileActiveDevicesSection', ActiveDevicesSection);

packages/ui/src/composed/UserProfile/SecurityDelete.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { SecurityDelete as Section } from '../../components/UserProfile/SecuritySections';
+import { createSection } from '../createSection';
+
+export const UserProfileDeleteSection = createSection('UserProfileDeleteSection', Section);

packages/ui/src/composed/UserProfile/SecurityMfa.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { SecurityMfa as Section } from '../../components/UserProfile/SecuritySections';
+import { createSection } from '../createSection';
+
+export const UserProfileMfaSection = createSection('UserProfileMfaSection', Section);

packages/ui/src/composed/UserProfile/SecurityPasskeys.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { SecurityPasskeys as Section } from '../../components/UserProfile/SecuritySections';
+import { createSection } from '../createSection';
+
+export const UserProfilePasskeysSection = createSection('UserProfilePasskeysSection', Section);

packages/ui/src/composed/UserProfile/SecurityPassword.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { SecurityPassword as Section } from '../../components/UserProfile/SecuritySections';
+import { createSection } from '../createSection';
+
+export const UserProfilePasswordSection = createSection('UserProfilePasswordSection', Section);

packages/ui/src/composed/UserProfile/UserProfileProvider.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useClerk, useUser } from '@clerk/shared/react';
+import type { EnvironmentResource, OAuthProvider, OAuthScope, UserProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { UserProfileContext } from '../../contexts/components/UserProfile';
+import { fallbackModuleManager, ProfileProviderShell } from '../ProfileProviderShell';
+
+type UserProfileProviderProps = PropsWithChildren<{
+  appearance?: Appearance;
+  additionalOAuthScopes?: Partial<Record<OAuthProvider, OAuthScope[]>>;
+  apiKeysProps?: UserProfileProps['apiKeysProps'];
+}>;
+
+export const UserProfileProvider = (props: UserProfileProviderProps): ReactNode => {
+  const { children, appearance, additionalOAuthScopes, apiKeysProps } = props;
+  const clerk = useClerk();
+  const { isLoaded, user } = useUser();
+
+  const environment = (clerk as any).__internal_environment as EnvironmentResource | null | undefined;
+  const moduleManager = clerk.__internal_moduleManager ?? fallbackModuleManager;
+
+  if (!isLoaded || !user || !environment) {
+    return null;
+  }
+
+  const userProfileCtxValue = {
+    componentName: 'UserProfile' as const,
+    mode: 'mounted' as const,
+    routing: 'hash' as const,
+    path: undefined,
+    additionalOAuthScopes,
+    apiKeysProps,
+    customPages: [],
+  };
+
+  return (
+    <ProfileProviderShell
+      clerk={clerk}
+      environment={environment}
+      moduleManager={moduleManager}
+      appearanceKey='userProfile'
+      flow='userProfile'
+      globalAppearance={clerk.__internal_getOption('appearance')}
+      appearance={appearance}
+    >
+      <UserProfileContext.Provider value={userProfileCtxValue}>{children}</UserProfileContext.Provider>
+    </ProfileProviderShell>
+  );
+};

packages/ui/src/composed/UserProfile/index.tsx

@@ -0,0 +1,17 @@
+export { UserProfileProvider } from './UserProfileProvider';
+export { UserProfileAccountPanel } from './Account';
+export { UserProfileSecurityPanel } from './Security';
+export { UserProfileBillingPanel } from './Billing';
+export { UserProfileAPIKeysPanel } from './APIKeys';
+export { UserProfileProfileSection } from './AccountProfile';
+export { UserProfileUsernameSection } from './AccountUsername';
+export { UserProfileEmailSection } from './AccountEmails';
+export { UserProfilePhoneSection } from './AccountPhone';
+export { UserProfileConnectedAccountsSection } from './AccountConnectedAccounts';
+export { UserProfileEnterpriseAccountsSection } from './AccountEnterpriseAccounts';
+export { UserProfileWeb3Section } from './AccountWeb3';
+export { UserProfilePasswordSection } from './SecurityPassword';
+export { UserProfilePasskeysSection } from './SecurityPasskeys';
+export { UserProfileMfaSection } from './SecurityMfa';
+export { UserProfileActiveDevicesSection } from './SecurityActiveDevices';
+export { UserProfileDeleteSection } from './SecurityDelete';

packages/ui/src/composed/__tests__/UserProfile.test.tsx

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { AccountPage } from '../../components/UserProfile/AccountPage';
+import { SecurityPage } from '../../components/UserProfile/SecurityPage';
+import { clearFetchCache } from '../../hooks';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+describe('Experimental UserProfile', () => {
+  beforeEach(() => {
+    clearFetchCache();
+  });
+
+  // The page components (AccountPage/SecurityPage) are thin wrappers that render
+  // the composed panels. The section-visibility matrix is asserted once at the
+  // component level in AccountSections/SecuritySections; here we only cover what
+  // the page level adds — the enterprise-SSO additional-identification guard —
+  // plus a single mount smoke per page.
+  describe('Account page', () => {
+    it('hides add buttons when enterprise SSO disables additional identifications', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          enterprise_accounts: [
+            {
+              active: true,
+              enterprise_connection: {
+                disable_additional_identifications: true,
+              },
+            } as any,
+          ],
+        });
+        f.withEnterpriseSso();
+      });
+
+      const { queryByRole } = render(<AccountPage />, { wrapper });
+      expect(queryByRole('button', { name: /add email address/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Security page', () => {
+    it('renders active devices section', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+      fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<SecurityPage />, { wrapper });
+      await waitFor(() => screen.getByText(/active devices/i));
+    });
+  });
+});