@envive-ai/react-toolkit 0.1.0 → 0.1.2

package/src/components/common/ProductCard/ProductCard.tsx

@@ -0,0 +1,305 @@
+import classNames from 'classnames';
+import { MdStar } from 'react-icons/md';
+import { Text } from 'src/components/common/Text/Text';
+import {
+  variantClassMap,
+  variantHoverClassMap,
+  productCardLayoutVariantClasses,
+  variantTitleColorMap,
+} from './productCardVariants';
+import { Headline } from '../Headline/Headline';
+import { ImageWithFallback } from 'src/components/common/ImageWithFallback/ImageWithFallback';
+import type {
+  ProductCardConfig,
+  ProductCardHoverVariant,
+  ProductCardLayoutVariant,
+  ProductCardVariant,
+} from './types';
+import type { TestProps } from 'src/components/test/types';
+import type { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import Logger from 'src/logging/logger';
+import { Spinner } from '../Spinner/Spinner';
+import { formatPrice } from 'src/util/formatPrice';
+
+const formatReviews = (stars: number) =>
+  String(
+    Number(stars).toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }),
+  );
+
+interface RatingSummaryProps {
+  stars: number;
+  reviewCount: number;
+  className?: string;
+}
+
+export const RatingSummary = ({ stars, reviewCount, className }: RatingSummaryProps) => {
+  const group = classNames(
+    'spiffy-product-card-rating',
+    'spiffy-product-card-text-color',
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-row',
+    'spiffy-tw-items-center',
+    'spiffy-tw-gap-1',
+    'spiffy-tw-text-[--spiffy-colors-text-primary]',
+    'spiffy-tw-tracking-[0.8px]',
+  );
+
+  const starClassnames = classNames(
+    'spiffy-product-card-rating-star-color',
+    'spiffy-tw-fill-[--spiffy-colors-accent-primary]',
+    'spiffy-tw-w-[14px]',
+    'spiffy-tw-h-[14px]',
+  );
+
+  return (
+    <div className={className}>
+      <div className={group}>
+        <MdStar className={starClassnames} />
+        <Text variant="body3">{formatReviews(stars)}</Text>
+        <Text variant="body3">({reviewCount})</Text>
+      </div>
+    </div>
+  );
+};
+
+interface PriceSectionProps {
+  originalPrice?: string;
+  salePrice?: string;
+  pricePrefix?: string;
+}
+
+export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSectionProps) => {
+  if (!originalPrice) return null;
+
+  const priceClassName = classNames(
+    'spiffy-product-card-price',
+    'spiffy-product-card-text-color',
+    'spiffy-tw-font-regular',
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-wrap',
+    'spiffy-tw-gap-1',
+    'spiffy-tw-text-sm',
+    'spiffy-tw-font-[400]',
+    'spiffy-tw-leading-[100%]',
+    'spiffy-tw-tracking-[0.8px]',
+    'spiffy-tw-text-[--spiffy-colors-text-primary]',
+  );
+  const showSalePrice = salePrice && originalPrice !== salePrice;
+
+  return (
+    <div className={priceClassName}>
+      {pricePrefix && <Text>{pricePrefix}</Text>}
+      {showSalePrice && <Text>{salePrice}</Text>}
+      <Text className={showSalePrice ? 'spiffy-tw-line-through' : ''}>{originalPrice}</Text>
+    </div>
+  );
+};
+
+interface ProductCardProps extends TestProps {
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  title: string;
+  url?: string;
+  searchResponseId?: string;
+  productResponseId?: string;
+  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
+  imageUrl?: string;
+  originalPrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  salePrice?: number;
+  variant?: ProductCardVariant;
+  hoverVariant?: ProductCardHoverVariant;
+  layoutVariant?: ProductCardLayoutVariant;
+  zoomOnHover?: boolean;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  clickPosition?: number | null;
+  growWithContainer?: boolean;
+  handleClick: (clickedUrl: string) => void;
+}
+
+export const ProductCard = ({
+  productCardConfig,
+  merchantShortName,
+  imageUrl,
+  title,
+  url,
+  originalPrice,
+  averageRating,
+  numberReviews,
+  salePrice,
+  variant,
+  hoverVariant,
+  dataTestId,
+  layoutVariant = 'normal',
+  zoomOnHover = false,
+  aspectRatio = 'none',
+  growWithContainer = false,
+  handleClick,
+}: ProductCardProps) => {
+  // const orgUIConfig = useAtomValue(orgUIConfigAtom);
+  // const { productCardConfig } = orgUIConfig;
+
+  const finalVariant = variant ?? productCardConfig?.variant ?? 'filled';
+  const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? 'backgroundDark';
+  const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? 'normal';
+  const pricePrefix = productCardConfig?.pricePrefix;
+
+  if (productCardConfig == null) {
+    Logger.logError('[ProductCard] productCardConfig is null', undefined, {
+      merchant: merchantShortName,
+    });
+
+    return null;
+  }
+
+  const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
+
+  const containerClassnames = classNames(
+    'spiffy-tw-cursor-pointer',
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-col',
+    'spiffy-tw-gap-inherit',
+    'spiffy-tw-overflow-hidden',
+    {
+      'spiffy-tw-h-full': growWithContainer,
+      'spiffy-tw-w-full': growWithContainer,
+      'spiffy-tw-max-w-full': growWithContainer,
+    },
+    !growWithContainer && layoutClasses.container,
+    variantClassMap.get(finalVariant) ?? [],
+    variantHoverClassMap.get(finalHoverVariant) ?? [],
+  );
+
+  const verticalContainerVariantClasses =
+    productCardLayoutVariantClasses[layoutVariant].verticalContainer;
+
+  const verticalContainerClassnames = classNames(
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-col',
+    'spiffy-tw-overflow-hidden',
+    'spiffy-tw-gap-inherit',
+    {
+      'spiffy-tw-h-full': growWithContainer,
+      'spiffy-tw-w-full': growWithContainer,
+      'spiffy-tw-flex-1': growWithContainer,
+    },
+    ...(!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []),
+  );
+
+  const linkClassnames = classNames({
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-h-full': true,
+    'spiffy-tw-overflow-hidden': true,
+    'spiffy-tw-select-none': true,
+  });
+
+  // Fixed outer container that maintains size and clips overflow
+  // This is useful for zoomOnHover and aspect ratio enforcement
+  const imageClipContainerClassnames = classNames(
+    'spiffy-tw-w-full',
+    'spiffy-tw-overflow-hidden', // This clips any content that exceeds boundaries
+    {
+      'spiffy-tw-flex-shrink-0': growWithContainer,
+
+      'spiffy-tw-tw-h-full': !growWithContainer,
+    },
+    aspectRatio === '3:4' ? 'spiffy-tw-aspect-[3/4]' : '',
+    aspectRatio === 'square' ? 'spiffy-tw-aspect-square' : '',
+  );
+
+  // Inner container that can scale for zoom effect
+  const imageContainerClassnames = classNames(
+    linkClassnames,
+    zoomOnHover
+      ? [
+          'spiffy-tw-transition-transform',
+          'spiffy-tw-duration-200',
+          'spiffy-tw-origin-top',
+          'hover:spiffy-tw-scale-105',
+        ]
+      : [],
+  );
+
+  const contentClassnames = classNames(
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-col',
+    'spiffy-tw-p-2',
+    'spiffy-tw-pr-2',
+    'spiffy-tw-items-start',
+    'spiffy-tw-justify-end',
+    {
+      'spiffy-tw-flex-grow-0': layoutVariant === 'tall' || layoutVariant === 'square',
+    },
+  );
+
+  const productTitleClassnames = classNames(
+    'spiffy-tw-line-clamp-2',
+    'spiffy-tw-overflow-clip',
+    'spiffy-tw-tracking-[0.8px]',
+    'spiffy-tw-whitespace-normal',
+    'spiffy-tw-normal-case',
+    variantTitleColorMap.get(finalVariant) ?? 'spiffy-tw-text-[--spiffy-colors-text-primary]',
+    ...layoutClasses.productTitle,
+  );
+
+  const priceAndRatingContainerClassnames = classNames(
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-row',
+    'spiffy-tw-justify-between',
+    'spiffy-tw-items-center',
+    'spiffy-tw-w-full',
+    'spiffy-tw-pt-2',
+    'spiffy-tw-gap-2',
+  );
+
+  const imageClassnames = classNames(
+    'spiffy-tw-bg-transparent',
+    'spiffy-tw-w-full',
+    'spiffy-tw-h-full',
+    'spiffy-tw-object-cover',
+    'spiffy-tw-object-top',
+    'spiffy-tw-select-none',
+    'spiffy-tw-pointer-events-none',
+  );
+
+  return (
+    <div className={containerClassnames} data-testid={dataTestId}>
+      <a href={url} onClick={() => handleClick(url || '')} target="_self" draggable={false}>
+        <div className={verticalContainerClassnames}>
+          <div className={imageClipContainerClassnames}>
+            <div className={imageContainerClassnames}>
+              {imageUrl && (
+                <ImageWithFallback
+                  // TODO: Fix once
+                  // src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
+                  src={imageUrl}
+                  alt={title}
+                  fallback={<Spinner className="spiffy-tw-w-6 spiffy-tw-h-6" />}
+                  imageClassnames={imageClassnames}
+                />
+              )}
+            </div>
+          </div>
+          <div className={contentClassnames}>
+            <Headline variant="h4" className={productTitleClassnames}>
+              {title}
+            </Headline>
+            <div className={priceAndRatingContainerClassnames}>
+              {(originalPrice || salePrice) && (
+                <PriceSection
+                  originalPrice={formatPrice(originalPrice)}
+                  salePrice={formatPrice(salePrice)}
+                  pricePrefix={pricePrefix}
+                />
+              )}
+              {averageRating && numberReviews && (
+                <RatingSummary stars={averageRating} reviewCount={numberReviews} />
+              )}
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  );
+};

package/src/components/common/ProductCard/ProductCardSkeleton.tsx

@@ -0,0 +1,83 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import { ProductCardSkeletonOverrides, type ProductCardLayoutVariant } from './types';
+import { productCardLayoutVariantClasses } from './productCardVariants';
+
+interface ProductCardSkeletonProps {
+  layoutVariant: ProductCardLayoutVariant;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  growWithContainer?: boolean;
+}
+
+export const ProductCardSkeleton: FC<ProductCardSkeletonProps> = ({
+  layoutVariant,
+  aspectRatio,
+  growWithContainer = false,
+}) => {
+  const finalLayoutVariant = layoutVariant || 'normal';
+  const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
+
+  const containerClasses = classNames(
+    ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON_CONTAINER,
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-col',
+    'spiffy-tw-gap-inherit',
+    'spiffy-tw-bg-transparent',
+    !growWithContainer ? layoutClasses.container : '',
+  );
+
+  const verticalContainerClasses = classNames(
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-col',
+    'spiffy-tw-overflow-hidden',
+    'spiffy-tw-gap-inherit',
+    !growWithContainer ? layoutClasses.verticalContainer : '',
+  );
+
+  const imageClipContainerClasses = classNames(
+    'spiffy-tw-w-full',
+    aspectRatio === '3:4' ? 'spiffy-tw-aspect-[3/4]' : '',
+    aspectRatio === 'square' ? 'spiffy-tw-aspect-square' : '',
+    'spiffy-tw-overflow-hidden',
+  );
+
+  const imageSkeletonClasses = classNames(
+    'spiffy-tw-bg-[#F4F4F6]',
+    'spiffy-tw-animate-pulse',
+    'spiffy-tw-opacity-70',
+    'spiffy-tw-w-full',
+    'spiffy-tw-h-full',
+  );
+
+  const contentContainerClasses = classNames(
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-col',
+    'spiffy-tw-gap-2',
+    'spiffy-tw-w-full',
+    'spiffy-tw-p-2',
+  );
+
+  const textSkeletonClasses = classNames(
+    ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON,
+    'spiffy-tw-h-[15px]',
+    'spiffy-tw-block',
+    'spiffy-tw-rounded-sm',
+    'spiffy-tw-animate-pulse',
+    'spiffy-tw-opacity-70',
+    'spiffy-tw-bg-[#F4F4F6]',
+  );
+
+  return (
+    <div className={containerClasses}>
+      <div className={verticalContainerClasses}>
+        <div className={imageClipContainerClasses}>
+          <div className={imageSkeletonClasses} />
+        </div>
+        <div className={contentContainerClasses}>
+          <div className={classNames(textSkeletonClasses, 'spiffy-tw-w-full')} />
+          <div className={classNames(textSkeletonClasses, 'spiffy-tw-w-[60%]')} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/common/ProductCard/productCardVariants.ts

@@ -0,0 +1,63 @@
+import type {
+  ProductCardVariant,
+  ProductCardHoverVariant,
+  ProductCardLayoutVariant,
+} from './types';
+
+/**
+ * Shared variant mapping configurations for ProductCard components
+ */
+
+export const variantClassMap = new Map<ProductCardVariant, string[]>([
+  ['filled', ['spiffy-tw-bg-[--spiffy-colors-background-secondary]', 'spiffy-tw-shadow-md']],
+  [
+    'bordered',
+    [
+      'spiffy-tw-bg-[--spiffy-colors-background-secondary]',
+      'spiffy-tw-border',
+      'spiffy-tw-border-[--spiffy-colors-border-light]',
+    ],
+  ],
+  ['minimal', ['spiffy-tw-bg-transparent']],
+  [
+    'transparentBordered',
+    [
+      'spiffy-tw-bg-transparent',
+      'spiffy-tw-border',
+      'spiffy-tw-border-[--spiffy-colors-border-light]',
+    ],
+  ],
+]);
+
+export const variantHoverClassMap = new Map<ProductCardHoverVariant, string[]>([
+  ['backgroundDark', ['hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]']],
+  ['none', []],
+]);
+
+export const variantTitleColorMap = new Map<ProductCardVariant, string>([
+  ['filled', 'spiffy-tw-text-[--spiffy-colors-text-link]'],
+  ['bordered', 'spiffy-tw-text-[--spiffy-colors-text-primary]'],
+  ['minimal', 'spiffy-tw-text-[--spiffy-colors-text-primary]'],
+  ['transparentBordered', 'spiffy-tw-text-[--spiffy-colors-text-primary]'],
+]);
+
+export const productCardLayoutVariantClasses: Record<
+  ProductCardLayoutVariant,
+  Record<string, string[]>
+> = {
+  normal: {
+    productTitle: ['spiffy-product-card-title'],
+    container: ['spiffy-tw-w-[208px]'],
+    verticalContainer: ['spiffy-tw-rounded-[8px]', 'spiffy-tw-h-[268px]'],
+  },
+  tall: {
+    productTitle: ['spiffy-product-card-title-tall', 'spiffy-tw-pt-[8px]'],
+    container: ['spiffy-tw-w-[160px] lg:spiffy-tw-w-[300px]'],
+    verticalContainer: ['lg:spiffy-tw-h-[496px]'],
+  },
+  square: {
+    productTitle: ['spiffy-product-card-title-tall', 'spiffy-tw-pt-[8px]'],
+    container: ['spiffy-tw-w-[160px] lg:spiffy-tw-w-[280px]'],
+    verticalContainer: ['lg:spiffy-tw-h-[400px]'],
+  },
+};

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

@@ -0,0 +1,49 @@
+import type { ResponseCategory, SearchResponseProduct } from 'src/types/external';
+import type { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
+
+export enum ProductCardSkeletonOverrides {
+  PRODUCT_CARD_SKELETON_CONTAINER = 'spiffy-product-card-skeleton-container',
+  PRODUCT_CARD_SKELETON = 'spiffy-product-card-skeleton',
+}
+
+export enum AnimatedProductCardOverrides {
+  PRODUCT_CARD_ANIMATED_CONTAINER = 'spiffy-product-card-animated-container',
+  PRODUCT_CARD_ANIMATED_IMAGE_CONTAINER = 'spiffy-product-card-animated',
+}
+
+export type ProductGridVariant = 'standard' | 'square';
+
+export type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
+
+export type ProductCardHoverVariant = 'backgroundDark' | 'none';
+
+export type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
+export type ProductCardImageAspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16';
+
+export interface ProductCardConfig {
+  variant: ProductCardVariant;
+  hoverVariant: ProductCardHoverVariant;
+  layoutVariant: ProductCardLayoutVariant;
+  pricePrefix?: string;
+}
+
+export interface SearchResponseProductAttributes {
+  category: ResponseCategory.Product;
+  attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
+}
+
+export interface ProductCardSkeletonProps {
+  layoutVariant: ProductCardLayoutVariant;
+  aspectRatio: ProductCardImageAspectRatio;
+  growWithContainer?: boolean;
+}
+
+export interface ProductGridProps {
+  productList: SearchResponseProductAttributes['attributes'][];
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  searchResponseId: string;
+  cardsGrowWithContainer?: boolean;
+}

package/src/components/common/ProductGrid/ProductGrid.tsx

@@ -0,0 +1,73 @@
+import type { ProductCardConfig, ProductGridVariant } from '../ProductCard/types';
+import { ProductCard } from '../ProductCard/ProductCard';
+import { productGridVariantClasses } from './productGridVariants';
+import classNames from 'classnames';
+import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import { SearchResponseProduct } from 'src/types/external';
+
+interface ProductGridProps {
+  productList: SearchResponseProduct[];
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  searchResponseId: string;
+  cardsGrowWithContainer?: boolean;
+  handleClick: (clickedUrl: string) => void;
+}
+
+export const ProductGrid = ({
+  productList,
+  productGridVariant,
+  productGridClasses,
+  productCardConfig,
+  merchantShortName,
+  searchResponseId,
+  cardsGrowWithContainer = true,
+  handleClick,
+}: ProductGridProps) => {
+  const {
+    productCardVariant,
+    productCardHoverVariant,
+    productCardLayoutVariant,
+    productCardImageAspectRatio,
+    zoomOnHover,
+  } = productGridVariantClasses[productGridVariant];
+
+  const cardContainerClasses = classNames({
+    'spiffy-tw-w-full': cardsGrowWithContainer,
+    'spiffy-tw-h-full': cardsGrowWithContainer,
+  });
+
+  return (
+    <div className={productGridClasses}>
+      {productList.map((product: (typeof productList)[0], index: number) => (
+        <div key={product.id} className={cardContainerClasses}>
+          <ProductCard
+            productCardConfig={productCardConfig}
+            merchantShortName={merchantShortName}
+            key={product.id}
+            imageUrl={product.imageUrl}
+            searchResponseId={searchResponseId}
+            productResponseId={product.responseId}
+            title={product.title}
+            url={product.url}
+            originalPrice={product.originalPrice}
+            salePrice={product.salePrice}
+            averageRating={product.averageRating}
+            numberReviews={product.numberReviews}
+            cardDisplayLocation={ChatElementDisplayLocation.PRODUCT_GRID}
+            layoutVariant={productCardLayoutVariant}
+            variant={productCardVariant}
+            hoverVariant={productCardHoverVariant}
+            zoomOnHover={zoomOnHover}
+            aspectRatio={productCardImageAspectRatio}
+            clickPosition={index}
+            growWithContainer={cardsGrowWithContainer}
+            handleClick={handleClick}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/common/ProductGrid/productGridVariants.ts

@@ -0,0 +1,31 @@
+import type {
+  ProductCardHoverVariant,
+  ProductCardLayoutVariant,
+  ProductCardVariant,
+  ProductGridVariant,
+} from '../ProductCard/types';
+
+interface ProductGridVariantClasses {
+  productCardVariant: ProductCardVariant;
+  productCardHoverVariant: ProductCardHoverVariant;
+  productCardLayoutVariant: ProductCardLayoutVariant;
+  productCardImageAspectRatio: '3:4' | 'square' | 'none';
+  zoomOnHover: boolean;
+}
+
+export const productGridVariantClasses: Record<ProductGridVariant, ProductGridVariantClasses> = {
+  standard: {
+    productCardVariant: 'minimal',
+    productCardHoverVariant: 'backgroundDark',
+    productCardLayoutVariant: 'tall',
+    productCardImageAspectRatio: '3:4',
+    zoomOnHover: true,
+  },
+  square: {
+    productCardVariant: 'minimal',
+    productCardHoverVariant: 'backgroundDark',
+    productCardLayoutVariant: 'square',
+    productCardImageAspectRatio: 'square',
+    zoomOnHover: true,
+  },
+};