@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/components/client/SpringMotionConfig.tsx

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,377 @@
+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

@@ -0,0 +1,30 @@
+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

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

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

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

package/src/components/experimental/Spinner.tsx

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,38 @@
+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 },
+];