@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/components/client/Avatar/AvatarIcon.tsx

@@ -1,103 +0,0 @@
-import { Building, Person } from '@yahoo/uds-icons';
-import type { SvgIcon } from '@yahoo/uds-icons/types';
-import { useMemo } from 'react';
-
-import { cx, getStyles } from '../../../styles/styler';
-import type {
-  AvatarVariant,
-  IconPropsWithSVGProps,
-  UniversalAvatarIconProps,
-} from '../../../tokens';
-import { Box } from '../../Box';
-import { IconSlot } from '../../IconSlot';
-import {
-  buildAvatarRootClasses,
-  buildInlineSizeStyles,
-  DEFAULT_AVATAR_SIZE,
-  DEFAULT_AVATAR_VARIANT,
-} from './utils';
-
-/** Maps avatar variant to icon */
-// TODO: This should be configurable in the future
-const mapVariantToIcon: Record<AvatarVariant, SvgIcon> = {
-  primary: Person,
-  secondary: Building,
-};
-
-// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-
-interface AvatarIconProps extends UniversalAvatarIconProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-  };
-}
-
-/**
- * **AvatarIcon Component**
- *
- * Renders an Avatar with an icon representation.
- *
- * @param props - Props for icon variant.
- * @returns The AvatarIcon element.
- */
-const AvatarIcon = ({
-  size = DEFAULT_AVATAR_SIZE,
-  variant = DEFAULT_AVATAR_VARIANT,
-  customSize,
-  icon,
-  slotProps,
-  className,
-  ...props
-}: AvatarIconProps) => {
-  const classNames = useMemo(
-    () => ({
-      root: buildAvatarRootClasses(size, {
-        avatarIconVariantRoot: variant,
-        overflow: 'hidden',
-        className: cx('overflow-hidden', className),
-      }),
-
-      iconContainer: cx(
-        'w-full',
-        'h-full',
-        'shrink-0',
-        'overflow-hidden',
-        'text-center',
-        'inline-flex',
-        'justify-center',
-        'items-center',
-      ),
-
-      icon: getStyles({ avatarSizeIcon: size }),
-    }),
-    [className, size, variant],
-  );
-
-  const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
-
-  const iconSvg = icon ?? mapVariantToIcon[variant ?? 'primary'];
-
-  return (
-    <Box className={classNames.root} style={inlineStyles.root} {...props}>
-      <Box className={classNames.iconContainer} style={inlineStyles.contents}>
-        <IconSlot
-          icon={iconSvg}
-          iconProps={{
-            variant: 'fill',
-            color: 'current',
-            ...slotProps?.icon,
-          }}
-          className={classNames.icon}
-        />
-      </Box>
-    </Box>
-  );
-};
-
-AvatarIcon.displayName = 'AvatarIcon';
-
-export { AvatarIcon, type AvatarIconProps };

package/src/components/client/Avatar/AvatarImage.tsx

