expo-app-ui 1.0.1 → 1.0.3

package/README.md

@@ -1,8 +1,25 @@
-# Expo UI
+# Expo App UI
 
 A UI component library for Expo React Native. Copy components directly into your project and customize them to your needs.
 
-## Installation
+## 📚 Documentation
+
+**👉 [View Full Documentation →](https://expo-apps-ui.vercel.app)**
+
+For complete documentation, usage examples, API references, and detailed instructions, visit our documentation site:
+
+**https://expo-apps-ui.vercel.app**
+
+The documentation includes:
+- 📖 Getting Started Guide
+- 🎨 Component Documentation
+- 🛠️ CLI Commands Reference
+- 💡 Usage Examples
+- 🔧 Configuration Guides
+
+## Quick Start
+
+### Installation
 
 You can use this library directly with npx:
 
@@ -26,14 +43,14 @@ expo-app-ui add <component-name>
 
 ### Adding Components
 
-To add a component to your project:
+Add a component to your project:
 
 ```bash
 npx expo-app-ui add custom-text
 ```
 
 This will:
-- Copy the component template to `components/ui/CustomText.tsx` in your project
+- Copy the component template to `components/ui/custom-text.tsx` in your project
 - Automatically detect and add required dependencies (helpers, constants)
 - Preserve all imports and dependencies
 - Allow you to customize the component as needed
@@ -44,44 +61,33 @@ npx expo-app-ui add button
 # Automatically adds normalizeSize helper and theme constants if needed
 ```
 
-### Adding Helpers
-
-To add a helper utility:
+### Adding Helpers, Constants, and Contexts
 
 ```bash
+# Add a helper
 npx expo-app-ui add normalizeSize
-```
-
-This will copy the helper to `helpers/normalizeSize.ts` in your project.
 
-### Adding Constants
-
-To add constants (like theme):
-
-```bash
+# Add constants
 npx expo-app-ui add theme
-```
-
-This will copy the constants to `constants/theme.ts` in your project.
 
-**Note:** The `theme` constant requires the `normalizeSize` helper. If you add `theme` first, you'll be prompted to add `normalizeSize`.
+# Add contexts (e.g., top loading bar)
+npx expo-app-ui add top-loading-bar
+```
 
 ### Listing Available Items
 
-To see all available components, helpers, and constants:
-
 ```bash
 npx expo-app-ui list
 ```
 
 ### Overwriting Existing Files
 
-To replace an existing component, helper, or constant:
-
 ```bash
 npx expo-app-ui add custom-text --overwrite
 ```
 
+> 📖 **For detailed usage instructions, examples, and API documentation, visit [expo-apps-ui.vercel.app](https://expo-apps-ui.vercel.app)**
+
 ## Project Structure
 
 After adding components, your project structure will look like:
@@ -105,9 +111,12 @@ your-project/
 The CLI automatically detects when a component requires:
 - `normalizeSize` helper (from `@/helper/normalizeSize`)
 - `theme` constants (from `@/constants/theme`)
+- Related components or contexts
 
 When you add a component that uses these dependencies, they will be automatically added to your project.
 
+> 📖 **Learn more about auto-dependency detection in the [documentation](https://expo-apps-ui.vercel.app/docs/cli)**
+
 ## Component Templates
 
 Components are copied directly into your project, so you have full control:
@@ -119,12 +128,13 @@ Components are copied directly into your project, so you have full control:
 
 ## Path Aliases
 
-Components use path aliases like `@/components/ui/CustomText` and `@/constants/theme`. Make sure your Expo project has these configured:
+Components use path aliases like `@/components/ui/custom-text` and `@/constants/theme`. Make sure your Expo project has these configured:
 
 **tsconfig.json:**
 ```json
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
@@ -149,6 +159,8 @@ module.exports = {
 };
 ```
 
+> 📖 **See the [Getting Started guide](https://expo-apps-ui.vercel.app/docs/getting-started) for detailed setup instructions**
+
 ## Available Components
 
 - `custom-text` - A customizable Text component with font, color, and spacing props
@@ -159,6 +171,11 @@ module.exports = {
 - `progress-bar` - A progress bar component with variants
 - `marquee` - A scrolling marquee component
 - `otp-input` - An OTP input component
+- `loading-bar` - An animated top loading bar component
+
+## Available Contexts
+
+- `top-loading-bar-context` - React Context for managing top loading bar state
 
 ## Available Helpers
 
@@ -168,15 +185,20 @@ module.exports = {
 
 - `theme` - Theme constants including colors, fonts, and sizes
 
+> 📖 **View complete documentation, props, examples, and usage for all components at [expo-apps-ui.vercel.app/docs/components](https://expo-apps-ui.vercel.app/docs/components)**
+
 ## Contributing
 
-To add new components, helpers, or constants:
+To add new components, helpers, constants, or contexts:
+
+1. **Components**: Create a new `.tsx` file in the `templates/components/ui/` directory
+2. **Contexts**: Create a new `.tsx` file in the `templates/context/` directory
+3. **Helpers**: Create a new `.ts` file in the `templates/helpers/` directory
+4. **Constants**: Create a new `.ts` file in the `templates/constants/` directory
+5. Use kebab-case for filenames (e.g., `my-component.tsx`)
+6. The item will be automatically available via the CLI
 
-1. **Components**: Create a new `.tsx` file in the `templates/` directory
-2. **Helpers**: Create a new `.ts` file in the `templates/helpers/` directory
-3. **Constants**: Create a new `.ts` file in the `templates/constants/` directory
-4. Use kebab-case for filenames (e.g., `my-component.tsx`)
-5. The item will be automatically available via the CLI
+> 📖 **For contribution guidelines and best practices, visit the [documentation](https://expo-apps-ui.vercel.app)**
 
 ## License
 

package/bin/expo-app-ui.js

@@ -45,8 +45,9 @@ program
         logger.error(`"${name}" not found.`);
         logger.info('Run "npx expo-app-ui list" to see available items.');
       } else if (error instanceof FileExistsError) {
-        logger.error(`File already exists: ${error.filePath}`);
-        logger.info('Use --overwrite to replace it.');
+        // User was prompted and chose not to overwrite, or non-interactive mode
+        logger.warning(`File already exists: ${error.filePath}`);
+        logger.info('Use --overwrite to replace it, or run the command again and choose "y" when prompted.');
       } else if (error instanceof InvalidInputError) {
         logger.error(error.message);
       } else if (error instanceof CLIError) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-app-ui",
-  "version": "1.0.1",
-  "description": "A UI component library for Expo React Native",
+  "version": "1.0.3",
+  "description": "A UI component library for Expo React Native. Copy components directly into your project and customize them to your needs. Documentation: https://expo-apps-ui.vercel.app",
   "main": "index.js",
   "bin": {
     "expo-app-ui": "bin/expo-app-ui.js"
@@ -18,12 +18,20 @@
   "keywords": [
     "expo",
     "react-native",
+    "android",
+    "ios",
     "ui",
     "components",
     "cli",
-    "component-library"
+    "component-library",
+    "expo-ui",
+    "react-native-components",
+    "mobile-ui",
+    "expo-components",
+    "ui-library",
+    "react-native-ui"
   ],
-  "author": "",
+  "author": "Krish Panchani",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +40,7 @@
   "bugs": {
     "url": "https://github.com/Krish-Panchani/expo-app-ui/issues"
   },
-    "homepage": "https://github.com/Krish-Panchani/expo-app-ui#readme",
+  "homepage": "https://expo-apps-ui.vercel.app",
   "engines": {
     "node": ">=14.0.0"
   },

package/src/commands/add.js

@@ -3,9 +3,26 @@ const fs = require('fs-extra');
 const { toKebabCase, toPascalCase, getPackageDir } = require('../utils/pathUtils');
 const { TemplateNotFoundError } = require('../utils/errors');
 const { readTemplate, writeFile, listTemplates } = require('../core/templateProcessor');
-const { detectDependencies } = require('../core/dependencyDetector');
+const { detectDependencies, detectRelatedContext, detectRelatedComponent } = require('../core/dependencyDetector');
 const Logger = require('../utils/logger');
 const Config = require('../utils/config');
+const { promptOverwrite } = require('../utils/prompt');
+
+/**
+ * Helper to create a file exists handler with prompt
+ */
+function createFileExistsHandler(options) {
+  return async (filePath) => {
+    if (options.overwrite) {
+      return true; // Already confirmed via --overwrite flag
+    }
+    // Check if we're in interactive mode (not silent and TTY)
+    if (!options.silent && process.stdin.isTTY) {
+      return await promptOverwrite(filePath);
+    }
+    return false; // Non-interactive, don't overwrite
+  };
+}
 
 /**
  * Add a helper file
@@ -25,11 +42,13 @@ async function addHelper(helperName, options = {}) {
     logger.debug(`Looking for template: ${templatePath}`);
     
     const content = await readTemplate(templatePath);
+    const handleFileExists = createFileExistsHandler(options);
     const validatedPath = await writeFile(
       targetPath,
       content,
       projectRoot,
-      options.overwrite || false
+      options.overwrite || false,
+      handleFileExists
     );
 
     if (!options.silent) {
@@ -91,11 +110,13 @@ async function addConstant(constantName, options = {}) {
       }
     }
 
+    const handleFileExists = createFileExistsHandler(options);
     const validatedPath = await writeFile(
       targetPath,
       content,
       projectRoot,
-      options.overwrite || false
+      options.overwrite || false,
+      handleFileExists
     );
 
     if (!options.silent) {
@@ -132,7 +153,20 @@ async function addComponent(componentName, options = {}) {
   const packageDir = getPackageDir();
   const templatesDir = path.join(packageDir, 'templates');
   
+  // Track processing to prevent circular dependencies
+  const processingSet = options.processingSet || new Set();
   const kebabName = toKebabCase(componentName);
+  
+  // Check if already processing this component to prevent infinite loops
+  const itemKey = `component:${kebabName}`;
+  if (processingSet.has(itemKey)) {
+    logger.debug(`Skipping ${componentName} - already being processed`);
+    return true;
+  }
+  
+  // Mark as processing
+  processingSet.add(itemKey);
+  
   const templatePath = path.join(templatesDir, 'components', 'ui', `${kebabName}.tsx`);
   const targetPath = path.join(config.getComponentsDir(), `${kebabName}.tsx`);
 
@@ -161,6 +195,20 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
+    // Check for related context (but skip if already processing to prevent loops)
+    // Only check if we're not being called from addContext (to prevent circular detection)
+    let relatedContext = null;
+    if (!options.skipRelatedCheck) {
+      relatedContext = detectRelatedContext(kebabName, templatesDir);
+      if (relatedContext) {
+        const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
+        const contextKey = `context:${relatedContext}`;
+        if (!fs.existsSync(contextPath) && !processingSet.has(contextKey)) {
+          dependenciesToAdd.push(`${relatedContext} context`);
+        }
+      }
+    }
+
     // Show summary of what will be added
     if (dependenciesToAdd.length > 0) {
       logger.info(`\nDetected dependencies: ${dependenciesToAdd.join(', ')}`);
@@ -192,11 +240,30 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
+    // Add related context if needed (pass processingSet to prevent loops)
+    // Only add if we're not being called from addContext (to prevent circular detection)
+    if (!options.skipRelatedCheck && relatedContext) {
+      const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
+      const contextKey = `context:${relatedContext}`;
+      if (!fs.existsSync(contextPath) && !processingSet.has(contextKey)) {
+        await addContext(relatedContext, {
+          logger,
+          config,
+          silent: false,
+          overwrite: false,
+          processingSet,
+          skipRelatedCheck: true, // Prevent context from checking for related component again
+        });
+      }
+    }
+
+    const handleFileExists = createFileExistsHandler(options);
     const validatedPath = await writeFile(
       targetPath,
       content,
       projectRoot,
-      options.overwrite || false
+      options.overwrite || false,
+      handleFileExists
     );
 
     logger.success(`Added ${componentName} component to ${path.relative(projectRoot, validatedPath)}`);
@@ -237,20 +304,74 @@ async function addContext(contextName, options = {}) {
   const packageDir = getPackageDir();
   const templatesDir = path.join(packageDir, 'templates');
   
+  // Track processing to prevent circular dependencies
+  const processingSet = options.processingSet || new Set();
   const kebabName = toKebabCase(contextName);
+  
+  // Check if already processing this context to prevent infinite loops
+  const itemKey = `context:${kebabName}`;
+  if (processingSet.has(itemKey)) {
+    logger.debug(`Skipping ${contextName} - already being processed`);
+    return true;
+  }
+  
+  // Mark as processing
+  processingSet.add(itemKey);
+  
   const templatePath = path.join(templatesDir, 'context', `${kebabName}.tsx`);
   const contextDir = path.join(projectRoot, 'context');
-  const targetPath = path.join(contextDir, `${toPascalCase(kebabName)}.tsx`);
+  const targetPath = path.join(contextDir, `${kebabName}.tsx`);
 
   try {
     logger.debug(`Looking for template: ${templatePath}`);
     
     const content = await readTemplate(templatePath);
+    
+    // Detect dependencies including related component
+    const dependencies = detectDependencies(content);
+    
+    // Check for related component (but skip if already processing to prevent loops)
+    const relatedComponent = detectRelatedComponent(kebabName, templatesDir);
+    const dependenciesToAdd = [];
+    
+    if (relatedComponent) {
+      const componentPath = path.join(config.getComponentsDir(), `${relatedComponent}.tsx`);
+      const componentKey = `component:${relatedComponent}`;
+      if (!fs.existsSync(componentPath) && !processingSet.has(componentKey)) {
+        dependenciesToAdd.push(`${relatedComponent} component`);
+      }
+    }
+
+    // Show summary of what will be added
+    if (dependenciesToAdd.length > 0) {
+      logger.info(`\nDetected dependencies: ${dependenciesToAdd.join(', ')}`);
+      logger.debug('Adding required dependencies...\n');
+    }
+
+    // Add related component if needed (pass processingSet to prevent loops)
+    // Skip related check to prevent circular detection
+    if (relatedComponent) {
+      const componentPath = path.join(config.getComponentsDir(), `${relatedComponent}.tsx`);
+      const componentKey = `component:${relatedComponent}`;
+      if (!fs.existsSync(componentPath) && !processingSet.has(componentKey)) {
+        await addComponent(relatedComponent, {
+          logger,
+          config,
+          silent: false,
+          overwrite: false,
+          processingSet,
+          skipRelatedCheck: true, // Prevent component from checking for related context again
+        });
+      }
+    }
+
+    const handleFileExists = createFileExistsHandler(options);
     const validatedPath = await writeFile(
       targetPath,
       content,
       projectRoot,
-      options.overwrite || false
+      options.overwrite || false,
+      handleFileExists
     );
 
     if (!options.silent) {
@@ -277,6 +398,7 @@ async function addTopLoadingBar(options = {}) {
   const packageDir = getPackageDir();
   const templatesDir = path.join(packageDir, 'templates');
   const overwrite = options.overwrite || false;
+  const handleFileExists = createFileExistsHandler(options);
   
   logger.info('Adding Top Loading Bar (context + component)...\n');
   
@@ -291,7 +413,8 @@ async function addTopLoadingBar(options = {}) {
       targetComponentPath,
       content,
       projectRoot,
-      overwrite
+      overwrite,
+      handleFileExists
     );
     logger.success(`Added loading-bar component to ${path.relative(projectRoot, validatedPath)}`);
   } else {
@@ -309,7 +432,8 @@ async function addTopLoadingBar(options = {}) {
       targetContextPath,
       content,
       projectRoot,
-      overwrite
+      overwrite,
+      handleFileExists
     );
     logger.success(`Added top-loading-bar-context to ${path.relative(projectRoot, validatedPath)}`);
   } else {
@@ -372,10 +496,13 @@ async function handleAdd(name, options = {}) {
     return await addTopLoadingBar({ logger, config, overwrite });
   }
   
+  // Initialize processing set to track items and prevent circular dependencies
+  const processingSet = new Set();
+  
   // Check if it's a component (look in components/ui/)
   const componentPath = path.join(templatesDir, 'components', 'ui', `${kebabName}.tsx`);
   if (fs.existsSync(componentPath)) {
-    return await addComponent(name, { logger, config, overwrite });
+    return await addComponent(name, { logger, config, overwrite, processingSet });
   }
 
   // Check if it's a helper
@@ -394,11 +521,11 @@ async function handleAdd(name, options = {}) {
   const contextPathKebab = path.join(templatesDir, 'context', `${kebabName}.tsx`);
   const contextPathPascal = path.join(templatesDir, 'context', `${toPascalCase(kebabName)}.tsx`);
   if (fs.existsSync(contextPathKebab)) {
-    return await addContext(name, { logger, config, overwrite });
+    return await addContext(name, { logger, config, overwrite, processingSet });
   } else if (fs.existsSync(contextPathPascal)) {
     // Use the actual file name
     const actualName = path.basename(contextPathPascal, '.tsx');
-    return await addContext(actualName, { logger, config, overwrite });
+    return await addContext(actualName, { logger, config, overwrite, processingSet });
   }
 
   // Not found

package/src/core/dependencyDetector.js

@@ -8,12 +8,16 @@ function detectDependencies(content) {
     return {
       needsNormalizeSize: false,
       needsTheme: false,
+      needsComponent: null,
+      needsContext: null,
     };
   }
 
   const dependencies = {
     needsNormalizeSize: false,
     needsTheme: false,
+    needsComponent: null,
+    needsContext: null,
   };
 
   // More precise pattern matching
@@ -23,10 +27,88 @@ function detectDependencies(content) {
   dependencies.needsNormalizeSize = normalizeSizePattern.test(content);
   dependencies.needsTheme = themePattern.test(content);
 
+  // Detect component imports in context files
+  const componentImportPattern = /from\s+['"]@\/components\/ui\/([^'"]+)['"]/;
+  const componentMatch = content.match(componentImportPattern);
+  if (componentMatch) {
+    dependencies.needsComponent = componentMatch[1]; // e.g., "loading-bar"
+  }
+
+  // Detect context imports in component files
+  const contextImportPattern = /from\s+['"]@\/context\/([^'"]+)['"]/;
+  const contextMatch = content.match(contextImportPattern);
+  if (contextMatch) {
+    dependencies.needsContext = contextMatch[1]; // e.g., "top-loading-bar-context"
+  }
+
   return dependencies;
 }
 
+/**
+ * Detect related context for a component
+ * @param {string} componentName - Component name in kebab-case
+ * @param {string} templatesDir - Templates directory
+ * @returns {string|null} Related context name or null
+ */
+function detectRelatedContext(componentName, templatesDir) {
+  const fs = require('fs-extra');
+  const path = require('path');
+  
+  // Check all context files to see if any imports this component
+  const contextDir = path.join(templatesDir, 'context');
+  if (!fs.existsSync(contextDir)) {
+    return null;
+  }
+
+  const contextFiles = fs.readdirSync(contextDir).filter(file => file.endsWith('.tsx'));
+  
+  for (const contextFile of contextFiles) {
+    const contextPath = path.join(contextDir, contextFile);
+    const content = fs.readFileSync(contextPath, 'utf-8');
+    
+    // Check if this context imports the component
+    // Escape special regex characters in componentName
+    const escapedComponentName = componentName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const componentImportPattern = new RegExp(`@/components/ui/${escapedComponentName}`);
+    if (componentImportPattern.test(content)) {
+      return path.basename(contextFile, '.tsx');
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Detect related component for a context
+ * @param {string} contextName - Context name in kebab-case
+ * @param {string} templatesDir - Templates directory
+ * @returns {string|null} Related component name or null
+ */
+function detectRelatedComponent(contextName, templatesDir) {
+  const fs = require('fs-extra');
+  const path = require('path');
+  
+  const contextPath = path.join(templatesDir, 'context', `${contextName}.tsx`);
+  if (!fs.existsSync(contextPath)) {
+    return null;
+  }
+
+  const content = fs.readFileSync(contextPath, 'utf-8');
+  
+  // Extract component name from import
+  const componentImportPattern = /from\s+['"]@\/components\/ui\/([^'"]+)['"]/;
+  const match = content.match(componentImportPattern);
+  
+  if (match) {
+    return match[1]; // e.g., "loading-bar"
+  }
+
+  return null;
+}
+
 module.exports = {
   detectDependencies,
+  detectRelatedContext,
+  detectRelatedComponent,
 };
 

package/src/core/templateProcessor.js

@@ -30,16 +30,26 @@ async function readTemplate(templatePath) {
  * @param {string} content - File content
  * @param {string} baseDir - Base directory for validation
  * @param {boolean} overwrite - Whether to overwrite existing file
- * @throws {FileExistsError} If file exists and overwrite is false
+ * @param {Function} onExists - Optional callback when file exists (returns Promise<boolean>)
+ * @throws {FileExistsError} If file exists and overwrite is false and onExists is not provided
  * @throws {CLIError} If path validation fails
  */
-async function writeFile(targetPath, content, baseDir, overwrite = false) {
+async function writeFile(targetPath, content, baseDir, overwrite = false, onExists = null) {
   // Validate path
   const validatedPath = validatePath(targetPath, baseDir);
   
   // Check if file exists
   if (fs.existsSync(validatedPath) && !overwrite) {
-    throw new FileExistsError(validatedPath);
+    // If callback is provided, use it to ask user
+    if (onExists && typeof onExists === 'function') {
+      const shouldOverwrite = await onExists(validatedPath);
+      if (!shouldOverwrite) {
+        throw new FileExistsError(validatedPath);
+      }
+      // User confirmed, proceed with overwrite
+    } else {
+      throw new FileExistsError(validatedPath);
+    }
   }
 
   // Ensure directory exists

package/src/utils/pathUtils.js

@@ -55,38 +55,121 @@ function validatePath(filePath, baseDir) {
   return resolved;
 }
 
+// Cache the package directory to avoid repeated lookups
+let cachedPackageDir = null;
+
 /**
  * Get package directory - works from any context
  * @returns {string} Package directory path
  */
 function getPackageDir() {
-  // Start from the current file's directory
+  // Return cached value if available
+  if (cachedPackageDir) {
+    return cachedPackageDir;
+  }
+  
+  // Strategy 1: Use require.main.filename (works when running as CLI via npx or node)
+  // When running via npx, require.main points to the bin script
+  try {
+    if (require.main && require.main.filename) {
+      let currentDir = path.dirname(require.main.filename);
+      
+      // Search up from bin script location
+      let depth = 0;
+      while (currentDir !== path.dirname(currentDir) && depth < 10) {
+        const packageJsonPath = path.join(currentDir, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+          try {
+            const pkg = fs.readJsonSync(packageJsonPath);
+            if (pkg.name === 'expo-app-ui') {
+              const templatesPath = path.join(currentDir, 'templates');
+              if (fs.existsSync(templatesPath)) {
+                cachedPackageDir = currentDir;
+                return cachedPackageDir;
+              }
+            }
+          } catch (err) {
+            // Continue searching
+          }
+        }
+        currentDir = path.dirname(currentDir);
+        depth++;
+      }
+    }
+  } catch (error) {
+    // Continue to next strategy
+  }
+  
+  // Strategy 2: Try require.resolve for package.json (works when installed via npm/npx)
+  try {
+    const packageJsonPath = require.resolve('expo-app-ui/package.json', { paths: [process.cwd(), __dirname] });
+    cachedPackageDir = path.dirname(packageJsonPath);
+    // Verify it has templates directory
+    const templatesPath = path.join(cachedPackageDir, 'templates');
+    if (fs.existsSync(templatesPath)) {
+      return cachedPackageDir;
+    }
+  } catch (error) {
+    // Continue to next strategy
+  }
+  
+  // Strategy 3: Use relative path from current file (works for local development)
+  try {
+    // Go up from src/utils/pathUtils.js to package root
+    let currentDir = path.dirname(path.dirname(__dirname));
+    
+    const packageJsonPath = path.join(currentDir, 'package.json');
+    const templatesPath = path.join(currentDir, 'templates');
+    if (fs.existsSync(packageJsonPath) && fs.existsSync(templatesPath)) {
+      try {
+        const pkg = fs.readJsonSync(packageJsonPath);
+        if (pkg.name === 'expo-app-ui') {
+          cachedPackageDir = currentDir;
+          return cachedPackageDir;
+        }
+      } catch (err) {
+        // Continue to next strategy
+      }
+    }
+  } catch (error) {
+    // Continue to next strategy
+  }
+  
+  // Strategy 3: Search from current file's directory
   let currentDir = __dirname;
   
-  // If we're in src/utils, go up to project root
-  // If we're in bin/, go up to project root
+  // If we're in src/utils or src/commands, go up two levels
+  if (currentDir.endsWith(path.join('src', 'utils')) || currentDir.endsWith(path.join('src', 'commands'))) {
+    currentDir = path.dirname(path.dirname(currentDir));
+  } else if (currentDir.includes(path.sep + 'src' + path.sep)) {
+    currentDir = path.dirname(currentDir);
+  }
+  
+  // Verify and search up if needed
   while (currentDir !== path.dirname(currentDir)) {
     const packageJsonPath = path.join(currentDir, 'package.json');
     if (fs.existsSync(packageJsonPath)) {
       try {
         const pkg = fs.readJsonSync(packageJsonPath);
-        if (pkg.bin && (pkg.bin['expo-app-ui'] || pkg.name === 'expo-app-ui')) {
-          return currentDir;
+        if (pkg.name === 'expo-app-ui') {
+          cachedPackageDir = currentDir;
+          return cachedPackageDir;
         }
-      } catch (error) {
+      } catch (err) {
         // Continue searching
       }
     }
     currentDir = path.dirname(currentDir);
   }
   
-  // Fallback: if we're in src/utils, go up two levels
+  // Final fallback (shouldn't normally reach here)
   if (__dirname.includes('src')) {
-    return path.dirname(path.dirname(__dirname));
+    cachedPackageDir = path.dirname(path.dirname(__dirname));
+  } else {
+    cachedPackageDir = path.dirname(__dirname);
   }
   
-  // If we're in bin/, go up one level
-  return path.dirname(__dirname);
+  return cachedPackageDir;
 }
 
 /**

package/src/utils/prompt.js

@@ -0,0 +1,42 @@
+const readline = require('readline');
+
+/**
+ * Prompt user for confirmation
+ * @param {string} message - Message to display
+ * @returns {Promise<boolean>} User's response (true for yes, false for no)
+ */
+function promptUser(message) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+
+    rl.question(`${message} (y/N): `, (answer) => {
+      rl.close();
+      // Default to 'no' if empty or anything other than 'y'/'Y'/'yes'/'YES'
+      const normalized = answer.trim().toLowerCase();
+      resolve(normalized === 'y' || normalized === 'yes');
+    });
+  });
+}
+
+/**
+ * Prompt user to overwrite existing file
+ * @param {string} filePath - Path to the file that exists
+ * @returns {Promise<boolean>} true if user wants to overwrite, false otherwise
+ */
+async function promptOverwrite(filePath) {
+  const path = require('path');
+  const relativePath = path.relative(process.cwd(), filePath);
+  
+  return await promptUser(
+    `File "${relativePath}" already exists. Do you want to overwrite it?`
+  );
+}
+
+module.exports = {
+  promptUser,
+  promptOverwrite,
+};
+

package/templates/components/ui/button.tsx

@@ -7,9 +7,8 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } from "react-native";
-import { colors, fonts, size } from "@/constants/theme";
+
 import { ActivityIndicator } from "react-native";
-import { normalizeSize } from "@/helper/normalizeSize";
 
 type ButtonVariant = {
   backgroundColor?: string;
@@ -62,11 +61,11 @@ const Button = ({
   IconCenter, // New IconCenter prop
   style, // Custom style for the button container
   textStyle, // Custom style for the text
-  fontSize = normalizeSize(size.md), // Default font size
+  fontSize = 18, // Default font size
   fontWeight = "normal", // Default font weight
   textColor = "#fff", // Default text color
   borderColor = "#d3d3d3",
-  bgColor = colors.primary, // Default background color
+  bgColor = "black", // Default background color
   hideTextWithCenterIcon = false, // Default to false (show text with center icon)
   ...props
 }: ButtonPropsExtended) => {
@@ -171,7 +170,7 @@ const Button = ({
                 styles.buttonText,
                 {
                   color: variantStyles.textColor,
-                  fontFamily: fonts.inter,
+                  // fontFamily: fonts.inter, // Commented out to avoid using fonts.inter
                   // Hide text visually (but keep it for screen readers) if IconCenter is present and hideTextWithCenterIcon is true
                   opacity: IconCenter && hideTextWithCenterIcon ? 0 : 1,
                 },

package/templates/components/ui/profile-pic.tsx

@@ -1,7 +1,13 @@
-import { ActivityIndicator, View, ViewStyle } from "react-native";
+import React from "react";
+import { ActivityIndicator, View, ViewStyle, Text } from "react-native";
 import { Image } from "expo-image";
-import { colors, size } from "@/constants/theme";
-import CustomText from "@/components/ui/CustomText";
+
+// Default colors - using black and white as defaults
+const defaultColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  primary: "#000000", // Default to black
+};
 
 interface ProfilePicProps {
   source?: string;
@@ -24,10 +30,10 @@ const ProfilePic = ({
   username,
   width = 50,
   height = 50,
-  borderColor = colors.white,
+  borderColor = defaultColors.white,
   borderWidth = 1,
   borderRadius = 50,
-  backgroundColor = colors.primary,
+  backgroundColor = defaultColors.primary,
   isLoading = false,
   style,
 }: ProfilePicProps) => {
@@ -47,8 +53,7 @@ const ProfilePic = ({
     return (
       <View style={[combinedStyle, style]}>
         <ActivityIndicator
-          color={colors.white}
-          // style={{ borderColor: colors.white }}
+          color={defaultColors.white}
         />
       </View>
     );
@@ -65,9 +70,15 @@ const ProfilePic = ({
           transition={1000}
         />
       ) : (
-        <CustomText color={colors.white} fontSize={size.lg}>
+        <Text
+          style={{
+            color: defaultColors.white,
+            fontSize: 20,
+          }}
+          allowFontScaling={false}
+        >
           {username ? username.charAt(0).toUpperCase() : "Z"}
-        </CustomText>
+        </Text>
       )}
     </View>
   );

package/templates/components/ui/progress-bar.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useRef } from "react";
 import { Animated, StyleSheet, Text, View } from "react-native";
-import BoxView from "@/components/ui/BoxView";
-import CustomText from "@/components/ui/CustomText";
-import { colors } from "@/constants/theme";
+
+// Default colors - using black and white as defaults
+const defaultColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  darkGray: "#1C1C1E",
+  forest_green: "#228B22", // Keep forest_green for progress bar
+};
 
 interface CustomProgressBarProps {
   progress?: number;
@@ -20,7 +25,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
   progress,
   width = 300,
   height = 20,
-  color = colors.forest_green,
+  color = defaultColors.forest_green,
   backgroundColor = "#e0e0e0",
   label = "",
   variant = "normal",
@@ -69,18 +74,33 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
           ]}
         />
         {variant === "count" && (
-          <BoxView
-            flexDirection="row"
-            justifyContent="space-between"
-            style={{ position: "absolute", right: 10, left: 10, top: 5 }}
+          <View
+            style={{
+              position: "absolute",
+              right: 10,
+              left: 10,
+              top: 5,
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
           >
-            <CustomText color={colors.white} fontWeight="700">
+            <Text
+              style={{
+                color: defaultColors.white,
+                fontWeight: "700",
+              }}
+            >
               {currentCount}
-            </CustomText>
-            <CustomText color={colors.darkGray} fontWeight="700">
+            </Text>
+            <Text
+              style={{
+                color: defaultColors.darkGray,
+                fontWeight: "700",
+              }}
+            >
               {count}
-            </CustomText>
-          </BoxView>
+            </Text>
+          </View>
         )}
       </View>
     </View>