kynjal-cli 2.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ahmed BNA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,145 @@
+# BNA UI 🚀
+
+![BNA UI Header](https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/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 adding components
+npx bna-ui add button
+npx bna-ui add card
+npx bna-ui add input
+```
+
+## 🎯 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',
+    // ... more colors
+  },
+};
+
+export const darkTheme = {
+  colors: {
+    background: '#000000',
+    foreground: '#FFFFFF',
+    card: '#1C1C1E',
+    // ... 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/)
+- 𝕏 : [@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/bin/kynjal.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path, { dirname } from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+// Get __dirname equivalent in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Check if TypeScript is compiled
+const distPath = path.join(__dirname, '../dist/index.js');
+
+if (!fs.existsSync(distPath)) {
+  console.error('❌ CLI not built. Please run: npm run build');
+  process.exit(1);
+}
+
+// Import and execute the built CLI module
+try {
+  // Convert file path to file URL for proper ES module import
+  const fileUrl = pathToFileURL(distPath).href;
+  await import(fileUrl);
+} catch (error) {
+  console.error('❌ Failed to start CLI:', error.message);
+  process.exit(1);
+}

package/dist/commands/add.d.ts

@@ -0,0 +1,11 @@
+interface AddCommandOptions {
+    overwrite?: boolean;
+    dryRun?: boolean;
+    yes?: boolean;
+    npm?: boolean;
+    yarn?: boolean;
+    pnpm?: boolean;
+    bun?: boolean;
+}
+export declare function addCommand(components: string[], options: AddCommandOptions): Promise<void>;
+export {};

package/dist/commands/add.js

@@ -0,0 +1,295 @@
+// src/commands/add.ts
+import { REGISTRY, getComponent, resolveAllDependencies, } from '../registry/index.js';
+import { logger } from '../utils/logger.js';
+import { validateProjectStructure, installComponent, checkComponentConflicts, } from '../utils/registry.js';
+import { installPackageDependencies, checkExistingDependencies, } from '../utils/dependencies.js';
+import { detectPackageManagerFromInvocation } from '../utils/package-manager.js';
+import { getComponentTemplate } from '../utils/registry.js';
+import { writeFile, fileExists, createDirectory } from '../utils/filesystem.js';
+import path from 'path';
+import inquirer from 'inquirer';
+import ora from 'ora';
+export async function addCommand(components, options) {
+    try {
+        const projectPath = process.cwd();
+        // Validate project structure
+        const isValidProject = await validateProjectStructure(projectPath);
+        if (!isValidProject) {
+            logger.error('This command must be run in a valid React Native/Expo project');
+            process.exit(1);
+        }
+        // If no components specified, show interactive selection
+        if (components.length === 0) {
+            components = await selectComponentsInteractively();
+        }
+        // Validate components exist in registry
+        const invalidComponents = components.filter((name) => !getComponent(name));
+        if (invalidComponents.length > 0) {
+            logger.error(`Unknown components: ${invalidComponents.join(', ')}`);
+            logger.info('Available components:');
+            Object.values(REGISTRY)
+                .filter((comp) => comp.type === 'registry:ui')
+                .forEach((comp) => logger.plain(`  ${comp.name}`));
+            process.exit(1);
+        }
+        // Determine package manager
+        const packageManager = getPackageManager(options);
+        // Resolve all dependencies for requested components
+        const allComponentsToInstall = new Set();
+        const allPackageDependencies = new Set();
+        const allHookDependencies = new Set();
+        const allThemeDependencies = new Set();
+        for (const componentName of components) {
+            const dependencies = resolveAllDependencies(componentName);
+            dependencies.forEach((dep) => allComponentsToInstall.add(dep));
+            // Collect all package dependencies
+            dependencies.forEach((dep) => {
+                const component = getComponent(dep);
+                if (component) {
+                    (component.dependencies || []).forEach((pkgDep) => allPackageDependencies.add(pkgDep));
+                    (component.hooks || []).forEach((hook) => allHookDependencies.add(hook));
+                    (component.theme || []).forEach((theme) => allThemeDependencies.add(theme));
+                }
+            });
+        }
+        // Check for conflicts
+        const { conflicts } = await checkComponentConflicts(Array.from(allComponentsToInstall), projectPath, REGISTRY);
+        // Handle conflicts more granularly
+        const componentsToSkip = new Set();
+        let shouldOverwriteAll = options.overwrite || false;
+        if (conflicts.length > 0 && !shouldOverwriteAll) {
+            logger.warn('The following files already exist:');
+            conflicts.forEach(({ component, files }) => {
+                logger.plain(`  ${component}:`);
+                files.forEach((file) => logger.plain(`    ${file}`));
+            });
+            if (!options.yes) {
+                const { overwriteChoice } = await inquirer.prompt([
+                    {
+                        type: 'list',
+                        name: 'overwriteChoice',
+                        message: 'How would you like to handle existing files?',
+                        choices: [
+                            { name: 'Overwrite all existing files', value: 'overwrite-all' },
+                            {
+                                name: 'Skip components with existing files',
+                                value: 'skip-conflicts',
+                            },
+                            {
+                                name: 'Choose for each component individually',
+                                value: 'individual',
+                            },
+                            { name: 'Cancel operation', value: 'cancel' },
+                        ],
+                        default: 'skip-conflicts',
+                    },
+                ]);
+                if (overwriteChoice === 'cancel') {
+                    logger.info('Operation cancelled');
+                    process.exit(0);
+                }
+                else if (overwriteChoice === 'overwrite-all') {
+                    shouldOverwriteAll = true;
+                }
+                else if (overwriteChoice === 'individual') {
+                    // Ask for each conflicting component individually
+                    for (const conflict of conflicts) {
+                        const { shouldOverwrite } = await inquirer.prompt([
+                            {
+                                type: 'confirm',
+                                name: 'shouldOverwrite',
+                                message: `Overwrite files for component "${conflict.component}"?`,
+                                default: false,
+                            },
+                        ]);
+                        if (!shouldOverwrite) {
+                            componentsToSkip.add(conflict.component);
+                        }
+                    }
+                }
+                else if (overwriteChoice === 'skip-conflicts') {
+                    // Skip all conflicting components
+                    conflicts.forEach(({ component }) => {
+                        componentsToSkip.add(component);
+                    });
+                }
+            }
+            else {
+                // If --yes flag is used, skip conflicting components by default
+                conflicts.forEach(({ component }) => {
+                    componentsToSkip.add(component);
+                });
+            }
+        }
+        // Filter out components to skip
+        const finalComponentsToInstall = Array.from(allComponentsToInstall).filter((comp) => !componentsToSkip.has(comp));
+        // Also filter out dependencies of skipped components
+        const finalHookDependencies = Array.from(allHookDependencies).filter((hook) => {
+            // Check if this hook is only needed by skipped components
+            const needingComponents = Array.from(allComponentsToInstall).filter((comp) => {
+                const component = getComponent(comp);
+                return component && (component.hooks || []).includes(hook);
+            });
+            return needingComponents.some((comp) => !componentsToSkip.has(comp));
+        });
+        const finalThemeDependencies = Array.from(allThemeDependencies).filter((theme) => {
+            // Check if this theme is only needed by skipped components
+            const needingComponents = Array.from(allComponentsToInstall).filter((comp) => {
+                const component = getComponent(comp);
+                return component && (component.theme || []).includes(theme);
+            });
+            return needingComponents.some((comp) => !componentsToSkip.has(comp));
+        });
+        // Show what will be installed vs skipped
+        if (componentsToSkip.size > 0) {
+            logger.info(`Skipping components: ${Array.from(componentsToSkip).join(', ')}`);
+        }
+        if (finalComponentsToInstall.length === 0) {
+            logger.warn('No components to install after handling conflicts');
+            process.exit(0);
+        }
+        // Show dry run information
+        if (options.dryRun) {
+            logger.info('Dry run - would install the following:');
+            logger.plain(`Components: ${finalComponentsToInstall.join(', ')}`);
+            if (allPackageDependencies.size > 0) {
+                logger.plain(`Package dependencies: ${Array.from(allPackageDependencies).join(', ')}`);
+            }
+            if (finalHookDependencies.length > 0) {
+                logger.plain(`Hook dependencies: ${finalHookDependencies.join(', ')}`);
+            }
+            if (finalThemeDependencies.length > 0) {
+                logger.plain(`Theme dependencies: ${finalThemeDependencies.join(', ')}`);
+            }
+            if (componentsToSkip.size > 0) {
+                logger.plain(`Skipped components: ${Array.from(componentsToSkip).join(', ')}`);
+            }
+            return;
+        }
+        // Install package dependencies (these are still needed for non-skipped components)
+        const packageDepsArray = Array.from(allPackageDependencies);
+        const missingPackageDeps = checkExistingDependencies(packageDepsArray, projectPath);
+        if (missingPackageDeps.length > 0) {
+            logger.info(`Installing package dependencies: ${missingPackageDeps.join(', ')}`);
+            await installPackageDependencies(missingPackageDeps, projectPath, packageManager);
+        }
+        // Install hook dependencies
+        await installAuxiliaryDependency(finalHookDependencies, 'hooks', projectPath, options);
+        // Install theme dependencies
+        await installAuxiliaryDependency(finalThemeDependencies, 'theme', projectPath, options);
+        // Install components
+        const spinner = ora('Installing components...').start();
+        const installedComponents = [];
+        try {
+            for (const componentName of finalComponentsToInstall) {
+                const component = getComponent(componentName);
+                if (!component)
+                    continue;
+                await installComponent(component, projectPath, {
+                    overwrite: shouldOverwriteAll,
+                    dryRun: false,
+                });
+                installedComponents.push(componentName);
+            }
+            spinner.succeed('Components installed successfully!');
+        }
+        catch (error) {
+            spinner.fail('Failed to install components');
+            throw error;
+        }
+        // Update components index
+        // await updateComponentsIndex(projectPath, installedComponents);
+        // Show success message
+        const successfullyRequestedComponents = components.filter((comp) => !componentsToSkip.has(comp));
+        if (successfullyRequestedComponents.length > 0) {
+            logger.success(`Successfully added ${successfullyRequestedComponents.length} component(s):`);
+            successfullyRequestedComponents.forEach((name) => logger.plain(`  ✓ ${name}`));
+        }
+        if (installedComponents.length > successfullyRequestedComponents.length) {
+            const additionalComponents = installedComponents.filter((name) => !successfullyRequestedComponents.includes(name));
+            logger.info(`Also installed dependencies: ${additionalComponents.join(', ')}`);
+        }
+        if (componentsToSkip.size > 0) {
+            logger.warn(`Skipped ${componentsToSkip.size} component(s) due to existing files: ${Array.from(componentsToSkip).join(', ')}`);
+        }
+        logger.newline();
+        logger.info('Next steps:');
+        logger.plain('  Import components from @/components/ui');
+        logger.plain('  Check the documentation for usage examples');
+    }
+    catch (error) {
+        logger.error('Failed to add components:', error);
+        process.exit(1);
+    }
+}
+async function selectComponentsInteractively() {
+    const availableComponents = Object.values(REGISTRY)
+        .filter((comp) => comp.type === 'registry:ui')
+        .map((comp) => ({
+        name: `${comp.name} - ${comp.description}`,
+        value: comp.name,
+    }));
+    const { selectedComponents } = await inquirer.prompt([
+        {
+            type: 'checkbox',
+            name: 'selectedComponents',
+            message: 'Select components to add:',
+            choices: availableComponents,
+            pageSize: 15,
+        },
+    ]);
+    if (selectedComponents.length === 0) {
+        logger.error('No components selected');
+        process.exit(1);
+    }
+    return selectedComponents;
+}
+function getPackageManager(options) {
+    if (options.npm)
+        return 'npm';
+    if (options.yarn)
+        return 'yarn';
+    if (options.pnpm)
+        return 'pnpm';
+    if (options.bun)
+        return 'bun';
+    return detectPackageManagerFromInvocation();
+}
+async function installAuxiliaryDependency(items, type, projectPath, options) {
+    if (items.length === 0)
+        return;
+    const targetDir = path.join(projectPath, type);
+    await createDirectory(targetDir);
+    for (const itemName of items) {
+        const itemPath = path.join(targetDir, `${itemName}.ts`);
+        if ((await fileExists(itemPath)) && !options.overwrite) {
+            if (!options.yes) {
+                const { shouldOverwrite } = await inquirer.prompt([
+                    {
+                        type: 'confirm',
+                        name: 'shouldOverwrite',
+                        message: `${type === 'hooks' ? 'Hook' : 'Theme'} ${itemName} already exists. Overwrite?`,
+                        default: false,
+                    },
+                ]);
+                if (!shouldOverwrite) {
+                    logger.info(`Skipping ${type === 'hooks' ? 'hook' : 'theme'}: ${itemName}`);
+                    continue;
+                }
+            }
+            else {
+                logger.info(`Skipping existing ${type === 'hooks' ? 'hook' : 'theme'}: ${itemName}`);
+                continue;
+            }
+        }
+        try {
+            const templatePath = `templates/${type}/${itemName}.ts`;
+            const template = await getComponentTemplate(templatePath);
+            await writeFile(itemPath, template);
+            logger.success(`Added ${type === 'hooks' ? 'hook' : 'theme'}: ${itemName}`);
+        }
+        catch (error) {
+            logger.warn(`Failed to install ${type === 'hooks' ? 'hook' : 'theme'} ${itemName}:`, error);
+        }
+    }
+}

package/dist/commands/convex.d.ts

@@ -0,0 +1,11 @@
+interface InitConvexOptions {
+    template?: string;
+    npm?: boolean;
+    yarn?: boolean;
+    pnpm?: boolean;
+    bun?: boolean;
+    skipInstall?: boolean;
+    skipConvex?: boolean;
+}
+export declare function initConvexCommand(projectName?: string, options?: InitConvexOptions): Promise<void>;
+export {};