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

package/src/components/PromptCarousel/components/ButtonContainerRow.tsx

@@ -1,46 +0,0 @@
-import classNames from 'classnames';
-import { Stack } from '../../Stack';
-import { useGetScrollProperties } from '../hooks/useGetScrollProperties';
-
-export interface ButtonContainerRowProps {
-  children: React.ReactNode;
-  scrollRef?: React.RefObject<HTMLDivElement>;
-  stackRef?: React.RefObject<HTMLDivElement>;
-  className?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-}
-
-export const ButtonContainerRow = ({
-  children,
-  scrollRef,
-  stackRef,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-}: ButtonContainerRowProps) => {
-  const { scrollStyle, scrollClasses } = useGetScrollProperties();
-
-  return (
-    <div
-      ref={scrollRef}
-      className={classNames(...scrollClasses, className)}
-      style={scrollStyle}
-      role="group"
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      tabIndex={0}
-    >
-      <div ref={stackRef}>
-        <Stack
-          direction="row"
-          align="center"
-          gap="2"
-          className="envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap"
-        >
-          {children}
-        </Stack>
-      </div>
-    </div>
-  );
-};

package/src/components/PromptCarousel/components/CarouselContentWithBlockScroll.tsx

@@ -1,83 +0,0 @@
-import { Stack } from '../../Stack';
-import { BlockScrollContainer } from './BlockScrollContainer';
-import { RepetitionNumberSuffix } from '../types/types';
-
-export interface CarouselContentWithBlockScrollProps {
-  visibleButtonsFirstRow: string[];
-  visibleButtonsSecondRow: string[];
-  shouldShowTwoRows: boolean;
-  renderButton: (
-    text: string,
-    index: number,
-    repetitionNumber?: `${RepetitionNumberSuffix}`,
-  ) => React.ReactNode;
-  isAnimated: boolean;
-  isAnimationStopped: boolean;
-  blockScrollRef: React.RefObject<HTMLDivElement>;
-  blockFirstRowStackRef: React.RefObject<HTMLDivElement>;
-}
-
-export const CarouselContentWithBlockScroll = ({
-  visibleButtonsFirstRow,
-  visibleButtonsSecondRow,
-  shouldShowTwoRows,
-  renderButton,
-  isAnimated,
-  isAnimationStopped,
-  blockScrollRef,
-  blockFirstRowStackRef,
-}: CarouselContentWithBlockScrollProps) => {
-  const showRepetitions = isAnimated && isAnimationStopped;
-
-  const renderRowButtons = (buttons: string[], startIndex: number) => (
-    <>
-      {buttons.map((text, index) => renderButton(text, startIndex + index))}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.TWO),
-        )}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.THREE),
-        )}
-    </>
-  );
-
-  return (
-    <BlockScrollContainer
-      scrollRef={blockScrollRef}
-      aria-label="Scrollable prompt buttons"
-    >
-      <Stack
-        direction="column"
-        gap="2"
-        className="envive-tw-w-max"
-      >
-        <div
-          ref={blockFirstRowStackRef}
-          role={shouldShowTwoRows ? 'group' : undefined}
-          aria-label={shouldShowTwoRows ? 'First row of prompt buttons' : undefined}
-        >
-          <Stack
-            direction="row"
-            gap="2"
-            className="envive-tw-whitespace-nowrap"
-          >
-            {renderRowButtons(visibleButtonsFirstRow, 0)}
-          </Stack>
-        </div>
-
-        {shouldShowTwoRows && visibleButtonsSecondRow.length > 0 && (
-          <Stack
-            direction="row"
-            gap="2"
-            className="envive-tw-whitespace-nowrap"
-            aria-label="Second row of prompt buttons"
-          >
-            {renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
-          </Stack>
-        )}
-      </Stack>
-    </BlockScrollContainer>
-  );
-};

package/src/components/PromptCarousel/components/CarouselContentWithRowScroll.tsx

