vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/components/ui/extras/icon.tsx

@@ -0,0 +1,36 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import type { AccessibilityProps } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export type Props = {
+  name: keyof typeof Ionicons.glyphMap;
+  size?: number;
+  color?: string;
+  lightColor?: string;
+  darkColor?: string;
+  testID?: string;
+} & AccessibilityProps;
+
+export function Icon({
+  lightColor,
+  darkColor,
+  name,
+  color,
+  size = 24,
+  testID,
+  ...rest
+}: Props) {
+  const theme = useThemeConfig();
+
+  return (
+    <Ionicons
+      name={name}
+      color={color || theme.colors.foreground}
+      size={size}
+      testID={testID}
+      {...rest}
+    />
+  );
+}

package/2/apps/native/src/components/ui/extras/network-connectivity-wrapper.tsx

@@ -0,0 +1,36 @@
+import { useNetInfoInstance } from '@react-native-community/netinfo';
+import type React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { OfflineIndicator } from './offline-indicator';
+
+type Props = { children: React.ReactNode };
+
+export function NetworkConnectivityWrapper({ children }: Props) {
+  const { netInfo, refresh } = useNetInfoInstance();
+  const isOffline = netInfo.isInternetReachable === false;
+
+  return (
+    <View style={styles.container}>
+      <View style={isOffline ? styles.dimmed : styles.normal}>{children}</View>
+
+      {isOffline && (
+        <View style={styles.overlay} pointerEvents="box-none">
+          <OfflineIndicator onRetry={refresh} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 }, // guarantees full-screen
+  normal: { flex: 1, opacity: 1 },
+  dimmed: { flex: 1, opacity: 0.3 },
+  overlay: {
+    ...StyleSheet.absoluteFillObject, // covers the whole screen
+    justifyContent: 'flex-start', // banner sits at the top
+    alignItems: 'stretch',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+});

package/2/apps/native/src/components/ui/extras/offline-indicator.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../core/button';
+import { Text } from '../core/text';
+import { WifiOff } from '../icons';
+
+type OfflineIndicatorProps = {
+  onRetry: () => void;
+};
+
+/**
+ * OfflineIndicator component that displays when the device is offline
+ * Shows a clear message and retry button for network connectivity issues
+ */
+export function OfflineIndicator({ onRetry }: OfflineIndicatorProps) {
+  return (
+    <View
+      className="flex-1 items-center justify-center px-6"
+      accessibilityRole="text"
+      accessibilityLabel="No internet connection. Please check your network connection and try again."
+    >
+      <View className="items-center gap-4">
+        <WifiOff
+          width={64}
+          height={64}
+          color="#9CA3AF"
+          accessibilityRole="image"
+          accessibilityLabel="No connection icon"
+        />
+
+        <View className="items-center gap-2">
+          <Text className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+            No Internet Connection
+          </Text>
+
+          <Text className="max-w-sm text-center text-base text-neutral-600 dark:text-neutral-400">
+            An internet connection is required to use this feature. Please check
+            your connection and try again.
+          </Text>
+        </View>
+
+        <Button
+          label="Retry"
+          onPress={onRetry}
+          variant="outline"
+          size="default"
+          testID="offline-retry-button"
+          accessibilityLabel="Retry connecting to the internet"
+          accessibilityHint="Tap to check network connection again"
+        />
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/components/ui/extras/social-login-buttons.tsx

@@ -0,0 +1,296 @@
+import { useAuthActions } from '@convex-dev/auth/react';
+import { Env } from '@env';
+import { makeRedirectUri } from 'expo-auth-session';
+import { useRouter } from 'expo-router';
+import * as WebBrowser from 'expo-web-browser';
+import React, { useState } from 'react';
+// Import View from react-native directly to avoid cycle
+import { View } from 'react-native';
+
+import { Button } from '@/components/ui/core/button';
+import { Text } from '@/components/ui/core/text';
+// Import icons directly to avoid circular dependency
+import { Apple } from '@/components/ui/icons/apple';
+import { Github } from '@/components/ui/icons/github';
+import { Google } from '@/components/ui/icons/google';
+import { useToast } from '@/components/ui/utils';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { handleError } from './handle-error';
+
+interface SocialLoginButtonsProps {
+  disabled?: boolean;
+}
+
+/**
+ * Google Sign-In Button Component
+ */
+export const GoogleSignInButton = ({
+  disabled = false,
+}: {
+  disabled?: boolean;
+}) => {
+  const router = useRouter();
+  const { signIn } = useAuthActions();
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+
+  const handleGoogleSignIn = async () => {
+    setLoading(true);
+    try {
+      // Step 1: Get the redirect URL from Convex Auth
+      const redirectTo = makeRedirectUri({
+        scheme: Env.SCHEME,
+      });
+      const { redirect } = await signIn('google', { redirectTo });
+
+      if (!redirect) {
+        throw new Error('No redirect URL received from auth provider');
+      }
+
+      // Step 2: Open the browser for OAuth flow
+      const authResult = await WebBrowser.openAuthSessionAsync(
+        redirect.toString(),
+        redirectTo,
+      );
+      console.log('👉 authResult:', authResult);
+      // Step 3: Handle the result
+      if (authResult.type === 'success') {
+        // Extract code from the callback URL
+        if (!authResult.url) {
+          throw new Error('No callback URL received');
+        }
+
+        const url = new URL(authResult.url);
+        const code = url.searchParams.get('code');
+
+        if (code) {
+          // Step 4: Complete authentication with the code
+          await signIn('google', { code });
+          toast.success('Successfully signed in with Google!');
+          router.replace('/(protected)/(tabs)');
+        } else {
+          throw new Error('No authorization code received');
+        }
+      } else if (authResult.type === 'cancel') {
+        toast.info('Google sign-in was cancelled');
+      } else {
+        throw new Error('Authentication failed');
+      }
+    } catch (error) {
+      handleError(error, {
+        feature: 'auth.google_signin',
+        fallbackMessage: 'Google sign-in failed',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      testID="google-signin-button"
+      variant="outline"
+      onPress={handleGoogleSignIn}
+      loading={loading}
+      disabled={disabled || loading}
+    >
+      <View className="flex-row items-center justify-center gap-x-2">
+        {!loading && <Google width={18} height={18} />}
+        <Text className="text-lg font-semibold text-neutral-700">
+          Sign in with Google
+        </Text>
+      </View>
+    </Button>
+  );
+};
+
+/**
+ * Apple Sign-In Button Component
+ */
+export const AppleSignInButton = ({
+  disabled = false,
+}: {
+  disabled?: boolean;
+}) => {
+  const router = useRouter();
+  const { signIn } = useAuthActions();
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+  const theme = useThemeConfig();
+
+  const handleAppleSignIn = async () => {
+    setLoading(true);
+    try {
+      // Step 1: Get the redirect URL from Convex Auth
+      const redirectTo = makeRedirectUri({
+        scheme: Env.SCHEME,
+      });
+      const { redirect } = await signIn('apple', { redirectTo });
+
+      if (!redirect) {
+        throw new Error('No redirect URL received from auth provider');
+      }
+
+      // Step 2: Open the browser for OAuth flow
+      const authResult = await WebBrowser.openAuthSessionAsync(
+        redirect.toString(),
+        redirectTo,
+      );
+
+      // Step 3: Handle the result
+      if (authResult.type === 'success') {
+        // Extract code from the callback URL
+        if (!authResult.url) {
+          throw new Error('No callback URL received');
+        }
+
+        const url = new URL(authResult.url);
+        const code = url.searchParams.get('code');
+
+        if (code) {
+          // Step 4: Complete authentication with the code
+          await signIn('apple', { code });
+          toast.success('Successfully signed in with Apple!');
+          router.replace('/(protected)/(tabs)');
+        } else {
+          throw new Error('No authorization code received');
+        }
+      } else if (authResult.type === 'cancel') {
+        toast.info('Apple sign-in was cancelled');
+      } else {
+        throw new Error('Authentication failed');
+      }
+    } catch (error) {
+      handleError(error, {
+        feature: 'auth.apple_signin',
+        fallbackMessage: 'Apple sign-in failed',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      testID="apple-signin-button"
+      variant="outline"
+      onPress={handleAppleSignIn}
+      loading={loading}
+      disabled={disabled || loading}
+    >
+      <View className="flex-row items-center justify-center gap-x-2">
+        {!loading && (
+          <Apple width={22} height={22} color={theme.colors.foreground} />
+        )}
+        <Text className="text-lg font-semibold text-neutral-700">
+          Sign in with Apple
+        </Text>
+      </View>
+    </Button>
+  );
+};
+
+/**
+ * GitHub Sign-In Button Component
+ */
+export const GitHubSignInButton = ({
+  disabled = false,
+}: {
+  disabled?: boolean;
+}) => {
+  const router = useRouter();
+  const { signIn } = useAuthActions();
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+  const theme = useThemeConfig();
+  const handleGitHubSignIn = async () => {
+    setLoading(true);
+    try {
+      // Step 1: Get the redirect URL from Convex Auth
+      const redirectTo = makeRedirectUri();
+      const result = await signIn('github', { redirectTo });
+
+      if (!result || !result.redirect) {
+        throw new Error('No redirect URL received from auth provider');
+      }
+
+      // Step 2: Open the browser for OAuth flow
+      const authResult = await WebBrowser.openAuthSessionAsync(
+        result.redirect.toString(),
+        redirectTo,
+      );
+
+      // Step 3: Handle the result
+      if (authResult.type === 'success') {
+        // Extract code from the callback URL
+        if (!authResult.url) {
+          throw new Error('No callback URL received');
+        }
+
+        const url = new URL(authResult.url);
+        const code = url.searchParams.get('code');
+
+        if (code) {
+          // Step 4: Complete authentication with the code
+          await signIn('github', { code });
+          toast.success('Successfully signed in with GitHub!');
+          router.replace('/(protected)/(tabs)');
+        } else {
+          throw new Error('No authorization code received');
+        }
+      } else if (authResult.type === 'cancel') {
+        toast.info('GitHub sign-in was cancelled');
+      } else {
+        throw new Error('Authentication failed');
+      }
+    } catch (error) {
+      handleError(error, {
+        feature: 'auth.github_signin',
+        fallbackMessage: 'GitHub sign-in failed',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      testID="github-signin-button"
+      variant="outline"
+      onPress={handleGitHubSignIn}
+      loading={loading}
+      disabled={disabled || loading}
+    >
+      <View className="flex-row items-center justify-center gap-x-2">
+        {!loading && (
+          <Github width={22} height={22} color={theme.colors.foreground} />
+        )}
+        <Text className="text-lg font-semibold text-neutral-700">
+          Sign in with GitHub
+        </Text>
+      </View>
+    </Button>
+  );
+};
+
+/**
+ * Social Login Buttons Container Component
+ */
+export const SocialLoginButtons = ({
+  disabled = false,
+}: SocialLoginButtonsProps) => {
+  return (
+    <View className="gap-y-1">
+      <View className="my-4 flex-row items-center">
+        <View className="h-px flex-1 bg-neutral-300" />
+        <Text className="mx-4 text-sm text-neutral-500">Or continue with</Text>
+        <View className="h-px flex-1 bg-neutral-300" />
+      </View>
+
+      <GoogleSignInButton disabled={disabled} />
+      <AppleSignInButton disabled={disabled} />
+      <GitHubSignInButton disabled={disabled} />
+    </View>
+  );
+};

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

@@ -0,0 +1,177 @@
+import * as ImagePicker from 'expo-image-picker';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { Text } from './core/text';
+
+export type SelectedFile = {
+  uri: string;
+  name: string;
+  size?: number;
+  mimeType?: string;
+};
+
+export type FilePickerProps = {
+  onFilesSelected: (files: SelectedFile[]) => void;
+  onError?: (e: unknown) => void;
+  fileType?: 'images' | 'all';
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSizeBytes?: number;
+  placeholder?: string;
+  showFileInfo?: boolean;
+};
+
+export function FilePicker({
+  onFilesSelected,
+  onError,
+  multiple = true,
+  maxFiles = 10,
+  maxSizeBytes,
+  placeholder = 'Select files',
+  showFileInfo = false,
+}: FilePickerProps) {
+  const theme = useThemeConfig();
+  const [selectedFiles, setSelectedFiles] = useState<SelectedFile[]>([]);
+  const [isPressed, setIsPressed] = useState(false);
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const openPicker = async () => {
+    try {
+      // request permission
+      const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (!perm.granted) throw new Error('Permission not granted');
+
+      const res = await ImagePicker.launchImageLibraryAsync({
+        allowsMultipleSelection: multiple,
+        mediaTypes: ImagePicker.MediaTypeOptions.All,
+        quality: 1,
+      });
+      if (res.canceled) return;
+      const assets = (res as any).assets || [];
+      const files: SelectedFile[] = assets.slice(0, maxFiles).map((a: any) => ({
+        uri: a.uri,
+        name: a.fileName || a.uri.split('/').pop() || 'file',
+        size: a.fileSize,
+        mimeType: a.mimeType,
+      }));
+      const filtered = maxSizeBytes
+        ? files.filter((f) => !f.size || f.size <= maxSizeBytes)
+        : files;
+      setSelectedFiles(filtered);
+      onFilesSelected(filtered);
+    } catch (e) {
+      onError?.(e);
+    }
+  };
+
+  const buildHintText = () => {
+    const parts = [];
+    parts.push('Tap to browse');
+    if (multiple) {
+      parts.push(`Up to ${maxFiles} files`);
+    }
+    if (maxSizeBytes) {
+      parts.push(`Max ${formatFileSize(maxSizeBytes)} each`);
+    }
+    return parts.join(' • ');
+  };
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Pressable
+        onPress={openPicker}
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+        style={{
+          borderWidth: 2,
+          borderStyle: 'dashed',
+          borderColor: theme.colors.border,
+          backgroundColor: isPressed ? theme.colors.muted : theme.colors.card,
+          paddingHorizontal: 16,
+          paddingVertical: 18,
+          borderRadius: 12,
+          minHeight: 120,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        accessibilityRole="button"
+      >
+        <View style={{ alignItems: 'center', gap: 12 }}>
+          <Text style={{ fontSize: 32, opacity: 0.6, paddingTop: 18 }}>📁</Text>
+          <View style={{ alignItems: 'center', gap: 4 }}>
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              {placeholder}
+            </Text>
+            <Text
+              style={{
+                fontSize: 14,
+                color: theme.colors.mutedForeground,
+                textAlign: 'center',
+              }}
+            >
+              {buildHintText()}
+            </Text>
+          </View>
+        </View>
+      </Pressable>
+
+      {showFileInfo && selectedFiles.length > 0 && (
+        <View
+          style={{
+            padding: 16,
+            backgroundColor: theme.colors.card,
+            borderRadius: 8,
+            gap: 6,
+          }}
+        >
+          <Text style={{ fontSize: 14, fontWeight: '600' }}>
+            {selectedFiles.length} file{selectedFiles.length > 1 ? 's' : ''}{' '}
+            selected
+          </Text>
+          {selectedFiles.map((file, index) => (
+            <View
+              key={index}
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 13,
+                  color: theme.colors.mutedForeground,
+                  flex: 1,
+                }}
+                numberOfLines={1}
+              >
+                {file.name}
+              </Text>
+              {file.size && (
+                <Text
+                  style={{
+                    fontSize: 13,
+                    color: theme.colors.mutedForeground,
+                    marginLeft: 8,
+                  }}
+                >
+                  {formatFileSize(file.size)}
+                </Text>
+              )}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+export default FilePicker;

package/2/apps/native/src/components/ui/gallery.tsx

@@ -0,0 +1,79 @@
+import type React from 'react';
+import { Image, Pressable, useWindowDimensions, View } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export type GalleryItem = {
+  id: string;
+  uri: string;
+  title?: string;
+  description?: string;
+  thumbnail?: string;
+};
+
+export type GalleryProps = {
+  items: GalleryItem[];
+  columns?: number;
+  columnsTablet?: number;
+  spacing?: number;
+  borderRadius?: number;
+  aspectRatio?: number; // width/height
+  renderCustomOverlay?: (item: GalleryItem) => React.ReactNode;
+  onPressItem?: (item: GalleryItem) => void;
+  onLongPressItem?: (item: GalleryItem) => void;
+};
+
+export function Gallery({
+  items,
+  columns = 2,
+  columnsTablet = 4,
+  spacing = 8,
+  borderRadius = 8,
+  aspectRatio = 1,
+  renderCustomOverlay,
+  onPressItem,
+  onLongPressItem,
+}: GalleryProps) {
+  const { width } = useWindowDimensions();
+  const isTablet = width >= 768;
+  const activeColumns = isTablet ? columnsTablet : columns;
+  const widthPct = 100 / activeColumns;
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginHorizontal: -spacing / 2,
+      }}
+    >
+      {items.map((item) => (
+        <View
+          key={item.id}
+          style={{ width: `${widthPct}%`, padding: spacing / 2 }}
+        >
+          <Pressable
+            onPress={() => onPressItem?.(item)}
+            onLongPress={() => onLongPressItem?.(item)}
+          >
+            <View style={{ position: 'relative' }}>
+              <Image
+                source={{ uri: item.thumbnail || item.uri }}
+                style={{
+                  width: '100%',
+                  aspectRatio,
+                  borderRadius,
+                  backgroundColor: theme.colors.card,
+                }}
+              />
+              {renderCustomOverlay ? renderCustomOverlay(item) : null}
+            </View>
+          </Pressable>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export default Gallery;

package/2/apps/native/src/components/ui/icons/apple.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { SvgProps } from 'react-native-svg';
+import Svg, { Path } from 'react-native-svg';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export const Apple = ({ color, ...props }: SvgProps) => {
+  const theme = useThemeConfig();
+  const iconColor = color || theme.colors.text;
+
+  return (
+    <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>
+      <Path
+        d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};