@elizaos/client 1.5.5-alpha.10

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

@@ -0,0 +1,281 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+type PointerDownEvent = Parameters<
+  NonNullable<DropdownMenuPrimitive.DropdownMenuContentProps['onPointerDown']>
+>[0];
+type PointerDownOutsideEvent = Parameters<
+  NonNullable<DropdownMenuPrimitive.DropdownMenuContentProps['onPointerDownOutside']>
+>[0];
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  onPointerDown,
+  onPointerDownOutside,
+  onCloseAutoFocus,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  const isCloseFromMouse = React.useRef<boolean>(false);
+
+  const handlePointerDown = React.useCallback(
+    (e: PointerDownEvent) => {
+      isCloseFromMouse.current = true;
+      onPointerDown?.(e);
+    },
+    [onPointerDown]
+  );
+
+  const handlePointerDownOutside = React.useCallback(
+    (e: PointerDownOutsideEvent) => {
+      isCloseFromMouse.current = true;
+      onPointerDownOutside?.(e);
+    },
+    [onPointerDownOutside]
+  );
+
+  const handleCloseAutoFocus = React.useCallback(
+    (e: Event) => {
+      if (onCloseAutoFocus) {
+        return onCloseAutoFocus(e);
+      }
+
+      if (!isCloseFromMouse.current) {
+        return;
+      }
+
+      e.preventDefault();
+      isCloseFromMouse.current = false;
+    },
+    [onCloseAutoFocus]
+  );
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground 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 z-50 overflow-hidden rounded-md border p-1 shadow-lg',
+          className
+        )}
+        onPointerDown={handlePointerDown}
+        onPointerDownOutside={handlePointerDownOutside}
+        onCloseAutoFocus={handleCloseAutoFocus}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground data-[variant=destructive]:font-normal relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-medium outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon size={16} />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <kbd
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'bg-background text-muted-foreground/70 ms-auto -me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon size={16} className="text-muted-foreground/80 ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground 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 z-50 overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

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

@@ -0,0 +1,82 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Input } from './input';
+
+describe('Input Component', () => {
+  it('renders correctly', () => {
+    cy.mount(<Input placeholder="Enter text" />);
+
+    cy.get('input').should('exist');
+    cy.get('input').should('have.attr', 'placeholder', 'Enter text');
+  });
+
+  it('accepts user input', () => {
+    cy.mount(<Input />);
+
+    const testText = 'Hello, World!';
+    cy.get('input').type(testText);
+    cy.get('input').should('have.value', testText);
+  });
+
+  it('can be disabled', () => {
+    cy.mount(<Input disabled />);
+
+    cy.get('input').should('be.disabled');
+  });
+
+  it('accepts different types', () => {
+    const types = ['text', 'email', 'password', 'number'] as const;
+
+    types.forEach((type) => {
+      cy.mount(<Input type={type} />);
+      cy.get('input').should('have.attr', 'type', type);
+    });
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Input className="custom-class bg-red-500" />);
+
+    cy.get('input').should('have.class', 'custom-class');
+    cy.get('input').should('have.class', 'bg-red-500');
+  });
+
+  it('handles onChange events', () => {
+    const onChange = cy.stub();
+
+    cy.mount(<Input onChange={onChange} />);
+
+    cy.get('input').type('test');
+    cy.wrap(onChange).should('have.been.called');
+  });
+
+  it('forwards ref correctly', () => {
+    // Test that ref prop is accepted without errors
+    const ref = React.createRef<HTMLInputElement>();
+    cy.mount(<Input ref={ref} data-testid="ref-input" />);
+
+    // Verify the input is rendered
+    cy.get('[data-testid="ref-input"]').should('exist');
+  });
+
+  it('supports readonly state', () => {
+    cy.mount(<Input readOnly value="Read only text" />);
+
+    cy.get('input').should('have.attr', 'readonly');
+    cy.get('input').should('have.value', 'Read only text');
+  });
+
+  it('supports max length', () => {
+    cy.mount(<Input maxLength={10} />);
+
+    cy.get('input').type('This is a very long text');
+    cy.get('input').should('have.value', 'This is a ');
+  });
+
+  it('supports autoComplete', () => {
+    cy.mount(<Input autoComplete="email" />);
+
+    cy.get('input').should('have.attr', 'autocomplete', 'email');
+  });
+});

