feat(ui): add user profile delete section

Author: austincalvelage

.changeset/user-profile-delete-section.md

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

packages/swingset/src/components/DocsViewer.tsx

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

packages/swingset/src/lib/registry.ts

@@ -141,6 +141,10 @@ 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 UserProfileWeb3WalletsSectionDefault,
   meta as userProfileWeb3WalletsSectionMeta,
@@ -301,13 +305,18 @@ const userProfileWeb3WalletsSectionModule: StoryModule = {
   meta: userProfileWeb3WalletsSectionMeta,
   Default: UserProfileWeb3WalletsSectionDefault,
 };
+const userProfileDeleteSectionModule: StoryModule = {
+  meta: userProfileDeleteSectionMeta,
+  Default: UserProfileDeleteSectionDefault,
+};
 
 export const registry: StoryModule[] = [
   // User
   userButtonModule,
   userProfileAccountSectionModule,
   userProfileConnectedAccountsSectionModule,
   userProfileWeb3WalletsSectionModule,
+  userProfileDeleteSectionModule,
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,

packages/swingset/src/stories/user-profile-delete-section.mdx

@@ -0,0 +1,7 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story name='Default' storyModule={Stories} composition={[{ name: 'SettingsGroup', href: '/blocks/settings-group', layer: 'Blocks' }]} />

packages/swingset/src/stories/user-profile-delete-section.stories.tsx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @emotion/react */
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User',
+  title: 'UserProfileDeleteSection',
+  source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+  styleEngine: 'stylex',
+};
+
+export function Default() {
+  return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}

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

@@ -0,0 +1,30 @@
+import { SettingsGroup } from '../block/settings-group';
+import { Button } from '../components/button';
+
+export interface UserProfileDeleteSectionViewProps {
+  onDelete: () => void;
+}
+
+export function UserProfileDeleteSectionView({ onDelete }: UserProfileDeleteSectionViewProps) {
+  return (
+    <SettingsGroup.Root title='Danger zone'>
+      <SettingsGroup.List>
+        <SettingsGroup.Row>
+          <SettingsGroup.Label description='This action is permanent and irreversible.'>
+            Delete account
+          </SettingsGroup.Label>
+          <SettingsGroup.Control>
+            <Button
+              color='negative'
+              size='sm'
+              variant='outline'
+              onClick={onDelete}
+            >
+              Delete account
+            </Button>
+          </SettingsGroup.Control>
+        </SettingsGroup.Row>
+      </SettingsGroup.List>
+    </SettingsGroup.Root>
+  );
+}