kynjal-cli 2.0.6

package/dist/templates/components/ui/share.tsx

@@ -0,0 +1,304 @@
+import { Button, ButtonVariant } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { useColor } from '@/hooks/useColor';
+import { FONT_SIZE } from '@/theme/globals';
+import { Share as ShareIcon } from 'lucide-react-native';
+import React, { useCallback, useMemo } from 'react';
+import {
+  Alert,
+  Platform,
+  Share as RNShare,
+  ShareOptions,
+  TextStyle,
+  View,
+} from 'react-native';
+
+export interface ShareContent {
+  message?: string;
+  url?: string;
+  title?: string;
+  subject?: string; // For email sharing on iOS
+}
+
+export interface ShareButtonOptions {
+  dialogTitle?: string; // Android only
+  excludedActivityTypes?: string[]; // iOS only
+  tintColor?: string; // iOS only
+  anchor?: number; // iOS only - for iPad anchoring
+}
+
+interface ShareButtonProps {
+  content: ShareContent;
+  options?: ShareButtonOptions;
+  children?: React.ReactNode;
+  variant?: ButtonVariant;
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  disabled?: boolean;
+  loading?: boolean;
+  onShareStart?: () => void;
+  onShareSuccess?: (activityType?: string | null) => void;
+  onShareError?: (error: Error) => void;
+  onShareDismiss?: () => void;
+  showIcon?: boolean;
+  iconSize?: number;
+  fallbackMessage?: string;
+  validateContent?: boolean;
+  testID?: string;
+}
+
+export function ShareButton({
+  content,
+  options,
+  children,
+  variant = 'default',
+  size = 'default',
+  disabled = false,
+  loading = false,
+  onShareStart,
+  onShareSuccess,
+  onShareError,
+  onShareDismiss,
+  showIcon = true,
+  iconSize = 18,
+  validateContent = true,
+}: ShareButtonProps) {
+  const primaryColor = useColor('primary');
+  const primaryForegroundColor = useColor('primaryForeground');
+  const secondaryForegroundColor = useColor('secondaryForeground');
+  const destructiveForegroundColor = useColor('destructiveForeground');
+
+  // Validate content requirements
+  const isContentValid = useMemo(() => {
+    if (!validateContent) return true;
+
+    // At least one of url or message is required
+    const hasRequiredContent = Boolean(content.message || content.url);
+
+    // Additional validation
+    if (content.url && !isValidUrl(content.url)) {
+      return false;
+    }
+
+    return hasRequiredContent;
+  }, [content, validateContent]);
+
+  const handleShare = useCallback(async () => {
+    if (!isContentValid) {
+      const error = new Error(
+        'Invalid share content: At least one of message or url is required'
+      );
+      onShareError?.(error);
+      Alert.alert('Share Error', 'Cannot share: invalid content provided');
+      return;
+    }
+
+    try {
+      onShareStart?.();
+
+      // Build share content object
+      const shareContent: any = {};
+
+      if (content.message) shareContent.message = content.message;
+      if (content.url) shareContent.url = content.url;
+
+      // Platform-specific content
+      if (Platform.OS === 'ios') {
+        if (content.title) shareContent.title = content.title;
+        if (content.subject) shareContent.subject = content.subject;
+      }
+
+      // Build share options object
+      const shareOptions: ShareOptions = {};
+
+      if (options) {
+        // Android-specific options
+        if (Platform.OS === 'android' && options.dialogTitle) {
+          shareOptions.dialogTitle = options.dialogTitle;
+        }
+
+        // iOS-specific options
+        if (Platform.OS === 'ios') {
+          if (options.excludedActivityTypes) {
+            shareOptions.excludedActivityTypes = options.excludedActivityTypes;
+          }
+          if (options.tintColor) {
+            shareOptions.tintColor = options.tintColor;
+          }
+          if (options.anchor) {
+            shareOptions.anchor = options.anchor;
+          }
+        }
+      }
+
+      const result = await RNShare.share(shareContent, shareOptions);
+
+      if (result.action === RNShare.sharedAction) {
+        onShareSuccess?.(result.activityType);
+      } else if (result.action === RNShare.dismissedAction) {
+        onShareDismiss?.();
+      }
+    } catch (error: any) {
+      const shareError =
+        error instanceof Error ? error : new Error(String(error));
+      onShareError?.(shareError);
+
+      // More user-friendly error messages
+      const errorMessage = getShareErrorMessage(shareError);
+      Alert.alert('Share Error', errorMessage);
+    }
+  }, [
+    content,
+    options,
+    isContentValid,
+    onShareStart,
+    onShareSuccess,
+    onShareError,
+    onShareDismiss,
+  ]);
+
+  const isButtonDisabled = disabled || loading || !isContentValid;
+
+  const getButtonTextStyle = (): TextStyle => {
+    const baseTextStyle: TextStyle = {
+      fontSize: FONT_SIZE,
+      fontWeight: '500',
+    };
+
+    switch (variant) {
+      case 'destructive':
+        return { ...baseTextStyle, color: destructiveForegroundColor };
+      case 'success':
+        return { ...baseTextStyle, color: destructiveForegroundColor };
+      case 'outline':
+        return { ...baseTextStyle, color: primaryColor };
+      case 'secondary':
+        return { ...baseTextStyle, color: secondaryForegroundColor };
+      case 'ghost':
+        return { ...baseTextStyle, color: primaryColor };
+      case 'link':
+        return {
+          ...baseTextStyle,
+          color: primaryColor,
+          textDecorationLine: 'underline',
+        };
+      default:
+        return { ...baseTextStyle, color: primaryForegroundColor };
+    }
+  };
+
+  // Create button content with proper layout
+  const buttonContent = () => {
+    if (!showIcon || loading) {
+      return children;
+    }
+
+    if (!children) {
+      return <ShareIcon size={iconSize} color={getButtonTextStyle().color} />;
+    }
+
+    // Handle string children properly with correct styling
+    const textContent =
+      typeof children === 'string' ? (
+        <Text style={getButtonTextStyle()}>{children}</Text>
+      ) : (
+        children
+      );
+
+    return (
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <ShareIcon
+          size={iconSize}
+          color={getButtonTextStyle().color}
+          style={{ marginRight: 8 }}
+        />
+        {textContent}
+      </View>
+    );
+  };
+
+  return (
+    <Button
+      onPress={handleShare}
+      variant={variant}
+      size={size}
+      disabled={isButtonDisabled}
+      loading={loading}
+    >
+      {buttonContent()}
+    </Button>
+  );
+}
+
+// Utility function to validate URLs
+function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    // Try with protocol if missing
+    try {
+      new URL(`https://${url}`);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
+
+// Utility function to provide user-friendly error messages
+function getShareErrorMessage(error: Error): string {
+  const message = error.message.toLowerCase();
+
+  if (message.includes('cancel') || message.includes('dismiss')) {
+    return 'Share was cancelled';
+  }
+  if (message.includes('network') || message.includes('connection')) {
+    return 'Network error occurred while sharing';
+  }
+  if (message.includes('permission')) {
+    return 'Permission denied for sharing';
+  }
+  if (message.includes('not supported')) {
+    return 'Sharing is not supported on this device';
+  }
+
+  return 'An error occurred while sharing. Please try again.';
+}
+
+// Hook for easier usage with common share scenarios
+export function useShare() {
+  const shareText = useCallback(
+    (text: string, options?: ShareButtonOptions) => {
+      return RNShare.share({ message: text }, options);
+    },
+    []
+  );
+
+  const shareUrl = useCallback(
+    (url: string, message?: string, options?: ShareButtonOptions) => {
+      return RNShare.share({ url, message }, options);
+    },
+    []
+  );
+
+  const shareContent = useCallback(
+    (content: ShareContent, options?: ShareButtonOptions) => {
+      const shareData: any = {};
+      if (content.message) shareData.message = content.message;
+      if (content.url) shareData.url = content.url;
+      if (Platform.OS === 'ios') {
+        if (content.title) shareData.title = content.title;
+        if (content.subject) shareData.subject = content.subject;
+      }
+
+      return RNShare.share(shareData, options);
+    },
+    []
+  );
+
+  return {
+    shareText,
+    shareUrl,
+    shareContent,
+  };
+}

package/dist/templates/components/ui/sheet.tsx

@@ -0,0 +1,302 @@
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS, FONT_SIZE } from '@/theme/globals';
+import { X } from 'lucide-react-native';
+import React, { useEffect } from 'react';
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+type SheetSide = 'left' | 'right';
+
+interface SheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side?: SheetSide;
+  children: React.ReactNode;
+}
+
+interface SheetContentProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+interface SheetHeaderProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+interface SheetTitleProps {
+  children: React.ReactNode;
+}
+
+interface SheetDescriptionProps {
+  children: React.ReactNode;
+}
+
+interface SheetTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+interface SheetContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side: SheetSide;
+}
+
+const SheetContext = React.createContext<SheetContextValue | null>(null);
+
+const useSheet = () => {
+  const context = React.useContext(SheetContext);
+  if (!context) {
+    throw new Error('Sheet components must be used within a Sheet');
+  }
+  return context;
+};
+
+export function Sheet({
+  open,
+  onOpenChange,
+  side = 'right',
+  children,
+}: SheetProps) {
+  return (
+    <SheetContext.Provider value={{ open, onOpenChange, side }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+
+export function SheetTrigger({ children, asChild }: SheetTriggerProps) {
+  const context = React.useContext(SheetContext);
+
+  const handlePress = () => {
+    if (context) {
+      context.onOpenChange(true);
+    }
+  };
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onPress: handlePress,
+    });
+  }
+
+  return <Button onPress={handlePress}>{children}</Button>;
+}
+
+export function SheetContent({ children, style }: SheetContentProps) {
+  const { open, onOpenChange, side } = useSheet();
+  const sheetWidth = Math.min(SCREEN_WIDTH * 0.8, 400);
+  const [isVisible, setIsVisible] = React.useState(open);
+
+  const backgroundColor = useColor('background');
+  const borderColor = useColor('border');
+  const iconColor = useColor('text');
+
+  // Animation values using Reanimated's useSharedValue
+  const initialPosition = side === 'left' ? -sheetWidth : sheetWidth;
+  const translateX = useSharedValue(initialPosition);
+  const overlayOpacity = useSharedValue(0);
+
+  // Effect to handle the animation based on the `open` prop
+  useEffect(() => {
+    // Reset position if side changes while closed
+    if (open && !isVisible) {
+      translateX.value = side === 'left' ? -sheetWidth : sheetWidth;
+    }
+
+    if (open) {
+      setIsVisible(true); // Mount the modal
+      // Animate in
+      translateX.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.out(Easing.quad),
+      });
+      overlayOpacity.value = withTiming(1, { duration: 300 });
+    } else if (isVisible) {
+      // Animate out, then hide modal in the callback
+      translateX.value = withTiming(
+        initialPosition,
+        { duration: 250 },
+        (finished) => {
+          if (finished) {
+            // Use runOnJS to update React state from the UI thread
+            runOnJS(setIsVisible)(false);
+          }
+        }
+      );
+      overlayOpacity.value = withTiming(0, { duration: 250 });
+    }
+  }, [open, side, sheetWidth]); // Rerun if these change
+
+  // Animated style for the sheet content
+  const animatedSheetStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: translateX.value }],
+    };
+  });
+
+  // Animated style for the overlay
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(overlayOpacity.value, [0, 1], [0, 0.3]),
+    };
+  });
+
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={isVisible}
+      transparent={true}
+      animationType='none'
+      onRequestClose={handleClose}
+      statusBarTranslucent={true}
+    >
+      <View style={styles.modalContainer}>
+        {/* Semi-transparent overlay */}
+        <Animated.View style={[styles.overlay, animatedOverlayStyle]}>
+          <Pressable style={styles.overlayPressable} onPress={handleClose} />
+        </Animated.View>
+
+        {/* Sheet */}
+        <Animated.View
+          style={[
+            styles.sheet,
+            {
+              borderRadius: BORDER_RADIUS,
+              backgroundColor,
+              borderColor,
+              width: sheetWidth,
+              [side]: 0,
+            },
+            animatedSheetStyle, // Apply the animated style
+            style,
+          ]}
+        >
+          {/* Close button */}
+          <TouchableOpacity
+            style={[
+              styles.closeButton,
+              {
+                backgroundColor: backgroundColor,
+                [side === 'left' ? 'right' : 'left']: 16,
+              },
+            ]}
+            onPress={handleClose}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <X size={20} color={iconColor} />
+          </TouchableOpacity>
+
+          {/* Content */}
+          <View style={styles.contentContainer}>{children}</View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+// Unchanged components below
+
+export function SheetHeader({ children, style }: SheetHeaderProps) {
+  return <View style={[styles.header, style]}>{children}</View>;
+}
+
+export function SheetTitle({ children }: SheetTitleProps) {
+  return (
+    <Text variant='title' style={styles.title}>
+      {children}
+    </Text>
+  );
+}
+
+export function SheetDescription({ children }: SheetDescriptionProps) {
+  const mutedColor = useColor('textMuted');
+
+  return (
+    <Text style={[styles.description, { color: mutedColor }]}>{children}</Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 1)', // Opacity is controlled by animation
+  },
+  overlayPressable: {
+    flex: 1,
+  },
+  sheet: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.25,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 10,
+      },
+    }),
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    zIndex: 1,
+    borderRadius: 999, // Make it circular
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 90,
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: FONT_SIZE,
+    lineHeight: 20,
+  },
+});

