@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/index.ts

@@ -0,0 +1,351 @@
+// Accordion
+export { Accordion } from './Accordion/Accordion';
+
+// AddressDisplay
+export { AddressDisplay } from './AddressDisplay/AddressDisplay';
+export type { AddressProps } from './AddressDisplay/AddressDisplay';
+export type { Address, AddressHighlightedFields } from './AddressDisplay/types';
+
+// AutomatedCarousel
+export { AutomatedCarousel } from './AutomatedCarousel/AutomatedCarousel';
+
+// Badge
+export { Badge } from './Badge/Badge';
+export { ItemBadge } from './Badge/ItemBadge';
+export { LiveStatusBadge } from './Badge/LiveStatusBadge';
+/** @deprecated Renamed to `LiveStatusBadge`. This alias ships for one major and will be removed in a future release. */
+export { LiveStatusBadge as AuctionBadge } from './Badge/LiveStatusBadge';
+export type { BadgeProps, BadgeColor, BadgeEmphasis, BadgeSize } from './Badge/Badge.types';
+
+// BannerNotification
+export { BannerNotification } from './BannerNotification/BannerNotification';
+
+// BottomSheet
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps, BottomSheetRef } from './BottomSheet';
+
+// Breadcrumbs
+export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+
+// Button
+export { Button } from './Button/Button';
+export type { Props as ButtonProps, ButtonVariant, ButtonStyle, InlineStyles } from './Button/Button.types';
+
+// Callout
+export { Callout } from './Callout/Callout';
+export type { CalloutButtonConfig, CalloutProps, CalloutStatus } from './Callout/Callout.types';
+
+// Card (card has no top-level entry upstream; each piece is its own subpath)
+export { SingleCard } from './Card/SingleCard';
+export { CardGrid } from './Card/CardGrid';
+export { cardFactory } from './Card/cardFactory';
+export type { CardComponent, CardSpec, CreatedCard } from './Card/cardFactory';
+export type { Spacer } from './Card/types';
+export type { SharedProps } from './Card/sharedProps';
+export type { CardHook } from './Card/components/types';
+export { createBadge } from './Card/components/createBadge';
+export { createFavoriteButton } from './Card/components/createFavoriteButton';
+export { createImage } from './Card/components/createImage';
+export { createInfo, shadowSizes } from './Card/components/createInfo';
+export { createName } from './Card/components/createName';
+export {
+    createPriceStatus,
+    priceStatusSeeSoldPriceIntlKey,
+    priceStatusPreviewOnlyIntlKey,
+    priceStatusSoldIntlKey,
+} from './Card/components/createPriceStatus';
+
+// Carousel
+export { Carousel } from './Carousel/Carousel';
+export { CarouselGoToPageDirection } from './Carousel/Carousel.types';
+export type { CarouselCard, CarouselGoToPageInfo, CarouselPageInfo } from './Carousel/Carousel.types';
+
+// Collapsible
+export { Collapsible } from './Collapsible/Collapsible';
+
+// Confetti
+export { Confetti } from './Confetti';
+export type { ConfettiHandle } from './Confetti';
+
+// CookieConsent
+export { CookieConsent } from './CookieConsent';
+export type { CookieConsentHandle } from './CookieConsent';
+export { useCookieConsent, DEFAULT_CONSENT_STORAGE_KEY } from './CookieConsent';
+export type { UseCookieConsentParams } from './CookieConsent';
+export { ConsentSource, DEFAULT_COOKIE_CATEGORIES } from './CookieConsent';
+export type { ConsentCategories, CookieCategoryConfig, CookieConsentTracking, ConsentPayload } from './CookieConsent';
+
+// ContentPager
+export { ContentPager, Page, currentPageAtom } from './ContentPager/ContentPager';
+
+// Countdown
+export { Countdown } from './Countdown/Countdown';
+export type { CountdownProps } from './Countdown/Countdown';
+export type { CountdownFlashpoint } from './Countdown/Countdown.types';
+
+// Chips
+export { Chip } from './Chips/Chip';
+export { ChipGroup } from './Chips/ChipGroup';
+export { SuggestionChip } from './Chips/SuggestionChip';
+export type { ChipProps, ChipGroupProps, ChipState, TotalChipState } from './Chips/chipTypes';
+
+// Choice list (Checkbox / Radio)
+export {
+    Checkbox,
+    CheckboxGroup,
+    CheckboxOption,
+    Radio,
+    RadioGroup,
+    RadioOption,
+    ChoiceListItemLabel,
+} from './ChoiceListItem';
+export type { GroupProps } from './ChoiceListItem';
+
+// DateTimeInput (DateInput / DatePicker / TimePicker)
+// (DatePickerTarget/TimePickerTarget reach the barrel via `export * from './providers'` below.)
+export { DateInput } from './DateTimeInput/dateInput/DateInput';
+export { DatePicker } from './DateTimeInput/datePicker';
+export { TimePicker } from './DateTimeInput/timePicker';
+export { getDisplayDate, getDisplayTime } from './DateTimeInput/utils';
+
+// Drawer
+export { Drawer } from './Drawer/Drawer';
+
+// FavoriteButton
+export { FavoriteButton } from './FavoriteButton/FavoriteButton';
+export type {
+    BaseFavoriteButtonProps,
+    FavoriteButtonProps,
+    FavoriteButtonVariant,
+    IconOnlyFavoriteButtonProps,
+    LabeledFavoriteButtonProps,
+} from './FavoriteButton/types/favoriteButton';
+
+// EducationalPopover
+export { EducationalPopover } from './EducationalPopover/EducationalPopover';
+
+// FeatureFlags (devtools UI + hooks; FeatureFlagProvider reaches the barrel via `export * from './providers'` below.
+// getFeatureFlagCookieOverrides is server-side — published on its own non-client subpath only.)
+export { FeatureFlagDevToolsUI } from './FeatureFlags/devTools/FeatureFlagDevToolsUI';
+export { useFeatureFlag, useFeatureFlags } from './FeatureFlags/hooks';
+
+// FileUpload
+export {
+    FileUpload,
+    FileDropzone,
+    FileDropzoneOverlay,
+    FileUploadCanvas,
+    FilePreviewList,
+    FileCard,
+    ListFileCard,
+    GridFileCard,
+    FileUploadProvider,
+    FileUploadContext,
+    useFileUploadContext,
+    UploadValidationProvider,
+    UploadValidationContext,
+    useValidationContext,
+    useFileValidation,
+    getFileExtensionsFromAcceptedTypes,
+    getFilePluralizationText,
+} from './FileUpload';
+export type {
+    OverlayStyleOptions,
+    ValidationError,
+    FileCardAction,
+    FileProgressCircleConfig,
+    FileStatusConfig,
+    FileStatusIcon,
+    FileStatusIconConfig,
+} from './FileUpload';
+
+// FormLabel
+export { FormLabel, extractFormLabelProps } from './FormLabel/FormLabel';
+export type { FormLabelProps } from './FormLabel/FormLabel';
+
+// IconButton
+export { IconButton } from './IconButton/IconButton';
+export type { IconButtonProps, IconButtonSize } from './IconButton/IconButton';
+
+// Icons
+export * from './Icons';
+export { IconBase, getColor, iconSizesToPixels } from './Icons/IconBase';
+export type { IconProps, IconComponent, IconWeight } from './Icons/IconBase';
+export type { AnyIcon } from './Icons/anyIcon';
+
+// Icons - CreditCardIcon
+export { CreditCardIcon } from './Icons/CreditCardIcon/CreditCardIcon';
+export type { CardBrands, CardIconProps } from './Icons/CreditCardIcon/CreditCardIcon';
+
+// ImageCluster
+export { ImageCluster } from './ImageCluster/ImageCluster';
+
+// ImageSlider (Thumbnails is part of hammer's public imageSlider surface)
+export { ImageSlider } from './ImageSlider/ImageSlider';
+export { Thumbnails } from './ImageSlider/components/Thumbnails/Thumbnails';
+export { ThumbnailDisplay } from './ImageSlider/ImageSlider.types';
+export type {
+    ImageSliderAnalyticsEvent,
+    ImageSliderCard,
+    ResponsiveImageConfig,
+    ResponsiveImageData,
+} from './ImageSlider/ImageSlider.types';
+
+// InlineNotification
+export { InlineNotification } from './InlineNotification/InlineNotification';
+
+// JumpMenu
+export { JumpMenu } from './JumpMenu';
+export type { JumpMenuItem } from './JumpMenu';
+
+// Loading (three-dot loading animation — distinct from LoadingSpinner)
+export { Loading } from './Loading/Loading';
+export type { Props as LoadingProps } from './Loading/Loading';
+
+// LoadingSpinner
+export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
+
+// Menu
+export { Menu, MenuItem, MenuDivider } from './Menu';
+export type { MenuProps } from './Menu/Menu';
+export type { MenuItemProps } from './Menu/components/MenuItem/MenuItem';
+
+// Modal
+export { Modal } from './Modal/Modal';
+// (ModalTarget itself reaches the barrel via `export * from './providers'` below.)
+export {
+    BackButton,
+    CloseButton,
+    ModalActions,
+    ModalContent,
+    ModalHeader,
+    ModalProgressSteps,
+    ModalSubTitle,
+    ModalTitle,
+} from './Modal/components';
+export { ModalContext } from './Modal/context';
+export { useCloseModal, useForceCloseModal } from './Modal/hooks/useCloseModal';
+
+// NotificationBadge
+export { NotificationBadge } from './NotificationBadge/NotificationBadge';
+
+// Pagination
+export { Pagination, AdvancedPagination, PaginationProvider, usePagination } from './Pagination';
+export type { CurrentPaginationState, PageSizeOptions, PaginationState } from './Pagination';
+
+// ProgressCircle
+export { ProgressCircle } from './ProgressCircle/ProgressCircle';
+
+// PhoneInput (full react-phone-number-input/i18n-iso-countries surface is on the
+// ./phoneInput subpath only — it bundles country data, keep it out of the barrel)
+export { PhoneInput } from './PhoneInput/PhoneInput';
+
+// ProgressSteps
+export { ProgressSteps } from './ProgressSteps/ProgressSteps';
+export type { ProgressStepsProps, StepItem } from './ProgressSteps/ProgressSteps';
+
+// SaveConfetti
+export { SaveConfetti } from './SaveConfetti';
+export type { SaveConfettiHandle } from './SaveConfetti';
+
+// SearchInput
+export { SearchInput } from './SearchInput/SearchInput';
+
+// Select
+export { Select, reactSelectBuiltins } from './Select/Select';
+export type { OptionType, SelectOnChange } from './Select/Select';
+export { SelectAsync } from './Select/SelectAsync';
+export { SelectAsyncCreatable } from './Select/SelectAsyncCreatable';
+export { SelectCreatable } from './Select/SelectCreatable';
+
+// SegmentedControl
+export { SegmentedControl, SegmentedControlGroup } from './SegmentedControl';
+export type { ControlItem, SegmentedControlGroupProps, SegmentedControlProps } from './SegmentedControl';
+
+// SplitButton
+export { SplitButton } from './SplitButton/SplitButton';
+
+// StarRating
+export { StarRating } from './StarRating/StarRating';
+
+// Skeleton
+export { Skeleton } from './Skeleton/Skeleton';
+
+// Breakpoints (dynamic Tailwind responsive-prefix helpers)
+export { largerScreenThan, maxMediaQuery, minMediaQuery, smallerScreenThan } from './breakpoints';
+export type { maxMediaOptions, minMediaOptions } from './breakpoints';
+
+// Hooks
+export { usePrevious } from './hooks/usePrevious';
+
+// Table
+export { Table } from './Table';
+export type { ColumnType, SortType, StaticData, TableBackgroundStyle, TableRowDensity } from './Table';
+
+// Tabs
+export { Tabs } from './Tabs/Tabs';
+export type { Tab } from './Tabs/Tabs';
+
+// TextArea
+export { TextAreaInput } from './TextArea/TextArea';
+
+// TextInput (also published as the ./Input subpath alias)
+export { TextInput } from './TextInput/TextInput';
+export type { AllowedTypes } from './TextInput/TextInput';
+
+// Toast
+export { toast, ToastContainer } from './Toast';
+
+// ToggleSwitch
+export { ToggleSwitch } from './ToggleSwitch/ToggleSwitch';
+
+// Tooltip
+export { Tooltip, reactTooltip } from './Tooltip/Tooltip';
+export type { TooltipProps } from './Tooltip/Tooltip';
+export { InfoIconTooltip } from './Tooltip/InfoIconTooltip';
+export type { InfoIconTooltipProps } from './Tooltip/InfoIconTooltip';
+
+// Typography - Text
+export {
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+    BodyPrimary,
+    BodySecondary,
+    Caption,
+    LabelMini,
+    LabelMiniStrong,
+    LabelStrong,
+} from './Typography/Text/Text';
+
+// Typography - Links
+export {
+    Link,
+    WeakLink,
+    MonochromeLink,
+    InverseLink,
+    SubtleLink,
+    SubtleWeakLink,
+    SubtleMonochromeLink,
+    SubtleInverseLink,
+} from './Typography/Links/Links';
+
+// Typography - InlineButton
+export { InlineButton } from './Typography/InlineButton/InlineButton';
+
+// ViewMore
+export { ViewMore } from './ViewMore/ViewMore';
+
+// WebRTCPlayer
+export { WebRTCPlayer, useWebRTCStream } from './WebRTCPlayer';
+export type { WebRTCPlayerProps, WebRTCConfig, WebRTCPlayerState, WebRTCConnectionState } from './WebRTCPlayer';
+
+// Re-export theme utilities for convenience
+export { cn } from '@evolve.ui/theme-system';
+
+// Provider and grid runtime
+export * from './providers';
+export * from './grid';

