vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/components/ui/date-time-picker.tsx

@@ -0,0 +1,268 @@
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import React, { useMemo, useState } from 'react';
+import {
+  Platform,
+  Text,
+  type TextStyle,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { Icon } from './extras/icon';
+
+type Mode = 'date' | 'time' | 'datetime';
+
+export type DateTimePickerProps = {
+  label?: string;
+  error?: boolean | string;
+  placeholder?: string;
+  disabled?: boolean;
+  style?: ViewStyle;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  timeFormat?: '12' | '24';
+  variant?: 'filled' | 'outline' | 'group';
+  labelStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  mode?: Mode;
+  value?: Date | null;
+  onChange: (date: Date) => void;
+};
+
+export const DateTimePickerComponent = ({
+  label,
+  error,
+  placeholder = 'Select date',
+  disabled = false,
+  style,
+  minimumDate,
+  maximumDate,
+  timeFormat = '24',
+  variant = 'filled',
+  labelStyle,
+  // errorStyle is not used
+  mode = 'date',
+  value,
+  onChange,
+}: DateTimePickerProps) => {
+  const theme = useThemeConfig();
+  const cardColor = theme.colors.card;
+  const borderColor = theme.colors.border;
+  const textColor = theme.colors.text;
+  const textMutedColor = theme.colors.mutedForeground;
+  const errorColor = theme.colors.destructive;
+
+  const [showPicker, setShowPicker] = useState(false);
+  const [iosDate, setIosDate] = useState(value ?? new Date());
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    if (Platform.OS === 'android') {
+      const base = value ?? new Date();
+      const common = {
+        value: base,
+        minimumDate,
+        maximumDate,
+        is24Hour: timeFormat === '24',
+      } as const;
+
+      if (mode === 'datetime') {
+        DateTimePickerAndroid.open({
+          ...common,
+          mode: 'date',
+          onChange: (e1, d1) => {
+            if (e1.type !== 'set' || !d1) return;
+            DateTimePickerAndroid.open({
+              ...common,
+              value: d1,
+              mode: 'time',
+              onChange: (e2, d2) => {
+                if (e2.type !== 'set' || !d2) return;
+                const combined = new Date(d1);
+                combined.setHours(d2.getHours(), d2.getMinutes(), 0, 0);
+                onChange(combined);
+              },
+            });
+          },
+        });
+      } else {
+        DateTimePickerAndroid.open({
+          ...common,
+          mode,
+          onChange: (e, d) => {
+            if (e.type === 'set' && d) onChange(d);
+          },
+        });
+      }
+      return;
+    }
+
+    // For iOS
+    setIosDate(value ?? new Date());
+    setShowPicker(true);
+  };
+
+  const displayText = useMemo(() => {
+    if (!value) return placeholder;
+    switch (mode) {
+      case 'time':
+        return value.toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: timeFormat === '12',
+        });
+      case 'datetime': {
+        const d = value.toLocaleDateString();
+        const t = value.toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: timeFormat === '12',
+        });
+        return `${d} ${t}`;
+      }
+      default:
+        return value.toLocaleDateString();
+    }
+  }, [mode, placeholder, timeFormat, value]);
+
+  const triggerStyle: ViewStyle = {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: variant === 'group' ? 0 : 16,
+    borderWidth: variant === 'group' ? 0 : 1,
+    borderColor: variant === 'outline' ? borderColor : cardColor,
+    borderRadius: 8,
+    backgroundColor: variant === 'filled' ? cardColor : 'transparent',
+    minHeight: 44,
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[triggerStyle, disabled && { opacity: 0.5 }, style]}
+        onPress={handlePress}
+        disabled={disabled}
+      >
+        <View
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+          }}
+        >
+          <View
+            style={{
+              width: label ? 120 : 'auto',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            {mode === 'time' ? (
+              <Icon name="time" size={20} />
+            ) : (
+              <Icon name="calendar" size={20} />
+            )}
+            {label ? (
+              <View style={{ flex: 1 }}>
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={[
+                    {
+                      color: error ? errorColor : textMutedColor,
+                      fontSize: 12,
+                      fontWeight: '500',
+                    },
+                    labelStyle,
+                  ]}
+                >
+                  {label}
+                </Text>
+              </View>
+            ) : null}
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={{
+                color: value ? textColor : textMutedColor,
+                fontSize: 14,
+              }}
+            >
+              {displayText}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      {Platform.OS === 'ios' && showPicker && (
+        <View
+          style={{
+            backgroundColor: cardColor,
+            borderWidth: 1,
+            borderColor: borderColor,
+            borderRadius: 8,
+            marginTop: 8,
+            padding: 16,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: 16,
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setShowPicker(false)}
+              style={{ padding: 4 }}
+            >
+              <Text style={{ color: textColor, fontSize: 16 }}>Cancel</Text>
+            </TouchableOpacity>
+            <Text style={{ color: textColor, fontWeight: '600', fontSize: 16 }}>
+              Select
+            </Text>
+            <TouchableOpacity
+              onPress={() => {
+                onChange(iosDate);
+                setShowPicker(false);
+              }}
+              style={{ padding: 4 }}
+            >
+              <Text style={{ color: textColor, fontSize: 16 }}>Done</Text>
+            </TouchableOpacity>
+          </View>
+
+          <DateTimePicker
+            testID="dateTimePicker-ios"
+            value={iosDate}
+            mode={mode}
+            is24Hour={timeFormat === '24'}
+            display="spinner"
+            onChange={(e, d) => {
+              if (d) setIosDate(d);
+            }}
+            minimumDate={minimumDate}
+            maximumDate={maximumDate}
+            style={{ height: 216 }}
+            textColor={textColor}
+            themeVariant={theme.dark ? 'dark' : 'light'}
+          />
+        </View>
+      )}
+    </>
+  );
+};
+
+export default DateTimePickerComponent;

package/2/apps/native/src/components/ui/debug.ts

@@ -0,0 +1,2 @@
+export { DebugCreditTester } from './extras/debug-credit-tester';
+export { DebugMMKVState } from './extras/debug-mmkv-state';

package/2/apps/native/src/components/ui/extras/debug-credit-tester.tsx

@@ -0,0 +1,107 @@
+import { api } from '@vibefast/backend/_generated/api';
+import { useAction } from 'convex/react';
+import { useState } from 'react';
+import { View } from 'react-native';
+
+import { useDeviceIdentifier } from '@/lib/hooks';
+
+import { Button } from '../core/button';
+import { Text } from '../core/text';
+
+/**
+ * Debug component to test the credit grant system
+ * Remove this component when the credit system is working properly
+ */
+export const DebugCreditTester = () => {
+  const deviceId = useDeviceIdentifier();
+  const debugUserStatus = useAction(api.grantFunctions.debugUserStatus);
+  const checkAndGrantCredits = useAction(
+    api.grantFunctions.checkAndGrantInitialTier,
+  );
+  const [debugResult, setDebugResult] = useState<any>(null);
+  const [grantResult, setGrantResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleDebugStatus = async () => {
+    if (!deviceId) return;
+
+    setLoading(true);
+    try {
+      const result = await debugUserStatus({ deviceId });
+      setDebugResult(result);
+      console.log('[DebugCreditTester] Debug result:', result);
+    } catch (error) {
+      console.error('[DebugCreditTester] Debug error:', error);
+      setDebugResult({
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGrantCredits = async () => {
+    if (!deviceId) return;
+
+    setLoading(true);
+    try {
+      const result = await checkAndGrantCredits({ deviceId });
+      setGrantResult(result);
+      console.log('[DebugCreditTester] Grant result:', result);
+    } catch (error) {
+      console.error('[DebugCreditTester] Grant error:', error);
+      setGrantResult({
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View className="m-4 rounded-lg bg-yellow-100 p-4">
+      <Text className="mb-2 text-lg font-bold">🐛 Credit Debug Tester</Text>
+      <Text className="mb-2 text-sm">
+        Device ID: {deviceId || 'Loading...'}
+      </Text>
+
+      <View className="mb-4 gap-2">
+        <Button
+          onPress={handleDebugStatus}
+          disabled={!deviceId || loading}
+          variant="outline"
+          size="sm"
+        >
+          <Text>Check User Status</Text>
+        </Button>
+
+        <Button
+          onPress={handleGrantCredits}
+          disabled={!deviceId || loading}
+          variant="outline"
+          size="sm"
+        >
+          <Text>Grant Credits</Text>
+        </Button>
+      </View>
+
+      {debugResult && (
+        <View className="mb-2">
+          <Text className="font-semibold">Debug Status:</Text>
+          <Text className="font-mono text-xs">
+            {JSON.stringify(debugResult, null, 2)}
+          </Text>
+        </View>
+      )}
+
+      {grantResult && (
+        <View>
+          <Text className="font-semibold">Grant Result:</Text>
+          <Text className="font-mono text-xs">
+            {JSON.stringify(grantResult, null, 2)}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};

package/2/apps/native/src/components/ui/extras/debug-mmkv-state.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+import { storage } from '@/core/storage';
+
+import { Text } from '../core/text';
+
+/**
+ * Debug component to display MMKV storage state
+ * Only renders in development mode
+ */
+export const DebugMMKVState = () => {
+  const [mmkvState, setMmkvState] = useState<{
+    IS_FIRST_TIME?: boolean;
+    SELECTED_THEME?: string;
+    allKeys?: string[];
+  }>({});
+
+  useEffect(() => {
+    if (__DEV__) {
+      const interval = setInterval(() => {
+        try {
+          const state = {
+            IS_FIRST_TIME: storage.getBoolean('IS_FIRST_TIME'),
+            SELECTED_THEME: storage.getString('SELECTED_THEME'),
+            allKeys: storage.getAllKeys(),
+          };
+          setMmkvState(state);
+        } catch (error) {
+          console.warn('Error reading MMKV state:', error);
+        }
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, []);
+
+  if (!__DEV__) {
+    return null;
+  }
+
+  return (
+    <View className="absolute inset-x-0 bottom-0 bg-black/80 p-2">
+      <Text className="text-xs text-white">MMKV Debug:</Text>
+      <Text className="text-xs text-white">
+        IS_FIRST_TIME: {String(mmkvState.IS_FIRST_TIME)}
+      </Text>
+      <Text className="text-xs text-white">
+        Keys: {mmkvState.allKeys?.join(', ') || 'none'}
+      </Text>
+    </View>
+  );
+};

package/2/apps/native/src/components/ui/extras/handle-error.ts

@@ -0,0 +1,191 @@
+import { toast } from 'sonner-native';
+
+import {
+  error as logError,
+  info as logInfo,
+  warn as logWarn,
+} from '@/core/logging';
+import { translate } from '@/lib/i18n';
+
+import { extractError } from '../utils';
+
+type Level = 'error' | 'warning' | 'info' | 'success';
+
+type HandleErrorOptions = {
+  feature?: string; // e.g. 'auth.login'
+  code?: string | number;
+  toast?: boolean; // show a toast by default
+  level?: Level; // severity for toast + logging
+  fallbackMessage?: string; // message to show if error has no message
+  dedupeMs?: number; // suppress repeated identical messages within this window
+  extra?: Record<string, unknown>; // extra context for logging only
+};
+
+// In-memory dedupe store: key -> lastShownAt
+const lastShown = new Map<string, number>();
+
+function levelToToastType(
+  level: Level,
+): 'error' | 'warning' | 'info' | 'success' {
+  switch (level) {
+    case 'error':
+      return 'error';
+    case 'warning':
+      return 'warning';
+    case 'success':
+      return 'success';
+    default:
+      return 'info';
+  }
+}
+
+function log(
+  level: Level,
+  messageOrError: string | Error,
+  context?: Record<string, unknown>,
+) {
+  const safeContext = context ? { ...context } : undefined;
+  // route to core logger; error accepts Error | string
+  if (level === 'error') {
+    logError(messageOrError, safeContext);
+  } else if (level === 'warning') {
+    const msg =
+      messageOrError instanceof Error ? messageOrError.message : messageOrError;
+    logWarn(msg, safeContext);
+  } else {
+    const msg =
+      messageOrError instanceof Error ? messageOrError.message : messageOrError;
+    logInfo(msg, safeContext);
+  }
+}
+
+export function handleError(
+  err: unknown,
+  opts: HandleErrorOptions = {},
+): { message: string; shown: boolean; deduped: boolean } {
+  const {
+    feature,
+    code,
+    toast: showToast = true,
+    level = 'error',
+    fallbackMessage = translate('common.default_error'),
+    dedupeMs = 3000,
+    extra,
+  } = opts;
+
+  // Derive raw message
+  let message: string | undefined;
+  if (typeof err === 'string') message = err;
+  else if (
+    err &&
+    typeof err === 'object' &&
+    'message' in (err as any) &&
+    typeof (err as any).message === 'string'
+  )
+    message = (err as any).message as string;
+  else message = extractError(err) || fallbackMessage;
+
+  // Sanitize technical messages for end users (localized)
+  const sanitize = (raw: string, fallback: string): string => {
+    let s = raw || '';
+
+    // Enhanced technical noise removal
+    s = s
+      .replace(/^\s*Error:\s*/i, '')
+      .replace(/\[[^\]]+\]/g, '') // remove ALL bracketed content including [CONVEX ...], [Request ID ...]
+      .replace(/Request ID:[^\n]+/i, '')
+      .replace(/Server Error/i, '')
+      .replace(/Uncaught Error:/i, '')
+      .replace(/convex error:/i, '')
+      .replace(
+        /\b[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b/gi,
+        '',
+      ) // remove UUIDs
+      .replace(/\bhttps?:\/\/[^\s]+\b/gi, '') // remove URLs
+      .replace(/\bfile:\/+[^\s]+\b/gi, '') // remove file paths
+      .split('\n')[0]
+      .trim();
+
+    const lower = s.toLowerCase();
+
+    // Enhanced authentication error mappings
+    if (/(already exists|email.*exists|account.*exists)/i.test(s))
+      return translate('auth.signup.email_exists');
+    if (/invalid.*account|InvalidAccountId/i.test(s))
+      return translate('auth.login.invalid_account');
+    if (
+      /invalid credentials|wrong password|unauthorized|auth\.signIn/i.test(
+        lower,
+      )
+    )
+      return translate('auth.login.login_failed');
+    if (
+      /invalid.*token|expired.*token|token.*expired|token.*invalid/i.test(lower)
+    )
+      return translate('auth.reset_password.invalid_token');
+    if (
+      /invalid.*otp|invalid.*code|code.*invalid|verification.*code/i.test(lower)
+    )
+      return translate('auth.otp_verification.invalid_code');
+    if (/too many requests|rate limit|request.*limit/i.test(lower))
+      return translate('common.too_many_requests');
+    if (
+      /network request failed|network error|failed to fetch|fetch.*error/i.test(
+        lower,
+      )
+    )
+      return translate('common.network_error');
+    if (/timeout|timed out/i.test(lower)) return translate('common.timeout');
+    if (/permission.*denied|access.*denied/i.test(lower))
+      return translate('common.permission_denied');
+    if (/not found|resource.*not found/i.test(lower))
+      return translate('common.not_found');
+    if (/cancel|cancelled/i.test(lower)) return translate('common.canceled');
+    if (/server.*error|500|internal.*error/i.test(lower))
+      return translate('common.server_error');
+
+    // Enhanced technical content detection
+    if (s.length > 100) return fallback; // Reduced threshold for longer messages
+    if (/\/node_modules\/|\.js:|\.tsx:| at\s+|function|class|object/i.test(raw))
+      return fallback;
+    if (/[{}()\[\]]/.test(s) && s.length > 30) return fallback; // Likely code/JSON
+    if (/[a-f0-9]{32,}/i.test(s)) return fallback; // Likely hashes/IDs
+
+    // Return sanitized or fallback
+    return s || fallback;
+  };
+
+  const userMessage = sanitize(message || '', fallbackMessage);
+
+  // Log structured context
+  // If we have an Error, preserve it for stack capture by transports
+  const originalIsError = err instanceof Error;
+
+  log(level, originalIsError ? (err as Error) : message || fallbackMessage, {
+    feature,
+    code,
+    ...extra,
+  });
+
+  // Dedupe identical messages for a short window
+  const key = `${level}:${feature ?? 'global'}:${userMessage}`;
+  const now = Date.now();
+  const last = lastShown.get(key) ?? 0;
+  const deduped = now - last < dedupeMs;
+
+  let shown = false;
+  if (showToast && !deduped) {
+    const t = levelToToastType(level);
+    const text = userMessage || fallbackMessage;
+    if (t === 'success') toast.success(text);
+    else if (t === 'warning') toast.warning(text);
+    else if (t === 'info') toast.info(text);
+    else toast.error(text);
+    lastShown.set(key, now);
+    shown = true;
+  }
+
+  return { message: userMessage || fallbackMessage, shown, deduped };
+}
+
+export default handleError;

package/2/apps/native/src/components/ui/extras/hello-wave.tsx

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+interface HelloWaveProps {
+  size?: 'sm' | 'md' | 'lg';
+  children?: React.ReactNode;
+}
+
+const sizeVariants = {
+  sm: {
+    fontSize: 20,
+    lineHeight: 24,
+    marginTop: -4,
+  },
+  md: {
+    fontSize: 28,
+    lineHeight: 32,
+    marginTop: -6,
+  },
+  lg: {
+    fontSize: 36,
+    lineHeight: 40,
+    marginTop: -8,
+  },
+};
+
+export function HelloWave({ children = '👋', size = 'md' }: HelloWaveProps) {
+  const rotationAnimation = useSharedValue(0);
+
+  useEffect(() => {
+    rotationAnimation.value = withRepeat(
+      withSequence(
+        withTiming(25, { duration: 150 }),
+        withTiming(0, { duration: 150 }),
+      ),
+      4, // Run the animation 4 times
+    );
+  }, [rotationAnimation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        rotate: `${rotationAnimation.value}deg`,
+      },
+    ],
+  }));
+
+  const sizeStyle = sizeVariants[size];
+
+  return (
+    <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Animated.View style={animatedStyle}>
+        {typeof children === 'string' ? (
+          <Text style={sizeStyle}>{children}</Text>
+        ) : (
+          children
+        )}
+      </Animated.View>
+    </View>
+  );
+}