@moamc/rn-cli 1.3.0 → 1.4.0

package/README.md

@@ -11,6 +11,7 @@ Enterprise-grade Code Generation CLI for React Native Applications
 - ✅ Support for multiple field types (text, number, email, date, dropdown, etc.)
 - ✅ Automatic validation generation
 - ✅ TypeScript-ready templates
+- ✅ **Cross-project compatibility** - Automatically detects and adapts to different project structures
 
 ## 📦 Installation
 
@@ -88,6 +89,29 @@ project-root/
 └── navigations/
 ```
 
+### Component Structure Compatibility
+
+The CLI automatically detects your project's component structure:
+
+**Option 1: Nested Structure** (e.g., investor-app)
+```
+components/
+  └── common/
+      ├── headers/
+      │   └── Header.js
+      └── Container.js
+```
+
+**Option 2: Flat Structure** (e.g., distributor-app)
+```
+components/
+  └── common/
+      ├── Header.js
+      └── Container.js
+```
+
+The CLI will automatically generate the correct import paths for your project structure.
+
 ## 🎨 Form Field Types
 
 - **Text** - Standard text input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moamc/rn-cli",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Enterprise-grade Code Generation CLI for React Native Applications",
   "main": "index.js",
   "bin": {

package/templates/hookTemplate.js

@@ -45,7 +45,7 @@ const generateHookTemplate = (hookName, hasForm = false, formFields = [], eventN
 import { showToastNotification } from '../../../../helpers/common';${hasDate ? '\nimport moment from \'moment\';' : ''}
 import { validate${hookName} } from '../validation';
 
-export const use${hookName} = () => {
+export const use${hookName} = ({ navigation }) => {
 \tconst [formData, setFormData] = useState({
 ${formFields.map(f => `\t\t${f.name}: '',`).join('\n')}
 \t});
@@ -121,9 +121,15 @@ export const use${hookName} = ({ navigation }) => {
 \t\t}
 \t}, [error]);
 
+\tconst handleSubmit = () => {
+\t\t// Add your submit logic here
+\t\tshowToastNotification('Submit clicked');
+\t};
+
 \treturn {
 \t\tloading: isLoading,
 \t\tdata,
+\t\thandleSubmit,
 \t};
 };
 `;

package/templates/screenTemplate.js

@@ -1,4 +1,5 @@
 const { generateFormField, FIELD_TYPES } = require('./fieldGeneratorTemplate');
