@envive-ai/react-toolkit 0.1.0 → 0.1.2

package/src/components/search/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -0,0 +1,82 @@
+import { useCallback } from 'react';
+
+import { SearchFilter } from '../SearchFilter/SearchFilter';
+import { SearchFilterHeader } from '../SearchFilter/SearchFilterHeader';
+import type { SearchFilter as SearchFilterType, SelectFilterItem } from '../SearchFilter/types';
+import type { SearchFilterSidebarVariant } from './types';
+import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
+import { ButtonBase } from 'src/components/common/ButtonBase/ButtonBase';
+
+export type SearchResultsFilterProps = {
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  searchFilters: SearchFilterType[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  searchText: string;
+  onSelectFilterItem: SelectFilterItem;
+  onClearAllFilters: () => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilter = ({
+  productCount,
+  isOpen,
+  setIsOpen,
+  searchFilters,
+  searchFilterSidebarVariant,
+  onSelectFilterItem,
+  onClearAllFilters,
+  filterButtonText,
+}: SearchResultsFilterProps) => {
+  const {
+    applyFiltersUnchangedClasses,
+    applyFiltersChangedClasses,
+    searchFilterHeaderClasses,
+    radioButtonFillColor,
+    radioButtonHoverColor,
+    radioButtonUncheckedBorderColor,
+    filterCloseIconVariant,
+  } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+
+  const openFilter = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <>
+      <SearchFilter
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        filters={searchFilters}
+        productCount={productCount}
+        selectFilterItem={onSelectFilterItem}
+        clearAllFilters={onClearAllFilters}
+        applyFiltersUnchangedClasses={applyFiltersUnchangedClasses}
+        applyFiltersChangedClasses={applyFiltersChangedClasses}
+        filterButtonText={filterButtonText}
+        radioButtonFillColor={radioButtonFillColor}
+        radioButtonHoverColor={radioButtonHoverColor}
+        radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+        filterCloseIconVariant={filterCloseIconVariant}
+        headerContent={
+          <SearchFilterHeader
+            closeModal={() => setIsOpen(false)}
+            productCount={productCount}
+            headerClassName={searchFilterHeaderClasses}
+            filterCloseIconVariant={filterCloseIconVariant}
+          />
+        }
+      />
+      <ButtonBase
+        onClick={openFilter}
+        // icon={SettingsVariant} // Icon is handled by user
+        iconClass="spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center"
+        text={filterButtonText}
+        textClass="spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block"
+        buttonClass="spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]"
+        disablePadding
+      />
+    </>
+  );
+};

package/src/components/search/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts

@@ -0,0 +1,45 @@
+import type { SearchFilterSidebarVariant, CloseIconVariant } from './types';
+import { ColorNames, colorVar } from 'src/components/models/colorsConfig';
+
+interface SearchFilterSidebarVariantClasses {
+  searchFilterHeaderClasses: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+  filterDefaultClasses: string;
+  filterActiveClasses: string;
+  filterHoverClasses: string;
+  appliedFilterBackgroundClasses: string;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  filterCloseIconVariant: CloseIconVariant;
+}
+
+export const searchFilterSidebarVariantClasses: Record<SearchFilterSidebarVariant, SearchFilterSidebarVariantClasses> = {
+  darkButton: {
+    radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+    radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+    radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+    searchFilterHeaderClasses: 'spiffy-tw-text-[--spiffy-colors-text-light]',
+    filterDefaultClasses: 'spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterActiveClasses: 'spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+    appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light]',
+    applyFiltersUnchangedClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    applyFiltersChangedClasses: 'spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+    filterCloseIconVariant: 'light',
+  },
+  lightButton: {
+    radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+    radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+    radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+    searchFilterHeaderClasses: 'spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterDefaultClasses: 'spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterActiveClasses: 'spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+    appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light]',
+    applyFiltersUnchangedClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    applyFiltersChangedClasses: 'spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-link]',
+    filterCloseIconVariant: 'dark',
+  },
+};

package/{dist/packages/components/src/components/search/SearchResultsFilterSidebar/types.d.ts → src/components/search/SearchResultsFilterSidebar/types.ts}

@@ -1,2 +1,2 @@
 export type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
-export type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+export type CloseIconVariant = 'light' | 'tertiary' | 'dark';

