@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/components/experimental/client/SwitchV2.tsx

@@ -1,343 +0,0 @@
-import type { UniversalSwitchProps } from '@yahoo/uds/tokens';
-import * as m from 'motion/react-m';
-import type { ChangeEvent, FocusEvent } from 'react';
-import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';
-
-import { IconSlot } from '../../../components/IconSlot';
-import { cx, getStyles } from '../../../styles/styler';
-import { Box } from '../../Box';
-import { SpringMotionConfig } from '../../client/SpringMotionConfig';
-import { FormLabel } from '../../FormLabel';
-import { AvoidMotionLibraryProvider } from './AvoidMotionLibraryProvider';
-
-type NativeInputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'
->;
-
-type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
-
-const loadFeatures = () =>
-  import('@yahoo/uds/__private/motionFeatures/domMax').then(({ domMax }) => domMax);
-
-interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
-  layerClassNames?: {
-    root?: string;
-    switch?: string;
-    handle?: string;
-    label?: string;
-  };
-}
-
-const MotionBox = m.create(Box);
-
-/**
- * **⚙️️ 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 SwitchV2 = forwardRef<HTMLInputElement, SwitchV2Props>(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);
-
-  /**
-   * 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],
-  );
-
-  // Motion
-  const reduceMotion = forceReduceMotion ? 'always' : 'user';
-  const cssAnimationDuration = forceReduceMotion
-    ? 'duration-0'
-    : 'duration-120 motion-reduce:duration-0';
-
-  /**
-   * 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',
-      className: cx(
-        'group',
-        'flex',
-        'items-center',
-
-        labelPosition === 'start' ? 'flex-row' : 'flex-row-reverse',
-
-        ...(disabled ? ['cursor-default', 'opacity-50'] : ['cursor-pointer']),
-
-        layerClassNames?.root,
-        className,
-      ),
-    }),
-
-    switch: getStyles({
-      switchVariantSwitch: 'default',
-      switchSizeSwitch: size,
-      switchVariantActiveSwitch: isOn ? 'on' : 'off',
-      className: cx(
-        'uds-ring',
-        'uds-ring-within',
-
-        'relative',
-        'rounded-full',
-        'items-center',
-
-        cssAnimationDuration,
-        'transition-[background-color,box-shadow]',
-
-        layerClassNames?.switch,
-      ),
-    }),
-
-    handleContainer: cx('pointer-events-none', 'relative', 'w-full', 'h-full'),
-
-    handle: getStyles({
-      switchSizeHandle: size,
-      className: cx(
-        'absolute',
-        'top-0',
-        'bottom-0',
-
-        isOn ? 'right-0' : 'left-0',
-
-        layerClassNames?.handle,
-      ),
-    }),
-
-    handleContents: cx(
-      'relative',
-      'w-full',
-      'h-full',
-
-      'rounded-full',
-      'overflow-hidden',
-
-      !disabled && 'group-hover:scale-105',
-
-      'opacity-95',
-      !disabled && 'group-hover:opacity-100',
-
-      cssAnimationDuration,
-      'transition-[transform,opacity]',
-    ),
-
-    handleCircle: getStyles({
-      switchVariantActiveHandle: isOn ? 'on' : 'off',
-      switchVariantHandle: 'default',
-      className: cx('absolute', 'top-0', 'left-0', 'right-0', 'bottom-0'),
-    }),
-
-    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 ? 'label' : 'div';
-
-  return (
-    <SpringMotionConfig
-      reducedMotion={reduceMotion}
-      loadFeatures={loadFeatures}
-      layoutVariant="bouncy"
-      layoutSpeed="4"
-    >
-      <RootElement className={classNames.root} data-testid="switch-root" tabIndex={-1}>
-        <Box className={classNames.switch}>
-          <input
-            type="checkbox"
-            // 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={{}}
-          />
-
-          <Box className={classNames.handleContainer}>
-            <MotionBox className={classNames.handle} layout="position" layoutDependency={isOn}>
-              <Box className={classNames.handleContents}>
-                <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')}
-                  />
-                )}
-              </Box>
-            </MotionBox>
-          </Box>
-        </Box>
-
-        {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
-SwitchV2.displayName = 'SwitchV2';
-
-const SwitchV2AvoidMotionLibraryProvider = AvoidMotionLibraryProvider;
-
-export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };

package/src/components/experimental/client/Tabs.tsx

@@ -1,106 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import type { TabListProps, TabPanelProps, TabProviderProps as TabsProps } from '@ariakit/react';
-import {
-  Tab as OriginalTab,
-  TabList as OriginalTabList,
-  TabPanel as OriginalTabPanel,
-  TabProvider,
-  useTabContext,
-} from '@ariakit/react';
-import { forwardRef } from 'react';
-
-import { cx, getStyles } from '../../../styles/styler';
-import { createSlot } from '../../../utils/createSlot';
-import type { IconProps } from '../..';
-import { Icon, Pressable, Text } from '../..';
-
-const Slot = createSlot();
-
-interface TabProps extends React.PropsWithChildren {
-  asChild?: boolean;
-  value: string;
-  label: string;
-  startIcon?: IconProps['name'];
-}
-
-function Tabs(props: TabsProps) {
-  return <TabProvider {...props} />;
-}
-
-Tabs.displayName = 'Tabs';
-
-const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(
-  { className, ...props }: TabListProps,
-  ref,
-) {
-  const styles = getStyles({ display: 'flex', flexDirection: 'row', columnGap: '6', className });
-  return <OriginalTabList ref={ref} {...props} className={styles} />;
-});
-
-TabList.displayName = 'TabList';
-
-const Tab = function Tab({ asChild, label, value, startIcon }: TabProps) {
-  const Comp = asChild ? Slot : 'button';
-  const styles = getStyles({});
-  const store = useTabContext();
-  if (!store) {
-    throw new Error('Tab must be wrapped in a Tabs component');
-  }
-
-  const className = cx(
-    // Resting state
-    'text-tertiary',
-    'border-b-transparent',
-    // Selected state
-    'aria-selected:border-b-brand',
-    'aria-selected:text-secondary',
-  );
-
-  return (
-    <OriginalTab
-      id={value}
-      className={styles}
-      render={
-        <Pressable
-          borderBottomWidth="medium"
-          spacingBottom="1"
-          spacingTop="4"
-          className={className}
-          asChild
-        >
-          <Comp>
-            {startIcon ? <Icon name={startIcon} className="text-current" size="md" /> : null}
-            <Text className="text-current" variant="headline1" as="span">
-              {label}
-            </Text>
-          </Comp>
-        </Pressable>
-      }
-    />
-  );
-};
-
-Tab.displayName = 'Tab';
-
-const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(props, ref) {
-  const store = useTabContext();
-  if (!store) {
-    throw new Error('TabPanel must be wrapped in a Tabs component');
-  }
-  const tabId = store.useState('selectedId');
-
-  return <OriginalTabPanel ref={ref} tabId={tabId} {...props} />;
-});
-
-TabPanel.displayName = 'TabPanel';
-
-export {
-  Tab,
-  TabList,
-  type TabListProps,
-  TabPanel,
-  type TabPanelProps,
-  type TabProps,
-  Tabs,
-  type TabsProps,
-};

package/src/components/experimental/client/Toast.tsx

@@ -1,186 +0,0 @@
-import type { BackgroundPaletteAlias, ForegroundColor, LinePaletteAlias } from '@yahoo/uds/tokens';
-import { CheckCircle, Cross, Error, Info, Warning } from '@yahoo/uds-icons';
-import { isString } from 'lodash';
-import type { ReactNode } from 'react';
-import type {
-  CloseButton,
-  ToastClassName,
-  ToastContainerProps,
-  ToastOptions,
-  ToastPosition,
-  TypeOptions,
-} from 'react-toastify';
-import {
-  Slide,
-  toast as toastOriginal,
-  ToastContainer as OriginalToastContainer,
-} from 'react-toastify';
-
-import { cx, getStyles } from '../../../styles/styler';
-import { Icon, Text } from '../..';
-import { IconButton } from '../../client/IconButton';
-
-type ToastProps = ToastContainerProps;
-
-const wrapperStyles = getStyles({
-  borderRadius: 'md',
-  spacingVertical: '3',
-  spacingHorizontal: '5',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  columnGap: '5',
-  overflow: 'hidden',
-  position: 'relative',
-  className: 'cursor-pointer',
-  dropShadow: 'md',
-});
-
-const textStyles = getStyles({
-  fontSize: 'label2',
-  lineHeight: 'label2',
-  fontWeight: 'label2',
-  color: 'primary',
-});
-
-const backgroundMap: Record<TypeOptions, BackgroundPaletteAlias> = {
-  default: 'primary',
-  success: 'primary',
-  error: 'primary',
-  info: 'primary',
-  warning: 'primary',
-};
-
-const borderMap: Record<TypeOptions, LinePaletteAlias> = {
-  default: 'secondary',
-  success: 'positive',
-  error: 'alert',
-  info: 'info',
-  warning: 'warning',
-} as const;
-
-const iconColorMap: Record<TypeOptions, ForegroundColor> = {
-  default: 'primary',
-  success: 'positive',
-  error: 'alert',
-  info: 'info',
-  warning: 'warning',
-} as const;
-
-const colorMap: Record<TypeOptions, ForegroundColor> = {
-  default: 'primary',
-  success: 'primary',
-  error: 'primary',
-  info: 'primary',
-  warning: 'primary',
-} as const;
-
-const getToastClassName =
-  (toastClassName?: ToastClassName) =>
-  (context?: {
-    type?: TypeOptions;
-    defaultClassName?: string;
-    position?: ToastPosition;
-    rtl?: boolean;
-  }): string => {
-    const classes = getStyles({
-      color: colorMap[context?.type || 'default'],
-      backgroundColor: backgroundMap[context?.type || 'default'],
-      borderWidth: 'thin',
-      borderColor: borderMap[context?.type || 'default'],
-    });
-
-    return cx(
-      wrapperStyles,
-      classes,
-      isString(toastClassName) ? toastClassName : toastClassName?.(context),
-      'mb-2 last:mb-0',
-    );
-  };
-
-function CustomCloseButton({ closeToast }: Parameters<typeof CloseButton>[0]) {
-  return (
-    <IconButton
-      className="shrink-0"
-      name={Cross}
-      size="sm"
-      variant="tertiary"
-      onClick={closeToast}
-    />
-  );
-}
-
-CustomCloseButton.displayName = 'CustomCloseButton';
-
-// eslint-disable-next-line react/no-multi-comp
-function ToastContainer({ toastClassName, ...props }: ToastProps) {
-  return (
-    <OriginalToastContainer
-      toastClassName={getToastClassName(toastClassName)}
-      className={textStyles}
-      hideProgressBar
-      transition={Slide}
-      closeButton={CustomCloseButton}
-      autoClose={6000}
-      {...props}
-    />
-  );
-}
-
-ToastContainer.displayName = 'ToastContainer';
-
-type ToastOptionsWithoutType = Omit<ToastOptions, 'type'>;
-type ToastFunction = (message: ReactNode, options?: ToastOptionsWithoutType) => void;
-
-type ToastFunctionWithVariants = ToastFunction & {
-  positive: ToastFunction;
-  alert: ToastFunction;
-  info: ToastFunction;
-  warning: ToastFunction;
-};
-
-const toast: ToastFunctionWithVariants = Object.assign(
-  (message: ReactNode, options: ToastOptionsWithoutType = {}) => {
-    return toastOriginal(() => <Text color="current">{message}</Text>, {
-      ...options,
-      type: 'default',
-    });
-  },
-  {
-    positive: (message: ReactNode, options: ToastOptionsWithoutType = {}) => {
-      return toastOriginal(() => <Text color="current">{message}</Text>, {
-        ...options,
-        type: 'success',
-        icon: () => (
-          <Icon name={CheckCircle} size="md" variant="fill" color={iconColorMap['success']} />
-        ),
-      });
-    },
-    alert: (message: ReactNode, options: ToastOptionsWithoutType = {}) => {
-      return toastOriginal(() => <Text color="current">{message}</Text>, {
-        ...options,
-        type: 'error',
-        icon: () => <Icon name={Error} size="md" variant="fill" color={iconColorMap['error']} />,
-      });
-    },
-    warning: (message: ReactNode, options: ToastOptionsWithoutType = {}) => {
-      return toastOriginal(() => <Text color="current">{message}</Text>, {
-        ...options,
-        type: 'warning',
-        icon: () => (
-          <Icon name={Warning} size="md" variant="fill" color={iconColorMap['warning']} />
-        ),
-      });
-    },
-    info: (message: ReactNode, options: ToastOptionsWithoutType = {}) => {
-      return toastOriginal(() => <Text color="current">{message}</Text>, {
-        ...options,
-        type: 'info',
-        icon: () => <Icon name={Info} size="md" variant="fill" color={iconColorMap['info']} />,
-      });
-    },
-  },
-);
-
-export { getToastClassName, toast, ToastContainer, type ToastProps };

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

@@ -1,15 +0,0 @@
-/**
- * ------------------- GENERATED | DO NOT MODIFY THIS FILE ------------------
- * This file uses eslint-plugin-codegen to automatically watch for changes in
- * the `src/components/client` directory and updates this barrel file.
- */
-
-// codegen:start {preset: barrel,  exclude: ['*.*.*']}
-export * from './Accordion';
-export * from './AvoidMotionLibraryProvider';
-export * from './Modal';
-export * from './Popover';
-export * from './SwitchV2';
-export * from './Tabs';
-export * from './Toast';
-// codegen:end

