@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/AutomatedCarousel/components/CarouselProgressBar/CarouselProgressBar.tsx

@@ -0,0 +1,139 @@
+import { ReactNode, useCallback, useEffect, useMemo } from 'react';
+
+import { usePrevious } from '../../../hooks/usePrevious';
+import { IconButton } from '../../../IconButton/IconButton';
+import { Pause, Play } from '../../../Icons';
+import { useWindowIsDesktop } from '../../../providers';
+import {
+    CarouselProgressBarUnit,
+    CarouselProgressBarUnitProgressState,
+} from './components/CarouselProgressBarUnit/CarouselProgressBarUnit';
+
+type Props = {
+    /**
+     * If the user is scrolling/dragging freely, this is the page they're currently on
+     */
+    currentFreeScrollPage: number;
+    /**
+     * The current page of the carousel
+     */
+    currentPage: number;
+    /**
+     * Bring the slider to the selected page
+     * @param pageIndex Index of the page to view
+     */
+    goToPage: (pageIndex: number) => void;
+    /**
+     * If the parent determines the pause should be a certain state, we listen
+     */
+    isPaused: boolean;
+    /**
+     * Total number of pages
+     */
+    pageCount: number;
+    /**
+     * Called when the progress bar toggles the pause state
+     * @param isPaused
+     */
+    setPausedState: (isPaused: boolean) => void;
+    /**
+     * Changes the styling for the pause/play buttons to better reflect various backgrounds
+     */
+    style: 'primary' | 'inverse';
+};
+
+export const CarouselProgressBar = ({
+    currentFreeScrollPage,
+    currentPage,
+    goToPage,
+    isPaused,
+    pageCount,
+    setPausedState,
+    style,
+}: Props) => {
+    const isDesktop = useWindowIsDesktop();
+    const previousPageCount = usePrevious(pageCount);
+
+    const pageBarUnits = useMemo(() => {
+        const currentPageInUse = isPaused ? currentFreeScrollPage : currentPage;
+        const units: ReactNode[] = [];
+
+        for (let i = 0; i < pageCount; i++) {
+            const onClickProgressBarUnit = () => {
+                goToPage(i);
+                setPausedState(true);
+            };
+
+            const onCompleteProgressBarUnit = () => {
+                goToPage((i + 1) % pageCount);
+            };
+
+            if (i < currentPageInUse) {
+                units.push(
+                    <CarouselProgressBarUnit
+                        isPausedOverride={isPaused}
+                        key={`page-bar-unit-past-${i}-past`}
+                        onClick={onClickProgressBarUnit}
+                        onComplete={onCompleteProgressBarUnit}
+                        page={i + 1}
+                        progressState={CarouselProgressBarUnitProgressState.Past}
+                    />
+                );
+            } else if (i === currentPageInUse) {
+                units.push(
+                    <CarouselProgressBarUnit
+                        isPausedOverride={isPaused}
+                        key={`page-bar-unit-current-${i}-current`}
+                        onClick={onClickProgressBarUnit}
+                        onComplete={onCompleteProgressBarUnit}
+                        page={i + 1}
+                        progressState={CarouselProgressBarUnitProgressState.Current}
+                    />
+                );
+            } else {
+                units.push(
+                    <CarouselProgressBarUnit
+                        isPausedOverride={isPaused}
+                        key={`page-bar-unit-future-${i}-future`}
+                        onClick={onClickProgressBarUnit}
+                        onComplete={onCompleteProgressBarUnit}
+                        page={i + 1}
+                        progressState={CarouselProgressBarUnitProgressState.Future}
+                    />
+                );
+            }
+        }
+        return units;
+    }, [currentFreeScrollPage, currentPage, goToPage, isPaused, pageCount, setPausedState]);
+
+    const togglePause = useCallback(() => {
+        setPausedState(!isPaused);
+    }, [isPaused, setPausedState]);
+
+    useEffect(() => {
+        if (pageCount !== previousPageCount) {
+            goToPage(0);
+            setPausedState(false);
+        }
+    }, [goToPage, pageCount, previousPageCount, setPausedState]);
+
+    return (
+        <div
+            className="mx-xl grid items-center gap-xs xsMax:m-0 xsMax:flex"
+            style={{ gridTemplateColumns: `repeat(${pageCount + 1}, minmax(0, 32px))` }}
+        >
+            {pageBarUnits}
+            <div className="flex justify-center">
+                <IconButton
+                    data-testid="automated-carousel-toggle-pause-button"
+                    icon={isPaused ? Play : Pause}
+                    iconStyle="fill"
+                    onClick={togglePause}
+                    size={isDesktop ? 'xs' : 'sm'}
+                    style={style}
+                    variant="filled"
+                />
+            </div>
+        </div>
+    );
+};

