@uselingu/react-native-sdk 0.1.0

package/src/theme/theme.ts

@@ -0,0 +1,254 @@
+/**
+ * Theme Configuration
+ * Centralized design tokens for the SDK
+ * Colors are sourced from backend widget config
+ */
+
+export interface ThemeColors {
+   primary: string;
+   background: string;
+   text: string;
+   // Semantic colors
+   userBubble: string;
+   botBubble: string;
+   userText: string;
+   botText: string;
+   inputBackground: string;
+   inputBorder: string;
+   inputText: string;
+   headerBackground: string;
+   headerText: string;
+   errorBackground: string;
+   errorText: string;
+   badge: string;
+   loadingIndicator: string;
+   // Neutral colors
+   gray50: string;
+   gray100: string;
+   gray200: string;
+   gray300: string;
+   gray400: string;
+   gray500: string;
+   gray600: string;
+   gray700: string;
+   gray800: string;
+   gray900: string;
+}
+
+export interface Typography {
+   fontSizes: {
+      xs: number;
+      sm: number;
+      base: number;
+      lg: number;
+      xl: number;
+      '2xl': number;
+      '3xl': number;
+   };
+   fontWeights: {
+      normal: '400';
+      medium: '500';
+      semibold: '600';
+      bold: '700';
+   };
+   lineHeights: {
+      tight: number;
+      normal: number;
+      relaxed: number;
+   };
+}
+
+export interface Spacing {
+   xs: number;
+   sm: number;
+   md: number;
+   lg: number;
+   xl: number;
+   '2xl': number;
+   '3xl': number;
+}
+
+export interface BorderRadius {
+   sm: number;
+   md: number;
+   lg: number;
+   xl: number;
+   full: number;
+}
+
+export interface Shadows {
+   sm: {
+      shadowColor: string;
+      shadowOffset: { width: number; height: number };
+      shadowOpacity: number;
+      shadowRadius: number;
+      elevation: number;
+   };
+   md: {
+      shadowColor: string;
+      shadowOffset: { width: number; height: number };
+      shadowOpacity: number;
+      shadowRadius: number;
+      elevation: number;
+   };
+   lg: {
+      shadowColor: string;
+      shadowOffset: { width: number; height: number };
+      shadowOpacity: number;
+      shadowRadius: number;
+      elevation: number;
+   };
+}
+
+export interface AnimationDurations {
+   fast: number;
+   normal: number;
+   slow: number;
+}
+
+export interface Theme {
+   colors: ThemeColors;
+   typography: Typography;
+   spacing: Spacing;
+   borderRadius: BorderRadius;
+   shadows: Shadows;
+   animations: AnimationDurations;
+}
+
+// Default typography (constant across themes)
+export const defaultTypography: Typography = {
+   fontSizes: {
+      xs: 12,
+      sm: 14,
+      base: 15,
+      lg: 16,
+      xl: 18,
+      '2xl': 20,
+      '3xl': 24,
+   },
+   fontWeights: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+   },
+   lineHeights: {
+      tight: 1.2,
+      normal: 1.5,
+      relaxed: 1.75,
+   },
+};
+
+// Default spacing (constant across themes)
+export const defaultSpacing: Spacing = {
+   xs: 4,
+   sm: 8,
+   md: 12,
+   lg: 16,
+   xl: 20,
+   '2xl': 24,
+   '3xl': 32,
+};
+
+// Default border radius (constant across themes)
+export const defaultBorderRadius: BorderRadius = {
+   sm: 4,
+   md: 8,
+   lg: 12,
+   xl: 16,
+   full: 9999,
+};
+
+// Default shadows (constant across themes)
+export const defaultShadows: Shadows = {
+   sm: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 2,
+   },
+   md: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.15,
+      shadowRadius: 4,
+      elevation: 4,
+   },
+   lg: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 8,
+      elevation: 8,
+   },
+};
+
+// Default animation durations (constant across themes)
+export const defaultAnimations: AnimationDurations = {
+   fast: 150,
+   normal: 300,
+   slow: 500,
+};
+
+/**
+ * Create theme colors from backend widget config
+ */
+export const createThemeColors = (
+   primaryColor: string,
+   backgroundColor: string,
+   textColor: string,
+   theme: 'light' | 'dark' = 'light'
+): ThemeColors => {
+   const isLight = theme === 'light';
+
+   return {
+      primary: primaryColor,
+      background: backgroundColor,
+      text: textColor,
+      // Semantic colors
+      userBubble: primaryColor,
+      botBubble: isLight ? '#ffffff' : '#2d3748',
+      userText: '#ffffff',
+      botText: isLight ? '#1f2937' : '#f9fafb',
+      inputBackground: isLight ? '#f9fafb' : '#2d3748',
+      inputBorder: isLight ? '#e5e7eb' : '#4a5568',
+      inputText: isLight ? '#1f2937' : '#f9fafb',
+      headerBackground: primaryColor,
+      headerText: '#ffffff',
+      errorBackground: '#fef2f2',
+      errorText: '#991b1b',
+      badge: '#ef4444',
+      loadingIndicator: primaryColor,
+      // Neutral colors
+      gray50: '#f9fafb',
+      gray100: '#f3f4f6',
+      gray200: '#e5e7eb',
+      gray300: '#d1d5db',
+      gray400: '#9ca3af',
+      gray500: '#6b7280',
+      gray600: '#4b5563',
+      gray700: '#374151',
+      gray800: '#1f2937',
+      gray900: '#111827',
+   };
+};
+
+/**
+ * Create complete theme from backend widget config
+ */
+export const createTheme = (
+   primaryColor: string = '#4ade80',
+   backgroundColor: string = '#ffffff',
+   textColor: string = '#1f2937',
+   themeMode: 'light' | 'dark' = 'light'
+): Theme => {
+   return {
+      colors: createThemeColors(primaryColor, backgroundColor, textColor, themeMode),
+      typography: defaultTypography,
+      spacing: defaultSpacing,
+      borderRadius: defaultBorderRadius,
+      shadows: defaultShadows,
+      animations: defaultAnimations,
+   };
+};

