feat(shadcn): component unit tests (#1275)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: thomasyuill-livekit

docs/storybook/stories/agents-ui/AgentAudioVisualizerRadial.stories.tsx

@@ -39,7 +39,7 @@ export default {
       control: { type: 'radio' },
     },
     barCount: {
-      control: { type: 'range', min: 4, max: 64, step: 4 },
+      control: { type: 'range', min: 4, max: 64, step: 1 },
     },
     radius: {
       control: { type: 'range', min: 1, max: 500, step: 1 },

packages/shadcn/components/agents-ui/agent-audio-visualizer-aura.tsx

@@ -429,6 +429,7 @@ export function AgentAudioVisualizerAura({
   return (
     <AuraShader
       ref={ref}
+      data-lk-state={state}
       blur={0.2}
       color={color}
       colorShift={colorShift}

packages/shadcn/components/agents-ui/agent-audio-visualizer-bar.tsx

@@ -172,7 +172,11 @@ export function AgentAudioVisualizerBar({
   );
 
   return (
-    <div className={cn(AgentAudioVisualizerBarVariants({ size }), className)} {...props}>
+    <div
+      data-lk-state={state}
+      className={cn(AgentAudioVisualizerBarVariants({ size }), className)}
+      {...props}
+    >
       {bands.map((band: number, idx: number) =>
         children ? (
           <React.Fragment key={idx}>

packages/shadcn/components/agents-ui/agent-audio-visualizer-grid.tsx

@@ -266,6 +266,7 @@ export function AgentAudioVisualizerGrid({
 
   return (
     <div
+      data-lk-state={state}
       className={cn(AgentAudioVisualizerGridVariants({ size }), className)}
       style={{ ...style, gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
       {...props}

packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx

@@ -173,6 +173,7 @@ export function AgentAudioVisualizerRadial({
 
   return (
     <div
+      data-lk-state={state}
       className={cn(AgentAudioVisualizerRadialVariants({ size }), 'relative', className)}
       {...props}
     >

packages/shadcn/components/agents-ui/agent-audio-visualizer-wave.tsx

@@ -283,7 +283,6 @@ export function AgentAudioVisualizerWave({
   blur,
   audioTrack,
   className,
-  style,
   ref,
   ...props
 }: AgentAudioVisualizerWaveProps &
@@ -310,13 +309,13 @@ export function AgentAudioVisualizerWave({
   return (
     <WaveShader
       ref={ref}
+      data-lk-state={state}
       speed={speed}
       color={color}
       amplitude={amplitude}
       frequency={frequency}
       lineWidth={_lineWidth}
       blur={blur}
-      style={{ opacity, ...style }}
       className={cn(
         AgentAudioVisualizerWaveVariants({ size }),
         'mask-[linear-gradient(90deg,transparent_0%,black_20%,black_80%,transparent_100%)]',

packages/shadcn/components/agents-ui/agent-chat-indicator.tsx

@@ -1,4 +1,4 @@
-import { type Ref } from 'react';
+import { type Ref, type ComponentProps } from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { motion, type MotionProps } from 'motion/react';
 
@@ -78,7 +78,9 @@ export function AgentChatIndicator({
   size = 'md',
   className,
   ...props
-}: AgentChatIndicatorProps & VariantProps<typeof agentChatIndicatorVariants>) {
+}: AgentChatIndicatorProps &
+  ComponentProps<'span'> &
+  VariantProps<typeof agentChatIndicatorVariants>) {
   return (
     <motion.span
       {...motionAnimationProps}

packages/shadcn/components/agents-ui/agent-chat-transcript.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { type ComponentProps } from 'react';
 import { type AgentState, type ReceivedMessage } from '@livekit/components-react';
 import {
   Conversation,
@@ -13,7 +14,7 @@ import { AnimatePresence } from 'motion/react';
 /**
  * Props for the AgentChatTranscript component.
  */
-export interface AgentChatTranscriptProps {
+export interface AgentChatTranscriptProps extends ComponentProps<'div'> {
   /**
    * The current state of the agent. When 'thinking', displays a loading indicator.
    */

packages/shadcn/components/agents-ui/agent-disconnect-button.tsx

@@ -59,7 +59,9 @@ export function AgentDisconnectButton({
   const { end } = useSessionContext();
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onClick?.(event);
-    end();
+    if (typeof end === 'function') {
+      end();
+    }
   };
 
   return (

packages/shadcn/components/agents-ui/agent-track-toggle.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type ComponentProps } from 'react';
+import { Fragment, type ComponentProps, useMemo, useState } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import { Track } from 'livekit-client';
 import {
@@ -120,22 +120,34 @@ export function AgentTrackToggle({
   variant = 'default',
   source,
   pending = false,
-  pressed = false,
+  pressed,
   defaultPressed = false,
   className,
   onPressedChange,
   ...props
 }: AgentTrackToggleProps) {
-  const IconComponent = getSourceIcon(source as Track.Source, pressed ?? false, pending);
+  const [uncontrolledPressed, setUncontrolledPressed] = useState(defaultPressed ?? false);
+  const isControlled = pressed !== undefined;
+  const resolvedPressed = useMemo(
+    () => (isControlled ? pressed : uncontrolledPressed) ?? false,
+    [isControlled, pressed, uncontrolledPressed],
+  );
+  const IconComponent = getSourceIcon(source as Track.Source, resolvedPressed, pending);
+  const handlePressedChange = (nextPressed: boolean) => {
+    if (!isControlled) {
+      setUncontrolledPressed(nextPressed);
+    }
+    onPressedChange?.(nextPressed);
+  };
 
   return (
     <Toggle
       size={size}
       variant={variant}
-      pressed={pressed}
-      defaultPressed={defaultPressed}
+      pressed={isControlled ? pressed : undefined}
+      defaultPressed={isControlled ? undefined : defaultPressed}
       aria-label={`Toggle ${source}`}
-      onPressedChange={onPressedChange}
+      onPressedChange={handlePressedChange}
       className={cn(
         agentTrackToggleVariants({
           size,