@envive-ai/react-toolkit 0.1.0 → 0.1.2

package/dist/textVariantClasses-Bhf4VY5z.cjs

@@ -0,0 +1,125 @@
+
+//#region src/components/common/Text/textVariantClasses.ts
+const HeadlineVariantMap = {
+	t1: {
+		"spiffy-headline": true,
+		"spiffy-headline-1": true,
+		"spiffy-tw-text-[32px]": true,
+		"spiffy-tw-font-medium": true,
+		"spiffy-tw-leading-[124%]": true
+	},
+	t2: {
+		"spiffy-headline": true,
+		"spiffy-headline-1": true,
+		"spiffy-tw-text-[16px]": true,
+		"spiffy-tw-font-medium": true,
+		"spiffy-tw-leading-[124%]": true
+	},
+	t3: {
+		"spiffy-headline": true,
+		"spiffy-headline-1": true,
+		"spiffy-tw-text-[24px]": true,
+		"spiffy-tw-leading-[120%]": true
+	},
+	h1: {
+		"spiffy-headline": true,
+		"spiffy-headline-1": true,
+		"spiffy-tw-text-[20px]": true,
+		"spiffy-tw-font-normal": true,
+		"spiffy-tw-leading-[120%]": true
+	},
+	h2: {
+		"spiffy-headline": true,
+		"spiffy-headline-2": true,
+		"spiffy-tw-text-[16px]": true,
+		"spiffy-tw-font-normal": true,
+		"spiffy-tw-leading-[124%]": true
+	},
+	h3: {
+		"spiffy-headline": true,
+		"spiffy-headline-3": true,
+		"spiffy-tw-text-[15px]": true,
+		"spiffy-tw-font-medium": true,
+		"spiffy-tw-leading-[124%]": true
+	},
+	h4: {
+		"spiffy-headline": true,
+		"spiffy-headline-4": true,
+		"spiffy-tw-text-[14px]": true,
+		"spiffy-tw-font-medium": true,
+		"spiffy-tw-leading-[124%]": true
+	}
+};
+const TextVariantMap = {
+	body1: {
+		"spiffy-body-text": true,
+		"spiffy-body-1": true,
+		"spiffy-tw-text-[20px]": true,
+		"spiffy-tw-font-normal": true,
+		"spiffy-tw-line-height-[120%]": true
+	},
+	body2: {
+		"spiffy-body-text": true,
+		"spiffy-body-2": true,
+		"spiffy-tw-text-[16px]": true,
+		"spiffy-tw-font-normal": true,
+		"spiffy-tw-line-height-[148%]": true
+	},
+	body3: {
+		"spiffy-body-text": true,
+		"spiffy-body-3": true,
+		"spiffy-tw-text-sm": true,
+		"spiffy-tw-font-normal": true,
+		"spiffy-tw-leading-[140%]": true
+	},
+	body4: {
+		"spiffy-body-text": true,
+		"spiffy-body-4": true,
+		"spiffy-tw-text-xs": true,
+		"spiffy-tw-font-medium": true,
+		"spiffy-tw-leading-[130%]": true
+	},
+	body5: {
+		"spiffy-body-text": true,
+		"spiffy-body-5": true,
+		"spiffy-tw-text-[10px]": true,
+		"spiffy-tw-font-normal": true
+	}
+};
+const TextStyleVariantMap = {
+	...TextVariantMap,
+	...HeadlineVariantMap
+};
+const getVariantPlaceholderClassNames = (classes) => {
+	return Object.keys(classes).reduce((acc, key) => {
+		if (key.includes("spiffy-tw")) acc[`placeholder:${key}`] = classes[key];
+		else acc[`${key}-placeholder`] = classes[key];
+		return acc;
+	}, {});
+};
+
+//#endregion
+Object.defineProperty(exports, 'HeadlineVariantMap', {
+  enumerable: true,
+  get: function () {
+    return HeadlineVariantMap;
+  }
+});
+Object.defineProperty(exports, 'TextStyleVariantMap', {
+  enumerable: true,
+  get: function () {
+    return TextStyleVariantMap;
+  }
+});
+Object.defineProperty(exports, 'TextVariantMap', {
+  enumerable: true,
+  get: function () {
+    return TextVariantMap;
+  }
+});
+Object.defineProperty(exports, 'getVariantPlaceholderClassNames', {
+  enumerable: true,
+  get: function () {
+    return getVariantPlaceholderClassNames;
+  }
+});

package/dist/types-53zIialA.d.ts

@@ -0,0 +1,35 @@
+//#region src/types/external.d.ts
+
+interface SearchResponseProduct {
+  id: string;
+  title: string;
+  description?: string;
+  price?: number;
+  currency?: string;
+  imageUrl?: string;
+  brand?: string;
+  category?: string;
+  availability?: string;
+  url?: string;
+  responseId?: string;
+  originalPrice?: number;
+  salePrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  [key: string]: unknown;
+}
+//#endregion
+//#region src/components/common/ProductCard/types.d.ts
+
+type ProductGridVariant = 'standard' | 'square';
+type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
+type ProductCardHoverVariant = 'backgroundDark' | 'none';
+type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
+interface ProductCardConfig {
+  variant: ProductCardVariant;
+  hoverVariant: ProductCardHoverVariant;
+  layoutVariant: ProductCardLayoutVariant;
+  pricePrefix?: string;
+}
+//#endregion
+export { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant, SearchResponseProduct };

