@metacells/mcellui-mcp-server 0.1.0 → 0.1.2

package/registry/ui/icon-button.tsx

@@ -0,0 +1,244 @@
+/**
+ * IconButton
+ *
+ * A pressable button that displays only an icon.
+ * Square or circular shape with multiple variants and sizes.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <IconButton icon={<PlusIcon />} onPress={handleAdd} />
+ *
+ * // Variants
+ * <IconButton icon={<HeartIcon />} variant="ghost" />
+ * <IconButton icon={<TrashIcon />} variant="destructive" />
+ *
+ * // Sizes
+ * <IconButton icon={<MenuIcon />} size="sm" />
+ * <IconButton icon={<MenuIcon />} size="lg" rounded />
+ * ```
+ */
+
+import React, { useCallback, forwardRef } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  View,
+  PressableProps,
+  ActivityIndicator,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type IconButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+export type IconButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface IconButtonProps extends Omit<PressableProps, 'style'> {
+  /** Icon element to display */
+  icon: React.ReactNode;
+  /** Visual style variant */
+  variant?: IconButtonVariant;
+  /** Size preset */
+  size?: IconButtonSize;
+  /** Circular shape instead of rounded square */
+  rounded?: boolean;
+  /** Show loading spinner instead of icon */
+  loading?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style override */
+  style?: ViewStyle;
+  /** Accessibility label (required for icon-only buttons) */
+  accessibilityLabel: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Size Configuration
+// ─────────────────────────────────────────────────────────────────────────────
+
+const sizeConfig = {
+  sm: { size: 32, iconSize: 16 },
+  md: { size: 40, iconSize: 20 },
+  lg: { size: 48, iconSize: 24 },
+  xl: { size: 56, iconSize: 28 },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const IconButton = forwardRef(function IconButton(
+  {
+    icon,
+    variant = 'default',
+    size = 'md',
+    rounded = false,
+    loading = false,
+    disabled,
+    style,
+    accessibilityLabel,
+    onPressIn,
+    onPressOut,
+    onPress,
+    ...props
+  }: IconButtonProps,
+  ref: React.ForwardedRef<View>
+) {
+  const { colors, radius, springs, platformShadow } = useTheme();
+  const config = sizeConfig[size];
+  const isDisabled = disabled || loading;
+
+  const scale = useSharedValue(1);
+
+  const handlePressIn = useCallback(
+    (e: any) => {
+      scale.value = withSpring(0.9, springs.snappy);
+      onPressIn?.(e);
+    },
+    [onPressIn, springs.snappy]
+  );
+
+  const handlePressOut = useCallback(
+    (e: any) => {
+      scale.value = withSpring(1, springs.snappy);
+      onPressOut?.(e);
+    },
+    [onPressOut, springs.snappy]
+  );
+
+  const handlePress = useCallback(
+    (e: any) => {
+      haptic('light');
+      onPress?.(e);
+    },
+    [onPress]
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  // Get variant-specific styles
+  const variantStyles = getVariantStyles(variant, colors);
+
+  // Determine border radius
+  const borderRadiusValue = rounded ? config.size / 2 : radius.md;
+
+  // Add shadow for solid buttons
+  const shadowStyle =
+    variant !== 'ghost' && variant !== 'outline' && !isDisabled
+      ? platformShadow('sm')
+      : {};
+
+  return (
+    <AnimatedPressable
+      ref={ref}
+      style={[
+        styles.base,
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius: borderRadiusValue,
+        },
+        variantStyles.container,
+        shadowStyle,
+        isDisabled && styles.disabled,
+        animatedStyle,
+        style,
+      ]}
+      disabled={isDisabled}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onPress={handlePress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: isDisabled }}
+      {...props}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size={size === 'sm' ? 'small' : 'small'}
+          color={variantStyles.iconColor}
+        />
+      ) : (
+        React.cloneElement(icon as React.ReactElement<{ width?: number; height?: number; color?: string }>, {
+          width: config.iconSize,
+          height: config.iconSize,
+          color: variantStyles.iconColor,
+        })
+      )}
+    </AnimatedPressable>
+  );
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function getVariantStyles(
+  variant: IconButtonVariant,
+  colors: ReturnType<typeof useTheme>['colors']
+) {
+  switch (variant) {
+    case 'default':
+      return {
+        container: { backgroundColor: colors.primary } as ViewStyle,
+        iconColor: colors.primaryForeground,
+      };
+    case 'secondary':
+      return {
+        container: { backgroundColor: colors.secondary } as ViewStyle,
+        iconColor: colors.secondaryForeground,
+      };
+    case 'outline':
+      return {
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: colors.border,
+        } as ViewStyle,
+        iconColor: colors.foreground,
+      };
+    case 'ghost':
+      return {
+        container: { backgroundColor: 'transparent' } as ViewStyle,
+        iconColor: colors.foreground,
+      };
+    case 'destructive':
+      return {
+        container: { backgroundColor: colors.destructive } as ViewStyle,
+        iconColor: colors.destructiveForeground,
+      };
+    default:
+      return {
+        container: { backgroundColor: colors.primary } as ViewStyle,
+        iconColor: colors.primaryForeground,
+      };
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/registry/ui/image-gallery.tsx

@@ -0,0 +1,455 @@
+/**
+ * ImageGallery
+ *
+ * Grid of images with fullscreen viewer on tap.
+ * Supports pinch-to-zoom and swipe navigation in fullscreen mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic gallery
+ * <ImageGallery
+ *   images={[
+ *     { uri: 'https://...' },
+ *     { uri: 'https://...' },
+ *     { uri: 'https://...' },
+ *   ]}
+ * />
+ *
+ * // Custom columns
+ * <ImageGallery
+ *   images={photos}
+ *   columns={2}
+ *   spacing={8}
+ * />
+ *
+ * // With aspect ratio
+ * <ImageGallery
+ *   images={photos}
+ *   aspectRatio={1} // Square
+ * />
+ *
+ * // With onImagePress callback
+ * <ImageGallery
+ *   images={photos}
+ *   onImagePress={(index) => console.log('Pressed image:', index)}
+ * />
+ * ```
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Image,
+  Pressable,
+  StyleSheet,
+  Modal,
+  Dimensions,
+  FlatList,
+  ImageSourcePropType,
+  StatusBar,
+  Platform,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withSpring,
+  runOnJS,
+  Easing,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { useTheme, haptic } from '@nativeui/core';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface GalleryImage {
+  /** Image URI */
+  uri: string;
+  /** Optional thumbnail URI (for grid) */
+  thumbnail?: string;
+  /** Optional alt text */
+  alt?: string;
+}
+
+export interface ImageGalleryProps {
+  /** Array of images */
+  images: GalleryImage[];
+  /** Number of columns in grid */
+  columns?: number;
+  /** Spacing between images */
+  spacing?: number;
+  /** Aspect ratio of grid images (width/height) */
+  aspectRatio?: number;
+  /** Border radius for grid images */
+  borderRadius?: number;
+  /** Called when an image is pressed */
+  onImagePress?: (index: number) => void;
+  /** Disable fullscreen viewer */
+  disableViewer?: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// FullscreenViewer Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface FullscreenViewerProps {
+  images: GalleryImage[];
+  initialIndex: number;
+  visible: boolean;
+  onClose: () => void;
+}
+
+function FullscreenViewer({
+  images,
+  initialIndex,
+  visible,
+  onClose,
+}: FullscreenViewerProps) {
+  const { colors } = useTheme();
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  React.useEffect(() => {
+    if (visible) {
+      opacity.value = withTiming(1, { duration: 200 });
+      setCurrentIndex(initialIndex);
+    } else {
+      opacity.value = withTiming(0, { duration: 150 });
+    }
+  }, [visible, initialIndex, opacity]);
+
+  const close = useCallback(() => {
+    opacity.value = withTiming(0, { duration: 150 });
+    setTimeout(onClose, 150);
+  }, [opacity, onClose]);
+
+  // Pinch to zoom gesture
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate((event) => {
+      scale.value = Math.max(1, Math.min(event.scale, 3));
+    })
+    .onEnd(() => {
+      if (scale.value < 1.1) {
+        scale.value = withSpring(1);
+        translateX.value = withSpring(0);
+        translateY.value = withSpring(0);
+      }
+    });
+
+  // Pan gesture (when zoomed)
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      if (scale.value > 1) {
+        translateX.value = event.translationX;
+        translateY.value = event.translationY;
+      } else if (Math.abs(event.translationY) > 50) {
+        // Swipe down to close
+        opacity.value = withTiming(0, { duration: 150 });
+        runOnJS(close)();
+      }
+    })
+    .onEnd(() => {
+      if (scale.value <= 1) {
+        translateX.value = withSpring(0);
+        translateY.value = withSpring(0);
+      }
+    });
+
+  // Double tap to zoom
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      if (scale.value > 1) {
+        scale.value = withSpring(1);
+        translateX.value = withSpring(0);
+        translateY.value = withSpring(0);
+      } else {
+        scale.value = withSpring(2);
+      }
+    });
+
+  const composedGesture = Gesture.Simultaneous(
+    pinchGesture,
+    Gesture.Race(doubleTapGesture, panGesture)
+  );
+
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const imageStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value },
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+    ],
+  }));
+
+  const handleScroll = useCallback(
+    (event: { nativeEvent: { contentOffset: { x: number } } }) => {
+      const index = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+      if (index !== currentIndex && index >= 0 && index < images.length) {
+        setCurrentIndex(index);
+        // Reset zoom when changing images
+        scale.value = withTiming(1, { duration: 100 });
+        translateX.value = withTiming(0, { duration: 100 });
+        translateY.value = withTiming(0, { duration: 100 });
+      }
+    },
+    [currentIndex, images.length, scale, translateX, translateY]
+  );
+
+  const renderImage = useCallback(
+    ({ item }: { item: GalleryImage }) => (
+      <GestureDetector gesture={composedGesture}>
+        <View style={styles.fullscreenImageContainer}>
+          <AnimatedImage
+            source={{ uri: item.uri }}
+            style={[styles.fullscreenImage, imageStyle]}
+            resizeMode="contain"
+            accessibilityLabel={item.alt}
+          />
+        </View>
+      </GestureDetector>
+    ),
+    [composedGesture, imageStyle]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <Modal visible={visible} transparent animationType="none" statusBarTranslucent>
+      <GestureHandlerRootView style={styles.fullscreenContainer}>
+        <Animated.View style={[styles.fullscreenBackdrop, backdropStyle]}>
+          {/* Close button */}
+          <Pressable
+            style={styles.closeButton}
+            onPress={() => {
+              haptic('light');
+              close();
+            }}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+          >
+            <View style={[styles.closeIcon, { backgroundColor: colors.background }]}>
+              <View style={[styles.closeLine, styles.closeLine1, { backgroundColor: colors.foreground }]} />
+              <View style={[styles.closeLine, styles.closeLine2, { backgroundColor: colors.foreground }]} />
+            </View>
+          </Pressable>
+
+          {/* Images */}
+          <FlatList
+            data={images}
+            renderItem={renderImage}
+            keyExtractor={(_, index) => index.toString()}
+            horizontal
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            initialScrollIndex={initialIndex}
+            getItemLayout={(_, index) => ({
+              length: SCREEN_WIDTH,
+              offset: SCREEN_WIDTH * index,
+              index,
+            })}
+            onMomentumScrollEnd={handleScroll}
+          />
+
+          {/* Page indicator */}
+          {images.length > 1 && (
+            <View style={styles.pageIndicator}>
+              {images.map((_, index) => (
+                <View
+                  key={index}
+                  style={[
+                    styles.pageDot,
+                    {
+                      backgroundColor:
+                        index === currentIndex
+                          ? colors.background
+                          : 'rgba(255,255,255,0.4)',
+                    },
+                  ]}
+                />
+              ))}
+            </View>
+          )}
+        </Animated.View>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ImageGallery Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function ImageGallery({
+  images,
+  columns = 3,
+  spacing = 2,
+  aspectRatio = 1,
+  borderRadius = 0,
+  onImagePress,
+  disableViewer = false,
+}: ImageGalleryProps) {
+  const { colors, radius } = useTheme();
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const imageSize = (SCREEN_WIDTH - spacing * (columns + 1)) / columns;
+
+  const handleImagePress = useCallback(
+    (index: number) => {
+      haptic('light');
+      onImagePress?.(index);
+
+      if (!disableViewer) {
+        setSelectedIndex(index);
+        setViewerVisible(true);
+      }
+    },
+    [onImagePress, disableViewer]
+  );
+
+  const handleCloseViewer = useCallback(() => {
+    setViewerVisible(false);
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: GalleryImage; index: number }) => (
+      <Pressable
+        onPress={() => handleImagePress(index)}
+        style={({ pressed }) => [
+          styles.gridItem,
+          {
+            width: imageSize,
+            height: imageSize / aspectRatio,
+            marginLeft: spacing,
+            marginTop: spacing,
+            borderRadius: borderRadius || radius.sm,
+            opacity: pressed ? 0.8 : 1,
+          },
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={item.alt || `Image ${index + 1}`}
+      >
+        <Image
+          source={{ uri: item.thumbnail || item.uri }}
+          style={[
+            styles.gridImage,
+            { borderRadius: borderRadius || radius.sm },
+          ]}
+        />
+      </Pressable>
+    ),
+    [handleImagePress, imageSize, aspectRatio, spacing, borderRadius, radius.sm]
+  );
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={images}
+        renderItem={renderItem}
+        keyExtractor={(_, index) => index.toString()}
+        numColumns={columns}
+        scrollEnabled={false}
+        style={styles.grid}
+        contentContainerStyle={{ paddingBottom: spacing }}
+      />
+
+      <FullscreenViewer
+        images={images}
+        initialIndex={selectedIndex}
+        visible={viewerVisible}
+        onClose={handleCloseViewer}
+      />
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {},
+  grid: {},
+  gridItem: {
+    overflow: 'hidden',
+  },
+  gridImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  fullscreenContainer: {
+    flex: 1,
+  },
+  fullscreenBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+  },
+  fullscreenImageContainer: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fullscreenImage: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.8,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? 50 : 20,
+    right: 20,
+    zIndex: 100,
+  },
+  closeIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeLine: {
+    position: 'absolute',
+    width: 18,
+    height: 2,
+    borderRadius: 1,
+  },
+  closeLine1: {
+    transform: [{ rotate: '45deg' }],
+  },
+  closeLine2: {
+    transform: [{ rotate: '-45deg' }],
+  },
+  pageIndicator: {
+    position: 'absolute',
+    bottom: 50,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  pageDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+});