package/src/components/experimental/index.ts

@@ -1,48 +0,0 @@
-/**
- * ------------------- GENERATED | DO NOT MODIFY THIS SECTION ------------------
- * This file uses eslint-plugin-codegen to automatically watch for changes in
- * the `src/components` directory and updates this barrel file.
- */
-
-// codegen:start {preset: barrel,  exclude: ['*.*.*']}
-export * from './Spinner';
-export * from './Table';
-// codegen:end
-
-// Client Components
-export { Accordion, type AccordionProps } from './client';
-export {
-  Tab,
-  TabList,
-  type TabListProps,
-  TabPanel,
-  type TabPanelProps,
-  type TabProps,
-  Tabs,
-  type TabsProps,
-} from './client';
-export { toast, ToastContainer, type ToastProps } from './client';
-export {
-  Popover,
-  PopoverAnchor,
-  PopoverArrow,
-  PopoverDescription,
-  PopoverDisclosure,
-  PopoverDisclosureArrow,
-  PopoverDismiss,
-  PopoverHeading,
-  type PopoverHeadingProps,
-  type PopoverProps,
-  PopoverProvider,
-  usePopoverStore,
-} from './client';
-export {
-  Modal,
-  ModalDismiss,
-  ModalHeader,
-  type ModalProps,
-  type ModalStore,
-  useModalStore,
-} from './client';
-export { SwitchV2, type SwitchV2Props } from './client';
-export { AvoidMotionLibraryProvider, useAvoidMotionLibrary } from './client';