react-native-toast-signal 0.1.0

package/src/constants.ts

@@ -0,0 +1,62 @@
+import type { SignalTheme } from './types';
+
+export const MAX_VISIBLE = 3;
+export const DEFAULT_DURATION = 3000;
+export const STACK_OFFSET = 14;
+export const SCALE_STEP = 0.05;
+export const ENTRY_OFFSET_Y = 80;
+export const SWIPE_THRESHOLD = 100;
+export const TIMING_MS = 280;
+
+export const DEFAULT_THEME: SignalTheme = {
+  success: {
+    background: '#0a0a0a',
+    border: '#22c55e40',
+    titleColor: '#ffffff',
+    descriptionColor: '#d1fae5',
+    iconColor: '#22c55e',
+  },
+  error: {
+    background: '#0a0a0a',
+    border: '#ef444440',
+    titleColor: '#ffffff',
+    descriptionColor: '#fee2e2',
+    iconColor: '#ef4444',
+  },
+  warning: {
+    background: '#0a0a0a',
+    border: '#f59e0b40',
+    titleColor: '#ffffff',
+    descriptionColor: '#fef3c7',
+    iconColor: '#f59e0b',
+  },
+  info: {
+    background: '#0a0a0a',
+    border: '#ffffff26',
+    titleColor: '#ffffff',
+    descriptionColor: '#ffffffcc',
+    iconColor: '#60a5fa',
+  },
+  loading: {
+    background: '#0a0a0a',
+    border: '#a78bfa40',
+    titleColor: '#ffffff',
+    descriptionColor: '#ede9fe',
+    iconColor: '#a78bfa',
+  },
+  custom: {
+    background: '#0a0a0a',
+    border: '#ffffff26',
+    titleColor: '#ffffff',
+    descriptionColor: '#ffffffcc',
+    iconColor: '#ffffff',
+  },
+};
+
+/** Unicode icons for non-loading, non-custom types */
+export const TYPE_ICONS: Partial<Record<string, string>> = {
+  success: '✓',
+  error: '✕',
+  warning: '⚠',
+  info: 'ℹ',
+};

package/src/core/store.ts

