@envive-ai/react-toolkit-v3 0.3.14 → 0.3.15-beta.1

package/src/components/PromptCarousel/hooks/usePromptCarouselAnalytics.ts

@@ -0,0 +1,95 @@
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { useRef } from 'react';
+
+export const usePromptCarouselAnalytics = (
+  widget: WidgetInteractionComponent,
+  idExtractor: (text: string) => string,
+) => {
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const promptRef = useRef(null);
+
+  const onClick = (text: string) => {
+    const id = idExtractor(text);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget,
+        widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
+        widget_interaction_data: {
+          suggestion_clicked: {
+            suggestion_id: id,
+          },
+        },
+      },
+    });
+  };
+
+  const onHover = (text: string) => {
+    if (!promptRef.current) {
+      const id = idExtractor(text);
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget,
+          widget_interaction: WidgetInteractionType.WIDGET_HOVERED,
+          widget_interaction_data: {
+            suggestion_hovered: {
+              suggestion_id: id,
+            },
+          },
+        },
+      });
+    }
+
+    promptRef.current = null;
+  };
+
+  const onDrag = () => {
+    if (promptRef.current) {
+      const id = idExtractor(promptRef.current);
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget,
+          widget_interaction: WidgetInteractionType.SUGGESTION_SCROLLED,
+          widget_interaction_data: {
+            suggestion_scrolled: {
+              suggestion_id: id,
+            },
+          },
+        },
+      });
+    }
+  };
+
+  const onMouseUp = () => {
+    promptRef.current = null;
+  };
+
+  const onMouseDown = (text: string) => {
+    promptRef.current = text;
+  };
+
+  const onTouchStart = (text: string) => {
+    promptRef.current = text;
+  };
+
+  const onTouchEnd = () => {
+    promptRef.current = null;
+  };
+
+  return {
+    onClick,
+    onHover,
+    onDrag,
+    onMouseUp,
+    onMouseDown,
+    onTouchStart,
+    onTouchEnd,
+  };
+};

package/src/components/PromptCarousel/index.ts

@@ -1,3 +1,4 @@
+export { usePromptCarouselAnalytics } from './hooks/usePromptCarouselAnalytics';
 export { PromptCarousel } from './PromptCarousel';
-export type { PromptCarouselProps } from './types/types';
 export { AnimationSpeed, PromptCarouselRows } from './types/types';
+export type { PromptCarouselProps } from './types/types';

package/src/components/PromptCarousel/types/types.ts