package/src/components/search/SearchResultsStates/NoSearchResultsFound.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import Sparkles from '@envive-ai/react-icons/src/Sparkles';
+import { Text } from 'src/components/common/Text/Text';
+
+interface NoSearchResultsFoundProps {
+  containerPaddingClasses: string;
+  includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
+  noResultsFoundText?: string;
+  sparkleIconColor?: string; // example format: var(--spiffy-colors-accent-primary)
+}
+
+export const NoSearchResultsFound = ({
+  containerPaddingClasses,
+  includeBottomMargin = false,
+  noResultsFoundText,
+  sparkleIconColor = 'var(--spiffy-colors-accent-primary)',
+}: NoSearchResultsFoundProps) => {
+  const containerClasses = classNames(
+    containerPaddingClasses,
+    includeBottomMargin ? 'spiffy-tw-mb-[100vh]' : '',
+    'spiffy-tw-mt-6',
+  );
+
+  const textPrompt =
+    noResultsFoundText ||
+    'I’m sorry, I wasn’t able to find an exact match. Try changing your filters or adjusting your search query.';
+
+  return (
+    <div className={containerClasses}>
+      <div className="spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2">
+        <div>
+          <Sparkles
+            className="spiffy-tw-w-[24px] spiffy-tw-h-[24px]"
+            style={{ color: sparkleIconColor }}
+          />
+        </div>
+        <Text variant="body2">{textPrompt}</Text>
+      </div>
+    </div>
+  );
+};

package/src/components/search/SearchResultsStates/SearchResultsGrid.tsx

