kynjal-cli 2.0.6

package/dist/templates/start-convex/app/_layout.tsx

@@ -0,0 +1,136 @@
+import { Auth } from '@/components/auth/auth';
+import { Spinner } from '@/components/ui/spinner';
+import { View } from '@/components/ui/view';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Colors } from '@/theme/colors';
+import { ThemeProvider } from '@/theme/theme-provider';
+import { ConvexAuthProvider } from '@convex-dev/auth/react';
+import {
+  Authenticated,
+  AuthLoading,
+  ConvexReactClient,
+  Unauthenticated,
+} from 'convex/react';
+import { osName } from 'expo-device';
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+import * as NavigationBar from 'expo-navigation-bar';
+import { Stack } from 'expo-router';
+import * as SecureStore from 'expo-secure-store';
+import * as SplashScreen from 'expo-splash-screen';
+import { StatusBar } from 'expo-status-bar';
+import { setBackgroundColorAsync } from 'expo-system-ui';
+import React, { useEffect } from 'react';
+import { Platform } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import 'react-native-reanimated';
+
+SplashScreen.setOptions({
+  duration: 200,
+  fade: true,
+});
+
+const secureStorage = {
+  getItem: SecureStore.getItemAsync,
+  setItem: SecureStore.setItemAsync,
+  removeItem: SecureStore.deleteItemAsync,
+};
+
+const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
+  unsavedChangesWarning: false,
+});
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme() || 'light';
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      NavigationBar.setButtonStyleAsync(
+        colorScheme === 'light' ? 'dark' : 'light'
+      );
+    }
+  }, [colorScheme]);
+
+  // Keep the root view background color in sync with the current theme
+  useEffect(() => {
+    setBackgroundColorAsync(
+      colorScheme === 'dark' ? Colors.dark.background : Colors.light.background
+    );
+  }, [colorScheme]);
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider>
+        <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} animated />
+
+        <ConvexAuthProvider
+          client={convex}
+          storage={
+            Platform.OS === 'android' || Platform.OS === 'ios'
+              ? secureStorage
+              : undefined
+          }
+        >
+          <AuthLoading>
+            <View
+              style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Spinner size='lg' variant='circle' />
+            </View>
+          </AuthLoading>
+          <Unauthenticated>
+            <Auth />
+          </Unauthenticated>
+          <Authenticated>
+            <Stack screenOptions={{ headerShown: false }}>
+              <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
+
+              <Stack.Screen
+                name='sheet'
+                options={{
+                  headerShown: false,
+                  sheetGrabberVisible: true,
+                  sheetAllowedDetents: [0.4, 0.7, 1],
+                  contentStyle: {
+                    backgroundColor: isLiquidGlassAvailable()
+                      ? 'transparent'
+                      : colorScheme === 'dark'
+                        ? Colors.dark.card
+                        : Colors.light.card,
+                  },
+                  headerTransparent: Platform.OS === 'ios' ? true : false,
+                  headerLargeTitle: false,
+                  title: '',
+                  presentation:
+                    Platform.OS === 'ios'
+                      ? isLiquidGlassAvailable() && osName !== 'iPadOS'
+                        ? 'formSheet'
+                        : 'modal'
+                      : 'modal',
+                  sheetInitialDetentIndex: 0,
+                  headerStyle: {
+                    backgroundColor:
+                      Platform.OS === 'ios'
+                        ? 'transparent'
+                        : colorScheme === 'dark'
+                          ? Colors.dark.card
+                          : Colors.light.card,
+                  },
+                  headerBlurEffect: isLiquidGlassAvailable()
+                    ? undefined
+                    : colorScheme === 'dark'
+                      ? 'dark'
+                      : 'light',
+                }}
+              />
+              <Stack.Screen name='+not-found' />
+            </Stack>
+          </Authenticated>
+        </ConvexAuthProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+}

package/dist/templates/start-convex/app/sheet.tsx

@@ -0,0 +1 @@
+export { default } from '@/components/sheet';

package/dist/templates/start-convex/app.json