@@ -52,6 +52,45 @@ export interface PromptCarouselProps {
    * @param text - The text of the clicked button.
    */
   handleButtonClick?: (text: string) => void;
+  /**
+   * Callback function invoked when a prompt button is hovered.
+   * @param text - The text of the hovered button.
+   */
+  handleButtonHover?: (text: string) => void;
+
+  /**
+   * Callback function invoked when a prompt button receives focus.
+   * Useful for tracking focus events from keyboard navigation or programmatic focus.
+   * @param text - The text of the focused button.
+   */
+  handleButtonFocus?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released over a prompt button.
+   * Useful for tracking completed click interactions separately from `handleButtonClick`.
+   * @param text - The text of the button where the mouse was released.
+   */
+  handleButtonMouseUp?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Useful for tracking press-and-hold or interaction-start events.
+   * @param text - The text of the button where the mouse was pressed.
+   */
+  handleButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * @param text - The text of the button where the touch started.
+   */
+  handleButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends on a prompt button.
+   * @param text - The text of the button where the touch ended.
+   */
+  handleButtonTouchEnd?: (text: string) => void;
+  /**
+   * Callback function invoked when a drag interaction occurs on the carousel or its buttons.
+   * Can be used to track swipe/drag behavior or cancel click tracking while dragging.
+   */
+  handleButtonDrag?: () => void;
   /**
    * Number of rows to display in the carousel.
    * Controls the layout behavior (always one row, always two rows, or responsive).

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cn } from '../../lib/utils.js';
+import type { RadioGroupProps, RadioGroupItemProps } from './types/index.js';
+
+const RadioGroup = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
+  RadioGroupProps
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    className={cn('envive-tw-grid envive-tw-gap-2', className)}
+    {...props}
+    ref={ref}
+  />
+));
+
+RadioGroup.displayName = 'RadioGroup';
+
+const RadioGroupItem = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'envive-tw-aspect-square envive-tw-h-4 envive-tw-w-4 envive-tw-rounded-full envive-tw-border envive-tw-border-primary envive-tw-text-primary envive-tw-ring-offset-background focus:envive-tw-outline-none focus-visible:envive-tw-ring-2 focus-visible:envive-tw-ring-ring focus-visible:envive-tw-ring-offset-2 disabled:envive-tw-cursor-not-allowed disabled:envive-tw-opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="envive-tw-flex envive-tw-items-center envive-tw-justify-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="8"
+        height="8"
+        viewBox="0 0 8 8"
+        fill="currentColor"
+      >
+        <circle cx="4" cy="4" r="4" />
+      </svg>
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+
+RadioGroupItem.displayName = 'RadioGroupItem';
+
+export { RadioGroup, RadioGroupItem };

package/src/components/RadioGroup/__tests__/RadioGroup.test.tsx

@@ -0,0 +1,105 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { RadioGroup, RadioGroupItem } from '../RadioGroup';
+
+describe('RadioGroup', () => {
+  it('should render correctly with items', () => {
+    render(
+      <RadioGroup aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" />
+        <RadioGroupItem value="b" aria-label="Option B" />
+      </RadioGroup>,
+    );
+    const radios = screen.getAllByRole('radio');
+    expect(radios).toHaveLength(2);
+  });
+
+  it('should select an item on click', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup aria-label="Options" onValueChange={onValueChange}>
+        <RadioGroupItem value="a" aria-label="Option A" />
+        <RadioGroupItem value="b" aria-label="Option B" />
+      </RadioGroup>,
+    );
+    await user.click(screen.getByRole('radio', { name: 'Option A' }));
+    expect(onValueChange).toHaveBeenCalledWith('a');
+  });
+
+  it('should render with default value', () => {
+    render(
+      <RadioGroup defaultValue="b" aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" />
+        <RadioGroupItem value="b" aria-label="Option B" />
+      </RadioGroup>,
+    );
+    const optionB = screen.getByRole('radio', { name: 'Option B' });
+    expect(optionB).toHaveAttribute('data-state', 'checked');
+  });
+
+  it('should disable all items when group is disabled', () => {
+    render(
+      <RadioGroup disabled aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" />
+        <RadioGroupItem value="b" aria-label="Option B" />
+      </RadioGroup>,
+    );
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it('should disable individual items', () => {
+    render(
+      <RadioGroup aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" disabled />
+        <RadioGroupItem value="b" aria-label="Option B" />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('radio', { name: 'Option A' })).toBeDisabled();
+    expect(
+      screen.getByRole('radio', { name: 'Option B' }),
+    ).not.toBeDisabled();
+  });
+
+  it('should forward ref on RadioGroup', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <RadioGroup ref={ref} aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" />
+      </RadioGroup>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should forward ref on RadioGroupItem', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <RadioGroup aria-label="Options">
+        <RadioGroupItem ref={ref} value="a" aria-label="Option A" />
+      </RadioGroup>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('should merge custom className on RadioGroup', () => {
+    const { container } = render(
+      <RadioGroup className="envive-tw-mt-4" aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" />
+      </RadioGroup>,
+    );
+    expect(container.firstChild).toHaveClass('envive-tw-mt-4');
+  });
+
+  it('should have proper radiogroup role', () => {
+    render(
+      <RadioGroup aria-label="Options">
+        <RadioGroupItem value="a" aria-label="Option A" />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+  });
+});

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup, RadioGroupItem } from './RadioGroup';
+export type { RadioGroupProps, RadioGroupItemProps } from './types';

package/src/components/RadioGroup/types/index.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+import type * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+export type RadioGroupProps = React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Root
+>;
+
+export type RadioGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+>;

package/src/components/Resizable/Resizable.tsx

@@ -0,0 +1,12 @@
+import type {
+  ResizablePanelGroupProps,
+  ResizableHandleProps,
+} from './types/index.js';
+
+const ResizablePanelGroup = ({ children, ...props }: ResizablePanelGroupProps) => <>{children}</>;
+
+const ResizablePanel = ({ children, ...props }: any) => <>{children}</>;
+
+const ResizableHandle = (props: ResizableHandleProps) => <>ResizableHandle</>;
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/components/Resizable/__tests__/Resizable.test.tsx

@@ -0,0 +1,136 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '../Resizable';
+
+describe('Resizable', () => {
+  it('should render a resizable panel group with panels', () => {
+    render(
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>Panel 1</div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Panel 2</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    expect(screen.getByText('Panel 1')).toBeInTheDocument();
+    expect(screen.getByText('Panel 2')).toBeInTheDocument();
+  });
+
+  it('should render handle with grip icon when withHandle is true', () => {
+    render(
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>Panel 1</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Panel 2</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    // react-resizable-panels v4 auto-assigns data-testid from its internal id,
+    // so we find the separator by role instead
+    const handle = screen.getByRole('separator');
+    expect(handle).toBeInTheDocument();
+    // The grip icon should be rendered inside the handle
+    const svg = handle.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('should render handle without grip icon when withHandle is false', () => {
+    render(
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>Panel 1</div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Panel 2</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const handle = screen.getByRole('separator');
+    expect(handle).toBeInTheDocument();
+    const svg = handle.querySelector('svg');
+    expect(svg).toBeNull();
+  });
+
+  it('should apply custom className to panel group', () => {
+    const { container } = render(
+      <ResizablePanelGroup
+        orientation="horizontal"
+        className="envive-tw-bg-red-500"
+      >
+        <ResizablePanel defaultSize={100}>
+          <div>Content</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const group = container.querySelector('[data-group]');
+    expect(group).toBeInTheDocument();
+    expect(group).toHaveClass('envive-tw-bg-red-500');
+  });
+
+  it('should render vertical panel group', () => {
+    render(
+      <ResizablePanelGroup orientation="vertical">
+        <ResizablePanel defaultSize={50}>
+          <div>Top Panel</div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Bottom Panel</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    expect(screen.getByText('Top Panel')).toBeInTheDocument();
+    expect(screen.getByText('Bottom Panel')).toBeInTheDocument();
+  });
+
+  it('should have correct accessibility attributes on handle', () => {
+    render(
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>Left</div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Right</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const handle = screen.getByRole('separator');
+    expect(handle).toHaveAttribute('role', 'separator');
+  });
+
+  it('should apply custom className to handle', () => {
+    render(
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>Left</div>
+        </ResizablePanel>
+        <ResizableHandle className="envive-tw-bg-blue-500" />
+        <ResizablePanel defaultSize={50}>
+          <div>Right</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    const handle = screen.getByRole('separator');
+    expect(handle).toHaveClass('envive-tw-bg-blue-500');
+  });
+});

package/src/components/Resizable/index.ts

@@ -0,0 +1,6 @@
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './Resizable';
+export type {
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+  ResizableHandleProps,
+} from './types/index';

package/src/components/Resizable/types/index.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+
+export type ResizablePanelGroupProps = React.ComponentProps<typeof Group>;
+
+export type ResizablePanelProps = React.ComponentProps<typeof Panel>;
+
+export interface ResizableHandleProps
+  extends React.ComponentProps<typeof Separator> {
+  withHandle?: boolean;
+}

package/src/components/ReviewCard/ReviewCard.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { ReviewCardComponents } from './components';
 import { Theme } from '../../../tokens/theme/theme';
 import { resolveTheme } from '../utils/resolveTheme';
+import { ReviewCardComponents } from './components';
 import { ReviewCardProps } from './types/types';
 
 /**
@@ -26,11 +26,18 @@ export const ReviewCard = ({
   readMoreLabel,
   readLessLabel,
   verifiedBuyerLabel,
+  onExpand,
+  onCollapse,
 }: ReviewCardProps) => {
   const finalTheme = resolveTheme(theme);
   const [isExpanded, setIsExpanded] = useState(false);
 
   const handleToggleExpand = () => {
+    if (!isExpanded) {
+      onExpand?.();
+    } else {
+      onCollapse?.();
+    }
     setIsExpanded(!isExpanded);
   };
 

package/src/components/ReviewCard/types/types.ts

@@ -59,4 +59,13 @@ export type ReviewCardProps = {
    * Text label for the "Verified Buyer" badge.
    */
   verifiedBuyerLabel?: string;
+
+  /**
+   * Callback fired when the review text is expanded.
+   */
+  onExpand?: () => void;
+  /**
+   * Callback fired when the review text is collapsed.
+   */
+  onCollapse?: () => void;
 };

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { ScrollAreaProps, ScrollBarProps } from './types/index.js';
+
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ children, ...props }, ref) => <>{children}</>,
+);
+
+ScrollArea.displayName = 'ScrollArea';
+
+const ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(
+  (props, ref) => <>ScrollBar</>,
+);
+
+ScrollBar.displayName = 'ScrollBar';
+
+export { ScrollArea, ScrollBar };

