feat(ui): add user profile account section

.changeset/user-profile-account-section.md

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

.changeset/user-profile-connected-accounts-section.md

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

.changeset/user-profile-delete-section.md

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

.changeset/user-profile-panel-shell.md

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

.changeset/user-profile-web3-wallets-section.md

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

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,13 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
   user: {
     'user-button': dynamic(() => import('../stories/user-button.mdx')),
+    'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+    'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')),
+    'user-profile-connected-accounts-section': dynamic(
+      () => import('../stories/user-profile-connected-accounts-section.mdx'),
+    ),
+    'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+    'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
   },
   components: {
     avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -96,6 +96,26 @@ import {
   Organizations as UserButtonOrganizations,
   User as UserButtonUser,
 } from '../stories/user-button.stories';
+import {
+  Default as UserProfileAccountSectionDefault,
+  meta as userProfileAccountSectionMeta,
+} from '../stories/user-profile-account-section.stories';
+import {
+  Default as UserProfileConnectedAccountsSectionDefault,
+  meta as userProfileConnectedAccountsSectionMeta,
+} from '../stories/user-profile-connected-accounts-section.stories';
+import {
+  Default as UserProfileDeleteSectionDefault,
+  meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
+import {
+  Default as UserProfileProfilePanelDefault,
+  meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
+import {
+  Default as UserProfileWeb3WalletsSectionDefault,
+  meta as userProfileWeb3WalletsSectionMeta,
+} from '../stories/user-profile-web3-wallets-section.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -204,9 +224,35 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileAccountSectionModule: StoryModule = {
+  meta: userProfileAccountSectionMeta,
+  Default: UserProfileAccountSectionDefault,
+};
+const userProfileProfilePanelModule: StoryModule = {
+  meta: userProfileProfilePanelMeta,
+  Default: UserProfileProfilePanelDefault,
+};
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+  meta: userProfileConnectedAccountsSectionMeta,
+  Default: UserProfileConnectedAccountsSectionDefault,
+};
+const userProfileWeb3WalletsSectionModule: StoryModule = {
+  meta: userProfileWeb3WalletsSectionMeta,
+  Default: UserProfileWeb3WalletsSectionDefault,
+};
+const userProfileDeleteSectionModule: StoryModule = {
+  meta: userProfileDeleteSectionMeta,
+  Default: UserProfileDeleteSectionDefault,
+};
+
 export const registry: StoryModule[] = [
   // User
   userButtonModule,
+  userProfileProfilePanelModule,
+  userProfileAccountSectionModule,
+  userProfileConnectedAccountsSectionModule,
+  userProfileWeb3WalletsSectionModule,
+  userProfileDeleteSectionModule,
   // Components
   avatarModule,
   badgeModule,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-account-section.stories';
+
+# UserProfileAccountSection
+
+Account details, profile image, email addresses, and phone numbers composed with `Section`.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+  ]}
+/>

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -0,0 +1,33 @@
+import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-account-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User',
+  title: 'UserProfileAccountSection',
+  source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx',
+};
+
+export function Default() {
+  return (
+    <UserProfileAccountSectionView
+      emails={[
+        { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+        { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+      ]}
+      imageUrl='https://avatars.githubusercontent.com/u/51144033?v=4'
+      name='Preston Booth'
+      phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+      username='prestonxyz'
+      onAddEmail={() => undefined}
+      onAddPhone={() => undefined}
+      onEditProfilePicture={() => undefined}
+      onManageEmail={() => undefined}
+      onManagePhone={() => undefined}
+      onNameChange={() => undefined}
+      onUsernameChange={() => undefined}
+    />
+  );
+}

packages/swingset/src/stories/user-profile-connected-accounts-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-connected-accounts-section.stories';
+
+# UserProfileConnectedAccountsSection
+
+Connected and available external identity providers with provider-specific actions.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+    { name: 'Icon', href: '/components/icon', layer: 'Components' },
+  ]}
+/>

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -0,0 +1,35 @@
+import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-connected-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User',
+  title: 'UserProfileConnectedAccountsSection',
+  source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx',
+};
+
+export function Default() {
+  return (
+    <UserProfileConnectedAccountsSectionView
+      accounts={[
+        {
+          id: 'google',
+          provider: 'Google',
+          identifier: 'test@google.com',
+          iconUrl: 'https://img.clerk.com/static/google.svg',
+          connected: true,
+        },
+        {
+          id: 'apple',
+          provider: 'Apple',
+          iconUrl: 'https://img.clerk.com/static/apple.svg',
+          connected: false,
+        },
+      ]}
+      onConnect={() => undefined}
+      onManage={() => undefined}
+    />
+  );
+}

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+  ]}
+/>

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,15 @@
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User',
+  title: 'UserProfileDeleteSection',
+  source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+};
+
+export function Default() {
+  return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

packages/swingset/src/stories/user-profile-profile-panel.mdx

@@ -0,0 +1,71 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view uses `Section` for its account details, connected accounts, Web3 wallets, and danger zone
+while preserving the existing resource props and callback seams.
+
+## Example
+
+<Story
+  name='Default'
+  storyModule={UserProfileProfilePanelStories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+  ]}
+/>
+
+## Usage
+
+```tsx
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+<UserProfileProfilePanelView
+  imageUrl={user.imageUrl}
+  name={user.fullName ?? ''}
+  username={user.username ?? ''}
+  emails={user.emailAddresses.map(email => ({
+    id: email.id,
+    value: email.emailAddress,
+    isDefault: email.id === user.primaryEmailAddressId,
+    isVerified: email.verification.status === 'verified',
+  }))}
+  phones={user.phoneNumbers.map(phone => ({
+    id: phone.id,
+    value: phone.phoneNumber,
+    isDefault: phone.id === user.primaryPhoneNumberId,
+    isVerified: phone.verification.status === 'verified',
+  }))}
+  connectedAccounts={user.externalAccounts.map(account => ({
+    id: account.id,
+    provider: account.provider,
+    identifier: account.emailAddress,
+    connected: true,
+  }))}
+  web3Wallets={supportedWeb3Wallets.map(provider => {
+    const wallet = user.web3Wallets.find(wallet => wallet.provider === provider.id);
+
+    return {
+      id: provider.id,
+      provider: provider.name,
+      iconUrl: provider.iconUrl,
+      address: wallet?.web3Wallet,
+      connected: Boolean(wallet),
+      isPrimary: wallet?.id === user.primaryWeb3WalletId,
+      isVerified: wallet ? wallet.verification.status === 'verified' : undefined,
+    };
+  })}
+  onVerifyEmail={verifyEmail}
+  onSetPrimaryEmail={setPrimaryEmail}
+  onRemoveEmail={removeEmail}
+  onVerifyPhone={verifyPhone}
+  onSetPrimaryPhone={setPrimaryPhone}
+  onRemovePhone={removePhone}
+  onRemoveConnectedAccount={removeConnectedAccount}
+  onConnectWeb3Wallet={connectWeb3Wallet}
+  onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+  onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -0,0 +1,72 @@
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
+const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4';
+
+export { default as __source } from './user-profile-profile-panel.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User',
+  title: 'UserProfileProfilePanel',
+  source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx',
+};
+
+export function Default(_args: Record<string, unknown>) {
+  return (
+    <UserProfileProfilePanelView
+      emails={[
+        { id: 'email_1', value: 'item1@clerk.dev', isDefault: true, isVerified: true },
+        { id: 'email_2', value: 'item2@clerk.dev', isVerified: true },
+      ]}
+      connectedAccounts={[
+        {
+          id: 'google',
+          provider: 'Google',
+          identifier: 'test@google.com',
+          iconUrl: providerIconUrl('google'),
+          connected: true,
+        },
+        { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+      ]}
+      web3Wallets={[
+        {
+          id: 'metamask',
+          address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+          provider: 'MetaMask',
+          iconUrl: providerIconUrl('metamask'),
+          isPrimary: true,
+          isVerified: true,
+        },
+        {
+          id: 'coinbase-wallet',
+          provider: 'Coinbase Wallet',
+          iconUrl: providerIconUrl('coinbase_wallet'),
+          connected: false,
+        },
+      ]}
+      imageUrl={profileImageUrl}
+      name='Preston Booth'
+      phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+      username='prestonxyz'
+      onAddEmail={() => undefined}
+      onAddPhone={() => undefined}
+      onConnectAccount={() => undefined}
+      onDeleteAccount={() => undefined}
+      onEditProfilePicture={() => undefined}
+      onRemoveConnectedAccount={() => undefined}
+      onRemoveEmail={() => undefined}
+      onRemovePhone={() => undefined}
+      onConnectWeb3Wallet={() => undefined}
+      onRemoveWeb3Wallet={() => undefined}
+      onSetPrimaryWeb3Wallet={() => undefined}
+      onSetPrimaryEmail={() => undefined}
+      onSetPrimaryPhone={() => undefined}
+      onVerifyEmail={() => undefined}
+      onVerifyPhone={() => undefined}
+      onNameChange={() => undefined}
+      onUsernameChange={() => undefined}
+    />
+  );
+}

packages/swingset/src/stories/user-profile-web3-wallets-section.mdx

@@ -0,0 +1,15 @@
+import * as Stories from './user-profile-web3-wallets-section.stories';
+
+# UserProfileWeb3WalletsSection
+
+Supported Web3 wallet providers with per-provider connection actions, connected identities, verification state,
+primary status, and wallet actions.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Badge', href: '/components/badge', layer: 'Components' },
+  ]}
+/>