package/src/intl/index.ts

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from 'react-intl';
+export * as intlMessageFormat from 'intl-messageformat';
+export * as icuMessageFormatParser from '@formatjs/icu-messageformat-parser';

package/src/intl/utils.ts

@@ -0,0 +1,67 @@
+import { parse } from '@formatjs/icu-messageformat-parser';
+import IntlMessageFormat from 'intl-messageformat';
+import { MessageFormatElement } from 'react-intl';
+
+type RecursiveStringObject = {
+    [key: string]: string | RecursiveStringObject;
+};
+
+/**
+ * Takes nested objects and makes them flat, with the keys being the path to the value.
+ *
+ * Type this with `ExpandNestedObjectToStringUnion` to get completetion on the flattened object.
+ */
+export const flattenMessages = <IntlShape extends RecursiveStringObject>(
+    nestedMessages: IntlShape
+): Record<string, MessageFormatElement[]> => {
+    const messages = {};
+
+    recursiveFlattenMessages(messages, nestedMessages);
+
+    return messages;
+};
+
+const recursiveFlattenMessages = <IntlShape extends RecursiveStringObject, Prefix extends string>(
+    messages: Record<string, MessageFormatElement[]>,
+    nestedMessages: IntlShape,
+    prefix?: Prefix
+) => {
+    Object.keys(nestedMessages).forEach((key) => {
+        const value = nestedMessages[key];
+        const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+        if (typeof value === 'string') {
+            messages[prefixedKey] = parse(value);
+        } else {
+            recursiveFlattenMessages(messages, value, prefixedKey);
+        }
+    });
+};
+
+type RewriteRecursiveStringObjectToIntlMessageFormat<T extends RecursiveStringObject> = {
+    [K in keyof T]: T[K] extends string
+        ? IntlMessageFormat
+        : T[K] extends RecursiveStringObject
+          ? RewriteRecursiveStringObjectToIntlMessageFormat<T[K]>
+          : unknown;
+};
+
+// Consider https://formatjs.io/docs/intl-messageformat#formatters if slow.
+
+export const parseStringObjectToMessageFormat = <T extends RecursiveStringObject>(
+    messages: T
+): RewriteRecursiveStringObjectToIntlMessageFormat<T> => {
+    const rewriteMessages: Record<string, unknown> = {};
+
+    for (const key in messages) {
+        const value = messages[key];
+
+        if (typeof value === 'string') {
+            rewriteMessages[key] = new IntlMessageFormat(parse(value));
+        } else {
+            rewriteMessages[key] = parseStringObjectToMessageFormat(value);
+        }
+    }
+
+    return rewriteMessages as RewriteRecursiveStringObjectToIntlMessageFormat<T>;
+};

