@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/components/client/SpringMotionConfig.tsx

@@ -1,151 +0,0 @@
-import type { MotionVariant, MotionVariantSpeed } from '@yahoo/uds/tokens';
-import type { LazyFeatureBundle, MotionConfigProps, Transition } from 'motion/react';
-import { LazyMotion, MotionConfig } from 'motion/react';
-import { useEffect, useMemo, useState } from 'react';
-
-import { motion } from '../../tokens/configs/motion';
-import { getMotionVar } from '../../utils/getMotionVar';
-import { useAvoidMotionLibrary } from '../experimental/client/AvoidMotionLibraryProvider';
-
-// !NOTE: This is probably one of those _internal_ components
-
-/* -------------------------------------------------------------------------- */
-/*        Token defaults - these may one day come from the configurator       */
-/* -------------------------------------------------------------------------- */
-const LAYOUT_VARIANT = 'subtle';
-const LAYOUT_SPEED = '3';
-const COLOR_VARIANT = 'smooth';
-const COLOR_SPEED = '3';
-
-/* -------------------------------------------------------------------------- */
-/*                           Framer motion features                           */
-/* -------------------------------------------------------------------------- */
-const defaultLoadFeatures = () =>
-  import('@yahoo/uds/__private/motionFeatures/domAnimation').then(
-    ({ domAnimation }) => domAnimation,
-  );
-
-/* -------------------------------------------------------------------------- */
-/*                Whooooof, finally the Spring Motion Component               */
-/* -------------------------------------------------------------------------- */
-interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
-  /**
-   * The layout variant to use for the motion config.
-   * @default 'subtle'
-   */
-  layoutVariant?: MotionVariant;
-  /**
-   * The layout speed to use for the motion config.
-   * @default '3'
-   */
-  layoutSpeed?: MotionVariantSpeed;
-  /**
-   * The color variant to use for the motion config.
-   * @default 'smooth'
-   */
-  colorVariant?: MotionVariant;
-  /**
-   * The color speed to use for the motion config.
-   * @default '3'
-   */
-  colorSpeed?: MotionVariantSpeed;
-  /**
-   * A lazy feature bundle to load additional features.
-   * This is useful for reducing bundle size by loading only the necessary features.
-   */
-  loadFeatures?: LazyFeatureBundle;
-}
-
-/**
- * **🎬 Spring Motion Config to define motion animations for all UDS components**
- *
- * @componentType Client component
- *
- * @description
- * The SpringConfig component provides a way to configure the spring animations for the entire application.
- * This component provides a way to use uds motion configs with Framer Motion.
- */
-function SpringMotionConfig({
-  children,
-  reducedMotion = 'user',
-  loadFeatures = defaultLoadFeatures,
-  layoutVariant = LAYOUT_VARIANT,
-  layoutSpeed = LAYOUT_SPEED,
-  colorVariant = COLOR_VARIANT,
-  colorSpeed = COLOR_SPEED,
-}: SpringMotionConfigProps) {
-  const initialLayoutConfig = motion[layoutVariant][layoutSpeed];
-  const initialColorConfig = motion[colorVariant][colorSpeed];
-
-  // We need to store the values in state because they're read from the DOM
-  const [layoutConfig, setLayoutConfig] = useState(initialLayoutConfig);
-  const [colorConfig, setColorConfig] = useState(initialColorConfig);
-
-  /* -------------------------------------------------------------------------- */
-  /*              Color motion config (background, color, opacity)              */
-  /* -------------------------------------------------------------------------- */
-  const colorVarConfig = { variant: colorVariant, speed: colorSpeed };
-  const colorStiffnessVar = getMotionVar({ ...colorVarConfig, control: 'stiffness' });
-  const colorDampingVar = getMotionVar({ ...colorVarConfig, control: 'damping' });
-
-  /* -------------------------------------------------------------------------- */
-  /*                Layout motion config (scale, position, shape)               */
-  /* -------------------------------------------------------------------------- */
-  const layoutVarConfig = { variant: layoutVariant, speed: layoutSpeed };
-  const layoutStiffnessVar = getMotionVar({ ...layoutVarConfig, control: 'stiffness' });
-  const layoutDampingVar = getMotionVar({ ...layoutVarConfig, control: 'damping' });
-
-  useEffect(() => {
-    // getComputedStyle is only available in the browser, so we'll keep it inside the useEffect hook
-    const globalComputedStyles = getComputedStyle(document.documentElement);
-
-    // Get from the root (DOM)
-    const layoutValues = {
-      type: 'spring',
-      damping: Number(globalComputedStyles.getPropertyValue(layoutDampingVar)),
-      stiffness: Number(globalComputedStyles.getPropertyValue(layoutStiffnessVar)),
-    };
-    const colorValues = {
-      type: 'spring',
-      damping: Number(globalComputedStyles.getPropertyValue(colorDampingVar)),
-      stiffness: Number(globalComputedStyles.getPropertyValue(colorStiffnessVar)),
-    };
-
-    // Set motion states
-    setLayoutConfig(layoutValues);
-    setColorConfig(colorValues);
-  }, [colorDampingVar, colorStiffnessVar, layoutDampingVar, layoutStiffnessVar]);
-
-  const transition = useMemo(
-    () =>
-      ({
-        type: 'spring',
-        mass: 1, // Each motion component should define their own mass
-        ...layoutConfig, // Use layout as default transition
-        layout: layoutConfig,
-        // Setup Color animations
-        opacity: colorConfig,
-        color: colorConfig,
-        borderColor: colorConfig,
-        backgroundColor: colorConfig,
-      }) satisfies Transition,
-    [colorConfig, layoutConfig],
-  );
-
-  const avoidMotionLibrary = useAvoidMotionLibrary();
-  if (avoidMotionLibrary) {
-    return children;
-  }
-
-  return (
-    <LazyMotion features={loadFeatures} strict>
-      <MotionConfig transition={transition} reducedMotion={reducedMotion}>
-        {children}
-      </MotionConfig>
-    </LazyMotion>
-  );
-}
-
-SpringMotionConfig.displayName = 'SpringMotionConfig';
-
-export { SpringMotionConfig, type SpringMotionConfigProps };

