feat(ui): compose user profile panel

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

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

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,7 @@ 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'),

packages/swingset/src/lib/registry.ts

@@ -145,6 +145,10 @@ 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,
@@ -297,6 +301,10 @@ const userProfileAccountSectionModule: StoryModule = {
   meta: userProfileAccountSectionMeta,
   Default: UserProfileAccountSectionDefault,
 };
+const userProfileProfilePanelModule: StoryModule = {
+  meta: userProfileProfilePanelMeta,
+  Default: UserProfileProfilePanelDefault,
+};
 const userProfileConnectedAccountsSectionModule: StoryModule = {
   meta: userProfileConnectedAccountsSectionMeta,
   Default: UserProfileConnectedAccountsSectionDefault,
@@ -313,6 +321,7 @@ const userProfileDeleteSectionModule: StoryModule = {
 export const registry: StoryModule[] = [
   // User
   userButtonModule,
+  userProfileProfilePanelModule,
   userProfileAccountSectionModule,
   userProfileConnectedAccountsSectionModule,
   userProfileWeb3WalletsSectionModule,

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

@@ -0,0 +1,65 @@
+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 `SettingsGroup` 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: 'SettingsGroup', href: '/blocks/settings-group', layer: 'Blocks' },
+  ]}
+/>
+
+## 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={user.web3Wallets.map(wallet => ({
+    id: wallet.id,
+    address: wallet.web3Wallet,
+    isPrimary: wallet.id === user.primaryWeb3WalletId,
+    isVerified: wallet.verification.status === 'verified',
+  }))}
+  onNameChange={setName}
+  onUsernameChange={setUsername}
+  onVerifyEmail={verifyEmail}
+  onSetPrimaryEmail={setPrimaryEmail}
+  onRemoveEmail={removeEmail}
+  onVerifyPhone={verifyPhone}
+  onSetPrimaryPhone={setPrimaryPhone}
+  onRemovePhone={removePhone}
+  onRemoveConnectedAccount={removeConnectedAccount}
+  onAddWeb3Wallet={addWeb3Wallet}
+  onSetPrimaryWeb3Wallet={setPrimaryWeb3Wallet}
+  onRemoveWeb3Wallet={removeWeb3Wallet}
+/>
+```

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

@@ -0,0 +1,71 @@
+/** @jsxImportSource @emotion/react */
+import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/user-profile/user-profile-profile-panel.view';
+import { useState } from 'react';
+
+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>) {
+  const [name, setName] = useState('Preston Booth');
+  const [username, setUsername] = useState('prestonxyz');
+
+  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,
+        },
+      ]}
+      imageUrl={profileImageUrl}
+      name={name}
+      phones={[{ id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true }]}
+      username={username}
+      onAddEmail={() => undefined}
+      onAddPhone={() => undefined}
+      onConnectAccount={() => undefined}
+      onDeleteAccount={() => undefined}
+      onEditProfilePicture={() => undefined}
+      onRemoveConnectedAccount={() => undefined}
+      onRemoveEmail={() => undefined}
+      onRemovePhone={() => undefined}
+      onAddWeb3Wallet={() => undefined}
+      onRemoveWeb3Wallet={() => undefined}
+      onSetPrimaryWeb3Wallet={() => undefined}
+      onSetPrimaryEmail={() => undefined}
+      onSetPrimaryPhone={() => undefined}
+      onVerifyEmail={() => undefined}
+      onVerifyPhone={() => undefined}
+      onNameChange={setName}
+      onUsernameChange={setUsername}
+    />
+  );
+}