react-native-bread 0.1.0 → 0.1.2

package/src/toast-store.ts

@@ -1,270 +0,0 @@
-import type { Toast, ToastConfig, ToastOptions, ToastState, ToastTheme, ToastType, ToastTypeColors } from "./types";
-
-export type Listener = (state: ToastState) => void;
-
-const EXIT_DURATION = 350;
-
-/** Default theme values */
-const DEFAULT_THEME: ToastTheme = {
-  position: "top",
-  offset: 0,
-  stacking: true,
-  maxStack: 3,
-  dismissible: true,
-  showCloseButton: true,
-  colors: {
-    success: { accent: "#28B770", background: "#FFFFFF" },
-    error: { accent: "#F05964", background: "#FFFFFF" },
-    info: { accent: "#EDBE43", background: "#FFFFFF" },
-    loading: { accent: "#232323", background: "#FFFFFF" },
-  },
-  icons: {},
-  toastStyle: {},
-  titleStyle: {},
-  descriptionStyle: {},
-  defaultDuration: 4000,
-};
-
-/** Deep merge user config with defaults */
-function mergeConfig(config: ToastConfig | undefined): ToastTheme {
-  if (!config) return DEFAULT_THEME;
-
-  const mergedColors = { ...DEFAULT_THEME.colors };
-  if (config.colors) {
-    for (const type of Object.keys(config.colors) as ToastType[]) {
-      const userColors = config.colors[type];
-      if (userColors) {
-        mergedColors[type] = {
-          ...DEFAULT_THEME.colors[type],
-          ...userColors,
-        } as ToastTypeColors;
-      }
-    }
-  }
-
-  return {
-    position: config.position ?? DEFAULT_THEME.position,
-    offset: config.offset ?? DEFAULT_THEME.offset,
-    stacking: config.stacking ?? DEFAULT_THEME.stacking,
-    maxStack: config.maxStack ?? DEFAULT_THEME.maxStack,
-    dismissible: config.dismissible ?? DEFAULT_THEME.dismissible,
-    showCloseButton: config.showCloseButton ?? DEFAULT_THEME.showCloseButton,
-    colors: mergedColors,
-    icons: { ...DEFAULT_THEME.icons, ...config.icons },
-    toastStyle: { ...DEFAULT_THEME.toastStyle, ...config.toastStyle },
-    titleStyle: { ...DEFAULT_THEME.titleStyle, ...config.titleStyle },
-    descriptionStyle: { ...DEFAULT_THEME.descriptionStyle, ...config.descriptionStyle },
-    defaultDuration: config.defaultDuration ?? DEFAULT_THEME.defaultDuration,
-  };
-}
-
-class ToastStore {
-  private state: ToastState = {
-    visibleToasts: [],
-  };
-
-  private theme: ToastTheme = DEFAULT_THEME;
-
-  private listeners = new Set<Listener>();
-  private toastIdCounter = 0;
-  private timeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-  subscribe = (listener: Listener) => {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  };
-
-  private emit() {
-    for (const listener of this.listeners) {
-      listener(this.state);
-    }
-  }
-
-  private setState(partial: Partial<ToastState>) {
-    this.state = { ...this.state, ...partial };
-    this.emit();
-  }
-
-  getState = () => this.state;
-
-  getTheme = () => this.theme;
-
-  setConfig = (config: ToastConfig | undefined) => {
-    this.theme = mergeConfig(config);
-  };
-
-  show = (
-    title: string,
-    description?: string,
-    type: ToastType = "success",
-    duration?: number,
-    options?: ToastOptions
-  ): string => {
-    const actualDuration = duration ?? options?.duration ?? this.theme.defaultDuration;
-    const maxToasts = this.theme.stacking ? this.theme.maxStack : 1;
-
-    const id = `toast-${++this.toastIdCounter}`;
-    const newToast: Toast = {
-      id,
-      title,
-      description: description ?? options?.description,
-      type,
-      duration: actualDuration,
-      createdAt: Date.now(),
-      isExiting: false,
-      options,
-    };
-
-    const { visibleToasts } = this.state;
-
-    // Get only non-exiting toasts for count
-    const activeToasts = visibleToasts.filter(t => !t.isExiting);
-
-    if (activeToasts.length >= maxToasts) {
-      const toastsToRemove = activeToasts.slice(maxToasts - 1);
-
-      for (const toast of toastsToRemove) {
-        // Clear auto-dismiss timeout
-        const timeout = this.timeouts.get(toast.id);
-        if (timeout) {
-          clearTimeout(timeout);
-          this.timeouts.delete(toast.id);
-        }
-      }
-
-      const removeIds = new Set(toastsToRemove.map(t => t.id));
-
-      if (this.theme.stacking) {
-        // When stacking is ON: remove old toasts from state immediately (no animation for stack overflow)
-        this.setState({
-          visibleToasts: visibleToasts.filter(t => !removeIds.has(t.id)),
-        });
-      } else {
-        // When stacking is OFF: animate out the old toast, wait, then show new one
-        this.setState({
-          visibleToasts: visibleToasts.map(t => (removeIds.has(t.id) ? { ...t, isExiting: true } : t)),
-        });
-
-        // Delay showing the new toast until the old one has animated out
-        setTimeout(() => {
-          for (const toast of toastsToRemove) {
-            this.removeToast(toast.id);
-          }
-          this.addToast(newToast, actualDuration);
-        }, EXIT_DURATION - 220);
-
-        return id;
-      }
-    }
-
-    // Add new toast immediately (stacking ON or no existing toasts)
-    this.addToast(newToast, actualDuration);
-
-    return id;
-  };
-
-  private addToast(toast: Toast, duration: number) {
-    this.setState({
-      visibleToasts: [toast, ...this.state.visibleToasts.filter(t => !t.isExiting)],
-    });
-
-    // Schedule auto-dismiss with duration multiplier based on position
-    this.scheduleTimeout(toast.id, duration, 0);
-
-    // Reschedule timeouts for other toasts based on their new positions
-    this.rescheduleAllTimeouts();
-  }
-
-  private scheduleTimeout(id: string, baseDuration: number, index: number) {
-    const existingTimeout = this.timeouts.get(id);
-    if (existingTimeout) {
-      clearTimeout(existingTimeout);
-    }
-
-    // Duration multiplier: index 0 = 1x, index 1 = 2x, index 2 = 3x
-    const duration = baseDuration * (index + 1);
-
-    const timeout = setTimeout(() => {
-      this.hide(id);
-    }, duration);
-
-    this.timeouts.set(id, timeout);
-  }
-
-  private rescheduleAllTimeouts() {
-    const { visibleToasts } = this.state;
-
-    visibleToasts.forEach((toast, index) => {
-      // Skip if already exiting or index 0 (just scheduled)
-      if (toast.isExiting || index === 0) return;
-
-      this.scheduleTimeout(toast.id, toast.duration, index);
-    });
-  }
-
-  hide = (id: string) => {
-    const { visibleToasts } = this.state;
-    const toast = visibleToasts.find(t => t.id === id);
-    if (!toast || toast.isExiting) return;
-
-    // Clear the auto-dismiss timeout
-    const timeout = this.timeouts.get(id);
-    if (timeout) {
-      clearTimeout(timeout);
-      this.timeouts.delete(id);
-    }
-
-    // Mark as exiting (triggers exit animation in component)
-    this.setState({
-      visibleToasts: visibleToasts.map(t => (t.id === id ? { ...t, isExiting: true } : t)),
-    });
-
-    // After exit animation, actually remove the toast
-    setTimeout(() => {
-      this.removeToast(id);
-    }, EXIT_DURATION);
-  };
-
-  private removeToast(id: string) {
-    const timeout = this.timeouts.get(id);
-    if (timeout) {
-      clearTimeout(timeout);
-      this.timeouts.delete(id);
-    }
-
-    this.setState({
-      visibleToasts: this.state.visibleToasts.filter(t => t.id !== id),
-    });
-
-    // Reschedule remaining toasts with updated positions
-    this.rescheduleAllTimeouts();
-  }
-
-  updateToast = (id: string, data: Partial<Omit<Toast, "id" | "createdAt">>) => {
-    const { visibleToasts } = this.state;
-    const index = visibleToasts.findIndex(t => t.id === id);
-    if (index === -1) return;
-
-    this.setState({
-      visibleToasts: visibleToasts.map(t => (t.id === id ? { ...t, ...data } : t)),
-    });
-
-    if (data.duration !== undefined) {
-      this.scheduleTimeout(id, data.duration, index);
-    }
-  };
-
-  hideAll = () => {
-    for (const timeout of this.timeouts.values()) {
-      clearTimeout(timeout);
-    }
-    this.timeouts.clear();
-    this.setState({ visibleToasts: [] });
-  };
-}
-
-export const toastStore = new ToastStore();
-
-export type { Toast, ToastState, ToastType };

