kynjal-cli 2.0.6

package/dist/templates/start-convex/convex/resendPasswordOTP.ts

@@ -0,0 +1,64 @@
+import Resend from '@auth/core/providers/resend';
+import { Resend as ResendAPI } from 'resend';
+import { RandomReader, generateRandomString } from '@oslojs/crypto/random';
+
+export const ResendPasswordOTP = Resend({
+  id: 'resend-otp',
+  apiKey: process.env.AUTH_RESEND_KEY,
+  async generateVerificationToken() {
+    console.log('Generating verification token...');
+
+    const random: RandomReader = {
+      read(bytes) {
+        crypto.getRandomValues(bytes);
+      },
+    };
+
+    const length = 6;
+    const alphabet = '0123456789';
+    const token = generateRandomString(random, alphabet, length);
+
+    console.log('Generated token:', token);
+    return token;
+  },
+  async sendVerificationRequest({ identifier: email, provider, token }) {
+    console.log('Sending verification email to:', email, 'with token:', token);
+
+    if (!provider.apiKey) {
+      console.error('Missing AUTH_RESEND_KEY environment variable');
+      throw new Error('Email service not configured');
+    }
+
+    const resend = new ResendAPI(provider.apiKey);
+
+    try {
+      const { data, error } = await resend.emails.send({
+        from: 'BNA UI <hi@ahmedbna.com>',
+        to: [email],
+        subject: `Sign in to BNA UI`,
+        text: `Your verification code is: ${token}`,
+        html: `
+          <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
+            <h2>Sign in to BNA UI</h2>
+            <p>Your verification code is:</p>
+            <div style="font-size: 24px; font-weight: bold; background: #f5f5f5; padding: 20px; text-align: center; margin: 20px 0; border-radius: 8px;">
+              ${token}
+            </div>
+            <p>This code will expire in 10 minutes.</p>
+            <p>If you didn't request this code, please ignore this email.</p>
+          </div>
+        `,
+      });
+
+      if (error) {
+        console.error('Resend API error:', error);
+        throw new Error(`Could not send email: ${error.message}`);
+      }
+
+      console.log('Email sent successfully:', data);
+    } catch (error) {
+      console.error('Failed to send verification email:', error);
+      throw new Error('Could not send verification email');
+    }
+  },
+});

package/dist/templates/start-convex/convex/router.ts

@@ -0,0 +1,5 @@
+import { httpRouter } from 'convex/server';
+
+const http = httpRouter();
+
+export default http;

package/dist/templates/start-convex/convex/schema.ts

@@ -0,0 +1,23 @@
+import { v } from 'convex/values';
+import { authTables } from '@convex-dev/auth/server';
+import { defineSchema, defineTable } from 'convex/server';
+
+export default defineSchema({
+  ...authTables,
+
+  users: defineTable({
+    email: v.optional(v.string()),
+    phone: v.optional(v.string()),
+    name: v.optional(v.string()),
+    bio: v.optional(v.string()),
+    gender: v.optional(v.string()),
+    birthday: v.optional(v.number()),
+    image: v.optional(v.union(v.string(), v.null())),
+    emailVerificationTime: v.optional(v.float64()),
+    phoneVerificationTime: v.optional(v.float64()),
+    isAnonymous: v.optional(v.boolean()),
+    githubId: v.optional(v.number()),
+  })
+    .index('email', ['email'])
+    .index('phone', ['phone']),
+});

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