package/src/types/index.ts

@@ -0,0 +1,59 @@
+/**
+ * Core types for Lingu React Native SDK
+ */
+
+export interface LinguConfig {
+   apiKey: string;
+   baseURL?: string;
+   autoOpen?: boolean;
+   onSessionStart?: (sessionId: string) => void;
+   onSessionEnd?: (sessionId: string) => void;
+   onMessageSent?: (message: string) => void;
+   onMessageReceived?: (message: string) => void;
+}
+
+export type ChatPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+export type MessageSender = 'user' | 'bot';
+
+export interface Message {
+   id: string;
+   text: string;
+   sender: MessageSender;
+   timestamp: Date;
+}
+
+export interface WidgetConfig {
+   widgetPosition: ChatPosition;
+   widgetSize: 'small' | 'medium' | 'large';
+   theme: ThemeMode;
+   primaryColor: string;
+   backgroundColor: string;
+   textColor: string;
+   brandName?: string;
+   brandLogo?: string;
+   greetingMessage: string;
+}
+
+export interface SessionData {
+   sessionId: string;
+   startedAt: Date;
+   lastActivity: Date;
+}
+
+export interface ApiResponse<T> {
+   success: boolean;
+   data: T;
+   error?: string;
+}
+
+export interface ChatResponse {
+   message: string;
+   context?: any[];
+}
+
+export interface SessionResponse {
+   sessionId: string;
+}

package/src/utils/animations.ts

