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

package/dist/util/useScrollDirection.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+
+//#region src/util/useScrollDirection.ts
+const useScrollDirection = (scrollContainerRef) => {
+	const [scrollDirection, setScrollDirection] = useState(null);
+	const touchStartY = useRef(0);
+	useEffect(() => {
+		const container = scrollContainerRef?.current || window;
+		const touchTarget = scrollContainerRef?.current || document;
+		const handleWheel = (e) => {
+			if (e.deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+		};
+		const handleTouchStart = (e) => {
+			touchStartY.current = e.touches[0].clientY;
+		};
+		const handleTouchMove = (e) => {
+			const currentTouchY = e.touches[0].clientY;
+			const deltaY = touchStartY.current - currentTouchY;
+			if (Math.abs(deltaY) < 10) return;
+			if (deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+			touchStartY.current = currentTouchY;
+		};
+		container.addEventListener("wheel", handleWheel, { passive: true });
+		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
+		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+			touchTarget.removeEventListener("touchstart", handleTouchStart);
+			touchTarget.removeEventListener("touchmove", handleTouchMove);
+		};
+	}, [scrollContainerRef]);
+	return scrollDirection;
+};
+
+//#endregion
+export { useScrollDirection };

package/dist/util/useStickyVisibility.cjs

@@ -0,0 +1,38 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useScrollDirection = require('./useScrollDirection.cjs');
+let react = require("react");
+
+//#region src/util/useStickyVisibility.ts
+const useStickyVisibility = () => {
+	const [isVisible, setIsVisible] = (0, react.useState)(true);
+	const toolbarRef = (0, react.useRef)(null);
+	const [toolbarHeight, setToolbarHeight] = (0, react.useState)(0);
+	const [scrollY, setScrollY] = (0, react.useState)(0);
+	const scrollDirection = require_useScrollDirection.useScrollDirection();
+	(0, react.useEffect)(() => {
+		const handleScroll = () => {
+			setScrollY(window.scrollY);
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
+		else setIsVisible(true);
+	}, [
+		scrollDirection,
+		toolbarHeight,
+		scrollY
+	]);
+	return {
+		toolbarRef,
+		isVisible,
+		toolbarHeight
+	};
+};
+
+//#endregion
+exports.useStickyVisibility = useStickyVisibility;

package/dist/util/useStickyVisibility.d.cts

@@ -0,0 +1,10 @@
+import * as react0 from "react";
+
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+export { useStickyVisibility };

package/dist/util/useStickyVisibility.d.ts

@@ -0,0 +1,10 @@
+import * as react0 from "react";
+
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+export { useStickyVisibility };

package/dist/util/useStickyVisibility.js

@@ -0,0 +1,37 @@
+import { useScrollDirection } from "./useScrollDirection.js";
+import { useEffect, useRef, useState } from "react";
+
+//#region src/util/useStickyVisibility.ts
+const useStickyVisibility = () => {
+	const [isVisible, setIsVisible] = useState(true);
+	const toolbarRef = useRef(null);
+	const [toolbarHeight, setToolbarHeight] = useState(0);
+	const [scrollY, setScrollY] = useState(0);
+	const scrollDirection = useScrollDirection();
+	useEffect(() => {
+		const handleScroll = () => {
+			setScrollY(window.scrollY);
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+	useEffect(() => {
+		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
+	}, []);
+	useEffect(() => {
+		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
+		else setIsVisible(true);
+	}, [
+		scrollDirection,
+		toolbarHeight,
+		scrollY
+	]);
+	return {
+		toolbarRef,
+		isVisible,
+		toolbarHeight
+	};
+};
+
+//#endregion
+export { useStickyVisibility };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.13-arthur-1",
+  "version": "0.2.14",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -31,7 +31,6 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.8",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
@@ -45,16 +44,29 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
     "@spiffy-ai/commerce-api-client": "^1.1.0-SNAPSHOT.202510160819",
+    "@storybook/addon-a11y": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-vitest": "^9.1.10",
     "@storybook/react-vite": "^9.1.4",
     "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "playwright": "^1.56.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
     "tsx": "^4.20.6",
     "typescript": "^5.4.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
+  },
   "exports": {
     "./Accordion": {
       "import": "./dist/components/Accordion/index.js",

package/src/components/Accordion/Accordion.tsx

@@ -46,7 +46,10 @@ export const Accordion = ({ title, content }: AccordionProps) => {
         className={titleWrapperClasses}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <Typography variant="body4" className={titleClasses}>
+        <Typography
+          variant="body4"
+          className={titleClasses}
+        >
           {title}
         </Typography>
         <motion.div

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -37,8 +37,11 @@ export const AppliedFiltersScrollbar = ({
   const iconColor = 'currentColor'; // match with text color
 
   return (
-    <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {selectedFilterOptions.map((filter) => (
+    <ScrollContainer
+      className={filterBarClassNames}
+      hideScrollbars
+    >
+      {selectedFilterOptions.map(filter => (
         <button
           key={filter.id}
           className={buttonClasses}

package/src/components/ButtonBase/ButtonBase.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { createElement, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { ButtonBaseOverrides, ButtonBaseProps } from './types';
 import { Typography } from '../Typography';
 
@@ -15,6 +15,7 @@ export const ButtonBase = ({
   onClick,
   disablePadding = false,
 }: ButtonBaseProps) => {
+  const RenderedIcon = () => icon;
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const buttonClassName = classNames({
@@ -59,10 +60,7 @@ export const ButtonBase = ({
       data-testid={dataTestId}
       onClick={onClick}
     >
-      {icon &&
-        createElement(icon, {
-          className: iconClassName,
-        })}
+      {icon && <RenderedIcon />}
       <Typography className={textClassName}>{text}</Typography>
     </button>
   );

package/src/components/ButtonBase/types.ts

@@ -1,4 +1,3 @@
-import { TestProps } from '@envive-ai/react-hooks/types';
 import { ButtonHTMLAttributes, CSSProperties } from 'react';
 
 export interface ButtonHoverStyles extends CSSProperties {
@@ -6,17 +5,18 @@ export interface ButtonHoverStyles extends CSSProperties {
   color?: string;
 }
 
-export interface ButtonBaseProps extends TestProps {
+export interface ButtonBaseProps {
   type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   isDisabled?: boolean;
   dataAttributes?: Record<string, string>;
   buttonClass?: string;
   text: string;
   textClass?: string;
-  icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  icon?: React.ReactNode;
   iconClass?: string;
   onClick?: () => void;
   disablePadding?: boolean;
+  dataTestId?: string;
 }
 
 export enum ButtonBaseOverrides {

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -23,7 +23,10 @@ export const DynamicFiltersScrollbar = ({
   filterHoverClasses,
   onToggleDynamicFilter,
 }: DynamicFiltersScrollbarProps) => (
-  <ScrollContainer className={filterBarClassNames} hideScrollbars>
+  <ScrollContainer
+    className={filterBarClassNames}
+    hideScrollbars
+  >
     {availableDynamicFilters.map(({ name, displayName }) => {
       const buttonClasses = classNames(
         'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',

package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -37,8 +37,11 @@ export const AppliedFiltersScrollbar = ({
   const iconColor = 'currentColor'; // match with text color
 
   return (
-    <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {selectedFilterOptions.map((filter) => (
+    <ScrollContainer
+      className={filterBarClassNames}
+      hideScrollbars
+    >
+      {selectedFilterOptions.map(filter => (
         <button
           key={filter.id}
           className={buttonClasses}

package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx

@@ -23,7 +23,10 @@ export const DynamicFiltersScrollbar = ({
   filterHoverClasses,
   onToggleDynamicFilter,
 }: DynamicFiltersScrollbarProps) => (
-  <ScrollContainer className={filterBarClassNames} hideScrollbars>
+  <ScrollContainer
+    className={filterBarClassNames}
+    hideScrollbars
+  >
     {availableDynamicFilters.map(({ name, displayName }) => {
       const buttonClasses = classNames(
         'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',

package/src/components/ModalSheet/common/closeIcon.tsx

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
 import classNames from 'classnames';
-import { GrFormClose } from 'react-icons/gr';
-import { IconContext } from 'react-icons/lib';
+import IconCloseVariant from '@envive-ai/react-icons/IconCloseVariant';
 import { ModalSheetCloseIconProps } from '../types';
 
 const closeIconVariantMapping = {
@@ -21,7 +19,7 @@ const closeIconVariantMapping = {
 
 export const ModalSheetCloseIcon = ({
   closeIconVariant = 'tertiary',
-  closeIcon = <GrFormClose />,
+  closeIcon = <IconCloseVariant />,
   iconSize = '20px',
   closeModal,
 }: ModalSheetCloseIconProps) => {
@@ -31,10 +29,13 @@ export const ModalSheetCloseIcon = ({
     ...closeIconVariantMapping[closeIconVariant],
   });
 
-  const closeIconContextValue = useMemo(() => ({ size: iconSize }), [iconSize]);
   return (
-    <button type="button" className={closeIconClassNames} onClick={closeModal}>
-      <IconContext.Provider value={closeIconContextValue}>{closeIcon}</IconContext.Provider>
+    <button
+      type="button"
+      className={closeIconClassNames}
+      onClick={closeModal}
+    >
+      {closeIcon || <IconCloseVariant style={{ width: iconSize, height: iconSize }} />}
     </button>
   );
 };

package/src/components/ModalSheet/desktop/index.tsx

@@ -97,7 +97,7 @@ export const ModalSheetDesktop = ({
           exit={{ right, display: isHidden }}
           transition={{ duration: animationDuration, ease: 'easeIn' }}
           style={{ width: desktopWidth }}
-          onClick={(e) => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
         >
           <div className={contentClassNames}>
             <div className={headerClassNames}>

package/src/components/ModalSheet/mobile/index.tsx

@@ -94,7 +94,7 @@ export const ModalSheetMobile = ({
           animate={{ bottom, display: isHidden }}
           exit={{ bottom, display: isHidden }}
           transition={{ duration: animationDuration, ease: 'easeIn' }}
-          onClick={(e) => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
         >
           <div className={contentClassNames}>
             <div className={headerClassNames}>

package/src/components/ModalSheet/mobile/mobileHeader.tsx

@@ -35,7 +35,10 @@ export const ModalSheetMobileHeader = ({
       onTouchStart={handleHeaderClick}
       onMouseDown={handleHeaderClick}
     >
-      <AnimatedChevron animationKey={animationKey} chevronColor={chevronColor} />
+      <AnimatedChevron
+        animationKey={animationKey}
+        chevronColor={chevronColor}
+      />
       {headerContent}
     </motion.div>
   );

package/src/components/ProductCard/ProductCard.tsx

@@ -3,22 +3,21 @@ import { MdStar } from 'react-icons/md';
 import Logger from 'src/logging/logger';
 import { Typography } from 'src/components/Typography';
 import { formatPrice } from 'src/util/formatPrice';
-import { TestProps } from '@envive-ai/react-hooks/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
+  productCardLayoutVariantClasses,
   variantClassMap,
   variantHoverClassMap,
-  productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
 import { ImageWithFallback } from '../ImageWithFallback';
 import { Spinner } from '../Spinner';
 import {
   ProductCardConfig,
-  ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
+  ProductCardVariant,
 } from './types';
 
 const formatReviews = (stars: number) =>
@@ -97,7 +96,7 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
   );
 };
 
-interface ProductCardProps extends TestProps {
+interface ProductCardProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
@@ -114,6 +113,7 @@ interface ProductCardProps extends TestProps {
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
   onClick?: () => void;
+  dataTestId?: string;
 }
 
 export const ProductCard = ({
@@ -213,11 +213,11 @@ export const ProductCard = ({
     linkClassnames,
     zoomOnHover
       ? [
-        'spiffy-tw-transition-transform',
-        'spiffy-tw-duration-200',
-        'spiffy-tw-origin-top',
-        'hover:spiffy-tw-scale-105',
-      ]
+          'spiffy-tw-transition-transform',
+          'spiffy-tw-duration-200',
+          'spiffy-tw-origin-top',
+          'hover:spiffy-tw-scale-105',
+        ]
       : [],
   );
 
@@ -264,8 +264,16 @@ export const ProductCard = ({
   );
 
   return (
-    <div className={containerClassnames} data-testid={dataTestId ?? PRODUCT_CARD_TESTID}>
-      <a href={url} onClick={() => handleClick()} target="_self" draggable={false}>
+    <div
+      className={containerClassnames}
+      data-testid={dataTestId ?? PRODUCT_CARD_TESTID}
+    >
+      <a
+        href={url}
+        onClick={() => handleClick()}
+        target="_self"
+        draggable={false}
+      >
         <div className={verticalContainerClassnames}>
           <div className={imageClipContainerClassnames}>
             <div className={imageContainerClassnames}>
@@ -273,14 +281,17 @@ export const ProductCard = ({
                 <ImageWithFallback
                   src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
                   alt={title}
-                  fallback={<Spinner className="spiffy-tw-w-6 spiffy-tw-h-6" />}
+                  fallback={<Spinner className="spiffy-tw-h-6 spiffy-tw-w-6" />}
                   imageClassnames={imageClassnames}
                 />
               )}
             </div>
           </div>
           <div className={contentClassnames}>
-            <Typography variant="h4" className={productTitleClassnames}>
+            <Typography
+              variant="h4"
+              className={productTitleClassnames}
+            >
               {title}
             </Typography>
             <div className={priceAndRatingContainerClassnames}>
@@ -292,7 +303,10 @@ export const ProductCard = ({
                 />
               )}
               {averageRating && numberReviews && (
-                <RatingSummary stars={averageRating} reviewCount={numberReviews} />
+                <RatingSummary
+                  stars={averageRating}
+                  reviewCount={numberReviews}
+                />
               )}
             </div>
           </div>

package/src/components/ProductCard/productCardVariants.ts

@@ -1,7 +1,7 @@
 import type {
-  ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
+  ProductCardVariant,
 } from './types';
 
 /**

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
 import { productGridVariantClasses } from './productGridVariants';
-import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
+import { ProductCard, ProductCardConfig, ProductGridVariant } from '../ProductCard';
 
 interface ProductGridProps {
   productList: SearchResponseProductAttributes['attributes'][];
@@ -38,7 +38,10 @@ export const ProductGrid = ({
   return (
     <div className={productGridClasses}>
       {productList.map((product: (typeof productList)[0], index: number) => (
-        <div key={product.id} className={cardContainerClasses}>
+        <div
+          key={product.id}
+          className={cardContainerClasses}
+        >
           <ProductCard
             productCardConfig={productCardConfig}
             merchantShortName={merchantShortName}

package/src/components/RadioButton/RadioButton.tsx

@@ -82,9 +82,22 @@ export const RadioButton = ({
           fill="none"
         >
           {/* Outer circle (border). Gray when unchecked */}
-          <circle cx="12" cy="12" r="11.5" fill="white" stroke={getFillColor()} />
+          <circle
+            cx="12"
+            cy="12"
+            r="11.5"
+            fill="white"
+            stroke={getFillColor()}
+          />
           {/* Inner filled circle (when checked) */}
-          {checked && <circle cx="12" cy="12" r="9" fill={getFillColor()} />}
+          {checked && (
+            <circle
+              cx="12"
+              cy="12"
+              r="9"
+              fill={getFillColor()}
+            />
+          )}
         </svg>
       </div>
       <Typography variant="body3">{label}</Typography>

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -52,7 +52,7 @@ export const RadioButtonGroup = ({
 
   return (
     <div className={groupClassName}>
-      {options.map((option) => (
+      {options.map(option => (
         <RadioButton
           key={option.value}
           id={option.value}

package/src/components/RecommendedProducts/RecommendedProducts.tsx

@@ -1,10 +1,9 @@
-import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
-import { ProductCardConfig, ProductGridVariant } from "@envive-ai/react-hooks/contexts/types";
-import classNames from "classnames";
-import { motion } from "framer-motion";
-import { ProductGrid } from "../ProductGrid";
-import { Typography } from "../Typography";
-
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import { ProductCardConfig, ProductGridVariant } from '@envive-ai/react-hooks/contexts/types';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import { ProductGrid } from '../ProductGrid';
+import { Typography } from '../Typography';
 
 interface RecommendedProductsProps {
   retrievedProducts: SearchResponseProductAttributes['attributes'][];
@@ -79,7 +78,10 @@ export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
     >
       {heading && (
         <div className={titleContainerClasses}>
-          <Typography variant="h1" className="spiffy-tw-text-[--spiffy-colors-text-accent]">
+          <Typography
+            variant="h1"
+            className="spiffy-tw-text-[--spiffy-colors-text-accent]"
+          >
             {heading}
           </Typography>
         </div>
@@ -94,4 +96,4 @@ export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
       />
     </motion.div>
   );
-};
+};

package/src/components/RecommendedProducts/index.ts

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