feat(ui): add connected accounts section

Author: austincalvelage

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

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

packages/swingset/src/components/DocsViewer.tsx

@@ -12,6 +12,9 @@ import { ViewSource } from './ViewSource';
 const docModules: Record<string, Record<string, React.ComponentType>> = {
   user: {
     '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'),
+    ),
   },
   organization: {
     'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),

packages/swingset/src/lib/registry.ts

@@ -131,6 +131,10 @@ 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 { toSlug } from './slug';
 import type { StoryModule } from './types';
 
@@ -272,10 +276,15 @@ const userProfileAccountSectionModule: StoryModule = {
   meta: userProfileAccountSectionMeta,
   Default: UserProfileAccountSectionDefault,
 };
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+  meta: userProfileConnectedAccountsSectionMeta,
+  Default: UserProfileConnectedAccountsSectionDefault,
+};
 
 export const registry: StoryModule[] = [
   // User
   userProfileAccountSectionModule,
+  userProfileConnectedAccountsSectionModule,
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,

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

@@ -0,0 +1,7 @@
+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: 'SettingsGroup', href: '/blocks/settings-group', layer: 'Blocks' }]} />

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

@@ -0,0 +1,37 @@
+/** @jsxImportSource @emotion/react */
+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',
+  styleEngine: 'stylex',
+};
+
+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/ui/src/mosaic/icons/registry.tsx

@@ -80,6 +80,13 @@ const Plus = glyph(
   />,
 );
 
+const ArrowRightTop = glyph(
+  <path
+    d='M6.35014 5.40727L10.8285 5.17157M10.8285 5.17157L10.5928 9.64991M10.8285 5.17157L5.17163 10.8284'
+    {...strokeProps}
+  />,
+);
+
 const Pen = glyph(
   <path
     clipRule='evenodd'
@@ -115,6 +122,7 @@ const AlertCircle = glyph(
 /** Runtime name → glyph map. `Icon`'s `name` prop is typed from these keys. */
 export const iconRegistry = {
   'alert-circle': AlertCircle,
+  'arrow-right-top': ArrowRightTop,
   'chevron-right': ChevronRight,
   'chevron-left': ChevronLeft,
   'chevron-down': ChevronDown,

packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx

@@ -0,0 +1,89 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { SettingsGroup } from '../block/settings-group';
+import { Button } from '../components/button';
+import { Icon } from '../components/icon';
+import { space } from '../tokens.stylex';
+import type { UserProfileMenuAction } from './user-profile-action-menu';
+import { UserProfileActionMenu } from './user-profile-action-menu';
+import { styles } from './user-profile-profile-panel.styles';
+
+export interface UserProfileConnectedAccount {
+  id: string;
+  provider: string;
+  identifier?: string;
+  iconUrl?: string;
+  connected?: boolean;
+  canRemove?: boolean;
+}
+
+export interface UserProfileConnectedAccountsSectionViewProps {
+  accounts: UserProfileConnectedAccount[];
+  onConnect?: (id: string) => void;
+  onManage?: (id: string) => void;
+  onRemove?: (id: string) => void;
+}
+
+export function UserProfileConnectedAccountsSectionView({
+  accounts,
+  onConnect,
+  onManage,
+  onRemove,
+}: UserProfileConnectedAccountsSectionViewProps) {
+  return (
+    <SettingsGroup.Root title='Connected accounts'>
+      <SettingsGroup.List>
+        {accounts.map(account => {
+          const connected = account.connected ?? Boolean(account.identifier);
+          const actions: UserProfileMenuAction[] = [];
+          if (onRemove && account.canRemove !== false) {
+            actions.push({ label: 'Remove', color: 'negative', onClick: () => onRemove(account.id) });
+          } else if (!onRemove && onManage) {
+            actions.push({ label: 'Manage', onClick: () => onManage(account.id) });
+          }
+
+          return (
+            <SettingsGroup.Row
+              key={account.id}
+              style={{ columnGap: space['3'] }}
+            >
+              {account.iconUrl ? (
+                <SettingsGroup.Media>
+                  <img
+                    alt=''
+                    src={account.iconUrl}
+                    {...stylex.props(styles.providerIcon)}
+                  />
+                </SettingsGroup.Media>
+              ) : null}
+              <SettingsGroup.Label description={account.identifier}>{account.provider}</SettingsGroup.Label>
+              <SettingsGroup.Control>
+                {connected ? (
+                  <UserProfileActionMenu
+                    actions={actions}
+                    label={`Manage ${account.provider}`}
+                  />
+                ) : null}
+                {!connected && onConnect ? (
+                  <Button
+                    color='neutral'
+                    size='sm'
+                    variant='outline'
+                    onClick={() => onConnect(account.id)}
+                  >
+                    Connect
+                    <Icon
+                      name='arrow-right-top'
+                      placement='inline-end'
+                      size='sm'
+                    />
+                  </Button>
+                ) : null}
+              </SettingsGroup.Control>
+            </SettingsGroup.Row>
+          );
+        })}
+      </SettingsGroup.List>
+    </SettingsGroup.Root>
+  );
+}