@elizaos/client 1.5.5-alpha.10

package/src/components/ui/avatar.tsx

@@ -0,0 +1,57 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  'data-testid'?: string;
+}
+
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md', className)}
+      data-testid={props['data-testid'] || 'avatar'}
+      {...props}
+    />
+  )
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+  'data-testid'?: string;
+}
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  AvatarImageProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full object-cover', className)}
+    data-testid={props['data-testid'] || 'avatar-image'}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+interface AvatarFallbackProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+  'data-testid'?: string;
+}
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  AvatarFallbackProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-md bg-muted', className)}
+    data-testid={props['data-testid'] || 'avatar-fallback'}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,146 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Badge, badgeVariants } from './badge';
+
+describe('Badge Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<Badge>Default Badge</Badge>);
+
+    cy.get('[data-testid="badge"]').should('exist');
+    cy.get('[data-testid="badge"]').should('contain', 'Default Badge');
+    cy.get('[data-testid="badge"]').should('have.class', 'inline-flex');
+  });
+
+  describe('Variants', () => {
+    it('renders default variant correctly', () => {
+      cy.mount(<Badge variant="default">Default</Badge>);
+
+      cy.get('[data-testid="badge"]')
+        .should('have.class', 'bg-primary')
+        .should('have.class', 'text-primary-foreground');
+    });
+
+    it('renders secondary variant correctly', () => {
+      cy.mount(<Badge variant="secondary">Secondary</Badge>);
+
+      cy.get('[data-testid="badge"]')
+        .should('have.class', 'bg-secondary')
+        .should('have.class', 'text-secondary-foreground');
+    });
+
+    it('renders destructive variant correctly', () => {
+      cy.mount(<Badge variant="destructive">Destructive</Badge>);
+
+      cy.get('[data-testid="badge"]')
+        .should('have.class', 'bg-destructive')
+        .should('have.class', 'text-destructive-foreground');
+    });
+
+    it('renders outline variant correctly', () => {
+      cy.mount(<Badge variant="outline">Outline</Badge>);
+
+      cy.get('[data-testid="badge"]').should('have.class', 'border');
+    });
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Badge className="custom-badge ml-2">Custom</Badge>);
+
+    cy.get('[data-testid="badge"]')
+      .should('have.class', 'custom-badge')
+      .should('have.class', 'ml-2');
+  });
+
+  it('renders with different content types', () => {
+    cy.mount(
+      <div>
+        <Badge>Text only</Badge>
+        <Badge>
+          <span>With span</span>
+        </Badge>
+        <Badge>
+          <span className="mr-1">🔥</span>
+          With emoji
+        </Badge>
+      </div>
+    );
+
+    cy.get('[data-testid="badge"]').should('have.length', 3);
+    cy.get('[data-testid="badge"]').first().should('contain', 'Text only');
+    cy.get('[data-testid="badge"]').eq(1).find('span').should('exist');
+    cy.get('[data-testid="badge"]').last().should('contain', '🔥');
+  });
+
+  it('renders inline with text', () => {
+    cy.mount(
+      <p>
+        This is some text with a <Badge>badge</Badge> inline.
+      </p>
+    );
+
+    cy.get('[data-testid="badge"]').should('be.visible');
+    cy.get('p').should('contain', 'This is some text with a');
+    cy.get('p').should('contain', 'inline.');
+  });
+
+  it('can be used as a clickable element', () => {
+    const onClick = cy.stub();
+
+    cy.mount(
+      <Badge className="cursor-pointer" onClick={onClick}>
+        Clickable
+      </Badge>
+    );
+
+    cy.get('[data-testid="badge"]').click();
+    cy.wrap(onClick).should('have.been.calledOnce');
+  });
+
+  it('renders multiple badges in a group', () => {
+    cy.mount(
+      <div className="flex gap-2">
+        <Badge>Badge 1</Badge>
+        <Badge variant="secondary">Badge 2</Badge>
+        <Badge variant="outline">Badge 3</Badge>
+      </div>
+    );
+
+    cy.get('[data-testid="badge"]').should('have.length', 3);
+    cy.get('.flex.gap-2').should('exist');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(
+      <Badge data-testid="custom-badge" data-status="active">
+        Active
+      </Badge>
+    );
+
+    cy.get('[data-testid="custom-badge"]')
+      .should('exist')
+      .should('have.attr', 'data-status', 'active');
+  });
+
+  it('has correct accessibility attributes', () => {
+    cy.mount(
+      <Badge role="status" aria-label="User status">
+        Online
+      </Badge>
+    );
+
+    cy.get('[data-testid="badge"]')
+      .should('have.attr', 'role', 'status')
+      .should('have.attr', 'aria-label', 'User status');
+  });
+
+  it('badgeVariants function works correctly', () => {
+    // Test the badgeVariants function directly
+    const defaultClasses = badgeVariants({ variant: 'default' });
+    const secondaryClasses = badgeVariants({ variant: 'secondary' });
+
+    expect(defaultClasses).to.include('bg-primary');
+    expect(secondaryClasses).to.include('bg-secondary');
+  });
+});