package/src/mixins/horizontalScrollFadeMixin.ts

@@ -0,0 +1,56 @@
+import { useCallback, useMemo, useState } from 'react';
+
+const SHADOW_SCROLL_OFFSET = 5;
+
+export const useHorizontalScrollFadeMixin = (offset: number = 8) => {
+    const [shouldShowLeftFade, setShouldShowLeftFade] = useState(false);
+    const [shouldShowRightFade, setShouldShowRightFade] = useState(false);
+
+    const calculateFadeFromElement = useCallback(
+        (elem: HTMLElement) => {
+            const remainingOnLeft = elem.scrollLeft;
+            const remainingOnRight = elem.scrollWidth - elem.scrollLeft - elem.clientWidth;
+            setShouldShowLeftFade(remainingOnLeft - SHADOW_SCROLL_OFFSET > offset);
+            setShouldShowRightFade(remainingOnRight - SHADOW_SCROLL_OFFSET > offset);
+        },
+        [offset]
+    );
+
+    const addEventListenerToElement = useCallback(
+        (elem: HTMLElement) => {
+            elem.addEventListener('scroll', (event) => {
+                const elem = event.currentTarget as HTMLDivElement | null;
+
+                if (!elem) {
+                    return;
+                }
+
+                calculateFadeFromElement(elem);
+            });
+        },
+        [calculateFadeFromElement]
+    );
+
+    const ref = useCallback(
+        (ref: HTMLDivElement | null) => {
+            if (ref === null) {
+                return;
+            }
+
+            calculateFadeFromElement(ref);
+            addEventListenerToElement(ref);
+        },
+        [addEventListenerToElement, calculateFadeFromElement]
+    );
+
+    const horizontalScrollFadeProps = useMemo(
+        () => ({
+            ref,
+            shouldShowLeftFade,
+            shouldShowRightFade,
+        }),
+        [shouldShowLeftFade, shouldShowRightFade, ref]
+    );
+
+    return horizontalScrollFadeProps;
+};

package/src/mixins/index.ts

@@ -0,0 +1,18 @@
+export {
+    genericCSSMixins,
+    getMixinClasses,
+    lineClampMixin,
+    locationMixin,
+    marginMixin,
+    MIXIN_TAILWIND_STATIC_CLASSES,
+    paddingMixin,
+    themeSpacingParser,
+} from './propMixins';
+export type {
+    GenericCSSMixinProps,
+    LineClampProp,
+    LocationProp,
+    MarginProps,
+    PaddingProps,
+    SimplifiedThemeSpacings,
+} from './propMixins';