@elizaos/client 1.5.5-alpha.10

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

@@ -0,0 +1,271 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+
+describe('Tabs Component', () => {
+  it('renders basic tabs correctly', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content for tab 1</TabsContent>
+        <TabsContent value="tab2">Content for tab 2</TabsContent>
+        <TabsContent value="tab3">Content for tab 3</TabsContent>
+      </Tabs>
+    );
+
+    // Check tabs are rendered
+    cy.contains('Tab 1').should('be.visible');
+    cy.contains('Tab 2').should('be.visible');
+    cy.contains('Tab 3').should('be.visible');
+
+    // Check default content is visible
+    cy.contains('Content for tab 1').should('be.visible');
+    cy.contains('Content for tab 2').should('not.exist');
+    cy.contains('Content for tab 3').should('not.exist');
+  });
+
+  it('switches between tabs on click', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="home">
+        <TabsList>
+          <TabsTrigger value="home">Home</TabsTrigger>
+          <TabsTrigger value="profile">Profile</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="home">Home content</TabsContent>
+        <TabsContent value="profile">Profile content</TabsContent>
+        <TabsContent value="settings">Settings content</TabsContent>
+      </Tabs>
+    );
+
+    // Initially home tab is active
+    cy.contains('Home content').should('be.visible');
+
+    // Click profile tab
+    cy.contains('button', 'Profile').click();
+    cy.contains('Profile content').should('be.visible');
+    cy.contains('Home content').should('not.exist');
+
+    // Click settings tab
+    cy.contains('button', 'Settings').click();
+    cy.contains('Settings content').should('be.visible');
+    cy.contains('Profile content').should('not.exist');
+  });
+
+  it('works as controlled component', () => {
+    const TestComponent = () => {
+      const [activeTab, setActiveTab] = React.useState('tab1');
+
+      return (
+        <div>
+          <p>Active tab: {activeTab}</p>
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              <TabsTrigger value="tab1">First</TabsTrigger>
+              <TabsTrigger value="tab2">Second</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">First content</TabsContent>
+            <TabsContent value="tab2">Second content</TabsContent>
+          </Tabs>
+        </div>
+      );
+    };
+
+    cy.mountRadix(<TestComponent />);
+
+    cy.contains('Active tab: tab1').should('be.visible');
+    cy.contains('First content').should('be.visible');
+
+    cy.contains('button', 'Second').click();
+    cy.contains('Active tab: tab2').should('be.visible');
+    cy.contains('Second content').should('be.visible');
+  });
+
+  it('supports disabled tabs', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="enabled">
+        <TabsList>
+          <TabsTrigger value="enabled">Enabled</TabsTrigger>
+          <TabsTrigger value="disabled" disabled>
+            Disabled
+          </TabsTrigger>
+          <TabsTrigger value="another">Another</TabsTrigger>
+        </TabsList>
+        <TabsContent value="enabled">Enabled content</TabsContent>
+        <TabsContent value="disabled">Disabled content</TabsContent>
+        <TabsContent value="another">Another content</TabsContent>
+      </Tabs>
+    );
+
+    cy.contains('button', 'Disabled').should('be.disabled');
+    cy.contains('button', 'Disabled').click({ force: true });
+    cy.contains('Disabled content').should('not.exist');
+    cy.contains('Enabled content').should('be.visible');
+  });
+
+  it('applies custom className', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="tab1" className="custom-tabs">
+        <TabsList className="custom-list bg-gray-200">
+          <TabsTrigger value="tab1" className="custom-trigger">
+            Tab 1
+          </TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1" className="custom-content p-4">
+          Content 1
+        </TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    );
+
+    cy.get('.custom-tabs').should('exist');
+    cy.get('.custom-list').should('have.class', 'bg-gray-200');
+    cy.get('.custom-trigger').should('exist');
+    cy.get('.custom-content').should('have.class', 'p-4');
+  });
+
+  it('handles keyboard navigation', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">First</TabsTrigger>
+          <TabsTrigger value="tab2">Second</TabsTrigger>
+          <TabsTrigger value="tab3">Third</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">First content</TabsContent>
+        <TabsContent value="tab2">Second content</TabsContent>
+        <TabsContent value="tab3">Third content</TabsContent>
+      </Tabs>
+    );
+
+    // Focus first tab
+    cy.contains('button', 'First').focus();
+
+    // Arrow right should move to next tab
+    cy.focused().type('{rightarrow}');
+    cy.focused().should('contain', 'Second');
+
+    // Arrow right again
+    cy.focused().type('{rightarrow}');
+    cy.focused().should('contain', 'Third');
+
+    // Arrow left should move back
+    cy.focused().type('{leftarrow}');
+    cy.focused().should('contain', 'Second');
+  });
+
+  it('supports orientation prop', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="tab1" orientation="vertical">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+        <TabsContent value="tab3">Content 3</TabsContent>
+      </Tabs>
+    );
+
+    cy.get('[data-orientation="vertical"]').should('exist');
+  });
+
+  it('renders complex content in tabs', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="form">
+        <TabsList>
+          <TabsTrigger value="form">Form</TabsTrigger>
+          <TabsTrigger value="preview">Preview</TabsTrigger>
+        </TabsList>
+        <TabsContent value="form">
+          <form className="space-y-4">
+            <input placeholder="Name" className="border p-2" />
+            <textarea placeholder="Description" className="border p-2" />
+            <button type="submit">Submit</button>
+          </form>
+        </TabsContent>
+        <TabsContent value="preview">
+          <div className="p-4 border rounded">
+            <h3>Preview</h3>
+            <p>Form data will appear here</p>
+          </div>
+        </TabsContent>
+      </Tabs>
+    );
+
+    cy.get('input[placeholder="Name"]').should('be.visible');
+    cy.get('textarea[placeholder="Description"]').should('be.visible');
+
+    cy.contains('button', 'Preview').click();
+    cy.contains('h3', 'Preview').should('be.visible');
+    cy.contains('Form data will appear here').should('be.visible');
+  });
+
+  it('maintains tab state when content changes', () => {
+    const TestComponent = () => {
+      const [count, setCount] = React.useState(0);
+
+      return (
+        <div>
+          <button onClick={() => setCount(count + 1)}>Increment: {count}</button>
+          <Tabs defaultValue="tab1">
+            <TabsList>
+              <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+              <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">Tab 1 content with count: {count}</TabsContent>
+            <TabsContent value="tab2">Tab 2 content with count: {count}</TabsContent>
+          </Tabs>
+        </div>
+      );
+    };
+
+    cy.mountRadix(<TestComponent />);
+
+    // Select tab 2
+    cy.contains('button', 'Tab 2').click();
+    cy.contains('Tab 2 content with count: 0').should('be.visible');
+
+    // Increment counter
+    cy.contains('button', 'Increment: 0').click();
+
+    // Tab 2 should still be selected
+    cy.contains('Tab 2 content with count: 1').should('be.visible');
+  });
+
+  it('supports icons in tab triggers', () => {
+    cy.mountRadix(
+      <Tabs defaultValue="users">
+        <TabsList>
+          <TabsTrigger value="users">
+            <span className="flex items-center gap-2">
+              <span>👤</span>
+              <span>Users</span>
+            </span>
+          </TabsTrigger>
+          <TabsTrigger value="settings">
+            <span className="flex items-center gap-2">
+              <span>⚙️</span>
+              <span>Settings</span>
+            </span>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="users">Users list</TabsContent>
+        <TabsContent value="settings">Settings panel</TabsContent>
+      </Tabs>
+    );
+
+    cy.contains('👤').should('be.visible');
+    cy.contains('⚙️').should('be.visible');
+    cy.contains('Users').should('be.visible');
+    cy.contains('Settings').should('be.visible');
+  });
+});

