kynjal-cli 2.0.6

package/dist/templates/start-convex/README.md

@@ -0,0 +1,213 @@
+# BNA UI 🚀
+
+![BNA UI Header](https://bna-ui.s3.eu-north-1.amazonaws.com/bna-ui-header.png)
+
+**B**uild **N**ative **A**pps - A powerful CLI for creating Expo React Native applications with a beautiful UI component library.
+
+## ✨ Features
+
+- 🎨 **Beautiful UI Components** - Pre-built, customizable components with modern design
+- 🌙 **Theme Support** - Built-in light/dark mode with seamless transitions
+- 📱 **Expo Router Ready** - Complete navigation setup with tab and stack navigation
+- 🎯 **TypeScript First** - Full TypeScript support with excellent IntelliSense
+- 📦 **Flexible Package Manager** - Works with npm, yarn, or pnpm
+- 🚀 **Zero Configuration** - Get started in seconds with sensible defaults
+- 🔧 **Highly Customizable** - Easily customize colors, spacing, and components
+- 📲 **Cross-Platform** - Perfect compatibility across iOS and Android
+- ⚡ **Performance Optimized** - Lightweight and fast components
+- 🎭 **Animation Ready** - Smooth animations with React Native Reanimated
+
+## 📦 Installation
+
+```bash
+# The fastest way to set up BNA UI in your Expo project:
+npx bna-ui init
+
+# Navigate to your Expo project
+cd bna-app
+
+# Start the Convex backend
+npx convex dev
+
+# In a new terminal, start your Expo app
+npx expo start
+
+# Start adding components
+npx bna-ui add button
+npx bna-ui add card
+npx bna-ui add input
+```
+
+## 🚀 Quick Start
+
+### Starting Your Project
+
+1. **Initialize your project** (if you haven't already):
+
+   ```bash
+   npx bna-ui init
+   cd bna-app
+   ```
+
+2. **Start the Convex backend**:
+
+   ```bash
+   npx convex dev
+   ```
+
+   This will start the Convex development server and sync your backend functions.
+
+3. **Start your Expo app** (in a new terminal):
+
+   ```bash
+   npx expo start
+   ```
+
+### Backend Development
+
+The Convex backend runs alongside your Expo app and provides real-time data synchronization. Keep `npx convex dev` running in a terminal window while developing.
+
+## 🎨 Available Components
+
+| Component      | Description                       | Status         |
+| -------------- | --------------------------------- | -------------- |
+| `Button`       | Customizable button with variants | ✅ Available   |
+| `Card`         | Container component with shadow   | ✅ Available   |
+| `Input`        | Text input with validation        | ✅ Available   |
+| `Bottom Sheet` | Overlay modal component           | ✅ Available   |
+| `Spinner`      | Loading spinner and skeletons     | ✅ Available   |
+| `Avatar`       | User profile image component      | ✅ Available   |
+| `Badge`        | Small status indicator            | ✅ Available   |
+| `Date Picker`  | Date Picker component             | ✅ Available   |
+| `Switch`       | Toggle switch component           | ✅ Available   |
+| `Progress`     | Range progress component          | ✅ Available   |
+| `Charts`       | Charts components.                | 🔄 Coming Soon |
+
+## 🎯 Usage Example
+
+```tsx
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { View } from '@/components/ui/view';
+
+export default function HomeScreen() {
+  return (
+    <View style={{ flex: 1, padding: 20 }}>
+      <Card>
+        <Input placeholder='Enter your email' keyboardType='email-address' />
+        <Button
+          variant='success'
+          onPress={() => console.log('Button pressed!')}
+        >
+          Get Started
+        </Button>
+      </Card>
+    </View>
+  );
+}
+```
+
+## 🌙 Theme Configuration
+
+BNA UI comes with a flexible theming system:
+
+```tsx
+// theme/colors.ts
+export const lightTheme = {
+  colors: {
+    background: '#FFFFFF',
+    foreground: '#000000',
+    card: '#F2F2F7',
+    cardForeground: '#000000',
+    popover: '#F2F2F7',
+    popoverForeground: '#000000',
+    primary: '#18181b',
+    primaryForeground: '#FFFFFF',
+    secondary: '#F2F2F7',
+    secondaryForeground: '#18181b',
+    muted: '#78788033',
+    mutedForeground: '#71717a',
+    // ... more colors
+  },
+};
+
+export const darkTheme = {
+  colors: {
+    background: '#000000',
+    foreground: '#FFFFFF',
+    card: '#1C1C1E',
+    cardForeground: '#FFFFFF',
+    popover: '#18181b',
+    popoverForeground: '#FFFFFF',
+    primary: '#e4e4e7',
+    primaryForeground: '#18181b',
+    secondary: '#1C1C1E',
+    secondaryForeground: '#FFFFFF',
+    muted: '#78788033',
+    mutedForeground: '#a1a1aa',
+    // ... more colors
+  },
+};
+```
+
+## 📱 Platform Support
+
+- ✅ **iOS** - Full native iOS support
+- ✅ **Android** - Full native Android support
+- ✅ **Web** - Responsive web support
+- ✅ **Expo Go** - Development with Expo Go
+- ✅ **EAS Build** - Production builds with EAS
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/ahmedbna/bna-ui.git
+cd bna-ui
+
+# Install dependencies
+npm install
+
+# Build for production
+npm run build
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- 📚 **Documentation**: [https://ui.ahmedbna.com](https://ui.ahmedbna.com)
+- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/ahmedbna/ui/issues)
+- 💬 **Linkedin**: [@ahmedbna](https://www.linkedin.com/in/ahmedbna/)
+- 𝕏 **X**: [@ahmedbnaa](https://x.com/ahmedbnaa)
+
+## ⭐ Support
+
+If you find BNA UI helpful, please consider giving it a star on GitHub! It helps us a lot.
+
+[![GitHub stars](https://img.shields.io/github/stars/ahmedbna/ui?style=social)](https://github.com/ahmedbna/ui)
+
+## 📈 Stats
+
+![GitHub package.json version](https://img.shields.io/github/package-json/v/ahmedbna/ui)
+![npm](https://img.shields.io/npm/v/bna-ui)
+![npm](https://img.shields.io/npm/dm/bna-ui)
+![GitHub](https://img.shields.io/github/license/ahmedbna/ui)
+
+---
+
+Made with ❤️ by [Ahmed BNA](https://github.com/ahmedbna)

package/dist/templates/start-convex/app/(tabs)/(home)/_layout.tsx

@@ -0,0 +1,43 @@
+import { Stack } from 'expo-router';
+import { Platform, useColorScheme } from 'react-native';
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+import { useColor } from '@/hooks/useColor';
+import { Text } from '@/components/ui/text';
+
+export default function HomeLayout() {
+  const theme = useColorScheme();
+  const text = useColor('text');
+  const background = useColor('background');
+
+  return (
+    <Stack
+      screenOptions={{
+        headerLargeTitle: true,
+        headerLargeTitleShadowVisible: false,
+        headerTransparent: true,
+        headerTintColor: text,
+        headerBlurEffect: isLiquidGlassAvailable()
+          ? undefined
+          : theme === 'dark'
+            ? 'systemMaterialDark'
+            : 'systemMaterialLight',
+        headerStyle: {
+          backgroundColor: isLiquidGlassAvailable()
+            ? 'transparent'
+            : background,
+        },
+      }}
+    >
+      <Stack.Screen
+        name='index'
+        options={{
+          title: 'Home',
+          headerTitle: () =>
+            Platform.OS === 'android' ? (
+              <Text variant='heading'>Home</Text>
+            ) : undefined,
+        }}
+      />
+    </Stack>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/(home)/index.tsx

@@ -0,0 +1,96 @@
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Icon } from '@/components/ui/icon';
+import { Link } from '@/components/ui/link';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { Terminal } from 'lucide-react-native';
+
+export default function HomeScreen() {
+  const green = useColor('green');
+  const muted = useColor('muted');
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        gap: 16,
+        padding: 24,
+        justifyContent: 'center',
+      }}
+    >
+      <Text
+        variant='heading'
+        style={{
+          textAlign: 'center',
+        }}
+      >
+        Built with ❤️ by BNA
+      </Text>
+
+      <View
+        style={{
+          marginBottom: 20,
+        }}
+      >
+        <Card>
+          <View
+            style={{
+              gap: 8,
+              marginBottom: 16,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <Icon name={Terminal} />
+
+            <Text
+              variant='body'
+              style={{
+                fontWeight: '600',
+              }}
+            >
+              Add Components
+            </Text>
+          </View>
+          <View
+            style={{
+              backgroundColor: muted,
+              paddingHorizontal: 16,
+              paddingVertical: 12,
+              borderRadius: 8,
+              marginBottom: 16,
+              minWidth: '100%',
+            }}
+          >
+            <Text
+              variant='caption'
+              style={{
+                color: green,
+                fontFamily: 'monospace',
+                fontSize: 16,
+                textAlign: 'center',
+              }}
+            >
+              npx bna-ui add avatar
+            </Text>
+          </View>
+          <Text
+            variant='caption'
+            style={{
+              textAlign: 'center',
+              opacity: 0.7,
+            }}
+          >
+            Add components with a single command
+          </Text>
+        </Card>
+      </View>
+
+      <Link asChild href='/sheet'>
+        <Button>Open Components Sheet</Button>
+      </Link>
+    </View>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/_layout.tsx

@@ -0,0 +1,68 @@
+import { Platform } from 'react-native';
+import { useColor } from '@/hooks/useColor';
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+import MaterialIcons from '@expo/vector-icons/Feather';
+import {
+  Badge,
+  Icon,
+  Label,
+  NativeTabs,
+  VectorIcon,
+} from 'expo-router/unstable-native-tabs';
+
+export default function TabsLayout() {
+  const red = useColor('red');
+  const primary = useColor('primary');
+  const foreground = useColor('foreground');
+
+  return (
+    <NativeTabs
+      minimizeBehavior='onScrollDown'
+      labelStyle={{
+        default: { color: primary },
+        selected: { color: foreground },
+      }}
+      iconColor={{
+        default: primary,
+        selected: foreground,
+      }}
+      badgeBackgroundColor={red}
+      labelVisibilityMode='labeled'
+      disableTransparentOnScrollEdge={true}
+    >
+      <NativeTabs.Trigger name='(home)'>
+        {Platform.select({
+          ios: <Icon sf='house.fill' />,
+          android: (
+            <Icon src={<VectorIcon family={MaterialIcons} name='home' />} />
+          ),
+        })}
+        <Label>Home</Label>
+      </NativeTabs.Trigger>
+
+      <NativeTabs.Trigger name='settings'>
+        {Platform.select({
+          ios: <Icon sf='gear' />,
+          android: (
+            <Icon src={<VectorIcon family={MaterialIcons} name='settings' />} />
+          ),
+        })}
+        <Label>Settings</Label>
+        <Badge>1</Badge>
+      </NativeTabs.Trigger>
+
+      <NativeTabs.Trigger
+        name='search'
+        role={isLiquidGlassAvailable() ? 'search' : undefined}
+      >
+        {Platform.select({
+          ios: <Icon sf='magnifyingglass' />,
+          android: (
+            <Icon src={<VectorIcon family={MaterialIcons} name='search' />} />
+          ),
+        })}
+        <Label>Search</Label>
+      </NativeTabs.Trigger>
+    </NativeTabs>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/_layout.web.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Icon } from '@/components/ui/icon';
+import { useColor } from '@/hooks/useColor';
+import { Tabs } from 'expo-router';
+import { Home, Search, Settings } from 'lucide-react-native';
+
+export default function WebTabsLayout() {
+  const primary = useColor('primary');
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: primary,
+      }}
+    >
+      <Tabs.Screen
+        name='index'
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color }) => (
+            <Icon name={Home} size={24} color={color} />
+          ),
+        }}
+      />
+
+      <Tabs.Screen
+        name='settings'
+        options={{
+          title: 'Settings',
+          tabBarIcon: ({ color }) => (
+            <Icon name={Settings} size={24} color={color} />
+          ),
+        }}
+      />
+
+      <Tabs.Screen
+        name='search'
+        options={{
+          title: 'Search',
+          tabBarIcon: ({ color }) => (
+            <Icon name={Search} size={24} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/search/_layout.tsx

@@ -0,0 +1,60 @@
+import { Text } from '@/components/ui/text';
+import { useColor } from '@/hooks/useColor';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { SearchProvider, useSearch } from '@/providers/search-context';
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+import { Stack } from 'expo-router';
+import { Platform } from 'react-native';
+
+function SearchLayoutContent() {
+  const theme = useColorScheme();
+  const text = useColor('text');
+  const background = useColor('background');
+  const { setSearchText } = useSearch();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerLargeTitle: true,
+        headerLargeTitleShadowVisible: false,
+        headerTintColor: text,
+        headerBlurEffect: isLiquidGlassAvailable()
+          ? undefined
+          : theme === 'dark'
+          ? 'systemMaterialDark'
+          : 'systemMaterialLight',
+        headerStyle: {
+          backgroundColor: isLiquidGlassAvailable()
+            ? 'transparent'
+            : background,
+        },
+      }}
+    >
+      <Stack.Screen
+        name='index'
+        options={{
+          title: 'Search',
+          headerTitle: () =>
+            Platform.OS === 'android' ? (
+              <Text variant='heading'>Search</Text>
+            ) : undefined,
+          headerSearchBarOptions: {
+            placement: 'automatic',
+            placeholder: 'Search',
+            onChangeText: (event) => {
+              setSearchText(event.nativeEvent.text);
+            },
+          },
+        }}
+      />
+    </Stack>
+  );
+}
+
+export default function SearchLayout() {
+  return (
+    <SearchProvider>
+      <SearchLayoutContent />
+    </SearchProvider>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/search/index.tsx

@@ -0,0 +1,44 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useSearch } from '@/providers/search-context';
+
+export default function SearchScreen() {
+  const { searchText } = useSearch();
+
+  return (
+    <ScrollView
+      style={{
+        flex: 1,
+        padding: 24,
+      }}
+    >
+      <View style={{ gap: 16 }}>
+        <Text
+          variant='heading'
+          style={{
+            textAlign: 'center',
+          }}
+        >
+          BNA Search Screen
+        </Text>
+
+        {searchText ? (
+          <View style={{ marginTop: 20 }}>
+            <Text variant='title' style={{ marginBottom: 8 }}>
+              Search Query:
+            </Text>
+            <Text variant='body'>{searchText}</Text>
+          </View>
+        ) : (
+          <Text
+            variant='caption'
+            style={{ textAlign: 'center', marginTop: 20 }}
+          >
+            Start typing in the search bar...
+          </Text>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/settings/_layout.tsx

@@ -0,0 +1,42 @@
+import { Stack } from 'expo-router';
+import { useColor } from '@/hooks/useColor';
+import { Platform, useColorScheme } from 'react-native';
+import { Text } from '@/components/ui/text';
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+
+export default function SettingsLayout() {
+  const theme = useColorScheme();
+  const text = useColor('text');
+  const background = useColor('background');
+
+  return (
+    <Stack
+      screenOptions={{
+        headerLargeTitle: true,
+        headerLargeTitleShadowVisible: false,
+        headerTintColor: text,
+        headerBlurEffect: isLiquidGlassAvailable()
+          ? undefined
+          : theme === 'dark'
+            ? 'systemMaterialDark'
+            : 'systemMaterialLight',
+        headerStyle: {
+          backgroundColor: isLiquidGlassAvailable()
+            ? 'transparent'
+            : background,
+        },
+      }}
+    >
+      <Stack.Screen
+        name='index'
+        options={{
+          title: 'Settings',
+          headerTitle: () =>
+            Platform.OS === 'android' ? (
+              <Text variant='heading'>Settings</Text>
+            ) : undefined,
+        }}
+      />
+    </Stack>
+  );
+}

package/dist/templates/start-convex/app/(tabs)/settings/index.tsx

@@ -0,0 +1,49 @@
+import { SignOutButton } from '@/components/auth/singout';
+import { ModeToggle } from '@/components/ui/mode-toggle';
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Spinner } from '@/components/ui/spinner';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { api } from '@/convex/_generated/api';
+import { useQuery } from 'convex/react';
+
+export default function SettingsScreen() {
+  const user = useQuery(api.auth.loggedInUser);
+
+  if (user === undefined) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Spinner variant='circle' />
+      </View>
+    );
+  }
+
+  if (user === null) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text>Not Authenticated</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={{
+        flex: 1,
+        gap: 18,
+        paddingTop: 96,
+        alignItems: 'center',
+      }}
+    >
+      <ModeToggle />
+
+      <View style={{ alignItems: 'center' }}>
+        <Text variant='title'>Your convex user Id</Text>
+        <Text variant='caption'>{user._id}</Text>
+      </View>
+
+      <SignOutButton />
+    </ScrollView>
+  );
+}

package/dist/templates/start-convex/app/+not-found.tsx

@@ -0,0 +1,24 @@
+import { Stack } from 'expo-router';
+
+import { Link } from '@/components/ui/link';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 20,
+        }}
+      >
+        <Text>This screen does not exist.</Text>
+        <Link href='/'>Go to home screen!</Link>
+      </View>
+    </>
+  );
+}