@envive-ai/react-toolkit 0.1.13 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.13",
+  "version": "0.2.1",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,10 +24,10 @@
     "build": "tsdown",
     "build:watch": "tsdown --watch",
     "prepublish": "npm run build",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-icons": "0.1.1",
     "@envive-ai/react-hooks": "^0.1.8",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
@@ -45,13 +45,18 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "vitest": "^3.2.4"
   },
   "exports": {
     "./Accordion": {
       "import": "./dist/Accordion/index.js",
       "require": "./dist/Accordion/index.cjs"
     },
+    "./AnimatedChevron": {
+      "import": "./dist/AnimatedChevron/index.js",
+      "require": "./dist/AnimatedChevron/index.cjs"
+    },
     "./AppliedFiltersScrollbar": {
       "import": "./dist/AppliedFiltersScrollbar/index.js",
       "require": "./dist/AppliedFiltersScrollbar/index.cjs"
@@ -68,10 +73,6 @@
       "import": "./dist/FilterScrollbar/index.js",
       "require": "./dist/FilterScrollbar/index.cjs"
     },
-    "./Headline": {
-      "import": "./dist/Headline/index.js",
-      "require": "./dist/Headline/index.cjs"
-    },
     "./ImageWithFallback": {
       "import": "./dist/ImageWithFallback/index.js",
       "require": "./dist/ImageWithFallback/index.cjs"
@@ -136,10 +137,6 @@
       "import": "./dist/SuggestionButton/index.js",
       "require": "./dist/SuggestionButton/index.cjs"
     },
-    "./Text": {
-      "import": "./dist/Text/index.js",
-      "require": "./dist/Text/index.cjs"
-    },
     "./TextInput": {
       "import": "./dist/TextInput/index.js",
       "require": "./dist/TextInput/index.cjs"
@@ -148,6 +145,10 @@
       "import": "./dist/ToggleButton/index.js",
       "require": "./dist/ToggleButton/index.cjs"
     },
+    "./Typography": {
+      "import": "./dist/Typography/index.js",
+      "require": "./dist/Typography/index.cjs"
+    },
     "./package.json": "./package.json"
   }
 }