package/src/AutomatedCarousel/components/CarouselProgressBar/components/CarouselProgressBarUnit/CarouselProgressBarUnit.tsx

@@ -0,0 +1,165 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { usePrevious } from '../../../../../hooks/usePrevious';
+import { useWindowIsDesktop } from '../../../../../providers';
+import { SHOW_CAROUSEL_PAGE_DURATION } from '../../../../automatedCarousel.types';
+
+const MAX_PROGRESS_CAP = 100;
+const PERCENT_CONVERSION = 100;
+export const ANIMATION_STEP_DURATION = 100; // in milliseconds
+
+export enum CarouselProgressBarUnitProgressState {
+    Past,
+    Current,
+    Future,
+}
+
+type Props = {
+    isPausedOverride: boolean;
+    onClick: () => void;
+    onComplete: () => void;
+    page: number;
+    progressState: CarouselProgressBarUnitProgressState;
+};
+
+export const CarouselProgressBarUnit = ({ isPausedOverride, onClick, onComplete, page, progressState }: Props) => {
+    const isDesktop = useWindowIsDesktop();
+
+    const animationStartTime = useRef(0);
+    const [progress, setProgress] = useState(progressState === CarouselProgressBarUnitProgressState.Past ? 100 : 0);
+    const isPaused = useRef(isPausedOverride);
+    const pausedTime = useRef(0);
+    const unpausedTime = useRef(0);
+    const [isComplete, setIsComplete] = useState(false);
+
+    const clearRunningInterval = useCallback(() => {
+        if (animationInterval.current) {
+            clearInterval(animationInterval.current);
+            animationInterval.current = null;
+        }
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            clearRunningInterval();
+        };
+    }, [clearRunningInterval]);
+
+    useEffect(() => {
+        if (isComplete) {
+            onComplete();
+            clearRunningInterval();
+        }
+    }, [clearRunningInterval, isComplete, onComplete]);
+
+    const animationInterval = useRef<ReturnType<typeof setInterval>>(null);
+
+    const runAnimation = useCallback(() => {
+        if (animationInterval.current) {
+            return;
+        }
+        animationInterval.current = setInterval(() => {
+            if (isPaused.current) {
+                return;
+            }
+            const now = Date.now();
+            let startTime = animationStartTime.current;
+            if (unpausedTime.current) {
+                const pauseDuration = unpausedTime.current - pausedTime.current;
+                startTime += pauseDuration;
+            }
+            const newProgress = ((now - startTime) / SHOW_CAROUSEL_PAGE_DURATION) * PERCENT_CONVERSION;
+            const cappedProgress = Math.min(newProgress, MAX_PROGRESS_CAP);
+            if (cappedProgress < MAX_PROGRESS_CAP) {
+                requestAnimationFrame(() => {
+                    setProgress(cappedProgress);
+                });
+            } else if (animationInterval.current) {
+                setIsComplete(true);
+            }
+        }, ANIMATION_STEP_DURATION);
+    }, []);
+
+    useEffect(() => {
+        if (progressState === CarouselProgressBarUnitProgressState.Current && !Boolean(animationStartTime.current)) {
+            unpausedTime.current = 0;
+            animationStartTime.current = Date.now();
+            runAnimation();
+        }
+    }, [progressState, runAnimation]);
+
+    useEffect(() => {
+        isPaused.current = isPausedOverride;
+        if (isPausedOverride) {
+            pausedTime.current = Date.now();
+            clearRunningInterval();
+        } else if (progressState === CarouselProgressBarUnitProgressState.Current) {
+            runAnimation();
+        }
+    }, [clearRunningInterval, isPausedOverride, progressState, runAnimation]);
+
+    const wasPaused = usePrevious(isPausedOverride);
+    useEffect(() => {
+        if (wasPaused && !isPausedOverride) {
+            unpausedTime.current = Date.now();
+        }
+    }, [isPausedOverride, wasPaused]);
+
+    const sharedStyles = 'h-[5px] rounded-lg';
+
+    if (!isDesktop) {
+        // This probably looks very weird. The initial impression you may have,
+        // looking at this code, is that the parent component should simply not
+        // render this component at all.
+        // BUT this unit component is running the animation to fill the bar that,
+        // when completed, will trigger the carousel to slide to the next card.
+        // "Well, then," you say, smug look on your face, "Why not have a duration
+        // in the parent component that handles the card switching?"
+        // And that seems reasonable. In fact, that was how it worked in a previous
+        // iteration.
+        // HOWEVER, we still need to have the interval running here to update
+        // the progress bar animation. Which resulted in trying to manage and
+        // synchronize two intervals in two different places (actually more,
+        // given that there are multiple progress bars).
+        // As such, the easiest solution is to have the bar units finish their
+        // animation, alert the parent that they've completed, and then the parent
+        // slides to the next card and tells the next progress bar to start their
+        // animation.
+        // And THAT, dear reader, is why this implementation is the best solution
+        // for this component. It will make it a lot easier to maintain.
+        // I can assure you, with little hyperbole any other solution is
+        // more complex and will bring you nothing but weeks of absolutely
+        // frustrating development.
+        return;
+    }
+
+    return (
+        <div
+            aria-label={`Go to page #${page}`}
+            className={cn(sharedStyles, 'min-w-min max-w-lg hover:cursor-pointer', {
+                'bg-icon-disabled': progressState !== CarouselProgressBarUnitProgressState.Current,
+                'bg-primary-100': progressState === CarouselProgressBarUnitProgressState.Current,
+            })}
+            onClick={() => {
+                onClick();
+            }}
+            onKeyUp={({ key }) => {
+                if (key === 'Enter') {
+                    onClick();
+                }
+            }}
+            role="button"
+            tabIndex={0}
+        >
+            <div
+                className={cn(
+                    sharedStyles,
+                    `bg-icon-info duration-${SHOW_CAROUSEL_PAGE_DURATION} w-[${progress}%] ease-linear`
+                )}
+                data-testid="carousel-progress-bar-unit"
+                style={{ width: `${progress}%` }}
+            />
+        </div>
+    );
+};

