feat(ui): add user profile account section (#9380)

Author: austincalvelage

.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' },
+  ]}
+/>