package/src/components/ScrollArea/__tests__/ScrollArea.test.tsx

@@ -0,0 +1,99 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { ScrollArea, ScrollBar } from '../ScrollArea';
+
+describe('ScrollArea', () => {
+  it('should render correctly with children', () => {
+    render(
+      <ScrollArea>
+        <div>Scrollable content</div>
+      </ScrollArea>,
+    );
+    expect(screen.getByText('Scrollable content')).toBeInTheDocument();
+  });
+
+  it('should render with custom height', () => {
+    const { container } = render(
+      <ScrollArea className="envive-tw-h-72">
+        <div>Content</div>
+      </ScrollArea>,
+    );
+    expect(container.firstChild).toHaveClass('envive-tw-h-72');
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <ScrollArea ref={ref}>
+        <div>Content</div>
+      </ScrollArea>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should merge custom className', () => {
+    const { container } = render(
+      <ScrollArea className="envive-tw-mt-4">
+        <div>Content</div>
+      </ScrollArea>,
+    );
+    expect(container.firstChild).toHaveClass('envive-tw-mt-4');
+  });
+
+  it('should render with overflow hidden', () => {
+    const { container } = render(
+      <ScrollArea>
+        <div>Content</div>
+      </ScrollArea>,
+    );
+    expect(container.firstChild).toHaveClass('envive-tw-overflow-hidden');
+  });
+
+  it('should render ScrollBar with vertical orientation by default', () => {
+    const { container } = render(
+      <ScrollArea>
+        <div>Content</div>
+      </ScrollArea>,
+    );
+    // ScrollArea includes a vertical ScrollBar by default
+    // Check for the scrollbar-related data-orientation attribute
+    const scrollbarOrViewport = container.querySelector(
+      '[data-orientation="vertical"]',
+    );
+    // If the scrollbar itself isn't rendered in jsdom, verify the ScrollArea still renders
+    if (!scrollbarOrViewport) {
+      expect(container.querySelector('[data-radix-scroll-area-viewport]')).toBeInTheDocument();
+    } else {
+      expect(scrollbarOrViewport).toBeInTheDocument();
+    }
+  });
+
+  it('should render ScrollBar with horizontal orientation', () => {
+    const { container } = render(
+      <ScrollArea>
+        <div>Content</div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>,
+    );
+    // ScrollBar renders within ScrollArea context without errors
+    // In jsdom, the scrollbar may not render visually (no real overflow),
+    // but the ScrollArea itself should render correctly
+    expect(container.firstChild).toHaveClass('envive-tw-overflow-hidden');
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('should render multiple children', () => {
+    render(
+      <ScrollArea>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </ScrollArea>,
+    );
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+  });
+});

package/src/components/ScrollArea/index.ts

@@ -0,0 +1,2 @@
+export { ScrollArea, ScrollBar } from './ScrollArea';
+export type { ScrollAreaProps, ScrollBarProps } from './types';

package/src/components/ScrollArea/types/index.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+export type ScrollAreaProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+>;
+
+export interface ScrollBarProps
+  extends React.ComponentPropsWithoutRef<
+    typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+  > {}