@metacells/mcellui-mcp-server 0.1.0 → 0.1.2

package/registry/ui/search-input.tsx

@@ -0,0 +1,281 @@
+/**
+ * SearchInput
+ *
+ * A search input with icon, clear button, and loading state.
+ * Commonly used in list headers and search screens.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SearchInput
+ *   value={query}
+ *   onChangeText={setQuery}
+ *   placeholder="Search..."
+ * />
+ *
+ * // With loading state
+ * <SearchInput
+ *   value={query}
+ *   onChangeText={setQuery}
+ *   loading={isSearching}
+ * />
+ *
+ * // Uncontrolled
+ * <SearchInput
+ *   defaultValue=""
+ *   onChangeText={(text) => debouncedSearch(text)}
+ * />
+ * ```
+ */
+
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+  TextInputProps,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  interpolate,
+} from 'react-native-reanimated';
+import Svg, { Path, Circle } from 'react-native-svg';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface SearchInputProps extends Omit<TextInputProps, 'style'> {
+  /** Controlled value */
+  value?: string;
+  /** Default value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when text changes */
+  onChangeText?: (text: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Show loading spinner */
+  loading?: boolean;
+  /** Show clear button when there's text */
+  showClearButton?: boolean;
+  /** Called when clear button is pressed */
+  onClear?: () => void;
+  /** Called when search is submitted */
+  onSubmit?: (text: string) => void;
+  /** Container style */
+  style?: ViewStyle;
+  /** Input style */
+  inputStyle?: TextStyle;
+  /** Auto focus on mount */
+  autoFocus?: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Icons
+// ─────────────────────────────────────────────────────────────────────────────
+
+function SearchIcon({ color, size = 20 }: { color: string; size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="11" cy="11" r="8" stroke={color} strokeWidth="2" />
+      <Path
+        d="M21 21l-4.35-4.35"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+function ClearIcon({ color, size = 18 }: { color: string; size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" fill={color} fillOpacity={0.1} />
+      <Path
+        d="M15 9l-6 6M9 9l6 6"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SearchInput({
+  value: controlledValue,
+  defaultValue = '',
+  onChangeText,
+  placeholder = 'Search...',
+  loading = false,
+  showClearButton = true,
+  onClear,
+  onSubmit,
+  style,
+  inputStyle,
+  autoFocus = false,
+  ...props
+}: SearchInputProps) {
+  const { colors, spacing, radius, springs } = useTheme();
+  const inputRef = useRef<TextInput>(null);
+
+  // Controlled/uncontrolled state
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  // Focus animation
+  const isFocused = useSharedValue(0);
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      if (!isControlled) {
+        setInternalValue(text);
+      }
+      onChangeText?.(text);
+    },
+    [isControlled, onChangeText]
+  );
+
+  const handleClear = useCallback(() => {
+    haptic('light');
+    handleChangeText('');
+    onClear?.();
+    inputRef.current?.focus();
+  }, [handleChangeText, onClear]);
+
+  const handleSubmit = useCallback(() => {
+    haptic('light');
+    onSubmit?.(value);
+  }, [onSubmit, value]);
+
+  const handleFocus = useCallback(() => {
+    isFocused.value = withSpring(1, springs.snappy);
+  }, [springs.snappy]);
+
+  const handleBlur = useCallback(() => {
+    isFocused.value = withSpring(0, springs.snappy);
+  }, [springs.snappy]);
+
+  const containerAnimatedStyle = useAnimatedStyle(() => ({
+    borderColor: interpolate(
+      isFocused.value,
+      [0, 1],
+      [0, 1]
+    ) === 1
+      ? colors.primary
+      : colors.border,
+    transform: [
+      {
+        scale: interpolate(isFocused.value, [0, 1], [1, 1.01]),
+      },
+    ],
+  }));
+
+  const showClear = showClearButton && value.length > 0 && !loading;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.backgroundMuted,
+          borderRadius: radius.lg,
+          borderWidth: 1,
+          borderColor: colors.border,
+          paddingHorizontal: spacing[3],
+          height: 44,
+        },
+        containerAnimatedStyle,
+        style,
+      ]}
+    >
+      {/* Search Icon */}
+      <View style={[styles.iconContainer, { marginRight: spacing[2] }]}>
+        <SearchIcon color={colors.foregroundMuted} />
+      </View>
+
+      {/* Input */}
+      <TextInput
+        ref={inputRef}
+        style={[
+          styles.input,
+          {
+            color: colors.foreground,
+            fontSize: 16,
+          },
+          inputStyle,
+        ]}
+        value={value}
+        onChangeText={handleChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.foregroundMuted}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onSubmitEditing={handleSubmit}
+        returnKeyType="search"
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoFocus={autoFocus}
+        accessibilityRole="search"
+        accessibilityLabel={placeholder}
+        {...props}
+      />
+
+      {/* Loading / Clear Button */}
+      <View style={[styles.rightContainer, { marginLeft: spacing[2] }]}>
+        {loading && (
+          <ActivityIndicator size="small" color={colors.foregroundMuted} />
+        )}
+        {showClear && (
+          <Pressable
+            onPress={handleClear}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel="Clear search"
+          >
+            <ClearIcon color={colors.foregroundMuted} />
+          </Pressable>
+        )}
+      </View>
+    </Animated.View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    flexShrink: 0,
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+  },
+  rightContainer: {
+    flexShrink: 0,
+    width: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/registry/ui/section-header.tsx

@@ -0,0 +1,258 @@
+/**
+ * SectionHeader
+ *
+ * A section header with title and optional "See All" action.
+ * Commonly used above horizontal lists and content sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SectionHeader title="Popular Items" />
+ *
+ * // With "See All" action
+ * <SectionHeader
+ *   title="Recent Orders"
+ *   actionText="View All"
+ *   onAction={() => navigation.navigate('Orders')}
+ * />
+ *
+ * // With subtitle
+ * <SectionHeader
+ *   title="Recommendations"
+ *   subtitle="Based on your preferences"
+ *   onAction={handleSeeAll}
+ * />
+ *
+ * // Custom styling
+ * <SectionHeader
+ *   title="Featured"
+ *   size="lg"
+ *   style={{ paddingHorizontal: 24 }}
+ * />
+ * ```
+ */
+
+import React, { useCallback } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import { useTheme } from '@nativeui/core';
+import { haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type SectionHeaderSize = 'sm' | 'md' | 'lg';
+
+export interface SectionHeaderProps {
+  /** Section title */
+  title: string;
+  /** Optional subtitle below title */
+  subtitle?: string;
+  /** Text for the action button */
+  actionText?: string;
+  /** Show arrow icon next to action text */
+  showActionArrow?: boolean;
+  /** Action button press handler */
+  onAction?: () => void;
+  /** Size variant */
+  size?: SectionHeaderSize;
+  /** Container style */
+  style?: ViewStyle;
+  /** Title text style */
+  titleStyle?: TextStyle;
+  /** Subtitle text style */
+  subtitleStyle?: TextStyle;
+  /** Action text style */
+  actionStyle?: TextStyle;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Size Configuration
+// ─────────────────────────────────────────────────────────────────────────────
+
+const sizeConfig = {
+  sm: { titleSize: 'sm' as const, subtitleSize: 'xs' as const, actionSize: 'xs' as const },
+  md: { titleSize: 'lg' as const, subtitleSize: 'sm' as const, actionSize: 'sm' as const },
+  lg: { titleSize: 'xl' as const, subtitleSize: 'base' as const, actionSize: 'base' as const },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Icons
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ChevronRightIcon({ color, size = 16 }: { color: string; size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M9 18l6-6-6-6"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SectionHeader({
+  title,
+  subtitle,
+  actionText = 'See All',
+  showActionArrow = true,
+  onAction,
+  size = 'md',
+  style,
+  titleStyle,
+  subtitleStyle,
+  actionStyle,
+}: SectionHeaderProps) {
+  const { colors, spacing, fontSize, fontWeight, springs } = useTheme();
+  const config = sizeConfig[size];
+  const actionScale = useSharedValue(1);
+
+  const handleActionPressIn = useCallback(() => {
+    actionScale.value = withSpring(0.95, springs.snappy);
+  }, [springs.snappy]);
+
+  const handleActionPressOut = useCallback(() => {
+    actionScale.value = withSpring(1, springs.snappy);
+  }, [springs.snappy]);
+
+  const handleAction = useCallback(() => {
+    haptic('light');
+    onAction?.();
+  }, [onAction]);
+
+  const actionAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: actionScale.value }],
+  }));
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingHorizontal: spacing[4],
+          paddingVertical: spacing[2],
+        },
+        style,
+      ]}
+    >
+      {/* Title & Subtitle */}
+      <View style={styles.titleContainer}>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.foreground,
+              fontSize: fontSize[config.titleSize],
+              fontWeight: fontWeight.semibold,
+            },
+            titleStyle,
+          ]}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[
+              styles.subtitle,
+              {
+                color: colors.foregroundMuted,
+                fontSize: fontSize[config.subtitleSize],
+                marginTop: spacing[0.5],
+              },
+              subtitleStyle,
+            ]}
+            numberOfLines={1}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+
+      {/* Action Button */}
+      {onAction && (
+        <AnimatedPressable
+          style={[styles.actionButton, actionAnimatedStyle]}
+          onPressIn={handleActionPressIn}
+          onPressOut={handleActionPressOut}
+          onPress={handleAction}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel={actionText}
+        >
+          <Text
+            style={[
+              styles.actionText,
+              {
+                color: colors.primary,
+                fontSize: fontSize[config.actionSize],
+                fontWeight: fontWeight.medium,
+              },
+              actionStyle,
+            ]}
+          >
+            {actionText}
+          </Text>
+          {showActionArrow && (
+            <ChevronRightIcon
+              color={colors.primary}
+              size={fontSize[config.actionSize]}
+            />
+          )}
+        </AnimatedPressable>
+      )}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  titleContainer: {
+    flex: 1,
+    marginRight: 16,
+  },
+  title: {
+    // Dynamic styles applied inline
+  },
+  subtitle: {
+    // Dynamic styles applied inline
+  },
+  actionButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  actionText: {
+    // Dynamic styles applied inline
+  },
+});