package/src/Badge/Badge.tsx

@@ -0,0 +1,104 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useMemo } from 'react';
+
+import type { BadgeProps } from './Badge.types';
+
+const convertBadgeSizeToIconSize = {
+    md: 'sm',
+    sm: 'sm',
+    xs: 'xs',
+} as const;
+
+export const Badge = ({
+    children,
+    className,
+    color = 'neutral',
+    'data-testid': dataTestId,
+    dense = false,
+    emphasis = 'subtle',
+    iconLeft: IconLeft,
+    iconRight: IconRight,
+    iconStyle = 'regular',
+    id,
+    round = false,
+    size = 'md',
+}: BadgeProps) => {
+    const classes = useMemo(
+        () =>
+            cn(
+                // GENERAL
+                'flex w-fit min-w-fit items-center justify-center',
+                // PADDING AND TEXT SIZE
+                {
+                    'hui-text-body-primary h-[30px] px-xs': size === 'md',
+                    'hui-text-body-secondary h-[24px] px-xs': size === 'sm',
+                    'hui-text-caption h-[18px] min-w-[18px] px-[5px]': size === 'xs' && dense,
+                    'hui-text-caption h-[18px] px-xs': size === 'xs' && !dense,
+                },
+                // TEXT & BORDER COLOR
+                'text-text-inverse',
+                {
+                    'border border-solid': emphasis !== 'bold',
+                    'border-border-critical text-text-critical': color === 'critical' && emphasis === 'subtle',
+                    'border-border-info text-background-info-dark': color === 'info' && emphasis === 'subtle',
+                    'border-border-secondary text-surface-500': color === 'neutral' && emphasis === 'subtle',
+                    'border-border-success text-background-success-dark': color === 'success' && emphasis === 'subtle',
+                    'border-border-warning text-text-warning': color === 'warning' && emphasis === 'subtle',
+                    'border-transparent text-text-primary': color === 'warning' && emphasis === 'bold',
+                },
+                // RADIUS
+                'rounded-sm',
+                {
+                    'rounded-xl': round,
+                },
+                // BACKGROUND COLOR
+                {
+                    'bg-background-critical-dark': color === 'critical' && emphasis === 'bold',
+                    'bg-background-critical-light': color === 'critical' && emphasis === 'subtle',
+                    'bg-background-info-dark': color === 'info' && emphasis === 'bold',
+                    'bg-background-info-light': color === 'info' && emphasis === 'subtle',
+                    'bg-background-success-dark': color === 'success' && emphasis === 'bold',
+                    'bg-background-success-light': color === 'success' && emphasis === 'subtle',
+                    'bg-background-warning-dark': color === 'warning' && emphasis === 'bold',
+                    'bg-background-warning-light': color === 'warning' && emphasis === 'subtle',
+                    'bg-surface-100': color === 'neutral' && emphasis === 'subtle',
+                    'bg-surface-500': color === 'neutral' && emphasis === 'bold',
+                },
+
+                className
+            ),
+        [className, color, dense, emphasis, round, size]
+    );
+
+    return (
+        <div
+            className={classes}
+            data-testid={dataTestId}
+            id={id}
+        >
+            {IconLeft && (
+                <IconLeft
+                    className={cn({
+                        'mr-2xs': Boolean(children),
+                    })}
+                    color="inherit"
+                    size={convertBadgeSizeToIconSize[size]}
+                    style={iconStyle}
+                />
+            )}
+            {children}
+            {IconRight && (
+                <IconRight
+                    className={cn({
+                        'ml-2xs': Boolean(children),
+                    })}
+                    color="inherit"
+                    size={convertBadgeSizeToIconSize[size]}
+                    style={iconStyle}
+                />
+            )}
+        </div>
+    );
+};
+
+Badge.displayName = 'Badge';