package/src/components/client/Switch.tsx

@@ -1,377 +0,0 @@
-import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds/tokens';
-import { m, useReducedMotion } from 'motion/react';
-import type { ChangeEvent, FocusEvent } from 'react';
-import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-
-import { IconSlot } from '../../components/IconSlot';
-import { cx, getStyles } from '../../styles/styler';
-import { Box } from '../Box';
-import { FormLabel } from '../FormLabel';
-import { SpringMotionConfig } from './SpringMotionConfig';
-
-type NativeInputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'
->;
-
-type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
-
-interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  layerClassNames?: {
-    root?: string;
-    switch?: string;
-    handle?: string;
-    label?: string;
-  };
-}
-
-const SIZE_MAP: Record<
-  SwitchSize,
-  {
-    // TODO: this needs to be automatic
-    isOnX: number;
-  }
-> = {
-  md: {
-    isOnX: 20,
-  },
-  sm: {
-    isOnX: 12,
-  },
-} as const;
-
-const MotionBox = m.create(Box);
-
-const toggleTransition = { layoutVariant: 'bouncy', layoutSpeed: '4' } as const;
-
-/**
- * **⚙️️ An switch.
- *
- * @componentType Client component
- *
- * @description
- * A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
- *
- * @usage
- * - Forms: switch
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Switch } from "@yahoo/uds";
- *
- * <Switch label="Name" required />
- *```
- *
- * @related [Checkbox](https://uds.build/docs/components/checkbox).
- **/
-const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  {
-    id,
-    isOn: isOnProp,
-    defaultIsOn,
-    onChange,
-    label,
-    labelPosition = 'start',
-    size = 'md',
-    onIcon,
-    offIcon,
-    reduceMotion: forceReduceMotion,
-    disabled,
-    required,
-    onFocus,
-    onBlur,
-    className,
-    layerClassNames,
-    ...switchProps
-  },
-  parentRef,
-) {
-  const generatedId = useId();
-  const uid = id ?? `uds-input-${generatedId}`;
-
-  const innerRef = useRef<HTMLInputElement | null>(null);
-
-  /**
-   * State
-   */
-  const isControlled = isOnProp !== undefined;
-  const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);
-  const [isHovered, setIsHovered] = useState(false);
-
-  /**
-   * Derived values
-   */
-  const showHoverEffect = useMemo(() => {
-    return !disabled && isHovered;
-  }, [disabled, isHovered]);
-
-  const { isOnX } = SIZE_MAP[size];
-
-  const motionInitialAndAnimate = useMemo(
-    () => ({
-      initial: {
-        scale: 1,
-        x: isOn ? isOnX : 0,
-      },
-      animate: {
-        scale: showHoverEffect ? 1.05 : 1,
-        x: isOn ? isOnX : 0,
-      },
-    }),
-    [showHoverEffect, isOn, isOnX],
-  );
-
-  /**
-   * Handlers
-   */
-  const handleChange = useCallback(
-    (e: SwitchChangeEvent) => {
-      onChange?.(e);
-
-      // If uncontrolled, immediate change internal state.
-      if (!isControlled) {
-        setIsOn(e.target.checked);
-      }
-    },
-    [isControlled, onChange],
-  );
-
-  const handleFocus = useCallback(
-    (e: FocusEvent<HTMLInputElement>) => {
-      onFocus?.(e);
-    },
-    [onFocus],
-  );
-
-  const handleBlur = useCallback(
-    (e: FocusEvent<HTMLInputElement>) => {
-      onBlur?.(e);
-    },
-    [onBlur],
-  );
-
-  const handleHoverStart = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleHoverEnd = useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  // Motion
-  const prefersReducedMotion = useReducedMotion();
-  const reduceMotion = forceReduceMotion ? 'always' : 'user';
-
-  const cssAnimationDuration =
-    prefersReducedMotion || forceReduceMotion ? 'duration-0' : 'duration-120';
-
-  /**
-   * Effects
-   */
-  // Reset state if prop changes.
-  useEffect(() => {
-    if (isControlled) {
-      setIsOn(isOnProp);
-    }
-  }, [isOnProp, isControlled]);
-
-  const classNames = {
-    root: getStyles({
-      switchSizeRoot: size,
-      switchVariantRoot: 'default',
-      switchVariantActiveRoot: isOn ? 'on' : 'off',
-      display: 'flex',
-      flexDirection: labelPosition === 'start' ? 'row' : 'row-reverse',
-      alignItems: 'center',
-      className: cx(
-        'group',
-        {
-          'cursor-pointer': !disabled,
-          'cursor-default': disabled,
-          'opacity-50': disabled,
-        },
-
-        layerClassNames?.root,
-        className,
-      ),
-    }),
-
-    switch: getStyles({
-      switchVariantSwitch: 'default',
-      switchSizeSwitch: size,
-      switchVariantActiveSwitch: isOn ? 'on' : 'off',
-      borderRadius: 'full',
-      position: 'relative',
-      alignItems: 'center',
-      className: cx(
-        'uds-ring',
-        'uds-ring-within',
-
-        cssAnimationDuration,
-        'transition-[background-color,box-shadow]',
-
-        layerClassNames?.switch,
-      ),
-    }),
-
-    handle: getStyles({
-      switchSizeHandle: size,
-      className: cx(
-        'relative',
-        'pointer-events-none',
-        'rounded-full',
-        'overflow-hidden',
-        layerClassNames?.handle,
-      ),
-    }),
-
-    handleCircle: getStyles({
-      switchVariantActiveHandle: isOn ? 'on' : 'off',
-      switchVariantHandle: 'default',
-      className: cx(
-        'absolute',
-        'top-0',
-        'left-0',
-        'right-0',
-        'bottom-0',
-
-        'opacity-95 group-hover:opacity-100',
-
-        cssAnimationDuration,
-        'transition-[background-color,box-shadow,opacity]',
-      ),
-    }),
-
-    handleIcon: getStyles({
-      switchSizeHandleIcon: size,
-      switchVariantHandleIcon: 'default',
-      switchVariantActiveHandleIcon: isOn ? 'on' : 'off',
-      className: cx(
-        'absolute',
-        'opacity-0',
-        'top-1/2',
-        'left-1/2',
-        'transform',
-        'translate-x-[-50%]',
-        'translate-y-[-50%]',
-
-        cssAnimationDuration,
-        'transition-opacity',
-      ),
-    }),
-
-    htmlCheckbox: cx(
-      // Control the cursor at the top of the component
-      // and don't let the input override it back to the
-      // default value.
-      'cursor-[inherit]',
-
-      'absolute',
-      'opacity-0',
-      'top-1/2',
-      'left-1/2',
-      'w-[calc(100%+2px)]',
-      'h-[calc(100%+2px)]',
-      'transform',
-      'translate-x-[-50%]',
-      'translate-y-[-50%]',
-    ),
-
-    label: cx(labelPosition === 'start' ? 'text-start' : 'text-end', layerClassNames?.label),
-  };
-
-  const RootElement = label ? m.label : m.div;
-
-  return (
-    <SpringMotionConfig reducedMotion={reduceMotion} {...toggleTransition}>
-      <RootElement
-        className={classNames.root}
-        data-testid="container"
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
-        tabIndex={-1}
-      >
-        <MotionBox className={classNames.switch}>
-          <input
-            type="checkbox"
-            // Required for Safari to render a focus ring
-            tabIndex={0}
-            // These are standard HTML input props for customization.
-            {...switchProps}
-            //
-            // Provide a ref to the underlying input element for customization.
-            ref={(ref) => {
-              // Set internal ref.
-              innerRef.current = ref;
-
-              // Forward the ref to parent.
-              if (typeof parentRef === 'function') {
-                parentRef(ref);
-              } else if (parentRef !== null) {
-                parentRef.current = ref;
-              }
-            }}
-            //
-            // Track focus as a prop for easier styling.
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            //
-            // Core props for the switch.
-            id={uid}
-            disabled={disabled}
-            required={required}
-            checked={isControlled ? isOn : undefined}
-            defaultChecked={isControlled ? undefined : defaultIsOn}
-            onChange={handleChange}
-            //
-            // styles
-            className={classNames.htmlCheckbox}
-            style={{}}
-          />
-
-          <MotionBox className={classNames.handle} {...motionInitialAndAnimate}>
-            <Box className={classNames.handleCircle} />
-
-            {onIcon && (
-              <IconSlot
-                icon={onIcon}
-                iconProps={{ variant: 'fill', size: 'sm' }}
-                data-testid="on-icon"
-                className={cx(classNames.handleIcon, isOn ? 'opacity-100' : 'opacity-0')}
-              />
-            )}
-
-            {offIcon && (
-              <IconSlot
-                icon={offIcon}
-                iconProps={{ variant: 'fill', size: 'sm' }}
-                data-testid="off-icon"
-                className={cx(classNames.handleIcon, !isOn ? 'opacity-100' : 'opacity-0')}
-              />
-            )}
-          </MotionBox>
-        </MotionBox>
-
-        {label && (
-          <FormLabel
-            as="div"
-            variant="inherit"
-            color="inherit"
-            required={required}
-            label={label}
-            className={classNames.label}
-          />
-        )}
-      </RootElement>
-    </SpringMotionConfig>
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-Switch.displayName = 'Switch';
-
-export { Switch, type SwitchProps };

package/src/components/client/index.ts

@@ -1,30 +0,0 @@
-export { Avatar, type AvatarProps } from './Avatar';
-export { AvatarIcon, type AvatarIconProps } from './Avatar';
-export { AvatarImage, type AvatarImageProps } from './Avatar';
-export { AvatarText, type AvatarTextProps } from './Avatar';
-export { Badge, type BadgeProps } from './Badge';
-export { Button, type ButtonProps } from './Button';
-export { Checkbox, type CheckboxProps } from './Checkbox';
-export { Chip, type ChipProps } from './Chip';
-export { ChipButton, type ChipButtonProps } from './Chip';
-export { ChipDismissible, type ChipDismissibleProps } from './Chip';
-export { ChipLink, type ChipLinkProps } from './Chip';
-export { ChipToggle, type ChipToggleProps } from './Chip';
-export { IconButton, type IconButtonProps } from './IconButton';
-export { Input, type InputProps } from './Input';
-export { InputHelpText, type InputHelpTextProps } from './Input';
-export {
-  Menu,
-  type MenuContentProps,
-  type MenuDividerProps,
-  type MenuItemCheckboxProps,
-  type MenuItemProps,
-  type MenuPlacement,
-  type MenuProviderProps,
-  type MenuTriggerProps,
-} from './Menu';
-export { Pressable, type PressableProps } from './Pressable';
-export { Radio, type RadioProps } from './Radio';
-export { RadioGroupProvider, type RadioGroupProviderProps } from './Radio';
-export { SpringMotionConfig, type SpringMotionConfigProps } from './SpringMotionConfig';
-export { Switch, type SwitchProps } from './Switch';

package/src/components/client/motionFeatures/domAnimation.ts

@@ -1,2 +0,0 @@
-// https://www.framer.com/motion/guide-reduce-bundle-size/#available-features
-export { domAnimation } from 'motion/react';

package/src/components/client/motionFeatures/domMax.ts

@@ -1,2 +0,0 @@
-// https://www.framer.com/motion/guide-reduce-bundle-size/#available-features
-export { domMax } from 'motion/react';

package/src/components/experimental/Spinner.tsx

@@ -1,30 +0,0 @@
-import { Progress } from '@yahoo/uds-icons';
-
-import { cx } from '../../styles/styler';
-import type { IconProps } from '../Icon';
-import { Icon } from '../Icon';
-
-type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {
-  color?: IconProps['color'];
-  size?: IconProps['size'];
-};
-
-function Spinner({ className, color = 'primary', size = 'lg', ...props }: SpinnerProps) {
-  return (
-    <div role="status" className={cx('self-center', 'relative', className)} {...props}>
-      <Icon
-        role="img"
-        name={Progress}
-        className="animate-spin"
-        size={size}
-        color={color}
-        aria-hidden="true"
-      />
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-}
-
-Spinner.displayName = 'Spinner';
-
-export { Spinner, type SpinnerProps };

package/src/components/experimental/Table.mocks.tsx

@@ -1,38 +0,0 @@
-import type { TableColumn } from './Table';
-
-export type MockData = {
-  id: number;
-  name: string;
-  actions?: () => JSX.Element;
-};
-
-export const data: MockData[] = [
-  { id: 1, name: 'John Doe' },
-  { id: 2, name: 'Jane Doe' },
-];
-
-export const columns: TableColumn<MockData>[] = [
-  { title: 'ID', dataIndex: 'id' },
-  { title: 'Name', dataIndex: 'name' },
-  {
-    title: 'Actions',
-    dataIndex: 'actions',
-    render: () => <button>Edit</button>, // Assuming you want a static button for demonstration
-  },
-];
-
-// Sample data type
-export type ProductMockData = {
-  id: number;
-  product: string;
-  price: number;
-  inStock: boolean;
-};
-
-// Sample data
-export const productsData: ProductMockData[] = [
-  { id: 1, product: 'Laptop', price: 1200, inStock: true },
-  { id: 2, product: 'Smartphone', price: 800, inStock: false },
-  { id: 3, product: 'Tablet', price: 700, inStock: true },
-  { id: 4, product: 'Vision Pro', price: 4700, inStock: false },
-];