@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/toast.tsx

@@ -0,0 +1,316 @@
+/**
+ * Toast
+ *
+ * A notification system for displaying brief messages.
+ * Auto-dismisses after duration. Supports variants and actions.
+ *
+ * @example
+ * ```tsx
+ * // Using ToastProvider at app root
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ *
+ * // Using toast anywhere in your app
+ * import { useToast } from '@/components/ui/toast';
+ *
+ * function MyComponent() {
+ *   const { toast } = useToast();
+ *
+ *   return (
+ *     <Button onPress={() => toast({ title: 'Saved!', variant: 'success' })}>
+ *       Save
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { createContext, useContext, useCallback, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Pressable,
+  Dimensions,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+  SlideInUp,
+  SlideOutUp,
+  FadeIn,
+  FadeOut,
+  Layout,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme, TOAST_CONSTANTS } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export type ToastVariant = 'default' | 'success' | 'error' | 'warning';
+
+export interface ToastData {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  action?: {
+    label: string;
+    onPress: () => void;
+  };
+}
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  action?: {
+    label: string;
+    onPress: () => void;
+  };
+}
+
+interface ToastContextValue {
+  toast: (options: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+  /** Maximum number of toasts visible at once */
+  maxToasts?: number;
+  /** Default duration in ms */
+  defaultDuration?: number;
+}
+
+export function ToastProvider({
+  children,
+  maxToasts = TOAST_CONSTANTS.maxToasts,
+  defaultDuration = TOAST_CONSTANTS.defaultDuration,
+}: ToastProviderProps) {
+  const [toasts, setToasts] = React.useState<ToastData[]>([]);
+  const insets = useSafeAreaInsets();
+
+  const toast = useCallback(
+    (options: ToastOptions): string => {
+      const id = Math.random().toString(36).slice(2, 9);
+      const newToast: ToastData = {
+        id,
+        ...options,
+        duration: options.duration ?? defaultDuration,
+      };
+
+      // Haptic feedback based on variant
+      if (options.variant === 'success') {
+        haptic('success');
+      } else if (options.variant === 'error') {
+        haptic('error');
+      } else if (options.variant === 'warning') {
+        haptic('warning');
+      } else {
+        haptic('light');
+      }
+
+      setToasts((prev) => {
+        const next = [newToast, ...prev];
+        return next.slice(0, maxToasts);
+      });
+
+      return id;
+    },
+    [defaultDuration, maxToasts]
+  );
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast, dismiss, dismissAll }}>
+      {children}
+      <View
+        style={[
+          styles.container,
+          { top: insets.top + TOAST_CONSTANTS.containerTopOffset },
+        ]}
+        pointerEvents="box-none"
+      >
+        {toasts.map((t) => (
+          <ToastItem
+            key={t.id}
+            data={t}
+            onDismiss={() => dismiss(t.id)}
+          />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+interface ToastItemProps {
+  data: ToastData;
+  onDismiss: () => void;
+}
+
+function ToastItem({ data, onDismiss }: ToastItemProps) {
+  const { colors, radius, platformShadow, spacing } = useTheme();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    if (data.duration && data.duration > 0) {
+      timerRef.current = setTimeout(onDismiss, data.duration);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [data.duration, onDismiss]);
+
+  const getVariantStyles = () => {
+    switch (data.variant) {
+      case 'success':
+        return {
+          backgroundColor: colors.success ?? TOAST_CONSTANTS.fallbackColors.success,
+          textColor: TOAST_CONSTANTS.fallbackColors.successForeground,
+        };
+      case 'error':
+        return {
+          backgroundColor: colors.destructive,
+          textColor: colors.destructiveForeground,
+        };
+      case 'warning':
+        return {
+          backgroundColor: colors.warning ?? TOAST_CONSTANTS.fallbackColors.warning,
+          textColor: TOAST_CONSTANTS.fallbackColors.warningForeground,
+        };
+      default:
+        return {
+          backgroundColor: colors.card,
+          textColor: colors.foreground,
+        };
+    }
+  };
+
+  const variantStyles = getVariantStyles();
+
+  return (
+    <Animated.View
+      entering={SlideInUp.springify().damping(20).stiffness(200)}
+      exiting={FadeOut.duration(TOAST_CONSTANTS.fadeOutDuration)}
+      layout={Layout.springify().damping(20)}
+      style={[
+        styles.toast,
+        {
+          backgroundColor: variantStyles.backgroundColor,
+          borderRadius: radius.lg,
+          padding: spacing[4],
+          marginHorizontal: spacing[4],
+          marginBottom: spacing[2],
+        },
+        platformShadow('lg'),
+      ]}
+    >
+      <Pressable
+        style={styles.toastContent}
+        onPress={onDismiss}
+      >
+        <View style={styles.textContainer}>
+          <Text style={[styles.title, { color: variantStyles.textColor }]}>
+            {data.title}
+          </Text>
+          {data.description && (
+            <Text
+              style={[
+                styles.description,
+                {
+                  color: variantStyles.textColor,
+                  opacity: 0.9,
+                  marginTop: spacing[1],
+                },
+              ]}
+            >
+              {data.description}
+            </Text>
+          )}
+        </View>
+        {data.action && (
+          <Pressable
+            onPress={() => {
+              data.action?.onPress();
+              onDismiss();
+            }}
+            style={[
+              styles.actionButton,
+              {
+                marginLeft: spacing[3],
+                paddingHorizontal: spacing[3],
+                paddingVertical: spacing[1.5],
+                backgroundColor: 'rgba(255,255,255,0.2)',
+                borderRadius: radius.md,
+              },
+            ]}
+          >
+            <Text style={[styles.actionText, { color: variantStyles.textColor }]}>
+              {data.action.label}
+            </Text>
+          </Pressable>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+  },
+  toast: {
+    width: SCREEN_WIDTH - TOAST_CONSTANTS.widthMargin,
+    alignSelf: 'center',
+  },
+  toastContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 13,
+  },
+  actionButton: {},
+  actionText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});

package/registry/ui/tooltip.tsx

@@ -0,0 +1,369 @@
+/**
+ * Tooltip
+ *
+ * Small popup that appears on long-press to show additional information.
+ * Automatically positions itself above or below the trigger element.
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip content="This is helpful information">
+ *   <Button>Long press me</Button>
+ * </Tooltip>
+ *
+ * // With custom delay
+ * <Tooltip content="Appears after 500ms" delayMs={500}>
+ *   <IconButton icon={<InfoIcon />} />
+ * </Tooltip>
+ *
+ * // Positioned below
+ * <Tooltip content="I appear below" position="bottom">
+ *   <Text>Long press me</Text>
+ * </Tooltip>
+ * ```
+ */
+
+import React, { useState, useRef, useCallback, Children, isValidElement, cloneElement } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  Modal,
+  Dimensions,
+  LayoutRectangle,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme, haptic } from '@nativeui/core';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type TooltipPosition = 'top' | 'bottom';
+
+export interface TooltipProps {
+  /** Tooltip content text */
+  content: string;
+  /** Trigger element */
+  children: React.ReactNode;
+  /** Preferred position (auto-adjusts if not enough space) */
+  position?: TooltipPosition;
+  /** Delay before showing tooltip (ms) */
+  delayMs?: number;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether tooltip is disabled */
+  disabled?: boolean;
+  /** Maximum width of tooltip */
+  maxWidth?: number;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Constants
+// ─────────────────────────────────────────────────────────────────────────────
+
+const TOOLTIP_PADDING = 12;
+const TOOLTIP_MARGIN = 8;
+const ARROW_SIZE = 8;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tooltip Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function Tooltip({
+  content,
+  children,
+  position = 'top',
+  delayMs = 500,
+  open: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  maxWidth = 250,
+}: TooltipProps) {
+  const { colors, radius, fontSize } = useTheme();
+
+  const isControlled = controlledOpen !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+  const [tooltipSize, setTooltipSize] = useState({ width: 0, height: 0 });
+  const triggerRef = useRef<View>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(0.9);
+
+  const setOpen = useCallback(
+    (value: boolean) => {
+      if (isControlled) {
+        onOpenChange?.(value);
+      } else {
+        setInternalOpen(value);
+      }
+
+      if (value) {
+        opacity.value = withTiming(1, { duration: 150 });
+        scale.value = withSpring(1, { damping: 20, stiffness: 300 });
+      } else {
+        opacity.value = withTiming(0, { duration: 100 });
+        scale.value = withTiming(0.9, { duration: 100 });
+      }
+    },
+    [isControlled, onOpenChange, opacity, scale]
+  );
+
+  const showTooltip = useCallback(() => {
+    if (triggerRef.current) {
+      triggerRef.current.measureInWindow((x, y, width, height) => {
+        setTriggerLayout({ x, y, width, height });
+        haptic('light');
+        setOpen(true);
+      });
+    }
+  }, [setOpen]);
+
+  // Timer-based approach for showing tooltip after delay
+  // Works consistently for both pressable and non-pressable components
+  const startDelayTimer = useCallback((customDelay?: number) => {
+    if (disabled) return;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    const delay = customDelay ?? delayMs;
+    timerRef.current = setTimeout(() => {
+      showTooltip();
+    }, delay);
+  }, [disabled, delayMs, showTooltip]);
+
+  const cancelDelayTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  // Calculate tooltip position
+  const calculatePosition = useCallback((): {
+    top: number;
+    left: number;
+    actualPosition: TooltipPosition;
+  } => {
+    if (!triggerLayout) {
+      return { top: 0, left: 0, actualPosition: position };
+    }
+
+    const { x: triggerX, y: triggerY, width: triggerWidth, height: triggerHeight } = triggerLayout;
+
+    // Center horizontally
+    let left = triggerX + triggerWidth / 2 - tooltipSize.width / 2;
+
+    // Clamp to screen bounds
+    left = Math.max(TOOLTIP_MARGIN, Math.min(left, SCREEN_WIDTH - tooltipSize.width - TOOLTIP_MARGIN));
+
+    // Calculate vertical position
+    let actualPosition = position;
+    let top: number;
+
+    if (position === 'top') {
+      top = triggerY - tooltipSize.height - ARROW_SIZE - 4;
+      // If not enough space above, show below
+      if (top < TOOLTIP_MARGIN) {
+        actualPosition = 'bottom';
+        top = triggerY + triggerHeight + ARROW_SIZE + 4;
+      }
+    } else {
+      top = triggerY + triggerHeight + ARROW_SIZE + 4;
+      // If not enough space below, show above
+      if (top + tooltipSize.height > SCREEN_HEIGHT - TOOLTIP_MARGIN) {
+        actualPosition = 'top';
+        top = triggerY - tooltipSize.height - ARROW_SIZE - 4;
+      }
+    }
+
+    return { top, left, actualPosition };
+  }, [triggerLayout, tooltipSize, position]);
+
+  const { top, left, actualPosition } = calculatePosition();
+
+  // Calculate arrow position
+  const arrowLeft = triggerLayout
+    ? triggerLayout.x + triggerLayout.width / 2 - left - ARROW_SIZE
+    : 0;
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handleTooltipLayout = useCallback(
+    (event: { nativeEvent: { layout: { width: number; height: number } } }) => {
+      const { width, height } = event.nativeEvent.layout;
+      if (width !== tooltipSize.width || height !== tooltipSize.height) {
+        setTooltipSize({ width, height });
+      }
+    },
+    [tooltipSize]
+  );
+
+  // Render the trigger element
+  const renderTrigger = () => {
+    const child = Children.only(children);
+
+    if (isValidElement(child)) {
+      const childProps = child.props as Record<string, unknown>;
+
+      // Check if child is a pressable component (has onPress or similar)
+      const componentName = typeof child.type === 'function'
+        ? ((child.type as any).displayName || child.type.name || '')
+        : '';
+      const isPressable =
+        'onPress' in childProps ||
+        'onLongPress' in childProps ||
+        'onPressIn' in childProps ||
+        child.type === Pressable ||
+        ['Button', 'IconButton', 'Pressable', 'TouchableOpacity', 'TouchableHighlight'].includes(componentName);
+
+      // IconButtons should show tooltip immediately (no delay) for better UX
+      const isIconButton = componentName === 'IconButton';
+      const effectiveDelay = isIconButton ? 0 : delayMs;
+
+      if (isPressable) {
+        // Clone and inject onPressIn/onPressOut for pressable components
+        // Use timer-based approach for consistent delay behavior
+        const existingOnPressIn = childProps.onPressIn as ((e: any) => void) | undefined;
+        const existingOnPressOut = childProps.onPressOut as ((e: any) => void) | undefined;
+
+        return cloneElement(child as React.ReactElement<Record<string, unknown>>, {
+          ref: triggerRef,
+          onPressIn: (e: any) => {
+            startDelayTimer(effectiveDelay);
+            existingOnPressIn?.(e);
+          },
+          onPressOut: (e: any) => {
+            cancelDelayTimer();
+            existingOnPressOut?.(e);
+          },
+        });
+      }
+    }
+
+    // For non-pressable elements, wrap in a View with touch handlers
+    return (
+      <View
+        ref={triggerRef}
+        collapsable={false}
+        onTouchStart={() => startDelayTimer()}
+        onTouchEnd={cancelDelayTimer}
+        onTouchCancel={cancelDelayTimer}
+      >
+        {children}
+      </View>
+    );
+  };
+
+  return (
+    <>
+      {renderTrigger()}
+
+      <Modal visible={isOpen} transparent animationType="none" statusBarTranslucent>
+        <Pressable style={styles.overlay} onPress={handleClose}>
+          <Animated.View
+            style={[
+              styles.tooltip,
+              {
+                backgroundColor: colors.foreground,
+                borderRadius: radius.md,
+                maxWidth,
+                top,
+                left,
+              },
+              animatedStyle,
+            ]}
+            onLayout={handleTooltipLayout}
+          >
+            {/* Arrow */}
+            <View
+              style={[
+                styles.arrow,
+                actualPosition === 'top' ? styles.arrowBottom : styles.arrowTop,
+                {
+                  borderTopColor: actualPosition === 'top' ? colors.foreground : 'transparent',
+                  borderBottomColor: actualPosition === 'bottom' ? colors.foreground : 'transparent',
+                  left: Math.max(ARROW_SIZE, Math.min(arrowLeft, maxWidth - ARROW_SIZE * 3)),
+                },
+              ]}
+            />
+
+            {/* Content */}
+            <Text
+              style={[
+                styles.content,
+                {
+                  color: colors.background,
+                  fontSize: fontSize.sm,
+                  paddingHorizontal: TOOLTIP_PADDING,
+                  paddingVertical: TOOLTIP_PADDING - 4,
+                },
+              ]}
+            >
+              {content}
+            </Text>
+          </Animated.View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+  },
+  tooltip: {
+    position: 'absolute',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  arrow: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    borderLeftWidth: ARROW_SIZE,
+    borderRightWidth: ARROW_SIZE,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+  },
+  arrowTop: {
+    top: -ARROW_SIZE,
+    borderBottomWidth: ARROW_SIZE,
+  },
+  arrowBottom: {
+    bottom: -ARROW_SIZE,
+    borderTopWidth: ARROW_SIZE,
+  },
+  content: {
+    textAlign: 'center',
+  },
+});