@jmruthers/pace-core 0.6.4 → 0.6.5

package/src/components/PasswordChange/PasswordChangeForm.test.tsx

@@ -266,6 +266,67 @@ describe('PasswordChangeForm', () => {
 
       expect(mockOnSubmit).not.toHaveBeenCalled();
     });
+
+    it('calls onSuccess callback when password change succeeds', async () => {
+      const user = userEvent.setup();
+      const mockOnSuccess = vi.fn();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...baseProps} onSuccess={mockOnSuccess} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockOnSuccess).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('does not call onSuccess callback when password change fails', async () => {
+      const user = userEvent.setup();
+      const mockOnSuccess = vi.fn();
+      mockOnSubmit.mockResolvedValue({ error: { message: 'Password too weak' } });
+
+      render(<PasswordChangeForm {...baseProps} onSuccess={mockOnSuccess} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Password too weak')).toBeInTheDocument();
+        expect(mockOnSuccess).not.toHaveBeenCalled();
+      });
+    });
+
+    it('works without onSuccess callback (backward compatibility)', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...baseProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalled();
+      });
+      // Should not throw error when onSuccess is not provided
+    });
   });
 
   describe('Loading States', () => {

package/src/components/PasswordChange/PasswordChangeForm.tsx

@@ -47,7 +47,7 @@
  *   }}
  * />
  * 
- * // Password change form in a modal
+ * // Password change form in a modal with onSuccess callback
  * <Modal isOpen={showPasswordChange} onClose={() => setShowPasswordChange(false)}>
  *   <ModalContent>
  *     <ModalHeader>
@@ -58,13 +58,15 @@
  *         onSubmit={async (values) => {
  *           const result = await changePassword(values.newPassword);
  *           if (result.success) {
- *             setShowPasswordChange(false);
- *             toast.success('Password changed successfully');
  *             return {};
  *           } else {
  *             return { error: { message: result.error } };
  *           }
  *         }}
+ *         onSuccess={() => {
+ *           setShowPasswordChange(false);
+ *           toast.success('Password changed successfully');
+ *         }}
  *       />
  *     </ModalBody>
  *   </ModalContent>
