expo-app-ui 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-app-ui",
-  "version": "1.0.2",
+  "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": {

package/src/commands/add.js

@@ -153,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`);
 
@@ -182,12 +195,17 @@ 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`);
+    // 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`);
+        }
       }
     }
 
@@ -222,15 +240,19 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
-    // Add related context if needed
-    if (relatedContext) {
+    // 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`);
-      if (!fs.existsSync(contextPath)) {
+      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
         });
       }
     }
@@ -282,7 +304,20 @@ 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, `${kebabName}.tsx`);
@@ -295,13 +330,14 @@ async function addContext(contextName, options = {}) {
     // Detect dependencies including related component
     const dependencies = detectDependencies(content);
     
-    // Check for related component
+    // 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`);
-      if (!fs.existsSync(componentPath)) {
+      const componentKey = `component:${relatedComponent}`;
+      if (!fs.existsSync(componentPath) && !processingSet.has(componentKey)) {
         dependenciesToAdd.push(`${relatedComponent} component`);
       }
     }
@@ -312,15 +348,19 @@ async function addContext(contextName, options = {}) {
       logger.debug('Adding required dependencies...\n');
     }
 
-    // Add related component if needed
+    // 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`);
-      if (!fs.existsSync(componentPath)) {
+      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
         });
       }
     }
@@ -456,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
@@ -478,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/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/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>