@campxdev/react-native-blueprint 0.1.14 → 0.1.16

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

@@ -1,471 +0,0 @@
-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 '../Input/Text/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 };