fix(shadcn): grid and bar visualizer styling and configuration (#1287)

Author: thomasyuill-livekit

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

@@ -1,18 +1,27 @@
-import React from 'react';
+import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
 import { useSessionContext } from '@livekit/components-react';
 import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
-import { AgentAudioVisualizerBar, AgentAudioVisualizerBarProps } from '@agents-ui';
+import {
+  AgentAudioVisualizerBar,
+  AgentAudioVisualizerBarElementVariants,
+  AgentAudioVisualizerBarProps,
+} from '@agents-ui';
+import { cn } from '@/lib/utils';
 
 export default {
   component: AgentAudioVisualizerBar,
   decorators: [AgentSessionProvider],
-  render: (args: AgentAudioVisualizerBarProps) => {
+  render: ({ color, ...args }: AgentAudioVisualizerBarProps & { color?: string }) => {
     const {
       local: { microphoneTrack },
     } = useSessionContext();
 
-    return <AgentAudioVisualizerBar {...args} audioTrack={microphoneTrack} />;
+    return (
+      <div style={{ color }}>
+        <AgentAudioVisualizerBar {...args} audioTrack={microphoneTrack} />
+      </div>
+    );
   },
   args: {
     size: 'xl',
@@ -41,6 +50,7 @@ export default {
     barCount: {
       control: { type: 'range', min: 1, max: 24, step: 1 },
     },
+    color: { control: { type: 'color' } },
     className: { control: { type: 'text' } },
   },
   parameters: {
@@ -54,3 +64,9 @@ export default {
 export const Default: StoryObj<AgentAudioVisualizerBarProps> = {
   args: {},
 };
+
+export const Demo1: StoryObj<AgentAudioVisualizerBarProps> = {
+  args: {
+    color: '#F9B11F',
+  },
+};

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

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
 import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
-import { AgentAudioVisualizerGrid, AgentAudioVisualizerGridProps } from '@agents-ui';
+import {
+  AgentAudioVisualizerGrid,
+  AgentAudioVisualizerGridProps,
+  AgentAudioVisualizerGridCellVariants,
+} from '@agents-ui';
 import { useSessionContext } from '@livekit/components-react';
+import { cn } from '@/lib/utils';
 
 export default {
   component: AgentAudioVisualizerGrid,
   decorators: [AgentSessionProvider],
-  render: (args: AgentAudioVisualizerGridProps) => {
+  render: ({ color, ...args }: AgentAudioVisualizerGridProps & { color?: string }) => {
     const {
       local: { microphoneTrack },
     } = useSessionContext();
 
-    return <AgentAudioVisualizerGrid {...args} audioTrack={microphoneTrack} />;
+    return (
+      <div style={{ color }}>
+        <AgentAudioVisualizerGrid {...args} audioTrack={microphoneTrack} />
+      </div>
+    );
   },
   args: {
     size: 'lg',
@@ -21,6 +30,7 @@ export default {
     interval: 100,
     rowCount: 9,
     columnCount: 9,
+    color: undefined,
   },
   argTypes: {
     size: {
@@ -54,6 +64,7 @@ export default {
       control: { type: 'range', min: 1, max: 40, step: 1 },
     },
     className: { control: { type: 'text' } },
+    color: { control: { type: 'color' } },
   },
   parameters: {
     layout: 'centered',
@@ -64,47 +75,69 @@ export default {
 };
 
 export const Default: StoryObj<AgentAudioVisualizerGridProps> = {
-  args: {
-    
-  },
+  args: {},
 };
 
 export const Demo1: StoryObj<AgentAudioVisualizerGridProps> = {
   args: {
-    className:
-      'gap-4 *:size-1 *:rounded-full *:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-foreground [&_>_[data-lk-highlighted=true]]:scale-125 [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
+    className: 'gap-4',
+    children: (
+      <div
+        className={cn(
+          AgentAudioVisualizerGridCellVariants({ size: 'md' }),
+          'data-[lk-highlighted=true]:bg-foreground data-[lk-highlighted=true]:scale-125',
+          'shadow-[0_0_10px_2px_transparent] data-[lk-highlighted=true]:shadow-[0_0_10px_2px_var(--tw-shadow-color,currentColor)]',
+        )}
+      />
+    ),
   },
 };
 
 export const Demo2: StoryObj<AgentAudioVisualizerGridProps> = {
   args: {
-    className:
-      'gap-2 *:w-4 *:h-1 *:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-[#F9B11F] [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_14.8px_2px_#F9B11F]',
+    color: '#F9B11F',
+    className: 'gap-2',
+    children: (
+      <div
+        className={cn(
+          AgentAudioVisualizerGridCellVariants({ size: 'md' }),
+          'w-4 h-1 bg-foreground/10',
+          'shadow-[0_0_10px_2px_transparent] data-[lk-highlighted=true]:shadow-[0_0_10px_2px_var(--tw-shadow-color,currentColor)]',
+        )}
+      />
+    ),
   },
 };
 
 export const Demo3: StoryObj<AgentAudioVisualizerGridProps> = {
   args: {
-    className:
-      'gap-4 *:size-2 *:rounded-full *:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-[#1F8CF9] [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_14.8px_2px_#1F8CF9]',
-    transformer: (index: number, rowCount: number, columnCount: number) => {
-      const rowMidPoint = Math.floor(rowCount / 2);
-      const distanceFromCenter = Math.sqrt(
-        Math.pow(rowMidPoint - (index % columnCount), 2) +
-          Math.pow(rowMidPoint - Math.floor(index / columnCount), 2),
-      );
-
-      return {
-        opacity: 1 - distanceFromCenter / columnCount,
-        transform: `scale(${1 - (distanceFromCenter / (columnCount * 2)) * 1.75})`,
-      };
-    },
+    color: '#1F8CF9',
+    className: 'gap-4',
+    children: (
+      <div
+        className={cn(
+          AgentAudioVisualizerGridCellVariants({ size: 'md' }),
+          'size-2 rounded-full bg-foreground/10',
+          'shadow-[0_0_10px_2px_transparent] data-[lk-highlighted=true]:shadow-[0_0_10px_2px_var(--tw-shadow-color,currentColor)]',
+        )}
+      />
+    ),
   },
 };
 
 export const Demo4: StoryObj<AgentAudioVisualizerGridProps> = {
   args: {
-    className:
-      'gap-x-2.5 gap-y-1 *:w-3 *:h-px *:my-2 *:rotate-45 *:bg-foreground/10 *:rotate-45 *:scale-100 [&_>_[data-lk-highlighted=true]]:bg-[#FFB6C1] [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_8px_2px_rgba(255,182,193,0.4)] [&_>_[data-lk-highlighted=true]]:rotate-[405deg] [&_>_[data-lk-highlighted=true]]:scale-200',
+    color: '#FFB6C1',
+    className: 'gap-x-2.5 gap-y-1',
+    children: (
+      <div
+        className={cn(
+          AgentAudioVisualizerGridCellVariants({ size: 'md' }),
+          'w-3 h-px my-2 rotate-45 bg-foreground/10 scale-100',
+          'data-[lk-highlighted=true]:rotate-405 data-[lk-highlighted=true]:scale-200',
+          'shadow-[0_0_10px_2px_transparent] data-[lk-highlighted=true]:shadow-[0_0_10px_2px_var(--tw-shadow-color,currentColor)]',
+        )}
+      />
+    ),
   },
 };

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

@@ -1,13 +1,13 @@
 'use client';
 
 import React, {
-  type ComponentProps,
-  type ReactNode,
   type CSSProperties,
-  useMemo,
   Children,
+  type ComponentProps,
+  type ReactNode,
   cloneElement,
   isValidElement,
+  useMemo,
 } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
@@ -43,20 +43,19 @@ function cloneSingleChild(
   });
 }
 
-export const AgentAudioVisualizerBarVariants = cva(
+export const AgentAudioVisualizerBarElementVariants = cva(
   [
-    'relative flex items-center justify-center',
-    '*:rounded-full *:transition-colors *:duration-250 *:ease-linear',
-    '*:bg-transparent *:data-[lk-highlighted=true]:bg-current',
+    'rounded-full transition-colors duration-250 ease-linear',
+    'bg-transparent data-[lk-highlighted=true]:bg-current',
   ],
   {
     variants: {
       size: {
-        icon: ['h-[24px] gap-[2px]', '*:w-[4px] *:min-h-[4px]'],
-        sm: ['h-[56px] gap-[4px]', '*:w-[8px] *:min-h-[8px]'],
-        md: ['h-[112px] gap-[8px]', '*:w-[16px] *:min-h-[16px]'],
-        lg: ['h-[224px] gap-[16px]', '*:w-[32px] *:min-h-[32px]'],
-        xl: ['h-[448px] gap-[32px]', '*:w-[64px] *:min-h-[64px]'],
+        icon: 'w-[4px] min-h-[4px]',
+        sm: 'w-[8px] min-h-[8px]',
+        md: 'w-[16px] min-h-[16px]',
+        lg: 'w-[32px] min-h-[32px]',
+        xl: 'w-[64px] min-h-[64px]',
       },
     },
     defaultVariants: {
@@ -65,6 +64,21 @@ export const AgentAudioVisualizerBarVariants = cva(
   },
 );
 
+export const AgentAudioVisualizerBarVariants = cva('relative flex items-center justify-center', {
+  variants: {
+    size: {
+      icon: 'h-[24px] gap-[2px]',
+      sm: 'h-[56px] gap-[4px]',
+      md: 'h-[112px] gap-[8px]',
+      lg: 'h-[224px] gap-[16px]',
+      xl: 'h-[448px] gap-[32px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
 /**
  * Props for the AgentAudioVisualizerBar component.
  */
@@ -93,10 +107,10 @@ export interface AgentAudioVisualizerBarProps {
    */
   className?: string;
   /**
-   * Custom children to render as bars. Each child receives data-lk-index,
-   * data-lk-highlighted, and style props for height.
+   * Custom div element to render as grid cells. Each child receives data-lk-index,
+   * data-lk-highlighted props and style props for height. Must be a single div element.
    */
-  children?: ReactNode | ReactNode[];
+  children?: ReactNode;
 }
 
 /**
@@ -171,6 +185,10 @@ export function AgentAudioVisualizerBar({
     [state, volumeBands, _barCount],
   );
 
+  if (children && Array.isArray(children)) {
+    throw new Error('AgentAudioVisualizerBar children must be a single element.');
+  }
+
   return (
     <div
       data-lk-state={state}
@@ -192,6 +210,7 @@ export function AgentAudioVisualizerBar({
             data-lk-index={idx}
             data-lk-highlighted={highlightedIndices.includes(idx)}
             style={{ height: `${band * 100}%` }}
+            className={cn(AgentAudioVisualizerBarElementVariants({ size }))}
           />
         ),
       )}