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

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

packages/swingset/src/lib/registry.ts

@@ -134,6 +134,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';
 
@@ -279,11 +283,16 @@ const userProfileAccountSectionModule: StoryModule = {
   meta: userProfileAccountSectionMeta,
   Default: UserProfileAccountSectionDefault,
 };
+const userProfileConnectedAccountsSectionModule: StoryModule = {
+  meta: userProfileConnectedAccountsSectionMeta,
+  Default: UserProfileConnectedAccountsSectionDefault,
+};
 
 export const registry: StoryModule[] = [
   // User
   userButtonModule,
   userProfileAccountSectionModule,
+  userProfileConnectedAccountsSectionModule,
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,

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: 'Settings', href: '/components/settings', 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,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

@@ -94,6 +94,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
     d='M12.03 3.972a1.59 1.59 0 0 0-2.261 0l-.01.01-5.056 4.89a1.25 1.25 0 0 0-.351.627l-.61 2.747 2.542-.598a1.25 1.25 0 0 0 .59-.325L12.085 6.2c.573-.638.549-1.62-.057-2.228M8.71 2.909a3.09 3.09 0 0 1 4.383.005 3.126 3.126 0 0 1 .06 4.341l-5.228 5.138a2.75 2.75 0 0 1-1.298.715l-3.705.872a.75.75 0 0 1-.904-.893l.87-3.914a2.75 2.75 0 0 1 .772-1.38z'
@@ -142,6 +149,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,91 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { Button } from '../components/button';
+import { Icon } from '../components/icon';
+import { Settings } from '../components/settings';
+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 (
+    <Settings.Root>
+      <Settings.Title>Connected accounts</Settings.Title>
+      <Settings.Group>
+        {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 (
+            <Settings.Row key={account.id}>
+              <Settings.Item>
+                {account.iconUrl ? (
+                  <Settings.Media>
+                    <img
+                      alt=''
+                      src={account.iconUrl}
+                      {...stylex.props(styles.providerIcon)}
+                    />
+                  </Settings.Media>
+                ) : null}
+                <Settings.Content>
+                  <Settings.Label>{account.provider}</Settings.Label>
+                  {account.identifier ? <Settings.Description>{account.identifier}</Settings.Description> : null}
+                </Settings.Content>
+                <Settings.Actions>
+                  {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}
+                </Settings.Actions>
+              </Settings.Item>
+            </Settings.Row>
+          );
+        })}
+      </Settings.Group>
+    </Settings.Root>
+  );
+}