@envive-ai/react-toolkit-v3 0.3.7 → 0.3.9

package/src/components/ProductCard/components/Carousel.tsx

@@ -0,0 +1,26 @@
+import { PromptCarousel, PromptCarouselRows } from '../../PromptCarousel';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { useGetCarouselProperties } from '../hooks/useGetCarouselProperties';
+import { CarouselProps } from '../types';
+
+export const Carousel = ({
+  theme,
+  carouselId,
+  prompts,
+  promptButtonType,
+  onSelect,
+}: CarouselProps) => {
+  const resolvedTheme = resolveTheme(theme);
+  const { carouselClasses } = useGetCarouselProperties();
+  return (
+    <PromptCarousel
+      className={carouselClasses}
+      handleButtonClick={onSelect}
+      id={carouselId}
+      promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+      theme={resolvedTheme}
+      promptButtonType={promptButtonType}
+      promptButtonTexts={prompts}
+    />
+  );
+};

package/src/components/ProductCard/components/Header.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { AnimatedText } from '../../AnimatedText';
+import { Stack } from '../../Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+import { useGetHeaderProperties } from '../hooks/useGetHeaderProperties';
+import { HeaderProps } from '../types';
+
+export const Header = ({
+  headline,
+  italicizeHeadline,
+  animatedText,
+  textTypingDuration,
+  textTransition,
+  loop,
+}: HeaderProps) => {
+  const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
+
+  const animatedTextWrapper = useCallback(
+    (text: string) => (
+      <Typography
+        variant={TypographyVariant.B3_MD}
+        color={TypographyColor.TEXT_LIGHT}
+        numberOfLines={2}
+      >
+        {text}
+      </Typography>
+    ),
+    [],
+  );
+
+  return (
+    <Stack
+      gap={1}
+      className={stackClasses}
+    >
+      <Typography
+        variant={TypographyVariant.H1_MD}
+        color={TypographyColor.TEXT_LIGHT}
+        className={headlineClasses}
+        numberOfLines={2}
+      >
+        {headline}
+      </Typography>
+      {animatedText.length > 0 && (
+        <AnimatedText
+          sequence={animatedText}
+          getNodeWrapper={animatedTextWrapper}
+          typingDuration={textTypingDuration}
+          transition={textTransition}
+          loop={loop}
+        />
+      )}
+    </Stack>
+  );
+};

package/src/components/ProductCard/components/Poster.tsx

@@ -0,0 +1,15 @@
+import { Container } from '../../Container';
+import { useGetPosterProperties } from '../hooks/useGetPosterProperties';
+import { PosterProps } from '../types';
+
+export const Poster = ({ children, imageSrc, fallbackColor }: PosterProps) => {
+  const { containerStyles, containerClasses } = useGetPosterProperties(imageSrc, fallbackColor);
+  return (
+    <Container
+      className={containerClasses}
+      style={containerStyles}
+    >
+      {children}
+    </Container>
+  );
+};

package/src/components/ProductCard/components/index.ts

@@ -0,0 +1,9 @@
+import { Carousel } from './Carousel';
+import { Header } from './Header';
+import { Poster } from './Poster';
+
+export const ProductCardWidgetComponents = {
+  Poster,
+  Header,
+  Carousel,
+};

package/src/components/ProductCard/hooks/useGetCarouselProperties.ts

