@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Greeting-Card.tsx

@@ -0,0 +1,471 @@
+import * as React from 'react';
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  View,
+  useColorScheme,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cn } from '../../lib/utils';
+import { CustomCard } from './Custom-Card';
+import { Text } from './Text';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+
+/**
+ * Weather data structure for the greeting card
+ */
+export interface Weather {
+  /** Temperature in Celsius */
+  temperature: number;
+  /** Human-readable weather description (e.g., "Clear Sky", "Rainy") */
+  weatherDescription: string;
+  /** Path to the weather icon image */
+  weatherImage: any;
+  /** Weather code from Open-Meteo API */
+  weatherCode: number;
+  /** Timestamp of last weather update */
+  lastUpdated: Date;
+}
+
+/**
+ * Weather icon mappings for different weather conditions
+ */
+const WEATHER_ICONS = {
+  sunny: require('../../assets/icons/weather_icons/sunny_weather.png'),
+  partlyCloudy: require('../../assets/icons/weather_icons/partly_cloudy.png'),
+  foggy: require('../../assets/icons/weather_icons/foggy.png'),
+  drizzle: require('../../assets/icons/weather_icons/drizzle.png'),
+  rainy: require('../../assets/icons/weather_icons/rainy.png'),
+  freezingRain: require('../../assets/icons/weather_icons/freezing_rain.png'),
+  showers: require('../../assets/icons/weather_icons/showers.png'),
+  thunderstorm: require('../../assets/icons/weather_icons/thunderstorm.png'),
+  thunderstormHail: require('../../assets/icons/weather_icons/thunderstorm_hail.png'),
+};
+
+/**
+ * Converts a weather code from Open-Meteo API to a description and icon
+ *
+ * @param {number} code - Weather code from Open-Meteo API (0-99)
+ * @returns {Object} Object containing description and icon path
+ *
+ * @example
+ * ```tsx
+ * const weatherInfo = getWeatherDescription(0);
+ * // Returns: { description: 'Clear Sky (Sunny)', weatherImage: ... }
+ * ```
+ */
+export function getWeatherDescription(code: number): {
+  description: string;
+  weatherImage: any;
+} {
+  const weatherMap: {
+    [key: string]: { description: string; icon: keyof typeof WEATHER_ICONS };
+  } = {
+    '0': { description: 'Clear Sky (Sunny)', icon: 'sunny' },
+    '1,2,3': { description: 'Partly Cloudy', icon: 'partlyCloudy' },
+    '45,48': { description: 'Foggy', icon: 'foggy' },
+    '51,53,55': { description: 'Drizzle', icon: 'drizzle' },
+    '56,57': { description: 'Freezing Drizzle', icon: 'drizzle' },
+    '61,63,65': { description: 'Rainy', icon: 'rainy' },
+    '66,67': { description: 'Freezing Rain', icon: 'freezingRain' },
+    '80,81,82': { description: 'Showers', icon: 'showers' },
+    '95': { description: 'Thunderstorm', icon: 'thunderstorm' },
+    '96,99': {
+      description: 'Thunderstorm with Hail',
+      icon: 'thunderstormHail',
+    },
+  };
+
+  for (const [codes, info] of Object.entries(weatherMap)) {
+    if (codes.split(',').map(Number).includes(code)) {
+      return {
+        description: info.description,
+        weatherImage: WEATHER_ICONS[info.icon],
+      };
+    }
+  }
+
+  return {
+    description: 'Unknown Weather',
+    weatherImage: WEATHER_ICONS.sunny,
+  };
+}
+
+/**
+ * Returns a greeting based on the current time of day
+ *
+ * @returns {string} Time-appropriate greeting
+ *
+ * @example
+ * ```tsx
+ * const greeting = getTimeBasedGreeting();
+ * // Returns: "Good Morning" (if it's morning)
+ * ```
+ */
+export function getTimeBasedGreeting(): string {
+  const hour = new Date().getHours();
+
+  if (hour >= 5 && hour < 12) {
+    return 'Good Morning';
+  } else if (hour >= 12 && hour < 17) {
+    return 'Good Afternoon';
+  } else if (hour >= 17 && hour < 21) {
+    return 'Good Evening';
+  } else {
+    return 'Good Night';
+  }
+}
+
+/**
+ * Formats a date to a readable string format
+ *
+ * @param {Date} date - Date to format
+ * @returns {string} Formatted date string (e.g., "Monday, 16 October")
+ */
+export function formatDate(date: Date): string {
+  const days = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ];
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  const dayName = days[date.getDay()];
+  const day = date.getDate();
+  const monthName = months[date.getMonth()];
+
+  return `${dayName}, ${day} ${monthName}`;
+}
+
+/**
+ * Fetches weather data from Open-Meteo API
+ *
+ * @param {number} latitude - Latitude coordinate
+ * @param {number} longitude - Longitude coordinate
+ * @returns {Promise<Weather | null>} Weather data or null if fetch fails
+ *
+ * @example
+ * ```tsx
+ * const weather = await fetchWeather(37.7749, -122.4194);
+ * ```
+ */
+export async function fetchWeather(
+  latitude: number,
+  longitude: number
+): Promise<Weather | null> {
+  const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,weathercode`;
+
+  try {
+    const response = await fetch(url);
+
+    if (response.ok) {
+      const data = await response.json();
+
+      const temperature: number = data.current?.temperature_2m ?? 0;
+      const weatherCode: number = data.current?.weathercode ?? 0;
+
+      const weatherInfo = getWeatherDescription(weatherCode);
+
+      return {
+        temperature,
+        weatherDescription: weatherInfo.description,
+        weatherImage: weatherInfo.weatherImage,
+        weatherCode,
+        lastUpdated: new Date(),
+      };
+    }
+
+    return null;
+  } catch (error) {
+    console.error('Failed to fetch weather:', error);
+    return null;
+  }
+}
+
+/**
+ * Props for the GreetingCard component
+ */
+export interface GreetingCardProps {
+  /** User's full name to display in the greeting (required) */
+  userName: string;
+  /** Latitude coordinate for weather fetching (optional - weather shown only when both lat and lng provided) */
+  lat?: number;
+  /** Longitude coordinate for weather fetching (optional - weather shown only when both lat and lng provided) */
+  lng?: number;
+  /** Custom greeting message (overrides time-based greeting) */
+  customGreeting?: string;
+  /** Custom date to display (defaults to current date) */
+  date?: Date;
+  /** Action button text (e.g., "View Schedule") */
+  actionText?: string;
+  /** Callback when the card or action button is pressed */
+  onPress?: () => void;
+  /** Additional CSS classes for the card container */
+  className?: string;
+  /** Whether to show the action button section */
+  showAction?: boolean;
+  /** Cache duration in milliseconds (default: 15 minutes) */
+  cacheDuration?: number;
+}
+
+/**
+ * GreetingCard - A personalized greeting card with weather information
+ *
+ * Displays a personalized greeting with the user's name, current date, and optional
+ * weather information fetched from Open-Meteo API. Includes an optional action button
+ * (e.g., "View Schedule"). Weather data is automatically cached for 15 minutes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage without weather
+ * <GreetingCard
+ *   userName="John Doe"
+ *   actionText="View Schedule"
+ *   onPress={() => navigation.navigate('Schedule')}
+ * />
+ *
+ * // With automatic weather fetching (provide both lat and lng)
+ * <GreetingCard
+ *   userName="Jane Smith"
+ *   lat={37.7749}
+ *   lng={-122.4194}
+ *   actionText="View Dashboard"
+ *   onPress={() => console.log('Card pressed')}
+ * />
+ *
+ * // Custom greeting without action
+ * <GreetingCard
+ *   userName="Alice"
+ *   customGreeting="Welcome back"
+ *   showAction={false}
+ * />
+ * ```
+ *
+ * @property {string} userName - User's full name to display in greeting (required)
+ * @property {number} [lat] - Latitude coordinate for weather fetching (optional)
+ * @property {number} [lng] - Longitude coordinate for weather fetching (optional)
+ * @property {string} [customGreeting] - Override the time-based greeting
+ * @property {Date} [date] - Custom date to display (defaults to current date)
+ * @property {string} [actionText="View Details"] - Text for the action button
+ * @property {Function} [onPress] - Handler called when card or action is pressed
+ * @property {string} [className] - Additional Tailwind classes for styling
+ * @property {boolean} [showAction=true] - Whether to show the action button section
+ * @property {number} [cacheDuration=900000] - Cache duration in ms (default: 15 min)
+ */
+export function GreetingCard({
+  userName,
+  lat,
+  lng,
+  customGreeting,
+  date = new Date(),
+  actionText = 'View Details',
+  onPress,
+  className,
+  showAction = true,
+  cacheDuration = 15 * 60 * 1000, // 15 minutes
+}: GreetingCardProps) {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  const [weather, setWeather] = React.useState<Weather | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const cacheRef = React.useRef<{
+    data: Weather | null;
+    timestamp: number;
+  } | null>(null);
+
+  // Dynamic styles based on theme
+  const dynamicStyles = React.useMemo(
+    () => ({
+      separator: {
+        ...styles.separator,
+        backgroundColor: isDark
+          ? 'rgba(255, 255, 255, 0.15)'
+          : 'rgba(0, 0, 0, 0.1)',
+      },
+    }),
+    [isDark]
+  );
+
+  React.useEffect(() => {
+    const loadWeather = async () => {
+      if (lat === undefined || lng === undefined) {
+        return;
+      }
+
+      const now = Date.now();
+
+      // Check cache
+      if (
+        cacheRef.current &&
+        now - cacheRef.current.timestamp < cacheDuration
+      ) {
+        setWeather(cacheRef.current.data);
+        return;
+      }
+
+      setIsLoading(true);
+
+      try {
+        const weatherData = await fetchWeather(lat, lng);
+        setWeather(weatherData);
+        cacheRef.current = {
+          data: weatherData,
+          timestamp: now,
+        };
+      } catch (error) {
+        console.error('Error loading weather:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadWeather();
+  }, [lat, lng, cacheDuration]);
+
+  const greeting = customGreeting || getTimeBasedGreeting();
+  const formattedDate = formatDate(date);
+
+  const CardWrapper = onPress ? Pressable : View;
+  const wrapperProps = onPress
+    ? {
+        onPress,
+        android_ripple: { color: 'rgba(0, 0, 0, 0.1)' },
+      }
+    : {};
+
+  return (
+    <CardWrapper {...wrapperProps}>
+      <CustomCard
+        cornerRadius={20}
+        cornerSmoothing={1}
+        className={cn('border-primary/20 dark:border-primary/30', className)}
+      >
+        {/* Wrapper with negative margin to counteract CustomCard's default padding */}
+        <View style={styles.contentWrapper}>
+          {/* Header Section with Greeting and Weather */}
+          <View style={styles.headerSection}>
+            {/* Greeting Text */}
+            <View style={styles.greetingText}>
+              <Text className="text-sm font-semibold text-card-foreground dark:text-card-foreground">
+                Hi {userName},
+              </Text>
+              <Text className="mt-1.5 text-xs tracking-wider text-muted-foreground dark:text-muted-foreground">
+                {greeting}, {formattedDate}
+              </Text>
+            </View>
+
+            {/* Weather Display */}
+            {(weather || isLoading) && (
+              <View style={styles.weatherContainer}>
+                {isLoading ? (
+                  <Text className="text-xs text-muted-foreground dark:text-muted-foreground">
+                    Loading...
+                  </Text>
+                ) : (
+                  weather && (
+                    <>
+                      <View style={styles.weatherRow}>
+                        <Image
+                          source={weather.weatherImage}
+                          style={styles.weatherIcon}
+                          resizeMode="contain"
+                        />
+                        <Text className="ml-1 text-xs text-card-foreground dark:text-card-foreground">
+                          {Math.round(weather.temperature)}° C
+                        </Text>
+                      </View>
+                      <Text className="mt-0.5 text-xs text-muted-foreground/70 dark:text-muted-foreground/70">
+                        {weather.weatherDescription}
+                      </Text>
+                    </>
+                  )
+                )}
+              </View>
+            )}
+          </View>
+
+          {/* Action Section */}
+          {showAction && (
+            <>
+              <View style={dynamicStyles.separator} />
+              <View style={styles.actionSection}>
+                <Text className="text-sm font-semibold text-card-foreground dark:text-card-foreground">
+                  {actionText}
+                </Text>
+                <Text className="text-2xl text-primary dark:text-primary">
+                  ›
+                </Text>
+              </View>
+            </>
+          )}
+        </View>
+      </CustomCard>
+    </CardWrapper>
+  );
+}
+
+GreetingCard.displayName = 'GreetingCard';
+
+const styles = StyleSheet.create({
+  weatherIcon: {
+    width: 40,
+    height: 35,
+  },
+  contentWrapper: {
+    margin: -24, // Counteract CustomCard's default padding of 24
+  },
+  headerSection: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 16,
+  },
+  greetingText: {
+    flex: 1,
+  },
+  weatherContainer: {
+    marginLeft: 12,
+    alignItems: 'flex-end',
+  },
+  weatherRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  separator: {
+    height: 1,
+    marginVertical: 8,
+  },
+  actionSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    paddingTop: 4,
+  },
+});
+
+export { WEATHER_ICONS };

package/src/components/ui/Hover-Card.tsx

@@ -0,0 +1,101 @@
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as HoverCardPrimitive from '@rn-primitives/hover-card';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+/**
+ * Root component for hover card - provides context for trigger and content
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <HoverCard>
+ *   <HoverCardTrigger>
+ *     <Text>Hover over me</Text>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent>
+ *     <Text>Additional information appears here</Text>
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ */
+const HoverCard = HoverCardPrimitive.Root;
+
+/**
+ * Trigger component that shows hover card content on hover/press
+ *
+ * @component
+ */
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Content container for hover card
+ *
+ * Displays rich content in a popover when hovering over or pressing the trigger.
+ * Includes smooth fade animations and proper positioning.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <HoverCardContent align="center" sideOffset={8}>
+ *   <View className="gap-2">
+ *     <Text className="font-semibold">User Profile</Text>
+ *     <Text className="text-sm">Additional details about the user</Text>
+ *   </View>
+ * </HoverCardContent>
+ * ```
+ *
+ * @accessibility
+ * - Content is announced by screen readers
+ * - Proper focus management on web
+ */
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: HoverCardPrimitive.ContentProps &
+  React.RefAttributes<HoverCardPrimitive.ContentRef>) {
+  return (
+    <HoverCardPrimitive.Portal>
+      <FullWindowOverlay>
+        <HoverCardPrimitive.Overlay
+          style={Platform.select({ native: StyleSheet.absoluteFill })}
+        >
+          <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <HoverCardPrimitive.Content
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                  'bg-popover border-border outline-hidden z-50 w-64 rounded-md border p-4 shadow-md shadow-black/5',
+                  Platform.select({
+                    web: cn(
+                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-hover-card-content-transform-origin) cursor-default [&>*]:cursor-auto',
+                      props.side === 'bottom' && 'slide-in-from-top-2',
+                      props.side === 'top' && 'slide-in-from-bottom-2'
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </HoverCardPrimitive.Overlay>
+      </FullWindowOverlay>
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/src/components/ui/Icon.tsx

@@ -0,0 +1,75 @@
+import { cn } from '../../lib/utils';
+import type { LucideIcon, LucideProps } from 'lucide-react-native';
+import { cssInterop } from 'nativewind';
+
+/**
+ * Props for Icon component
+ *
+ * @extends LucideProps - All Lucide icon properties (size, color, strokeWidth, etc.)
+ * @property {LucideIcon} as - The Lucide icon component to render
+ * @property {string} [className] - Tailwind classes for styling (supports NativeWind)
+ *
+ * @example
+ * ```tsx
+ * import { Home } from 'lucide-react-native';
+ * <Icon as={Home} size={24} className="text-primary" />
+ * ```
+ */
+type IconProps = LucideProps & {
+  as: LucideIcon;
+  className?: string;
+};
+
+function IconImpl({ as: IconComponent, ...props }: IconProps) {
+  return <IconComponent {...props} />;
+}
+
+cssInterop(IconImpl, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: 'size',
+      width: 'size',
+    },
+  },
+});
+
+/**
+ * Universal icon wrapper for Lucide icons
+ *
+ * Provides consistent styling and sizing for Lucide React Native icons across the application.
+ * Automatically handles platform-specific sizing and color theming.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Settings, User, ChevronRight } from 'lucide-react-native';
+ *
+ * // Basic icon
+ * <Icon as={Settings} />
+ *
+ * // Sized icon with custom color
+ * <Icon as={User} size={32} className="text-primary" />
+ *
+ * // Icon with stroke width
+ * <Icon as={ChevronRight} size={20} strokeWidth={2.5} />
+ * ```
+ */
+function Icon({
+  as: IconComponent,
+  className,
+  size = 14,
+  ...props
+}: IconProps) {
+  return (
+    <IconImpl
+      as={IconComponent}
+      className={cn('text-foreground', className)}
+      size={size}
+      {...props}
+    />
+  );
+}
+
+export { Icon };
+export type { IconProps };