@@ -1,147 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { cx } from '../../../styles/styler';
-import type { ImagePropsWithImgProps, UniversalAvatarImageProps } from '../../../tokens';
-import { Box } from '../../Box';
-import { Image as UDSImage } from '../../Image';
-import type { AvatarIconProps } from './AvatarIcon';
-import { AvatarIcon } from './AvatarIcon';
-import type { AvatarTextProps } from './AvatarText';
-import { AvatarText } from './AvatarText';
-import {
-  buildAvatarRootClasses,
-  buildInlineSizeStyles,
-  DEFAULT_AVATAR_SIZE,
-  DEFAULT_AVATAR_VARIANT,
-} from './utils';
-
-// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-
-interface AvatarImageProps extends UniversalAvatarImageProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    image?: Partial<
-      Omit<ImagePropsWithImgProps, 'src' | 'srcSet' | 'alt' | 'className' | 'height' | 'width'> &
-        DataAttributes
-    >;
-  } & AvatarIconProps['slotProps'] &
-    AvatarTextProps['slotProps'];
-}
-
-/**
- * **AvatarImage Component**
- *
- * Renders an Avatar with an image. If the image fails to load, it falls back first to
- * a text representation (if a name or initials are provided) and then to an icon.
- *
- * @param props - Props for image variant.
- * @returns The AvatarImage element.
- */
-const AvatarImage = ({
-  size = DEFAULT_AVATAR_SIZE,
-  variant = DEFAULT_AVATAR_VARIANT,
-  src,
-  srcSet,
-  customSize,
-  alt,
-  abbreviationStrategy,
-  fallback,
-  className,
-  imageProps,
-  slotProps,
-  ...props
-}: AvatarImageProps) => {
-  const [loadingState, setLoadingState] = useState<'loading' | 'loaded' | 'error'>('loading');
-
-  useEffect(() => {
-    let mounted = true;
-    if (src || srcSet) {
-      const img = new Image();
-      img.onload = () => {
-        if (mounted) {
-          setLoadingState('loaded');
-        }
-      };
-      img.onerror = () => {
-        if (mounted) {
-          setLoadingState('error');
-        }
-      };
-      if (src) {
-        img.src = src;
-      }
-      if (srcSet) {
-        img.srcset = srcSet;
-      }
-    } else {
-      setLoadingState('error');
-    }
-    return () => {
-      mounted = false;
-    };
-  }, [src, srcSet]);
-
-  const classNames = useMemo(
-    () => ({
-      root: buildAvatarRootClasses(size, {
-        avatarImageVariantRoot: variant,
-        className: cx('overflow-hidden', className),
-      }),
-
-      contents: cx(
-        'w-full',
-        'h-full',
-        'shrink-0',
-        'text-center',
-        'inline-flex',
-        'justify-center',
-        'items-center',
-        'object-cover',
-      ),
-    }),
-    [className, size, variant],
-  );
-
-  const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
-
-  if (loadingState === 'loaded') {
-    return (
-      <Box className={classNames.root} style={inlineStyles.root}>
-        <UDSImage
-          src={src}
-          srcSet={srcSet}
-          alt={alt}
-          className={classNames.contents}
-          style={inlineStyles.contents}
-          {...imageProps} // Deprecated
-          {...slotProps?.image}
-        />
-      </Box>
-    );
-  }
-
-  const sharedProps = { ...props, size, customSize, variant };
-
-  // On image error, try to render text avatar
-  if (fallback || alt) {
-    return (
-      <AvatarText
-        name={alt}
-        initials={fallback}
-        abbreviationStrategy={abbreviationStrategy}
-        slotProps={{ text: slotProps?.text }}
-        {...sharedProps}
-      />
-    );
-  }
-
-  // If no text data is available, render icon
-  return <AvatarIcon {...sharedProps} slotProps={{ icon: slotProps?.icon }} />;
-};
-
-AvatarImage.displayName = 'AvatarImage';
-
-export { AvatarImage, type AvatarImageProps };

package/src/components/client/Avatar/AvatarText.tsx

@@ -1,88 +0,0 @@
-import { useMemo } from 'react';
-
-import { cx } from '../../../styles/styler';
-import type { UniversalAvatarTextProps } from '../../../tokens';
-import { Box } from '../../Box';
-import type { TextProps } from '../../Text';
-import { Text } from '../../Text';
-import {
-  buildAvatarRootClasses,
-  buildInlineSizeStyles,
-  DEFAULT_AVATAR_SIZE,
-  DEFAULT_AVATAR_VARIANT,
-  generateAvatarAbbreviation,
-} from './utils';
-
-// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-
-interface AvatarTextProps extends UniversalAvatarTextProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    text?: Partial<TextProps & DataAttributes>;
-  };
-}
-
-/**
- * **AvatarText Component**
- *
- * Renders an Avatar with text (initials) representation.
- *
- * @param props - Props for text variant.
- * @returns The AvatarText element.
- */
-const AvatarText = ({
-  size = DEFAULT_AVATAR_SIZE,
-  variant = DEFAULT_AVATAR_VARIANT,
-  name,
-  initials,
-  customSize,
-  abbreviationStrategy,
-  className,
-  slotProps,
-  ...props
-}: AvatarTextProps) => {
-  const classNames = useMemo(
-    () => ({
-      root: buildAvatarRootClasses(size, {
-        avatarTextVariantRoot: variant,
-        className: cx('overflow-hidden', 'truncate', className),
-      }),
-
-      text: cx(
-        'w-full',
-        'h-full',
-        'shrink-0',
-        'overflow-hidden',
-        'text-center',
-        'inline-flex',
-        'justify-center',
-        'items-center',
-        'truncate',
-      ),
-    }),
-    [className, size, variant],
-  );
-
-  const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
-
-  return (
-    <Box className={classNames.root} style={inlineStyles.root} {...props}>
-      <Text
-        color="inherit"
-        variant="inherit"
-        className={classNames.text}
-        style={inlineStyles.contents}
-        {...slotProps?.text}
-      >
-        {initials || generateAvatarAbbreviation(name, abbreviationStrategy)}
-      </Text>
-    </Box>
-  );
-};
-
-AvatarText.displayName = 'AvatarText';
-
-export { AvatarText, type AvatarTextProps };