+const { detectProjectStructure } = require('../utils/fileUtils');
 
 const groupFieldsByRows = (formFields) => {
   const rows = [];
@@ -49,13 +50,96 @@ const generateEnhancedTemplate = (screenName, featureName, hasForm = false, form
   const componentName = screenName;
   const hasDropdown = formFields.some(f => f.type === 'dropdown');
   const hasDate = formFields.some(f => f.type === 'date');
+  const { headerImportPath, hasHeadersFolder } = detectProjectStructure();
+  const isDistributorStyle = !hasHeadersFolder;
   
-  return `import React, { useState } from 'react';
+  if (isDistributorStyle) {
+    // Distributor app style with proper imports and styling
+    return `import React, { useState } from 'react';
+import { Text, ScrollView, View, StyleSheet } from 'react-native';
+import { colorConstant, fonts, utilities } from '../../../assets/styles';
+import Container from '../../../components/common/Container';
+import Header from '../../../components/common/Header';
+import Footer from '../../../components/common/Footer';
+import Loader from '../../../components/common/Loader';
+import { FloatingTextInput, FormButton } from '../../../components/form';${hasDropdown ? '\nimport { BottomSheet } from \'../../../components/common\';\nimport DropDownReview from \'../../../components/common/DropDownReview\';' : ''}${hasDate ? '\nimport { DatePickerCustom } from \'../../../components/form/DatePicker\';\nimport moment from \'moment\';' : ''}
+import { use${componentName} } from './hooks/use${componentName}';
+
+const ${componentName} = ({ navigation }) => {
+\tconst {
+\t\tformData,
+\t\terrors,
+\t\ttouched,
+\t\tloading,
+\t\thandleChange,
+\t\thandleSubmit${hasDropdown ? ',\n\t\topenBottomSheet,\n\t\tbottomSheetType' : ''}${hasDate ? ',\n\t\topenCalendar,\n\t\tsetOpenCalendar' : ''}
+\t} = use${componentName}({ navigation });
+\t${hasDropdown ? '\n\tconst [openBottomNote, setOpenBottomNote] = useState(false);' : ''}
+
+\tif (loading) {
+\t\treturn <Loader loaderText="Hang On..." />;
+\t}
+
+\treturn (
+\t\t<>
+\t\t\t<Container>
+\t\t\t\t<Header redirect={() => navigation.goBack()} />
+\t\t\t\t<ScrollView
+\t\t\t\t\tshowsVerticalScrollIndicator={false}
+\t\t\t\t\tcontentContainerStyle={[utilities.rowPadding24]}
+\t\t\t\t>
+\t\t\t\t\t<Text style={styles.heading}>${screenName}</Text>
+${generateFormFields(formFields)}
+\t\t\t\t</ScrollView>
+\t\t\t</Container>
+\t\t\t<Footer isBottom={true}>
+\t\t\t\t<FormButton title="Submit" onPress={handleSubmit} />
+\t\t\t</Footer>${hasDropdown ? \`
+\t\t\t<BottomSheet
+\t\t\t\tmodalVisible={!!openBottomNote}
+\t\t\t\tsetIsModalVisible={() => setOpenBottomNote(null)}
+\t\t\t>
+\t\t\t\t<DropDownReview
+\t\t\t\t\tFundBuyType={/* Add options */[]}
+\t\t\t\t\tselectValue={formData[bottomSheetType]}
+\t\t\t\t\tonSelectValue={e => {
+\t\t\t\t\t\thandleChange(e, bottomSheetType);
+\t\t\t\t\t\tsetOpenBottomNote(null);
+\t\t\t\t\t}}
+\t\t\t\t\tlabel={bottomSheetType}
+\t\t\t\t/>
+\t\t\t</BottomSheet>\` : ''}${hasDate ? \`
+\t\t\t<DatePickerCustom
+\t\t\t\tmodalTransparent={true}
+\t\t\t\tonDateChange={data => {
+\t\t\t\t\thandleChange(moment(data).format('DD MMM YYYY'), 'dateField');
+\t\t\t\t}}
+\t\t\t\tsetModalVisible={() => setOpenCalendar(!openCalendar)}
+\t\t\t\tmodalVisible={openCalendar}
+\t\t\t\tminimumDate={new Date(1920, 0, 1)}
+\t\t\t/>\` : ''}
+\t\t</>
+\t);
+};
+
+const styles = StyleSheet.create({
+\theading: {
+\t\t...fonts.fontWSSB18,
+\t\tcolor: colorConstant.moBlack,
+\t\tmarginVertical: 20,
+\t},
+});
+
+export default ${componentName};
+`;
+  } else {
+    // Investor app style - original template
+    return `import React, { useState } from 'react';
 import { Text, ScrollView, View } from 'react-native';
 import { TouchableRipple } from 'react-native-paper';
 import { colorConstant, utilities } from '../../../assets/styles';
 import { Container } from '../../../components/common';
-import { Header } from '../../../components/common/headers';
+import { Header } from '${headerImportPath}';
 import Footer from '../../../components/common/Footer';
 import FormButton from '../../../components/form/FormButton';
 import { FloatingTextInput } from '../../../components/form';${hasDropdown ? '\nimport { BottomSheet } from \'../../../components/common\';\nimport DropDownReview from \'../../../components/common/DropDownReview\';' : ''}${hasDate ? '\nimport { DatePickerCustom } from \'../../../components/form/DatePicker\';\nimport moment from \'moment\';' : ''}
@@ -89,7 +173,7 @@ ${generateFormFields(formFields)}
 \t\t\t</Container>
 \t\t\t<Footer style={styles.footerDesign}>
 \t\t\t\t<FormButton title="Submit" onPress={handleSubmit} />
-\t\t\t</Footer>${hasDropdown ? `
+\t\t\t</Footer>${hasDropdown ? \`
 \t\t\t<BottomSheet
 \t\t\t\tmodalVisible={!!openBottomNote}
 \t\t\t\tsetIsModalVisible={() => setOpenBottomNote(null)}
@@ -103,7 +187,7 @@ ${generateFormFields(formFields)}
 \t\t\t\t\t}}
 \t\t\t\t\tlabel={bottomSheetType}
 \t\t\t\t/>
-\t\t\t</BottomSheet>` : ''}${hasDate ? `
+\t\t\t</BottomSheet>\` : ''}${hasDate ? \`
 \t\t\t<DatePickerCustom
 \t\t\t\tmodalTransparent={true}
 \t\t\t\tonDateChange={data => {
@@ -112,13 +196,14 @@ ${generateFormFields(formFields)}
 \t\t\t\tsetModalVisible={() => setOpenCalendar(!openCalendar)}
 \t\t\t\tmodalVisible={openCalendar}
 \t\t\t\tminimumDate={new Date(1920, 0, 1)}
-\t\t\t/>` : ''}
+\t\t\t/>\` : ''}
 \t\t</>
 \t);
 };
 
 export default ${componentName};
 `;
+  }
 };
 
 const generateScreenTemplate = (screenName, featureName, hasForm = false, formFields = []) => {
@@ -129,10 +214,67 @@ const generateScreenTemplate = (screenName, featureName, hasForm = false, formFi
 
   // Simple screen template
   const componentName = screenName;
-  return `import React from 'react';
+  const { headerImportPath, hasHeadersFolder } = detectProjectStructure();
+  const isDistributorStyle = !hasHeadersFolder;
+  
+  if (isDistributorStyle) {
+    // Distributor app style - with Header, Footer, and FormButton
+    return `import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { colorConstant, fonts, utilities } from '../../../assets/styles';
+import Container from '../../../components/common/Container';
+import Header from '../../../components/common/Header';
+import Footer from '../../../components/common/Footer';
+import Loader from '../../../components/common/Loader';
+import { FormButton } from '../../../components/form';
+import { use${componentName} } from './hooks/use${componentName}';
+
+const ${componentName} = ({ navigation }) => {
+\tconst {
+\t\tloading,
+\t\tdata,
+\t\thandleSubmit,
+\t} = use${componentName}({ navigation });
+
+\tif (loading) {
+\t\treturn <Loader loaderText="Hang On..." />;
+\t}
+
+\treturn (
+\t\t<>
+\t\t\t<Container>
+\t\t\t\t<Header redirect={() => navigation.goBack()} />
+\t\t\t\t<ScrollView
+\t\t\t\t\tshowsVerticalScrollIndicator={false}
+\t\t\t\t\tcontentContainerStyle={[utilities.rowPadding24]}
+\t\t\t\t>
+\t\t\t\t\t<Text style={styles.heading}>${screenName}</Text>
+\t\t\t\t\t{/* Add your content here */}
+\t\t\t\t</ScrollView>
+\t\t\t</Container>
+\t\t\t<Footer isBottom={true}>
+\t\t\t\t<FormButton title="Submit" onPress={handleSubmit} />
+\t\t\t</Footer>
+\t\t</>
+\t);
+};
+
+const styles = StyleSheet.create({
+\theading: {
+\t\t...fonts.fontWSSB18,
+\t\tcolor: colorConstant.moBlack,
+\t\tmarginVertical: 20,
+\t},
+});
+
+export default ${componentName};
+`;
+  } else {
+    // Investor app style - original template
+    return `import React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { Container, Loader } from '../../../components/common';
-import { Header } from '../../../components/common/headers';
+import { Header } from '${headerImportPath}';
 import { colorConstant, utilities } from '../../../assets/styles';
 import { use${componentName} } from './hooks/use${componentName}';
 import { styles } from './components/styles';
@@ -160,6 +302,7 @@ const ${componentName} = ({ navigation }) => {
 
 export default ${componentName};
 `;
+  }
 };
 
 module.exports = { generateScreenTemplate };

package/templates/screenTemplate.js.backup

@@ -1,3 +1,5 @@
+const { detectProjectStructure } = require('../utils/fileUtils');
+
 const generateFormFields = (formFields = []) => {
   if (!formFields || formFields.length === 0) return '\t\t\t\t{/* Add your form fields here */}';
 
@@ -55,6 +57,7 @@ const generateFormFields = (formFields = []) => {
 
 const generateScreenTemplate = (screenName, featureName, hasForm = false, formFields = []) => {
   const componentName = screenName;
+  const { headerImportPath } = detectProjectStructure();
   
   if (hasForm) {
     const formFieldsCode = generateFormFields(formFields);
@@ -64,7 +67,7 @@ const generateScreenTemplate = (screenName, featureName, hasForm = false, formFi
     return `import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 import { Container, Footer, Loader } from '../../../components/common';
-import { Header } from '../../../components/common/headers';
+import { Header } from '${headerImportPath}';
 import { FloatingTextInput, FormButton } from '../../../components/form';${hasDropdown ? '\nimport RadioForm from \'../../../components/form/RadioForm\';' : ''}${hasCheckbox ? '\nimport CheckBox from \'../../../components/common/CheckBox\';' : ''}
 import { withUser } from '../../../components/HOC';
 import { colorConstant, fonts, utilities } from '../../../assets/styles';
@@ -110,7 +113,7 @@ export default withUser(${componentName});
   return `import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 import { Container, Loader } from '../../../components/common';
-import { Header } from '../../../components/common/headers';
+import { Header } from '${headerImportPath}';
 import { withUser } from '../../../components/HOC';
 import { colorConstant, fonts, utilities } from '../../../assets/styles';
 import { use${componentName} } from './use${componentName}';

package/utils/fileUtils.js

@@ -19,6 +19,19 @@ const findProjectRoot = () => {
 
 const PROJECT_ROOT = findProjectRoot();
 
+// Detect project structure for imports
+const detectProjectStructure = () => {
+  const headersPath = path.join(PROJECT_ROOT, 'components', 'common', 'headers');
+  const hasHeadersFolder = fs.existsSync(headersPath);
+  
+  return {
+    hasHeadersFolder,
+    headerImportPath: hasHeadersFolder 
+      ? "../../../components/common/headers" 
+      : "../../../components/common"
+  };
+};
+
 const ensureDirectoryExists = (dirPath) => {
   if (!fs.existsSync(dirPath)) {
     fs.mkdirSync(dirPath, { recursive: true });
@@ -113,4 +126,5 @@ module.exports = {
   logWarning,
   logError,
   confirmOverwrite,
+  detectProjectStructure,
 };