@cdx-ui/components 0.0.1-beta.1 → 0.0.1-beta.100

package/src/components/Toast/index.tsx

@@ -0,0 +1,520 @@
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { CloseIcon } from '@cdx-ui/icons';
+import {
+  ToastRoot as ToastRootPrimitive,
+  useToastContext,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+} from '@cdx-ui/primitives';
+import { AnimationSettingsProvider } from '../../providers/animation-settings';
+import type { ToastComponentProps } from '../../providers/toast';
+import { useToastLifecycle } from '../../providers/toast/lifecycle.context';
+import { useToastConfig } from '../../providers/toast/toast-config.context';
+import { Button } from '../Button';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { useToastRootAnimation } from './animation';
+import { useButtonColor, useVerticalPlaceholderStyles } from './hooks';
+import {
+  toastRootVariants,
+  toastLabelVariants,
+  toastDescriptionVariants,
+  toastIconVariants,
+  toastStyleSheet,
+  toastWrapperVariants,
+} from './styles';
+import type {
+  DefaultToastProps,
+  ToastActionProps,
+  ToastCloseProps,
+  ToastContextValue,
+  ToastDescriptionProps,
+  ToastIconProps,
+  ToastProps,
+  ToastTitleProps,
+} from './types';
+
+const SCOPE = 'TOAST';
+
+const useToastStyleContext = () => useStyleContext(SCOPE) as ToastContextValue;
+
+const AnimatedToastRoot = Animated.createAnimatedComponent(ToastRootPrimitive);
+
+const IS_WEB = Platform.OS === 'web';
+
+/**
+ * Fallback timeout for web exit transitions. Covers cases where
+ * `transitionend` never fires — `prefers-reduced-motion: reduce`
+ * collapsing the transition, a backgrounded tab, or the element being
+ * hidden before it triggers. Longer than the longest CSS transition
+ * (200ms enter / 150ms exit) plus a ~100ms buffer.
+ */
+const WEB_TRANSITION_SAFETY_MS = 300;
+
+type ToastDataState = 'entering' | 'open' | 'closed';
+
+// --------------------------------------------------
+
+const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
+  const globalConfig = useToastConfig();
+
+  const {
+    children,
+    color: localColor,
+    placement: localPlacement,
+    index,
+    total,
+    heights,
+    maxVisibleToasts,
+    className,
+    style,
+    animation: localAnimation,
+    isSwipeable: localIsSwipeable,
+    isAnimatedStyleActive = true,
+    hide,
+    ...restProps
+  } = props;
+
+  /**
+   * Merge global config with local props, ensuring local props take precedence
+   */
+  const color = localColor ?? globalConfig?.color ?? 'default';
+  const placement = localPlacement ?? globalConfig?.placement ?? 'bottom';
+  const animation = localAnimation ?? globalConfig?.animation;
+  const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
+
+  // Access id from props (id is omitted from ToastProps type but available at runtime)
+  const toastProps = props as ToastProps & Pick<ToastComponentProps, 'id'>;
+  const { id } = toastProps;
+
+  const rootClassName = cn(toastRootVariants({ color }), className);
+
+  // Extract padding and backgroundColor for placeholder Views
+  const { topStyle, bottomStyle } = useVerticalPlaceholderStyles({
+    rootClassName,
+    style,
+  });
+
+  const { rContainerStyle, entering, exiting, panGesture, isAllAnimationsDisabled } =
+    useToastRootAnimation({
+      animation,
+      index,
+      total,
+      heights,
+      placement,
+      hide,
+      id,
+      isSwipeable,
+      maxVisibleToasts,
+    });
+
+  const rootStyle = isAnimatedStyleActive
+    ? [toastStyleSheet.root, rContainerStyle, style]
+    : [toastStyleSheet.root, style];
+
+  const animationSettingsContextValue = useMemo(
+    () => ({
+      isAllAnimationsDisabled,
+    }),
+    [isAllAnimationsDisabled],
+  );
+  const parent = useParentContext();
+  const ctx = useMemo(
+    () => ({ ...parent, [SCOPE]: { color, hide, id } }),
+    [parent, color, hide, id],
+  );
+
+  // ---- Web enter/exit lifecycle -----------------------------------------
+  // On web the CSS engine drives enter/exit via `data-state` transitions
+  // (see `toastWrapperVariants`). The state machine is:
+  //   mount → `entering` → (rAF) → `open` → (hide) → `closed` → (transitionend) → unmount
+  // Native ignores `dataState`; Reanimated `entering` / `exiting` still handle the visuals.
+
+  const lifecycle = useToastLifecycle();
+  const isPendingRemoval = lifecycle?.pendingRemovalIds.has(id) ?? false;
+  const isFrontmost = lifecycle?.frontmostId === id;
+
+  const [localState, setLocalState] = useState<Exclude<ToastDataState, 'closed'>>('entering');
+
+  useEffect(() => {
+    if (!IS_WEB) return;
+    // rAF ensures the first paint commits with `data-state="entering"`
+    // (opacity 0 + slight translate), then the next frame transitions
+    // to `data-state="open"` with the CSS engine driving the animation.
+    const raf = requestAnimationFrame(() => {
+      setLocalState('open');
+    });
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  const dataState: ToastDataState = isPendingRemoval ? 'closed' : localState;
+
+  const wrapperRef = useRef<View | null>(null);
+
+  // Keep the latest `remove` reachable from a ref so the pending-removal effect
+  // below doesn't list `lifecycle` in its dep array. The context value changes
+  // whenever any toast in the stack updates, which would otherwise reset the
+  // safety timeout on every unrelated re-render.
+  const removeRef = useRef<((id: string) => void) | undefined>(lifecycle?.remove);
+  removeRef.current = lifecycle?.remove;
+
+  useEffect(() => {
+    if (!IS_WEB) return;
+    if (!isPendingRemoval) return;
+
+    const node = wrapperRef.current as unknown as
+      | (HTMLElement & {
+          addEventListener: HTMLElement['addEventListener'];
+          removeEventListener: HTMLElement['removeEventListener'];
+        })
+      | null;
+
+    let removed = false;
+    const doRemove = () => {
+      if (removed) return;
+      removed = true;
+      removeRef.current?.(id);
+    };
+
+    const safetyTimer = setTimeout(doRemove, WEB_TRANSITION_SAFETY_MS);
+
+    if (!node || typeof node.addEventListener !== 'function') {
+      return () => {
+        clearTimeout(safetyTimer);
+      };
+    }
+
+    const handler = (event: Event) => {
+      const propertyName = (event as unknown as { propertyName?: string }).propertyName ?? '';
+      // Ignore transitions on unrelated properties (e.g. shadow tokens) so
+      // we don't unmount before the exit animation actually completes.
+      if (propertyName === 'opacity' || propertyName === 'transform') {
+        doRemove();
+      }
+    };
+    node.addEventListener('transitionend', handler);
+
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handler);
+    };
+  }, [isPendingRemoval, id]);
+
+  const wrapperClassName = cn(toastWrapperVariants({ placement }));
+
+  return (
+    <AnimationSettingsProvider value={animationSettingsContextValue}>
+      <ParentContext.Provider value={ctx}>
+        <GestureDetector gesture={panGesture}>
+          <Animated.View
+            ref={wrapperRef}
+            className={wrapperClassName}
+            entering={entering}
+            exiting={exiting}
+            {...(IS_WEB && { tabIndex: isFrontmost ? 0 : -1 })}
+            {...mergeDataAttributes(
+              dataAttributes({ state: dataState }),
+              isFrontmost ? dataAttributes({ frontmost: 'true' }) : undefined,
+            )}
+          >
+            {/* Animated toast instance */}
+            <AnimatedToastRoot
+              ref={ref}
+              className={rootClassName}
+              style={rootStyle}
+              {...restProps}
+              {...mergeDataAttributes(
+                restProps,
+                dataAttributes({
+                  slot: 'toast',
+                  placement,
+                  index: String(index ?? 0),
+                  ...(isFrontmost && { frontmost: 'true' }),
+                }),
+              )}
+            >
+              {children}
+              {/*
+                When visible toasts have different heights, the toast adapts to the last visible toast height.
+                In cases where a toast originally has one height and gets smaller when a new toast comes to stack,
+                content might be visible behind the last toast without proper padding.
+                The placeholder Views ensure that the content under active toast is hidden.
+              */}
+              <View className="absolute left-0 right-0 top-0" style={topStyle} />
+              <View className="absolute left-0 right-0 bottom-0" style={bottomStyle} />
+            </AnimatedToastRoot>
+            {/*
+              Hidden toast instance used to measure natural height on native.
+              Web owns its own natural height (Reanimated's height-spring is disabled
+              on web to avoid the enter/exit glitch), so the duplicate node is skipped
+              — this halves the DOM node count per toast on web.
+            */}
+            {!IS_WEB && (
+              <AnimatedToastRoot
+                pointerEvents="none"
+                className={cn(rootClassName, 'absolute opacity-0')}
+                style={[toastStyleSheet.root, style]}
+                onLayout={(event) => {
+                  const measuredHeight = event.nativeEvent.layout.height;
+                  heights.modify((value) => {
+                    'worklet';
+                    return { ...value, [id]: measuredHeight };
+                  });
+                }}
+                {...restProps}
+              >
+                {children}
+              </AnimatedToastRoot>
+            )}
+          </Animated.View>
+        </GestureDetector>
+      </ParentContext.Provider>
+    </AnimationSettingsProvider>
+  );
+});
+
+// --------------------------------------------------
+
+const ToastTitle = forwardRef<View, ToastTitleProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const { nativeID } = useToastContext();
+  const { color } = useToastStyleContext();
+
+  const labelClassName = cn(toastLabelVariants({ color }), className);
+
+  return (
+    <Text
+      ref={ref}
+      className={labelClassName}
+      nativeID={`${nativeID}_label`}
+      role="heading"
+      aria-level={3}
+      {...restProps}
+    >
+      {children}
+    </Text>
+  );
+});
+
+// --------------------------------------------------
+
+const ToastDescription = forwardRef<View, ToastDescriptionProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const { nativeID } = useToastContext();
+  const { color } = useToastStyleContext();
+  const descriptionClassName = cn(toastDescriptionVariants({ color }), className);
+
+  return (
+    <Text
+      ref={ref}
+      className={descriptionClassName}
+      nativeID={`${nativeID}_description`}
+      {...restProps}
+    >
+      {children}
+    </Text>
+  );
+});
+
+// --------------------------------------------------
+
+const ToastIcon = ({ asChild, className, style, as, ...props }: ToastIconProps) => {
+  const { color } = useToastStyleContext();
+  const computedClassName = cn(toastIconVariants({ color }), className);
+
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'toast-icon' }))}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'toast-icon' }))}
+    />
+  );
+};
+
+ToastIcon.displayName = 'Toast.Icon';
+
+// --------------------------------------------------
+
+const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
+  const { children, variant, color, size = 'small', className, ...restProps } = props;
+
+  const { color: toastColor } = useToastStyleContext();
+
+  // TODO: Add toastActionVariants to styles.ts to restore color-aware action styling
+
+  const buttonColor = useButtonColor({ color, toastColor });
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant ?? 'outline'}
+      color={buttonColor}
+      size={size}
+      className={className}
+      {...restProps}
+    >
+      <Button.Label>{children}</Button.Label>
+    </Button>
+  );
+});
+
+// --------------------------------------------------
+
+const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
+  const { children, size = 'small', className, onPress, ...restProps } = props;
+  const { hide, id } = useToastStyleContext();
+
+  /**
+   * Handle close button press
+   * If hide and id are available from context, use them to hide the toast
+   * Otherwise, use the provided onPress handler
+   */
+  const handlePress = (event: any) => {
+    if (hide && id) {
+      hide(id);
+    }
+    if (onPress && typeof onPress === 'function') {
+      onPress(event);
+    }
+  };
+
+  return (
+    <IconButton
+      ref={ref}
+      variant="ghost"
+      size={size}
+      aria-label="Close"
+      className={className}
+      onPress={handlePress}
+      as={CloseIcon}
+      {...restProps}
+    />
+  );
+});
+
+// --------------------------------------------------
+
+/**
+ * Default styled toast component for simplified toast.show() API
+ * Used internally when showing toasts with string or config object (without component)
+ */
+export function DefaultToast(props: DefaultToastProps) {
+  const globalConfig = useToastConfig();
+
+  const {
+    id,
+    color: localColor,
+    placement: localPlacement,
+    isSwipeable: localIsSwipeable,
+    animation: localAnimation,
+    label,
+    description,
+    actionLabel,
+    onActionPress,
+    icon,
+    hide,
+    show,
+    ...toastComponentProps
+  } = props;
+
+  /**
+   * Merge global config with local props, ensuring local props take precedence
+   */
+  const color = localColor ?? globalConfig?.color ?? 'default';
+  const placement = localPlacement ?? globalConfig?.placement ?? 'bottom';
+  const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
+  const animation = localAnimation ?? globalConfig?.animation;
+
+  const handleActionPress = () => {
+    if (onActionPress) {
+      onActionPress({ show, hide });
+    }
+  };
+
+  return (
+    <ToastRoot
+      id={id}
+      color={color}
+      placement={placement}
+      isSwipeable={isSwipeable}
+      animation={animation}
+      className="flex-row gap-3"
+      hide={hide}
+      show={show}
+      {...(color === 'danger' && { role: 'alert' as const })}
+      {...toastComponentProps}
+    >
+      {icon ? <ToastIcon as={icon} /> : null}
+      <View className="flex-1">
+        {label && <ToastTitle>{label}</ToastTitle>}
+        {description && <ToastDescription>{description}</ToastDescription>}
+      </View>
+      {actionLabel && <ToastAction onPress={handleActionPress}>{actionLabel}</ToastAction>}
+    </ToastRoot>
+  );
+}
+
+// --------------------------------------------------
+
+ToastRoot.displayName = 'Toast';
+ToastTitle.displayName = 'Toast.Title';
+ToastDescription.displayName = 'Toast.Description';
+ToastIcon.displayName = 'Toast.Icon';
+ToastAction.displayName = 'Toast.Action';
+ToastClose.displayName = 'Toast.Close';
+
+type ToastCompoundComponent = typeof ToastRoot & {
+  Title: typeof ToastTitle;
+  Description: typeof ToastDescription;
+  Icon: typeof ToastIcon;
+  Action: typeof ToastAction;
+  Close: typeof ToastClose;
+};
+
+export const Toast = Object.assign(ToastRoot, {
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Icon: ToastIcon,
+  Action: ToastAction,
+  Close: ToastClose,
+}) as ToastCompoundComponent;
+
+export type {
+  ToastColor,
+  ToastPlacement,
+  ToastRootAnimation,
+  ToastProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastIconProps,
+  ToastActionProps,
+  ToastCloseProps,
+  ToastContextValue,
+  ToastRootRef,
+  DefaultToastProps,
+} from './types';