@@ -0,0 +1,25 @@
+{
+  /* This TypeScript project config describes the environment that
+   * Convex functions run in and is used to typecheck them.
+   * You can modify it, but some settings required to use Convex.
+   */
+  "compilerOptions": {
+    /* These settings are not required by Convex and can be modified. */
+    "allowJs": true,
+    "strict": true,
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+
+    /* These compiler options are required by Convex */
+    "target": "ESNext",
+    "lib": ["ES2021", "dom"],
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["./**/*"],
+  "exclude": ["./_generated"]
+}

package/dist/templates/start-convex/convex/users.ts

@@ -0,0 +1,111 @@
+import { v } from 'convex/values';
+import { getAuthUserId } from '@convex-dev/auth/server';
+import { internalQuery, mutation, query } from './_generated/server';
+
+export const get = query({
+  handler: async (ctx) => {
+    const authId = await getAuthUserId(ctx);
+
+    if (!authId) {
+      throw new Error('Not authenticated');
+    }
+
+    const user = await ctx.db.get(authId);
+
+    return user;
+  },
+});
+
+export const getbyemail = query({
+  args: {
+    email: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const authId = await getAuthUserId(ctx);
+
+    if (!authId) {
+      throw new Error('Not authenticated');
+    }
+
+    const user = await ctx.db
+      .query('users')
+      .withIndex('email', (q) => q.eq('email', args.email))
+      .unique();
+
+    return user;
+  },
+});
+
+export const getAll = query({
+  handler: async (ctx) => {
+    const userId = await getAuthUserId(ctx);
+
+    if (!userId) {
+      throw new Error('Not authenticated');
+    }
+
+    const allUser = await ctx.db.query('users').take(100);
+
+    const users = allUser.filter((user) => user._id !== userId);
+
+    return users;
+  },
+});
+
+export const getId = query({
+  handler: async (ctx) => {
+    const userId = await getAuthUserId(ctx);
+
+    if (!userId) {
+      throw new Error('Not authenticated');
+    }
+
+    return userId;
+  },
+});
+
+export const getUserInfo = internalQuery({
+  handler: async (ctx) => {
+    const userId = await getAuthUserId(ctx);
+
+    if (!userId) {
+      throw new Error('Not authenticated');
+    }
+
+    const user = await ctx.db.get(userId);
+
+    if (!user) {
+      throw new Error('Not found');
+    }
+
+    return user;
+  },
+});
+
+export const update = mutation({
+  args: {
+    name: v.optional(v.string()),
+    bio: v.optional(v.string()),
+    gender: v.optional(v.string()),
+    birthday: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const userId = await getAuthUserId(ctx);
+
+    if (!userId) {
+      throw new Error('Not authenticated');
+    }
+
+    const user = await ctx.db.get(userId);
+
+    if (!user) {
+      throw new Error('User not found');
+    }
+
+    await ctx.db.patch(user._id, {
+      ...args,
+    });
+
+    return user._id;
+  },
+});

package/dist/templates/start-convex/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);

package/dist/templates/start-convex/hooks/useColor.ts

