@envive-ai/react-toolkit 0.1.10 → 0.1.11

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

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+
+import { ModalSheetProps } from '../types';
+import { ModalSheetMobileHeader } from './mobileHeader';
+
+export const ModalSheetMobile = ({
+  children,
+  isOpen,
+  closeModal,
+  mobileFullHeight = 180,
+  animationDuration,
+  headerProps,
+  footerProps,
+}: ModalSheetProps) => {
+  const [isHidden, setIsHidden] = useState(isOpen ? 'block' : 'none');
+  const [bottom, setBottom] = useState(isOpen ? 0 : 0 - mobileFullHeight);
+  const [overlayOpacity, setOverlayOpacity] = useState(isOpen ? 1 : 0);
+
+  useEffect(() => {
+    setIsHidden(isOpen ? 'block' : 'none');
+    setBottom(isOpen ? 0 : 0 - mobileFullHeight);
+    setOverlayOpacity(isOpen ? 1 : 0);
+  }, [mobileFullHeight, isOpen]);
+
+  // TODO: Support partial view
+
+  const overlayClassNames = classNames({
+    'spiffy-modal-sheet-overlay': true,
+    'spiffy-tw-fixed': true,
+    'spiffy-tw-inset-0': true,
+    'spiffy-tw-top-[0]': true,
+    'spiffy-tw-bottom-[0]': true,
+    'spiffy-tw-left-[0]': true,
+    'spiffy-tw-right-[0]': true,
+    'spiffy-tw-bg-black/30': true,
+    'spiffy-tw-z-[100]': true,
+  });
+
+  const modalClassNames = classNames({
+    'spiffy-modal-sheet': true,
+    'spiffy-modal-sheet-open': isOpen,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-overflow-y-auto': true,
+    'spiffy-tw-shadow-lg': true,
+    'spiffy-tw-fixed': true,
+    'spiffy-tw-bg-white': true,
+    'spiffy-tw-border-box': true,
+    'spiffy-tw-rounded-t-[16px]': true,
+    'spiffy-tw-h-[89%]': true,
+    'spiffy-tw-max-h-[89%]': true,
+  });
+
+  const contentClassNames = classNames({
+    'spiffy-modal-sheet-content': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-h-full': true,
+  });
+
+  const headerClassNames = classNames({
+    'spiffy-tw-sticky': true,
+    'spiffy-tw-top-[0px]': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+  });
+  const { footerContent, footerClassName } = footerProps || {};
+
+  const footerClassNames = classNames(
+    {
+      'spiffy-tw-sticky': true,
+      'spiffy-tw-bottom-[0px]': true,
+      'spiffy-modal-sheet-footer': true,
+      'spiffy-tw-flex': true,
+      'spiffy-tw-flex-col': true,
+    },
+    footerClassName,
+  );
+
+  return (
+    <div>
+      <motion.div
+        className={overlayClassNames}
+        animate={{ opacity: overlayOpacity, display: isHidden }}
+        onClick={closeModal}
+      >
+        <motion.div
+          role="dialog"
+          className={modalClassNames}
+          initial={{ bottom, display: isHidden }}
+          animate={{ bottom, display: isHidden }}
+          exit={{ bottom, display: isHidden }}
+          transition={{ duration: animationDuration, ease: 'easeIn' }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className={contentClassNames}>
+            <div className={headerClassNames}>
+              <ModalSheetMobileHeader
+                headerContent={headerProps.headerContent}
+                headerVariant={headerProps?.headerVariant}
+                handleHeaderClick={closeModal}
+              />
+            </div>
+            {children}
+            {/* this div will grow to fill the remaining space */}
+            <div className="spiffy-tw-flex-grow" />
+
+            {footerContent && <div className={footerClassNames}>{footerContent}</div>}
+          </div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};

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

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { motion, useMotionValue } from 'framer-motion';
+import { ModalSheetHeaderProps } from '../types';
+import { AnimatedChevron } from 'src/components/AnimatedChevron/AnimatedChevron';
+
+const modalSheetVariants = {
+  primary: {
+    'spiffy-tw-bg-[--spiffy-colors-background-primary]': true,
+    'spiffy-tw-text-[--spiffy-colors-text-light]': true,
+  },
+};
+
+export const ModalSheetMobileHeader = ({
+  headerVariant = 'primary',
+  headerContent,
+  handleHeaderClick,
+  chevronColor,
+}: ModalSheetHeaderProps) => {
+  const animationKey = useMotionValue(-1);
+  const headerClassName = classNames({
+    'spiffy-modal-sheet-header': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-justify-between': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-pt-[16px]': true,
+    'spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]': true,
+    ...modalSheetVariants[headerVariant],
+  });
+
+  return (
+    <motion.div
+      className={headerClassName}
+      onTouchStart={handleHeaderClick}
+      onMouseDown={handleHeaderClick}
+    >
+      <AnimatedChevron animationKey={animationKey} chevronColor={chevronColor} />
+      {headerContent}
+    </motion.div>
+  );
+};

package/src/components/ModalSheet/types.ts

@@ -0,0 +1,33 @@
+export type ModalSheetProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  closeModal: () => void;
+  desktopWidth?: number;
+  mobileFullHeight?: number;
+  animationDuration?: number;
+  headerProps: ModalSheetHeaderProps;
+  footerProps?: ModalSheetFooterProps;
+  showOverlay?: boolean;
+};
+
+export type ModalSheetHeaderProps = {
+  headerVariant?: ModalSheetHeaderVariant;
+  headerContent: React.ReactNode;
+  handleHeaderClick?: () => void;
+  chevronColor: string;
+};
+
+export type ModalSheetFooterProps = {
+  footerContent: React.ReactNode;
+  footerClassName?: string;
+};
+
+export type ModalSheetHeaderVariant = 'primary';
+
+export type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+export type ModalSheetCloseIconProps = {
+  closeIconVariant: CloseIconVariant;
+  closeIcon?: React.ReactNode;
+  closeModal?: () => void;
+  iconSize?: string;
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,88 @@
+import classNames from 'classnames';
+import { Text } from 'src/components/Text';
+import { useState } from 'react';
+import { TestProps } from '@envive-ai/react-hooks/types';
+
+interface RadioButtonProps extends TestProps {
+  isDisabled?: boolean;
+  label: string;
+  name: string;
+  value: string;
+  textButtonGap?: 'small' | 'medium' | 'large';
+  fillColor?: string;
+  hoverColor?: string;
+  uncheckedBorderColor?: string;
+  checked?: boolean;
+  onChange: (value: string) => void;
+}
+
+export const RadioButton = ({
+  isDisabled = false,
+  label,
+  name,
+  value,
+  textButtonGap = 'medium',
+  fillColor,
+  hoverColor,
+  uncheckedBorderColor,
+  checked = false,
+  onChange,
+}: RadioButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const containerClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-group': true,
+    'spiffy-tw-gap-1': textButtonGap === 'small',
+    'spiffy-tw-gap-2': textButtonGap === 'medium',
+    'spiffy-tw-gap-4': textButtonGap === 'large',
+    'spiffy-tw-cursor-pointer': !isDisabled,
+    'spiffy-tw-opacity-40': isDisabled,
+  });
+
+  const getFillColor = () => {
+    if (isHovered && hoverColor) return hoverColor;
+    if (checked) return fillColor;
+    return uncheckedBorderColor;
+  };
+
+  const handleChange = () => {
+    if (!isDisabled) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <label
+      className={containerClassName}
+      onMouseEnter={() => !isDisabled && setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="spiffy-tw-relative">
+        <input
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={isDisabled}
+          onChange={handleChange}
+          className="spiffy-tw-sr-only"
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          {/* Outer circle (border). Gray when unchecked */}
+          <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()} />}
+        </svg>
+      </div>
+      <Text variant="body3">{label}</Text>
+    </label>
+  );
+};

package/src/components/RadioButton/index.ts

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

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -0,0 +1,72 @@
+import { TestProps } from '@envive-ai/react-hooks/types';
+import classNames from 'classnames';
+import { RadioButton } from '../RadioButton';
+
+export const SPIFFY_RADIO_BUTTON_GROUP_CLASS = 'spiffy-radio-button-group-class';
+
+interface RadioButtonOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface RadioButtonGroupProps extends TestProps {
+  name: string;
+  options: RadioButtonOption[];
+  fillColor?: string;
+  hoverColor?: string;
+  value?: string;
+  isDisabled?: boolean;
+  gap?: 'small' | 'medium' | 'large'; // Gap between each radio button
+  textButtonGap?: 'small' | 'medium' | 'large'; // Gap between radio button and text
+  onChange: (value: string) => void;
+  uncheckedBorderColor?: string;
+}
+
+export const RadioButtonGroup = ({
+  name,
+  options,
+  fillColor,
+  hoverColor,
+  uncheckedBorderColor,
+  value,
+  isDisabled = false,
+  gap = 'medium',
+  textButtonGap = 'medium',
+  onChange,
+}: RadioButtonGroupProps) => {
+  const groupClassName = classNames({
+    [SPIFFY_RADIO_BUTTON_GROUP_CLASS]: true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-gap-1': gap === 'small',
+    'spiffy-tw-gap-2': gap === 'medium',
+    'spiffy-tw-gap-4': gap === 'large',
+  });
+
+  const handleChange = (selectedValue: string) => {
+    if (!isDisabled) {
+      onChange(selectedValue);
+    }
+  };
+
+  return (
+    <div className={groupClassName}>
+      {options.map((option) => (
+        <RadioButton
+          key={option.value}
+          name={name}
+          value={option.value}
+          fillColor={fillColor}
+          hoverColor={hoverColor}
+          uncheckedBorderColor={uncheckedBorderColor}
+          label={option.label}
+          checked={value === option.value}
+          isDisabled={isDisabled || option.disabled}
+          onChange={handleChange}
+          textButtonGap={textButtonGap}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/RadioButtonGroup/index.ts

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

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,84 +1,181 @@
 import classNames from 'classnames';
-import { SearchFilterItem } from './SearchFilterItem';
-import { Text } from 'src/components/Text/Text';
-import { ButtonBase } from 'src/components/ButtonBase/ButtonBase';
 import { SearchFilterProps } from './types';
+import { useCallback } from 'react';
+import { SearchFilterHeader } from './SearchFilterHeader';
+import { useHasFilterStateChanged } from './useHasFilterStateChanged';
+import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from './utils';
+import { ModalSheet } from '../ModalSheet';
+import { FilterItemProps, FilterProps } from '@envive-ai/react-hooks/types';
+import { ToggleButton } from '../ToggleButton';
+import { Accordion } from '../Accordion';
+import { RadioButtonGroup } from '../RadioButtonGroup';
+import { SearchFilterFooter } from './SearchFilterFooter';
+
+const SortFilter = ({
+  filter,
+  selectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+}: FilterProps) => {
+  const filterTitle = filter.displayName;
+
+  const options = filter.items.map((item) => ({
+    label: item.displayName,
+    value: item.filterItemId,
+    isSelected: item.isSelected,
+  }));
+
+  const content = (
+    <RadioButtonGroup
+      options={options}
+      name={filterTitle}
+      onChange={(value) => {
+        const selectedItem = filter.items.find((item) => item.filterItemId === value);
+        selectFilterItem({
+          filterId: filter.filterId,
+          filterItemId: value,
+          isSelected: true,
+          displayName: selectedItem?.displayName || value,
+        });
+      }}
+      gap="large"
+      textButtonGap="large"
+      value={filter.items.find((item) => item.isSelected)?.filterItemId}
+      fillColor={radioButtonFillColor}
+      hoverColor={radioButtonHoverColor}
+      uncheckedBorderColor={radioButtonUncheckedBorderColor}
+    />
+  );
+
+  return <Accordion title={filterTitle} content={content} />;
+};
+
+const FilterItem = ({ filterId, filterItem, selectFilterItem }: FilterItemProps) => (
+  <ToggleButton
+    label={filterItem.displayName}
+    secondaryLabel={`(${filterItem.productCount})`}
+    isSelected={filterItem.isSelected}
+    onClick={() =>
+      selectFilterItem({
+        filterId,
+        filterItemId: filterItem.filterItemId,
+        isSelected: !filterItem.isSelected,
+        displayName: filterItem.displayName,
+      })
+    }
+    variant="default"
+  />
+);
+
+const Filter = ({ filter, selectFilterItem }: FilterProps) => {
+  const filterContentClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-wrap': true,
+    'spiffy-tw-gap-[8px]': true,
+    'spiffy-tw-pb-[1px]': true,
+  });
+
+  const selectedFilterItems = getSelectedFilterItemsCount(filter);
+
+  const filterTitle =
+    selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
+  const content = (
+    <div className={filterContentClassName}>
+      {filter.items.map((item) => (
+        <FilterItem
+          key={item.filterItemId}
+          filterId={filter.filterId}
+          filterItem={item}
+          selectFilterItem={selectFilterItem}
+        />
+      ))}
+    </div>
+  );
+  return <Accordion title={filterTitle} content={content} />;
+};
 
 export const SearchFilter = ({
-  isOpen,
-  setIsOpen,
   filters,
-  // productCount,
+  productCount,
   selectFilterItem,
   clearAllFilters,
-  // applyFiltersUnchangedClasses,
-  // applyFiltersChangedClasses,
-  filterButtonText,
+  isOpen,
+  setIsOpen,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  headerContent,
+  footerContent,
+  headerClassName,
   radioButtonFillColor,
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor,
-  // filterCloseIconVariant,
-  headerContent,
+  filterCloseIconVariant,
 }: 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 closeModal = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const filterCount = getTotalSelectedFilterItemsCount(filters);
 
-  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 hasFiltersChanged = useHasFilterStateChanged(filters, 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',
-  );
+  const filterWrapperClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-gap-[16px]': true,
+    'spiffy-tw-px-[24px]': true,
+    'spiffy-tw-py-[16px]': true,
+    'spiffy-tw-max-h-screen': true,
+    'spiffy-tw-overflow-y-auto': true,
+  });
 
   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.filterId} 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.filterItemId}
-                    filterItem={{ ...item, filterId: filter.filterId }}
-                    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"
+    <ModalSheet
+      isOpen={isOpen}
+      closeModal={closeModal}
+      headerProps={{
+        headerContent: headerContent || (
+          <SearchFilterHeader
+            closeModal={closeModal}
+            productCount={productCount}
+            headerClassName={headerClassName ?? ''}
+            filterCloseIconVariant={filterCloseIconVariant}
           />
-          <ButtonBase
-            onClick={() => setIsOpen(false)}
-            text={filterButtonText}
-            buttonClass="spiffy-tw-w-full"
+        ),
+        chevronColor: '#000',
+      }}
+      footerProps={{
+        footerContent: footerContent || (
+          <SearchFilterFooter
+            closeModal={closeModal}
+            clearAllFilters={clearAllFilters}
+            filterCount={filterCount}
+            hasFiltersChanged={hasFiltersChanged}
+            applyFiltersUnchangedClasses={applyFiltersUnchangedClasses}
+            applyFiltersChangedClasses={applyFiltersChangedClasses}
           />
-        </div>
+        ),
+      }}
+    >
+      <div className={filterWrapperClassName}>
+        {filters
+          .filter((filter) => filter.displayName !== '')
+          .map((filter) => {
+            if (filter.filterId === 'sort') {
+              return (
+                <SortFilter
+                  key={filter.filterId}
+                  filter={filter}
+                  selectFilterItem={selectFilterItem}
+                  radioButtonFillColor={radioButtonFillColor}
+                  radioButtonHoverColor={radioButtonHoverColor}
+                  radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+                />
+              );
+            }
+            return (
+              <Filter key={filter.filterId} filter={filter} selectFilterItem={selectFilterItem} />
+            );
+          })}
       </div>
-    </div>
+    </ModalSheet>
   );
 };

package/src/components/SearchFilter/SearchFilterFooter.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { ButtonBase } from '../ButtonBase';
+import { FilterFooterProps } from '@envive-ai/react-hooks/types';
+
+export const SearchFilterFooter = ({
+  closeModal,
+  clearAllFilters,
+  filterCount,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  hasFiltersChanged,
+}: FilterFooterProps) => {
+  const clearAllButtonEnabled = filterCount > 0;
+
+  const footerWrapperClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-justify-between': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-border-t': true,
+    'spiffy-tw-border-t-[--spiffy-colors-border-light]': true,
+    'spiffy-tw-p-[16px]': true,
+    'spiffy-tw-gap-[16px]': true,
+  });
+  const applyFilterButtonClassName = classNames(
+    'spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full',
+    hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses,
+  );
+  const clearAllButtonClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-row': true,
+    'spiffy-tw-justify-center': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': clearAllButtonEnabled,
+    'spiffy-tw-text-[--spiffy-colors-text-secondary]': !clearAllButtonEnabled,
+  });
+
+  return (
+    <div className={footerWrapperClassName}>
+      <ButtonBase
+        isDisabled={!hasFiltersChanged}
+        buttonClass={applyFilterButtonClassName}
+        text="Apply Filters"
+        onClick={closeModal}
+      />
+      <ButtonBase
+        isDisabled={!clearAllButtonEnabled}
+        buttonClass={clearAllButtonClassName}
+        text="Clear All"
+        onClick={clearAllFilters}
+      />
+    </div>
+  );
+};

package/src/components/SearchFilter/types.ts

@@ -1,4 +1,5 @@
 import {
+  CloseIconVariant,
   SearchFilterDatum,
   SearchFilterItemDatum,
   SelectFilterItem,
@@ -40,5 +41,5 @@ export type SearchFilterProps = {
   radioButtonFillColor: string;
   radioButtonHoverColor?: string;
   radioButtonUncheckedBorderColor?: string;
-  // filterCloseIconVariant: CloseIconVariant;
+  filterCloseIconVariant: CloseIconVariant;
 };