package/dist/types-B4BGZSlV.d.cts

@@ -0,0 +1,4 @@
+//#region src/components/search/SearchResultsFilterSidebar/types.d.ts
+type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
+//#endregion
+export { SearchFilterSidebarVariant };

package/dist/types-BQNqA5xL.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+
+//#region src/components/search/SearchFilter/types.d.ts
+type SearchFilterItem = {
+  id: string;
+  displayName: string;
+  value: string;
+  isSelected: boolean;
+};
+type SearchFilter = {
+  id: string;
+  displayName: string;
+  items: SearchFilterItem[];
+};
+type SelectFilterItem = (filterItem: SearchFilterItem) => void;
+interface SearchFilterItemProps {
+  filterItem: SearchFilterItem;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+interface SearchFilterProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  filters: SearchFilter[];
+  productCount: number;
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  filterButtonText: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+  headerContent: ReactNode;
+}
+//#endregion
+export { SearchFilter, SearchFilterHeaderProps, SearchFilterItemProps, SearchFilterProps, SelectFilterItem };

package/dist/types-BRLWwGMI.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/search/SearchInputForm/types.d.ts
+type SearchInputVariant = 'standard';
+//#endregion
+export { SearchInputVariant };

package/dist/types-CImLkcNh.d.cts

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+
+//#region src/components/search/SearchFilter/types.d.ts
+type SearchFilterItem = {
+  id: string;
+  displayName: string;
+  value: string;
+  isSelected: boolean;
+};
+type SearchFilter = {
+  id: string;
+  displayName: string;
+  items: SearchFilterItem[];
+};
+type SelectFilterItem = (filterItem: SearchFilterItem) => void;
+interface SearchFilterItemProps {
+  filterItem: SearchFilterItem;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+interface SearchFilterProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  filters: SearchFilter[];
+  productCount: number;
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  filterButtonText: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+  headerContent: ReactNode;
+}
+//#endregion
+export { SearchFilter, SearchFilterHeaderProps, SearchFilterItemProps, SearchFilterProps, SelectFilterItem };

package/dist/types-Cph97xkm.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/test/types.d.ts
+interface TestProps {
+  dataTestId?: string;
+}
+//#endregion
+export { TestProps };

package/dist/types-CpiJO5UH.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/search/SearchResultsFilterSidebar/types.d.ts
+type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
+//#endregion
+export { SearchFilterSidebarVariant };

package/dist/types-DFetqNL2.d.ts

@@ -0,0 +1,8 @@
+//#region src/atoms/search/types.d.ts
+type SelectedFilterOption = {
+  id: string;
+  displayName: string;
+  value: string;
+};
+//#endregion
+export { SelectedFilterOption };

package/dist/types-DaSkJnT_.d.cts

@@ -0,0 +1,8 @@
+//#region src/atoms/search/types.d.ts
+type SelectedFilterOption = {
+  id: string;
+  displayName: string;
+  value: string;
+};
+//#endregion
+export { SelectedFilterOption };

package/dist/types-Dy4_w6Cf.d.cts

@@ -0,0 +1,4 @@
+//#region src/components/search/SearchInputForm/types.d.ts
+type SearchInputVariant = 'standard';
+//#endregion
+export { SearchInputVariant };

package/dist/types-TYhhwWZw.d.cts

@@ -0,0 +1,6 @@
+//#region src/components/test/types.d.ts
+interface TestProps {
+  dataTestId?: string;
+}
+//#endregion
+export { TestProps };

package/dist/types-aa4flfRE.d.cts

@@ -0,0 +1,35 @@
+//#region src/types/external.d.ts
+
+interface SearchResponseProduct {
+  id: string;
+  title: string;
+  description?: string;
+  price?: number;
+  currency?: string;
+  imageUrl?: string;
+  brand?: string;
+  category?: string;
+  availability?: string;
+  url?: string;
+  responseId?: string;
+  originalPrice?: number;
+  salePrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  [key: string]: unknown;
+}
+//#endregion
+//#region src/components/common/ProductCard/types.d.ts
+
+type ProductGridVariant = 'standard' | 'square';
+type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
+type ProductCardHoverVariant = 'backgroundDark' | 'none';
+type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
+interface ProductCardConfig {
+  variant: ProductCardVariant;
+  hoverVariant: ProductCardHoverVariant;
+  layoutVariant: ProductCardLayoutVariant;
+  pricePrefix?: string;
+}
+//#endregion
+export { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant, SearchResponseProduct };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -11,17 +11,20 @@
   "author": "Envive AI",
   "license": "UNLICENSED",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
+    "build": "tsdown",
     "prepublish": "npm run build"
   },
   "dependencies": {
+    "@envive-ai/react-icons": "0.1.0",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
     "react-icons": "^5.0.1",
@@ -35,7 +38,7 @@
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
     "copyfiles": "^2.4.1",
-    "tsc-alias": "^1.8.16",
+    "tsdown": "^0.14.2",
     "typescript": "~5.8.3"
   }
 }

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, ButtonBaseProps } from './types';
+import { Text } from '../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,26 @@
+import { ButtonHTMLAttributes, CSSProperties } from 'react';
+import { 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;
+}
+
+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?.();
+        }}
+      />
+    </>
+  );
+};