@@ -124,10 +126,11 @@ export interface PasswordChangeFormError {
  */
 export interface PasswordChangeFormProps {
   onSubmit: (values: PasswordChangeFormValues) => Promise<{ error?: PasswordChangeFormError }>;
+  onSuccess?: () => void;
   className?: string;
 }
 
-export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormProps) {
+export function PasswordChangeForm({ onSubmit, onSuccess, className }: PasswordChangeFormProps) {
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
@@ -151,6 +154,9 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
       const result = await onSubmit({ newPassword, confirmPassword });
       if (result && result.error) {
         setError(result.error.message || 'Failed to change password.');
+      } else {
+        // Success - call onSuccess callback
+        onSuccess?.();
       }
     } catch (err) {
       const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
@@ -163,23 +169,23 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
   return (
     <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
       {error && (
-        <div role="alert">
+      <p className="grid place-items-center text-center size-full" role="alert">
           {error}
-        </div>
+        </p>
       )}
-      <div className="space-y-2">
-        <Label htmlFor="new-password">New Password</Label>
-        <Input
+        <Label htmlFor="new-password" className="block mb-4">New Password
+          <Input
           id="new-password"
           type="password"
           value={newPassword}
           onChange={(e) => setNewPassword(e.target.value)}
           required
           disabled={isSubmitting}
+          className="mt-2"
         />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="confirm-password">Confirm Password</Label>
+        </Label>
+
+        <Label htmlFor="confirm-password" className="block mb-4">Confirm Password
         <Input
           id="confirm-password"
           type="password"
@@ -187,8 +193,9 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
           onChange={(e) => setConfirmPassword(e.target.value)}
           required
           disabled={isSubmitting}
+          className="mt-2"
         />
-      </div>
+        </Label>
       <Button
         type="submit"
         className="w-full"

package/src/components/PublicLayout/PublicLayout.test.tsx

@@ -241,15 +241,19 @@ describe('[component] PublicPageLayout', () => {
     });
 
     it('renders loading state with proper layout classes', () => {
-      const { container } = render(
+      render(
         <PublicPageLayout eventCode="EVENT123" isLoading={true}>
           <div>Test Content</div>
         </PublicPageLayout>
       );
 
-      const loadingContainer = container.querySelector('.min-h-screen');
+      // The loading state renders a <p> tag with grid and place-items-center classes
+      // There may be multiple "Loading..." texts (from LoadingSpinner mock and actual text)
+      // So we query by the container element using getAllByText and find the one in the <p> tag
+      const loadingTexts = screen.getAllByText('Loading...');
+      const loadingContainer = loadingTexts.find(text => text.closest('p'))?.closest('p');
       expect(loadingContainer).toBeInTheDocument();
-      expect(loadingContainer).toHaveClass('bg-background', 'flex', 'items-center', 'justify-center');
+      expect(loadingContainer).toHaveClass('grid', 'place-items-center', 'text-center', 'size-full');
     });
   });
 

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -312,14 +312,11 @@ export function PublicPageLayout({
       return <LoadingFallback />;
     }
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="max-w-md mx-auto text-center px-4">
-          <LoadingSpinner size="lg" className="mx-auto mb-4" />
-          {loadingMessage && (
-            <p className="text-sec-600">{loadingMessage}</p>
-          )}
-        </div>
-      </div>
+      <p className="grid place-items-center text-center size-full">
+        <LoadingSpinner
+          size="lg"/><br />
+        {loadingMessage || 'Loading...'}
+        </p>
     );
   }
 

package/src/components/UserMenu/UserMenu.test.tsx

@@ -21,7 +21,7 @@ vi.mock('lucide-react', () => ({
 
 // Mock the PasswordChangeForm component
 vi.mock('../PasswordChange/PasswordChangeForm', () => ({
-  PasswordChangeForm: ({ onSubmit }: { onSubmit: (values: { newPassword: string; confirmPassword: string }) => Promise<{ error?: { message?: string; code?: string } }> }) => {
+  PasswordChangeForm: ({ onSubmit, onSuccess }: { onSubmit: (values: { newPassword: string; confirmPassword: string }) => Promise<{ error?: { message?: string; code?: string } }>; onSuccess?: () => void }) => {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [error, setError] = React.useState<string | null>(null);
     
@@ -33,6 +33,9 @@ vi.mock('../PasswordChange/PasswordChangeForm', () => ({
         const result = await onSubmit({ newPassword: 'newpass123', confirmPassword: 'newpass123' });
         if (result.error) {
           setError(result.error.message);
+        } else {
+          // Call onSuccess on successful password change
+          onSuccess?.();
         }
       } catch (err) {
         const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
@@ -92,9 +95,7 @@ vi.mock('../Select', () => ({
 // Mock the Dialog components
 vi.mock('../Dialog', () => ({
   Dialog: ({ children, open, onOpenChange }: { children: React.ReactNode; open: boolean; onOpenChange: (open: boolean) => void }) => (
-    <div data-testid="dialog" data-open={open}>
-      {children}
-    </div>
+    open ? <div data-testid="dialog" role="dialog" data-open={open}>{children}</div> : null
   ),
   DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
     <div data-testid="dialog-content" className={className}>
@@ -109,12 +110,17 @@ vi.mock('../Dialog', () => ({
   DialogTitle: ({ children }: { children: React.ReactNode }) => (
     <h2 data-testid="dialog-title">{children}</h2>
   ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <p data-testid="dialog-description">{children}</p>
+  ),
   DialogTrigger: ({ children, asChild }: { children: React.ReactNode; asChild?: boolean }) => (
     <div data-testid="dialog-trigger">
       {asChild ? children : <button>{children}</button>}
     </div>
   ),
-  DialogOverlay: () => <div data-testid="dialog-overlay" />,
+  DialogClose: ({ children, onClick }: { children?: React.ReactNode; onClick?: () => void }) => (
+    <button data-testid="dialog-close" onClick={onClick}>{children || 'Close'}</button>
+  ),
 }));
 
 // Mock the Avatar component
@@ -412,6 +418,32 @@ describe('UserMenu Component', () => {
       });
     });
 
+    it('closes dialog when password change succeeds', async () => {
+      const user = createMockUser();
+      const handleChangePassword = vi.fn().mockResolvedValue({});
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onChangePassword={handleChangePassword} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      // Verify dialog is open
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+      
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      await userEventInstance.click(submitButton);
+      
+      // Wait for dialog to close
+      await waitFor(() => {
+        const dialog = screen.queryByTestId('dialog-content');
+        expect(dialog).not.toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+
     it('keeps dialog open when password change fails', async () => {
       const user = createMockUser();
       const handleChangePassword = vi.fn().mockResolvedValue({ error: { message: 'Password too weak' } });
@@ -434,7 +466,7 @@ describe('UserMenu Component', () => {
         expect(screen.getByTestId('error-message')).toHaveTextContent('Password too weak');
       });
       
-      // Dialog should still be open
+      // Dialog should still be open (onSuccess should not be called when there's an error)
       expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
     });
 

package/src/components/UserMenu/UserMenu.tsx

@@ -117,9 +117,7 @@ import {
   Dialog,
   DialogContent,
   DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogOverlay
+  DialogTitle
 } from '../Dialog';
 import { PasswordChangeForm, PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 import { Avatar } from '../Avatar';
@@ -144,8 +142,6 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
   className,
   showAvatar = true,
 }) {
-  const [isPasswordDialogOpen, setPasswordDialogOpen] = useState(false);
-
   const userInfo = useMemo(() => {
     if (!user) return null;
     return {
@@ -164,8 +160,18 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
     return null; // Or a loading/login button
   }
 
+  // Password change dialog state and handlers (moved closer to Dialog usage)
+  const [isPasswordDialogOpen, setPasswordDialogOpen] = useState(false);
+
+  const handlePasswordChange = useCallback(async (newPassword: string, confirmPassword: string) => {
+    if (!onChangePassword) {
+      return { error: { message: 'Password change not configured' } };
+    }
+    return await onChangePassword(newPassword, confirmPassword);
+  }, [onChangePassword]);
+
   return (
-    <Dialog open={isPasswordDialogOpen} onOpenChange={setPasswordDialogOpen}>
+    <>
       <Select className={className}>
         <SelectTrigger asChild>
           <Button variant="outline" className="flex items-center gap-2" aria-label={userInfo.displayName}>
@@ -185,42 +191,38 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
           <SelectLabel className="font-normal">
             <li className="pt-2">
           {userInfo.displayName}<br/>
-              <span className="text-muted-foreground">{userInfo.email}</span>
+              <small>{userInfo.email}</small>
             </li>
           </SelectLabel>
           <SelectSeparator />
-          <DialogTrigger asChild>
-            <SelectItem value="change-password">
-              <KeyRound className="mr-2 size-4" />
-              <span>Change Password</span>
-            </SelectItem>
-          </DialogTrigger>
+          <SelectItem 
+            value="change-password"
+            onClick={() => setPasswordDialogOpen(true)}
+          >
+            <KeyRound className="inline-block mr-2 size-4" />
+            Change Password
+          </SelectItem>
           <SelectItem value="sign-out" onClick={handleSignOut}>
-            <LogOut className="mr-2 size-4" />
-            <span>Sign out</span>
+            <LogOut className="inline-block mr-2 size-4" />
+            Sign out
           </SelectItem>
         </SelectContent>
       </Select>
       
-      <DialogOverlay />
-      <DialogContent className={className}>
-        <DialogHeader>
-          <DialogTitle>Change Password</DialogTitle>
-        </DialogHeader>
-        <PasswordChangeForm
-          onSubmit={async ({ newPassword, confirmPassword }) => {
-            if (onChangePassword) {
-              const { error } = await onChangePassword(newPassword, confirmPassword);
-              if (!error) {
-                setPasswordDialogOpen(false);
-              }
-              return { error };
-            }
-            return {};
-          }}
-        />
-      </DialogContent>
-    </Dialog>
+      <Dialog open={isPasswordDialogOpen} onOpenChange={setPasswordDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Change Password</DialogTitle>
+          </DialogHeader>
+          <PasswordChangeForm
+            onSubmit={async ({ newPassword, confirmPassword }) => {
+              return await handlePasswordChange(newPassword, confirmPassword);
+            }}
+            onSuccess={() => setPasswordDialogOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
   );
 });
 

package/src/components/index.ts

@@ -84,7 +84,6 @@ export {
 export {
   Dialog,
   DialogPortal,
-  DialogOverlay,
   DialogTrigger,
   DialogClose,
   DialogContent,
@@ -98,11 +97,11 @@ export type {
   DialogProps,
   DialogTriggerProps,
   DialogContentProps,
-  DialogOverlayProps,
+  DialogPortalProps,
+  DialogCloseProps,
   DialogHeaderProps,
   DialogFooterProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
+  DialogBodyProps,
   DialogSize
 } from './Dialog/Dialog';
 

package/src/hooks/useEventTheme.ts

@@ -20,7 +20,7 @@
  *   // Automatically applies event colors when event is selected via EventProvider
  *   useEventTheme();
  *   
- *   return <div>Your app content</div>;
+ *   return <main>Your app content</main>;
  * }
  * ```
  * 
@@ -33,7 +33,7 @@
  *   // Applies event colors directly from event prop
  *   useEventTheme(event);
  *   
- *   return <div>Public page content</div>;
+ *   return <main>Public page content</main>;
  * }
  * ```
  */
@@ -79,7 +79,7 @@ const log = createLogger('useEventTheme');
  * // Authenticated mode - uses EventProvider
  * function MyApp() {
  *   useEventTheme(); // Watches selectedEvent from EventProvider
- *   return <div>App content</div>;
+ *   return <main>App content</main>;
  * }
  * ```
  * 
@@ -88,7 +88,7 @@ const log = createLogger('useEventTheme');
  * // Public page mode - uses event prop
  * function PublicPageLayout({ event }) {
  *   useEventTheme(event); // Uses event prop directly
- *   return <div>Public content</div>;
+ *   return <main>Public content</main>;
  * }
  * ```
  */

package/src/hooks/useEvents.ts

@@ -37,13 +37,17 @@ export interface EventContextType {
  *   const { events, selectedEvent, setSelectedEvent } = useEvents();
  *   
  *   return (
- *     <div>
- *       {events.map(event => (
- *         <button key={event.id} onClick={() => setSelectedEvent(event)}>
- *           {event.event_name}
- *         </button>
- *       ))}
- *     </div>
+ *     <nav>
+ *       <ul>
+ *         {events.map(event => (
+ *           <li key={event.id}>
+ *             <button onClick={() => setSelectedEvent(event)}>
+ *               {event.event_name}
+ *             </button>
+ *           </li>
+ *         ))}
+ *       </ul>
+ *     </nav>
  *   );
  * }
  * ```

package/src/hooks/useKeyboardShortcuts.ts

@@ -86,7 +86,7 @@ function matchesKeyCombo(event: KeyboardEvent, combo: string): boolean {
  * 
  *   useKeyboardShortcuts(shortcuts);
  *   
- *   return <div>Content</div>;
+ *   return <main>Content</main>;
  * }
  * ```
  */

package/src/hooks/useOrganisationPermissions.ts

@@ -18,11 +18,11 @@
  *   } = useOrganisationPermissions();
  *   
  *   return (
- *     <div>
+ *     <section>
  *       {isOrgAdmin && <AdminPanel />}
  *       {canManageMembers && <MemberManagement />}
  *       <p>Your role: {userRole}</p>
- *     </div>
+ *     </section>
  *   );
  * }
  * 
@@ -31,10 +31,10 @@
  *   const permissions = useOrganisationPermissions('org-123');
  *   
  *   if (!permissions.hasOrganisationAccess) {
- *     return <div>No access to this organisation</div>;
+ *     return <main>No access to this organisation</main>;
  *   }
  *   
- *   return <div>Role in org-123: {permissions.userRole}</div>;
+ *   return <main>Role in org-123: {permissions.userRole}</main>;
  * }
  * ```
  *

package/src/hooks/useOrganisations.ts

@@ -26,14 +26,20 @@ import { Organisation, OrganisationMembership, OrganisationContextType } from '.
  *   const { selectedOrganisation, organisations, switchOrganisation } = useOrganisations();
  *   
  *   return (
- *     <div>
+ *     <main>
  *       <h1>Current Organisation: {selectedOrganisation.display_name}</h1>
- *       {organisations.map(org => (
- *         <button key={org.id} onClick={() => switchOrganisation(org.id)}>
- *           {org.display_name}
- *         </button>
- *       ))}
- *     </div>
+ *       <nav>
+ *         <ul>
+ *           {organisations.map(org => (
+ *             <li key={org.id}>
+ *               <button onClick={() => switchOrganisation(org.id)}>
+ *                 {org.display_name}
+ *               </button>
+ *             </li>
+ *           ))}
+ *         </ul>
+ *       </nav>
+ *     </main>
  *   );
  * }
  * ```

package/src/index.ts

@@ -101,7 +101,6 @@ export type { ProgressProps } from './components/Progress';
 export {
   Dialog,
   DialogPortal,
-  DialogOverlay,
   DialogTrigger,
   DialogClose,
   DialogContent,
@@ -111,6 +110,17 @@ export {
   DialogTitle,
   DialogDescription,
 } from './components/Dialog/Dialog';
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogContentProps,
+  DialogPortalProps,
+  DialogCloseProps,
+  DialogHeaderProps,
+  DialogFooterProps,
+  DialogBodyProps,
+  DialogSize
+} from './components/Dialog/Dialog';
 
 // Dropdown Menu exports
 // DropdownMenu components have been merged into Select components