@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/form.tsx

@@ -0,0 +1,323 @@
+/**
+ * Form
+ *
+ * Form components with react-hook-form integration.
+ * Provides type-safe form handling with Zod validation.
+ *
+ * @example
+ * ```tsx
+ * import { useForm } from 'react-hook-form';
+ * import { zodResolver } from '@hookform/resolvers/zod';
+ * import { z } from 'zod';
+ *
+ * const schema = z.object({
+ *   email: z.string().email('Invalid email'),
+ *   password: z.string().min(8, 'Min 8 characters'),
+ * });
+ *
+ * type FormData = z.infer<typeof schema>;
+ *
+ * function LoginForm() {
+ *   const form = useForm<FormData>({
+ *     resolver: zodResolver(schema),
+ *   });
+ *
+ *   const onSubmit = (data: FormData) => {
+ *     console.log(data);
+ *   };
+ *
+ *   return (
+ *     <Form form={form} onSubmit={onSubmit}>
+ *       <FormField
+ *         control={form.control}
+ *         name="email"
+ *         render={({ field, fieldState }) => (
+ *           <FormItem>
+ *             <FormLabel>Email</FormLabel>
+ *             <Input
+ *               placeholder="email@example.com"
+ *               value={field.value}
+ *               onChangeText={field.onChange}
+ *               onBlur={field.onBlur}
+ *               error={fieldState.error?.message}
+ *             />
+ *             <FormMessage />
+ *           </FormItem>
+ *         )}
+ *       />
+ *       <Button onPress={form.handleSubmit(onSubmit)}>Submit</Button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { createContext, useContext, useId } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  UseFormReturn,
+  useFormContext,
+  ControllerRenderProps,
+  ControllerFieldState,
+  UseFormStateReturn,
+} from 'react-hook-form';
+import { useTheme } from '@nativeui/core';
+
+// ============================================================================
+// Form Context
+// ============================================================================
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName;
+};
+
+const FormFieldContext = createContext<FormFieldContextValue | null>(null);
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = createContext<FormItemContextValue | null>(null);
+
+// ============================================================================
+// useFormField Hook
+// ============================================================================
+
+export function useFormField() {
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error('useFormField must be used within <FormField>');
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  return {
+    id: itemContext?.id ?? '',
+    name: fieldContext.name,
+    formItemId: `${itemContext?.id}-form-item`,
+    formDescriptionId: `${itemContext?.id}-form-description`,
+    formMessageId: `${itemContext?.id}-form-message`,
+    ...fieldState,
+  };
+}
+
+// ============================================================================
+// Form Component
+// ============================================================================
+
+export interface FormProps<TFieldValues extends FieldValues> {
+  /** react-hook-form form instance */
+  form: UseFormReturn<TFieldValues>;
+  /** Form children */
+  children: React.ReactNode;
+  /** Submit handler */
+  onSubmit?: (data: TFieldValues) => void | Promise<void>;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function Form<TFieldValues extends FieldValues>({
+  form,
+  children,
+  style,
+}: FormProps<TFieldValues>) {
+  return (
+    <FormProvider {...form}>
+      <View style={[styles.form, style]}>{children}</View>
+    </FormProvider>
+  );
+}
+
+// ============================================================================
+// FormField Component
+// ============================================================================
+
+export interface FormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends Omit<ControllerProps<TFieldValues, TName>, 'render'> {
+  render: (props: {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<TFieldValues>;
+  }) => React.ReactElement;
+}
+
+export function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({ name, ...props }: FormFieldProps<TFieldValues, TName>) {
+  return (
+    <FormFieldContext.Provider value={{ name }}>
+      <Controller name={name} {...props} />
+    </FormFieldContext.Provider>
+  );
+}
+
+// ============================================================================
+// FormItem Component
+// ============================================================================
+
+export interface FormItemProps {
+  /** Children elements */
+  children: React.ReactNode;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+export function FormItem({ children, style }: FormItemProps) {
+  const id = useId();
+  const { spacing } = useTheme();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <View style={[styles.formItem, { marginBottom: spacing[4] }, style]}>
+        {children}
+      </View>
+    </FormItemContext.Provider>
+  );
+}
+
+// ============================================================================
+// FormLabel Component
+// ============================================================================
+
+export interface FormLabelProps {
+  /** Label text */
+  children: React.ReactNode;
+  /** Show required asterisk */
+  required?: boolean;
+  /** Additional text styles */
+  style?: TextStyle;
+}
+
+export function FormLabel({ children, required, style }: FormLabelProps) {
+  const { colors, spacing } = useTheme();
+  const { error } = useFormField();
+
+  return (
+    <Text
+      style={[
+        styles.formLabel,
+        {
+          color: error ? colors.destructive : colors.foreground,
+          marginBottom: spacing[1.5],
+        },
+        style,
+      ]}
+    >
+      {children}
+      {required && (
+        <Text style={{ color: colors.destructive }}> *</Text>
+      )}
+    </Text>
+  );
+}
+
+// ============================================================================
+// FormDescription Component
+// ============================================================================
+
+export interface FormDescriptionProps {
+  /** Description text */
+  children: React.ReactNode;
+  /** Additional text styles */
+  style?: TextStyle;
+}
+
+export function FormDescription({ children, style }: FormDescriptionProps) {
+  const { colors, spacing } = useTheme();
+
+  return (
+    <Text
+      style={[
+        styles.formDescription,
+        {
+          color: colors.foregroundMuted,
+          marginTop: spacing[1],
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+// ============================================================================
+// FormMessage Component
+// ============================================================================
+
+export interface FormMessageProps {
+  /** Override error message */
+  children?: React.ReactNode;
+  /** Additional text styles */
+  style?: TextStyle;
+}
+
+export function FormMessage({ children, style }: FormMessageProps) {
+  const { colors, spacing } = useTheme();
+  const { error } = useFormField();
+  const message = error?.message;
+
+  // Don't render if no message
+  if (!message && !children) {
+    return null;
+  }
+
+  return (
+    <Text
+      style={[
+        styles.formMessage,
+        {
+          color: colors.destructive,
+          marginTop: spacing[1],
+        },
+        style,
+      ]}
+    >
+      {children ?? message}
+    </Text>
+  );
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  form: {
+    width: '100%',
+  },
+  formItem: {
+    width: '100%',
+  },
+  formLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  formDescription: {
+    fontSize: 12,
+  },
+  formMessage: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+});

package/registry/ui/horizontal-list.tsx

@@ -0,0 +1,200 @@
+/**
+ * HorizontalList
+ *
+ * A horizontal scrolling container with snap-to-item behavior,
+ * commonly used for carousels, card lists, and horizontal galleries.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - edge-to-edge scroll with content inset
+ * <HorizontalList contentInset={16}>
+ *   {items.map(item => (
+ *     <ProductCard key={item.id} style={{ width: 200 }} {...item} />
+ *   ))}
+ * </HorizontalList>
+ *
+ * // With active index tracking
+ * <HorizontalList
+ *   contentInset={16}
+ *   onActiveIndexChange={(index) => console.log('Active:', index)}
+ * >
+ *   {banners.map(banner => (
+ *     <BannerCard key={banner.id} style={{ width: screenWidth - 48 }} />
+ *   ))}
+ * </HorizontalList>
+ * ```
+ */
+
+import React, { useRef, useState, useCallback } from 'react';
+import {
+  ScrollView,
+  View,
+  StyleSheet,
+  ViewStyle,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  LayoutChangeEvent,
+  Dimensions,
+} from 'react-native';
+import { useTheme } from '@nativeui/core';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface HorizontalListProps {
+  /** List items */
+  children: React.ReactNode;
+  /** Content inset from edges (first/last item padding) */
+  contentInset?: number;
+  /** Spacing between items */
+  itemSpacing?: number;
+  /** Enable snap scrolling */
+  snapEnabled?: boolean;
+  /** Deceleration rate for scrolling */
+  decelerationRate?: 'normal' | 'fast';
+  /** Show horizontal scroll indicator */
+  showsScrollIndicator?: boolean;
+  /** Called when active (centered) item changes */
+  onActiveIndexChange?: (index: number) => void;
+  /** Called when scroll position changes */
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /** Container style */
+  style?: ViewStyle;
+  /** Content container style */
+  contentContainerStyle?: ViewStyle;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function HorizontalList({
+  children,
+  contentInset,
+  itemSpacing,
+  snapEnabled = true,
+  decelerationRate = 'fast',
+  showsScrollIndicator = false,
+  onActiveIndexChange,
+  onScroll,
+  style,
+  contentContainerStyle,
+}: HorizontalListProps) {
+  const { spacing } = useTheme();
+  const scrollRef = useRef<ScrollView>(null);
+
+  // Use theme spacing as defaults
+  const inset = contentInset ?? spacing[4];
+  const gap = itemSpacing ?? spacing[3];
+
+  // Track item positions for snap offsets
+  const [snapOffsets, setSnapOffsets] = useState<number[]>([]);
+  const itemPositions = useRef<{ x: number; width: number }[]>([]);
+  const containerWidth = useRef(SCREEN_WIDTH);
+
+  const childArray = React.Children.toArray(children);
+
+  // Calculate snap offsets when items are laid out
+  const handleItemLayout = useCallback(
+    (index: number) => (event: LayoutChangeEvent) => {
+      const { x, width } = event.nativeEvent.layout;
+      itemPositions.current[index] = { x, width };
+
+      // Recalculate snap offsets when all items are measured
+      if (itemPositions.current.filter(Boolean).length === childArray.length) {
+        const offsets = itemPositions.current.map((pos, index) => {
+          if (index === 0) return 0;
+          // Snap so previous item is completely off-screen
+          const prevItem = itemPositions.current[index - 1];
+          if (!prevItem) return 0;
+          return prevItem.x + prevItem.width;
+        });
+        setSnapOffsets(offsets);
+      }
+    },
+    [childArray.length, inset]
+  );
+
+  const handleContainerLayout = useCallback((event: LayoutChangeEvent) => {
+    containerWidth.current = event.nativeEvent.layout.width;
+  }, []);
+
+  // Track active index on scroll end
+  const handleScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!onActiveIndexChange) return;
+
+      const offsetX = event.nativeEvent.contentOffset.x;
+
+      // Find closest snap point
+      let closestIndex = 0;
+      let minDistance = Infinity;
+
+      snapOffsets.forEach((offset, index) => {
+        const distance = Math.abs(offsetX - offset);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestIndex = index;
+        }
+      });
+
+      onActiveIndexChange(closestIndex);
+    },
+    [onActiveIndexChange, snapOffsets]
+  );
+
+  return (
+    <ScrollView
+      ref={scrollRef}
+      horizontal
+      showsHorizontalScrollIndicator={showsScrollIndicator}
+      decelerationRate={decelerationRate}
+      snapToOffsets={snapEnabled ? snapOffsets : undefined}
+      snapToStart={snapEnabled}
+      snapToEnd={snapEnabled}
+      onScroll={onScroll}
+      onMomentumScrollEnd={handleScrollEnd}
+      scrollEventThrottle={16}
+      style={[styles.container, style]}
+      contentContainerStyle={[styles.content, contentContainerStyle]}
+      onLayout={handleContainerLayout}
+      accessibilityRole="list"
+    >
+      {childArray.map((child, index) => {
+        const isFirst = index === 0;
+        const isLast = index === childArray.length - 1;
+
+        return (
+          <View
+            key={index}
+            style={{
+              marginLeft: isFirst ? inset : gap,
+              marginRight: isLast ? inset : 0,
+            }}
+            onLayout={handleItemLayout(index)}
+            accessible
+          >
+            {child}
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 0,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+});