@@ -0,0 +1,171 @@
+import { MAX_VISIBLE, DEFAULT_DURATION } from '../constants';
+import type {
+  SignalListener,
+  SignalOptions,
+  SignalPromiseMessages,
+} from '../types';
+
+class SignalStore {
+  private listener: SignalListener | null = null;
+  private signals: SignalOptions[] = [];
+  private maxVisible: number = MAX_VISIBLE;
+  private defaultDuration: number = DEFAULT_DURATION;
+
+  configure(options: { maxVisible?: number; defaultDuration?: number }) {
+    if (options.maxVisible !== undefined) this.maxVisible = options.maxVisible;
+    if (options.defaultDuration !== undefined)
+      this.defaultDuration = options.defaultDuration;
+  }
+
+  getMaxVisible() {
+    return this.maxVisible;
+  }
+
+  setListener(listener: SignalListener) {
+    this.listener = listener;
+  }
+
+  removeListener() {
+    this.listener = null;
+  }
+
+  show(options: SignalOptions): string {
+    const now = Date.now();
+    const id =
+      options.id ?? `signal_${now}_${Math.random().toString(36).slice(2, 7)}`;
+
+    if (this.signals.some((s) => s.id === id)) return id;
+
+    const isLoading = options.type === 'loading';
+
+    const signal: SignalOptions = {
+      type: 'info',
+      position: 'top',
+      swipeToDismiss: !isLoading, // loading toasts shouldn't be accidentally swiped away
+      autoHide: !isLoading, // loading toasts stay until manually dismissed
+      duration: this.defaultDuration,
+      ...options,
+      id,
+      createdAt: now,
+    };
+
+    this.signals.unshift(signal);
+    this.emit();
+    return id;
+  }
+
+  /** Remove a toast by id */
+  hide(id: string) {
+    const len = this.signals.length;
+    this.signals = this.signals.filter((s) => s.id !== id);
+    if (this.signals.length !== len) this.emit();
+  }
+
+  /** Alias for hide() */
+  dismiss(id: string) {
+    this.hide(id);
+  }
+
+  /** Update any fields of an existing toast in-place */
+  update(
+    id: string,
+    options: Partial<Omit<SignalOptions, 'id' | 'createdAt'>>
+  ) {
+    const idx = this.signals.findIndex((s) => s.id === id);
+    if (idx === -1) return;
+    this.signals[idx] = { ...this.signals[idx]!, ...options };
+    this.emit();
+  }
+
+  /** Remove all toasts */
+  clear() {
+    if (this.signals.length === 0) return;
+    this.signals = [];
+    this.emit();
+  }
+
+  // ─── Convenience shorthands ───────────────────────────────────────────────
+
+  success(description: string, options?: Partial<SignalOptions>) {
+    return this.show({ ...options, description, type: 'success' });
+  }
+
+  error(description: string, options?: Partial<SignalOptions>) {
+    return this.show({ ...options, description, type: 'error' });
+  }
+
+  warning(description: string, options?: Partial<SignalOptions>) {
+    return this.show({ ...options, description, type: 'warning' });
+  }
+
+  info(description: string, options?: Partial<SignalOptions>) {
+    return this.show({ ...options, description, type: 'info' });
+  }
+
+  /**
+   * Show an infinite loading toast.
+   * Returns the id — call Signal.dismiss(id) when the operation completes.
+   */
+  loading(description: string, options?: Partial<SignalOptions>) {
+    return this.show({ ...options, description, type: 'loading' });
+  }
+
+  /**
+   * Attach a Promise to a toast lifecycle.
+   * Automatically transitions loading → success or error.
+   *
+   * @example
+   * Signal.promise(uploadFile(), {
+   *   loading: 'Uploading…',
+   *   success: (data) => `Uploaded ${data.name}!`,
+   *   error:   (err)  => err.message ?? 'Upload failed',
+   * });
+   */
+  promise<T = unknown>(
+    promise: Promise<T>,
+    messages: SignalPromiseMessages<T>,
+    options?: Partial<
+      Omit<SignalOptions, 'type' | 'autoHide' | 'swipeToDismiss'>
+    >
+  ): Promise<T> {
+    const id = this.loading(messages.loading, { ...options });
+
+    promise
+      .then((data) => {
+        const description =
+          typeof messages.success === 'function'
+            ? messages.success(data)
+            : messages.success;
+        this.update(id, {
+          type: 'success',
+          description,
+          autoHide: true,
+          swipeToDismiss: true,
+
+          duration: options?.duration ?? this.defaultDuration,
+        });
+      })
+      .catch((err: unknown) => {
+        const description =
+          typeof messages.error === 'function'
+            ? messages.error(err)
+            : messages.error;
+        this.update(id, {
+          type: 'error',
+          description,
+          autoHide: true,
+          swipeToDismiss: true,
+
+          duration: options?.duration ?? this.defaultDuration,
+        });
+      });
+
+    return promise;
+  }
+
+  private emit() {
+    this.listener?.([...this.signals]);
+  }
+}
+
+export const Signal = new SignalStore();

package/src/hooks/useSignal.ts