package/src/toast.tsx

@@ -1,417 +0,0 @@
-import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  Easing,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { scheduleOnRN } from "react-native-worklets";
-import { CloseIcon, GreenCheck, InfoIcon, RedX } from "./icons";
-import { type Toast as ToastData, type ToastState, type ToastType, toastStore } from "./toast-store";
-import type { IconRenderFn, ToastPosition, ToastTheme } from "./types";
-
-const ICON_SIZE = 28;
-
-/** Default icon for each toast type */
-const DefaultIcon = ({ type, accentColor }: { type: ToastType; accentColor: string }) => {
-  switch (type) {
-    case "success":
-      return <GreenCheck width={36} height={36} fill={accentColor} />;
-    case "error":
-      return <RedX width={ICON_SIZE} height={ICON_SIZE} fill={accentColor} />;
-    case "loading":
-      return <ActivityIndicator size={ICON_SIZE} color={accentColor} />;
-    case "info":
-      return <InfoIcon width={ICON_SIZE} height={ICON_SIZE} fill={accentColor} />;
-    default:
-      return <GreenCheck width={36} height={36} fill={accentColor} />;
-  }
-};
-
-/** Resolves the icon to render - checks per-toast, then config, then default */
-const resolveIcon = (
-  type: ToastType,
-  accentColor: string,
-  customIcon?: ReactNode | IconRenderFn,
-  configIcon?: IconRenderFn
-): ReactNode => {
-  // Per-toast custom icon takes priority
-  if (customIcon) {
-    if (typeof customIcon === "function") {
-      return customIcon({ color: accentColor, size: ICON_SIZE });
-    }
-    return customIcon;
-  }
-
-  // Config-level custom icon
-  if (configIcon) {
-    return configIcon({ color: accentColor, size: ICON_SIZE });
-  }
-
-  // Default icon
-  return <DefaultIcon type={type} accentColor={accentColor} />;
-};
-
-interface AnimatedIconProps {
-  type: ToastType;
-  accentColor: string;
-  customIcon?: ReactNode | IconRenderFn;
-  configIcon?: IconRenderFn;
-}
-
-const AnimatedIcon = ({ type, accentColor, customIcon, configIcon }: AnimatedIconProps) => {
-  const progress = useSharedValue(0);
-
-  useEffect(() => {
-    progress.value = withTiming(1, { duration: 350, easing: Easing.out(Easing.back(1.5)) });
-  }, [progress]);
-
-  const style = useAnimatedStyle(() => ({
-    opacity: progress.value,
-    transform: [{ scale: 0.7 + progress.value * 0.3 }],
-  }));
-
-  return <Animated.View style={style}>{resolveIcon(type, accentColor, customIcon, configIcon)}</Animated.View>;
-};
-
-// singleton instance
-export const ToastContainer = () => {
-  const [visibleToasts, setVisibleToasts] = useState<ToastData[]>([]);
-  const [theme, setTheme] = useState<ToastTheme>(() => toastStore.getTheme());
-  const { top, bottom } = useSafeAreaInsets();
-
-  useEffect(() => {
-    const initialState = toastStore.getState();
-    setVisibleToasts(initialState.visibleToasts);
-    setTheme(toastStore.getTheme());
-
-    return toastStore.subscribe((state: ToastState) => {
-      setVisibleToasts(state.visibleToasts);
-      setTheme(toastStore.getTheme());
-    });
-  }, []);
-
-  // Calculate visual index for each toast (exiting toasts don't count)
-  const getVisualIndex = useCallback(
-    (toastId: string) => {
-      let visualIndex = 0;
-      for (const t of visibleToasts) {
-        if (t.id === toastId) break;
-        if (!t.isExiting) visualIndex++;
-      }
-      return visualIndex;
-    },
-    [visibleToasts]
-  );
-
-  // Memoize the reversed array to avoid recreating on each render
-  const reversedToasts = useMemo(() => [...visibleToasts].reverse(), [visibleToasts]);
-
-  if (visibleToasts.length === 0) {
-    return null;
-  }
-
-  const isBottom = theme.position === "bottom";
-  const inset = isBottom ? bottom : top;
-  const positionStyle = isBottom ? { bottom: inset + theme.offset + 2 } : { top: inset + theme.offset + 2 };
-
-  return (
-    <View style={[styles.container, positionStyle]} pointerEvents="box-none">
-      {reversedToasts.map(toast => {
-        const index = toast.isExiting ? -1 : getVisualIndex(toast.id);
-        return <MemoizedToastItem key={toast.id} toast={toast} index={index} theme={theme} position={theme.position} />;
-      })}
-    </View>
-  );
-};
-
-interface ToastItemProps {
-  toast: ToastData;
-  index: number;
-  theme: ToastTheme;
-  position: ToastPosition;
-}
-
-const EASING = Easing.bezier(0.25, 0.1, 0.25, 1.0);
-const ToY = 0;
-const Duration = 400;
-const ExitDuration = 350;
-const MaxDragDown = 60;
-
-const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
-  const progress = useSharedValue(0);
-  const translationY = useSharedValue(0);
-  const isBeingDragged = useSharedValue(false);
-  const shouldDismiss = useSharedValue(false);
-
-  // Position-based animation values
-  const isBottom = position === "bottom";
-  const entryFromY = isBottom ? 80 : -80;
-  const exitToY = isBottom ? 100 : -100;
-
-  // Stack position animation
-  const stackIndex = useSharedValue(index);
-
-  // Title color animation on variant change
-  const colorProgress = useSharedValue(1);
-  const fromColor = useSharedValue(theme.colors[toast.type].accent);
-  const toColor = useSharedValue(theme.colors[toast.type].accent);
-
-  // Refs for tracking previous values to avoid unnecessary animations
-  const lastHandledType = useRef(toast.type);
-  const prevIndex = useRef(index);
-  const hasEntered = useRef(false);
-
-  // Combined animation effect for entry, exit, color transitions, and stack position
-  useEffect(() => {
-    // Entry animation (only once on mount)
-    if (!hasEntered.current && !toast.isExiting) {
-      progress.value = withTiming(1, { duration: Duration, easing: EASING });
-      hasEntered.current = true;
-    }
-
-    // Exit animation when isExiting becomes true
-    if (toast.isExiting) {
-      progress.value = withTiming(0, { duration: ExitDuration, easing: EASING });
-      translationY.value = withTiming(exitToY, { duration: ExitDuration, easing: EASING });
-    }
-
-    // Color transition when type changes
-    if (toast.type !== lastHandledType.current) {
-      fromColor.value = theme.colors[lastHandledType.current].accent;
-      toColor.value = theme.colors[toast.type].accent;
-      lastHandledType.current = toast.type;
-      colorProgress.value = 0;
-      colorProgress.value = withTiming(1, { duration: 300, easing: EASING });
-    }
-
-    // Stack position animation when index changes
-    if (index >= 0 && prevIndex.current !== index) {
-      stackIndex.value = withTiming(index, { duration: 300, easing: EASING });
-      prevIndex.current = index;
-    }
-  }, [
-    toast.isExiting,
-    toast.type,
-    index,
-    progress,
-    translationY,
-    fromColor,
-    toColor,
-    colorProgress,
-    stackIndex,
-    exitToY,
-    theme.colors,
-  ]);
-
-  const titleColorStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(colorProgress.value, [0, 1], [fromColor.value, toColor.value]),
-  }));
-
-  const dismissToast = useCallback(() => {
-    toastStore.hide(toast.id);
-  }, [toast.id]);
-
-  const panGesture = Gesture.Pan()
-    .onStart(() => {
-      "worklet";
-      isBeingDragged.value = true;
-      shouldDismiss.value = false;
-    })
-    .onUpdate(event => {
-      "worklet";
-      const rawY = event.translationY;
-      // For top: negative Y = dismiss direction, positive Y = resistance
-      // For bottom: positive Y = dismiss direction, negative Y = resistance
-      const dismissDrag = isBottom ? rawY : -rawY;
-      const resistDrag = isBottom ? -rawY : rawY;
-
-      if (dismissDrag > 0) {
-        // Moving toward dismiss direction
-        const clampedY = isBottom ? Math.min(rawY, 180) : Math.max(rawY, -180);
-        translationY.value = clampedY;
-        if (dismissDrag > 40 || (isBottom ? event.velocityY > 300 : event.velocityY < -300)) {
-          shouldDismiss.value = true;
-        }
-      } else {
-        // Moving away from edge - apply resistance
-        const exponentialDrag = MaxDragDown * (1 - Math.exp(-resistDrag / 250));
-        translationY.value = isBottom
-          ? -Math.min(exponentialDrag, MaxDragDown)
-          : Math.min(exponentialDrag, MaxDragDown);
-        shouldDismiss.value = false;
-      }
-    })
-    .onEnd(() => {
-      "worklet";
-      isBeingDragged.value = false;
-
-      if (shouldDismiss.value) {
-        progress.value = withTiming(0, {
-          duration: ExitDuration,
-          easing: EASING,
-        });
-        const exitOffset = isBottom ? 200 : -200;
-        translationY.value = withTiming(translationY.value + exitOffset, {
-          duration: ExitDuration,
-          easing: EASING,
-        });
-        scheduleOnRN(dismissToast);
-      } else {
-        translationY.value = withTiming(0, {
-          duration: 650,
-          easing: EASING,
-        });
-      }
-    });
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const baseTranslateY = interpolate(progress.value, [0, 1], [entryFromY, ToY]);
-
-    // Stack offset: each toast behind moves away from edge (up for top, down for bottom)
-    const stackOffsetY = isBottom ? stackIndex.value * 10 : stackIndex.value * -10;
-
-    // Stack scale: each toast behind scales down by 0.05
-    const stackScale = 1 - stackIndex.value * 0.05;
-
-    const finalTranslateY = baseTranslateY + translationY.value + stackOffsetY;
-
-    const progressOpacity = interpolate(progress.value, [0, 1], [0, 1]);
-    // For top: dragging up (negative) fades out. For bottom: dragging down (positive) fades out
-    const dismissDirection = isBottom ? translationY.value : -translationY.value;
-    const dragOpacity = dismissDirection > 0 ? interpolate(dismissDirection, [0, 130], [1, 0], "clamp") : 1;
-    const opacity = progressOpacity * dragOpacity;
-
-    const dragScale = interpolate(Math.abs(translationY.value), [0, 50], [1, 0.98], "clamp");
-    const scale = stackScale * dragScale;
-
-    return {
-      transform: [{ translateY: finalTranslateY }, { scale }],
-      opacity,
-      zIndex: 1000 - stackIndex.value,
-    };
-  });
-
-  const accentColor = theme.colors[toast.type].accent;
-  const backgroundColor = theme.colors[toast.type].background;
-  const verticalAnchor = isBottom ? { bottom: 0 } : { top: 0 };
-
-  // Per-toast overrides from options
-  const { options } = toast;
-  const customIcon = options?.icon;
-  const configIcon = theme.icons[toast.type];
-
-  // Resolve dismissible and showCloseButton (per-toast overrides config)
-  const isDismissible = options?.dismissible ?? theme.dismissible;
-  const shouldShowCloseButton = toast.type !== "loading" && (options?.showCloseButton ?? theme.showCloseButton);
-
-  // Enable/disable gesture based on dismissible setting
-  const gesture = isDismissible ? panGesture : Gesture.Pan().enabled(false);
-
-  return (
-    <GestureDetector gesture={gesture}>
-      <Animated.View
-        style={[styles.toast, verticalAnchor, { backgroundColor }, theme.toastStyle, options?.style, animatedStyle]}
-      >
-        <View style={styles.content}>
-          <View style={styles.icon}>
-            <AnimatedIcon
-              key={toast.type}
-              type={toast.type}
-              accentColor={accentColor}
-              customIcon={customIcon}
-              configIcon={configIcon}
-            />
-          </View>
-          <View style={styles.textContainer}>
-            <Animated.Text
-              maxFontSizeMultiplier={1.35}
-              allowFontScaling={false}
-              style={[styles.title, theme.titleStyle, options?.titleStyle, titleColorStyle]}
-            >
-              {toast.title}
-            </Animated.Text>
-            {toast.description && (
-              <Text
-                allowFontScaling={false}
-                maxFontSizeMultiplier={1.35}
-                style={[styles.description, theme.descriptionStyle, options?.descriptionStyle]}
-              >
-                {toast.description}
-              </Text>
-            )}
-          </View>
-          {shouldShowCloseButton && (
-            <Pressable style={styles.closeButton} onPress={dismissToast} hitSlop={12}>
-              <CloseIcon width={20} height={20} />
-            </Pressable>
-          )}
-        </View>
-      </Animated.View>
-    </GestureDetector>
-  );
-};
-
-const MemoizedToastItem = memo(ToastItem);
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    left: 16,
-    right: 16,
-    zIndex: 1000,
-  },
-  closeButton: {
-    padding: 4,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  icon: {
-    width: 48,
-    height: 48,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 8,
-  },
-  content: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 12,
-    minHeight: 36,
-  },
-  description: {
-    color: "#6B7280",
-    fontSize: 12,
-    fontWeight: "500",
-    lineHeight: 16,
-  },
-  textContainer: {
-    flex: 1,
-    gap: 1,
-    justifyContent: "center",
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: "700",
-    lineHeight: 20,
-  },
-  toast: {
-    borderRadius: 20,
-    borderCurve: "continuous",
-    position: "absolute",
-    left: 0,
-    right: 0,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.05,
-    shadowRadius: 24,
-    elevation: 8,
-  },
-});