@elizaos/client 1.5.5-alpha.10

package/src/components/ui/scroll-area.cy.tsx

@@ -0,0 +1,242 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { ScrollArea, ScrollBar } from './scroll-area';
+
+describe('ScrollArea Component', () => {
+  it('renders basic scroll area', () => {
+    cy.mountRadix(
+      <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div key={i} className="text-sm">
+            Item {i + 1}
+          </div>
+        ))}
+      </ScrollArea>
+    );
+
+    cy.get('[data-radix-scroll-area-viewport]').should('exist');
+    cy.contains('Item 1').should('be.visible');
+  });
+
+  it('handles vertical scrolling', () => {
+    cy.mountRadix(
+      <ScrollArea className="h-[200px] w-[350px] rounded-md border">
+        <div className="p-4">
+          {Array.from({ length: 50 }).map((_, i) => (
+            <div key={i} className="py-2">
+              Long content item {i + 1}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+
+    cy.contains('Long content item 1').should('be.visible');
+    cy.contains('Long content item 50').should('not.be.visible');
+
+    // Scroll to bottom
+    cy.get('[data-radix-scroll-area-viewport]').scrollTo('bottom');
+    cy.contains('Long content item 50').should('be.visible');
+  });
+
+  it('handles horizontal scrolling', () => {
+    cy.mountRadix(
+      <ScrollArea className="w-[300px] rounded-md border">
+        <div className="flex w-max space-x-4 p-4">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div
+              key={i}
+              className="flex h-20 w-[150px] shrink-0 items-center justify-center rounded-md border"
+            >
+              Card {i + 1}
+            </div>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    );
+
+    cy.contains('Card 1').should('be.visible');
+
+    // Scroll horizontally
+    cy.get('[data-radix-scroll-area-viewport]').scrollTo('right');
+  });
+
+  it('renders with custom ScrollBar', () => {
+    cy.mountRadix(
+      <ScrollArea className="h-72 w-48 rounded-md border">
+        <div className="p-4">
+          <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+          {Array.from({ length: 50 }).map((_, i) => (
+            <div key={i} className="text-sm">
+              Tag {i + 1}
+            </div>
+          ))}
+        </div>
+        <ScrollBar className="bg-red-500" />
+      </ScrollArea>
+    );
+
+    cy.get('[data-radix-scroll-area-viewport]').should('exist');
+    cy.contains('Tags').should('be.visible');
+  });
+
+  it('applies custom className', () => {
+    cy.mountRadix(
+      <ScrollArea className="custom-scroll-area h-[200px] w-[200px]">
+        <div className="p-4">Content</div>
+      </ScrollArea>
+    );
+
+    cy.get('[data-radix-scroll-area-viewport]').should('exist');
+  });
+
+  it('handles dynamic content updates', () => {
+    const TestComponent = () => {
+      const [items, setItems] = React.useState(5);
+
+      return (
+        <div>
+          <button onClick={() => setItems(items + 5)}>Add More</button>
+          <ScrollArea className="h-[200px] w-[300px] rounded-md border">
+            <div className="p-4">
+              {Array.from({ length: items }).map((_, i) => (
+                <div key={i} className="py-1">
+                  Item {i + 1}
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      );
+    };
+
+    cy.mountRadix(<TestComponent />);
+
+    cy.contains('Item 5').should('be.visible');
+    cy.contains('Item 10').should('not.exist');
+
+    // Add more items
+    cy.contains('button', 'Add More').click();
+    cy.contains('Item 10').should('exist');
+  });
+
+  it('works with nested scroll areas', () => {
+    cy.mountRadix(
+      <ScrollArea className="h-[400px] w-[600px] rounded-md border">
+        <div className="p-4">
+          <h2 className="mb-4 text-xl font-bold">Outer Scroll Area</h2>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="mb-4">
+              <h3 className="mb-2 font-medium">Section {i + 1}</h3>
+              <ScrollArea className="h-[100px] rounded-md border bg-muted">
+                <div className="p-2">
+                  {Array.from({ length: 10 }).map((_, j) => (
+                    <div key={j} className="text-sm">
+                      Nested item {j + 1}
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+
+    cy.contains('Outer Scroll Area').should('be.visible');
+    cy.get('[data-radix-scroll-area-viewport]').should('have.length.at.least', 5);
+  });
+
+  it('preserves scroll position', () => {
+    const TestComponent = () => {
+      const [show, setShow] = React.useState(true);
+
+      return (
+        <div>
+          <button onClick={() => setShow(!show)}>Toggle</button>
+          {show && (
+            <ScrollArea className="h-[200px] w-[300px] rounded-md border">
+              <div className="p-4">
+                {Array.from({ length: 50 }).map((_, i) => (
+                  <div key={i} className="py-1" data-index={i}>
+                    Item {i + 1}
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+        </div>
+      );
+    };
+
+    cy.mountRadix(<TestComponent />);
+
+    // Scroll to middle
+    cy.get('[data-radix-scroll-area-viewport]').scrollTo(0, 500);
+
+    // Check that scroll position is maintained
+    cy.get('[data-radix-scroll-area-viewport]').should('exist');
+  });
+
+  it('handles content with images', () => {
+    cy.mountRadix(
+      <ScrollArea className="h-[300px] w-[400px] rounded-md border">
+        <div className="p-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="mb-4 flex items-center space-x-4">
+              <img
+                src={`https://via.placeholder.com/100x100?text=${i + 1}`}
+                alt={`Image ${i + 1}`}
+                className="h-24 w-24 rounded-md object-cover"
+              />
+              <div>
+                <h4 className="font-medium">Image {i + 1}</h4>
+                <p className="text-sm text-muted-foreground">Description for image {i + 1}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+
+    cy.contains('Image 1').should('be.visible');
+    cy.get('img').should('have.length', 10);
+  });
+
+  it('works with tables', () => {
+    cy.mountRadix(
+      <ScrollArea className="h-[300px] w-full rounded-md border">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b">
+              <th className="p-2 text-left">ID</th>
+              <th className="p-2 text-left">Name</th>
+              <th className="p-2 text-left">Status</th>
+              <th className="p-2 text-left">Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <tr key={i} className="border-b">
+                <td className="p-2">{i + 1}</td>
+                <td className="p-2">Item {i + 1}</td>
+                <td className="p-2">Active</td>
+                <td className="p-2">2024-01-{String(i + 1).padStart(2, '0')}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollArea>
+    );
+
+    cy.get('table').should('be.visible');
+    cy.contains('Item 1').should('be.visible');
+
+    // Scroll to see more items
+    cy.get('[data-radix-scroll-area-viewport]').scrollTo('bottom');
+    cy.contains('Item 50').should('be.visible');
+  });
+});

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,277 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectSeparator,
+} from './select';
+
+describe('Select Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+          <SelectItem value="option3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').should('exist');
+    cy.get('[role="combobox"]').should('contain', 'Select an option');
+  });
+
+  it('opens and closes dropdown', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Choose..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    // Initially closed
+    cy.contains('Apple').should('not.exist');
+
+    // Click to open
+    cy.get('[role="combobox"]').click();
+    cy.contains('Apple').should('be.visible');
+    cy.contains('Banana').should('be.visible');
+    cy.contains('Orange').should('be.visible');
+  });
+
+  it('selects an option', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').click();
+    cy.contains('Banana').click();
+    cy.get('[role="combobox"]').should('contain', 'Banana');
+  });
+
+  it('works as controlled component', () => {
+    const TestComponent = () => {
+      const [value, setValue] = React.useState('');
+
+      return (
+        <div>
+          <Select value={value} onValueChange={setValue}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select..." />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1">One</SelectItem>
+              <SelectItem value="2">Two</SelectItem>
+              <SelectItem value="3">Three</SelectItem>
+            </SelectContent>
+          </Select>
+          <p>Selected: {value || 'none'}</p>
+        </div>
+      );
+    };
+
+    cy.mount(<TestComponent />);
+
+    cy.contains('Selected: none').should('exist');
+    cy.get('[role="combobox"]').click();
+    cy.contains('Two').click();
+    cy.contains('Selected: 2').should('exist');
+  });
+
+  it('can be disabled', () => {
+    cy.mount(
+      <Select disabled>
+        <SelectTrigger>
+          <SelectValue placeholder="Disabled select" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Option 1</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').should('have.attr', 'data-disabled');
+    cy.get('[role="combobox"]').click({ force: true });
+    cy.contains('Option 1').should('not.exist');
+  });
+
+  it('supports grouped options', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Vegetables</SelectLabel>
+            <SelectItem value="carrot">Carrot</SelectItem>
+            <SelectItem value="lettuce">Lettuce</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').click();
+    cy.contains('Fruits').should('be.visible');
+    cy.contains('Vegetables').should('be.visible');
+    cy.contains('Apple').should('be.visible');
+    cy.contains('Carrot').should('be.visible');
+  });
+
+  it('supports custom className', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger className="w-[200px] custom-select">
+          <SelectValue placeholder="Custom styled" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Option 1</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').should('have.class', 'w-[200px]');
+    cy.get('[role="combobox"]').should('have.class', 'custom-select');
+  });
+
+  it('handles keyboard navigation', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Navigate with keyboard" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">First</SelectItem>
+          <SelectItem value="2">Second</SelectItem>
+          <SelectItem value="3">Third</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    // Open with Enter key
+    cy.get('[role="combobox"]').focus();
+    cy.get('[role="combobox"]').type('{enter}');
+    cy.contains('First').should('be.visible');
+
+    // Navigate with arrow keys
+    cy.get('body').type('{downarrow}');
+    cy.get('body').type('{downarrow}');
+    cy.get('body').type('{enter}');
+
+    cy.get('[role="combobox"]').should('contain', 'Third');
+  });
+
+  it('supports disabled items', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Some options disabled" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Available</SelectItem>
+          <SelectItem value="2" disabled>
+            Not Available
+          </SelectItem>
+          <SelectItem value="3">Also Available</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').click();
+    cy.get('[data-disabled]').should('contain', 'Not Available');
+  });
+
+  it('displays long option text properly', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger className="w-[300px]">
+          <SelectValue placeholder="Long options" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">
+            This is a very long option text that should be handled properly
+          </SelectItem>
+          <SelectItem value="2">Short</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').click();
+    cy.contains('This is a very long option text').should('be.visible');
+  });
+
+  it('works in forms', () => {
+    cy.mount(
+      <form>
+        <label htmlFor="country">Country</label>
+        <Select name="country">
+          <SelectTrigger id="country">
+            <SelectValue placeholder="Select country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="us">United States</SelectItem>
+            <SelectItem value="uk">United Kingdom</SelectItem>
+            <SelectItem value="ca">Canada</SelectItem>
+          </SelectContent>
+        </Select>
+      </form>
+    );
+
+    cy.get('[role="combobox"]').click();
+    cy.get('[role="listbox"]').within(() => {
+      cy.contains('United Kingdom').click({ force: true });
+    });
+    cy.get('[role="combobox"]').should('contain', 'United Kingdom');
+  });
+
+  it('maintains focus after selection', () => {
+    cy.mount(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Test focus" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Option 1</SelectItem>
+          <SelectItem value="2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    cy.get('[role="combobox"]').focus();
+    cy.get('[role="combobox"]').click();
+    cy.contains('Option 1').click();
+    cy.get('[role="combobox"]').should('have.focus');
+  });
+});