@djangocfg/layouts 2.1.425 → 2.1.427

package/src/layouts/ProfileLayout/components/ProfileHeader.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
-import moment from 'moment';
-import React, { useCallback } from 'react';
-
-import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@djangocfg/ui-core/components';
-
-import { AvatarSection } from './AvatarSection';
-import { useProfileContext } from '../ProfileForm/context';
-import type { ProfileSlots } from '../types';
-
-interface ProfileHeaderProps {
-  slots?: ProfileSlots;
-  enableDeleteAccount?: boolean;
-}
-
-export const ProfileHeader: React.FC<ProfileHeaderProps> = ({ slots, enableDeleteAccount }) => {
-  const { labels, onLogout } = useProfileContext();
-  const { user, logout } = useAuth();
-  const { deleteAccount } = useDeleteAccount();
-  const t = useAppT();
-
-  const handleDeleteAccount = useCallback(async () => {
-    const confirmationWord = t('layouts.profilePage.confirmationWord');
-    const value = await window.dialog.prompt({
-      title: t('layouts.profilePage.deleteAccountTitle'),
-      message: t('layouts.profilePage.deleteAccountDesc'),
-      placeholder: confirmationWord,
-      confirmText: t('layouts.profilePage.deleteAccount'),
-      cancelText: t('layouts.profilePage.cancel'),
-      variant: 'destructive',
-    });
-    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
-    const result = await deleteAccount();
-    if (result.success) logout();
-  }, [t, deleteAccount, logout]);
-
-  if (!user) return null;
-
-  const displayName = user.full_name || user.display_username || user.email;
-  const memberSince = user.date_joined
-    ? moment.utc(user.date_joined).local().format('MMMM YYYY')
-    : null;
-
-  const badge = slots?.headerBadge ?? null;
-  const menuItems = slots?.headerMenuItems ?? null;
-  const headerAfter = slots?.headerAfter ?? null;
-
-  return (
-    <div className="pb-4 md:pb-6 border-b mb-2">
-      <div className="flex items-center gap-3 md:gap-4">
-        <AvatarSection />
-
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <h1 className="text-lg md:text-xl font-semibold truncate">{displayName}</h1>
-            {badge}
-          </div>
-          <p className="text-sm text-muted-foreground truncate">{user.email}</p>
-          {memberSince && (
-            <p className="text-xs text-muted-foreground/60 mt-0.5">
-              Member since {memberSince}
-            </p>
-          )}
-        </div>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="flex-shrink-0 rounded-full">
-              <MoreHorizontal className="w-4 h-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuItem onClick={onLogout} className="gap-2">
-              <LogOut className="w-4 h-4" />
-              {labels.signOut}
-            </DropdownMenuItem>
-
-            {menuItems && <><DropdownMenuSeparator />{menuItems}</>}
-
-            {enableDeleteAccount && (
-              <>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={handleDeleteAccount}
-                  className="gap-2 text-destructive focus:text-destructive"
-                >
-                  <Trash2 className="w-4 h-4" />
-                  {labels.deleteAccount}
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {headerAfter && <div className="mt-4">{headerAfter}</div>}
-    </div>
-  );
-};

package/src/layouts/ProfileLayout/components/ProfileTab.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { useAuth } from '@djangocfg/api/auth';
-
-import { EditableField, PreferencesSection, Section } from '.';
-import { useProfileContext } from '../ProfileForm/context';
-
-export const ProfileTab: React.FC = () => {
-  const { labels, onFieldSave } = useProfileContext();
-  const { user } = useAuth();
-  if (!user) return null;
-
-  return (
-    <div className="space-y-6 pt-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6">
-        <Section title={labels.personalInfo}>
-          <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
-          <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
-          <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
-        </Section>
-
-        <Section title={labels.work}>
-          <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
-          <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
-        </Section>
-      </div>
-
-      <Section title={labels.preferences ?? 'Preferences'}>
-        <PreferencesSection />
-      </Section>
-    </div>
-  );
-};

package/src/layouts/ProfileLayout/components/Section.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface SectionProps {
-  title?: string;
-  children: React.ReactNode;
-  className?: string;
-}
-
-export const Section = ({ title, children, className }: SectionProps) => (
-  <div className={cn('mb-4 md:mb-6', className)}>
-    {title && (
-      <h2 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
-        {title}
-      </h2>
-    )}
-    <div className="bg-card rounded-xl px-4">{children}</div>
-  </div>
-);

package/src/layouts/ProfileLayout/components/index.ts

@@ -1,11 +0,0 @@
-export { ActionButton } from './ActionButton';
-export { ApiKeySection, ApiKeyProvider, useApiKeyContext } from './ApiKeySection';
-export type { ApiKeyLabels } from './ApiKeySection';
-export { AvatarSection } from './AvatarSection';
-export { DeleteAccountSection, DeleteAccountScreen } from './DeleteAccountSection';
-export { EditableField } from './EditableField';
-export { PreferencesSection } from './PreferencesSection';
-export { ProfileHeader } from './ProfileHeader';
-export { ProfileTab } from './ProfileTab';
-export { Section } from './Section';
-export { TwoFactorSection } from './TwoFactorSection';

package/src/layouts/ProfileLayout/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useProfileTabs } from './useProfileTabs';
-export type { ProfileTabValue, ProfileTabValueOrCustom, UseProfileTabsOptions } from './useProfileTabs';

package/src/layouts/ProfileLayout/hooks/useProfileTabs.ts

@@ -1,56 +0,0 @@
-'use client';
-
-import { useMemo, useState, useCallback } from 'react';
-
-/** Built-in tab values. */
-export type ProfileTabValue = 'profile' | 'security' | 'api-keys';
-
-/**
- * Any tab value: a built-in one, or a custom tab's `value` string.
- * `(string & {})` keeps the built-in literals as autocomplete hints while
- * still accepting arbitrary strings (custom tabs added via `tabs`).
- */
-export type ProfileTabValueOrCustom = ProfileTabValue | (string & {});
-
-export interface UseProfileTabsOptions {
-  enable2FA?: boolean;
-  enableAPIKeys?: boolean;
-  extraTabValues?: string[];
-  /** Initial active tab. Defaults to `'profile'`. Accepts custom tab values. */
-  defaultTab?: ProfileTabValueOrCustom;
-}
-
-/**
- * Manages the active profile tab with local React state.
- *
- * Falls back to `'profile'` when `defaultTab` is missing or not allowed.
- *
- * @example
- * const { tab, setTab, allowed } = useProfileTabs({ enable2FA: true, defaultTab: 'security' });
- * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
- */
-export function useProfileTabs(options: UseProfileTabsOptions = {}) {
-  const { enable2FA, enableAPIKeys, extraTabValues = [], defaultTab } = options;
-
-  const allowed = useMemo(() => {
-    const base: ProfileTabValueOrCustom[] = ['profile'];
-    if (enable2FA) base.push('security');
-    if (enableAPIKeys) base.push('api-keys');
-    return [...base, ...extraTabValues];
-  }, [enable2FA, enableAPIKeys, extraTabValues]);
-
-  const [tab, setTabState] = useState<ProfileTabValueOrCustom>(
-    defaultTab && allowed.includes(defaultTab) ? defaultTab : 'profile',
-  );
-
-  const setTab = useCallback(
-    (value: ProfileTabValueOrCustom) => {
-      if (allowed.includes(value)) {
-        setTabState(value);
-      }
-    },
-    [allowed],
-  );
-
-  return { tab, setTab, allowed };
-}

package/src/layouts/ProfileLayout/index.ts

@@ -1,8 +0,0 @@
-export { ProfileForm, useProfileContext } from './ProfileForm';
-export { ProfileProvider } from './ProfileForm/context';
-export { useProfileTabs } from './hooks';
-export { ProfileDialog, useProfileDialogStore } from './ProfileDialog';
-export type { ProfileDialogProps, ProfileDialogContent } from './ProfileDialog';
-export type { ProfileLabels } from './ProfileForm/context';
-export type { ProfileFormProps, ProfileLayoutProps, ProfileTab, ProfileSlots } from './types';
-export type { ProfileTabValue, ProfileTabValueOrCustom, UseProfileTabsOptions } from './hooks';

package/src/layouts/ProfileLayout/types.ts

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import type { ProfileTabValueOrCustom } from './hooks/useProfileTabs';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Slot + Tab types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ProfileTab {
-  /** Unique key, used as Tabs value */
-  value: string;
-  /** Trigger label */
-  label: React.ReactNode;
-  /** Tab panel content */
-  content: React.ReactNode;
-}
-
-export interface ProfileSlots {
-  /** Extra items inside the ⋯ dropdown, above the separator before Delete */
-  headerMenuItems?: React.ReactNode;
-  /** Rendered next to the user name (e.g. plan badge, role chip) */
-  headerBadge?: React.ReactNode;
-  /** Rendered below the avatar row, above the tabs */
-  headerAfter?: React.ReactNode;
-  /** Rendered below all tab content */
-  footer?: React.ReactNode;
-}
-
-export interface ProfileFormProps {
-  onUnauthenticated?: () => void;
-  title?: string;
-  enable2FA?: boolean;
-  enableAPIKeys?: boolean;
-  enableDeleteAccount?: boolean;
-  /** Extra tabs appended after built-in Profile / Security / API Keys tabs */
-  tabs?: ProfileTab[];
-  /** Named slots for additional content */
-  slots?: ProfileSlots;
-  /**
-   * When provided, the active tab is controlled locally (no URL sync).
-   * Useful for dialogs where query-string pollution is undesirable.
-   * Accepts a built-in value or a custom tab's `value`.
-   */
-  defaultTab?: ProfileTabValueOrCustom;
-}
-
-/** @deprecated Use ProfileFormProps instead */
-export type ProfileLayoutProps = ProfileFormProps;