package/src/atoms/search/types.ts

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

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 import ChevronDown from '@envive-ai/react-icons/ChevronDown';
 
 interface AccordionProps {
@@ -46,9 +46,9 @@ export const Accordion = ({ title, content }: AccordionProps) => {
         className={titleWrapperClasses}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <Text variant="body4" className={titleClasses}>
+        <Typography variant="body4" className={titleClasses}>
           {title}
-        </Text>
+        </Typography>
         <motion.div
           variants={{
             open: {

package/src/components/AnimatedChevron/index.ts

@@ -0,0 +1 @@
+export * from './AnimatedChevron';

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 
 interface AppliedFiltersScrollbarProps {
@@ -47,7 +47,7 @@ export const AppliedFiltersScrollbar = ({
           aria-label={`Remove filter: ${filter.displayName}`}
         >
           <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
-            <Text variant="body3">{filter.displayName}</Text>
+            <Typography variant="body3">{filter.displayName}</Typography>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="10"

package/src/components/ButtonBase/ButtonBase.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { createElement, useEffect, useRef } from 'react';
 import { ButtonBaseOverrides, ButtonBaseProps } from './types';
-import { Text } from '../Text/Text';
+import { Typography } from '../Typography';
 
 export const ButtonBase = ({
   isDisabled = false,
@@ -63,7 +63,7 @@ export const ButtonBase = ({
         createElement(icon, {
           className: iconClassName,
         })}
-      <Text className={textClassName}>{text}</Text>
+      <Typography className={textClassName}>{text}</Typography>
     </button>
   );
 };

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 
 interface DynamicFiltersScrollbarProps {
   availableDynamicFilters: { name: string; displayName: string }[];
@@ -42,7 +42,7 @@ export const DynamicFiltersScrollbar = ({
             });
           }}
         >
-          <Text variant="body3">{displayName}</Text>
+          <Typography variant="body3">{displayName}</Typography>
         </button>
       );
     })}

package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -1,7 +1,7 @@
 import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from 'src/components/Text/Text';
+import { Typography } from 'src/components/Typography';
 
 interface AppliedFiltersScrollbarProps {
   selectedFilterOptions: SelectedFilterOption[];
@@ -47,7 +47,7 @@ export const AppliedFiltersScrollbar = ({
           aria-label={`Remove filter: ${filter.displayName}`}
         >
           <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
-            <Text variant="body3">{filter.displayName}</Text>
+            <Typography variant="body3">{filter.displayName}</Typography>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="10"

package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from 'src/components/Text/Text';
+import { Typography } from 'src/components/Typography';
 
 interface DynamicFiltersScrollbarProps {
   availableDynamicFilters: { name: string; displayName: string }[];
@@ -42,7 +42,7 @@ export const DynamicFiltersScrollbar = ({
             });
           }}
         >
-          <Text variant="body3">{displayName}</Text>
+          <Typography variant="body3">{displayName}</Typography>
         </button>
       );
     })}

package/src/components/ProductCard/ProductCard.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { MdStar } from 'react-icons/md';
 import Logger from 'src/logging/logger';
-import { Text } from 'src/components/Text/Text';
+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';
@@ -11,7 +11,6 @@ import {
   productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
-import { Headline } from '../Headline';
 import { ImageWithFallback } from '../ImageWithFallback';
 import { Spinner } from '../Spinner';
 import {
@@ -55,8 +54,8 @@ export const RatingSummary = ({ stars, reviewCount, className }: RatingSummaryPr
     <div className={className}>
       <div className={group}>
         <MdStar className={starClassnames} />
-        <Text variant="body3">{formatReviews(stars)}</Text>
-        <Text variant="body3">({reviewCount})</Text>
+        <Typography variant="body3">{formatReviews(stars)}</Typography>
+        <Typography variant="body3">({reviewCount})</Typography>
       </div>
     </div>
   );
@@ -88,9 +87,11 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
 
   return (
     <div className={priceClassName}>
-      {pricePrefix && <Text>{pricePrefix}</Text>}
-      {showSalePrice && <Text>{salePrice}</Text>}
-      <Text className={showSalePrice ? 'spiffy-tw-line-through' : ''}>{originalPrice}</Text>
+      {pricePrefix && <Typography>{pricePrefix}</Typography>}
+      {showSalePrice && <Typography>{salePrice}</Typography>}
+      <Typography className={showSalePrice ? 'spiffy-tw-line-through' : ''}>
+        {originalPrice}
+      </Typography>
     </div>
   );
 };
@@ -275,9 +276,9 @@ export const ProductCard = ({
             </div>
           </div>
           <div className={contentClassnames}>
-            <Headline variant="h4" className={productTitleClassnames}>
+            <Typography variant="h4" className={productTitleClassnames}>
               {title}
-            </Headline>
+            </Typography>
             <div className={priceAndRatingContainerClassnames}>
               {(originalPrice || salePrice) && (
                 <PriceSection

package/src/components/RadioButton/RadioButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 import { useState } from 'react';
 import { TestProps } from '@envive-ai/react-hooks/types';
 
@@ -91,7 +91,7 @@ export const RadioButton = ({
           {checked && <circle cx="12" cy="12" r="9" fill={getFillColor()} />}
         </svg>
       </div>
-      <Text variant="body3">{label}</Text>
+      <Typography variant="body3">{label}</Typography>
     </>
   );
 };

package/src/components/SearchFilter/SearchFilterHeader.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Text } from 'src/components/Text/Text';
+import { Typography } from 'src/components/Typography';
 import type { SearchFilterHeaderProps } from './types';
 
 export const SearchFilterHeader = ({
@@ -20,9 +20,9 @@ export const SearchFilterHeader = ({
         headerClassName,
       )}
     >
-      <Text variant="body2" className="spiffy-tw-font-medium">
+      <Typography variant="body2" className="spiffy-tw-font-medium">
         Filters ({productCount})
-      </Text>
+      </Typography>
       <button
         onClick={closeModal}
         className="spiffy-tw-p-2"

package/src/components/SearchFilter/SearchFilterItem.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Text } from 'src/components/Text/Text';
+import { Typography } from 'src/components/Typography';
 import type { SearchFilterItemProps } from './types';
 
 export const SearchFilterItem = ({
@@ -40,7 +40,7 @@ export const SearchFilterItem = ({
         }
       }}
     >
-      <Text variant="body3">{displayName}</Text>
+      <Typography variant="body3">{displayName}</Typography>
       <div className={radioClasses}>
         {isSelected && (
           <div

package/src/components/SearchFilter/index.ts

@@ -1,3 +1,5 @@
-export { SearchFilter } from './SearchFilter';
+export * from './SearchFilter';
 export * from './SearchFilterHeader';
-export { SearchFilterItem } from './SearchFilterItem';
+export * from './SearchFilterFooter';
+export * from './SearchFilterItem';
+export * from './utils';

package/src/components/SearchInput/SearchInput.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import MagnifyingGlassStarVariant from '@envive-ai/react-icons/MagnifyingGlassStarVariant';
 import { IconClose } from '@envive-ai/react-icons/src/index.js';
-import { SearchInputVariant } from '../SearchInputForm/types';
+import { SearchInputVariant } from '@envive-ai/react-hooks/contexts/types';
 import { TextInput } from '../TextInput';
 import { searchInputVariantClasses } from './searchInputVariants';
 

package/src/components/SearchInput/searchInputVariants.ts

@@ -1,6 +1,6 @@
 import { colorVar, ColorNames } from 'src/models/colorsConfig';
-import { SearchInputVariant } from '../SearchInputForm';
-import { TextStyleVariantMap } from '../Text/textVariantClasses';
+import { SearchInputVariant } from '../../atoms/search/types';
+import { TypographyVariantMap } from '../Typography/typographyVariantClasses';
 
 type SearchInputVariantClasses = {
   searchInputIconColor: string;
@@ -9,7 +9,7 @@ type SearchInputVariantClasses = {
   searchInputActiveStarClasses: string;
   autocompleteIconColor: string;
   searchInputClasses: string;
-  placeholderVariant: keyof typeof TextStyleVariantMap;
+  placeholderVariant: keyof typeof TypographyVariantMap;
 };
 
 export const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses> = {

package/src/components/SearchInputForm/SearchInputForm.tsx

@@ -1,7 +1,7 @@
 import { SearchAutocomplete } from '../SearchAutocomplete';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
-import { SearchInputVariant } from './types';
+import { SearchInputVariant } from '../../atoms/search/types';
 
 interface SearchInputFormProps {
   searchInputVariant: SearchInputVariant;

package/src/components/SearchInputForm/index.ts

@@ -1 +1 @@
-export * from './types';
+export * from './SearchInputForm';

package/src/components/SearchResultsStates/NoSearchResultsFound.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import Sparkles from '@envive-ai/react-icons/Sparkles';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 
 interface NoSearchResultsFoundProps {
   containerPaddingClasses: string;
@@ -23,7 +23,7 @@ export const NoSearchResultsFound = ({
 
   const textPrompt =
     noResultsFoundText ||
-    'I’m sorry, I wasn’t able to find an exact match. Try changing your filters or adjusting your search query.';
+    "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query.";
 
   return (
     <div className={containerClasses}>
@@ -34,7 +34,7 @@ export const NoSearchResultsFound = ({
             style={{ color: sparkleIconColor }}
           />
         </div>
-        <Text variant="body2">{textPrompt}</Text>
+        <Typography variant="body2">{textPrompt}</Typography>
       </div>
     </div>
   );

package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
 import { productGridVariantClasses } from '../ProductGrid';
 import { SparkleAnimation } from '../SparkleAnimation';
@@ -30,7 +30,7 @@ export const SearchResultsLoadingGrid = ({
             <div className="spiffy-tw-width-[24px]">
               <SparkleAnimation color={sparkleIconColor} animate />
             </div>
-            <Text variant="body2">Finding the best options for you...</Text>
+            <Typography variant="body2">Finding the best options for you...</Typography>
           </div>
         </div>
         <div className={productGridClasses}>

package/src/components/TextInput/TextInput.tsx

@@ -4,17 +4,18 @@
 // Keeping it enabled requires listing every possible prop.
 import React from 'react';
 import classNames from 'classnames';
-import { getVariantPlaceholderClassNames, TextStyleVariantMap } from '../Text/textVariantClasses';
+
+import { getVariantPlaceholderClassNames, TypographyVariantMap } from '../Typography';
 
 export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   borderRadius: 'sm' | 'md' | 'lg' | 'xl';
   borderColorClass?: string;
-  placeholderVariant?: keyof typeof TextStyleVariantMap;
+  placeholderVariant?: keyof typeof TypographyVariantMap;
 }
 
 export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   ({ className, borderRadius, borderColorClass, placeholderVariant, ...rest }, ref) => {
-    const variantClassNames = placeholderVariant ? TextStyleVariantMap[placeholderVariant] : {};
+    const variantClassNames = placeholderVariant ? TypographyVariantMap[placeholderVariant] : {};
     const placeholderVariantClassNames = getVariantPlaceholderClassNames(variantClassNames);
     const inputClasses = classNames([
       {

package/src/components/ToggleButton/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Text } from 'src/components/Text';
+import { Typography } from 'src/components/Typography';
 
 export type ToggleButtonProps = {
   isSelected: boolean;
@@ -85,13 +85,13 @@ export const ToggleButton = ({
   return (
     <button className={buttonClassNames} onClick={onClick} type="button">
       {icon && <div className={iconClassName}>{icon}</div>}
-      <Text variant="body3" className={labelClassNames}>
+      <Typography variant="body3" className={labelClassNames}>
         {label}
-      </Text>
+      </Typography>
       {secondaryLabel && (
-        <Text variant="body4" className={secondaryLabelClassNames}>
+        <Typography variant="body4" className={secondaryLabelClassNames}>
           {secondaryLabel}
-        </Text>
+        </Typography>
       )}
     </button>
   );

package/src/components/Typography/Typography.spec.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { getElementTypeFromVariant } from './util';
+
+describe('getElementTypeFromVariant', () => {
+  it('should return the mapped header element when isHeadline is true and variant exists in TypographyDomVariantMap', () => {
+    expect(getElementTypeFromVariant('h1', true)).toBe('h1');
+    expect(getElementTypeFromVariant('h2', true)).toBe('h2');
+    expect(getElementTypeFromVariant('h3', true)).toBe('h3');
+    expect(getElementTypeFromVariant('h4', true)).toBe('h4');
+  });
+
+  it('should return "h3" when isHeadline is true and variant does not exist in TypographyDomVariantMap', () => {
+    expect(getElementTypeFromVariant('t1', true)).toBe('h3');
+    expect(getElementTypeFromVariant('body1', true)).toBe('h3');
+  });
+
+  it('should return "span" when isHeadline is false', () => {
+    expect(getElementTypeFromVariant('h1', false)).toBe('span');
+    expect(getElementTypeFromVariant('t1', false)).toBe('span');
+    expect(getElementTypeFromVariant('body1', false)).toBe('span');
+  });
+});

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import {
+  ElementTypes,
+  TypographyVariantMap,
+} from 'src/components/Typography/typographyVariantClasses';
+import { getElementTypeFromVariant } from './util';
+
+export type TypographyProps = {
+  children: React.ReactNode;
+  noOfLines?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: keyof typeof TypographyVariantMap;
+  elementType?: ElementTypes;
+  testId?: string;
+  id?: string;
+};
+
+export const Typography = ({
+  children,
+  className,
+  style,
+  noOfLines,
+  testId,
+  elementType,
+  variant = 'body3',
+  id,
+}: TypographyProps) => {
+  const variantClassNames = variant ? TypographyVariantMap[variant] : {};
+  const isHeadline = useCallback(
+    () => ['t1', 't2', 't3', 'h1', 'h2', 'h3', 'h4'].includes(variant),
+    [variant],
+  );
+
+  const renderedElementType = useMemo(() => {
+    if (elementType) {
+      return elementType;
+    }
+    if (!elementType) {
+      if (isHeadline()) {
+        return getElementTypeFromVariant(variant, isHeadline());
+      }
+    }
+    return 'span'; // default to span for body variants.
+  }, [isHeadline, variant, elementType]);
+
+  const textClassNames = classNames(className, variantClassNames, {
+    'spiffy-tw-font-[Poppins,sans-serif]': isHeadline(),
+    'spiffy-tw-font-["Inter Variable,sans-serif"]': !isHeadline(),
+    'spiffy-tw-line-clamp-1': noOfLines === 1,
+    'spiffy-tw-line-clamp-2': noOfLines === 2,
+    'spiffy-tw-line-clamp-3': noOfLines === 3,
+    'spiffy-tw-line-clamp-4': noOfLines === 4,
+    'spiffy-tw-line-clamp-5': noOfLines === 5,
+    'spiffy-tw-line-clamp-6': noOfLines === 6,
+    'spiffy-tw-line-clamp-7': noOfLines === 7,
+  });
+
+  const renderElement = (elementTypeToRender: ElementTypes) =>
+    React.createElement(
+      elementTypeToRender,
+      {
+        'data-testid': testId,
+        className: textClassNames,
+        style,
+        id,
+      },
+      children,
+    );
+
+  return renderElement(renderedElementType);
+};

package/src/components/Typography/index.ts

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './typographyVariantClasses';