@mihcm/ui 0.14.1

package/src/Toast.native.tsx

@@ -0,0 +1,366 @@
+/* eslint-disable react-hooks/refs, react-hooks/purity -- RN Animated API reads refs during render */
+/**
+ * Toast (React Native variant).
+ *
+ * Same imperative `toast()` API as the web variant.
+ * Renders toasts at the bottom of the screen using Animated slide-up.
+ *
+ * Wiki: docs/components/Toast.md
+ */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
+import {
+  Animated,
+  Pressable,
+  Text,
+  View,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* -------------------------------------------------------------------------- */
+/*  CVA variants                                                              */
+/* -------------------------------------------------------------------------- */
+
+export const toastVariants = cva(
+  'w-full flex-row items-start gap-3 rounded-lg border border-l-4 p-4 shadow-lg',
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background border-l-foreground/40',
+        success: 'border-success/40 bg-success/10 border-l-success',
+        error: 'border-destructive/40 bg-destructive/10 border-l-destructive',
+        warning: 'border-warning/40 bg-warning/10 border-l-warning',
+        accent: 'border-accent/40 bg-accent/10 border-l-accent',
+      },
+      appearance: {
+        soft: '',
+        solid: '',
+        outline: 'bg-card',
+        minimal: 'border-transparent bg-background shadow-none',
+      },
+    },
+    compoundVariants: [
+      { appearance: 'solid', variant: 'default', className: 'border-foreground bg-foreground' },
+      { appearance: 'solid', variant: 'success', className: 'border-success bg-success' },
+      { appearance: 'solid', variant: 'error', className: 'border-destructive bg-destructive' },
+      { appearance: 'solid', variant: 'warning', className: 'border-warning bg-warning' },
+      { appearance: 'solid', variant: 'accent', className: 'border-accent bg-accent' },
+      { appearance: 'outline', variant: 'default', className: 'border-border' },
+      { appearance: 'outline', variant: 'success', className: 'border-success' },
+      { appearance: 'outline', variant: 'error', className: 'border-destructive' },
+      { appearance: 'outline', variant: 'warning', className: 'border-warning' },
+      { appearance: 'outline', variant: 'accent', className: 'border-accent' },
+    ],
+    defaultVariants: { variant: 'default', appearance: 'soft' },
+  },
+);
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                     */
+/* -------------------------------------------------------------------------- */
+
+export type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
+export type ToastAppearance = NonNullable<VariantProps<typeof toastVariants>['appearance']>;
+
+export interface ToastData {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  appearance?: ToastAppearance;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}
+
+export interface ToastProps extends Omit<ViewProps, 'style'>, VariantProps<typeof toastVariants> {
+  className?: string;
+}
+
+export interface ToastTitleProps extends Omit<TextProps, 'style'> {
+  className?: string;
+}
+
+export interface ToastDescriptionProps extends Omit<TextProps, 'style'> {
+  className?: string;
+}
+
+export interface ToastActionProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  onPress?: () => void;
+  children?: ReactNode;
+}
+
+export interface ToastCloseProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  onPress?: () => void;
+}
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  /** Maximum number of visible toasts. @default 5 */
+  max?: number;
+  /** Screen corner for the toast stack. */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Default visual treatment for toasts without an explicit appearance. */
+  appearance?: ToastAppearance;
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Module-level store                                                        */
+/* -------------------------------------------------------------------------- */
+
+type Listener = () => void;
+
+let toasts: ToastData[] = [];
+const listeners = new Set<Listener>();
+const viewports = new Set<number>();
+let viewportCounter = 0;
+
+function notify() {
+  for (const l of listeners) l();
+}
+
+function getSnapshot(): ToastData[] {
+  return toasts;
+}
+
+function getViewportSnapshot(): number | undefined {
+  return Array.from(viewports).at(-1);
+}
+
+function subscribe(listener: Listener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+let counter = 0;
+
+/** Imperative API — call from anywhere to show a toast. */
+export function toast(data: Omit<ToastData, 'id'>): string {
+  const id = `toast-${++counter}-${Date.now()}`;
+  const entry: ToastData = { id, ...data };
+  toasts = [...toasts, entry];
+  notify();
+  return id;
+}
+
+function dismiss(id: string) {
+  toasts = toasts.filter((t) => t.id !== id);
+  notify();
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Sub-components                                                            */
+/* -------------------------------------------------------------------------- */
+
+export const Toast = forwardRef<View, ToastProps>(function Toast(
+  { className, variant = 'default', appearance = 'soft', children, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      accessibilityRole="alert"
+      className={cn(toastVariants({ variant, appearance }), className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+export const ToastTitle = forwardRef<Text, ToastTitleProps>(function ToastTitle(
+  { className, ...props },
+  ref,
+) {
+  return <Text ref={ref} className={cn('text-sm font-semibold text-foreground', className)} {...props} />;
+});
+
+export const ToastDescription = forwardRef<Text, ToastDescriptionProps>(
+  function ToastDescription({ className, ...props }, ref) {
+    return <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />;
+  },
+);
+
+export const ToastAction = forwardRef<View, ToastActionProps>(function ToastAction(
+  { className, onPress, children, ...props },
+  ref,
+) {
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      accessibilityRole="button"
+      className={cn(
+        'flex-row items-center rounded-md border border-border px-3 py-1',
+        className,
+      )}
+      {...props}
+    >
+      <Text className="text-sm font-medium text-foreground">{children}</Text>
+    </Pressable>
+  );
+});
+
+export const ToastClose = forwardRef<View, ToastCloseProps>(function ToastClose(
+  { className, onPress, ...props },
+  ref,
+) {
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel="Close"
+      className={cn('absolute right-2 top-2 rounded-md p-1', className)}
+      {...props}
+    >
+      <Text className="text-foreground/50 text-base leading-none">✕</Text>
+    </Pressable>
+  );
+});
+
+/* -------------------------------------------------------------------------- */
+/*  Individual toast item (manages timer + animation)                         */
+/* -------------------------------------------------------------------------- */
+
+const DEFAULT_DURATION = 5000;
+
+function ToastItem({
+  data,
+  onDismiss,
+  appearance,
+}: {
+  data: ToastData;
+  onDismiss: (id: string) => void;
+  appearance: ToastAppearance;
+}) {
+  const slideAnim = useRef(new Animated.Value(100)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const remainingRef = useRef(data.duration ?? DEFAULT_DURATION);
+  const startRef = useRef(Date.now());
+
+  const handleDismiss = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 100,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start(() => onDismiss(data.id));
+  }, [data.id, onDismiss, slideAnim, opacityAnim]);
+
+  const startTimer = useCallback(() => {
+    startRef.current = Date.now();
+    timerRef.current = setTimeout(() => {
+      handleDismiss();
+    }, remainingRef.current);
+  }, [handleDismiss]);
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    startTimer();
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [slideAnim, opacityAnim, startTimer]);
+
+  return (
+    <Animated.View
+      style={{
+        transform: [{ translateY: slideAnim }],
+        opacity: opacityAnim,
+      }}
+    >
+      <Toast variant={data.variant} appearance={data.appearance ?? appearance}>
+        <View className="flex-1 gap-1 pr-6">
+          <ToastTitle>{data.title}</ToastTitle>
+          {data.description !== undefined && (
+            <ToastDescription>{data.description}</ToastDescription>
+          )}
+          {data.action !== undefined && (
+            <View className="mt-2">
+              <ToastAction onPress={data.action.onClick}>{data.action.label}</ToastAction>
+            </View>
+          )}
+        </View>
+        <ToastClose onPress={handleDismiss} />
+      </Toast>
+    </Animated.View>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  ToastProvider                                                             */
+/* -------------------------------------------------------------------------- */
+
+const POSITION_CLASS: Record<NonNullable<ToastProviderProps['position']>, string> = {
+  'bottom-right': 'bottom-4 left-4 right-4',
+  'bottom-left': 'bottom-4 left-4 right-4',
+  'top-right': 'left-4 right-4 top-4',
+  'top-left': 'left-4 right-4 top-4',
+};
+
+export function ToastProvider({ children, max = 5, position = 'bottom-right', appearance = 'soft' }: ToastProviderProps) {
+  const viewportIdRef = useRef<number>(undefined);
+  if (viewportIdRef.current === undefined) {
+    viewportIdRef.current = ++viewportCounter;
+  }
+
+  useEffect(() => {
+    const viewportId = viewportIdRef.current;
+    if (viewportId === undefined) return;
+    viewports.add(viewportId);
+    notify();
+    return () => {
+      viewports.delete(viewportId);
+      notify();
+    };
+  }, []);
+
+  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const activeViewportId = useSyncExternalStore(subscribe, getViewportSnapshot, () => undefined);
+  const visible = items.slice(-max);
+  const isActiveViewport = viewportIdRef.current === activeViewportId;
+
+  return (
+    <View className="flex-1">
+      {children}
+      {isActiveViewport ? (
+        <View accessibilityLabel="Notifications" className={cn('absolute z-50 gap-2', POSITION_CLASS[position])}>
+          {visible.map((t) => (
+            <ToastItem key={t.id} data={t} onDismiss={dismiss} appearance={appearance} />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}