@@ -0,0 +1,105 @@
+import { motion } from 'framer-motion';
+import type { SelectedFilterOption } from 'src/atoms/search/types';
+import classNames from 'classnames';
+import type { SearchResponseProduct } from 'src/types/external';
+import { ProductGrid } from 'src/components/common/ProductGrid/ProductGrid';
+import { AppliedFiltersScrollbar } from '../FilterScrollbar/AppliedFiltersScrollbar';
+import { DynamicFiltersScrollbar } from '../FilterScrollbar/DynamicFiltersScrollbar';
+import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
+import type { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar/types';
+import { ProductGridVariant } from 'src/components/common/ProductCard/types';
+
+interface SearchResultsGridProps {
+  productList: SearchResponseProduct[];
+  availableDynamicFilters: { name: string; displayName: string }[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  productGridVariant: ProductGridVariant;
+  selectedFilterOptions: SelectedFilterOption[];
+  searchResponseId: string;
+  containerXPaddingClasses: string;
+  productGridClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName,
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+
+export const SearchResultsGrid = ({
+  productList,
+  availableDynamicFilters,
+  searchFilterSidebarVariant,
+  productGridVariant,
+  selectedFilterOptions,
+  searchResponseId,
+  containerXPaddingClasses,
+  productGridClasses,
+  onRemoveFilter,
+  onToggleDynamicFilter,
+}: SearchResultsGridProps) => {
+  const sharedFilterBarClasses = classNames(
+    'spiffy-suggestion-bar',
+    'spiffy-tw-no-scrollbar',
+    'spiffy-tw-flex',
+    'spiffy-tw-flex-row',
+    'spiffy-tw-gap-2',
+    'spiffy-tw-mb-[16px]',
+    'spiffy-tw-overflow-x-scroll',
+    containerXPaddingClasses,
+  );
+
+  const filterBarClasses = classNames(sharedFilterBarClasses, 'spiffy-tw-mt-[24px]');
+
+  const appliedFilterBarClasses = classNames(
+    sharedFilterBarClasses,
+    'spiffy-tw-mb-[32px]',
+    'spiffy-tw-mt-[8px]',
+  );
+
+  const {
+    // We may want to pull these into their own variant separated from the filter sidebar (but also used in it) In this case, we need them for dynamic filters
+    filterDefaultClasses,
+    filterHoverClasses,
+    appliedFilterBackgroundClasses,
+  } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+
+  return (
+    <motion.div
+      className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      <AppliedFiltersScrollbar
+        selectedFilterOptions={selectedFilterOptions}
+        filterBarClassNames={appliedFilterBarClasses}
+        filterDefaultClasses={filterDefaultClasses}
+        filterHoverClasses={filterHoverClasses}
+        appliedFilterBackgroundClasses={appliedFilterBackgroundClasses}
+        onRemoveFilter={onRemoveFilter}
+      />
+      <DynamicFiltersScrollbar
+        availableDynamicFilters={availableDynamicFilters}
+        filterBarClassNames={filterBarClasses}
+        filterDefaultClasses={filterDefaultClasses}
+        filterHoverClasses={filterHoverClasses}
+        onToggleDynamicFilter={onToggleDynamicFilter}
+      />
+      <ProductGrid
+        productList={productList}
+        productGridVariant={productGridVariant}
+        productGridClasses={productGridClasses}
+        searchResponseId={searchResponseId}
+        merchantShortName={''}
+        handleClick={function (clickedUrl: string): void {
+          console.log(clickedUrl);
+          throw new Error('Function not implemented.');
+        }}
+      />
+    </motion.div>
+  );
+};

package/src/components/search/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -0,0 +1,50 @@
+import { Text } from 'src/components/common/Text/Text';
+import { SparkleAnimation } from 'src/components/common/SparkleAnimation/SparkleAnimation';
+import { motion } from 'framer-motion';
+import { ProductGridVariant } from 'src/components/common/ProductCard/types';
+import { ProductCardSkeleton } from 'src/components/common/ProductCard/ProductCardSkeleton';
+import { productGridVariantClasses } from 'src/components/common/ProductGrid/productGridVariants';
+
+export const SearchResultsLoadingGrid = ({
+  productGridVariant,
+  productGridClasses,
+  sparkleIconColor = 'var(--spiffy-colors-accent-primary)',
+}: {
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  sparkleIconColor?: string;
+}) => {
+  const { productCardLayoutVariant, productCardImageAspectRatio } =
+    productGridVariantClasses[productGridVariant];
+
+  return (
+    <motion.div
+      className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      <div className="spiffy-tw-mt-6 spiffy-tw-w-full">
+        <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-mb-4">
+          <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 spiffy-tw-ml-[16px] md:spiffy-tw-ml-[80px]">
+            <div className="spiffy-tw-width-[24px]">
+              <SparkleAnimation color={sparkleIconColor} animate={true} />
+            </div>
+            <Text variant="body2">Finding the best options for you...</Text>
+          </div>
+        </div>
+        <div className={productGridClasses}>
+          {Array.from({ length: 8 }).map((_, index) => (
+            <ProductCardSkeleton
+              key={index}
+              layoutVariant={productCardLayoutVariant}
+              aspectRatio={productCardImageAspectRatio}
+              growWithContainer={true}
+            />
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+};

package/src/components/search/types.ts

@@ -0,0 +1,5 @@
+export enum SearchResultsState {
+  NoResults = 'noResults',
+  Results = 'results',
+  Loading = 'loading',
+}

package/{dist/packages/components/src/components/test/types.d.ts → src/components/test/types.ts}

@@ -1,3 +1,3 @@
 export interface TestProps {
-    dataTestId?: string;
+  dataTestId?: string;
 }

package/src/config/chatElementDisplayLocation.ts

@@ -0,0 +1,22 @@
+// Chat element display location enum
+export enum ChatElementDisplayLocation {
+  IN_CHAT = 'in_chat',
+  CHAT_PREVIEW = 'chat_preview',
+  FLOATING_BUTTON = 'floating_button',
+  HELP_ME_CHOOSE = 'help_me_choose',
+  PLP_IMAGE_BANNER = 'plp_image_banner',
+  TOP_REVIEWS_SNIPPET = 'top_reviews_snippet',
+  BOTTOM_REVIEWS_SNIPPET = 'bottom_reviews_snippet',
+  BLOCK_BACK_BUTTON = 'block_back_button',
+  SWITCH_TO_AGENT = 'switch_to_agent',
+  CONVERSATIONAL_SEARCH = 'conversational_search',
+  GLOBAL_SEARCH_ENTRYPOINT = 'global_search_entrypoint',
+  SEARCH_NAV_ENTRYPOINT = 'search_nav_entrypoint',
+  SEARCH_PROMPT = 'search_prompt',
+  SEARCH_PROMPT_BUTTON = 'search_prompt_button',
+  PRODUCT_GRID = 'product_grid',
+  UNSPECIFIED = 'unspecified',
+  FILTER_MODAL = 'filter_modal',
+  PROMPT_CARD = 'prompt_card',
+  WINDOW_API_CALL = 'window_api_call',
+}

package/src/logging/logger.ts

@@ -0,0 +1,21 @@
+/* eslint-disable no-console */
+
+class Logger {
+  static logInfo(message: string, ...args: unknown[]): void {
+    console.info(`INFO: ${message}`, ...args);
+  }
+
+  static logDebug(message: string, ...args: unknown[]): void {
+    console.debug(`DEBUG: ${message}`, ...args);
+  }
+
+  static logError(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    console.error(`ERROR: ${message} error=${error}`, args);
+  }
+
+  static logWarn(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    console.warn(`WARN: ${message} error=${error}`, args);
+  }
+}
+
+export default Logger;

package/src/types/external.ts

@@ -0,0 +1,24 @@
+// Local type definitions for external dependencies that may not be available
+
+export enum ResponseCategory {
+  Product = 'product',
+}
+
+export interface SearchResponseProduct {
+  id: string;
+  title: string;
+  description?: string;
+  price?: number;
+  currency?: string;
+  imageUrl?: string;
+  brand?: string;
+  category?: string;
+  availability?: string;
+  url?: string;
+  responseId?: string;
+  originalPrice?: number;
+  salePrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  [key: string]: unknown;
+}

package/{dist/packages/components/src/util/camelCase.d.ts → src/util/camelCase.ts}

@@ -1,21 +1,34 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/camel-case.d.ts
+
 import type { SplitWords } from './splitWords';
+
 /**
  * CamelCase options.
  *
  * @see {@link CamelCase}
  */
 export type CamelCaseOptions = {
-    /**
-     * Whether to preserved consecutive uppercase letter.
-     *
-     * @default true
-     */
-    preserveConsecutiveUppercase?: boolean;
+  /**
+   * Whether to preserved consecutive uppercase letter.
+   *
+   * @default true
+   */
+  preserveConsecutiveUppercase?: boolean;
 };
+
 /**
  * Convert an array of words to camel-case.
  */
-type CamelCaseFromArray<Words extends string[], Options extends CamelCaseOptions, OutputString extends string = ''> = Words extends [infer FirstWord extends string, ...infer RemainingWords extends string[]] ? Options['preserveConsecutiveUppercase'] extends true ? `${Capitalize<FirstWord>}${CamelCaseFromArray<RemainingWords, Options>}` : `${Capitalize<Lowercase<FirstWord>>}${CamelCaseFromArray<RemainingWords, Options>}` : OutputString;
+type CamelCaseFromArray<
+  Words extends string[],
+  Options extends CamelCaseOptions,
+  OutputString extends string = '',
+> = Words extends [infer FirstWord extends string, ...infer RemainingWords extends string[]]
+  ? Options['preserveConsecutiveUppercase'] extends true
+    ? `${Capitalize<FirstWord>}${CamelCaseFromArray<RemainingWords, Options>}`
+    : `${Capitalize<Lowercase<FirstWord>>}${CamelCaseFromArray<RemainingWords, Options>}`
+  : OutputString;
+
 /**
  * Convert a string literal to camel-case.
  *
@@ -59,7 +72,16 @@ type CamelCaseFromArray<Words extends string[], Options extends CamelCaseOptions
  * @category Change case
  * @category Template literal
  */
-export type CamelCase<Type, Options extends CamelCaseOptions = {
-    preserveConsecutiveUppercase: true;
-}> = Type extends string ? string extends Type ? Type : Uncapitalize<CamelCaseFromArray<SplitWords<Type extends Uppercase<Type> ? Lowercase<Type> : Type>, Options>> : Type;
-export {};
+export type CamelCase<
+  Type,
+  Options extends CamelCaseOptions = { preserveConsecutiveUppercase: true },
+> = Type extends string
+  ? string extends Type
+    ? Type
+    : Uncapitalize<
+        CamelCaseFromArray<
+          SplitWords<Type extends Uppercase<Type> ? Lowercase<Type> : Type>,
+          Options
+        >
+      >
+  : Type;

package/src/util/camelCasedPropertiesDeep.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+import type { CamelCase, CamelCaseOptions } from './camelCase';
+import type { UnknownArray } from './unknownArray';
+
+/**
+ * Convert object properties to camel case recursively.
+ *
+ * This can be useful when, for example, converting some API types from a different style.
+ *
+ * @see CamelCasedProperties
+ * @see CamelCase
+ *
+ * @example
+ * ```
+ * import type {CamelCasedPropertiesDeep} from 'type-fest';
+ *
+ * interface User {
+ * 	UserId: number;
+ * 	UserName: string;
+ * }
+ *
+ * interface UserWithFriends {
+ * 	UserInfo: User;
+ * 	UserFriends: User[];
+ * }
+ *
+ * const result: CamelCasedPropertiesDeep<UserWithFriends> = {
+ * 	userInfo: {
+ * 		userId: 1,
+ * 		userName: 'Tom',
+ * 	},
+ * 	userFriends: [
+ * 		{
+ * 			userId: 2,
+ * 			userName: 'Jerry',
+ * 		},
+ * 		{
+ * 			userId: 3,
+ * 			userName: 'Spike',
+ * 		},
+ * 	],
+ * };
+ * ```
+ *
+ * @category Change case
+ * @category Template literal
+ * @category Object
+ */
+export type CamelCasedPropertiesDeep<
+  Value,
+  Options extends CamelCaseOptions = { preserveConsecutiveUppercase: true },
+> = Value extends Function
+  ? Value
+  : Value extends UnknownArray
+  ? CamelCasedPropertiesArrayDeep<Value>
+  : Value extends Set<infer U>
+  ? Set<CamelCasedPropertiesDeep<U, Options>>
+  : {
+      [K in keyof Value as CamelCase<K, Options>]: CamelCasedPropertiesDeep<Value[K], Options>;
+    };
+
+// This is a copy of DelimiterCasedPropertiesArrayDeep (see: delimiter-cased-properties-deep.d.ts).
+// These types should be kept in sync.
+type CamelCasedPropertiesArrayDeep<Value extends UnknownArray> = Value extends []
+  ? []
+  : // Tailing spread array
+  Value extends [infer U, ...infer V]
+  ? [CamelCasedPropertiesDeep<U>, ...CamelCasedPropertiesDeep<V>]
+  : Value extends readonly [infer U, ...infer V]
+  ? readonly [CamelCasedPropertiesDeep<U>, ...CamelCasedPropertiesDeep<V>]
+  : // Leading spread array
+  Value extends readonly [...infer U, infer V]
+  ? [...CamelCasedPropertiesDeep<U>, CamelCasedPropertiesDeep<V>]
+  : Value extends readonly [...infer U, infer V]
+  ? readonly [...CamelCasedPropertiesDeep<U>, CamelCasedPropertiesDeep<V>]
+  : // Array
+  Value extends Array<infer U>
+  ? Array<CamelCasedPropertiesDeep<U>>
+  : Value extends ReadonlyArray<infer U>
+  ? ReadonlyArray<CamelCasedPropertiesDeep<U>>
+  : never;

package/src/util/formatPrice.ts

@@ -0,0 +1,14 @@
+export const formatPrice = (price?: number, currency: string = '$'): string => {
+  if (price == null) {
+    return '';
+  }
+
+  const options: Intl.NumberFormatOptions = {};
+
+  if (!Number.isInteger(price)) {
+    options.minimumFractionDigits = 2;
+    options.maximumFractionDigits = 2;
+  }
+
+  return `${currency}${price.toLocaleString('en-US', options)}`;
+};

package/src/util/internal.ts

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/internal.d.ts
+
+import type { Primitive } from './primitive';
+import type { Trim } from './trim';
+
+/**
+ * Matches any primitive, `void`, `Date`, or `RegExp` value.
+ */
+export type BuiltIns = Primitive | void | Date | RegExp;
+
+/**
+ * Matches non-recursive types.
+ */
+export type NonRecursiveType = BuiltIns | Function | (new (...arguments_: any[]) => unknown);
+
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+export type IsNumeric<T extends string> = T extends `${number}`
+  ? Trim<T> extends T
+    ? true
+    : false
+  : false;
+
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+export type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+export type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+
+export type WordSeparators = '-' | '_' | Whitespace;
+
+export type Whitespace =
+  | '\u{9}' // '\t'
+  | '\u{A}' // '\n'
+  | '\u{B}' // '\v'
+  | '\u{C}' // '\f'
+  | '\u{D}' // '\r'
+  | '\u{20}' // ' '
+  | '\u{85}'
+  | '\u{A0}'
+  | '\u{1680}'
+  | '\u{2000}'
+  | '\u{2001}'
+  | '\u{2002}'
+  | '\u{2003}'
+  | '\u{2004}'
+  | '\u{2005}'
+  | '\u{2006}'
+  | '\u{2007}'
+  | '\u{2008}'
+  | '\u{2009}'
+  | '\u{200A}'
+  | '\u{2028}'
+  | '\u{2029}'
+  | '\u{202F}'
+  | '\u{205F}'
+  | '\u{3000}'
+  | '\u{FEFF}';
+
+export type UpperCaseCharacters =
+  | 'A'
+  | 'B'
+  | 'C'
+  | 'D'
+  | 'E'
+  | 'F'
+  | 'G'
+  | 'H'
+  | 'I'
+  | 'J'
+  | 'K'
+  | 'L'
+  | 'M'
+  | 'N'
+  | 'O'
+  | 'P'
+  | 'Q'
+  | 'R'
+  | 'S'
+  | 'T'
+  | 'U'
+  | 'V'
+  | 'W'
+  | 'X'
+  | 'Y'
+  | 'Z';

package/{dist/src/util/primitive.d.ts → src/util/primitive.ts}

@@ -1,3 +1,5 @@
+// this type comes from https://github.com/sindresorhus/type-fest/blob/main/source/primitive.d.ts
+
 /**
  * Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
  *