@envive-ai/react-toolkit 0.1.0 → 0.1.2

package/src/util/splitWords.ts

@@ -0,0 +1,72 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/split-words.d.ts
+
+import type { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from './internal';
+
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+
+type RemoveLastCharacter<
+  Sentence extends string,
+  Character extends string,
+> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+export type SplitWords<
+  Sentence extends string,
+  LastCharacter extends string = '',
+  CurrentWord extends string = '',
+> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}`
+  ? FirstCharacter extends WordSeparators
+    ? // Skip word separator
+      [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>]
+    : LastCharacter extends ''
+    ? // Fist char of word
+      SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>
+    : // Case change: non-numeric to numeric, push word
+    [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>]
+    ? [
+        ...SkipEmptyWord<CurrentWord>,
+        ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>,
+      ]
+    : // Case change: numeric to non-numeric, push word
+    [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>]
+    ? [
+        ...SkipEmptyWord<CurrentWord>,
+        ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>,
+      ]
+    : // No case change: concat word
+    [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>]
+    ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`>
+    : // Case change: lower to upper, push word
+    [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>]
+    ? [
+        ...SkipEmptyWord<CurrentWord>,
+        ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>,
+      ]
+    : // Case change: upper to lower, brings back the last character, push word
+    [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>]
+    ? [
+        ...RemoveLastCharacter<CurrentWord, LastCharacter>,
+        ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>,
+      ]
+    : // No case change: concat word
+      SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`>
+  : [...SkipEmptyWord<CurrentWord>];

package/{dist/src/util/trim.d.ts → src/util/trim.ts}

@@ -1,12 +1,17 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/trim.d.ts
+
 import type { Whitespace } from './internal';
+
 /**
  * Remove spaces from the left side.
  */
 type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+
 /**
  * Remove spaces from the right side.
  */
 type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+
 /**
  * Remove leading and trailing spaces from a string.
  * @example
@@ -21,4 +26,3 @@ type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRig
  * @category Template literal
  */
 export type Trim<V extends string> = TrimLeft<TrimRight<V>>;
-export {};

package/dist/packages/components/src/atoms/search/types.d.ts

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

package/dist/packages/components/src/atoms/search/types.js

@@ -1 +0,0 @@
-export {};

package/dist/packages/components/src/components/common/ButtonBase/ButtonBase.d.ts

@@ -1,2 +0,0 @@
-import { type ButtonBaseProps } from './types';
-export declare const ButtonBase: ({ type, isDisabled, dataAttributes, buttonClass, text, textClass, icon, iconClass, dataTestId, onClick, disablePadding, }: ButtonBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/common/ButtonBase/ButtonBase.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { createElement, useEffect, useRef } from 'react';
-import { ButtonBaseOverrides } 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, }) => {
-    const buttonRef = useRef(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);
-            });
-        }
-    }, [dataAttributes]);
-    return (_jsxs("button", { type: type, ref: buttonRef, className: buttonClassName, disabled: isDisabled, "data-testid": dataTestId, onClick: onClick, children: [icon &&
-                createElement(icon, {
-                    className: iconClassName,
-                }), _jsx(Text, { className: textClassName, children: text })] }));
-};

package/dist/packages/components/src/components/common/ButtonBase/types.d.ts

@@ -1,24 +0,0 @@
-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 declare enum ButtonBaseOverrides {
-    BUTTON = "spiffy-button-base-button",
-    BUTTON_TEXT = "spiffy-button-base-button-text",
-    BUTTON_ICON = "spiffy-button-base-button-icon"
-}

package/dist/packages/components/src/components/common/ButtonBase/types.js

@@ -1,6 +0,0 @@
-export var ButtonBaseOverrides;
-(function (ButtonBaseOverrides) {
-    ButtonBaseOverrides["BUTTON"] = "spiffy-button-base-button";
-    ButtonBaseOverrides["BUTTON_TEXT"] = "spiffy-button-base-button-text";
-    ButtonBaseOverrides["BUTTON_ICON"] = "spiffy-button-base-button-icon";
-})(ButtonBaseOverrides || (ButtonBaseOverrides = {}));

package/dist/packages/components/src/components/common/Headline/Headline.d.ts

@@ -1,10 +0,0 @@
-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 declare const Headline: ({ children, className, style, testId, variant }: HeadlineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/common/Headline/Headline.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { HeadlineVariantMap } from '../Text/textVariantClasses';
-export const Headline = ({ children, className, style, testId, variant = 'h1' }) => {
-    const variantClassNames = variant ? HeadlineVariantMap[variant] : {};
-    const textClassNames = classNames(className, variantClassNames, {
-        'spiffy-tw-font-[Poppins,sans-serif]': true,
-    });
-    const T1 = () => (_jsx("h1", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    const T2 = () => (_jsx("h2", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    const T3 = () => (_jsx("h3", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    const H1 = () => (_jsx("h1", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    const H2 = () => (_jsx("h2", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    const H3 = () => (_jsx("h3", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    const H4 = () => (_jsx("h4", { "data-testid": testId, className: textClassNames, style: style, children: children }));
-    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/dist/packages/components/src/components/common/ImageWithFallback/ImageWithFallback.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface ImageWithFallbackProps {
-    src: string | undefined;
-    alt: string;
-    fallbackClassnames?: string;
-    fallback: React.ReactNode;
-    dataTestId?: string;
-    imageClassnames: string;
-    onLoad?: () => void;
-    onError?: () => void;
-}
-export declare const ImageWithFallback: ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError, }: ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/common/ImageWithFallback/ImageWithFallback.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { useState } from 'react';
-export const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError, }) => {
-    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 _jsx("div", { className: fallbackMergedClassNames, children: fallback });
-    }
-    return (_jsxs(_Fragment, { children: [!isLoaded && _jsx("div", { className: fallbackMergedClassNames, children: fallback }), _jsx("img", { src: src, className: imageExtraClassnames, "data-testid": dataTestId, alt: alt, onLoad: () => {
-                    setIsLoaded(true);
-                    onLoad?.();
-                }, onError: () => {
-                    setIsError(true);
-                    onError?.();
-                } })] }));
-};

package/dist/packages/components/src/components/common/ProductCard/ProductCard.d.ts

@@ -1,39 +0,0 @@
-import type { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant } from './types';
-import { ChatElementDisplayLocation } from '@envive/components';
-import { TestProps } from '../../test/types';
-interface RatingSummaryProps {
-    stars: number;
-    reviewCount: number;
-    className?: string;
-}
-export declare const RatingSummary: ({ stars, reviewCount, className }: RatingSummaryProps) => import("react/jsx-runtime").JSX.Element;
-interface PriceSectionProps {
-    originalPrice?: string;
-    salePrice?: string;
-    pricePrefix?: string;
-}
-export declare const PriceSection: ({ originalPrice, salePrice, pricePrefix }: PriceSectionProps) => import("react/jsx-runtime").JSX.Element;
-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 declare const ProductCard: ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant, zoomOnHover, aspectRatio, growWithContainer, handleClick, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/packages/components/src/components/common/ProductCard/ProductCard.js

@@ -1,83 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { MdStar } from 'react-icons/md';
-import { Text } from '../Text/Text';
-import { variantClassMap, variantHoverClassMap, productCardLayoutVariantClasses, variantTitleColorMap, } from './productCardVariants';
-import { Headline } from '../Headline/Headline';
-import { Spinner } from '../Spinner/Spinner';
-import { formatPrice, ImageWithFallback } from '@envive/components';
-import Logger from '@envive/components/logging/logger';
-const formatReviews = (stars) => String(Number(stars).toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }));
-export const RatingSummary = ({ stars, reviewCount, className }) => {
-    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 (_jsx("div", { className: className, children: _jsxs("div", { className: group, children: [_jsx(MdStar, { className: starClassnames }), _jsx(Text, { variant: "body3", children: formatReviews(stars) }), _jsxs(Text, { variant: "body3", children: ["(", reviewCount, ")"] })] }) }));
-};
-export const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
-    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 (_jsxs("div", { className: priceClassName, children: [pricePrefix && _jsx(Text, { children: pricePrefix }), showSalePrice && _jsx(Text, { children: salePrice }), _jsx(Text, { className: showSalePrice ? 'spiffy-tw-line-through' : '', children: originalPrice })] }));
-};
-export const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = 'normal', zoomOnHover = false, aspectRatio = 'none', growWithContainer = false, handleClick, }) => {
-    // 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 (_jsx("div", { className: containerClassnames, "data-testid": dataTestId, children: _jsx("a", { href: url, onClick: () => handleClick(url || ''), target: "_self", draggable: false, children: _jsxs("div", { className: verticalContainerClassnames, children: [_jsx("div", { className: imageClipContainerClassnames, children: _jsx("div", { className: imageContainerClassnames, children: imageUrl && (_jsx(ImageWithFallback
-                            // TODO: Fix once
-                            // src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
-                            , { 
-                                // TODO: Fix once
-                                // src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
-                                src: imageUrl, alt: title, fallback: _jsx(Spinner, { className: "spiffy-tw-w-6 spiffy-tw-h-6" }), imageClassnames: imageClassnames })) }) }), _jsxs("div", { className: contentClassnames, children: [_jsx(Headline, { variant: "h4", className: productTitleClassnames, children: title }), _jsxs("div", { className: priceAndRatingContainerClassnames, children: [(originalPrice || salePrice) && (_jsx(PriceSection, { originalPrice: formatPrice(originalPrice), salePrice: formatPrice(salePrice), pricePrefix: pricePrefix })), averageRating && numberReviews && (_jsx(RatingSummary, { stars: averageRating, reviewCount: numberReviews }))] })] })] }) }) }));
-};

package/dist/packages/components/src/components/common/ProductCard/ProductCardSkeleton.d.ts

@@ -1,9 +0,0 @@
-import type { FC } from 'react';
-import { type ProductCardLayoutVariant } from './types';
-interface ProductCardSkeletonProps {
-    layoutVariant: ProductCardLayoutVariant;
-    aspectRatio?: '3:4' | 'square' | 'none';
-    growWithContainer?: boolean;
-}
-export declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;
-export {};

package/dist/packages/components/src/components/common/ProductCard/ProductCardSkeleton.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { ProductCardSkeletonOverrides } from './types';
-import { productCardLayoutVariantClasses } from './productCardVariants';
-export const ProductCardSkeleton = ({ 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 (_jsx("div", { className: containerClasses, children: _jsxs("div", { className: verticalContainerClasses, children: [_jsx("div", { className: imageClipContainerClasses, children: _jsx("div", { className: imageSkeletonClasses }) }), _jsxs("div", { className: contentContainerClasses, children: [_jsx("div", { className: classNames(textSkeletonClasses, 'spiffy-tw-w-full') }), _jsx("div", { className: classNames(textSkeletonClasses, 'spiffy-tw-w-[60%]') })] })] }) }));
-};

package/dist/packages/components/src/components/common/ProductCard/productCardVariants.d.ts

@@ -1,8 +0,0 @@
-import type { ProductCardVariant, ProductCardHoverVariant, ProductCardLayoutVariant } from './types';
-/**
- * Shared variant mapping configurations for ProductCard components
- */
-export declare const variantClassMap: Map<ProductCardVariant, string[]>;
-export declare const variantHoverClassMap: Map<ProductCardHoverVariant, string[]>;
-export declare const variantTitleColorMap: Map<ProductCardVariant, string>;
-export declare const productCardLayoutVariantClasses: Record<ProductCardLayoutVariant, Record<string, string[]>>;

package/dist/packages/components/src/components/common/ProductCard/productCardVariants.js

@@ -1,50 +0,0 @@
-/**
- * Shared variant mapping configurations for ProductCard components
- */
-export const variantClassMap = new Map([
-    ['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([
-    ['backgroundDark', ['hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]']],
-    ['none', []],
-]);
-export const variantTitleColorMap = new Map([
-    ['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 = {
-    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/dist/packages/components/src/components/common/ProductCard/types.d.ts

@@ -1,39 +0,0 @@
-import type { ResponseCategory, SearchResponseProduct } from '../../../../../../src/types/external';
-import type { CamelCasedPropertiesDeep } from '../../../../../../src/util/camelCasedPropertiesDeep';
-export declare enum ProductCardSkeletonOverrides {
-    PRODUCT_CARD_SKELETON_CONTAINER = "spiffy-product-card-skeleton-container",
-    PRODUCT_CARD_SKELETON = "spiffy-product-card-skeleton"
-}
-export declare 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/dist/packages/components/src/components/common/ProductCard/types.js

@@ -1,10 +0,0 @@
-export var ProductCardSkeletonOverrides;
-(function (ProductCardSkeletonOverrides) {
-    ProductCardSkeletonOverrides["PRODUCT_CARD_SKELETON_CONTAINER"] = "spiffy-product-card-skeleton-container";
-    ProductCardSkeletonOverrides["PRODUCT_CARD_SKELETON"] = "spiffy-product-card-skeleton";
-})(ProductCardSkeletonOverrides || (ProductCardSkeletonOverrides = {}));
-export var AnimatedProductCardOverrides;
-(function (AnimatedProductCardOverrides) {
-    AnimatedProductCardOverrides["PRODUCT_CARD_ANIMATED_CONTAINER"] = "spiffy-product-card-animated-container";
-    AnimatedProductCardOverrides["PRODUCT_CARD_ANIMATED_IMAGE_CONTAINER"] = "spiffy-product-card-animated";
-})(AnimatedProductCardOverrides || (AnimatedProductCardOverrides = {}));

package/dist/packages/components/src/components/common/ProductGrid/ProductGrid.d.ts

@@ -1,14 +0,0 @@
-import type { ProductCardConfig, ProductGridVariant } from '../ProductCard/types';
-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 declare const ProductGrid: ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer, handleClick, }: ProductGridProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/packages/components/src/components/common/ProductGrid/ProductGrid.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ProductCard } from '../ProductCard/ProductCard';
-import { productGridVariantClasses } from './productGridVariants';
-import classNames from 'classnames';
-import { ChatElementDisplayLocation } from '../../../../../../src/config/chatElementDisplayLocation';
-export const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true, handleClick, }) => {
-    const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover, } = productGridVariantClasses[productGridVariant];
-    const cardContainerClasses = classNames({
-        'spiffy-tw-w-full': cardsGrowWithContainer,
-        'spiffy-tw-h-full': cardsGrowWithContainer,
-    });
-    return (_jsx("div", { className: productGridClasses, children: productList.map((product, index) => (_jsx("div", { className: cardContainerClasses, children: _jsx(ProductCard, { productCardConfig: productCardConfig, merchantShortName: merchantShortName, 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 }, product.id) }, product.id))) }));
-};

package/dist/packages/components/src/components/common/ProductGrid/productGridVariants.d.ts

@@ -1,10 +0,0 @@
-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 declare const productGridVariantClasses: Record<ProductGridVariant, ProductGridVariantClasses>;
-export {};

package/dist/packages/components/src/components/common/ProductGrid/productGridVariants.js

@@ -1,16 +0,0 @@
-export const productGridVariantClasses = {
-    standard: {
-        productCardVariant: 'minimal',
-        productCardHoverVariant: 'backgroundDark',
-        productCardLayoutVariant: 'tall',
-        productCardImageAspectRatio: '3:4',
-        zoomOnHover: true,
-    },
-    square: {
-        productCardVariant: 'minimal',
-        productCardHoverVariant: 'backgroundDark',
-        productCardLayoutVariant: 'square',
-        productCardImageAspectRatio: 'square',
-        zoomOnHover: true,
-    },
-};

package/dist/packages/components/src/components/common/SparkleAnimation/SparkleAnimation.d.ts

@@ -1,7 +0,0 @@
-interface SparkleAnimationProps {
-    color: string;
-    className?: string;
-    animate?: boolean;
-}
-export declare const SparkleAnimation: ({ color, className, animate }: SparkleAnimationProps) => import("react/jsx-runtime").JSX.Element;
-export {};