@elizaos/client 1.5.5-alpha.10

package/src/components/ui/dialog.cy.tsx

@@ -0,0 +1,279 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from './dialog';
+import { Button } from './button';
+
+describe('Dialog Component', () => {
+  it('renders dialog with trigger', () => {
+    cy.mount(
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogDescription>This is a dialog description.</DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('button', 'Open Dialog').should('be.visible');
+    cy.contains('Dialog Title').should('not.exist');
+
+    // Open dialog
+    cy.contains('button', 'Open Dialog').click();
+    cy.contains('Dialog Title').should('be.visible');
+    cy.contains('This is a dialog description.').should('be.visible');
+  });
+
+  it('closes dialog when clicking outside', () => {
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Click Outside Test</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Open').click();
+    cy.contains('Click Outside Test').should('be.visible');
+
+    // Test escape key instead of clicking outside
+    cy.get('body').type('{esc}');
+    cy.contains('Click Outside Test').should('not.exist');
+  });
+
+  it('renders with footer actions', () => {
+    const onSave = cy.stub();
+    const onCancel = cy.stub();
+
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>Open Form</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Profile</DialogTitle>
+            <DialogDescription>Make changes to your profile here.</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <input placeholder="Name" className="w-full p-2 border rounded" />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button onClick={onSave}>Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Open Form').click();
+    cy.get('input[placeholder="Name"]').should('be.visible');
+
+    cy.contains('button', 'Save changes').click({ force: true });
+    cy.wrap(onSave).should('have.been.called');
+  });
+
+  it('works as controlled component', () => {
+    const TestComponent = () => {
+      const [open, setOpen] = React.useState(false);
+
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>External Open</button>
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent>
+              <DialogTitle>Controlled Dialog</DialogTitle>
+              <DialogClose asChild>
+                <button>Close</button>
+              </DialogClose>
+            </DialogContent>
+          </Dialog>
+        </>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    cy.contains('Controlled Dialog').should('not.exist');
+    cy.contains('External Open').click();
+    cy.contains('Controlled Dialog').should('be.visible');
+
+    cy.contains('button', 'Close').click({ force: true });
+    cy.contains('Controlled Dialog').should('not.exist');
+  });
+
+  it('handles keyboard navigation', () => {
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Keyboard Test</DialogTitle>
+          <button>First Button</button>
+          <button>Second Button</button>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Open').click();
+    cy.contains('Keyboard Test').should('be.visible');
+
+    // ESC key should close
+    cy.get('body').type('{esc}');
+    cy.contains('Keyboard Test').should('not.exist');
+  });
+
+  it('supports custom className', () => {
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent className="bg-blue-50 max-w-lg">
+          <DialogTitle>Custom Styled Dialog</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Open').click();
+    cy.get('[role="dialog"]').should('have.class', 'bg-blue-50');
+    cy.get('[role="dialog"]').should('have.class', 'max-w-lg');
+  });
+
+  it('renders form inside dialog', () => {
+    const onSubmit = cy.stub();
+
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>Add Item</DialogTrigger>
+        <DialogContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSubmit('submitted');
+            }}
+          >
+            <DialogHeader>
+              <DialogTitle>Add New Item</DialogTitle>
+              <DialogDescription>Fill in the details below</DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <input name="title" placeholder="Title" required />
+              <textarea name="description" placeholder="Description" />
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </DialogClose>
+              <Button type="submit">Add</Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Add Item').click();
+    cy.get('input[name="title"]').type('Test Item');
+    cy.get('textarea[name="description"]').type('Test Description');
+    cy.get('[role="dialog"]').within(() => {
+      cy.contains('button', 'Add').click({ force: true });
+    });
+    cy.wrap(onSubmit).should('have.been.calledWith', 'submitted');
+  });
+
+  it('prevents closing when modal', () => {
+    cy.mount(
+      <Dialog modal={true}>
+        <DialogTrigger>Open Modal</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Modal Dialog</DialogTitle>
+          <DialogDescription>
+            This dialog is modal and requires explicit action to close.
+          </DialogDescription>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Open Modal').click();
+    cy.contains('Modal Dialog').should('be.visible');
+  });
+
+  it('supports nested content', () => {
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>View Details</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>User Details</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-2">
+            <div>
+              <strong>Name:</strong> John Doe
+            </div>
+            <div>
+              <strong>Email:</strong> john@example.com
+            </div>
+            <div>
+              <strong>Role:</strong> Administrator
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('View Details').click();
+    cy.contains('John Doe').should('be.visible');
+    cy.contains('john@example.com').should('be.visible');
+    cy.contains('Administrator').should('be.visible');
+  });
+
+  it('handles long content with scroll', () => {
+    cy.mount(
+      <Dialog>
+        <DialogTrigger>Open Long Content</DialogTrigger>
+        <DialogContent className="max-h-[300px]">
+          <DialogHeader>
+            <DialogTitle>Terms and Conditions</DialogTitle>
+          </DialogHeader>
+          <div className="overflow-y-auto max-h-[200px]">
+            {Array.from({ length: 50 }, (_, i) => (
+              <p key={i} className="py-2">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </p>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+
+    cy.contains('Open Long Content').click();
+
+    // Wait for dialog to open and verify scroll container exists
+    cy.get('[role="dialog"]').should('be.visible');
+    cy.get('.overflow-y-auto').should('exist');
+
+    // Verify the container has the correct CSS classes for scrolling
+    cy.get('.overflow-y-auto').should('have.class', 'overflow-y-auto');
+    cy.get('.overflow-y-auto').should('have.class', 'max-h-[200px]');
+
+    // Check that content exists inside the scroll container
+    cy.get('.overflow-y-auto p').should('have.length', 50);
+  });
+});

package/src/components/ui/dialog.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      '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',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 bg-card grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/ui/dropdown-menu.cy.tsx

@@ -0,0 +1,273 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuShortcut,
+} from './dropdown-menu';
+import { Button } from './button';
+
+describe('DropdownMenu Component', () => {
+  it('renders basic dropdown menu', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Open Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+          <DropdownMenuItem>Item 2</DropdownMenuItem>
+          <DropdownMenuItem>Item 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').contains('Open Menu').should('exist');
+    cy.get('button').click();
+    cy.contains('Item 1').should('be.visible');
+    cy.contains('Item 2').should('be.visible');
+    cy.contains('Item 3').should('be.visible');
+  });
+
+  it('handles menu item clicks', () => {
+    const onClick = cy.stub();
+
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Actions</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem onClick={onClick}>Action 1</DropdownMenuItem>
+          <DropdownMenuItem>Action 2</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('Action 1').click();
+    cy.wrap(onClick).should('have.been.called');
+  });
+
+  it('renders with labels and separators', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Options</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Account</DropdownMenuLabel>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Log out</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('Account').should('be.visible');
+    cy.contains('Profile').should('be.visible');
+    cy.get('[role="separator"]').should('exist');
+  });
+
+  it('supports disabled items', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Enabled</DropdownMenuItem>
+          <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
+          <DropdownMenuItem>Also Enabled</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('Disabled').should('have.attr', 'data-disabled');
+  });
+
+  it('renders checkbox items', () => {
+    const CheckboxTestComponent = () => {
+      const [checked, setChecked] = React.useState(false);
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>Settings</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Show Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem>Show Activity Bar</DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    };
+
+    cy.mountRadix(<CheckboxTestComponent />);
+
+    cy.get('button').click();
+    cy.contains('Show Status Bar').click();
+    cy.contains('Show Status Bar').should('have.attr', 'data-state', 'checked');
+  });
+
+  it('renders radio group items', () => {
+    const RadioTestComponent = () => {
+      const [value, setValue] = React.useState('option1');
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>View</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
+              <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="option3">Option 3</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    };
+
+    cy.mountRadix(<RadioTestComponent />);
+
+    cy.get('button').click();
+    cy.contains('Option 1').should('have.attr', 'data-state', 'checked');
+    cy.contains('Option 2').click();
+    cy.contains('Option 2').should('have.attr', 'data-state', 'checked');
+  });
+
+  it('supports sub menus', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>New File</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>More Tools</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Save Page As...</DropdownMenuItem>
+              <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
+              <DropdownMenuItem>Name Window...</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('More Tools').should('be.visible');
+
+    // Try clicking instead of hover for submenu
+    cy.contains('More Tools').click();
+    cy.contains('Save Page As...').should('be.visible');
+  });
+
+  it('renders with shortcuts', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Edit</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            Undo
+            <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Redo
+            <DropdownMenuShortcut>⇧⌘Z</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('⌘Z').should('be.visible');
+    cy.contains('⇧⌘Z').should('be.visible');
+  });
+
+  it('supports custom className', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Styled</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuItem className="text-red-500">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.get('[role="menu"]').should('have.class', 'w-56');
+    cy.contains('Delete').should('have.class', 'text-red-500');
+  });
+
+  it('closes on escape key', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+          <DropdownMenuItem>Item 2</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('Item 1').should('be.visible');
+    cy.get('body').type('{esc}');
+    cy.contains('Item 1').should('not.exist');
+  });
+
+  it('supports grouped items', () => {
+    cy.mountRadix(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button>Grouped</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Group 1</DropdownMenuLabel>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+            <DropdownMenuItem>Item 2</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Group 2</DropdownMenuLabel>
+            <DropdownMenuItem>Item 3</DropdownMenuItem>
+            <DropdownMenuItem>Item 4</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    cy.get('button').click();
+    cy.contains('Group 1').should('be.visible');
+    cy.contains('Group 2').should('be.visible');
+  });
+});