@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

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

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

@@ -0,0 +1,106 @@
+/* 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

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

@@ -0,0 +1,15 @@
+/**
+ * ------------------- 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

@@ -0,0 +1,48 @@
+/**
+ * ------------------- 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';