@@ -0,0 +1,116 @@
+import { useCallback } from 'react';
+import { Signal } from '../core/store';
+import type { SignalOptions, SignalPromiseMessages } from '../types';
+
+/**
+ * Hook to imperatively control Signal toasts from any component.
+ *
+ * @example
+ * const signal = useSignal();
+ *
+ * // Simple
+ * signal.success('Saved!');
+ * signal.error('Failed', { title: 'Oops' });
+ *
+ * // Loading → dismiss manually
+ * const id = signal.loading('Uploading…');
+ * await upload();
+ * signal.dismiss(id);
+ * signal.success('Done!');
+ *
+ * // Promise shorthand (auto loading → success/error)
+ * signal.promise(uploadFile(), {
+ *   loading: 'Uploading…',
+ *   success: (data) => `Uploaded ${data.name}!`,
+ *   error:   (err)  => err.message ?? 'Upload failed',
+ * });
+ *
+ * // With action button
+ * signal.error('Payment failed', {
+ *   action: { label: 'Retry', onPress: (dismiss) => { retry(); dismiss(); } },
+ * });
+ *
+ * // Custom icon
+ * signal.show({ description: 'New follower!', icon: <Avatar uri={url} size={20} /> });
+ */
+export const useSignal = () => {
+  const show = useCallback(
+    (options: SignalOptions): string => Signal.show(options),
+    []
+  );
+
+  const success = useCallback(
+    (description: string, options?: Partial<SignalOptions>): string =>
+      Signal.success(description, options),
+    []
+  );
+
+  const error = useCallback(
+    (description: string, options?: Partial<SignalOptions>): string =>
+      Signal.error(description, options),
+    []
+  );
+
+  const warning = useCallback(
+    (description: string, options?: Partial<SignalOptions>): string =>
+      Signal.warning(description, options),
+    []
+  );
+
+  const info = useCallback(
+    (description: string, options?: Partial<SignalOptions>): string =>
+      Signal.info(description, options),
+    []
+  );
+
+  /** Show an infinite loading toast. Returns id — call dismiss(id) when done. */
+  const loading = useCallback(
+    (description: string, options?: Partial<SignalOptions>): string =>
+      Signal.loading(description, options),
+    []
+  );
+
+  /**
+   * Attach a Promise to a toast lifecycle.
+   * Automatically transitions loading → success or error when the promise settles.
+   */
+  const promise = useCallback(
+    <T = unknown>(
+      p: Promise<T>,
+      messages: SignalPromiseMessages<T>,
+      options?: Partial<
+        Omit<SignalOptions, 'type' | 'autoHide' | 'swipeToDismiss'>
+      >
+    ): Promise<T> => Signal.promise(p, messages, options),
+    []
+  );
+
+  const hide = useCallback((id: string): void => Signal.hide(id), []);
+
+  /** Alias for hide() */
+  const dismiss = useCallback((id: string): void => Signal.dismiss(id), []);
+
+  const update = useCallback(
+    (
+      id: string,
+      options: Partial<Omit<SignalOptions, 'id' | 'createdAt'>>
+    ): void => Signal.update(id, options),
+    []
+  );
+
+  const clear = useCallback((): void => Signal.clear(), []);
+
+  return {
+    show,
+    success,
+    error,
+    warning,
+    info,
+    loading,
+    promise,
+    hide,
+    dismiss,
+    update,
+    clear,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { SignalProvider } from './provider/signal-provider';
+export { useSignal } from './hooks/useSignal';
+export { Signal } from './core/store';

package/src/provider/signal-provider.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Signal } from '../core/store';
+import { SignalItem } from '../components/signal-item';
+import { MAX_VISIBLE, DEFAULT_DURATION } from '../constants';
+import type { SignalOptions, SignalProviderProps, SignalTheme } from '../types';
+
+interface Props extends SignalProviderProps {
+  theme?: Partial<SignalTheme>;
+}
+
+export const SignalProvider = ({
+  children,
+  maxVisible = MAX_VISIBLE,
+  defaultDuration = DEFAULT_DURATION,
+  theme,
+}: Props) => {
+  const insets = useSafeAreaInsets();
+  const [signals, setSignals] = useState<SignalOptions[]>([]);
+
+  useEffect(() => {
+    Signal.configure({ maxVisible, defaultDuration });
+  }, [maxVisible, defaultDuration]);
+
+  useEffect(() => {
+    Signal.setListener(setSignals);
+    return () => Signal.removeListener();
+  }, []);
+
+  const handleHide = useCallback((id: string) => {
+    Signal.hide(id);
+  }, []);
+
+  const topSignals = signals.filter((s) => (s.position ?? 'top') === 'top');
+  const bottomSignals = signals.filter((s) => s.position === 'bottom');
+
+  return (
+    <>
+      {children}
+
+      {/* Top stack */}
+      <View
+        pointerEvents="box-none"
+        style={[styles.wrapper, { top: insets.top + 8 }]}
+      >
+        {topSignals.map((signal, idx) => (
+          <SignalItem
+            key={signal.id}
+            signal={signal}
+            index={idx}
+            maxVisible={maxVisible}
+            theme={theme}
+            onHide={() => handleHide(signal.id!)}
+          />
+        ))}
+      </View>
+
+      {/* Bottom stack */}
+      <View
+        pointerEvents="box-none"
+        style={[styles.wrapper, { bottom: insets.bottom + 8 }]}
+      >
+        {bottomSignals.map((signal, idx) => (
+          <SignalItem
+            key={signal.id}
+            signal={signal}
+            index={idx}
+            maxVisible={maxVisible}
+            theme={theme}
+            onHide={() => handleHide(signal.id!)}
+          />
+        ))}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    // height: 0 so wrapper doesn't block touches outside the toasts
+    height: 0,
+    zIndex: 9999,
+    elevation: 9999, // Android needs elevation, not just zIndex
+  },
+});

