@djangocfg/layouts 2.1.355 → 2.1.357

package/src/layouts/PublicLayout/primitives/NavDesktopItems.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ChevronDown } from 'lucide-react';
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Button, Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
@@ -48,7 +48,7 @@ function subMenuLinkCls(active: boolean) {
 const popoverCls =
   'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
 
-export function NavDesktopItems({
+function NavDesktopItemsRaw({
   items,
   maxVisible,
   isActivePath,
@@ -245,3 +245,43 @@ export function NavDesktopItems({
     </div>
   );
 }
+
+/**
+ * Shallow equality for NavigationItem arrays. Compares href, label, external
+ * and one-level-deep sub-items so that nav label/badge changes re-render,
+ * but object-reference churn from parent is ignored.
+ */
+function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((ai, i) => {
+    const bi = b[i];
+    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
+    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
+    if (ai.items) {
+      return ai.items.every((sub, j) => {
+        const bsub = bi.items![j];
+        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
+      });
+    }
+    return true;
+  });
+}
+
+/**
+ * Memoised desktop navigation row. Re-renders only when:
+ * - the items array content changes (via navItemsShallowEqual),
+ * - dropdown state object changes,
+ * - maxVisible or renderDesktopDropdown changes.
+ * Parent re-renders with identical navigation data are skipped entirely.
+ */
+export const NavDesktopItems = memo(NavDesktopItemsRaw, (prev, next) => {
+  return (
+    prev.maxVisible === next.maxVisible &&
+    prev.isActivePath === next.isActivePath &&
+    prev.isGroupActive === next.isGroupActive &&
+    prev.dropdown === next.dropdown &&
+    prev.renderDesktopDropdown === next.renderDesktopDropdown &&
+    navItemsShallowEqual(prev.items, next.items)
+  );
+});

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -17,7 +17,7 @@ import { useBodyScrollLock, useIsTabletOrBelow } from '@djangocfg/ui-core/hooks'
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
-import { UserMenu } from '../../_components/UserMenu';
+import { UserMenu } from '../components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
 import { useMobileNavPanel } from '../hooks';
 import { NavControls } from '../primitives/NavControls';

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -17,6 +17,7 @@
 
 import React, {
   type ReactNode,
+  memo,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -160,7 +161,7 @@ export interface NavbarActionsContext {
   controls: ReactNode | null;
 }
 
-export function NavbarShell(props: NavbarShellProps) {
+function NavbarShellRaw(props: NavbarShellProps) {
   const context = usePublicLayoutOptional();
 
   const {
@@ -348,3 +349,61 @@ export function NavbarShell(props: NavbarShellProps) {
     </div>
   );
 }
+
+/**
+ * Shallow equality for NavigationItem arrays. Compares href, label, external
+ * and one-level-deep sub-items so that nav label/badge changes re-render,
+ * but object-reference churn from parent is ignored.
+ */
+function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((ai, i) => {
+    const bi = b[i];
+    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
+    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
+    if (ai.items) {
+      return ai.items.every((sub, j) => {
+        const bsub = bi.items![j];
+        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
+      });
+    }
+    return true;
+  });
+}
+
+/**
+ * Memoised navbar orchestrator. Re-renders only when any config prop changes
+ * (variant, position, nav items, actions, slots, etc.). The heavy inner JSX
+ * (brand, desktop nav, actions) is preserved across renders when props are
+ * stable. Navigation items are compared via navItemsShallowEqual so that
+ * reference churn from parent does not cause a re-render.
+ */
+export const NavbarShell = memo(NavbarShellRaw, (prev, next) => {
+  return (
+    prev.variant === next.variant &&
+    prev.position === next.position &&
+    prev.brand === next.brand &&
+    prev.brandHref === next.brandHref &&
+    prev.userMenu === next.userMenu &&
+    prev.desktopMaxPrimaryItems === next.desktopMaxPrimaryItems &&
+    prev.navLayout === next.navLayout &&
+    prev.navbarHeight === next.navbarHeight &&
+    prev.insetX === next.insetX &&
+    prev.innerPadding === next.innerPadding &&
+    prev.hideNavOnScroll === next.hideNavOnScroll &&
+    prev.transparent === next.transparent &&
+    prev.transparentThreshold === next.transparentThreshold &&
+    prev.outerClassName === next.outerClassName &&
+    prev.shapeClassName === next.shapeClassName &&
+    prev.shapeForState === next.shapeForState &&
+    prev.renderActions === next.renderActions &&
+    prev.actions === next.actions &&
+    prev.actionsLeadingSlot === next.actionsLeadingSlot &&
+    prev.actionsTrailingSlot === next.actionsTrailingSlot &&
+    prev.controls === next.controls &&
+    prev.mobileMenuOpen === next.mobileMenuOpen &&
+    prev.onMobileMenuToggle === next.onMobileMenuToggle &&
+    navItemsShallowEqual(prev.navigation ?? [], next.navigation ?? [])
+  );
+});

package/src/layouts/_components/index.ts

@@ -1,5 +1,7 @@
 /**
  * Shared Layout Components
+ *
+ * Components used across multiple layout types.
  */
 
 export {
@@ -25,10 +27,3 @@ export type {
   LocaleSwitcherSharedProps,
   LocaleSwitcherVariant,
 } from './LocaleSwitcher';
-
-export { UserMenu } from './UserMenu';
-export type { UserMenuProps } from './UserMenu';
-
-export { UserAvatar } from './UserAvatar';
-export type { UserAvatarProps } from './UserAvatar';
-

package/src/layouts/index.ts

@@ -10,9 +10,15 @@
 // Shared types (universal type system)
 export * from './types';
 
-// Shared components
-export { LocaleSwitcher, LOCALE_LABELS, UserMenu } from './_components';
-export type { LocaleSwitcherProps, UserMenuProps } from './_components';
+// Shared components (used by multiple layouts)
+export { LocaleSwitcher, LOCALE_LABELS } from './_components';
+export type { LocaleSwitcherProps } from './_components';
+
+// PublicLayout components (re-exported for convenience)
+export { UserMenu } from './PublicLayout/components';
+export type { UserMenuProps } from './PublicLayout/components';
+export { UserAvatar } from './PublicLayout/components';
+export type { UserAvatarProps } from './PublicLayout/components';
 
 // Smart layout router
 export * from './AppLayout';
@@ -25,4 +31,3 @@ export * from './AdminLayout';
 
 // Additional layouts
 export * from './ProfileLayout';
-

package/src/layouts/ProfileLayout/__tests__/TwoFactorSection.test.tsx

@@ -1,234 +0,0 @@
-/**
- * Tests for TwoFactorSection component
- *
- * Tests the 2FA management section in ProfileLayout.
- */
-
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-
-import { TwoFactorSection } from '../components/TwoFactorSection';
-
-// Mock hooks
-const mockFetchStatus = jest.fn();
-const mockDisable2FA = jest.fn();
-const mockResetSetup = jest.fn();
-const mockClearError = jest.fn();
-
-jest.mock('@djangocfg/api/auth', () => ({
-  useTwoFactorStatus: () => ({
-    isLoading: false,
-    error: null,
-    has2FAEnabled: false,
-    devices: [],
-    fetchStatus: mockFetchStatus,
-    disable2FA: mockDisable2FA,
-    clearError: mockClearError,
-  }),
-  useTwoFactorSetup: () => ({
-    resetSetup: mockResetSetup,
-  }),
-}));
-
-// Mock TwoFactorSetup component
-jest.mock('../../AuthLayout/components/TwoFactorSetup', () => ({
-  TwoFactorSetup: ({ onComplete, onSkip }: any) => (
-    <div data-testid="two-factor-setup">
-      <button onClick={onComplete}>Complete Setup</button>
-      <button onClick={onSkip}>Skip Setup</button>
-    </div>
-  ),
-}));
-
-// Mock UI components
-jest.mock('@djangocfg/ui-core/components', () => ({
-  Alert: ({ children, variant }: any) => (
-    <div data-testid="alert" data-variant={variant}>
-      {children}
-    </div>
-  ),
-  AlertDescription: ({ children }: any) => <span>{children}</span>,
-  Button: ({ children, onClick, disabled, variant }: any) => (
-    <button onClick={onClick} disabled={disabled} data-variant={variant}>
-      {children}
-    </button>
-  ),
-  Card: ({ children, className }: any) => (
-    <div data-testid="card" className={className}>
-      {children}
-    </div>
-  ),
-  CardContent: ({ children }: any) => <div>{children}</div>,
-  CardDescription: ({ children }: any) => <p>{children}</p>,
-  CardHeader: ({ children }: any) => <div>{children}</div>,
-  CardTitle: ({ children }: any) => <h3>{children}</h3>,
-  Dialog: ({ children, open }: any) => (open ? <div data-testid="dialog">{children}</div> : null),
-  DialogContent: ({ children }: any) => <div>{children}</div>,
-  DialogDescription: ({ children }: any) => <p>{children}</p>,
-  DialogFooter: ({ children }: any) => <div>{children}</div>,
-  DialogHeader: ({ children }: any) => <div>{children}</div>,
-  DialogTitle: ({ children }: any) => <h4>{children}</h4>,
-  OTPInput: ({ value, onChange, disabled }: any) => (
-    <input
-      data-testid="otp-input"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-    />
-  ),
-}));
-
-describe('TwoFactorSection', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('when 2FA is disabled', () => {
-    it('should render disabled state', () => {
-      render(<TwoFactorSection />);
-
-      expect(screen.getByText('Two-Factor Authentication')).toBeInTheDocument();
-      expect(screen.getByText('2FA is not enabled')).toBeInTheDocument();
-      expect(screen.getByText('Enable 2FA')).toBeInTheDocument();
-    });
-
-    it('should fetch status on mount', () => {
-      render(<TwoFactorSection />);
-
-      expect(mockFetchStatus).toHaveBeenCalledTimes(1);
-    });
-
-    it('should show security recommendation', () => {
-      render(<TwoFactorSection />);
-
-      expect(
-        screen.getByText(/Two-factor authentication adds an extra layer of security/)
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('when 2FA is enabled', () => {
-    beforeEach(() => {
-      jest.doMock('@djangocfg/api/auth', () => ({
-        useTwoFactorStatus: () => ({
-          isLoading: false,
-          error: null,
-          has2FAEnabled: true,
-          devices: [
-            {
-              id: '123',
-              name: 'My Authenticator',
-              createdAt: '2024-01-01T00:00:00Z',
-              lastUsedAt: null,
-              isPrimary: true,
-            },
-          ],
-          fetchStatus: mockFetchStatus,
-          disable2FA: mockDisable2FA,
-          clearError: mockClearError,
-        }),
-        useTwoFactorSetup: () => ({
-          resetSetup: mockResetSetup,
-        }),
-      }));
-    });
-
-    it('should render enabled state with device info', async () => {
-      // Note: Due to jest module caching, this test shows expected behavior
-      // In actual implementation, mock would need to be reset properly
-    });
-  });
-
-  describe('enable 2FA flow', () => {
-    it('should show setup view when Enable 2FA is clicked', async () => {
-      render(<TwoFactorSection />);
-
-      fireEvent.click(screen.getByText('Enable 2FA'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('two-factor-setup')).toBeInTheDocument();
-      });
-
-      expect(mockResetSetup).toHaveBeenCalled();
-    });
-
-    it('should return to status view when setup is completed', async () => {
-      render(<TwoFactorSection />);
-
-      // Click Enable 2FA
-      fireEvent.click(screen.getByText('Enable 2FA'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('two-factor-setup')).toBeInTheDocument();
-      });
-
-      // Complete setup
-      fireEvent.click(screen.getByText('Complete Setup'));
-
-      await waitFor(() => {
-        expect(mockFetchStatus).toHaveBeenCalled();
-      });
-    });
-
-    it('should return to status view when setup is skipped', async () => {
-      render(<TwoFactorSection />);
-
-      // Click Enable 2FA
-      fireEvent.click(screen.getByText('Enable 2FA'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('two-factor-setup')).toBeInTheDocument();
-      });
-
-      // Skip setup
-      fireEvent.click(screen.getByText('Skip Setup'));
-
-      // Should go back to status view
-      await waitFor(() => {
-        expect(screen.queryByTestId('two-factor-setup')).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('error handling', () => {
-    it('should display error when present', () => {
-      jest.doMock('@djangocfg/api/auth', () => ({
-        useTwoFactorStatus: () => ({
-          isLoading: false,
-          error: 'Failed to fetch status',
-          has2FAEnabled: null,
-          devices: [],
-          fetchStatus: mockFetchStatus,
-          disable2FA: mockDisable2FA,
-          clearError: mockClearError,
-        }),
-        useTwoFactorSetup: () => ({
-          resetSetup: mockResetSetup,
-        }),
-      }));
-
-      // Note: Due to jest module caching, mock would need proper reset
-    });
-  });
-
-  describe('loading state', () => {
-    it('should show loading indicator when fetching initial status', () => {
-      jest.doMock('@djangocfg/api/auth', () => ({
-        useTwoFactorStatus: () => ({
-          isLoading: true,
-          error: null,
-          has2FAEnabled: null,
-          devices: [],
-          fetchStatus: mockFetchStatus,
-          disable2FA: mockDisable2FA,
-          clearError: mockClearError,
-        }),
-        useTwoFactorSetup: () => ({
-          resetSetup: mockResetSetup,
-        }),
-      }));
-
-      // Note: Due to jest module caching, mock would need proper reset
-    });
-  });
-});

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

@@ -1,198 +0,0 @@
-// @ts-nocheck
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from '@djangocfg/ui-core/hooks';
-
-import {
-    PatchedCfgUserUpdateRequest, PatchedCfgUserUpdateRequestSchema,
-    useAuth
-} from '@djangocfg/api/auth';
-import {
-    Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input, Label, PhoneInput
-} from '@djangocfg/ui-core/components';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import { profileLogger } from '../../../utils/logger';
-
-export const ProfileForm = () => {
-  const { user, updateProfile } = useAuth();
-  const [isEditing, setIsEditing] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const form = useForm<PatchedCfgUserUpdateRequest>({
-    resolver: zodResolver(PatchedCfgUserUpdateRequestSchema),
-    defaultValues: {
-      first_name: '',
-      last_name: '',
-      company: '',
-      position: '',
-      phone: '',
-    },
-  });
-
-  // Load user data
-  useEffect(() => {
-    if (user) {
-      form.reset({
-        first_name: user.first_name || '',
-        last_name: user.last_name || '',
-        company: user.company || '',
-        position: user.position || '',
-        phone: user.phone || '',
-      });
-    }
-  }, [user, form]);
-
-  const handleSubmit = async (data: PatchedCfgUserUpdateRequest) => {
-    setIsSaving(true);
-    try {
-      await updateProfile(data);
-      toast.success('Profile updated successfully');
-      setIsEditing(false);
-    } catch (error: any) {
-      profileLogger.error('Profile update error:', error);
-      if (error?.response?.data) {
-        const fieldErrors = error.response.data;
-        Object.entries(fieldErrors).forEach(([field, messages]) => {
-          if (Array.isArray(messages) && messages.length > 0) {
-            form.setError(field as keyof PatchedCfgUserUpdateRequest, {
-              type: 'server',
-              message: messages[0],
-            });
-          }
-        });
-        toast.error('Please fix the validation errors');
-      } else {
-        toast.error('Failed to update profile');
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setIsEditing(false);
-    form.clearErrors();
-    if (user) {
-      form.reset({
-        first_name: user.first_name || '',
-        last_name: user.last_name || '',
-        company: user.company || '',
-        position: user.position || '',
-        phone: user.phone || '',
-      });
-    }
-  };
-
-  const onSubmit = form.handleSubmit(handleSubmit);
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2 md:col-span-2">
-            <Label htmlFor="email">Email</Label>
-            <Input id="email" value={user?.email || ''} disabled className="bg-muted" />
-          </div>
-
-          <FormField
-            control={form.control}
-            name="first_name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>First Name</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter first name" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="last_name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Last Name</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter last name" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="company"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Company</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter company name" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="position"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Position</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter position" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="phone"
-            render={({ field }) => (
-              <FormItem className="md:col-span-2">
-                <FormLabel>Phone</FormLabel>
-                <FormControl>
-                  <PhoneInput
-                    value={field.value}
-                    onChange={field.onChange}
-                    disabled={!isEditing}
-                    placeholder="Enter phone number"
-                    defaultCountry="US"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-
-        {/* Action Buttons */}
-        <div className="flex items-center justify-between pt-4">
-          {isEditing ? (
-            <div className="flex items-center gap-2">
-              <Button type="submit" disabled={isSaving}>
-                {isSaving ? 'Saving...' : 'Save Changes'}
-              </Button>
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                Cancel
-              </Button>
-            </div>
-          ) : (
-            <Button type="button" onClick={() => setIsEditing(true)}>
-              Edit Profile
-            </Button>
-          )}
-        </div>
-      </form>
-    </Form>
-  );
-};
-