@@ -1,71 +0,0 @@
-import { Stack } from '../../Stack';
-import { ButtonContainerRow } from './ButtonContainerRow';
-import { RepetitionNumberSuffix } from '../types/types';
-
-export interface CarouselContentWithRowScrollProps {
-  visibleButtonsFirstRow: string[];
-  visibleButtonsSecondRow: string[];
-  shouldShowTwoRows: boolean;
-  renderButton: (
-    text: string,
-    index: number,
-    repetitionNumber?: `${RepetitionNumberSuffix}`,
-  ) => React.ReactNode;
-  isAnimated: boolean;
-  isAnimationStopped: boolean;
-  firstRowScrollRef: React.RefObject<HTMLDivElement>;
-  firstRowStackRef: React.RefObject<HTMLDivElement>;
-  secondRowScrollRef: React.RefObject<HTMLDivElement>;
-}
-
-export const CarouselContentWithRowScroll = ({
-  visibleButtonsFirstRow,
-  visibleButtonsSecondRow,
-  shouldShowTwoRows,
-  isAnimated,
-  isAnimationStopped,
-  renderButton,
-  firstRowScrollRef,
-  firstRowStackRef,
-  secondRowScrollRef,
-}: CarouselContentWithRowScrollProps) => {
-  const showRepetitions = isAnimated && !isAnimationStopped;
-
-  const renderRowButtons = (buttons: string[], startIndex: number) => (
-    <>
-      {buttons.map((text, index) => renderButton(text, startIndex + index))}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.TWO),
-        )}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.THREE),
-        )}
-    </>
-  );
-
-  return (
-    <Stack
-      direction="column"
-      gap="2"
-    >
-      <ButtonContainerRow
-        scrollRef={firstRowScrollRef}
-        stackRef={firstRowStackRef}
-        aria-label={shouldShowTwoRows ? 'First row of prompt buttons' : undefined}
-      >
-        {renderRowButtons(visibleButtonsFirstRow, 0)}
-      </ButtonContainerRow>
-
-      {shouldShowTwoRows && (
-        <ButtonContainerRow
-          scrollRef={secondRowScrollRef}
-          aria-label="Second row of prompt buttons"
-        >
-          {renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
-        </ButtonContainerRow>
-      )}
-    </Stack>
-  );
-};

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

@@ -1,9 +0,0 @@
-import { CarouselContentWithRowScroll } from './CarouselContentWithRowScroll';
-import { CarouselContentWithBlockScroll } from './CarouselContentWithBlockScroll';
-import { ButtonContainerRow } from './ButtonContainerRow';
-
-export const PromptCarouselComponents = {
-  CarouselContentWithRowScroll,
-  CarouselContentWithBlockScroll,
-  ButtonContainerRow,
-};

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

@@ -1,128 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { RepetitionNumberSuffix } from '../types/types';
-
-const getElementId = (element: Element | null): string | null => {
-  if (!element) return null;
-  return element.id?.trim() || null;
-};
-
-export function useButtonScrollPosition(
-  firstRowScrollRef: React.RefObject<HTMLDivElement>,
-  blockScrollRef: React.RefObject<HTMLDivElement>,
-  shouldUseRowScroll: boolean,
-) {
-  const savedButtonIdRef = useRef<string | null>(null);
-  const savedButtonPositionRef = useRef<number | null>(null);
-
-  const captureButtonUnderMouse = useCallback(
-    (mouseX: number, mouseY: number) => {
-      const container = firstRowScrollRef.current;
-      if (!container) return;
-
-      const containerRect = container.getBoundingClientRect();
-
-      const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
-      const targetButtonId = getElementId(elementUnderMouse);
-
-      let closestButton: HTMLElement | null = null;
-
-      if (targetButtonId) {
-        const buttonById = document.querySelector(`#${CSS.escape(targetButtonId)}`) as HTMLElement;
-        if (
-          buttonById &&
-          (elementUnderMouse === buttonById || buttonById.contains(elementUnderMouse as Node))
-        ) {
-          closestButton = buttonById;
-        }
-      }
-
-      if (!closestButton) {
-        const buttons = Array.from(container.querySelectorAll('button')) as HTMLElement[];
-        let closestDistance = Infinity;
-
-        for (const button of buttons) {
-          const buttonRect = button.getBoundingClientRect();
-
-          if (
-            mouseX >= buttonRect.left &&
-            mouseX <= buttonRect.right &&
-            mouseY >= buttonRect.top &&
-            mouseY <= buttonRect.bottom
-          ) {
-            closestButton = button;
-            break;
-          }
-
-          const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-          const buttonCenterY = buttonRect.top + buttonRect.height / 2;
-          const distance = Math.sqrt((mouseX - buttonCenterX) ** 2 + (mouseY - buttonCenterY) ** 2);
-
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            closestButton = button;
-          }
-        }
-      }
-
-      if (closestButton) {
-        const id = getElementId(closestButton);
-        if (id) {
-          savedButtonIdRef.current = id;
-          const buttonRect = closestButton.getBoundingClientRect();
-          savedButtonPositionRef.current = buttonRect.left - containerRect.left;
-        }
-      }
-    },
-    [firstRowScrollRef],
-  );
-
-  useEffect(() => {
-    if (
-      shouldUseRowScroll ||
-      !blockScrollRef.current ||
-      !savedButtonIdRef.current ||
-      savedButtonPositionRef.current === null
-    ) {
-      return;
-    }
-
-    const container = blockScrollRef.current;
-    const targetId = savedButtonIdRef.current.trim();
-    const targetPosition = savedButtonPositionRef.current;
-
-    const getScrollId = (id: string) => {
-      if (id.endsWith(RepetitionNumberSuffix.TWO)) {
-        return id;
-      }
-
-      if (id.endsWith(RepetitionNumberSuffix.THREE)) {
-        return `${id.slice(0, -2)}${RepetitionNumberSuffix.TWO}`;
-      }
-
-      return `${id}${RepetitionNumberSuffix.TWO}`;
-    };
-
-    const applyScroll = () => {
-      const finalId = getScrollId(targetId);
-      const targetButton = container.querySelector(`#${CSS.escape(`${finalId}`)}`) as HTMLElement;
-      const scrollableContent = container.firstElementChild as HTMLElement;
-
-      if (!targetButton || !scrollableContent) return;
-
-      const contentRect = scrollableContent.getBoundingClientRect();
-      const buttonRect = targetButton.getBoundingClientRect();
-      const buttonPositionInContent = buttonRect.left - contentRect.left + container.scrollLeft;
-      const newScrollLeft = buttonPositionInContent - targetPosition;
-
-      container.scrollLeft = Math.max(0, newScrollLeft);
-    };
-
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(applyScroll);
-      });
-    });
-  }, [shouldUseRowScroll, blockScrollRef]);
-
-  return { captureButtonUnderMouse };
-}

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