package/src/components/client/Avatar/index.ts

@@ -1,4 +0,0 @@
-export { Avatar, type AvatarProps } from './Avatar';
-export { AvatarIcon, type AvatarIconProps } from './AvatarIcon';
-export { AvatarImage, type AvatarImageProps } from './AvatarImage';
-export { AvatarText, type AvatarTextProps } from './AvatarText';

package/src/components/client/Avatar/utils.ts

@@ -1,105 +0,0 @@
-import { isFunction } from 'lodash';
-import type { CSSProperties } from 'react';
-
-import { cx, getStyles } from '../../../styles/styler';
-import type {
-  AvatarAbbreviationStrategy,
-  AvatarSize,
-  AvatarVariant,
-  UniversalAvatarProps,
-} from '../../../tokens';
-
-/** Strategies for generating text abbreviation */
-const abbrevStrategies: Record<
-  Extract<AvatarAbbreviationStrategy, string>,
-  (initials: string[]) => string
-> = {
-  first: (initials) => initials[0] ?? '',
-  last: (initials) => initials[initials.length - 1] ?? '',
-  firstAndLast: (initials) =>
-    initials.length === 1 ? initials[0] : `${initials[0]}${initials[initials.length - 1]}`,
-  firstTwo: (initials) => initials.slice(0, 2).join(''),
-  firstThree: (initials) => initials.slice(0, 3).join(''),
-  firstOfEach: (initials) => initials.join(''),
-};
-
-/* -------------------------------------------------------------------------- */
-/*                              Helper Functions                              */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Generates an abbreviation from a name using a specified strategy.
- *
- * @param name - The full name.
- * @param strategy - Abbreviation strategy key or custom function.
- * @returns The generated abbreviation.
- */
-const generateAvatarAbbreviation = (
-  name?: string,
-  strategy: AvatarAbbreviationStrategy = 'firstAndLast',
-): string => {
-  if (!name) {
-    return '';
-  }
-
-  if (isFunction(strategy)) {
-    return strategy(name);
-  }
-
-  const words = name.trim().split(/\s+/);
-  const initials = words.map((word) => word[0].toUpperCase());
-
-  return abbrevStrategies[strategy](initials);
-};
-
-/**
- * Builds the root CSS classes for the Avatar.
- *
- * @param size - The size of the Avatar.
- * @returns A string of CSS classes.
- */
-const buildAvatarRootClasses = (
-  size: UniversalAvatarProps['size'] = 'md',
-  styles?: Parameters<typeof getStyles>[0],
-): string => {
-  const { className: stylesClassName, ...restStyles } = styles ?? {};
-
-  return getStyles({
-    avatarSizeRoot: size,
-    ...restStyles,
-    className: cx(
-      'shrink-0',
-      'text-center',
-      'inline-flex',
-      'justify-center',
-      'items-center',
-      'overflow-visible',
-      'truncate',
-      stylesClassName,
-    ),
-  });
-};
-
-const buildInlineSizeStyles = (customSize?: UniversalAvatarProps['customSize']) => {
-  const rootStyles = customSize ? { height: customSize, width: customSize } : {};
-
-  return {
-    root: rootStyles,
-
-    contents: {
-      ...rootStyles,
-      boxSizing: 'content-box',
-    } satisfies CSSProperties,
-  };
-};
-
-const DEFAULT_AVATAR_VARIANT: AvatarVariant = 'primary';
-const DEFAULT_AVATAR_SIZE: AvatarSize = 'md';
-
-export {
-  buildAvatarRootClasses,
-  buildInlineSizeStyles,
-  DEFAULT_AVATAR_SIZE,
-  DEFAULT_AVATAR_VARIANT,
-  generateAvatarAbbreviation,
-};

