@envive-ai/react-toolkit 0.1.0 → 0.1.1

package/src/components/common/Text/Text.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import { type TextType, type TextVariant } from './types';
+import { TextVariantMap } from './textVariantClasses';
+
+type TextProps = {
+  children: React.ReactNode;
+  noOfLines?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: TextVariant;
+  type?: TextType;
+  testId?: string;
+};
+
+export const Text = ({
+  children,
+  className,
+  style,
+  noOfLines,
+  testId,
+  type = 'span',
+  variant = 'body3',
+}: TextProps) => {
+  const variantClassNames = variant ? TextVariantMap[variant] : {};
+  const textClassNames = classNames(className, variantClassNames, {
+    'spiffy-tw-font-["Inter Variable,sans-serif"]': true,
+    '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,
+  });
+
+  switch (type) {
+    case 'p':
+      return (
+        <p data-testid={testId} className={textClassNames} style={style}>
+          {children}
+        </p>
+      );
+    case 'span':
+      return (
+        <span data-testid={testId} className={textClassNames} style={style}>
+          {children}
+        </span>
+      );
+    case 'sub':
+      return (
+        <sub data-testid={testId} className={textClassNames} style={style}>
+          {children}
+        </sub>
+      );
+    default:
+      throw new Error(`Invalid text type: ${type}`);
+  }
+};

package/src/components/common/Text/textVariantClasses.ts

@@ -0,0 +1,106 @@
+// TODO: add the rest of the variants as needed
+export 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,
+  },
+};
+
+// TODO: add the rest of the variants as needed
+export 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,
+  },
+};
+
+export const TextStyleVariantMap = {
+  ...TextVariantMap,
+  ...HeadlineVariantMap,
+};
+
+export const getVariantPlaceholderClassNames = (classes: Record<string, boolean>) => {
+  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;
+  }, {} as Record<string, boolean>);
+}

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

@@ -0,0 +1,23 @@
+export enum ExpandableTextOverrides {
+  EXPANDABLE_TEXT_CONTAINER = 'spiffy-expandable-text-container',
+  EXPANDABLE_TEXT = 'spiffy-expandable-text',
+  EXPANDABLE_BUTTON = 'spiffy-expandable-button',
+}
+
+// This is an incomplete list of text variants
+// TODO: add the rest of the variants as needed
+export type TextVariant = 'body1' | 'body2' | 'body3' | 'body4' | 'body5';
+export type TextType = 'p' | 'span' | 'sub';
+
+export type HeadlineProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: HeadlineVariant;
+  testId?: string;
+  id?: string;
+};
+
+// This is an incomplete list of text variants
+// TODO: add the rest of the variants as needed
+export type HeadlineVariant = 't1' | 't2' | 't3' | 'h1' | 'h2' | 'h3' | 'h4';

package/src/components/common/TextInput/TextInput.tsx

@@ -0,0 +1,34 @@
+// Disabling this prevents an otherwise simple wrapper around input
+// from becoming needlessly verbose while maintaining flexibility.
+// Keeping it enabled requires listing every possible prop.
+import React from 'react';
+import classNames from 'classnames';
+import { getVariantPlaceholderClassNames, TextStyleVariantMap } from '../Text/textVariantClasses';
+
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  borderRadius: 'sm' | 'md' | 'lg' | 'xl';
+  borderColorClass?: string;
+  placeholderVariant?: keyof typeof TextStyleVariantMap;
+}
+
+export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  ({ className, borderRadius, borderColorClass, placeholderVariant, ...rest }, ref) => {
+    const variantClassNames = placeholderVariant ? TextStyleVariantMap[placeholderVariant] : {};
+    const placeholderVariantClassNames = getVariantPlaceholderClassNames(variantClassNames);
+    const inputClasses = classNames([
+      {
+        'spiffy-text-input': true,
+        'spiffy-tw-outline-none': true,
+        'spiffy-tw-rounded-[64px]': borderRadius === 'xl',
+        'spiffy-tw-rounded-[20px]': borderRadius === 'lg',
+        'spiffy-tw-rounded-[8px]': borderRadius === 'md',
+        'spiffy-tw-rounded-[0px]': borderRadius === 'sm',
+        ...placeholderVariantClassNames,
+      },
+      borderColorClass,
+      className,
+    ]);
+
+    return <input ref={ref} {...rest} className={inputClasses} />;
+  },
+);

package/src/components/models/colorsConfig.ts

@@ -0,0 +1,28 @@
+enum ColorNames {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+  TextAccent = 'text-accent',
+  TextLink = 'text-link',
+  TextLight = 'text-light',
+  BackgroundPrimary = 'background-primary',
+  BackgroundSecondary = 'background-secondary',
+  BackgroundSecondaryDark = 'background-secondary-dark',
+  BackgroundTertiary = 'background-tertiary',
+  BackgroundDark = 'background-dark',
+  BackgroundLight = 'background-light',
+  BackgroundSaturated = 'background-saturated',
+  BorderLight = 'border-light',
+  BorderMedium = 'border-medium',
+  BorderDark = 'border-dark',
+  BorderOutline = 'border-outline',
+  AccentPrimary = 'accent-primary',
+  AccentSecondary = 'accent-secondary',
+}
+
+type ColorMapping = {
+  [key in ColorNames]: string;
+};
+
+const colorVar = (color: ColorNames): string => `var(--spiffy-colors-${color})`;
+export { ColorNames, colorVar };
+export type { ColorMapping };

package/src/components/search/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from 'src/components/common/Text/Text';
+import type { SelectedFilterOption } from 'src/atoms/search/types';
+
+interface AppliedFiltersScrollbarProps {
+  selectedFilterOptions: SelectedFilterOption[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  appliedFilterBackgroundClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+}
+
+export const AppliedFiltersScrollbar = ({
+  selectedFilterOptions,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  appliedFilterBackgroundClasses,
+  onRemoveFilter,
+}: AppliedFiltersScrollbarProps) => {
+  if (selectedFilterOptions.length === 0) {
+    return null;
+  }
+
+  // Extract border and text classes from filterDefaultClasses, excluding background because everything is shared between filters except for the applied filters background
+  const filterDefaultWithoutBg = filterDefaultClasses
+    .replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, '')
+    .trim();
+  const buttonClasses = classNames(
+    ' spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap',
+    filterHoverClasses,
+    filterDefaultWithoutBg,
+    appliedFilterBackgroundClasses,
+  );
+  const iconColor = 'currentColor'; // match with text color
+
+  return (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {selectedFilterOptions.map((filter) => {
+        return (
+          <button
+            key={filter.id}
+            className={buttonClasses}
+            type="button"
+            onClick={() => onRemoveFilter(filter)}
+            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>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="10"
+                height="10"
+                viewBox="0 0 10 10"
+                fill="none"
+              >
+                <path
+                  d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
+                  fill={iconColor}
+                />
+              </svg>
+            </div>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/search/FilterScrollbar/DynamicFiltersScrollbar.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from 'src/components/common/Text/Text';
+
+interface DynamicFiltersScrollbarProps {
+  availableDynamicFilters: { name: string; displayName: string }[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName,
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+
+export const DynamicFiltersScrollbar = ({
+  availableDynamicFilters,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  onToggleDynamicFilter,
+}: DynamicFiltersScrollbarProps) => {
+  return (
+    <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 ',
+          filterHoverClasses,
+          filterDefaultClasses,
+        );
+        return (
+          <button
+            key={name}
+            type="button"
+            className={buttonClasses}
+            onClick={() => {
+              onToggleDynamicFilter({
+                filter: name,
+                dynamicFilterDisplayName: displayName,
+              });
+            }}
+          >
+            <Text variant="body3">{displayName}</Text>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/search/SearchFilter/SearchFilter.tsx

@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import { SearchFilterItem } from './SearchFilterItem';
+import type { SearchFilterProps } from './types';
+import { Text } from 'src/components/common/Text/Text';
+import { ButtonBase } from 'src/components/common/ButtonBase/ButtonBase';
+
+export const SearchFilter = ({
+  isOpen,
+  setIsOpen,
+  filters,
+  // productCount,
+  selectFilterItem,
+  clearAllFilters,
+  // applyFiltersUnchangedClasses,
+  // applyFiltersChangedClasses,
+  filterButtonText,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+  // filterCloseIconVariant,
+  headerContent,
+}: SearchFilterProps) => {
+  const modalClasses = classNames(
+    'spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all',
+    {
+      'spiffy-tw-translate-x-full': !isOpen,
+      'spiffy-tw-translate-x-0': isOpen,
+    },
+  );
+
+  const overlayClasses = classNames(
+    'spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50',
+    {
+      'spiffy-tw-opacity-0': !isOpen,
+      'spiffy-tw-opacity-100': isOpen,
+    },
+  );
+
+  const sidebarClasses = classNames(
+    'spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl',
+  );
+
+  return (
+    <div className={modalClasses}>
+      <div className={overlayClasses} onClick={() => setIsOpen(false)} />
+      <div className={sidebarClasses}>
+        {headerContent}
+        <div className="spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6">
+          {filters.map((filter) => (
+            <div key={filter.id} className="spiffy-tw-mb-6">
+              <Text variant="body2" className="spiffy-tw-font-medium spiffy-tw-mb-3">
+                {filter.displayName}
+              </Text>
+              <ul>
+                {filter.items.map((item) => (
+                  <SearchFilterItem
+                    key={item.id}
+                    filterItem={item}
+                    onSelectFilterItem={selectFilterItem}
+                    radioButtonFillColor={radioButtonFillColor}
+                    radioButtonHoverColor={radioButtonHoverColor}
+                    radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+                  />
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3">
+          <ButtonBase
+            onClick={clearAllFilters}
+            text="Clear All"
+            buttonClass="spiffy-tw-w-full spiffy-tw-mb-2"
+          />
+          <ButtonBase
+            onClick={() => setIsOpen(false)}
+            text={filterButtonText}
+            buttonClass="spiffy-tw-w-full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/search/SearchFilter/SearchFilterHeader.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { Text } from 'src/components/common/Text/Text';
+import type { SearchFilterHeaderProps } from './types';
+
+export const SearchFilterHeader = ({
+  closeModal,
+  productCount,
+  headerClassName,
+  filterCloseIconVariant,
+}: SearchFilterHeaderProps) => {
+  const closeIconColor =
+    filterCloseIconVariant === 'dark'
+      ? 'var(--spiffy-colors-text-primary)'
+      : 'var(--spiffy-colors-text-light)';
+
+  return (
+    <div
+      className={classNames(
+        'spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3',
+        headerClassName,
+      )}
+    >
+      <Text variant="body2" className="spiffy-tw-font-medium">
+        Filters ({productCount})
+      </Text>
+      <button onClick={closeModal} className="spiffy-tw-p-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+        >
+          <path
+            d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z"
+            fill={closeIconColor}
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};

package/src/components/search/SearchFilter/SearchFilterItem.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { Text } from 'src/components/common/Text/Text';
+import type { SearchFilterItemProps } from './types';
+
+export const SearchFilterItem = ({
+  filterItem,
+  onSelectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+}: SearchFilterItemProps) => {
+  const { displayName, isSelected } = filterItem;
+
+  const radioClasses = classNames(
+    'spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2',
+    'spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center',
+    radioButtonUncheckedBorderColor,
+    radioButtonHoverColor,
+    {
+      [radioButtonFillColor]: isSelected,
+    },
+  );
+
+  return (
+    <li
+      className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer"
+      onClick={() => onSelectFilterItem(filterItem)}
+    >
+      <Text variant="body3">{displayName}</Text>
+      <div className={radioClasses}>
+        {isSelected && (
+          <div
+            className={classNames('spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full', {
+              'spiffy-tw-bg-white': radioButtonFillColor.includes('spiffy-tw-bg-'),
+              'spiffy-tw-bg-black': radioButtonFillColor.includes('spiffy-tw-bg-white'),
+            })}
+          />
+        )}
+      </div>
+    </li>
+  );
+};

package/src/components/search/SearchFilter/types.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+
+export type SearchFilterItem = {
+  id: string;
+  displayName: string;
+  value: string;
+  isSelected: boolean;
+};
+
+export type SearchFilter = {
+  id: string;
+  displayName: string;
+  items: SearchFilterItem[];
+};
+
+export type SelectFilterItem = (filterItem: SearchFilterItem) => void;
+
+export interface SearchFilterItemProps {
+  filterItem: SearchFilterItem;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+
+export interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+
+export 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;
+}