@elizaos/client 1.5.5-alpha.10

package/src/components/ui/select.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-12 w-full items-center justify-between whitespace-nowrap rounded border border-input bg-card px-4 py-3 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-input bg-card text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-2',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider',
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded py-3 pl-4 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

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

@@ -0,0 +1,145 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Separator } from './separator';
+
+describe('Separator Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<Separator />);
+
+    cy.get('[data-testid="separator"]').should('exist');
+    cy.get('[data-testid="separator"]').should('have.attr', 'role', 'none'); // decorative is true by default
+    cy.get('[data-testid="separator"]').should('have.class', 'shrink-0');
+  });
+
+  describe('Orientation', () => {
+    it('renders horizontal separator correctly', () => {
+      cy.mount(<Separator orientation="horizontal" />);
+
+      cy.get('[data-testid="separator"]')
+        .should('have.attr', 'data-orientation', 'horizontal')
+        .should('have.class', 'h-[1px]')
+        .should('have.class', 'w-full');
+    });
+
+    it('renders vertical separator correctly', () => {
+      cy.mount(
+        <div className="flex h-20">
+          <div>Left</div>
+          <Separator orientation="vertical" />
+          <div>Right</div>
+        </div>
+      );
+
+      cy.get('[data-testid="separator"]')
+        .should('have.attr', 'data-orientation', 'vertical')
+        .should('have.class', 'h-full')
+        .should('have.class', 'w-[1px]');
+    });
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Separator className="my-custom-separator bg-red-500" />);
+
+    cy.get('[data-testid="separator"]')
+      .should('have.class', 'my-custom-separator')
+      .should('have.class', 'bg-red-500');
+  });
+
+  it('decorative prop sets correct aria attributes', () => {
+    cy.mount(<Separator decorative />);
+
+    cy.get('[data-testid="separator"]').should('have.attr', 'role', 'none');
+  });
+
+  it('renders in a card layout', () => {
+    cy.mount(
+      <div className="max-w-sm rounded-lg border p-4">
+        <h3 className="font-semibold">Card Title</h3>
+        <Separator className="my-2" />
+        <p className="text-sm text-gray-600">Card content goes here.</p>
+      </div>
+    );
+
+    cy.get('[data-testid="separator"]').should('be.visible');
+    cy.get('.my-2').should('exist');
+  });
+
+  it('renders multiple separators in a list', () => {
+    cy.mount(
+      <ul className="space-y-2">
+        <li>Item 1</li>
+        <Separator />
+        <li>Item 2</li>
+        <Separator />
+        <li>Item 3</li>
+      </ul>
+    );
+
+    cy.get('[data-testid="separator"]').should('have.length', 2);
+  });
+
+  it('works with different spacing', () => {
+    cy.mount(
+      <div>
+        <div>Content 1</div>
+        <Separator className="my-1" />
+        <div>Content 2</div>
+        <Separator className="my-4" />
+        <div>Content 3</div>
+        <Separator className="my-8" />
+        <div>Content 4</div>
+      </div>
+    );
+
+    cy.get('[data-testid="separator"]').should('have.length', 3);
+    cy.get('.my-1').should('exist');
+    cy.get('.my-4').should('exist');
+    cy.get('.my-8').should('exist');
+  });
+
+  it('renders in a form layout', () => {
+    cy.mount(
+      <form className="space-y-4">
+        <div>
+          <label>Name</label>
+          <input type="text" className="w-full border rounded px-2 py-1" />
+        </div>
+        <Separator />
+        <div>
+          <label>Email</label>
+          <input type="email" className="w-full border rounded px-2 py-1" />
+        </div>
+      </form>
+    );
+
+    cy.get('[data-testid="separator"]').should('exist');
+    cy.get('form').find('[data-testid="separator"]').should('have.length', 1);
+  });
+
+  it('supports custom styles', () => {
+    cy.mount(
+      <Separator
+        className="bg-gradient-to-r from-transparent via-gray-500 to-transparent"
+        style={{ height: '2px' }}
+      />
+    );
+
+    cy.get('[data-testid="separator"]')
+      .should('have.class', 'bg-gradient-to-r')
+      .should('have.css', 'height', '2px');
+  });
+
+  it('works in dark mode', () => {
+    cy.mount(
+      <div className="dark bg-gray-900 p-4">
+        <div className="text-white">Dark mode content</div>
+        <Separator className="my-4 bg-gray-700" />
+        <div className="text-white">More content</div>
+      </div>
+    );
+
+    cy.get('[data-testid="separator"]').should('have.class', 'bg-gray-700');
+  });
+});

package/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+  'data-testid'?: string;
+}
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  SeparatorProps
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className
+    )}
+    data-testid={props['data-testid'] || 'separator'}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

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

