docs(swingset): add user profile panel examples

Author: austincalvelage

packages/swingset/src/components/DocsViewer.tsx

@@ -10,6 +10,9 @@ import { ViewSource } from './ViewSource';
 // MDX docs keyed by `group` slug → `component` slug. Group-aware so identically-named
 // entries (the headless `Dialog` primitive vs. the styled `Dialog` component) stay distinct.
 const docModules: Record<string, Record<string, React.ComponentType>> = {
+  user: {
+    'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
+  },
   organization: {
     'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),
     'organization-profile-general-panel': dynamic(() => import('../stories/organization-profile-general-panel.mdx')),

packages/swingset/src/lib/registry.ts

@@ -122,6 +122,10 @@ import {
 } from '../stories/text-field.stories';
 import { meta as tooltipMeta } from '../stories/tooltip.stories';
 import { meta as useDataTableMeta } from '../stories/use-data-table.stories';
+import {
+  Default as UserProfileProfilePanelDefault,
+  meta as userProfileProfilePanelMeta,
+} from '../stories/user-profile-profile-panel.stories';
 import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -251,7 +255,14 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const userProfileProfilePanelModule: StoryModule = {
+  meta: userProfileProfilePanelMeta,
+  Default: UserProfileProfilePanelDefault,
+};
+
 export const registry: StoryModule[] = [
+  // User
+  userProfileProfilePanelModule,
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,

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

@@ -0,0 +1,40 @@
+import * as UserProfileProfilePanelStories from './user-profile-profile-panel.stories';
+
+# UserProfileProfilePanel
+
+The Profile panel from UserProfile, composed without the surrounding navigation shell. The
+presentational view renders account details, connected accounts, and the danger zone from props
+while its callbacks provide the seam for connected Clerk resources.
+
+## Example
+
+<Story
+  name='Default'
+  storyModule={UserProfileProfilePanelStories}
+/>
+
+## 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,
+  }))}
+  phones={user.phoneNumbers.map(phone => ({ id: phone.id, value: phone.phoneNumber }))}
+  connectedAccounts={user.externalAccounts.map(account => ({
+    id: account.id,
+    provider: account.provider,
+    identifier: account.emailAddress,
+    connected: true,
+  }))}
+  onNameChange={setName}
+  onUsernameChange={setUsername}
+/>
+```

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

@@ -0,0 +1,54 @@
+/** @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 },
+        { id: 'email_2', value: 'item2@clerk.dev' },
+      ]}
+      connectedAccounts={[
+        {
+          id: 'google',
+          provider: 'Google',
+          identifier: 'test@google.com',
+          iconUrl: providerIconUrl('google'),
+          connected: true,
+        },
+        { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
+      ]}
+      imageUrl={profileImageUrl}
+      name={name}
+      phones={[{ id: 'phone_1', value: '+1 801-888-8181' }]}
+      username={username}
+      onAddEmail={() => undefined}
+      onAddPhone={() => undefined}
+      onConnectAccount={() => undefined}
+      onDeleteAccount={() => undefined}
+      onEditProfilePicture={() => undefined}
+      onManageEmail={() => undefined}
+      onManagePhone={() => undefined}
+      onManageConnectedAccount={() => undefined}
+      onNameChange={setName}
+      onUsernameChange={setUsername}
+    />
+  );
+}