package/src/components/ui/badge.tsx

@@ -0,0 +1,43 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+interface ExtendedBadgeProps extends BadgeProps {
+  'data-testid'?: string;
+}
+
+function Badge({ className, variant, ...props }: ExtendedBadgeProps) {
+  return (
+    <div
+      className={cn(badgeVariants({ variant }), className)}
+      data-testid={props['data-testid'] || 'badge'}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,177 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Button } from './button';
+
+describe('Button Component', () => {
+  // Test basic rendering
+  it('renders correctly with default props', () => {
+    cy.mount(<Button>Click me</Button>);
+
+    cy.get('[data-slot="button"]')
+      .should('exist')
+      .should('have.text', 'Click me')
+      .should('have.class', 'bg-primary');
+  });
+
+  // Test all variants
+  describe('Variants', () => {
+    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+
+    variants.forEach((variant) => {
+      it(`renders ${variant} variant correctly`, () => {
+        cy.mount(<Button variant={variant}>{variant} Button</Button>);
+
+        cy.get('[data-slot="button"]').should('exist').should('contain.text', `${variant} Button`);
+
+        // Take a screenshot for visual regression
+        cy.screenshot(`button-variant-${variant}`);
+      });
+    });
+  });
+
+  // Test all sizes
+  describe('Sizes', () => {
+    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+
+    sizes.forEach((size) => {
+      it(`renders ${size} size correctly`, () => {
+        cy.mount(<Button size={size}>{size === 'icon' ? '🚀' : `${size} Button`}</Button>);
+
+        cy.get('[data-slot="button"]').should('exist');
+
+        // Verify specific size classes
+        if (size === 'sm') {
+          cy.get('[data-slot="button"]').should('have.class', 'h-8');
+        } else if (size === 'lg') {
+          cy.get('[data-slot="button"]').should('have.class', 'h-10');
+        } else if (size === 'icon') {
+          cy.get('[data-slot="button"]').should('have.class', 'h-auto').and('have.class', 'w-auto');
+        } else {
+          cy.get('[data-slot="button"]').should('have.class', 'h-9');
+        }
+      });
+    });
+  });
+
+  // Test interactions
+  describe('Interactions', () => {
+    it('handles click events', () => {
+      const onClick = cy.stub();
+
+      cy.mount(<Button onClick={onClick}>Click me</Button>);
+
+      cy.get('[data-slot="button"]').click();
+      cy.wrap(onClick).should('have.been.calledOnce');
+    });
+
+    it('can be disabled', () => {
+      const onClick = cy.stub();
+
+      cy.mount(
+        <Button disabled onClick={onClick}>
+          Disabled Button
+        </Button>
+      );
+
+      cy.get('[data-slot="button"]')
+        .should('be.disabled')
+        .should('have.class', 'disabled:opacity-50')
+        .click({ force: true });
+
+      cy.wrap(onClick).should('not.have.been.called');
+    });
+
+    it('supports keyboard navigation', () => {
+      const onClick = cy.stub();
+
+      cy.mount(<Button onClick={onClick}>Keyboard Button</Button>);
+
+      // Trigger click with keyboard
+      cy.get('[data-slot="button"]')
+        .focus()
+        .trigger('keydown', { key: 'Enter', code: 'Enter' })
+        .trigger('click');
+
+      cy.wrap(onClick).should('have.been.calledOnce');
+    });
+  });
+
+  // Test asChild prop
+  describe('asChild prop', () => {
+    it('renders as a different element when asChild is true', () => {
+      cy.mount(
+        <Button asChild>
+          <a href="/test">Link Button</a>
+        </Button>
+      );
+
+      cy.get('a[data-slot="button"]')
+        .should('exist')
+        .should('have.attr', 'href', '/test')
+        .should('have.text', 'Link Button');
+    });
+  });
+
+  // Test with icons
+  describe('With Icons', () => {
+    it('renders correctly with an icon', () => {
+      cy.mount(
+        <Button>
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24">
+            <path d="M12 4v16m8-8H4" stroke="currentColor" strokeWidth={2} />
+          </svg>
+          With Icon
+        </Button>
+      );
+
+      cy.get('[data-slot="button"]').should('contain.text', 'With Icon');
+      cy.get('[data-slot="button"] svg').should('exist');
+    });
+  });
+
+  // Test custom className
+  describe('Custom styling', () => {
+    it('accepts custom className', () => {
+      cy.mount(<Button className="custom-class bg-blue-500">Custom Styled</Button>);
+
+      cy.get('[data-slot="button"]')
+        .should('have.class', 'custom-class')
+        .should('have.class', 'bg-blue-500');
+    });
+  });
+
+  // Test focus states
+  describe('Focus states', () => {
+    it('shows focus ring when focused', () => {
+      cy.mount(<Button>Focus me</Button>);
+
+      cy.get('[data-slot="button"]').focus().should('have.class', 'focus-visible:ring-ring/50');
+    });
+  });
+
+  // Test loading state (if supported)
+  describe('Loading state', () => {
+    it('can show loading state', () => {
+      cy.mount(
+        <Button disabled>
+          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+          </svg>
+          Loading...
+        </Button>
+      );
+
+      cy.get('[data-slot="button"]').should('be.disabled').should('contain.text', 'Loading...');
+      cy.get('[data-slot="button"] svg').should('have.class', 'animate-spin');
+    });
+  });
+});

package/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+        destructive:
+          'bg-red-800 text-white shadow-xs hover:bg-red-600 focus-visible:ring-red-400/20 dark:focus-visible:ring-red-500',
+        outline:
+          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-auto w-auto',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,160 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
+
+describe('Card Component', () => {
+  it('renders basic card correctly', () => {
+    cy.mount(
+      <Card>
+        <CardContent>Basic Card Content</CardContent>
+      </Card>
+    );
+
+    cy.get('[data-slot="card"]').should('exist');
+    cy.contains('Basic Card Content').should('be.visible');
+  });
+
+  it('renders complete card with all sections', () => {
+    cy.mount(
+      <Card>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card Description</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Card content goes here</p>
+        </CardContent>
+        <CardFooter>
+          <button>Action</button>
+        </CardFooter>
+      </Card>
+    );
+
+    // Check all sections are rendered
+    cy.get('[data-slot="card"]').should('exist');
+    cy.get('[data-slot="card-header"]').should('exist');
+    cy.get('[data-slot="card-title"]').should('contain', 'Card Title');
+    cy.get('[data-slot="card-description"]').should('contain', 'Card Description');
+    cy.get('[data-slot="card-content"]').should('contain', 'Card content goes here');
+    cy.get('[data-slot="card-footer"]').should('contain', 'Action');
+  });
+
+  it('applies custom className to card', () => {
+    cy.mount(
+      <Card className="custom-card bg-blue-500">
+        <CardContent>Custom styled card</CardContent>
+      </Card>
+    );
+
+    cy.get('[data-slot="card"]')
+      .should('have.class', 'custom-card')
+      .should('have.class', 'bg-blue-500');
+  });
+
+  it('renders card without header', () => {
+    cy.mount(
+      <Card>
+        <CardContent>No header card</CardContent>
+        <CardFooter>Footer only</CardFooter>
+      </Card>
+    );
+
+    cy.get('[data-slot="card-header"]').should('not.exist');
+    cy.get('[data-slot="card-content"]').should('exist');
+    cy.get('[data-slot="card-footer"]').should('exist');
+  });
+
+  it('renders card without footer', () => {
+    cy.mount(
+      <Card>
+        <CardHeader>
+          <CardTitle>Header Only</CardTitle>
+        </CardHeader>
+        <CardContent>No footer card</CardContent>
+      </Card>
+    );
+
+    cy.get('[data-slot="card-header"]').should('exist');
+    cy.get('[data-slot="card-content"]').should('exist');
+    cy.get('[data-slot="card-footer"]').should('not.exist');
+  });
+
+  it('supports nested content in card sections', () => {
+    cy.mount(
+      <Card>
+        <CardHeader>
+          <CardTitle>Complex Card</CardTitle>
+          <CardDescription>
+            <span className="text-red-500">Colored</span> description
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-2">
+            <div>Row 1</div>
+            <div>Row 2</div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+
+    // Check nested content renders correctly
+    cy.get('.text-red-500').should('contain', 'Colored');
+    cy.get('.grid').should('exist');
+    cy.get('.grid').children().should('have.length', 2);
+  });
+
+  it('handles click events on card', () => {
+    const onClick = cy.stub();
+
+    cy.mount(
+      <Card onClick={onClick} className="cursor-pointer">
+        <CardContent>Clickable Card</CardContent>
+      </Card>
+    );
+
+    cy.get('[data-slot="card"]').click();
+    cy.wrap(onClick).should('have.been.calledOnce');
+  });
+
+  it('renders multiple cards in a grid', () => {
+    cy.mount(
+      <div className="grid grid-cols-3 gap-4">
+        <Card>
+          <CardContent>Card 1</CardContent>
+        </Card>
+        <Card>
+          <CardContent>Card 2</CardContent>
+        </Card>
+        <Card>
+          <CardContent>Card 3</CardContent>
+        </Card>
+      </div>
+    );
+
+    cy.get('[data-slot="card"]').should('have.length', 3);
+  });
+
+  it('applies hover styles', () => {
+    cy.mount(
+      <Card className="hover:shadow-lg transition-shadow">
+        <CardContent>Hover me</CardContent>
+      </Card>
+    );
+
+    cy.get('[data-slot="card"]')
+      .should('have.class', 'hover:shadow-lg')
+      .should('have.class', 'transition-shadow');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(
+      <Card data-testid="custom-card" data-id="123">
+        <CardContent>Card with data attributes</CardContent>
+      </Card>
+    );
+
+    cy.get('[data-testid="custom-card"]').should('exist').should('have.attr', 'data-id', '123');
+  });
+});