package/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex items-center bg-transparent border-b border-sidebar-border w-full',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-muted-foreground bg-transparent transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-b-primary relative',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,136 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Textarea } from './textarea';
+
+describe('Textarea Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<Textarea placeholder="Enter your message" />);
+
+    cy.get('textarea').should('exist');
+    cy.get('textarea').should('have.attr', 'placeholder', 'Enter your message');
+    cy.get('textarea').should('have.class', 'flex');
+    cy.get('textarea').should('have.class', 'min-h-[120px]');
+  });
+
+  it('accepts user input', () => {
+    cy.mount(<Textarea />);
+
+    const testText = 'This is a multiline\ntext input\nwith multiple lines';
+    cy.get('textarea').type(testText);
+    cy.get('textarea').should('have.value', testText);
+  });
+
+  it('can be disabled', () => {
+    cy.mount(<Textarea disabled />);
+
+    cy.get('textarea').should('be.disabled');
+    cy.get('textarea').should('have.class', 'disabled:cursor-not-allowed');
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Textarea className="custom-textarea h-32" />);
+
+    cy.get('textarea').should('have.class', 'custom-textarea').should('have.class', 'h-32');
+  });
+
+  it('supports rows attribute', () => {
+    cy.mount(<Textarea rows={5} />);
+
+    cy.get('textarea').should('have.attr', 'rows', '5');
+  });
+
+  it('supports maxLength', () => {
+    cy.mount(<Textarea maxLength={100} />);
+
+    const longText = 'a'.repeat(150);
+    cy.get('textarea').type(longText);
+    cy.get('textarea').invoke('val').should('have.length', 100);
+  });
+
+  it('handles onChange events', () => {
+    const onChange = cy.stub();
+
+    cy.mount(<Textarea onChange={onChange} />);
+
+    cy.get('textarea').type('test');
+    cy.wrap(onChange).should('have.been.called');
+  });
+
+  it('supports readonly state', () => {
+    cy.mount(<Textarea readOnly value="Read only text" />);
+
+    cy.get('textarea').should('have.attr', 'readonly');
+    cy.get('textarea').should('have.value', 'Read only text');
+  });
+
+  it('auto-resizes if configured', () => {
+    cy.mount(<Textarea placeholder="Type to see auto-resize" className="resize-none" />);
+
+    cy.get('textarea').should('have.class', 'resize-none');
+  });
+
+  it('works with form validation', () => {
+    cy.mount(
+      <form>
+        <Textarea required name="message" />
+        <button type="submit">Submit</button>
+      </form>
+    );
+
+    cy.get('textarea').should('have.attr', 'required');
+    cy.get('textarea').should('have.attr', 'name', 'message');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(<Textarea data-testid="custom-textarea" data-field="description" />);
+
+    cy.get('[data-testid="custom-textarea"]')
+      .should('exist')
+      .should('have.attr', 'data-field', 'description');
+  });
+
+  it('maintains proper focus states', () => {
+    cy.mount(<Textarea />);
+
+    cy.get('textarea').focus();
+    cy.get('textarea').should('have.focus');
+    cy.get('textarea').should('have.class', 'focus-visible:ring-1');
+  });
+
+  it('handles long content properly', () => {
+    const longText = Array(10).fill('This is a long line of text.').join('\n');
+
+    cy.mount(<Textarea value={longText} />);
+
+    cy.get('textarea').should('have.value', longText);
+    cy.get('textarea').scrollTo(0, 100);
+  });
+
+  it('works with labels', () => {
+    cy.mount(
+      <div className="space-y-2">
+        <label htmlFor="comment">Comment</label>
+        <Textarea id="comment" />
+      </div>
+    );
+
+    cy.get('label').click();
+    cy.get('#comment').should('have.focus');
+  });
+
+  it('supports different sizes via className', () => {
+    cy.mount(
+      <div className="space-y-4">
+        <Textarea className="min-h-[40px]" placeholder="Small" />
+        <Textarea className="min-h-[100px]" placeholder="Medium" />
+        <Textarea className="min-h-[200px]" placeholder="Large" />
+      </div>
+    );
+
+    cy.get('textarea').should('have.length', 3);
+    cy.get('textarea').first().should('have.class', 'min-h-[40px]');
+    cy.get('textarea').last().should('have.class', 'min-h-[200px]');
+  });
+});

package/src/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface TextareaProps extends React.ComponentProps<'textarea'> {
+  'data-testid'?: string;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[120px] w-full rounded border border-input bg-card px-4 py-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        data-testid={props['data-testid'] || 'textarea'}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };