@envive-ai/react-toolkit 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,2 @@
+Copyright (c) 2025 Envive AI
+All Rights Reserved

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -11,14 +11,16 @@
   "author": "Envive AI",
   "license": "UNLICENSED",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
+    "build": "tsc -p tsconfig.lib.json && tsc-alias -p tsconfig.lib.json",
     "prepublish": "npm run build"
   },
   "dependencies": {
@@ -26,7 +28,8 @@
     "framer-motion": "^12.23.12",
     "react-icons": "^5.0.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "@envive-ai/react-icons": "0.1.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/atoms/search/types.ts

@@ -0,0 +1,5 @@
+export type SelectedFilterOption = {
+  id: string;
+  displayName: string;
+  value: string;
+};

package/src/components/common/ButtonBase/ButtonBase.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import { createElement, useEffect, useRef } from 'react';
+import { ButtonBaseOverrides, type ButtonBaseProps } from './types';
+import { Text } from 'src/components/common/Text/Text';
+
+export const ButtonBase = ({
+  type = 'button',
+  isDisabled = false,
+  dataAttributes,
+  buttonClass,
+  text,
+  textClass,
+  icon,
+  iconClass = 'spiffy-tw-w-[21px] spiffy-tw-h-[21px]',
+  dataTestId,
+  onClick,
+  disablePadding = false,
+}: ButtonBaseProps) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const buttonClassName = classNames({
+    [ButtonBaseOverrides.BUTTON]: true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-min-h-[36px]': true,
+    'spiffy-tw-cursor-pointer': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-gap-2': true,
+    'spiffy-tw-px-4': !disablePadding,
+    'spiffy-tw-transition-colors': true,
+    'spiffy-tw-opacity-40': isDisabled,
+    'spiffy-tw-cursor-not-allowed': isDisabled,
+    [`${buttonClass}`]: buttonClass != null,
+  });
+
+  const textClassName = classNames({
+    [ButtonBaseOverrides.BUTTON_TEXT]: true,
+    'spiffy-tw-whitespace-nowrap': true,
+    [`${textClass}`]: textClass != null,
+  });
+
+  const iconClassName = classNames({
+    [ButtonBaseOverrides.BUTTON_ICON]: true,
+    [`${iconClass}`]: iconClass != null,
+  });
+
+  useEffect(() => {
+    if (dataAttributes && buttonRef.current) {
+      Object.entries(dataAttributes).forEach(([key, value]) => {
+        buttonRef.current?.setAttribute(key, value as string);
+      });
+    }
+  }, [dataAttributes]);
+
+  return (
+    <button
+      type={type}
+      ref={buttonRef}
+      className={buttonClassName}
+      disabled={isDisabled}
+      data-testid={dataTestId}
+      onClick={onClick}
+    >
+      {icon &&
+        createElement(icon, {
+          className: iconClassName,
+        })}
+      <Text className={textClassName}>{text}</Text>
+    </button>
+  );
+};

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

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, CSSProperties } from 'react';
+import type { TestProps } from 'src/components/test/types';
+
+export interface ButtonHoverStyles extends CSSProperties {
+  backgroundColor?: string;
+  color?: string;
+}
+
+export interface ButtonBaseProps extends TestProps {
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  isDisabled?: boolean;
+  dataAttributes?: Record<string, string>;
+  buttonClass?: string;
+  text: string;
+  textClass?: string;
+  icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  iconClass?: string;
+  onClick?: () => void;
+  disablePadding?: boolean;
+  dataTestId?: string;
+}
+
+export enum ButtonBaseOverrides {
+  BUTTON = 'spiffy-button-base-button',
+  BUTTON_TEXT = 'spiffy-button-base-button-text',
+  BUTTON_ICON = 'spiffy-button-base-button-icon',
+}

package/src/components/common/Headline/Headline.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import { HeadlineVariantMap } from '../Text/textVariantClasses';
+
+export type HeadlineVariant = 't1' | 't2' | 't3' | 'h1' | 'h2' | 'h3' | 'h4';
+
+export type HeadlineProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: HeadlineVariant;
+  testId?: string;
+  id?: string;
+};
+
+export const Headline = ({ children, className, style, testId, variant = 'h1' }: HeadlineProps) => {
+  const variantClassNames = variant ? HeadlineVariantMap[variant] : {};
+  const textClassNames = classNames(className, variantClassNames, {
+    'spiffy-tw-font-[Poppins,sans-serif]': true,
+  });
+
+  const T1 = () => (
+    <h1 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h1>
+  );
+
+  const T2 = () => (
+    <h2 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h2>
+  );
+
+  const T3 = () => (
+    <h3 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h3>
+  );
+
+  const H1 = () => (
+    <h1 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h1>
+  );
+
+  const H2 = () => (
+    <h2 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h2>
+  );
+
+  const H3 = () => (
+    <h3 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h3>
+  );
+
+  const H4 = () => (
+    <h4 data-testid={testId} className={textClassNames} style={style}>
+      {children}
+    </h4>
+  );
+
+  switch (variant) {
+    case 't1':
+      return T1();
+    case 't2':
+      return T2();
+    case 't3':
+      return T3();
+    case 'h1':
+      return H1();
+    case 'h2':
+      return H2();
+    case 'h3':
+      return H3();
+    case 'h4':
+      return H4();
+    default:
+      throw new Error(`Invalid variant: ${variant}`);
+  }
+};

package/src/components/common/ImageWithFallback/ImageWithFallback.tsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+export interface ImageWithFallbackProps {
+  src: string | undefined;
+  alt: string;
+  fallbackClassnames?: string;
+  fallback: React.ReactNode;
+  dataTestId?: string;
+  imageClassnames: string;
+  onLoad?: () => void;
+  onError?: () => void;
+}
+
+export const ImageWithFallback = ({
+  src,
+  alt,
+  dataTestId,
+  fallbackClassnames,
+  fallback,
+  imageClassnames,
+  onLoad,
+  onError,
+}: ImageWithFallbackProps) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const imageExtraClassnames = classNames(imageClassnames, {
+    'spiffy-tw-block': isLoaded,
+    'spiffy-tw-hidden': !isLoaded,
+  });
+
+  const fallbackMergedClassNames = classNames(
+    {
+      'spiffy-tw-flex': true,
+      'spiffy-tw-flex-col': true,
+      'spiffy-tw-items-center': true,
+    },
+    fallbackClassnames,
+  );
+
+  if (isError) {
+    return <div className={fallbackMergedClassNames}>{fallback}</div>;
+  }
+
+  return (
+    <>
+      {!isLoaded && <div className={fallbackMergedClassNames}>{fallback}</div>}
+
+      <img
+        src={src}
+        className={imageExtraClassnames}
+        data-testid={dataTestId}
+        alt={alt}
+        onLoad={() => {
+          setIsLoaded(true);
+          onLoad?.();
+        }}
+        onError={() => {
+          setIsError(true);
+          onError?.();
+        }}
+      />
+    </>
+  );
+};

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>
+  );
+};