package/dist/templates/components/ui/skeleton.tsx

@@ -0,0 +1,64 @@
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS, CORNERS } from '@/theme/globals';
+import React, { useEffect } from 'react';
+import { ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+} from 'react-native-reanimated';
+
+interface SkeletonProps {
+  width?: number | string;
+  height?: number;
+  style?: ViewStyle;
+  variant?: 'default' | 'rounded';
+}
+
+export function Skeleton({
+  width = '100%',
+  height = 100,
+  style,
+  variant = 'default',
+}: SkeletonProps) {
+  const mutedColor = useColor('muted');
+  // Start the opacity at its lowest point
+  const opacity = useSharedValue(0.5);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  useEffect(() => {
+    // We only define the animation going from 0.5 -> 1.
+    // The `withRepeat` function will handle reversing it automatically.
+    opacity.value = withRepeat(
+      // Animate to an opacity of 1
+      withTiming(1, {
+        duration: 1000,
+        easing: Easing.inOut(Easing.quad),
+      }),
+      -1, // Loop infinitely
+      true // Set to true to automatically reverse the animation (yoyo effect)
+    );
+  }, []); // Use an empty dependency array as the shared value object is stable
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: width as any,
+          height,
+          backgroundColor: mutedColor,
+          borderRadius: variant === 'default' ? CORNERS : BORDER_RADIUS,
+        },
+        animatedStyle,
+        style,
+      ]}
+    />
+  );
+}