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

@@ -138,6 +138,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,
@@ -295,13 +299,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,14 @@
+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: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+  ]}
+/>

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,34 @@
+import { Button } from '../components/button';
+import { Section } from '../components/section';
+
+export interface UserProfileDeleteSectionViewProps {
+  onDelete: () => void;
+}
+
+export function UserProfileDeleteSectionView({ onDelete }: UserProfileDeleteSectionViewProps) {
+  return (
+    <Section.Root>
+      <Section.Title>Danger zone</Section.Title>
+      <Section.Group>
+        <Section.Row>
+          <Section.Item>
+            <Section.Content>
+              <Section.Label>Delete account</Section.Label>
+              <Section.Description>This action is permanent and irreversible.</Section.Description>
+            </Section.Content>
+            <Section.Actions>
+              <Button
+                color='negative'
+                size='sm'
+                variant='ghost'
+                onClick={onDelete}
+              >
+                Delete account
+              </Button>
+            </Section.Actions>
+          </Section.Item>
+        </Section.Row>
+      </Section.Group>
+    </Section.Root>
+  );
+}