@@ -1,47 +0,0 @@
-import { useCallback, useState } from 'react';
-import { AnimationSpeed } from '../types/types';
-import { useButtonScrollPosition } from './useButtonScrollPosition';
-import { useHorizontalScrollAnimation } from './useHorizontalScrollAnimation';
-
-interface UseCarouselAnimationProps {
-  firstRowScrollRef: React.RefObject<HTMLDivElement>;
-  blockScrollRef: React.RefObject<HTMLDivElement>;
-  scrollRefs: React.RefObject<HTMLDivElement>[];
-  animationSpeed: `${AnimationSpeed}`;
-  isAnimated: boolean;
-}
-
-export const useCarouselAnimation = ({
-  firstRowScrollRef,
-  blockScrollRef,
-  scrollRefs,
-  animationSpeed,
-  isAnimated,
-}: UseCarouselAnimationProps) => {
-  const [isAnimationStopped, setIsAnimationStopped] = useState(false);
-  const shouldUseRowScroll = isAnimated && !isAnimationStopped;
-
-  const { captureButtonUnderMouse } = useButtonScrollPosition(
-    firstRowScrollRef,
-    blockScrollRef,
-    shouldUseRowScroll,
-  );
-
-  const onStopAll = useCallback(
-    (mouseX?: number, mouseY?: number) => {
-      if (mouseX !== undefined && mouseY !== undefined) {
-        captureButtonUnderMouse(mouseX, mouseY);
-      }
-      setIsAnimationStopped(true);
-    },
-    [captureButtonUnderMouse],
-  );
-
-  useHorizontalScrollAnimation(
-    scrollRefs,
-    onStopAll,
-    shouldUseRowScroll ? animationSpeed : AnimationSpeed.NONE,
-  );
-
-  return { isAnimationStopped, shouldUseRowScroll };
-};

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

@@ -1,27 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-interface UseCarouselRefsProps {
-  shouldShowTwoRows: boolean;
-}
-
-export const useCarouselRefs = ({ shouldShowTwoRows }: UseCarouselRefsProps) => {
-  const firstRowScrollRef = useRef<HTMLDivElement>(null);
-  const firstRowStackRef = useRef<HTMLDivElement>(null);
-  const secondRowScrollRef = useRef<HTMLDivElement>(null);
-  const blockScrollRef = useRef<HTMLDivElement>(null);
-  const blockFirstRowStackRef = useRef<HTMLDivElement>(null);
-
-  const scrollRefs = useMemo(
-    () => (shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef]),
-    [shouldShowTwoRows],
-  );
-
-  return {
-    firstRowScrollRef,
-    firstRowStackRef,
-    secondRowScrollRef,
-    blockScrollRef,
-    blockFirstRowStackRef,
-    scrollRefs,
-  };
-};