@envive-ai/react-widgets 0.1.1 → 0.1.2-arthur-2

package/src/SuggestionButtonContainer/SuggestionButtonContainer.tsx

@@ -0,0 +1,141 @@
+import { useRef } from 'react';
+import { SuggestionButton } from '@envive-ai/react-toolkit/SuggestionButton';
+import { SpiffyWidgets } from '@envive-ai/react-hooks/application/models';
+import { SUGGESTION_BAR_BUTTON_TESTID } from '@envive-ai/react-hooks/config';
+import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks/IsSmallScreen';
+import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
+import { useHorizontalScrollAnimation } from 'src/util/useHorizontalScrollAnimation';
+import { SuggestionButtonContainerProps } from './types';
+
+// ButtonContainer props
+interface ButtonContainerProps {
+  children: React.ReactNode;
+}
+
+// ButtonContainer is reused twice within SuggestionBarV2, so we declare it as a seperate functional component
+function ButtonContainer({ children }: ButtonContainerProps) {
+  return (
+    <div
+      className="spiffy-tw-flex 
+      spiffy-tw-flex-row
+      spiffy-tw-items-center
+      spiffy-tw-space-x-2
+      spiffy-tw-h-full
+      spiffy-tw-pl-0"
+    >
+      {children}
+    </div>
+  );
+}
+
+
+const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
+  buttonVariation,
+  hoverButtonVariation,
+  buttonTexts,
+  boldFirstButton = false,
+  twoRowsOnMobile = false,
+  animationSpeed = 'none',
+  buttonBorderRadius = 'lg',
+  scrollContainerRef,
+  onButtonClick,
+}: Readonly<SuggestionButtonContainerProps>) => {
+  // Refs
+  const componentVisibleTriggerRef = useRef<HTMLDivElement>(null);
+
+  // Hooks
+  useHorizontalScrollAnimation({
+    scrollContainerRef,
+    animationSpeed,
+  })
+  const isSmallScreen = useIsSmallScreen();
+
+  const isAnimated = animationSpeed !== 'none';
+
+  // Track component visibility
+  useTrackComponentVisibleEvent(
+    SpiffyWidgets.SuggestionBar,
+    componentVisibleTriggerRef,
+    { animated: isAnimated },
+  );
+
+  const visibleButtonsFirstRow = buttonTexts.slice(
+    0,
+    twoRowsOnMobile && isSmallScreen ? Math.ceil((buttonTexts.length + 1) / 2) : undefined,
+  );
+
+  const visibleButtonsSecondRow = buttonTexts.slice(
+    Math.ceil((buttonTexts.length + 1) / 2),
+    buttonTexts.length,
+  );
+
+  return (
+    <div className="spiffy-tw-overflow-x-scroll spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-whitespace-nowrap">
+      <ButtonContainer>
+        {visibleButtonsFirstRow.map((suggestion, i) => (
+          <SuggestionButton
+            key={i}
+            variant={buttonVariation}
+            hoverVariant={hoverButtonVariation}
+            isDisabled={false}
+            content={suggestion}
+            boldText={boldFirstButton && i === 0}
+            borderRadius={buttonBorderRadius}
+            onClick={() => onButtonClick(suggestion)}
+            dataTestId={SUGGESTION_BAR_BUTTON_TESTID}
+          />
+        ))}
+
+        {isAnimated &&
+          buttonTexts.map((suggestion, i) => (
+            <SuggestionButton
+              key={`animation-dupe-${i}`}
+              variant={buttonVariation}
+              hoverVariant={hoverButtonVariation}
+              isDisabled={false}
+              content={suggestion}
+              boldText={boldFirstButton && i === 0}
+              borderRadius={buttonBorderRadius}
+              onClick={() => onButtonClick(suggestion)}
+              dataTestId={SUGGESTION_BAR_BUTTON_TESTID}
+            />
+          ))}
+      </ButtonContainer>
+      {twoRowsOnMobile && isSmallScreen && (
+        <div className="spiffy-tw-mt-1.5">
+          <ButtonContainer>
+            {visibleButtonsSecondRow.map((suggestion, i) => (
+              <SuggestionButton
+                key={i}
+                variant={buttonVariation}
+                hoverVariant={hoverButtonVariation}
+                isDisabled={false}
+                content={suggestion}
+                boldText={boldFirstButton && i === 0}
+                borderRadius={buttonBorderRadius}
+                onClick={() => onButtonClick(suggestion)}
+                dataTestId={SUGGESTION_BAR_BUTTON_TESTID}
+              />
+            ))}
+            {isAnimated &&
+              visibleButtonsSecondRow.map((suggestion, i) => (
+                <SuggestionButton
+                  key={`animation-dupe-${i}`}
+                  variant={buttonVariation}
+                  hoverVariant={hoverButtonVariation}
+                  isDisabled={false}
+                  content={suggestion}
+                  boldText={boldFirstButton && i === 0}
+                  borderRadius={buttonBorderRadius}
+                  onClick={() => onButtonClick(suggestion)}
+                  dataTestId={SUGGESTION_BAR_BUTTON_TESTID}
+                />
+              ))}
+          </ButtonContainer>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { SuggestionButtonContainer };

package/src/SuggestionButtonContainer/index.ts

@@ -0,0 +1,2 @@
+export * from './SuggestionButtonContainer';
+export * from './types';

package/src/SuggestionButtonContainer/types.ts

@@ -0,0 +1,16 @@
+import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
+import { TestProps } from "@envive-ai/react-hooks/types";
+
+
+// SuggestionButtonContainer Props
+export interface SuggestionButtonContainerProps extends TestProps {
+  buttonVariation: SuggestionButtonVariant;
+  hoverButtonVariation: SuggestionButtonVariant;
+  buttonTexts: string[];
+  onButtonClick: (text: string) => void;
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  boldFirstButton?: boolean | undefined;
+  twoRowsOnMobile?: boolean | undefined;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+  buttonBorderRadius?: 'sm' | 'md' | 'lg';
+}

package/src/stories/SearchZeroState.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SearchZeroState } from 'src/SearchZeroState';
+import { SearchEntryPointWidgetConfig, WidgetType } from '@envive-ai/react-hooks/contexts/types';
+
+const meta = {
+  title: 'Widgets/Search/SearchZeroState',
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    searchInputVariant: 'standard',
+    searchBoxPlaceholder: '',
+    widgetConfigId: '',
+    type: WidgetType.SearchZeroStateEntryPoint,
+    searchZeroStateVariant: 'backgroundTertiary',
+    suggestionButtonConfig: {
+      variant: 'primary',
+      hoverVariant: 'primary',
+      borderRadius: 'sm',
+    },
+    layout: 'input',
+    initialIsOpen: false,
+  },
+  argTypes: {
+    initialIsOpen: {
+      control: 'boolean',
+    },
+    searchZeroStateVariant: {
+      control: 'select',
+      options: ['backgroundTertiary', 'backgroundPrimary', 'backgroundSecondary', 'backgroundQuaternary'],
+    },
+  },
+  render: (args: SearchEntryPointWidgetConfig & { initialIsOpen: boolean }) => (
+    <SearchZeroState widgetConfig={{ ...args }} initialIsOpen={args.initialIsOpen} />
+  ),
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/SuggestionBar.stories.tsx

@@ -0,0 +1,46 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { SuggestionBar, SuggestionBarLocationForMetrics } from 'src/SuggestionBar';
+
+const meta: Meta<typeof SuggestionBar> = {
+  title: 'Common/SuggestionBar',
+  component: SuggestionBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    animationSpeed: {
+      control: 'select',
+      options: ['none', 'standard', 'slow'],
+    },
+  },
+  render: (args) => (
+    <div style={{ width: '300px', height: '100px' }}>
+      <SuggestionBar {...args} />
+    </div>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof SuggestionBar>;
+
+export const Default: Story = {
+  args: {
+    id: 'suggestion-bar',
+    locationForMetrics: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+    buttonTexts: ['Button 1', 'Button 2', 'Button 3'],
+    buttonVariation: 'primary',
+    hoverButtonVariation: 'primary',
+    animationSpeed: 'none',
+    handleReply: () => {},
+    boldFirstButton: false,
+  },
+  
+};
+
+export const Animated: Story = {
+  args: {
+    ...Default.args,
+    animationSpeed: 'standard',
+  },
+};

package/src/util/useHorizontalScrollAnimation.ts

@@ -0,0 +1,121 @@
+import { useEffect, RefObject, useRef } from 'react';
+import { useReducedMotionWithOverride } from 'src/util/useReducedMotionWithOverride';
+
+// IMPORTANT: All refs passed to this hook must be mutable (not Readonly)
+interface UseHorizontalScrollAnimationOptions {
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+}
+
+// When using this hook, ensure that scrouuContainerRef is not undefined. It is allowed to
+// prevent issued elsewhere in the codebase, but it should be dealt with whenever you use this hook.
+export function useHorizontalScrollAnimation({
+  scrollContainerRef,
+  animationSpeed = 'standard',
+}: UseHorizontalScrollAnimationOptions): void {
+  const reducedMotion = useReducedMotionWithOverride();
+  const resumeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollAnimationRef = useRef<number | null>(null);
+
+  const pauseOnHover = true; // This is unlikely to need to be configurable but I'm throwing it up here just in case.
+
+  // Animation constants: time-based
+  let PIXELS_PER_SECOND = 40;
+  switch (animationSpeed) {
+    case 'standard':
+      PIXELS_PER_SECOND = 40;
+      break;
+    case 'slow':
+      PIXELS_PER_SECOND = 25;
+      break;
+    case 'none':
+      PIXELS_PER_SECOND = 0;
+      break;
+    default:
+      PIXELS_PER_SECOND = 40;
+  }
+  const RESUME_DELAY_MS = 2000;
+  const isAnimated = animationSpeed !== 'none';
+
+  useEffect(() => {
+    if (!isAnimated || reducedMotion || !scrollContainerRef) {
+      return () => {};
+    }
+
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return () => {};
+    }
+    if (container.scrollWidth <= container.clientWidth) {
+      return () => {};
+    }
+
+    let isPaused = false;
+    let lastTimestamp: number | null = null;
+    let accumulatedScroll = 0; // Accumulate fractional pixels
+
+    const step = (timestamp: number) => {
+      if (lastTimestamp === null) lastTimestamp = timestamp;
+      if (!isPaused) {
+        const delta = timestamp - lastTimestamp;
+        lastTimestamp = timestamp;
+
+        // Accumulate the scroll amount (including fractional pixels)
+        accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
+
+        // Only apply whole pixel movements
+        const pixelsToScroll = Math.floor(accumulatedScroll);
+        if (pixelsToScroll > 0) {
+          container.scrollLeft += pixelsToScroll;
+          accumulatedScroll -= pixelsToScroll; // Keep the fractional remainder
+
+          if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
+            container.scrollLeft = 0; // Reset scroll to create a looping effect
+            accumulatedScroll = 0; // Reset accumulated scroll when looping
+          }
+        }
+      }
+      scrollAnimationRef.current = requestAnimationFrame(step);
+    };
+
+    // Start animation
+    scrollAnimationRef.current = requestAnimationFrame(step);
+
+    // Pause/resume logic
+    const pauseAnimation = () => {
+      isPaused = true;
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+        resumeTimeoutRef.current = null;
+      }
+    };
+    const scheduleResumeAnimation = () => {
+      resumeTimeoutRef.current = setTimeout(() => {
+        isPaused = false;
+        lastTimestamp = null; // Reset timestamp so delta is correct after pause
+      }, RESUME_DELAY_MS);
+    };
+
+    if (pauseOnHover) {
+      container.addEventListener('mouseenter', pauseAnimation);
+      container.addEventListener('mouseleave', scheduleResumeAnimation);
+      container.addEventListener('touchstart', pauseAnimation);
+      container.addEventListener('touchend', scheduleResumeAnimation);
+    }
+
+    return function cleanup() {
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
+      if (pauseOnHover) {
+        container.removeEventListener('mouseenter', pauseAnimation);
+        container.removeEventListener('mouseleave', scheduleResumeAnimation);
+        container.removeEventListener('touchstart', pauseAnimation);
+        container.removeEventListener('touchend', scheduleResumeAnimation);
+      }
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
+    };
+  }, [isAnimated, reducedMotion, PIXELS_PER_SECOND, pauseOnHover, scrollContainerRef]);
+}

package/src/util/useReducedMotionWithOverride.ts

@@ -0,0 +1,24 @@
+import { useReducedMotionConfig } from 'framer-motion';
+import { useMemo } from 'react';
+
+// TODO: Should this be moved?
+declare global {
+  interface Window {
+    _spiffy?: {
+      reducedMotionOverride?: boolean;
+    };
+  }
+}
+
+export const useReducedMotionWithOverride = () => {
+  const reducedMotionConfig = useReducedMotionConfig();
+  const reducedMotion = useMemo(() => {
+    if (window?._spiffy?.reducedMotionOverride) {
+      return window?._spiffy?.reducedMotionOverride;
+    }
+
+    return reducedMotionConfig;
+  }, [reducedMotionConfig]);
+
+  return reducedMotion;
+};

package/dist/index-VWNd4lyI.d.cts

@@ -1,6 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
-//#endregion
-export { SearchResultsWidget };