@@ -0,0 +1,51 @@
+{
+  "expo": {
+    "name": "bna",
+    "slug": "bna",
+    "scheme": "bna",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/splash.png",
+        "backgroundImage": "./assets/images/splash.png",
+        "monochromeImage": "./assets/images/splash.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": true
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/icon.png"
+    },
+    "plugins": [
+      "expo-asset",
+      "expo-router",
+      "expo-web-browser",
+      "expo-secure-store",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#FFFFFF",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

package/dist/templates/start-convex/components/auth/apple.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { makeRedirectUri } from 'expo-auth-session';
+import { openAuthSessionAsync } from 'expo-web-browser';
+import { Platform } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { View } from '@/components/ui/view';
+import { Text } from '@/components/ui/text';
+import { Button } from '@/components/ui/button';
+import { useColor } from '@/hooks/useColor';
+
+const redirectTo = makeRedirectUri();
+
+export const SignInWithApple = () => {
+  const { signIn } = useAuthActions();
+  const secondary = useColor('secondary');
+
+  const [loading, setLoading] = useState(false);
+
+  const handleAppleSignIn = async () => {
+    setLoading(true);
+
+    const { redirect } = await signIn('apple', {
+      redirectTo,
+    });
+
+    if (Platform.OS === 'web') {
+      return;
+    }
+
+    const result = await openAuthSessionAsync(redirect!.toString(), redirectTo);
+
+    if (result.type === 'success') {
+      const { url } = result;
+
+      const code = new URL(url).searchParams.get('code')!;
+
+      await signIn('apple', { code });
+    } else {
+      setLoading(false);
+    }
+  };
+  return (
+    <Button disabled={loading} onPress={handleAppleSignIn}>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 16,
+        }}
+      >
+        <Ionicons name='logo-apple' size={22} color={secondary} />
+        <Text style={{ color: secondary, fontWeight: 500 }}>
+          Login with Apple
+        </Text>
+      </View>
+    </Button>
+  );
+};

package/dist/templates/start-convex/components/auth/auth.tsx

@@ -0,0 +1,127 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from '@/components/ui/card';
+import { View } from '@/components/ui/view';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { ScrollView } from '@/components/ui/scroll-view';
+import { AvoidKeyboard } from '@/components/ui/avoid-keyboard';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { SignInWithGoogle } from '@/components/auth/google';
+import { SignInWithApple } from '@/components/auth/apple';
+import { Password } from '@/components/auth/password';
+import { EmailOTP } from './email-otp';
+import { Dimensions } from 'react-native';
+import { Button } from '@/components/ui/button';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { useColor } from '@/hooks/useColor';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+const tabWidth = (screenWidth - 44) / 3; // 16 padding on each side
+
+export const Auth = () => {
+  const background = useColor('background');
+  const { signIn } = useAuthActions();
+
+  return (
+    <View style={{ flex: 1, backgroundColor: background }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 96 }}
+        keyboardShouldPersistTaps='handled'
+      >
+        <Text
+          style={{
+            fontSize: 60,
+            fontWeight: 700,
+            textAlign: 'center',
+          }}
+        >
+          🚀
+        </Text>
+        <Text
+          style={{
+            fontSize: 60,
+            fontWeight: 800,
+            textAlign: 'center',
+            marginBottom: 16,
+          }}
+        >
+          BNA
+        </Text>
+
+        <Tabs defaultValue='password' enableSwipe={false} style={{ flex: 1 }}>
+          <TabsList>
+            <TabsTrigger value='password' style={{ width: tabWidth }}>
+              Password
+            </TabsTrigger>
+            <TabsTrigger value='oauth' style={{ width: tabWidth }}>
+              OAuth
+            </TabsTrigger>
+            <TabsTrigger value='otp' style={{ width: tabWidth }}>
+              OTP
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value='password'>
+            <Password />
+          </TabsContent>
+
+          <TabsContent value='oauth'>
+            <Card>
+              <CardHeader style={{ paddingBottom: 16 }}>
+                <CardDescription style={{ textAlign: 'center' }}>
+                  Login to your account
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent>
+                <View style={{ gap: 16 }}>
+                  <SignInWithGoogle />
+
+                  <SignInWithApple />
+                </View>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value='otp'>
+            <EmailOTP />
+          </TabsContent>
+        </Tabs>
+
+        <View style={{ padding: 24 }}>
+          <Button
+            variant='destructive'
+            onPress={() => void signIn('anonymous')}
+          >
+            Login anonymously
+          </Button>
+        </View>
+
+        <View style={{ paddingHorizontal: 36 }}>
+          <Text variant='caption' style={{ textAlign: 'center' }}>
+            By clicking continue, you agree to our{' '}
+            <Link href='https://ui.ahmedbna.com'>
+              <Text variant='link' style={{ fontSize: 14 }}>
+                Terms of Service
+              </Text>
+            </Link>{' '}
+            and{' '}
+            <Link href='https://ui.ahmedbna.com'>
+              <Text variant='link' style={{ fontSize: 14 }}>
+                Privacy Policy
+              </Text>
+            </Link>
+          </Text>
+        </View>
+      </ScrollView>
+
+      <AvoidKeyboard />
+    </View>
+  );
+};

