@envive-ai/react-toolkit 0.2.11 → 0.2.13-arthur-1

package/src/components/SearchResultsStates/NoSearchResultsFound.tsx

@@ -1,29 +1,55 @@
 import classNames from 'classnames';
 import Sparkles from '@envive-ai/react-icons/Sparkles';
 import { Typography } from 'src/components/Typography';
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import { RecommendedProducts } from '../RecommendedProducts';
+import { ProductGridVariant } from '../ProductCard';
 
 interface NoSearchResultsFoundProps {
   containerPaddingClasses: string;
-  includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
+  // includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
   noResultsFoundText?: string;
   sparkleIconColor?: string; // example format: var(--spiffy-colors-accent-primary)
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  searchText: string;
+  merchantShortName: string;
+  productGridVariant: ProductGridVariant;
 }
 
 export const NoSearchResultsFound = ({
   containerPaddingClasses,
-  includeBottomMargin = false,
   noResultsFoundText,
   sparkleIconColor = 'var(--spiffy-colors-accent-primary)',
+  recommendedProducts,
+  searchText,
+  merchantShortName,
+  productGridVariant,
 }: NoSearchResultsFoundProps) => {
-  const containerClasses = classNames(
-    containerPaddingClasses,
-    includeBottomMargin ? 'spiffy-tw-mb-[100vh]' : '',
-    'spiffy-tw-mt-6',
-  );
+  const containerClasses = classNames(containerPaddingClasses, 'spiffy-tw-mt-6', {
+    'spiffy-tw-mb-[100vh]': recommendedProducts.length === 0,
+  });
 
-  const textPrompt =
-    noResultsFoundText ||
-    "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query.";
+  let textPrompt: React.ReactNode;
+  if (recommendedProducts.length > 0) {
+    textPrompt = noResultsFoundText ? (
+      <span>{noResultsFoundText}</span>
+    ) : (
+      <span>
+        I’m sorry, I wasn’t able to find an exact match for
+        <strong className="spiffy-tw-font-semibold"> {`"${searchText}".`}</strong> Try changing your
+        filters or adjusting your search query. In the meantime, explore some of our top-selling
+        products below.
+      </span>
+    );
+  } else {
+    textPrompt = (
+      <span>
+        I’m sorry, I wasn’t able to find an exact match for
+        <strong className="spiffy-tw-font-semibold"> {`"${searchText}."`}</strong> Try changing your
+        filters or adjusting your search query.
+      </span>
+    );
+  }
 
   return (
     <div className={containerClasses}>
@@ -36,6 +62,12 @@ export const NoSearchResultsFound = ({
         </div>
         <Typography variant="body2">{textPrompt}</Typography>
       </div>
+      <RecommendedProducts
+        retrievedProducts={recommendedProducts}
+        merchantShortName={merchantShortName}
+        productCardConfig={{ variant: 'minimal', hoverVariant: 'none', layoutVariant: 'square' }}
+        productGridVariant={productGridVariant}
+      />
     </div>
   );
-};
+};

package/src/components/SearchResultsStates/SearchResultsGrid.tsx

@@ -1,17 +1,15 @@
 import { motion } from 'framer-motion';
+
 import classNames from 'classnames';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-import {
-  ProductCardConfig,
-  ProductGridVariant,
-  SearchFilterSidebarVariant,
-  SelectedFilterOption,
-} from '@envive-ai/types';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import { AppliedFiltersScrollbar } from '../FilterScrollbar/AppliedFiltersScrollbar';
 import { DynamicFiltersScrollbar } from '../FilterScrollbar/DynamicFiltersScrollbar';
 
 import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
+import { ProductCardConfig, ProductGridVariant } from '../ProductCard';
 import { ProductGrid } from '../ProductGrid';
+import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
 
 interface SearchResultsGridProps {
   productList: SearchResponseProduct[];
@@ -23,6 +21,7 @@ interface SearchResultsGridProps {
   selectedFilterOptions: SelectedFilterOption[];
   containerXPaddingClasses: string;
   productGridClasses: string;
+  onProductClick?: () => void;
   onRemoveFilter: (filter: SelectedFilterOption) => void;
   onToggleDynamicFilter: ({
     filter,
@@ -45,6 +44,7 @@ export const SearchResultsGrid = ({
   productGridClasses,
   onRemoveFilter,
   onToggleDynamicFilter,
+  onProductClick,
 }: SearchResultsGridProps) => {
   const sharedFilterBarClasses = classNames(
     'spiffy-suggestion-bar',
@@ -101,7 +101,8 @@ export const SearchResultsGrid = ({
         productGridClasses={productGridClasses}
         productCardConfig={productCardConfig}
         merchantShortName={merchantShortName}
+        onProductClick={onProductClick}
       />
     </motion.div>
   );
-};
+};

package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -1,7 +1,6 @@
 import { motion } from 'framer-motion';
 import { Typography } from 'src/components/Typography';
-import { ProductGridVariant } from '@envive-ai/types';
-import { ProductCardSkeleton } from '../ProductCard';
+import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
 import { productGridVariantClasses } from '../ProductGrid';
 import { SparkleAnimation } from '../SparkleAnimation';
 

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/components/SparkleAnimation/SparkleAnimation.tsx

@@ -3,18 +3,12 @@ import { type Transition, motion } from 'framer-motion';
 import classNames from 'classnames';
 
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
+import { SparkleAnimationOverride } from './types';
 
 // Animation timing constants
 const ANIMATION_CYCLE_TIME = 1000; // 1 second between cycles
 const STAR_DELAY_OFFSET = 250; // 250ms delay between each star
 
-enum SparkleAnimationOverride {
-  CONTAINER = 'spiffy-sparkle-animation-container',
-  STAR_ONE_CONTAINER = 'spiffy-sparkle-animation-star-one-container',
-  STAR_TWO_CONTAINER = 'spiffy-sparkle-animation-star-two-container',
-  STAR_THREE_CONTAINER = 'spiffy-sparkle-animation-star-three-container',
-}
-
 interface SparkleAnimationProps {
   color: string;
   className?: string;

package/src/components/SparkleAnimation/index.ts

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

package/src/components/SparkleAnimation/types.ts

@@ -0,0 +1,6 @@
+export enum SparkleAnimationOverride {
+  CONTAINER = 'spiffy-sparkle-animation-container',
+  STAR_ONE_CONTAINER = 'spiffy-sparkle-animation-star-one-container',
+  STAR_TWO_CONTAINER = 'spiffy-sparkle-animation-star-two-container',
+  STAR_THREE_CONTAINER = 'spiffy-sparkle-animation-star-three-container',
+}

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
-import { TestProps } from '@envive-ai/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 import type { SuggestionButtonVariant } from './types';
 import { ButtonBase } from '../ButtonBase/ButtonBase';
 

package/src/config/chatElementDisplayLocation.ts

@@ -0,0 +1,23 @@
+// Chat element display location enum
+export enum ChatElementDisplayLocation {
+  IN_CHAT = 'in_chat',
+  CHAT_PREVIEW = 'chat_preview',
+  FLOATING_BUTTON = 'floating_button',
+  HELP_ME_CHOOSE = 'help_me_choose',
+  PLP_IMAGE_BANNER = 'plp_image_banner',
+  TOP_REVIEWS_SNIPPET = 'top_reviews_snippet',
+  BOTTOM_REVIEWS_SNIPPET = 'bottom_reviews_snippet',
+  BLOCK_BACK_BUTTON = 'block_back_button',
+  SWITCH_TO_AGENT = 'switch_to_agent',
+  CONVERSATIONAL_SEARCH = 'conversational_search',
+  GLOBAL_SEARCH_ENTRYPOINT = 'global_search_entrypoint',
+  SEARCH_NAV_ENTRYPOINT = 'search_nav_entrypoint',
+  SEARCH_PROMPT = 'search_prompt',
+  SEARCH_PROMPT_BUTTON = 'search_prompt_button',
+  SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS = 'search_zero_state_suggested_products',
+  PRODUCT_GRID = 'product_grid',
+  UNSPECIFIED = 'unspecified',
+  FILTER_MODAL = 'filter_modal',
+  PROMPT_CARD = 'prompt_card',
+  WINDOW_API_CALL = 'window_api_call',
+}

package/src/models/colorsConfig.ts

@@ -0,0 +1,28 @@
+enum ColorNames {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+  TextAccent = 'text-accent',
+  TextLink = 'text-link',
+  TextLight = 'text-light',
+  BackgroundPrimary = 'background-primary',
+  BackgroundSecondary = 'background-secondary',
+  BackgroundSecondaryDark = 'background-secondary-dark',
+  BackgroundTertiary = 'background-tertiary',
+  BackgroundDark = 'background-dark',
+  BackgroundLight = 'background-light',
+  BackgroundSaturated = 'background-saturated',
+  BorderLight = 'border-light',
+  BorderMedium = 'border-medium',
+  BorderDark = 'border-dark',
+  BorderOutline = 'border-outline',
+  AccentPrimary = 'accent-primary',
+  AccentSecondary = 'accent-secondary',
+}
+
+type ColorMapping = {
+  [key in ColorNames]: string;
+};
+
+const colorVar = (color: ColorNames): string => `var(--spiffy-colors-${color})`;
+export { ColorNames, colorVar };
+export type { ColorMapping };

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',
+  },
+};