package/src/components/client/Badge.tsx

@@ -1,133 +0,0 @@
-import React, { forwardRef, useMemo } from 'react';
-
-import { cx, getStyles } from '../../styles/styler';
-import type { BadgeConfig, BaseSelector, UniversalBadgeProps } from '../../tokens';
-import { HStack } from '../HStack';
-import type { IconSlotProps } from '../IconSlot';
-import { IconSlot } from '../IconSlot';
-
-// TODO: we might not need these base classes with the new system
-const BASE_CLASS: BaseSelector<typeof BadgeConfig> = 'uds-badge';
-const VARIANT_BASE_CLASS = 'uds-badge-variant';
-const SIZE_BASE_CLASS = 'uds-badge-size';
-const ICON_SIZE_BASE_CLASS = 'uds-badge-iconSize';
-const ICON_COLOR_BASE_CLASS = 'uds-badge-iconColor';
-
-type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
-
-interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
-
-const MAX_WIDTH_DEFAULT = 200;
-
-/**
- * **⚙️️ A badge.
- *
- * @componentType Client component
- *
- * @description
- * Badges show notifications, counts, or status information on navigation items and icons.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
- *
- * @usage
- * - ???
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Badge } from "@yahoo/uds";
- *
- * <Badge>Label</Badge>
- *```
- *
- * @related [Chip](https://uds.build/docs/components/chip).
- **/
-const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-  {
-    variant = 'primary',
-    size = 'md',
-    minWidth,
-    maxWidth = MAX_WIDTH_DEFAULT,
-    startIcon,
-    endIcon,
-    backgroundColor,
-    color,
-    iconColor,
-    borderColor,
-    children,
-    className,
-    ...rest
-  }: BadgeProps,
-  ref,
-) {
-  const rootStyles = getStyles({
-    badgeSizeRoot: size,
-    badgeVariantRoot: variant,
-    className: cx([BASE_CLASS, VARIANT_BASE_CLASS, SIZE_BASE_CLASS, className]),
-  });
-
-  const iconStyles = getStyles({
-    badgeVariantIcon: variant,
-    badgeSizeIcon: size,
-    className: cx([ICON_SIZE_BASE_CLASS, ICON_COLOR_BASE_CLASS]),
-  });
-
-  const containerStyles = useMemo(
-    () => ({
-      ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
-      ...(maxWidth === 'full' ? {} : { maxWidth: `${maxWidth}px` }),
-      ...(backgroundColor ? { backgroundColor } : {}),
-      ...(borderColor ? { borderColor } : {}),
-      ...(color ? { color } : {}),
-    }),
-    [backgroundColor, borderColor, color, maxWidth, minWidth],
-  );
-
-  const iconProps = useMemo(
-    (): IconSlotProps['iconProps'] => ({
-      variant: 'fill',
-      style: {
-        ...(iconColor ? { color: iconColor } : {}),
-      },
-    }),
-    [iconColor],
-  );
-
-  return (
-    <HStack
-      ref={ref}
-      gap="2"
-      display="inline-flex"
-      alignItems="center"
-      className={rootStyles}
-      style={containerStyles}
-      {...rest}
-    >
-      {startIcon && (
-        <IconSlot
-          icon={startIcon}
-          iconProps={iconProps}
-          data-testid="start-icon"
-          className={iconStyles}
-        />
-      )}
-
-      <span className="flex-1 truncate whitespace-nowrap text-center">{children}</span>
-
-      {endIcon && (
-        <IconSlot
-          icon={endIcon}
-          iconProps={iconProps}
-          data-testid="end-icon"
-          className={iconStyles}
-        />
-      )}
-    </HStack>
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-Badge.displayName = 'Badge';
-
-export { Badge, type BadgeProps };