@@ -0,0 +1,324 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from './sheet';
+import { Button } from './button';
+
+describe('Sheet Component', () => {
+  it('renders basic sheet from right', () => {
+    cy.mount(
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button>Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Sheet Title</SheetTitle>
+            <SheetDescription>This is a sheet description.</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('button', 'Open Sheet').should('be.visible');
+    cy.contains('Sheet Title').should('not.exist');
+
+    // Open sheet
+    cy.contains('button', 'Open Sheet').click();
+    cy.contains('Sheet Title').should('be.visible');
+    cy.contains('This is a sheet description.').should('be.visible');
+  });
+
+  it('renders sheet from different sides', () => {
+    cy.mount(
+      <div className="flex gap-4">
+        <Sheet>
+          <SheetTrigger>From Top</SheetTrigger>
+          <SheetContent side="top">
+            <SheetTitle>Top Sheet</SheetTitle>
+          </SheetContent>
+        </Sheet>
+
+        <Sheet>
+          <SheetTrigger>From Bottom</SheetTrigger>
+          <SheetContent side="bottom">
+            <SheetTitle>Bottom Sheet</SheetTitle>
+          </SheetContent>
+        </Sheet>
+
+        <Sheet>
+          <SheetTrigger>From Left</SheetTrigger>
+          <SheetContent side="left">
+            <SheetTitle>Left Sheet</SheetTitle>
+          </SheetContent>
+        </Sheet>
+      </div>
+    );
+
+    // Test top sheet
+    cy.contains('From Top').click();
+    cy.contains('Top Sheet').should('be.visible');
+    cy.get('body').type('{esc}');
+
+    // Test bottom sheet
+    cy.contains('From Bottom').click();
+    cy.contains('Bottom Sheet').should('be.visible');
+  });
+
+  it('closes sheet when clicking overlay', () => {
+    cy.mount(
+      <Sheet>
+        <SheetTrigger>Open</SheetTrigger>
+        <SheetContent>
+          <SheetTitle>Click Outside Test</SheetTitle>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('Open').click();
+    cy.contains('Click Outside Test').should('be.visible');
+
+    // Use escape key instead of clicking overlay
+    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(
+      <Sheet>
+        <SheetTrigger>Edit Profile</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit Profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here.</SheetDescription>
+          </SheetHeader>
+          <div className="py-4">
+            <input placeholder="Name" className="w-full p-2 border rounded" />
+          </div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button variant="outline" onClick={onCancel}>
+                Cancel
+              </Button>
+            </SheetClose>
+            <Button onClick={onSave}>Save changes</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('Edit Profile').click();
+    cy.get('input[placeholder="Name"]').should('be.visible');
+
+    cy.contains('button', 'Save changes').click();
+    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>
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetContent>
+              <SheetTitle>Controlled Sheet</SheetTitle>
+              <button onClick={() => setOpen(false)}>Close Sheet</button>
+            </SheetContent>
+          </Sheet>
+        </>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    cy.contains('Controlled Sheet').should('not.exist');
+    cy.contains('External Open').click();
+    cy.contains('Controlled Sheet').should('be.visible');
+
+    cy.contains('button', 'Close Sheet').click();
+    cy.contains('Controlled Sheet').should('not.exist');
+  });
+
+  it('handles keyboard navigation', () => {
+    cy.mount(
+      <Sheet>
+        <SheetTrigger>Open</SheetTrigger>
+        <SheetContent>
+          <SheetTitle>Keyboard Test</SheetTitle>
+          <button>First Button</button>
+          <button>Second Button</button>
+        </SheetContent>
+      </Sheet>
+    );
+
+    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(
+      <Sheet>
+        <SheetTrigger className="custom-trigger">Open</SheetTrigger>
+        <SheetContent className="bg-blue-50 custom-content">
+          <SheetTitle>Custom Styled Sheet</SheetTitle>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.get('.custom-trigger').should('exist');
+    cy.contains('Open').click();
+    cy.get('.custom-content').should('have.class', 'bg-blue-50');
+  });
+
+  it('renders form inside sheet', () => {
+    const onSubmit = cy.stub();
+
+    cy.mount(
+      <Sheet>
+        <SheetTrigger>Add Item</SheetTrigger>
+        <SheetContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSubmit('submitted');
+            }}
+          >
+            <SheetHeader>
+              <SheetTitle>Add New Item</SheetTitle>
+              <SheetDescription>Fill in the details below</SheetDescription>
+            </SheetHeader>
+            <div className="space-y-4 py-4">
+              <input name="title" placeholder="Title" required />
+              <textarea name="description" placeholder="Description" />
+            </div>
+            <SheetFooter>
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button type="submit">Add</Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('Add Item').click();
+    cy.get('input[name="title"]').type('Test Item');
+    cy.get('textarea[name="description"]').type('Test Description');
+    cy.get('form').submit();
+    cy.wrap(onSubmit).should('have.been.calledWith', 'submitted');
+  });
+
+  it('handles long content with scroll', () => {
+    cy.mount(
+      <Sheet>
+        <SheetTrigger>View Content</SheetTrigger>
+        <SheetContent className="overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>Long Content</SheetTitle>
+          </SheetHeader>
+          <div className="py-4">
+            {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.
+              </p>
+            ))}
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('View Content').click();
+    cy.get('.overflow-y-auto').should('be.visible');
+  });
+
+  it('renders navigation menu in sheet', () => {
+    cy.mount(
+      <Sheet>
+        <SheetTrigger>Menu</SheetTrigger>
+        <SheetContent side="left">
+          <SheetHeader>
+            <SheetTitle>Navigation</SheetTitle>
+          </SheetHeader>
+          <nav className="mt-8">
+            <ul className="space-y-2">
+              <li>
+                <a href="#" className="block p-2 hover:bg-gray-100">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block p-2 hover:bg-gray-100">
+                  About
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block p-2 hover:bg-gray-100">
+                  Services
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block p-2 hover:bg-gray-100">
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('Menu').click();
+    cy.contains('Navigation').should('be.visible');
+    cy.contains('Home').should('be.visible');
+    cy.contains('About').should('be.visible');
+    cy.contains('Services').should('be.visible');
+    cy.contains('Contact').should('be.visible');
+  });
+
+  it('maintains focus management', () => {
+    cy.mount(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Focus Test</SheetTitle>
+          </SheetHeader>
+          <div className="space-y-4 py-4">
+            <input placeholder="First input" />
+            <input placeholder="Second input" />
+            <button>Action Button</button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+
+    cy.contains('Open Sheet').click();
+
+    // Focus should be trapped within sheet
+    cy.get('input[placeholder="First input"]').focus();
+    cy.focused().should('have.attr', 'placeholder', 'First input');
+  });
+});