package/src/components/ui/input.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface InputProps extends React.ComponentProps<'input'> {
+  'data-testid'?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-12 w-full rounded border border-input bg-card px-4 py-3 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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'] || 'input'}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

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

@@ -0,0 +1,157 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Label } from './label';
+
+describe('Label Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<Label>Email Address</Label>);
+
+    cy.get('label').should('exist');
+    cy.get('label').should('contain', 'Email Address');
+    cy.get('label').should('have.class', 'text-sm');
+    cy.get('label').should('have.class', 'font-normal');
+  });
+
+  it('associates with form controls using htmlFor', () => {
+    cy.mount(
+      <div>
+        <Label htmlFor="email-input">Email</Label>
+        <input id="email-input" type="email" />
+      </div>
+    );
+
+    cy.get('label').should('have.attr', 'for', 'email-input');
+    // Clicking the label should focus the input
+    cy.get('label').click();
+    cy.get('#email-input').should('have.focus');
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Label className="custom-label text-lg">Custom Label</Label>);
+
+    cy.get('label').should('have.class', 'custom-label').should('have.class', 'text-lg');
+  });
+
+  it('renders with required indicator', () => {
+    cy.mount(
+      <Label>
+        Username <span className="text-red-500">*</span>
+      </Label>
+    );
+
+    cy.get('label').should('contain', 'Username');
+    cy.get('label').find('.text-red-500').should('contain', '*');
+  });
+
+  it('works with checkbox inputs', () => {
+    cy.mount(
+      <div className="flex items-center space-x-2">
+        <input type="checkbox" id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    );
+
+    cy.get('label').click();
+    cy.get('#terms').should('be.checked');
+  });
+
+  it('works with radio inputs', () => {
+    cy.mount(
+      <div className="space-y-2">
+        <div className="flex items-center space-x-2">
+          <input type="radio" id="option1" name="options" />
+          <Label htmlFor="option1">Option 1</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <input type="radio" id="option2" name="options" />
+          <Label htmlFor="option2">Option 2</Label>
+        </div>
+      </div>
+    );
+
+    cy.get('label').first().click();
+    cy.get('#option1').should('be.checked');
+    cy.get('#option2').should('not.be.checked');
+
+    cy.get('label').last().click();
+    cy.get('#option1').should('not.be.checked');
+    cy.get('#option2').should('be.checked');
+  });
+
+  it('supports disabled state styling', () => {
+    cy.mount(<Label className="peer-disabled:opacity-50">Disabled Label</Label>);
+
+    cy.get('label').should('have.class', 'peer-disabled:opacity-50');
+  });
+
+  it('renders in a form layout', () => {
+    cy.mount(
+      <form className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="name">Name</Label>
+          <input id="name" type="text" className="w-full border rounded px-2 py-1" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <input id="email" type="email" className="w-full border rounded px-2 py-1" />
+        </div>
+      </form>
+    );
+
+    cy.get('label').should('have.length', 2);
+    cy.get('label').first().should('contain', 'Name');
+    cy.get('label').last().should('contain', 'Email');
+  });
+
+  it('supports custom styles', () => {
+    cy.mount(
+      <Label className="text-blue-600 uppercase tracking-wide" style={{ fontSize: '14px' }}>
+        Styled Label
+      </Label>
+    );
+
+    cy.get('label')
+      .should('have.class', 'text-blue-600')
+      .should('have.class', 'uppercase')
+      .should('have.class', 'tracking-wide')
+      .should('have.css', 'font-size', '14px');
+  });
+
+  it('works with nested content', () => {
+    cy.mount(
+      <Label>
+        <span className="font-bold">Bold part</span> normal part
+      </Label>
+    );
+
+    cy.get('label').find('.font-bold').should('contain', 'Bold part');
+    cy.get('label').should('contain', 'normal part');
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(
+      <Label data-testid="custom-label" data-field="username">
+        Username
+      </Label>
+    );
+
+    cy.get('[data-testid="custom-label"]')
+      .should('exist')
+      .should('have.attr', 'data-field', 'username');
+  });
+
+  it('maintains proper spacing in form groups', () => {
+    cy.mount(
+      <div className="space-y-1">
+        <Label htmlFor="field">Field Label</Label>
+        <input id="field" className="w-full" />
+        <p className="text-sm text-gray-500">Helper text</p>
+      </div>
+    );
+
+    cy.get('label').should('be.visible');
+    cy.get('.space-y-1').should('exist');
+  });
+});

package/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-normal text-muted-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/ui/resizable.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '@/lib/utils';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };