@envive-ai/react-toolkit 0.1.10 → 0.1.12

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+
+import { ModalSheetProps } from '../types';
+import { ModalSheetDesktopHeader } from './desktopHeader';
+
+export const ModalSheetDesktop = ({
+  children,
+  isOpen,
+  closeModal,
+  desktopWidth = 512,
+  animationDuration,
+  headerProps,
+  footerProps,
+  showOverlay = false,
+}: ModalSheetProps) => {
+  const [isHidden, setIsHidden] = useState(isOpen ? 'block' : 'none');
+  const [right, setRight] = useState(isOpen ? 0 : 0 - desktopWidth);
+  const [overlayOpacity, setOverlayOpacity] = useState(0);
+
+  useEffect(() => {
+    setIsHidden(isOpen ? 'block' : 'none');
+    setRight(isOpen ? 0 : 0 - desktopWidth);
+    setOverlayOpacity(isOpen ? 1 : 0);
+  }, [desktopWidth, isOpen]);
+
+  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-z-[2147483647]': true,
+    'spiffy-tw-bg-black/30': showOverlay,
+  });
+
+  const modalClassNames = classNames({
+    'spiffy-modal-sheet': true,
+    'spiffy-modal-sheet-open': isOpen,
+    'spiffy-tw-max-h-full': true,
+    'spiffy-tw-h-screen': true,
+    'spiffy-tw-w-[512px]': true,
+    'spiffy-tw-shadow-lg': true,
+    'spiffy-tw-top-[0]': true,
+    'spiffy-tw-bottom-[0]': true,
+    'spiffy-tw-fixed': true,
+    'spiffy-tw-bg-white': true,
+    'spiffy-tw-border-box': true,
+  });
+
+  const contentClassNames = classNames({
+    'spiffy-modal-sheet-content': true,
+    'spiffy-tw-overflow-y-auto': true,
+    'spiffy-tw-overflow-x-hidden': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-h-full': true,
+    'spiffy-tw-w-full': true,
+  });
+
+  const headerClassNames = classNames({
+    'spiffy-tw-sticky': true,
+    'spiffy-tw-top-0': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+  });
+
+  const { footerContent, footerClassName } = footerProps || {};
+
+  const footerClassNames = classNames(
+    {
+      'spiffy-tw-sticky': true,
+      'spiffy-tw-bottom-0': true,
+      'spiffy-modal-sheet-footer': true,
+      'spiffy-tw-flex': true,
+      'spiffy-tw-flex-col': true,
+    },
+    footerClassName,
+  );
+
+  return (
+    <div>
+      <motion.div
+        className={overlayClassNames}
+        initial={{ opacity: 0, display: 'none' }}
+        animate={{ opacity: overlayOpacity, display: isHidden }}
+        onClick={closeModal}
+      >
+        <motion.div
+          role="dialog"
+          className={modalClassNames}
+          initial={{ right, display: isHidden }}
+          animate={{ right, display: isHidden }}
+          exit={{ right, display: isHidden }}
+          transition={{ duration: animationDuration, ease: 'easeIn' }}
+          style={{ width: desktopWidth }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className={contentClassNames}>
+            <div className={headerClassNames}>
+              <ModalSheetDesktopHeader
+                headerContent={headerProps.headerContent}
+                headerVariant={headerProps?.headerVariant}
+                chevronColor="#000"
+              />
+            </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/index.ts

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

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

@@ -0,0 +1,118 @@
+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}
+                chevronColor="#000"
+              />
+            </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/ProductCard/ProductCard.tsx

@@ -18,8 +18,8 @@ import {
 } from './types';
 import { Text } from 'src/components/Text/Text';
 import { formatPrice } from 'src/util/formatPrice';
-import { useImageResolver } from '@envive-ai/react-hooks/hooks';
 import { TestProps } from '@envive-ai/react-hooks/types';
+import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 
 const formatReviews = (stars: number) =>
   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';