@metacells/mcellui-mcp-server 0.1.0 → 0.1.2

package/registry/ui/rating.tsx

@@ -0,0 +1,311 @@
+/**
+ * Rating
+ *
+ * Interactive star rating for reviews and feedback.
+ * Supports half-star precision and readonly display mode.
+ *
+ * @example
+ * ```tsx
+ * // Interactive rating
+ * const [rating, setRating] = useState(0);
+ * <Rating value={rating} onChange={setRating} />
+ *
+ * // Readonly display
+ * <Rating value={4.5} readonly />
+ *
+ * // With label
+ * <Rating value={3} readonly size="sm" />
+ * <Text>{rating} out of 5</Text>
+ *
+ * // Different sizes
+ * <Rating value={4} size="sm" readonly />
+ * <Rating value={4} size="md" readonly />
+ * <Rating value={4} size="lg" readonly />
+ * ```
+ */
+
+import React from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme, haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type RatingSize = 'sm' | 'md' | 'lg';
+
+export interface RatingProps {
+  /** Current rating value (0-5) */
+  value: number;
+  /** Maximum rating value */
+  max?: number;
+  /** Size preset */
+  size?: RatingSize;
+  /** Whether rating is readonly (display only) */
+  readonly?: boolean;
+  /** Allow half-star precision */
+  precision?: 'full' | 'half';
+  /** Change handler */
+  onChange?: (value: number) => void;
+  /** Container style */
+  style?: ViewStyle;
+  /** Active star color (defaults to warning yellow) */
+  activeColor?: string;
+  /** Inactive star color */
+  inactiveColor?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Size configs
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SIZE_CONFIG = {
+  sm: {
+    starSize: 18,
+    gap: 2,
+  },
+  md: {
+    starSize: 26,
+    gap: 4,
+  },
+  lg: {
+    starSize: 34,
+    gap: 6,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Star SVG Path (simplified 5-point star)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function StarIcon({ size, color }: { size: number; color: string }) {
+  // Simple star shape using View components
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.9,
+          height: size * 0.9,
+          backgroundColor: color,
+          // Create star using clip path workaround (simplified to rounded square for now)
+          borderRadius: size * 0.15,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* Star points overlay */}
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.6,
+          height: size * 0.6,
+          backgroundColor: color,
+          borderRadius: size * 0.1,
+        }}
+      />
+    </View>
+  );
+}
+
+// Unicode star character approach (more reliable)
+function StarText({ size, color, filled }: { size: number; color: string; filled: boolean }) {
+  return (
+    <Animated.Text
+      style={{
+        fontSize: size,
+        color,
+        lineHeight: size * 1.1,
+        textAlign: 'center',
+      }}
+    >
+      {filled ? '★' : '☆'}
+    </Animated.Text>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Individual Star Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface StarProps {
+  index: number;
+  filled: 'full' | 'half' | 'empty';
+  size: number;
+  activeColor: string;
+  inactiveColor: string;
+  readonly: boolean;
+  onPress: () => void;
+}
+
+function Star({
+  index,
+  filled,
+  size,
+  activeColor,
+  inactiveColor,
+  readonly,
+  onPress,
+}: StarProps) {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    if (readonly) return;
+    scale.value = withSpring(0.85, { damping: 15, stiffness: 400 });
+  };
+
+  const handlePressOut = () => {
+    if (readonly) return;
+    scale.value = withSequence(
+      withSpring(1.15, { damping: 15, stiffness: 400 }),
+      withSpring(1, { damping: 15, stiffness: 400 })
+    );
+  };
+
+  const handlePress = () => {
+    if (readonly) return;
+    haptic('light');
+    onPress();
+  };
+
+  const color = filled === 'empty' ? inactiveColor : activeColor;
+
+  if (readonly) {
+    return (
+      <View style={[styles.star, { width: size, height: size }]}>
+        {filled === 'half' ? (
+          <View style={styles.halfStarContainer}>
+            <View style={[styles.halfStar, { width: size / 2, overflow: 'hidden' }]}>
+              <StarText size={size} color={activeColor} filled />
+            </View>
+            <View style={[styles.halfStar, { width: size / 2, overflow: 'hidden', marginLeft: -size / 2 }]}>
+              <View style={{ marginLeft: -size / 2 }}>
+                <StarText size={size} color={inactiveColor} filled={false} />
+              </View>
+            </View>
+          </View>
+        ) : (
+          <StarText size={size} color={color} filled={filled === 'full'} />
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <AnimatedPressable
+      onPress={handlePress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      style={[styles.star, { width: size, height: size }, animatedStyle]}
+      accessibilityRole="button"
+      accessibilityLabel={`Rate ${index + 1} star${index > 0 ? 's' : ''}`}
+    >
+      <StarText size={size} color={color} filled={filled === 'full'} />
+    </AnimatedPressable>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Rating Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function Rating({
+  value,
+  max = 5,
+  size = 'md',
+  readonly = false,
+  precision = 'full',
+  onChange,
+  style,
+  activeColor,
+  inactiveColor,
+}: RatingProps) {
+  const { colors } = useTheme();
+  const config = SIZE_CONFIG[size];
+
+  const starActiveColor = activeColor || '#F59E0B'; // Amber/warning yellow
+  const starInactiveColor = inactiveColor || colors.border;
+
+  const handleStarPress = (index: number) => {
+    if (readonly || !onChange) return;
+    const newValue = index + 1;
+    onChange(newValue);
+  };
+
+  const getStarFill = (index: number): 'full' | 'half' | 'empty' => {
+    if (value >= index + 1) {
+      return 'full';
+    }
+    if (precision === 'half' && value >= index + 0.5) {
+      return 'half';
+    }
+    return 'empty';
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { gap: config.gap },
+        style,
+      ]}
+      accessibilityRole="adjustable"
+      accessibilityValue={{
+        min: 0,
+        max,
+        now: value,
+        text: `${value} out of ${max} stars`,
+      }}
+    >
+      {Array.from({ length: max }, (_, index) => (
+        <Star
+          key={index}
+          index={index}
+          filled={getStarFill(index)}
+          size={config.starSize}
+          activeColor={starActiveColor}
+          inactiveColor={starInactiveColor}
+          readonly={readonly}
+          onPress={() => handleStarPress(index)}
+        />
+      ))}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  star: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  halfStarContainer: {
+    flexDirection: 'row',
+  },
+  halfStar: {
+    overflow: 'hidden',
+  },
+});

package/registry/ui/row.tsx

@@ -0,0 +1,136 @@
+/**
+ * Row
+ *
+ * Horizontal flex container with gap, alignment, and padding props.
+ * Uses design tokens for consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <Row gap="md" align="center" justify="between">
+ *   <Text>Left</Text>
+ *   <Text>Right</Text>
+ * </Row>
+ *
+ * <Row gap={4} wrap>
+ *   {items.map(item => <Chip key={item.id}>{item.name}</Chip>)}
+ * </Row>
+ * ```
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+// Semantic gap values
+type GapSemantic = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// Gap can be either semantic string or numeric spacing key
+export type GapValue = GapSemantic | number;
+
+// Semantic → Spacing Key Mapping
+const semanticGapMap: Record<GapSemantic, number> = {
+  'none': 0,
+  'xs': 2,
+  'sm': 3,
+  'md': 4,
+  'lg': 6,
+  'xl': 8,
+  '2xl': 12,
+};
+
+// Alignment value mappings
+const alignMap = {
+  'start': 'flex-start',
+  'center': 'center',
+  'end': 'flex-end',
+  'stretch': 'stretch',
+  'baseline': 'baseline',
+} as const;
+
+const justifyMap = {
+  'start': 'flex-start',
+  'center': 'center',
+  'end': 'flex-end',
+  'between': 'space-between',
+  'around': 'space-around',
+  'evenly': 'space-evenly',
+} as const;
+
+export interface RowProps extends ViewProps {
+  /** Gap between children (semantic or spacing key) */
+  gap?: GapValue;
+  /** Vertical alignment of children */
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  /** Horizontal distribution of children */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  /** Allow children to wrap to next line */
+  wrap?: boolean;
+  /** Flex value for the container */
+  flex?: number;
+  /** Padding (all sides) */
+  p?: GapValue;
+  /** Horizontal padding */
+  px?: GapValue;
+  /** Vertical padding */
+  py?: GapValue;
+  /** Additional styles */
+  style?: ViewStyle;
+  /** Children */
+  children?: React.ReactNode;
+}
+
+function resolveGap(
+  value: GapValue | undefined,
+  spacing: ReturnType<typeof useTheme>['spacing']
+): number | undefined {
+  if (value === undefined) return undefined;
+
+  if (typeof value === 'string') {
+    const key = semanticGapMap[value as GapSemantic];
+    return (spacing as Record<number, number>)[key];
+  }
+
+  return (spacing as Record<number, number>)[value];
+}
+
+export const Row = forwardRef<View, RowProps>(function Row(
+  {
+    gap,
+    align,
+    justify,
+    wrap = false,
+    flex,
+    p,
+    px,
+    py,
+    style,
+    children,
+    ...props
+  },
+  ref
+) {
+  const { spacing } = useTheme();
+
+  const resolvedGap = resolveGap(gap, spacing);
+  const resolvedP = resolveGap(p, spacing);
+  const resolvedPx = resolveGap(px, spacing);
+  const resolvedPy = resolveGap(py, spacing);
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    ...(resolvedGap !== undefined && { gap: resolvedGap }),
+    ...(align && { alignItems: alignMap[align] }),
+    ...(justify && { justifyContent: justifyMap[justify] }),
+    ...(wrap && { flexWrap: 'wrap' }),
+    ...(flex !== undefined && { flex }),
+    ...(resolvedP !== undefined && { padding: resolvedP }),
+    ...(resolvedPx !== undefined && { paddingHorizontal: resolvedPx }),
+    ...(resolvedPy !== undefined && { paddingVertical: resolvedPy }),
+  };
+
+  return (
+    <View ref={ref} style={[containerStyle, style]} {...props}>
+      {children}
+    </View>
+  );
+});

package/registry/ui/screen.tsx

@@ -0,0 +1,153 @@
+/**
+ * Screen
+ *
+ * Screen container with safe area, scroll support, and background variants.
+ * Uses design tokens for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * // Basic screen with safe area
+ * <Screen>
+ *   <Text>Content</Text>
+ * </Screen>
+ *
+ * // Scrollable screen with padding
+ * <Screen scroll padded>
+ *   <Text>Scrollable content</Text>
+ * </Screen>
+ *
+ * // Surface variant with custom edges
+ * <Screen variant="surface" edges={['top', 'bottom']}>
+ *   <Text>Surface background</Text>
+ * </Screen>
+ * ```
+ */
+
+import React, { forwardRef } from 'react';
+import {
+  View,
+  ScrollView,
+  ScrollViewProps,
+  ViewStyle,
+  StyleSheet,
+} from 'react-native';
+import { useSafeAreaInsets, Edge } from 'react-native-safe-area-context';
+import { useTheme } from '@nativeui/core';
+
+export type ScreenVariant = 'default' | 'surface' | 'muted';
+
+export interface ScreenProps {
+  /** Enable scrolling */
+  scroll?: boolean;
+  /** Additional ScrollView props when scroll is enabled */
+  scrollProps?: Omit<ScrollViewProps, 'style' | 'contentContainerStyle'>;
+  /** Add horizontal padding (spacing[4] = 16px) */
+  padded?: boolean;
+  /** Background variant */
+  variant?: ScreenVariant;
+  /** Safe area edges to respect (default: all) */
+  edges?: Edge[];
+  /** Additional styles for the container */
+  style?: ViewStyle;
+  /** Additional styles for the content container (only when scroll is true) */
+  contentContainerStyle?: ViewStyle;
+  /** Children */
+  children?: React.ReactNode;
+}
+
+export const Screen = forwardRef<View | ScrollView, ScreenProps>(function Screen(
+  {
+    scroll = false,
+    scrollProps,
+    padded = false,
+    variant = 'default',
+    edges = ['top', 'bottom', 'left', 'right'],
+    style,
+    contentContainerStyle,
+    children,
+  },
+  ref
+) {
+  const { colors, spacing } = useTheme();
+  const insets = useSafeAreaInsets();
+
+  // Get background color based on variant
+  const backgroundColor = getBackgroundColor(variant, colors);
+
+  // Calculate safe area padding based on edges
+  const safeAreaStyle: ViewStyle = {
+    paddingTop: edges.includes('top') ? insets.top : 0,
+    paddingBottom: edges.includes('bottom') ? insets.bottom : 0,
+    paddingLeft: edges.includes('left') ? insets.left : 0,
+    paddingRight: edges.includes('right') ? insets.right : 0,
+  };
+
+  // Content padding when padded is true
+  const paddedStyle: ViewStyle = padded
+    ? { paddingHorizontal: spacing[4] }
+    : {};
+
+  if (scroll) {
+    return (
+      <ScrollView
+        ref={ref as React.ForwardedRef<ScrollView>}
+        style={[
+          styles.container,
+          { backgroundColor },
+          safeAreaStyle,
+          style,
+        ]}
+        contentContainerStyle={[
+          styles.scrollContent,
+          paddedStyle,
+          contentContainerStyle,
+        ]}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        {...scrollProps}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View
+      ref={ref as React.ForwardedRef<View>}
+      style={[
+        styles.container,
+        { backgroundColor },
+        safeAreaStyle,
+        paddedStyle,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+});
+
+function getBackgroundColor(
+  variant: ScreenVariant,
+  colors: ReturnType<typeof useTheme>['colors']
+): string {
+  switch (variant) {
+    case 'default':
+      return colors.background;
+    case 'surface':
+      return colors.backgroundSubtle;
+    case 'muted':
+      return colors.backgroundMuted;
+    default:
+      return colors.background;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+});