package/src/Badge/Badge.types.ts

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import type { AnyIcon } from '../Icons/anyIcon';
+import type { IconComponent } from '../Icons/IconBase';
+
+/** Color variant of the badge. */
+export type BadgeColor = 'neutral' | 'critical' | 'success' | 'info' | 'warning';
+
+/** Emphasis mode: bold (filled) or subtle (light with border). */
+export type BadgeEmphasis = 'bold' | 'subtle';
+
+/** Size of the badge. */
+export type BadgeSize = 'md' | 'sm' | 'xs';
+
+export type BadgeProps = {
+    /** Content to display inside the badge. */
+    children?: string | ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+    /**
+     * Color variant of the badge.
+     * @default 'neutral'
+     */
+    color?: BadgeColor;
+    /** Test ID for the badge. */
+    'data-testid'?: string;
+    /**
+     * Reduces padding for xs size badges.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Emphasis mode: bold (filled) or subtle (light with border).
+     * @default 'subtle'
+     */
+    emphasis?: BadgeEmphasis;
+    /** Optional icon to display on the left side. */
+    iconLeft?: AnyIcon;
+    /** Optional icon to display on the right side. */
+    iconRight?: AnyIcon;
+    /**
+     * Icon style variant.
+     * @default 'regular'
+     */
+    iconStyle?: ComponentProps<IconComponent>['style'];
+    /** HTML id attribute. */
+    id?: string;
+    /**
+     * Apply pill-shaped border radius.
+     * @default false
+     */
+    round?: boolean;
+    /**
+     * Size of the badge.
+     * @default 'md'
+     */
+    size?: BadgeSize;
+};

package/src/Badge/ItemBadge.tsx