package/dist/templates/start-convex/components/auth/email-otp.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { KeyRound, MailCheck } from 'lucide-react-native';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import { Text } from '@/components/ui/text';
+import { Input } from '@/components/ui/input';
+import { InputOTP } from '@/components/ui/input-otp';
+import { useColor } from '@/hooks/useColor';
+
+type AuthStep = 'signIn' | 'verifyEmail';
+
+export const EmailOTP = () => {
+  const { signIn } = useAuthActions();
+  const green = useColor('green');
+
+  // --- STATE MANAGEMENT ---
+  const [step, setStep] = useState<AuthStep>('signIn');
+
+  // Form inputs
+  const [email, setEmail] = useState('');
+  const [code, setCode] = useState('');
+
+  // Loading and error states
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const resetFormState = () => {
+    setEmail('');
+    setCode('');
+    setError('');
+    setLoading(false);
+  };
+
+  const changeStep = (newStep: AuthStep) => {
+    resetFormState();
+    setStep(newStep);
+  };
+
+  const validateEmail = (value: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      setError('Please enter a valid email address.');
+      return false;
+    }
+    setError('');
+    return true;
+  };
+
+  const validatePassword = (value: string) => {
+    if (
+      value.length < 8 ||
+      !/\d/.test(value) ||
+      !/[a-z]/.test(value) ||
+      !/[A-Z]/.test(value)
+    ) {
+      setError(
+        'Password must be 8+ characters with uppercase, lowercase, and numbers.'
+      );
+      return false;
+    }
+    setError('');
+    return true;
+  };
+
+  const handleSendCode = async () => {
+    if (!validateEmail(email)) return;
+
+    setLoading(true);
+    setError('');
+
+    try {
+      await signIn('resend-otp', { email, flow: step });
+
+      setStep('verifyEmail');
+    } catch (err: any) {
+      console.error(`${step} error:`, err);
+      setError('Authentication failed. Check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerifyEmail = async () => {
+    if (code.length < 6) {
+      setError('Please enter the 6-digit code.');
+      return;
+    }
+    setLoading(true);
+    setError('');
+
+    try {
+      await signIn('resend-otp', {
+        email,
+        code,
+        flow: 'email-verification',
+      });
+    } catch (err: any) {
+      console.error('Email verification error:', err);
+      setError('Invalid verification code. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (step === 'verifyEmail') {
+    return (
+      <Card>
+        <CardContent>
+          <View style={{ gap: 16 }}>
+            <View style={{ alignItems: 'center' }}>
+              <MailCheck color={green} size={40} />
+            </View>
+            <View style={{ gap: 8 }}>
+              <Text variant='title' style={{ textAlign: 'center' }}>
+                Check your email
+              </Text>
+              <Text variant='subtitle' style={{ textAlign: 'center' }}>
+                {`We've sent a 6-digit code to ${email}`}
+              </Text>
+            </View>
+            <InputOTP
+              length={6}
+              value={code}
+              onChangeText={setCode}
+              onComplete={handleVerifyEmail}
+              // error={error}
+            />
+            <Button
+              onPress={handleVerifyEmail}
+              disabled={loading || code.length < 6}
+              loading={loading}
+            >
+              Verify Code
+            </Button>
+            <Button
+              variant='link'
+              onPress={() => changeStep('signIn')}
+              disabled={loading}
+            >
+              Use a different email
+            </Button>
+          </View>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <View style={{ alignItems: 'center', marginBottom: 16 }}>
+          <KeyRound color={green} size={40} />
+        </View>
+        <Text variant='title' style={{ textAlign: 'center' }}>
+          OTP Email Login
+        </Text>
+        <CardDescription style={{ textAlign: 'center' }}>
+          Enter your email to receive OTP code.
+        </CardDescription>
+      </CardHeader>
+      <CardContent style={{ gap: 16 }}>
+        <Input
+          value={email}
+          variant='outline'
+          placeholder='me@example.com'
+          onChangeText={setEmail}
+          keyboardType='email-address'
+          autoCapitalize='none'
+          autoComplete='email'
+          error={error}
+          editable={!loading}
+        />
+        <Button onPress={handleSendCode} disabled={loading} loading={loading}>
+          Send Code
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};

package/dist/templates/start-convex/components/auth/google.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { makeRedirectUri } from 'expo-auth-session';
+import { openAuthSessionAsync } from 'expo-web-browser';
+import { Platform } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { View } from '@/components/ui/view';
+import { Text } from '@/components/ui/text';
+import { Button } from '@/components/ui/button';
+import { useColor } from '@/hooks/useColor';
+
+const redirectTo = makeRedirectUri();
+
+export const SignInWithGoogle = () => {
+  const { signIn } = useAuthActions();
+  const secondary = useColor('secondary');
+
+  const [loading, setLoading] = useState(false);
+
+  const handleGoogleSignIn = async () => {
+    setLoading(true);
+
+    const { redirect } = await signIn('google', {
+      redirectTo,
+    });
+
+    if (Platform.OS === 'web') {
+      return;
+    }
+
+    const result = await openAuthSessionAsync(redirect!.toString(), redirectTo);
+
+    if (result.type === 'success') {
+      const { url } = result;
+
+      const code = new URL(url).searchParams.get('code')!;
+
+      await signIn('google', { code });
+    } else {
+      setLoading(false);
+    }
+  };
+  return (
+    <Button disabled={loading} onPress={handleGoogleSignIn}>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 16,
+        }}
+      >
+        <Ionicons name='logo-google' size={20} color={secondary} />
+        <Text style={{ color: secondary, fontWeight: 500 }}>
+          Login with Google
+        </Text>
+      </View>
+    </Button>
+  );
+};