@metacells/mcellui-mcp-server 0.1.1 → 0.1.2

package/registry/ui/dialog.tsx

@@ -0,0 +1,292 @@
+/**
+ * Dialog
+ *
+ * A modal dialog component with backdrop and animations.
+ * Centers content on screen with fade/scale animation.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Are you sure?</DialogTitle>
+ *       <DialogDescription>This action cannot be undone.</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogClose asChild>
+ *         <Button variant="outline">Cancel</Button>
+ *       </DialogClose>
+ *       <Button>Continue</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+
+import React, { useEffect, useCallback, createContext, useContext } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+  interpolate,
+} from 'react-native-reanimated';
+import { useTheme, DIALOG_CONSTANTS } from '@nativeui/core';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// Context for dialog state
+const DialogContext = createContext<{
+  onClose: () => void;
+} | null>(null);
+
+const useDialog = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+};
+
+export interface DialogProps {
+  /** Controlled open state */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Children (should be DialogContent) */
+  children: React.ReactNode;
+}
+
+export function Dialog({ open, onOpenChange, children }: DialogProps) {
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={handleClose}
+    >
+      <DialogContext.Provider value={{ onClose: handleClose }}>
+        {children}
+      </DialogContext.Provider>
+    </Modal>
+  );
+}
+
+export interface DialogContentProps {
+  /** Content children */
+  children: React.ReactNode;
+  /** Max width of dialog */
+  maxWidth?: number;
+  /** Additional styles */
+  style?: ViewStyle;
+}
+
+export function DialogContent({
+  children,
+  maxWidth = SCREEN_WIDTH - DIALOG_CONSTANTS.screenMargin,
+  style,
+}: DialogContentProps) {
+  const { colors, radius, platformShadow, springs } = useTheme();
+  const { onClose } = useDialog();
+
+  const progress = useSharedValue(0);
+  const isClosing = useSharedValue(false);
+
+  useEffect(() => {
+    progress.value = withSpring(1, springs.snappy);
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    if (isClosing.value) return;
+    isClosing.value = true;
+    progress.value = withTiming(0, { duration: DIALOG_CONSTANTS.closeAnimationDuration }, (finished) => {
+      if (finished) {
+        runOnJS(onClose)();
+      }
+    });
+  }, [onClose]);
+
+  const animatedBackdropStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(progress.value, [0, 1], [0, DIALOG_CONSTANTS.backdropMaxOpacity]),
+  }));
+
+  const animatedDialogStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [
+      { scale: interpolate(progress.value, [0, 1], [DIALOG_CONSTANTS.enterStartScale, 1]) },
+    ],
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          styles.backdrop,
+          { backgroundColor: colors.foreground },
+          animatedBackdropStyle,
+        ]}
+      >
+        <Pressable style={styles.backdropPressable} onPress={closeDialog} />
+      </Animated.View>
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.keyboardView}
+      >
+        <Animated.View
+          style={[
+            styles.dialog,
+            {
+              maxWidth,
+              backgroundColor: colors.card,
+              borderRadius: radius.xl,
+            },
+            platformShadow('lg'),
+            animatedDialogStyle,
+            style,
+          ]}
+        >
+          {children}
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+}
+
+export interface DialogHeaderProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export function DialogHeader({ children, style }: DialogHeaderProps) {
+  const { spacing } = useTheme();
+  return (
+    <View style={[styles.header, { marginBottom: spacing[4] }, style]}>
+      {children}
+    </View>
+  );
+}
+
+export interface DialogTitleProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export function DialogTitle({ children, style }: DialogTitleProps) {
+  const { colors } = useTheme();
+  return (
+    <Text style={[styles.title, { color: colors.foreground }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export interface DialogDescriptionProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export function DialogDescription({ children, style }: DialogDescriptionProps) {
+  const { colors, spacing } = useTheme();
+  return (
+    <Text
+      style={[
+        styles.description,
+        { color: colors.foregroundMuted, marginTop: spacing[2] },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export interface DialogFooterProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export function DialogFooter({ children, style }: DialogFooterProps) {
+  const { spacing } = useTheme();
+  return (
+    <View style={[styles.footer, { marginTop: spacing[6], gap: spacing[3] }, style]}>
+      {children}
+    </View>
+  );
+}
+
+export interface DialogCloseProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+export function DialogClose({ children, asChild }: DialogCloseProps) {
+  const { onClose } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onPress: onClose,
+    });
+  }
+
+  return (
+    <Pressable onPress={onClose}>
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  backdropPressable: {
+    flex: 1,
+  },
+  keyboardView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialog: {
+    width: '100%',
+    padding: DIALOG_CONSTANTS.contentPadding,
+  },
+  header: {},
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+});

package/registry/ui/fab.tsx

@@ -0,0 +1,225 @@
+/**
+ * FAB (Floating Action Button)
+ *
+ * A prominent button for primary actions, typically positioned
+ * at the bottom-right of the screen.
+ *
+ * @example
+ * ```tsx
+ * // Basic FAB
+ * <FAB icon={<PlusIcon />} onPress={handleCreate} />
+ *
+ * // Extended FAB with label
+ * <FAB icon={<PlusIcon />} label="Create" onPress={handleCreate} />
+ *
+ * // Different sizes
+ * <FAB icon={<PlusIcon />} size="sm" />
+ * <FAB icon={<PlusIcon />} size="lg" />
+ *
+ * // With absolute positioning (typical usage)
+ * <View style={{ flex: 1 }}>
+ *   <Content />
+ *   <FAB
+ *     icon={<PlusIcon />}
+ *     onPress={handleCreate}
+ *     style={{ position: 'absolute', bottom: 24, right: 24 }}
+ *   />
+ * </View>
+ * ```
+ */
+
+import React from 'react';
+import {
+  Text,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  ActivityIndicator,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme, haptic } from '@nativeui/core';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type FABSize = 'sm' | 'md' | 'lg';
+export type FABVariant = 'primary' | 'secondary' | 'surface';
+
+export interface FABProps {
+  /** Icon element */
+  icon: React.ReactNode;
+  /** Optional label for extended FAB */
+  label?: string;
+  /** Size preset */
+  size?: FABSize;
+  /** Visual variant */
+  variant?: FABVariant;
+  /** Loading state */
+  loading?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+  /** Container style */
+  style?: ViewStyle;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Size configs
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SIZE_CONFIG = {
+  sm: {
+    size: 40,
+    iconSize: 18,
+    fontSize: 13,
+    paddingHorizontal: 12,
+  },
+  md: {
+    size: 56,
+    iconSize: 24,
+    fontSize: 14,
+    paddingHorizontal: 16,
+  },
+  lg: {
+    size: 72,
+    iconSize: 32,
+    fontSize: 16,
+    paddingHorizontal: 20,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function FAB({
+  icon,
+  label,
+  size = 'md',
+  variant = 'primary',
+  loading = false,
+  disabled = false,
+  onPress,
+  style,
+}: FABProps) {
+  const { colors, fontWeight, platformShadow } = useTheme();
+  const config = SIZE_CONFIG[size];
+
+  const scale = useSharedValue(1);
+
+  // Variant styles
+  const variantStyles = {
+    primary: {
+      backgroundColor: colors.primary,
+      iconColor: colors.primaryForeground,
+    },
+    secondary: {
+      backgroundColor: colors.secondary,
+      iconColor: colors.secondaryForeground,
+    },
+    surface: {
+      backgroundColor: colors.card,
+      iconColor: colors.foreground,
+    },
+  }[variant];
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    scale.value = withSpring(0.92, { damping: 20, stiffness: 400 });
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1, { damping: 20, stiffness: 400 });
+  };
+
+  const handlePress = () => {
+    haptic('light');
+    onPress?.();
+  };
+
+  const isExtended = !!label;
+
+  return (
+    <AnimatedPressable
+      onPress={handlePress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled || loading}
+      style={[
+        styles.fab,
+        {
+          backgroundColor: variantStyles.backgroundColor,
+          width: isExtended ? 'auto' : config.size,
+          height: config.size,
+          borderRadius: config.size / 2,
+          paddingHorizontal: isExtended ? config.paddingHorizontal : 0,
+          opacity: disabled ? 0.5 : 1,
+        },
+        platformShadow('lg'),
+        animatedStyle,
+        style,
+      ]}
+      accessibilityRole="button"
+      accessibilityLabel={label || 'Floating action button'}
+      accessibilityState={{ disabled }}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size={size === 'sm' ? 'small' : 'small'}
+          color={variantStyles.iconColor}
+        />
+      ) : (
+        <>
+          {React.isValidElement(icon)
+            ? React.cloneElement(icon as React.ReactElement<{ width?: number; height?: number; color?: string }>, {
+                width: config.iconSize,
+                height: config.iconSize,
+                color: variantStyles.iconColor,
+              })
+            : icon}
+          {label && (
+            <Text
+              style={[
+                styles.label,
+                {
+                  fontSize: config.fontSize,
+                  fontWeight: fontWeight.semibold,
+                  color: variantStyles.iconColor,
+                  marginLeft: 8,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+        </>
+      )}
+    </AnimatedPressable>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  fab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    textAlign: 'center',
+  },
+});