@@ -0,0 +1,141 @@
+/**
+ * Animation Utilities
+ * Reusable animation functions for SDK components
+ */
+
+import { Animated, Easing } from 'react-native';
+
+/**
+ * Fade in animation
+ */
+export const fadeIn = (
+   animatedValue: Animated.Value,
+   duration: number = 300,
+   toValue: number = 1
+): Animated.CompositeAnimation => {
+   return Animated.timing(animatedValue, {
+      toValue,
+      duration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+   });
+};
+
+/**
+ * Fade out animation
+ */
+export const fadeOut = (
+   animatedValue: Animated.Value,
+   duration: number = 300,
+   toValue: number = 0
+): Animated.CompositeAnimation => {
+   return Animated.timing(animatedValue, {
+      toValue,
+      duration,
+      easing: Easing.in(Easing.ease),
+      useNativeDriver: true,
+   });
+};
+
+/**
+ * Slide up animation (for messages)
+ */
+export const slideUp = (
+   animatedValue: Animated.Value,
+   duration: number = 300
+): Animated.CompositeAnimation => {
+   return Animated.timing(animatedValue, {
+      toValue: 0,
+      duration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+   });
+};
+
+/**
+ * Scale animation (for FAB entrance)
+ */
+export const scaleIn = (
+   animatedValue: Animated.Value
+): Animated.CompositeAnimation => {
+   return Animated.spring(animatedValue, {
+      toValue: 1,
+      friction: 8,
+      tension: 40,
+      useNativeDriver: true,
+   });
+};
+
+/**
+ * Pulse animation (for unread badge on FAB)
+ */
+export const pulse = (
+   animatedValue: Animated.Value
+): Animated.CompositeAnimation => {
+   return Animated.loop(
+      Animated.sequence([
+         Animated.timing(animatedValue, {
+            toValue: 1.2,
+            duration: 500,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+         }),
+         Animated.timing(animatedValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+         }),
+      ])
+   );
+};
+
+/**
+ * Typing indicator animation (for the dots)
+ */
+export const typingDotAnimation = (
+   animatedValue: Animated.Value,
+   delay: number = 0
+): Animated.CompositeAnimation => {
+   return Animated.loop(
+      Animated.sequence([
+         Animated.delay(delay),
+         Animated.timing(animatedValue, {
+            toValue: -8,
+            duration: 400,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+         }),
+         Animated.timing(animatedValue, {
+            toValue: 0,
+            duration: 400,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+         }),
+      ])
+   );
+};
+
+/**
+ * Message entrance animation (slide up + fade in)
+ */
+export const messageEntrance = (
+   translateY: Animated.Value,
+   opacity: Animated.Value,
+   duration: number = 300
+): Animated.CompositeAnimation => {
+   return Animated.parallel([
+      Animated.timing(translateY, {
+         toValue: 0,
+         duration,
+         easing: Easing.out(Easing.cubic),
+         useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+         toValue: 1,
+         duration,
+         easing: Easing.out(Easing.ease),
+         useNativeDriver: true,
+      }),
+   ]);
+};

package/src/utils/formatters.ts

@@ -0,0 +1,80 @@
+/**
+ * Formatting Utilities
+ * Helper functions for formatting data in the SDK
+ */
+
+/**
+ * Format a date to relative time (e.g., "just now", "2m ago", "1h ago")
+ */
+export const formatRelativeTime = (date: Date): string => {
+   const now = new Date();
+   const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+   if (diffInSeconds < 10) {
+      return 'just now';
+   }
+
+   if (diffInSeconds < 60) {
+      return `${diffInSeconds}s ago`;
+   }
+
+   const diffInMinutes = Math.floor(diffInSeconds / 60);
+   if (diffInMinutes < 60) {
+      return `${diffInMinutes}m ago`;
+   }
+
+   const diffInHours = Math.floor(diffInMinutes / 60);
+   if (diffInHours < 24) {
+      return `${diffInHours}h ago`;
+   }
+
+   const diffInDays = Math.floor(diffInHours / 24);
+   if (diffInDays < 7) {
+      return `${diffInDays}d ago`;
+   }
+
+   // For dates older than a week, show the actual date
+   return date.toLocaleDateString();
+};
+
+/**
+ * Format time for display (e.g., "2:30 PM")
+ */
+export const formatTime = (date: Date): string => {
+   return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+};
+
+/**
+ * Truncate text with ellipsis
+ */
+export const truncate = (text: string, maxLength: number): string => {
+   if (text.length <= maxLength) {
+      return text;
+   }
+   return text.substring(0, maxLength - 3) + '...';
+};
+
+/**
+ * Check if a color is light or dark (for text contrast)
+ */
+export const isLightColor = (color: string): boolean => {
+   // Remove # if present
+   const hex = color.replace('#', '');
+
+   // Convert to RGB
+   const r = parseInt(hex.substring(0, 2), 16);
+   const g = parseInt(hex.substring(2, 4), 16);
+   const b = parseInt(hex.substring(4, 6), 16);
+
+   // Calculate luminance
+   const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+   return luminance > 0.5;
+};
+
+/**
+ * Get contrasting text color for a background
+ */
+export const getContrastingColor = (backgroundColor: string): string => {
+   return isLightColor(backgroundColor) ? '#000000' : '#ffffff';
+};

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Utilities exports
+ */
+
+export * from './animations';
+export * from './formatters';