package/src/components/Toast/styles.ts

@@ -0,0 +1,186 @@
+import { StyleSheet } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Toast root styles
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for visibility transitions when toasts are pushed beyond visible stack limits
+ * - `transform` (translateY) - Animated for vertical position transitions when toasts are stacked, and for swipe-to-dismiss gestures
+ * - `transform` (scale) - Animated for size scaling transitions when toasts are stacked (toasts behind active one are scaled down)
+ * - `height` - Animated for height transitions when toast content changes
+ *
+ * To customize these properties, use the `animation` prop on `Toast.Root`:
+ * ```tsx
+ * <Toast.Root
+ *   animation={{
+ *     opacity: {
+ *       value: [1, 0],
+ *       timingConfig: { duration: 300 }
+ *     },
+ *     translateY: {
+ *       value: [0, 10],
+ *       timingConfig: { duration: 300 }
+ *     },
+ *     scale: {
+ *       value: [1, 0.97],
+ *       timingConfig: { duration: 300 }
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Toast.Root`.
+ */
+export const toastRootVariants = cva(
+  [
+    // `overflow-hidden` was intentionally removed: on web it clips the drop
+    // shadow and clips the child's transform mid-transition, producing a
+    // visual "cut off" during enter/exit. Consumers that need clipping for
+    // custom child content (e.g. a background image) can add it themselves.
+    'flex-row items-center gap-2 rounded-[var(--border-radius-default)] min-h-12 px-4 py-2 shadow-lg bg-surface-primary border border-stroke-secondary',
+    'native:overflow-hidden',
+  ],
+  {
+    variants: {
+      color: {
+        default: '',
+        info: '',
+        success: '',
+        warning: '',
+        danger: '',
+      },
+    },
+    defaultVariants: {
+      color: 'default',
+    },
+  },
+);
+
+/**
+ * Toast wrapper variants
+ *
+ * Applied to the outer `Animated.View` that carries `data-state="entering|open|closed"`.
+ * On web the CSS engine drives the enter/exit animation via `data-state` transitions —
+ * fade + short translate — replacing the Reanimated layout animations that ran on
+ * the same element on native. Native ignores these classes (no `web:` prefix hits).
+ *
+ * `placement` picks the slide direction so top-placed toasts translate up on close and
+ * bottom-placed toasts translate down. The unprefixed `-translate-y-2` / `translate-y-2`
+ * on the `top-*` / `bottom-*` variants also seeds the entering-state offset synchronously
+ * — CSS transitions to `translate-y-0` when `data-state` flips to `open`.
+ *
+ * `motion-reduce:transition-none` collapses the transition for users with
+ * `prefers-reduced-motion: reduce`. In that case `transitionend` may never fire, so
+ * the Toast component's safety timeout handles removal.
+ */
+export const toastWrapperVariants = cva(
+  [
+    'absolute',
+    'web:transition-[opacity,transform] web:duration-200 web:ease-out',
+    'web:data-[state=entering]:opacity-0',
+    'web:data-[state=open]:opacity-100',
+    'web:data-[state=closed]:opacity-0 web:data-[state=closed]:duration-150',
+    'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+  ],
+  {
+    variants: {
+      placement: {
+        'top-start': [
+          'top-0 native:left-0 native:right-0',
+          'web:left-0 web:max-w-[460px]',
+          'web:data-[state=entering]:-translate-y-2',
+          'web:data-[state=closed]:-translate-y-2',
+        ],
+        top: [
+          'top-0 native:left-0 native:right-0',
+          'web:left-1/2 web:-translate-x-1/2 web:max-w-[460px]',
+          'web:data-[state=entering]:-translate-y-2',
+          'web:data-[state=closed]:-translate-y-2',
+        ],
+        'top-end': [
+          'top-0 native:left-0 native:right-0',
+          'web:right-0 web:max-w-[460px]',
+          'web:data-[state=entering]:-translate-y-2',
+          'web:data-[state=closed]:-translate-y-2',
+        ],
+        'bottom-start': [
+          'bottom-0 native:left-0 native:right-0',
+          'web:left-0 web:max-w-[460px]',
+          'web:data-[state=entering]:translate-y-2',
+          'web:data-[state=closed]:translate-y-2',
+        ],
+        bottom: [
+          'bottom-0 native:left-0 native:right-0',
+          'web:left-1/2 web:-translate-x-1/2 web:max-w-[460px]',
+          'web:data-[state=entering]:translate-y-2',
+          'web:data-[state=closed]:translate-y-2',
+        ],
+        'bottom-end': [
+          'bottom-0 native:left-0 native:right-0',
+          'web:right-0 web:max-w-[460px]',
+          'web:data-[state=entering]:translate-y-2',
+          'web:data-[state=closed]:translate-y-2',
+        ],
+      },
+    },
+    defaultVariants: {
+      placement: 'bottom',
+    },
+  },
+);
+
+export const toastLabelVariants = cva(['text-base font-sans-medium'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export const toastIconVariants = cva(['size-5'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export const toastStyleSheet = StyleSheet.create({
+  root: {
+    borderCurve: 'continuous',
+  },
+});
+
+export type ToastColorProps = VariantProps<typeof toastRootVariants>;