@@ -0,0 +1,16 @@
+import { Colors } from '@/theme/colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+export function useColor(
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
+  props?: { light?: string; dark?: string }
+) {
+  const theme = useColorScheme() ?? 'light';
+  const colorFromProps = props?.[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}

package/dist/templates/start-convex/hooks/useColorScheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

package/dist/templates/start-convex/hooks/useColorScheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

package/dist/templates/start-convex/hooks/useKeyboardHeight.ts

@@ -0,0 +1,131 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  Keyboard,
+  Platform,
+  Dimensions,
+  KeyboardEvent,
+  EmitterSubscription,
+} from 'react-native';
+
+interface UseKeyboardHeightReturn {
+  keyboardHeight: number;
+  isKeyboardVisible: boolean;
+  keyboardAnimationDuration: number;
+}
+
+export const useKeyboardHeight = (): UseKeyboardHeightReturn => {
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState<boolean>(false);
+  const [keyboardAnimationDuration, setKeyboardAnimationDuration] =
+    useState<number>(0);
+
+  // Store previous height to handle edge cases
+  const previousHeightRef = useRef<number>(0);
+
+  useEffect(() => {
+    let showSubscription: EmitterSubscription;
+    let hideSubscription: EmitterSubscription;
+
+    // Determine which events to listen to based on platform
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    // Handle keyboard show
+    const handleKeyboardShow = (event: KeyboardEvent) => {
+      const { height } = event.endCoordinates;
+      const duration = event.duration;
+
+      // Validate height - sometimes we get invalid values
+      if (height && height > 0) {
+        setKeyboardHeight(height);
+        setIsKeyboardVisible(true);
+        setKeyboardAnimationDuration(duration || 250); // Default duration if not provided
+        previousHeightRef.current = height;
+      }
+    };
+
+    // Handle keyboard hide
+    const handleKeyboardHide = (event: KeyboardEvent) => {
+      setKeyboardHeight(0);
+      setIsKeyboardVisible(false);
+
+      // Get animation duration (iOS provides this, Android might not)
+      const duration = event.duration || (Platform.OS === 'ios' ? 250 : 200);
+      setKeyboardAnimationDuration(duration);
+    };
+
+    // Add event listeners
+    showSubscription = Keyboard.addListener(showEvent, handleKeyboardShow);
+    hideSubscription = Keyboard.addListener(hideEvent, handleKeyboardHide);
+
+    // Cleanup function
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  // Additional effect to handle edge cases and screen rotation
+  useEffect(() => {
+    let dimensionSubscription: EmitterSubscription;
+
+    const handleDimensionChange = () => {
+      // If keyboard was visible and screen rotated, we might need to recalculate
+      if (isKeyboardVisible && previousHeightRef.current > 0) {
+        // On screen rotation, keyboard height might change
+        // This is more relevant for tablets and landscape mode
+        const screenHeight = Dimensions.get('window').height;
+        const screenWidth = Dimensions.get('window').width;
+
+        // Simple heuristic: if we're in landscape and had a keyboard,
+        // the height might be different
+        if (screenWidth > screenHeight && Platform.OS === 'ios') {
+          // iOS landscape keyboard is typically shorter
+          const estimatedLandscapeHeight = Math.min(
+            previousHeightRef.current,
+            screenHeight * 0.4
+          );
+          setKeyboardHeight(estimatedLandscapeHeight);
+        }
+      }
+    };
+
+    // Listen to dimension changes (rotation, split screen, etc.)
+    dimensionSubscription = Dimensions.addEventListener(
+      'change',
+      handleDimensionChange
+    );
+
+    return () => {
+      dimensionSubscription?.remove();
+    };
+  }, [isKeyboardVisible]);
+
+  return {
+    keyboardHeight,
+    isKeyboardVisible,
+    keyboardAnimationDuration,
+  };
+};
+
+// Example usage:
+/*
+import useKeyboardHeight from './useKeyboardHeight';
+
+const MyComponent: React.FC = () => {
+  const { keyboardHeight, isKeyboardVisible, keyboardAnimationDuration } = useKeyboardHeight();
+  
+  return (
+    <View style={{ 
+      flex: 1, 
+      paddingBottom: isKeyboardVisible ? keyboardHeight : 0 
+    }}>
+      <Text>Keyboard Height: {keyboardHeight}</Text>
+      <Text>Keyboard Visible: {isKeyboardVisible ? 'Yes' : 'No'}</Text>
+      <Text>Animation Duration: {keyboardAnimationDuration}ms</Text>
+    </View>
+  );
+};
+*/

package/dist/templates/start-convex/hooks/useModeToggle.tsx

@@ -0,0 +1,88 @@
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useState, useEffect } from 'react';
+import { Appearance, ColorSchemeName, Platform } from 'react-native';
+
+type Mode = 'light' | 'dark' | 'system';
+
+interface UseModeToggleReturn {
+  isDark: boolean;
+  mode: Mode;
+  setMode: (mode: Mode) => void;
+  currentMode: ColorSchemeName;
+  toggleMode: () => void;
+}
+
+export function useModeToggle(): UseModeToggleReturn {
+  const [mode, setModeState] = useState<Mode>('system');
+  const colorScheme = useColorScheme(); // Uses your existing hook
+
+  // Calculate isDark based on mode and system preference
+  const isDark = mode === 'system' ? colorScheme === 'dark' : mode === 'dark';
+
+  const toggleMode = () => {
+    switch (mode) {
+      case 'light':
+        setMode('dark');
+        break;
+      case 'dark':
+        setMode('system');
+        break;
+      case 'system':
+        setMode('light');
+        break;
+    }
+  };
+
+  const setMode = (newMode: Mode) => {
+    setModeState(newMode);
+
+    // Only use Appearance.setColorScheme on native platforms
+    if (Platform.OS !== 'web') {
+      if (newMode === 'system') {
+        Appearance.setColorScheme(null);
+      } else {
+        Appearance.setColorScheme(newMode);
+      }
+    } else {
+      // For web, update the root HTML element
+      if (typeof document !== 'undefined') {
+        const root = document.documentElement;
+
+        if (newMode === 'system') {
+          // Remove override and let CSS media query handle it
+          root.classList.remove('light', 'dark');
+          root.removeAttribute('data-theme');
+        } else {
+          // Set explicit theme
+          root.classList.remove('light', 'dark');
+          root.classList.add(newMode);
+          root.setAttribute('data-theme', newMode);
+        }
+      }
+    }
+  };
+
+  // Sync web theme with mode changes
+  useEffect(() => {
+    if (Platform.OS === 'web' && typeof document !== 'undefined') {
+      const root = document.documentElement;
+
+      if (mode === 'system') {
+        root.classList.remove('light', 'dark');
+        root.removeAttribute('data-theme');
+      } else {
+        root.classList.remove('light', 'dark');
+        root.classList.add(mode);
+        root.setAttribute('data-theme', mode);
+      }
+    }
+  }, [mode, colorScheme]); // Re-run when mode or system preference changes
+
+  return {
+    isDark,
+    mode,
+    setMode,
+    currentMode: mode === 'system' ? colorScheme : mode,
+    toggleMode,
+  };
+}

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

@@ -0,0 +1,64 @@
+{
+  "name": "bna",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@auth/core": "0.37.0",
+    "@convex-dev/auth": "^0.0.90",
+    "@expo/metro-runtime": "~6.1.2",
+    "@expo/vector-icons": "^15.0.3",
+    "@oslojs/crypto": "^1.0.1",
+    "@react-email/render": "^2.0.0",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "convex": "^1.29.0",
+    "expo": "~54.0.23",
+    "expo-auth-session": "~7.0.8",
+    "expo-asset": "~12.0.9",
+    "expo-blur": "~15.0.7",
+    "expo-constants": "~18.0.10",
+    "expo-device": "~8.0.9",
+    "expo-font": "~14.0.9",
+    "expo-glass-effect": "~0.1.6",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.10",
+    "expo-linking": "~8.0.8",
+    "expo-navigation-bar": "~5.0.9",
+    "expo-router": "~6.0.14",
+    "expo-secure-store": "~15.0.7",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.8",
+    "expo-web-browser": "~15.0.9",
+    "lucide-react-native": "^0.553.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.15.0",
+    "react-native-web": "~0.21.0",
+    "react-native-webview": "13.15.0",
+    "react-native-worklets": "0.5.1",
+    "resend": "^6.4.2"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

package/dist/templates/start-convex/providers/search-context.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react';
+
+interface SearchContextType {
+  searchText: string;
+  setSearchText: (text: string) => void;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export function SearchProvider({ children }: { children: ReactNode }) {
+  const [searchText, setSearchText] = useState('');
+
+  return (
+    <SearchContext.Provider value={{ searchText, setSearchText }}>
+      {children}
+    </SearchContext.Provider>
+  );
+}
+
+export function useSearch() {
+  const context = useContext(SearchContext);
+  if (context === undefined) {
+    throw new Error('useSearch must be used within a SearchProvider');
+  }
+  return context;
+}