Skip to content

Commit 3e828c7

Browse files
AlexVOiceoverAlexVOiceover
committed
test: mock all Radix UI components to identify useLayoutEffect error source
- Temporarily replaced all @radix-ui components with simple React mockups - Fixed TypeScript errors in UserDataModal - This is a diagnostic commit to identify which component causes the error
1 parent 6bf0695 commit 3e828c7

File tree

6 files changed

+265
-189
lines changed

6 files changed

+265
-189
lines changed

‎src/components/modals/UserDataModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
7272
return (
7373
<DialogContent
7474
className="max-w-3xl p-0 overflow-hidden"
75-
onOpenAutoFocus={(e) => e.preventDefault()}
75+
onOpenAutoFocus={(e: React.FocusEvent) => e.preventDefault()}
7676
>
7777
<div className='bg-brand-pink p-2 flex items-center justify-between sm:rounded-t-lg'>
7878
<DialogTitle className='text-xl font-semibold text-white'>

‎src/components/ui/dialog.tsx‎

Lines changed: 101 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,99 @@
11
'use client';
22

3-
// Import the polyfill early
4-
import '../../lib/utils/radix-utils';
5-
63
import * as React from 'react';
7-
import * as DialogPrimitive from '@radix-ui/react-dialog';
84
import { X } from 'lucide-react';
95
import { cn } from '@/lib/utils';
106

11-
interface CustomDialogContentProps
12-
extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
7+
// DISABLED FOR TESTING
8+
// import * as DialogPrimitive from '@radix-ui/react-dialog';
9+
// interface CustomDialogContentProps
10+
// extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
11+
// headerTitle?: string;
12+
// }
13+
14+
// Mock interfaces and components to replace Radix UI
15+
interface DialogProps {
16+
children?: React.ReactNode;
17+
open?: boolean;
18+
onOpenChange?: (open: boolean) => void;
19+
}
20+
21+
interface DialogTriggerProps {
22+
children?: React.ReactNode;
23+
asChild?: boolean;
24+
}
25+
26+
interface DialogPortalProps {
27+
children?: React.ReactNode;
28+
}
29+
30+
interface DialogCloseProps {
31+
children?: React.ReactNode;
32+
asChild?: boolean;
33+
className?: string;
34+
}
35+
36+
interface DialogOverlayProps {
37+
className?: string;
38+
[key: string]: any;
39+
}
40+
41+
interface CustomDialogContentProps {
42+
className?: string;
43+
children?: React.ReactNode;
1344
headerTitle?: string;
45+
onOpenAutoFocus?: (e: any) => void;
46+
onEscapeKeyDown?: () => void;
47+
onPointerDownOutside?: () => void;
48+
[key: string]: any;
1449
}
1550

16-
const Dialog = DialogPrimitive.Root;
17-
const DialogTrigger = DialogPrimitive.Trigger;
18-
const DialogPortal = DialogPrimitive.Portal;
19-
const DialogClose = DialogPrimitive.Close;
20-
21-
const DialogOverlay = React.forwardRef<
22-
React.ElementRef<typeof DialogPrimitive.Overlay>,
23-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
24-
>(({ className, ...props }, ref) => (
25-
<DialogPrimitive.Overlay
26-
ref={ref}
27-
className={cn(
28-
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
29-
className
30-
)}
31-
{...props}
32-
/>
33-
));
34-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
35-
36-
const DialogContent = React.forwardRef<
37-
React.ElementRef<typeof DialogPrimitive.Content>,
38-
CustomDialogContentProps
39-
>(({ className, children, headerTitle, ...props }, ref) => (
40-
<DialogPortal>
41-
<DialogOverlay />
42-
<DialogPrimitive.Content
51+
interface DialogTitleProps {
52+
className?: string;
53+
children?: React.ReactNode;
54+
[key: string]: any;
55+
}
56+
57+
interface DialogDescriptionProps {
58+
className?: string;
59+
children?: React.ReactNode;
60+
[key: string]: any;
61+
}
62+
63+
// Mock components
64+
const Dialog: React.FC<DialogProps> = ({ children }) => <div className="mock-dialog">{children}</div>;
65+
const DialogTrigger: React.FC<DialogTriggerProps> = ({ children }) => <>{children}</>;
66+
const DialogPortal: React.FC<DialogPortalProps> = ({ children }) => <>{children}</>;
67+
const DialogClose: React.FC<DialogCloseProps> = ({ children }) => <>{children}</>;
68+
const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(
69+
(props, ref) => <div ref={ref} className="hidden" {...props} />
70+
);
71+
DialogOverlay.displayName = 'DialogOverlay';
72+
73+
const DialogContent = React.forwardRef<HTMLDivElement, CustomDialogContentProps>(
74+
({ className, children, headerTitle, ...props }, ref) => (
75+
<div
4376
ref={ref}
44-
className={cn(
45-
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-0 shadow-lg duration-200',
46-
headerTitle && 'sm:rounded-lg',
47-
className
48-
)}
77+
className={cn('fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2', className)}
4978
{...props}
5079
>
5180
{headerTitle && (
5281
<div className='bg-brand-pink p-2 flex items-center justify-between sm:rounded-t-lg'>
53-
<DialogPrimitive.Title className='text-xl font-semibold text-white'>
82+
<div className='text-xl font-semibold text-white'>
5483
{headerTitle}
55-
</DialogPrimitive.Title>
56-
<DialogPrimitive.Close asChild>
57-
<button className='text-white' aria-label='Close'>
58-
<X size={24} />
59-
</button>
60-
</DialogPrimitive.Close>
84+
</div>
85+
<button className='text-white' aria-label='Close'>
86+
<X size={24} />
87+
</button>
6188
</div>
6289
)}
6390
<div className={headerTitle ? 'p-4 bg-gray-50 sm:rounded-b-lg' : 'p-4'}>
6491
{children}
6592
</div>
66-
</DialogPrimitive.Content>
67-
</DialogPortal>
68-
));
69-
70-
DialogContent.displayName = DialogPrimitive.Content.displayName;
93+
</div>
94+
)
95+
);
96+
DialogContent.displayName = 'DialogContent';
7197

7298
const DialogHeader = ({
7399
className,
@@ -97,32 +123,31 @@ const DialogFooter = ({
97123
);
98124
DialogFooter.displayName = 'DialogFooter';
99125

100-
const DialogTitle = React.forwardRef<
101-
React.ElementRef<typeof DialogPrimitive.Title>,
102-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
103-
>(({ className, ...props }, ref) => (
104-
<DialogPrimitive.Title
105-
ref={ref}
106-
className={cn(
107-
'text-lg font-semibold leading-none tracking-tight',
108-
className
109-
)}
110-
{...props}
111-
/>
112-
));
113-
DialogTitle.displayName = DialogPrimitive.Title.displayName;
114-
115-
const DialogDescription = React.forwardRef<
116-
React.ElementRef<typeof DialogPrimitive.Description>,
117-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
118-
>(({ className, ...props }, ref) => (
119-
<DialogPrimitive.Description
120-
ref={ref}
121-
className={cn('text-sm text-muted-foreground', className)}
122-
{...props}
123-
/>
124-
));
125-
DialogDescription.displayName = DialogPrimitive.Description.displayName;
126+
const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
127+
({ className, children, ...props }, ref) => (
128+
<h2
129+
ref={ref}
130+
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
131+
{...props}
132+
>
133+
{children}
134+
</h2>
135+
)
136+
);
137+
DialogTitle.displayName = 'DialogTitle';
138+
139+
const DialogDescription = React.forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
140+
({ className, children, ...props }, ref) => (
141+
<p
142+
ref={ref}
143+
className={cn('text-sm text-muted-foreground', className)}
144+
{...props}
145+
>
146+
{children}
147+
</p>
148+
)
149+
);
150+
DialogDescription.displayName = 'DialogDescription';
126151

127152
export {
128153
Dialog,

‎src/components/ui/dropdown-menu.tsx‎

Lines changed: 65 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,79 @@
11
'use client';
22

3-
// Import the polyfill early
4-
import '../../lib/utils/radix-utils';
5-
63
import * as React from 'react';
7-
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
84
import { cn } from '@/lib/utils';
95

10-
const DropdownMenu = DropdownMenuPrimitive.Root;
6+
// DISABLED FOR TESTING
7+
// import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
8+
9+
// Mock interfaces and components
10+
interface DropdownMenuProps {
11+
children?: React.ReactNode;
12+
}
13+
14+
interface DropdownMenuTriggerProps {
15+
children?: React.ReactNode;
16+
asChild?: boolean;
17+
}
18+
19+
interface DropdownMenuContentProps {
20+
children?: React.ReactNode;
21+
className?: string;
22+
sideOffset?: number;
23+
[key: string]: any;
24+
}
25+
26+
interface DropdownMenuItemProps {
27+
children?: React.ReactNode;
28+
className?: string;
29+
[key: string]: any;
30+
}
31+
32+
interface DropdownMenuSeparatorProps {
33+
className?: string;
34+
[key: string]: any;
35+
}
1136

12-
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
37+
// Mock components
38+
const DropdownMenu: React.FC<DropdownMenuProps> = ({ children }) => <>{children}</>;
39+
const DropdownMenuTrigger: React.FC<DropdownMenuTriggerProps> = ({ children }) => <>{children}</>;
1340

14-
const DropdownMenuContent = React.forwardRef<
15-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
16-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
17-
>(({ className, sideOffset = 4, ...props }, ref) => (
18-
<DropdownMenuPrimitive.Portal>
19-
<DropdownMenuPrimitive.Content
41+
const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(
42+
({ children, className, ...props }, ref) => (
43+
<div
2044
ref={ref}
21-
sideOffset={sideOffset}
22-
className={cn(
23-
'z-50 min-w-[8rem] rounded-md border bg-white p-2 shadow-md',
24-
className
25-
)}
45+
className={cn('hidden', className)}
2646
{...props}
27-
/>
28-
</DropdownMenuPrimitive.Portal>
29-
));
30-
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
47+
>
48+
{children}
49+
</div>
50+
)
51+
);
52+
DropdownMenuContent.displayName = 'DropdownMenuContent';
3153

32-
const DropdownMenuItem = React.forwardRef<
33-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
34-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
35-
>(({ className, ...props }, ref) => (
36-
<DropdownMenuPrimitive.Item
37-
ref={ref}
38-
className={cn(
39-
'flex cursor-pointer items-center rounded-sm px-2 py-1 text-sm text-gray-700 hover:bg-gray-100',
40-
className
41-
)}
42-
{...props}
43-
/>
44-
));
45-
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
54+
const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(
55+
({ children, className, ...props }, ref) => (
56+
<div
57+
ref={ref}
58+
className={cn('hidden', className)}
59+
{...props}
60+
>
61+
{children}
62+
</div>
63+
)
64+
);
65+
DropdownMenuItem.displayName = 'DropdownMenuItem';
4666

47-
const DropdownMenuSeparator = React.forwardRef<
48-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
49-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
50-
>(({ className, ...props }, ref) => (
51-
<DropdownMenuPrimitive.Separator
52-
ref={ref}
53-
className={cn('my-1 h-px bg-gray-200', className)}
54-
{...props}
55-
/>
56-
));
57-
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
67+
const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
68+
({ className, ...props }, ref) => (
69+
<div
70+
ref={ref}
71+
className={cn('hidden', className)}
72+
{...props}
73+
/>
74+
)
75+
);
76+
DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
5877

5978
export {
6079
DropdownMenu,

‎src/components/ui/label.tsx‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,36 @@
11
'use client';
22

3-
// Import the polyfill early
4-
import '../../lib/utils/radix-utils';
5-
63
import * as React from 'react';
7-
import * as LabelPrimitive from '@radix-ui/react-label';
84
import { cva, type VariantProps } from 'class-variance-authority';
9-
105
import { cn } from '@/lib/utils';
116

7+
// DISABLED FOR TESTING
8+
// import * as LabelPrimitive from '@radix-ui/react-label';
9+
1210
const labelVariants = cva(
1311
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
1412
);
1513

16-
const Label = React.forwardRef<
17-
React.ElementRef<typeof LabelPrimitive.Root>,
18-
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
19-
VariantProps<typeof labelVariants>
20-
>(({ className, ...props }, ref) => (
21-
<LabelPrimitive.Root
22-
ref={ref}
23-
className={cn(labelVariants(), className)}
24-
{...props}
25-
/>
26-
));
27-
Label.displayName = LabelPrimitive.Root.displayName;
14+
// Mock interfaces
15+
type LabelProps = {
16+
className?: string;
17+
htmlFor?: string;
18+
children?: React.ReactNode;
19+
[key: string]: any;
20+
} & VariantProps<typeof labelVariants>;
21+
22+
// Mock components
23+
const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
24+
({ className, children, ...props }, ref) => (
25+
<label
26+
ref={ref}
27+
className={cn(labelVariants(), className)}
28+
{...props}
29+
>
30+
{children}
31+
</label>
32+
)
33+
);
34+
Label.displayName = 'Label';
2835

2936
export { Label };

0 commit comments

Comments
 (0)