@@ -0,0 +1,7 @@
+export const useGetCarouselProperties = () => {
+  const carouselClasses = 'envive-tw-mb-4';
+
+  return {
+    carouselClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetHeaderProperties.ts

@@ -0,0 +1,9 @@
+export const useGetHeaderProperties = (italicizeHeadline: boolean) => {
+  const stackClasses = 'envive-tw-mb-6';
+  const headlineClasses = italicizeHeadline ? 'envive-tw-italic' : '';
+
+  return {
+    stackClasses,
+    headlineClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetInputProperties.ts

@@ -0,0 +1,22 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { TypographyColor } from '../../Typography';
+
+const inputContainer = {
+  [Theme.STANDARD]: 'envive-tw-bg-background-light',
+  [Theme.MODERN]: 'envive-tw-bg-background-light !envive-tw-rounded-0',
+};
+
+const inputPlaceholder = {
+  [Theme.STANDARD]: TypographyColor.TEXT_SECONDARY,
+  [Theme.MODERN]: TypographyColor.TEXT_SECONDARY,
+  [Theme.MINIMAL]: TypographyColor.TEXT_LIGHT,
+};
+
+export const useGetInputProperties = (theme: Theme) => {
+  const containerClasses = inputContainer[theme];
+  const placeholderClasses = inputPlaceholder[theme];
+  return {
+    containerClasses,
+    placeholderClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetPosterProperties.ts

@@ -0,0 +1,19 @@
+const OVERLAY_OPACITY = '60'; // 60%
+
+export const useGetPosterProperties = (imageSrc: string, fallbackColor: string) => {
+  const overlayColor = `#000000${OVERLAY_OPACITY}`;
+  const bgColor = fallbackColor || 'black';
+  const containerStyles: React.CSSProperties = {
+    background: imageSrc
+      ? `linear-gradient(${overlayColor}, ${overlayColor}) 0% 0%/cover, url('${imageSrc}') 50% 0%/cover`
+      : bgColor,
+  };
+
+  const containerClasses =
+    'envive-tw-px-4 envive-tw-py-10 envive-tw-w-full envive-tw-h-full envive-tw-flex envive-tw-flex-col envive-tw-justify-center';
+
+  return {
+    containerStyles,
+    containerClasses,
+  };
+};

package/src/components/ProductCard/index.ts

@@ -0,0 +1,2 @@
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps } from './types';

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptButtonVariant } from '../../PromptButton';
+
+/**
+ * Props for the Carousel component.
+ */
+export interface CarouselProps {
+  /** Visual theme configuration for styling the carousel. */
+  theme: Theme;
+  /** Array of prompt strings to display in the carousel. */
+  prompts: string[];
+  /** Visual variant/style of the prompt buttons. */
+  promptButtonType: PromptButtonVariant;
+  /** Unique identifier for the carousel instance. */
+  carouselId: string;
+  /**
+   * Callback function invoked when a prompt is selected.
+   */
+  onSelect: (prompt: string) => void;
+}
+
+/**
+ * Props for the Header component.
+ */
+export interface HeaderProps {
+  /** Main headline text to display. */
+  headline: string;
+  /** Whether to apply italic styling to the headline. */
+  italicizeHeadline?: boolean;
+  /** Array of text strings to animate/type. */
+  animatedText: string[];
+  /** Duration in milliseconds for the typing animation. */
+  textTypingDuration?: number;
+  /** Duration in milliseconds for text transitions. */
+  textTransition?: number;
+  /** Whether the animation should loop continuously. */
+  loop?: boolean;
+}
+
+/**
+ * Props for the Poster component.
+ */
+export interface PosterProps {
+  /** React node(s) to render as children. */
+  children?: React.ReactNode;
+  /** Source URL or path for the poster image. */
+  imageSrc: string;
+  /** Fallback background color to display if the image fails to load. */
+  fallbackColor?: string;
+}
+
+/**
+ * Props for the Input component.
+ */
+export interface InputProps {
+  /** Visual theme configuration for styling the input. */
+  theme: Theme;
+  /** Callback function invoked when the input is clicked. */
+  onInputClick: () => void;
+  /** Placeholder text displayed in the input field. */
+  placeholder?: string;
+}
+
+/**
+ * Props for the InputIcon component.
+ */
+export interface InputIconProps {
+  /** Visual theme configuration for styling the input icon. */
+  theme: Theme;
+}
+
+/**
+ * Props for the ProductCard component.
+ * Combines props from Input, Carousel, Header, and Poster components.
+ * Excludes the 'children' prop from PosterProps.
+ */
+export interface ProductCardProps
+  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}

package/src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx

@@ -22,8 +22,10 @@ export const PromptButtonCarouselWithImage = ({
 }: PromptButtonCarouselWithImageProps) => {
   const finalTheme = resolveTheme(theme);
 
-  if (promptButtonsTexts && promptButtonsTexts?.length !== 3) {
-    throw new Error('PromptButtonsCarouselWithImage: promptButtonsTexts must be equal to 3');
+  if (promptButtonsTexts && promptButtonsTexts?.length < 3) {
+    throw new Error(
+      'PromptButtonsCarouselWithImage: promptButtonsTexts must have at least 3 items',
+    );
   }
 
   return (
@@ -37,6 +39,7 @@ export const PromptButtonCarouselWithImage = ({
         <PromptButtonCarouselWithImageComponents.TextField
           isLoading={isLoading}
           placeholder={textFieldPlaceholder}
+          className={finalTheme === Theme.MINIMAL ? '!envive-tw-border-border-medium' : undefined}
           onClick={() => handleTextFieldClick(textFieldPlaceholder)}
           theme={finalTheme}
         />
@@ -52,7 +55,7 @@ export const PromptButtonCarouselWithImage = ({
         <PromptButtonCarouselWithImageComponents.PromptButtonsCarousel
           theme={finalTheme}
           isLoading={isLoading}
-          promptButtonsTexts={promptButtonsTexts}
+          promptButtonsTexts={promptButtonsTexts || []}
           promptButtonType={promptButtonType}
           handlePromptButtonClick={handlePromptButtonClick}
         />

package/src/components/PromptButtonCarouselWithImage/components/Layout.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { cloneElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 import { useGetContentSize } from '../../utils/useGetContentSize';
 import { calculateWidthImageGallery } from '../../SocialProof/utils/functions';
 import { Stack } from '../../Stack';
@@ -7,6 +7,7 @@ import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { ImageProps } from './Image';
 import { WidgetTextFieldProps } from '../../WidgetTextField/types/types';
 import { useHorizontalWheelScroll } from '../../utils/useHorizontalWheelScroll';
+import { useDragToScroll } from '../../utils/useDragToScroll';
 
 type LayoutProps = {
   id: string;
@@ -36,6 +37,10 @@ export const Layout = ({
     heightDefault: 245,
   });
   const wheelScrollRef = useHorizontalWheelScroll(!isMobile);
+  useDragToScroll(wheelScrollRef, {
+    direction: isMobile ? 'y' : 'x',
+    isEnabled: true,
+  });
 
   const combinedRef = (node: HTMLDivElement | null) => {
     contentSizeRef.current = node;
@@ -73,19 +78,23 @@ export const Layout = ({
             }}
             gap={4}
             className={classNames(
-              '[&::-webkit-scrollbar]:hidden envive-tw-h-fit envive-tw-scroll-smooth',
+              '[&::-webkit-scrollbar]:hidden envive-tw-h-fit',
               isMobile ? 'envive-tw-w-full envive-tw-overflow-y-auto' : 'envive-tw-overflow-x-auto',
               isMobile || hideTextField
                 ? 'envive-tw-w-full'
-                : 'envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[700px]',
+                : 'envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[900px]',
             )}
           >
             {promptButtons}
           </Stack>
         </Stack>
         {!hideTextField &&
+          isValidElement(textField) &&
           cloneElement(textField as React.ReactElement<WidgetTextFieldProps>, {
-            className: isMobile ? 'envive-tw-w-full' : 'envive-tw-min-w-[276px]',
+            className: classNames(
+              isMobile ? 'envive-tw-w-full' : 'envive-tw-min-w-[276px]',
+              (textField as React.ReactElement<WidgetTextFieldProps>).props.className,
+            ),
           })}
       </Stack>
     </Stack>

package/src/components/PromptButtonCarouselWithImage/components/PromptButtonsCarousel.tsx

@@ -1,6 +1,8 @@
 import { Theme } from '../../../../tokens/theme/theme';
 import { PromptButton, PromptButtonVariant } from '../../PromptButton';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { Stack } from '../../Stack';
 
 type PromptButtonsCarouselProps = {
   theme: Theme;
@@ -10,6 +12,25 @@ type PromptButtonsCarouselProps = {
   handlePromptButtonClick: (text: string) => void;
 };
 
+function distributeInThreeRows<T>(items: T[]): [T[], T[], T[]] {
+  const n = items.length;
+  const perRow = [1, 1, 1];
+  let remaining = Math.max(0, n - 3);
+  let idx = 0;
+  while (remaining > 0) {
+    perRow[idx % 3] += 1;
+    remaining -= 1;
+    idx += 1;
+  }
+  let start = 0;
+  const [row0, row1, row2] = perRow.map(count => {
+    const row = items.slice(start, start + count);
+    start += count;
+    return row;
+  });
+  return [row0, row1, row2];
+}
+
 export const PromptButtonsCarousel = ({
   theme,
   isLoading,
@@ -18,29 +39,51 @@ export const PromptButtonsCarousel = ({
   handlePromptButtonClick,
 }: PromptButtonsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
+  const { isMobile } = useCheckIsMobile();
 
   const promptButtonsTextsFinal = isLoading
     ? ['Loading 1...', 'Loading 2...', 'Loading 3...']
-    : promptButtonsTexts;
+    : promptButtonsTexts || [];
 
-  return (
-    <>
-      {promptButtonsTextsFinal.map(text => (
-        <div
-          key={text}
-          className="envive-tw-flex-shrink-0"
-        >
-          <PromptButton
-            id={`prompt-button-${text}`}
-            isLoading={isLoading}
-            label={text}
-            variant={promptButtonType}
-            className="envive-tw-w-fit"
-            theme={finalTheme}
-            onClick={() => handlePromptButtonClick(text)}
-          />
-        </div>
-      ))}
-    </>
+  const renderButton = (text: string) => (
+    <div
+      key={text}
+      className="envive-tw-flex-shrink-0"
+    >
+      <PromptButton
+        id={`prompt-button-${text}`}
+        isLoading={isLoading}
+        label={text}
+        variant={promptButtonType}
+        className="envive-tw-w-fit"
+        theme={finalTheme}
+        onClick={() => handlePromptButtonClick(text)}
+      />
+    </div>
   );
+
+  if (isMobile) {
+    const [row0, row1, row2] = distributeInThreeRows(promptButtonsTextsFinal);
+    const rows = [row0, row1, row2].filter(row => row.length > 0);
+    return (
+      <Stack
+        direction="column"
+        gap="4"
+        className="envive-tw-w-full"
+      >
+        {rows.map(row => (
+          <Stack
+            key={row.join('-')}
+            direction="row"
+            gap="4"
+            className="envive-tw-w-full envive-tw-flex-nowrap"
+          >
+            {row.map(renderButton)}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  }
+
+  return <>{promptButtonsTextsFinal.map(renderButton)}</>;
 };

package/src/components/PromptCarousel/PromptCarousel.tsx

@@ -1,18 +1,14 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
+import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { Theme } from '../../../tokens/theme/theme';
 import { PromptButton, PromptButtonVariant } from '../PromptButton';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
-import {
-  AnimationSpeed,
-  PromptCarouselProps,
-  PromptCarouselRows,
-  RepetitionNumberSuffix,
-} from './types/types';
-import { useCarouselAnimation, useCarouselButtons, useCarouselRefs } from './hooks';
-import { PromptCarouselComponents } from './components';
+import { AnimationSpeed, PromptCarouselProps, PromptCarouselRows } from './types/types';
+import { useCarouselButtons, useCoordinatedScrollAnimation, useScrollSync } from './hooks';
 import { Container } from '../Container';
 import { isAnimated, removeSpaces, shouldShowTwoRows } from './utils/functions';
 import { resolveTheme } from '../utils/resolveTheme';
+import { Stack } from '../Stack';
 
 export const PromptCarousel = ({
   id,
@@ -37,21 +33,39 @@ export const PromptCarousel = ({
   const shouldShowTwoRowsValue = shouldShowTwoRows(promptCarouselRows, isMobile);
   const finalTheme = resolveTheme(theme);
 
-  const {
-    firstRowScrollRef,
-    firstRowStackRef,
-    secondRowScrollRef,
-    blockScrollRef,
-    blockFirstRowStackRef,
-    scrollRefs,
-  } = useCarouselRefs({ shouldShowTwoRows: shouldShowTwoRowsValue });
+  const { ref: dragScrollRef1 } = useScrollContainer();
+  const { ref: dragScrollRef2 } = useScrollContainer();
+  const scrollContainerRef1 = useRef<HTMLDivElement>(null);
+  const scrollContainerRef2 = useRef<HTMLDivElement>(null);
 
-  const { isAnimationStopped, shouldUseRowScroll } = useCarouselAnimation({
-    firstRowScrollRef,
-    blockScrollRef,
-    scrollRefs,
+  const setRef1 = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef1 === 'function') dragScrollRef1(el);
+      scrollContainerRef1.current = el;
+    },
+    [dragScrollRef1],
+  );
+
+  const setRef2 = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef2 === 'function') dragScrollRef2(el);
+      scrollContainerRef2.current = el;
+    },
+    [dragScrollRef2],
+  );
+
+  const scrollContainerRefs = shouldShowTwoRowsValue
+    ? [scrollContainerRef1, scrollContainerRef2]
+    : [scrollContainerRef1];
+
+  useCoordinatedScrollAnimation({
+    scrollContainerRefs,
     animationSpeed,
-    isAnimated: isAnimatedValue,
+  });
+
+  useScrollSync({
+    scrollContainerRefs,
+    enabled: true,
   });
 
   const { visibleButtonsFirstRow, visibleButtonsSecondRow } = useCarouselButtons({
@@ -60,11 +74,12 @@ export const PromptCarousel = ({
   });
 
   const renderButton = useCallback(
-    (text: string, index: number, repetitionNumber: `${RepetitionNumberSuffix}` = undefined) => {
+    (text: string, index: number, duplicateIndex = 0) => {
       const textWithoutSpaces = removeSpaces(text);
-      const buttonId = repetitionNumber
-        ? `${id}-${textWithoutSpaces}${repetitionNumber}`
-        : `${id}-${textWithoutSpaces}`;
+      const buttonId =
+        duplicateIndex > 0
+          ? `${id}-${textWithoutSpaces}-duplicate-${duplicateIndex}`
+          : `${id}-${textWithoutSpaces}`;
       const buttonKey = `button-${buttonId}`;
 
       return (
@@ -75,7 +90,7 @@ export const PromptCarousel = ({
           variant={promptButtonType}
           theme={finalTheme}
           isLoading={isLoading}
-          bold={boldFirstButton && index === 0}
+          bold={boldFirstButton && index === 0 && duplicateIndex === 0}
           onClick={() => handleButtonClick?.(text)}
         />
       );
@@ -83,6 +98,14 @@ export const PromptCarousel = ({
     [id, promptButtonType, boldFirstButton, handleButtonClick, isLoading, finalTheme],
   );
 
+  const renderButtonRow = (buttons: string[], startIndex: number) => (
+    <>
+      {buttons.map((text, i) => renderButton(text, startIndex + i, 0))}
+      {isAnimatedValue && buttons.map((text, i) => renderButton(text, startIndex + i, 1))}
+      {isAnimatedValue && buttons.map((text, i) => renderButton(text, startIndex + i, 2))}
+    </>
+  );
+
   const defaultAriaLabel = ariaLabel || 'Prompt carousel with suggested actions';
 
   return (
@@ -98,30 +121,44 @@ export const PromptCarousel = ({
       aria-busy={isLoading}
       aria-live={isAnimatedValue && !isLoading ? 'polite' : undefined}
     >
-      {shouldUseRowScroll ? (
-        <PromptCarouselComponents.CarouselContentWithRowScroll
-          visibleButtonsFirstRow={visibleButtonsFirstRow}
-          visibleButtonsSecondRow={visibleButtonsSecondRow}
-          shouldShowTwoRows={shouldShowTwoRowsValue}
-          renderButton={renderButton}
-          isAnimated={isAnimatedValue}
-          isAnimationStopped={isAnimationStopped}
-          firstRowScrollRef={firstRowScrollRef}
-          firstRowStackRef={firstRowStackRef}
-          secondRowScrollRef={secondRowScrollRef}
-        />
-      ) : (
-        <PromptCarouselComponents.CarouselContentWithBlockScroll
-          visibleButtonsFirstRow={visibleButtonsFirstRow}
-          visibleButtonsSecondRow={visibleButtonsSecondRow}
-          shouldShowTwoRows={shouldShowTwoRowsValue}
-          renderButton={renderButton}
-          isAnimated={isAnimatedValue}
-          isAnimationStopped={isAnimationStopped}
-          blockScrollRef={blockScrollRef}
-          blockFirstRowStackRef={blockFirstRowStackRef}
-        />
-      )}
+      <Stack
+        direction="column"
+        gap="2"
+      >
+        <div
+          className="envive-tw-no-scrollbar envive-tw-relative envive-tw-w-full envive-tw-overflow-x-scroll"
+          ref={setRef1}
+          style={{ cursor: 'grab', userSelect: 'none' }}
+        >
+          <div className="envive-tw-relative envive-tw-inline-block envive-tw-whitespace-nowrap">
+            <Stack
+              direction="row"
+              gap="2"
+              className="envive-tw-pl-0 envive-tw-h-full envive-tw-items-center"
+            >
+              {renderButtonRow(visibleButtonsFirstRow, 0)}
+            </Stack>
+          </div>
+        </div>
+
+        {shouldShowTwoRowsValue && (
+          <div
+            className="envive-tw-no-scrollbar envive-tw-relative envive-tw-w-full envive-tw-overflow-x-scroll"
+            ref={setRef2}
+            style={{ cursor: 'grab', userSelect: 'none' }}
+          >
+            <div className="envive-tw-relative envive-tw-inline-block envive-tw-whitespace-nowrap">
+              <Stack
+                direction="row"
+                gap="2"
+                className="envive-tw-pl-0 envive-tw-h-full envive-tw-items-center"
+              >
+                {renderButtonRow(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
+              </Stack>
+            </div>
+          </div>
+        )}
+      </Stack>
     </Container>
   );
 };

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

@@ -1,5 +1,3 @@
-export { useHorizontalScrollAnimation } from './useHorizontalScrollAnimation';
-export { useButtonScrollPosition } from './useButtonScrollPosition';
-export { useCarouselRefs } from './useCarouselRefs';
 export { useCarouselButtons } from './useCarouselButtons';
-export { useCarouselAnimation } from './useCarouselAnimation';
+export { useCoordinatedScrollAnimation } from './useCoordinatedScrollAnimation';
+export { useScrollSync } from './useScrollSync';