package/src/types.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+
+export type SignalType =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'loading'
+  | 'custom';
+
+export type SignalPosition = 'top' | 'bottom';
+
+export interface SignalAction {
+  /** Button label */
+  label: string;
+  /** Called when tapped. Receives a dismiss callback so you control whether to close. */
+  onPress: (dismiss: () => void) => void;
+}
+
+export interface SignalOptions {
+  /** Unique ID — auto-generated if omitted */
+  id?: string;
+  /** Optional bold headline above the description */
+  title?: string;
+  /** Main body text (required) */
+  description: string;
+  /** Duration in ms before auto-dismiss. Default: 3000. Loading defaults to 0 (infinite). */
+  duration?: number;
+  type?: SignalType;
+  /** Default: 'top' */
+  position?: SignalPosition;
+  /** Set automatically */
+  createdAt?: number;
+  /** Allow swipe-to-dismiss. Default: true */
+  swipeToDismiss?: boolean;
+  /** Auto-dismiss after duration. Default: true. Loading defaults to false. */
+  autoHide?: boolean;
+  /** Called once entry animation finishes */
+  onShow?: () => void;
+  /** Called after toast fully exits */
+  onHide?: () => void;
+  /** Called when the toast body is tapped. Receives a dismiss callback. */
+  onPress?: (dismiss: () => void) => void;
+  /**
+   * Optional CTA button rendered below the description.
+   * @example action={{ label: 'Retry', onPress: (dismiss) => { retry(); dismiss(); } }}
+   */
+  action?: SignalAction;
+  /**
+   * Replace the default type icon with any ReactNode.
+   * @example icon={<MyIcon size={16} />}
+   */
+  icon?: ReactNode;
+}
+
+export interface SignalItemProps {
+  signal: SignalOptions;
+  onHide: () => void;
+  index: number;
+  maxVisible: number;
+}
+
+export interface SignalProviderProps {
+  children: React.ReactNode;
+  /** Maximum toasts visible at once. Default: 3 */
+  maxVisible?: number;
+  /** Default auto-dismiss duration in ms. Default: 3000 */
+  defaultDuration?: number;
+}
+
+export type SignalListener = (signals: SignalOptions[]) => void;
+
+export interface SignalTypeTheme {
+  background: string;
+  border: string;
+  titleColor: string;
+  descriptionColor: string;
+  iconColor: string;
+}
+
+/** Full theme map — all six types */
+export type SignalTheme = Record<SignalType, SignalTypeTheme>;
+
+export interface SignalPromiseMessages<T = unknown> {
+  loading: string;
+  success: string | ((data: T) => string);
+  error: string | ((err: unknown) => string);
+}