expo-app-ui 1.0.1 → 1.0.2

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.2",
+  "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) {
@@ -161,6 +182,15 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
+    // Check for related context
+    const relatedContext = detectRelatedContext(kebabName, templatesDir);
+    if (relatedContext) {
+      const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
+      if (!fs.existsSync(contextPath)) {
+        dependenciesToAdd.push(`${relatedContext} context`);
+      }
+    }
+
     // Show summary of what will be added
     if (dependenciesToAdd.length > 0) {
       logger.info(`\nDetected dependencies: ${dependenciesToAdd.join(', ')}`);
@@ -192,11 +222,26 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
+    // Add related context if needed
+    if (relatedContext) {
+      const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
+      if (!fs.existsSync(contextPath)) {
+        await addContext(relatedContext, {
+          logger,
+          config,
+          silent: false,
+          overwrite: false,
+        });
+      }
+    }
+
+    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)}`);
@@ -240,17 +285,53 @@ async function addContext(contextName, options = {}) {
   const kebabName = toKebabCase(contextName);
   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
+    const relatedComponent = detectRelatedComponent(kebabName, templatesDir);
+    const dependenciesToAdd = [];
+    
+    if (relatedComponent) {
+      const componentPath = path.join(config.getComponentsDir(), `${relatedComponent}.tsx`);
+      if (!fs.existsSync(componentPath)) {
+        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
+    if (relatedComponent) {
+      const componentPath = path.join(config.getComponentsDir(), `${relatedComponent}.tsx`);
+      if (!fs.existsSync(componentPath)) {
+        await addComponent(relatedComponent, {
+          logger,
+          config,
+          silent: false,
+          overwrite: false,
+        });
+      }
+    }
+
+    const handleFileExists = createFileExistsHandler(options);
     const validatedPath = await writeFile(
       targetPath,
       content,
       projectRoot,
-      options.overwrite || false
+      options.overwrite || false,
+      handleFileExists
     );
 
     if (!options.silent) {
@@ -277,6 +358,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 +373,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 +392,8 @@ async function addTopLoadingBar(options = {}) {
       targetContextPath,
       content,
       projectRoot,
-      overwrite
+      overwrite,
+      handleFileExists
     );
     logger.success(`Added top-loading-bar-context to ${path.relative(projectRoot, validatedPath)}`);
   } else {

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/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,
+};
+