@djangocfg/layouts 2.1.426 → 2.1.428

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

@@ -1,44 +0,0 @@
-'use client';
-
-import { Trash2 } from 'lucide-react';
-import React from 'react';
-
-import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-
-import { ActionButton } from './ActionButton';
-
-export const DeleteAccountSection: React.FC = () => {
-  const { logout } = useAuth();
-  const { deleteAccount } = useDeleteAccount();
-  const t = useAppT();
-
-  const confirmationWord = t('layouts.profilePage.confirmationWord');
-
-  const handleClick = async () => {
-    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();
-  };
-
-  return (
-    <ActionButton
-      icon={<Trash2 className="w-4 h-4 text-destructive" />}
-      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
-      onClick={handleClick}
-    />
-  );
-};
-
-// Keep export so nothing breaks — no longer used but exported for backwards compat
-export const DeleteAccountScreen: React.FC = () => null;

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

@@ -1,128 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { parsePhoneNumberFromString } from 'libphonenumber-js';
-
-import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
-import { toast } from '@djangocfg/ui-core/hooks';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useProfileContext } from '../ProfileForm/context';
-
-function formatPhone(raw: string): string {
-  if (!raw) return '';
-  try {
-    return parsePhoneNumberFromString(raw)?.formatInternational() ?? raw;
-  } catch {
-    return raw;
-  }
-}
-
-interface EditableFieldProps {
-  label: string;
-  value: string;
-  placeholder: string;
-  onSave: (value: string) => Promise<void>;
-  disabled?: boolean;
-  type?: 'text' | 'phone';
-}
-
-export const EditableField = ({
-  label,
-  value,
-  placeholder,
-  onSave,
-  disabled,
-  type = 'text',
-}: EditableFieldProps) => {
-  const { labels } = useProfileContext();
-  const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState(value);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    setEditValue(value);
-  }, [value]);
-
-  const handleSave = async () => {
-    if (editValue === value) {
-      setIsEditing(false);
-      return;
-    }
-    setIsSaving(true);
-    try {
-      await onSave(editValue);
-      setIsEditing(false);
-    } catch {
-      // Keep editing mode open with the entered value so the user can retry.
-      toast.error(labels.failedToUpdate);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setEditValue(value);
-    setIsEditing(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') handleSave();
-    else if (e.key === 'Escape') handleCancel();
-  };
-
-  if (isEditing) {
-    return (
-      <div className="py-4 border-b border-border/50 last:border-0">
-        <label className="block text-[13px] text-muted-foreground mb-1.5">{label}</label>
-        {type === 'phone' ? (
-          <div className="space-y-2">
-            <PhoneInput
-              value={editValue}
-              onChange={(val) => setEditValue(val ?? '')}
-              placeholder={placeholder}
-              disabled={isSaving}
-            />
-            <div className="flex gap-2">
-              <Button size="sm" onClick={handleSave} disabled={isSaving}>
-                {isSaving ? labels.saving : labels.save}
-              </Button>
-              <Button size="sm" variant="ghost" onClick={handleCancel} disabled={isSaving}>
-                {labels.cancel}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <Input
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onBlur={handleSave}
-            placeholder={placeholder}
-            autoFocus
-            disabled={isSaving}
-            className="h-9 text-[15px]"
-          />
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={() => !disabled && setIsEditing(true)}
-      disabled={disabled}
-      className={cn(
-        'w-full py-4 border-b border-border/50 last:border-0 text-left',
-        'transition-colors hover:bg-muted/30',
-        disabled && 'cursor-default hover:bg-transparent'
-      )}
-    >
-      <div className="text-[13px] text-muted-foreground mb-0.5">{label}</div>
-      <div className={cn('text-[15px]', value ? 'text-foreground' : 'text-muted-foreground/60')}>
-        {value ? (type === 'phone' ? formatPhone(value) : value) : placeholder}
-      </div>
-    </button>
-  );
-};

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

@@ -1,56 +0,0 @@
-/**
- * Preferences Section
- *
- * Language + theme controls for ProfileForm.
- * Uses ThemeToggle from ui-nextjs and LocaleSwitcherDropdown from _components.
- */
-
-'use client';
-
-import React from 'react';
-
-import { ThemeToggle } from '@djangocfg/ui-core/theme';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
-
-interface PreferencesSectionProps {
-  /** Extra className for the root. */
-  className?: string;
-}
-
-export const PreferencesSection: React.FC<PreferencesSectionProps> = ({
-  className,
-}) => {
-  const layoutI18n = useLayoutI18nOptional();
-
-  return (
-    <div className={cn('py-0', className)}>
-      {layoutI18n && (
-        <>
-          <div className="flex items-center justify-between py-3">
-            <span className="text-sm">Language</span>
-            <LocaleSwitcherDropdown
-              locale={layoutI18n.locale}
-              locales={layoutI18n.locales}
-              onChange={layoutI18n.onLocaleChange}
-              variant="outline"
-              size="sm"
-              showCode
-              showIcon={false}
-              showFlag
-              showTriggerLabel
-            />
-          </div>
-          <div className="h-px bg-border/60" />
-        </>
-      )}
-
-      <div className="flex items-center justify-between py-3">
-        <span className="text-sm">Theme</span>
-        <ThemeToggle size="default" />
-      </div>
-    </div>
-  );
-};

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;