feat(ui): add composed UserProfile panels and section components

Author: alexcarpenter

packages/ui/src/composed/UserProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const APIKeysPage = lazy(() =>
+  import('../../components/UserProfile/APIKeysPage').then(m => ({
+    default: m.APIKeysPage,
+  })),
+);
+
+export const UserProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={APIKeysPage} />;

packages/ui/src/composed/UserProfile/Account.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { AccountPage } from '../../components/UserProfile/AccountPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function AccountComposed({ children }: PropsWithChildren): ReactNode {
+  const card = useCardState();
+  return (
+    <ProfileCard.Page>
+      <ProfileCard.PagePanel
+        pageId='account'
+        titleKey={localizationKeys('userProfile.start.headerTitle__account')}
+        alertContent={card.error}
+        outerSx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground, isolation: 'isolate' })}
+      >
+        {children}
+      </ProfileCard.PagePanel>
+    </ProfileCard.Page>
+  );
+}
+
+export function UserProfileAccountPanel({ children }: PropsWithChildren): ReactNode {
+  if (!children) {
+    return <AccountPage />;
+  }
+
+  return (
+    <PageContext.Provider value='account'>
+      <CardStateProvider>
+        <AccountComposed>{children}</AccountComposed>
+      </CardStateProvider>
+    </PageContext.Provider>
+  );
+}

packages/ui/src/composed/UserProfile/AccountConnectedAccounts.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountConnectedAccounts as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileConnectedAccountsSection = createSection('UserProfileConnectedAccountsSection', Section);

packages/ui/src/composed/UserProfile/AccountEmails.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountEmails as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileEmailSection = createSection('UserProfileEmailSection', Section);

packages/ui/src/composed/UserProfile/AccountEnterpriseAccounts.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountEnterpriseAccounts as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileEnterpriseAccountsSection = createSection('UserProfileEnterpriseAccountsSection', Section);

packages/ui/src/composed/UserProfile/AccountPhone.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountPhone as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfilePhoneSection = createSection('UserProfilePhoneSection', Section);

packages/ui/src/composed/UserProfile/AccountProfile.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { UserProfileSection } from '../../components/UserProfile/UserProfileSection';
+import { createSection } from '../createSection';
+
+export const UserProfileProfileSection = createSection('UserProfileProfileSection', UserProfileSection);

packages/ui/src/composed/UserProfile/AccountUsername.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountUsername as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileUsernameSection = createSection('UserProfileUsernameSection', Section);

packages/ui/src/composed/UserProfile/AccountWeb3.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { AccountWeb3 as Section } from '../../components/UserProfile/AccountSections';
+import { createSection } from '../createSection';
+
+export const UserProfileWeb3Section = createSection('UserProfileWeb3Section', Section);

packages/ui/src/composed/UserProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const BillingPage = lazy(() =>
+  import('../../components/UserProfile/BillingPage').then(m => ({
+    default: m.BillingPage,
+  })),
+);
+
+const PlansPage = lazy(() =>
+  import('../../components/UserProfile/PlansPage').then(m => ({
+    default: m.PlansPage,
+  })),
+);
+
+const StatementPage = lazy(() =>
+  import('../../components/Statements').then(m => ({
+    default: m.StatementPage,
+  })),
+);
+
+const PaymentAttemptPage = lazy(() =>
+  import('../../components/PaymentAttempts').then(m => ({
+    default: m.PaymentAttemptPage,
+  })),
+);
+
+export const UserProfileBillingPanel = (): ReactNode => (
+  <BillingSection
+    billing={BillingPage}
+    plans={PlansPage}
+    statement={StatementPage}
+    paymentAttempt={PaymentAttemptPage}
+  />
+);