@@ -0,0 +1,97 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { DotOutline } from '../Icons';
+import { Badge } from './Badge';
+
+type Props = {
+    /** Optional className for custom styling and positioning */
+    className?: string;
+    /** Whether the item bidding has been extended */
+    isExtended?: boolean;
+    /** Whether the item is featured */
+    isFeatured?: boolean;
+    /** Whether the item is currently live */
+    isLive?: boolean;
+    /** Whether the item has been sold */
+    isSold?: boolean;
+    /** Number of viewers currently watching (only shown when isLive and > 0) */
+    viewers?: number;
+};
+
+/**
+ * ItemBadge displays the status of a listing item.
+ *
+ * This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count
+ * for live items, and appropriate styling based on the status.
+ *
+ * Priority order: isSold > isExtended > isLive > isFeatured
+ *
+ * @example
+ * ```tsx
+ * // Featured item
+ * <ItemBadge isFeatured={true} />
+ *
+ * // Live item with viewers
+ * <ItemBadge isLive={true} viewers={126} />
+ *
+ * // Extended item
+ * <ItemBadge isExtended={true} />
+ *
+ * // Sold item
+ * <ItemBadge isSold={true} />
+ * ```
+ */
+export const ItemBadge = ({ className, isExtended, isFeatured, isLive, isSold, viewers }: Props) => {
+    // Priority order: isSold > isExtended > isLive > isFeatured
+    let text: string | null = null;
+    let color: 'neutral' | 'critical' = 'neutral';
+    let emphasis: 'bold' | 'subtle' = 'bold';
+    let showViewerCount = false;
+
+    if (isSold) {
+        text = 'SOLD';
+        color = 'neutral';
+        emphasis = 'bold';
+    } else if (isExtended) {
+        text = 'EXTENDED';
+        color = 'critical';
+        emphasis = 'bold';
+    } else if (isLive) {
+        text = 'LIVE';
+        color = 'critical';
+        emphasis = 'bold';
+        showViewerCount = viewers !== undefined && viewers > 0;
+    } else if (isFeatured) {
+        text = 'FEATURED';
+        color = 'neutral';
+        emphasis = 'subtle';
+    }
+
+    if (!text) {
+        return null;
+    }
+
+    return (
+        <Badge
+            className={cn('hui-text-label-strong', { 'flex items-center gap-2xs': showViewerCount }, className)}
+            color={color}
+            data-testid="item-badge"
+            emphasis={emphasis}
+            size="sm"
+        >
+            {text}
+            {showViewerCount && (
+                <>
+                    <DotOutline
+                        className="-mx-2xs"
+                        size="sm"
+                        style="fill"
+                    />
+                    <span>{viewers}</span>
+                </>
+            )}
+        </Badge>
+    );
+};
+
+ItemBadge.displayName = 'ItemBadge';

package/src/Badge/LiveStatusBadge.tsx

@@ -0,0 +1,93 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { DotOutline, Pause, VideoCamera } from '../Icons';
+import { Badge } from './Badge';
+
+type Props = {
+    /** Optional className for custom styling and positioning */
+    className?: string;
+    /** Whether the live session has video streaming capabilities */
+    hasVideo?: boolean;
+    /** Whether the live session is currently closing */
+    isClosing?: boolean;
+    /** Whether the live session is currently paused */
+    isPaused?: boolean;
+    /** Number of viewers currently watching */
+    viewers: number;
+};
+
+/**
+ * LiveStatusBadge displays the LIVE/PAUSED/CLOSING status of a live session with viewer count.
+ *
+ * This component shows a badge with session status (LIVE/PAUSED/CLOSING), optional video camera icon,
+ * viewer count with dot separator, and appropriate state indicators.
+ *
+ * @example
+ * ```tsx
+ * // Live session with video
+ * <LiveStatusBadge
+ *   hasVideo={true}
+ *   isClosing={false}
+ *   isPaused={false}
+ *   viewers={245}
+ * />
+ *
+ * // Paused session
+ * <LiveStatusBadge
+ *   isClosing={false}
+ *   isPaused={true}
+ *   viewers={132}
+ * />
+ *
+ * // Closing session
+ * <LiveStatusBadge
+ *   hasVideo={false}
+ *   isClosing={true}
+ *   isPaused={false}
+ *   viewers={0}
+ * />
+ * ```
+ */
+export const LiveStatusBadge = ({ className, hasVideo, isClosing, isPaused, viewers = 1 }: Props) => {
+    let statusText = isPaused ? 'PAUSED' : 'LIVE';
+    if (isClosing) {
+        statusText = 'CLOSING';
+    }
+
+    return (
+        <Badge
+            className={cn('hui-text-label-strong flex items-center gap-2xs', className)}
+            color="critical"
+            data-testid="live-status-badge"
+            emphasis="bold"
+            iconStyle="fill"
+            size="sm"
+        >
+            {!isPaused && !isClosing && hasVideo && (
+                <VideoCamera
+                    data-testid="video-camera-icon"
+                    size="sm"
+                    style="fill"
+                />
+            )}
+            {isPaused && !isClosing && (
+                <Pause
+                    data-testid="pause-icon"
+                    size="sm"
+                    style="fill"
+                />
+            )}
+            {statusText}
+            {!isClosing && (
+                <DotOutline
+                    className="-mx-2xs"
+                    size="sm"
+                    style="fill"
+                />
+            )}
+            <span>{!isClosing && viewers}</span>
+        </Badge>
+    );
+};
+
+LiveStatusBadge.displayName = 'LiveStatusBadge';