@envive-ai/react-toolkit 0.2.10 → 0.2.12

package/src/components/SearchResultsStates/SearchResultsGrid.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+
 import classNames from 'classnames';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
@@ -20,6 +21,7 @@ interface SearchResultsGridProps {
   selectedFilterOptions: SelectedFilterOption[];
   containerXPaddingClasses: string;
   productGridClasses: string;
+  onProductClick?: () => void;
   onRemoveFilter: (filter: SelectedFilterOption) => void;
   onToggleDynamicFilter: ({
     filter,
@@ -42,6 +44,7 @@ export const SearchResultsGrid = ({
   productGridClasses,
   onRemoveFilter,
   onToggleDynamicFilter,
+  onProductClick,
 }: SearchResultsGridProps) => {
   const sharedFilterBarClasses = classNames(
     'spiffy-suggestion-bar',
@@ -98,7 +101,8 @@ export const SearchResultsGrid = ({
         productGridClasses={productGridClasses}
         productCardConfig={productCardConfig}
         merchantShortName={merchantShortName}
+        onProductClick={onProductClick}
       />
     </motion.div>
   );
-};
+};

package/src/components/SearchResultsToolbar/SearchResultsToolbar.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import classNames from 'classnames';
+import { SearchInputVariant } from '@envive-ai/react-hooks/contexts/types';
+import { SearchResultsFilterButton } from '../SearchResultsFilterButton';
+import { SearchInputForm } from '../SearchInputForm';
+
+
+interface SearchResultsToolbarProps {
+  // From widgetConfig
+    searchInputVariant: SearchInputVariant;
+    searchBoxPlaceholder: string;
+  // From search hook
+  searchText: string;
+  focusedIndex: number;
+  focusedOptionId: string | undefined;
+  autocompleteResults: string[];
+  filterButtonText: string;
+
+  // From search input hook
+  shouldShowAutocomplete: boolean;
+
+  // Event handlers
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onSearchInputChange: (value: string) => void;
+  onSubmitSearch: () => void;
+  onAutocompleteSelect: (suggestion: string, rankPosition?: number) => void;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  setIsFilterOpen: (isOpen: boolean) => void;
+
+  // Styling
+  containerXPaddingClasses: string;
+
+  // Ref for sticky logic
+  toolbarRef: React.RefObject<HTMLDivElement> | null;
+  isVisible: boolean;
+  className?: string;
+}
+
+export const SearchResultsToolbar = ({
+  searchInputVariant,
+  searchBoxPlaceholder,
+  searchText,
+  focusedIndex,
+  focusedOptionId,
+  autocompleteResults,
+  filterButtonText,
+  onKeyDown,
+  onSearchInputChange,
+  onSubmitSearch,
+  onAutocompleteSelect,
+  onSearchInputFocus,
+  onSearchInputBlur,
+  shouldShowAutocomplete,
+  setIsFilterOpen,
+  containerXPaddingClasses,
+  toolbarRef,
+  isVisible,
+  className,
+}: SearchResultsToolbarProps) => {
+  const [hasZIndex, setHasZIndex] = React.useState(false);
+
+  // The following is to ensure the z-index is applied after the animation is complete
+  // because otherwise the z-index would be applied instantly when the component is mounted
+  // which would cause the search toolbar to appear over the top of the merchant header
+  // in some cases
+  React.useEffect(() => {
+    let timer;
+    if (isVisible) {
+      timer = setTimeout(() => {
+        setHasZIndex(true);
+      }, 300); // Match the animation duration from parent
+      return () => clearTimeout(timer);
+    }
+    setHasZIndex(false);
+    return () => clearTimeout(timer);
+  }, [isVisible]);
+  const toolbarClasses = classNames('spiffy-tw-bg-white', 'spiffy-tw-w-full', className, {
+    'spiffy-tw-z-10': hasZIndex,
+    'spiffy-tw-translate-y-0': isVisible,
+    '-spiffy-tw-translate-y-full': !isVisible,
+  });
+
+  const contentWrapperClasses = classNames('spiffy-tw-flex', containerXPaddingClasses);
+
+  return (
+    <div className={toolbarClasses} ref={toolbarRef}>
+      <div className={contentWrapperClasses}>
+        <SearchInputForm
+          searchInputVariant={searchInputVariant}
+          searchText={searchText}
+          focusedIndex={focusedIndex}
+          autocompleteResults={autocompleteResults}
+          searchBoxPlaceholder={searchBoxPlaceholder}
+          focusedOptionId={focusedOptionId}
+          onKeyDown={onKeyDown}
+          onSearchInputChange={onSearchInputChange}
+          onSearchInputFocus={onSearchInputFocus}
+          onSearchInputBlur={onSearchInputBlur}
+          shouldShowAutocomplete={shouldShowAutocomplete}
+          onSearchSubmit={onSubmitSearch}
+          onAutocompleteSelect={onAutocompleteSelect}
+        />
+        <SearchResultsFilterButton
+          setIsOpen={setIsFilterOpen}
+          filterButtonText={filterButtonText}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/SearchResultsToolbar/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './SearchResultsToolbar';

package/src/stories/AppliedFiltersScrollbar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
+import { AppliedFiltersScrollbar } from '@envive-ai/react-toolkit/AppliedFiltersScrollbar';
+
+const mockSelectedFilterOptions: SelectedFilterOption[] = [
+  { id: 'cat2', displayName: 'Category 2', filterId: 'category', filterItemId: 'cat2' },
+  { id: 'brandA', displayName: 'Brand A', filterId: 'brand', filterItemId: 'brandA' },
+  { id: 'colorRed', displayName: 'Color: Red', filterId: 'color', filterItemId: 'red' },
+  { id: 'sizeM', displayName: 'Size: M', filterId: 'size', filterItemId: 'M' },
+];
+
+const meta: Meta<typeof AppliedFiltersScrollbar> = {
+  title: 'Search/AppliedFiltersScrollbar',
+  component: AppliedFiltersScrollbar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AppliedFiltersScrollbar>;
+
+export const Default: Story = {
+  args: {
+    selectedFilterOptions: mockSelectedFilterOptions,
+    filterBarClassNames:
+      'spiffy-suggestion-bar spiffy-tw-no-scrollbar spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-gap-2 spiffy-tw-mb-[16px] spiffy-tw-overflow-x-scroll spiffy-tw-px-[16px] sm:spiffy-tw-px-[46px]',
+    filterDefaultClasses:
+      'spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-accent-primary]',
+    appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-accent-primary]',
+    onRemoveFilter: () => {},
+  },
+};
+
+export const NoFilters: Story = {
+  args: {
+    ...Default.args,
+    selectedFilterOptions: [],
+  },
+};

package/src/stories/ButtonBase.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ButtonBase } from '@envive-ai/react-toolkit/ButtonBase';
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
+
+const meta = {
+  title: 'Common/ButtonBase',
+  component: ButtonBase,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    dataAttributes: undefined,
+    buttonClass: undefined,
+    textClass: undefined,
+    icon: undefined,
+    dataTestId: undefined,
+    onClick: undefined,
+  },
+  argTypes: {
+    onClick: { action: 'clicked' },
+    dataAttributes: { control: 'object' },
+    buttonClass: { control: 'text' },
+    textClass: { control: 'text' },
+    dataTestId: { control: 'text' },
+    type: { control: 'select', options: ['button', 'submit', 'reset'] },
+    isDisabled: { control: 'boolean' },
+    iconClass: { control: 'text' },
+    disablePadding: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ButtonBase>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: 'Button',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    text: 'Settings',
+    icon: SettingsVariant,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    text: 'Disabled Button',
+    isDisabled: true,
+  },
+};

package/src/stories/DynamicFiltersScrollbar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DynamicFiltersScrollbar } from '@envive-ai/react-toolkit/DynamicFiltersScrollbar';
+
+const mockAvailableDynamicFilters = [
+  { name: 'color', displayName: 'Color' },
+  { name: 'size', displayName: 'Size' },
+  { name: 'material', displayName: 'Material' },
+  { name: 'brand', displayName: 'Brand' },
+  { name: 'price', displayName: 'Price Range' },
+  { name: 'rating', displayName: 'Customer Rating' },
+];
+
+const meta: Meta<typeof DynamicFiltersScrollbar> = {
+  title: 'Search/DynamicFiltersScrollbar',
+  component: DynamicFiltersScrollbar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DynamicFiltersScrollbar>;
+
+export const Default: Story = {
+  args: {
+    availableDynamicFilters: mockAvailableDynamicFilters,
+    filterBarClassNames:
+      'spiffy-suggestion-bar spiffy-tw-no-scrollbar spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-gap-2 spiffy-tw-mb-[16px] spiffy-tw-overflow-x-scroll spiffy-tw-px-[16px] sm:spiffy-tw-px-[46px]',
+    filterDefaultClasses:
+      'spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-accent-primary]',
+    onToggleDynamicFilter: () => {},
+  },
+};
+
+export const NoFilters: Story = {
+  args: {
+    ...Default.args,
+    availableDynamicFilters: [],
+  },
+};

package/src/stories/NoSearchResultsFound.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NoSearchResultsFound } from '@envive-ai/react-toolkit/SearchResultsStates';
+
+const meta: Meta<typeof NoSearchResultsFound> = {
+  title: 'Search/NoSearchResultsFound',
+  component: NoSearchResultsFound,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoSearchResultsFound>;
+
+export const Default: Story = {
+  args: {
+    containerPaddingClasses: 'spiffy-tw-px-[16px]',
+    noResultsFoundText:
+      'I’m sorry, I wasn’t able to find an exact match. Try changing your filters or adjusting your search query.',
+    sparkleIconColor: 'var(--spiffy-colors-accent-primary)',
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    ...Default.args,
+    noResultsFoundText: 'No items found matching your criteria. Please try again.',
+  },
+};

package/src/stories/ProductCard.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProductCard } from '@envive-ai/react-toolkit/ProductCard';
+import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+
+const meta: Meta<typeof ProductCard> = {
+  title: 'Common/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layoutVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    variant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    hoverVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    aspectRatio: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCard>;
+
+export const Default: Story = {
+  args: {
+    productCardConfig: {
+      variant: 'minimal',
+      hoverVariant: 'backgroundDark',
+      layoutVariant: 'tall',
+    },
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Example Product Title',
+    url: '#',
+    originalPrice: 25.0,
+    salePrice: 20.0,
+    averageRating: 4.5,
+    numberReviews: 120,
+    layoutVariant: 'tall',
+    variant: 'minimal',
+    hoverVariant: 'backgroundDark',
+    zoomOnHover: true,
+    aspectRatio: 'none',
+    growWithContainer: true,
+  },
+};
+
+export const TallLayout: Story = {
+  args: {
+    ...Default.args,
+    layoutVariant: 'tall',
+  },
+};
+
+export const NoSalePrice: Story = {
+  args: {
+    ...Default.args,
+    salePrice: undefined,
+  },
+};
+
+export const NoRating: Story = {
+  args: {
+    ...Default.args,
+    averageRating: undefined,
+    numberReviews: undefined,
+  },
+};

package/src/stories/ProductCardSkeleton.stories.tsx

@@ -0,0 +1,48 @@
+import { ProductCardSkeleton } from '@envive-ai/react-toolkit/ProductCard';
+import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof ProductCardSkeleton> = {
+  title: 'Common/ProductCardSkeleton',
+  component: ProductCardSkeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layoutVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    aspectRatio: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCardSkeleton>;
+
+export const Default: Story = {
+  args: {
+    layoutVariant: 'normal',
+    aspectRatio: 'none',
+    growWithContainer: true,
+  },
+};
+
+export const MinimalLayout: Story = {
+  args: {
+    ...Default.args,
+    layoutVariant: 'normal',
+  },
+};
+
+export const AspectRatio3x4: Story = {
+  args: {
+    ...Default.args,
+    aspectRatio: '3:4',
+  },
+};

package/src/stories/ProductGrid.stories.tsx

@@ -0,0 +1,82 @@
+import { ProductGrid, productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const mockProductList = [
+  {
+    id: '1',
+    responseId: 'prod1',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 1',
+    url: '#',
+    originalPrice: 25.0,
+    salePrice: 20.0,
+    averageRating: 4.5,
+    numberReviews: 120,
+  },
+  {
+    id: '2',
+    responseId: 'prod2',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 2',
+    url: '#',
+    originalPrice: 30.0,
+    salePrice: 28.0,
+    averageRating: 3.9,
+    numberReviews: 85,
+  },
+  {
+    id: '3',
+    responseId: 'prod3',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 3',
+    url: '#',
+    originalPrice: 15.0,
+    salePrice: 12.5,
+    averageRating: 4.8,
+    numberReviews: 200,
+  },
+  {
+    id: '4',
+    responseId: 'prod4',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 4',
+    url: '#',
+    originalPrice: 50.0,
+    salePrice: 45.0,
+    averageRating: 4.2,
+    numberReviews: 50,
+  },
+];
+
+const meta: Meta<typeof ProductGrid> = {
+  title: 'Common/ProductGrid',
+  component: ProductGrid,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productGridVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductGrid>;
+
+export const Default: Story = {
+  args: {
+    productList: mockProductList,
+    productGridVariant: 'standard',
+    productGridClasses:
+      'spiffy-tw-grid spiffy-tw-justify-items-stretch spiffy-tw-grid-cols-2 md:spiffy-tw-grid-cols-3 lg:spiffy-tw-grid-cols-4 spiffy-tw-gap-x-[4px] spiffy-tw-gap-y-[24px] spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-items-stretch',
+    cardsGrowWithContainer: true,
+    productCardConfig: {
+      variant: 'minimal',
+      hoverVariant: 'backgroundDark',
+      layoutVariant: 'tall',
+    },
+  },
+};

package/src/stories/SearchInputForm.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchInputForm } from '@envive-ai/react-toolkit/SearchInputForm';
+
+export type SearchInputVariant = 'standard';
+
+const mockAutocompleteResults = ['apple', 'banana', 'orange', 'grape', 'strawberry'];
+
+const meta: Meta<typeof SearchInputForm> = {
+  title: 'Search/SearchInputForm',
+  component: SearchInputForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    searchInputVariant: {
+      control: 'select',
+      options: ['standard'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInputForm>;
+
+export const Default: Story = {
+  args: {
+    searchInputVariant: 'standard' as SearchInputVariant,
+    searchText: '',
+    autocompleteResults: mockAutocompleteResults,
+    searchBoxPlaceholder: 'Search for products...',
+    focusedOptionId: undefined,
+    focusedIndex: -1,
+    onKeyDown: () => {},
+    onAutocompleteSelect: () => {},
+    onSearchInputChange: () => {},
+    onSearchSubmit: () => {},
+  },
+};

package/src/stories/SearchResultsFilter.stories.tsx

@@ -0,0 +1,56 @@
+import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
+import {
+  searchFilterSidebarVariantClasses,
+  SearchResultsFilter,
+} from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const mockSearchFilters: SearchFilterDatum[] = [
+  {
+    filterId: 'category',
+    displayName: 'Category',
+    items: [
+      { filterItemId: 'cat1', displayName: 'Category 1', productCount: 10, isSelected: false },
+      { filterItemId: 'cat2', displayName: 'Category 2', productCount: 10, isSelected: true },
+    ],
+  },
+  {
+    filterId: 'brand',
+    displayName: 'Brand',
+    items: [
+      { filterItemId: 'brandA', displayName: 'Brand A', productCount: 10, isSelected: false },
+      { filterItemId: 'brandB', displayName: 'Brand B', productCount: 10, isSelected: false },
+    ],
+  },
+];
+
+const meta: Meta<typeof SearchResultsFilter> = {
+  title: 'Search/SearchResultsFilter',
+  component: SearchResultsFilter,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    searchFilterSidebarVariant: {
+      control: 'select',
+      options: Object.keys(searchFilterSidebarVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchResultsFilter>;
+
+export const Default: Story = {
+  args: {
+    productCount: 100,
+    isOpen: true,
+    setIsOpen: () => {},
+    searchFilters: mockSearchFilters,
+    searchFilterSidebarVariant: 'darkButton',
+    onSelectFilterItem: () => {},
+    onClearAllFilters: () => {},
+    filterButtonText: 'Filter',
+  },
+};