@moamc/rn-cli 1.5.0 → 1.5.1

package/README.md

@@ -11,7 +11,6 @@ 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
 
@@ -89,29 +88,6 @@ 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.5.0",
+  "version": "1.5.1",
   "description": "Enterprise-grade Code Generation CLI for React Native Applications",
   "main": "index.js",
   "bin": {

package/templates/apiTemplate.js

@@ -85,9 +85,10 @@ ${formFieldsInit}
 \tconst [touched, setTouched] = useState({});
 
 \t// Fetch data using React Query${getMethod ? `
-\tconst { data, isLoading, error, refetch } = useQuery(
-\t\t${serviceName}QueryOptions.${getMethod.name}(formData)
-\t);` : ''}
+\tconst { data, isLoading, error, refetch } = useQuery({
+\t\t...${serviceName}QueryOptions.${getMethod.name}({}),
+\t\tenabled: false,
+\t});` : ''}
 
 \t// Submit mutation
 \tconst submitMutation = useMutation({
@@ -109,13 +110,8 @@ ${formFieldsInit}
 \t}, [error]);` : ''}
 
 \tconst handleChange = (value, field) => {
-\t\tconst updatedFormData = { ...formData, [field]: value };
-\t\tsetFormData(updatedFormData);
+\t\tsetFormData(prev => ({ ...prev, [field]: value }));
 \t\tsetTouched(prev => ({ ...prev, [field]: true }));
-\t\t
-\t\t// Re-validate on change
-\t\tconst validationErrors = validate${screenName}(updatedFormData);
-\t\tsetErrors(validationErrors);
 \t};
 
 \tconst handleSubmit = async () => {
@@ -160,9 +156,10 @@ ${formFieldsInit}
 \tconst [touched, setTouched] = useState({});
 
 \t// Fetch data using React Query
-\tconst { data, isLoading, error, refetch } = useQuery(
-\t\t${serviceName}QueryOptions.${method.name}(formData)
-\t);
+\tconst { data, isLoading, error, refetch } = useQuery({
+\t\t...${serviceName}QueryOptions.${method.name}({}),
+\t\tenabled: false,
+\t});
 
 \tuseEffect(() => {
 \t\tif (error) {
@@ -171,13 +168,8 @@ ${formFieldsInit}
 \t}, [error]);
 
 \tconst handleChange = (value, field) => {
-\t\tconst updatedFormData = { ...formData, [field]: value };
-\t\tsetFormData(updatedFormData);
+\t\tsetFormData(prev => ({ ...prev, [field]: value }));
 \t\tsetTouched(prev => ({ ...prev, [field]: true }));
-\t\t
-\t\t// Re-validate on change
-\t\tconst validationErrors = validate${screenName}(updatedFormData);
-\t\tsetErrors(validationErrors);
 \t};
 
 \tconst handleSubmit = async () => {

package/templates/fieldGeneratorTemplate.js

@@ -52,7 +52,7 @@ const generateTextInputField = (name, label, type, containerStyle) => {
 \t\t\t\t\t\t<FloatingTextInput
 \t\t\t\t\t\t\tlabel="${label}"
 \t\t\t\t\t\t\tvalue={formData?.${name} || ''}
-\t\t\t\t\t\t\tonChangeText={(e) => handleChange(e, '${name}')}
+\t\t\t\t\t\t\tonChangeText={e => handleChange(e, '${name}')}
 \t\t\t\t\t\t\ttextInputStyles={styles.floatContentStyle}
 \t\t\t\t\t\t\tinputContainerStyle={styles.floatStyle}
 \t\t\t\t\t\t\tlabelStyles={styles.floatLabelStyle}

package/templates/hookTemplate.js

@@ -36,76 +36,44 @@ const generateInitialValues = (formFields = []) => {
   return `\t\tloader: false,\n${fields}${additionalFields}`;
 };
 
-const { detectProjectStructure } = require('../utils/fileUtils');
-
 const generateHookTemplate = (hookName, hasForm = false, formFields = [], eventName = null) => {
-  const { hasHeadersFolder } = detectProjectStructure();
-  const isDistributorStyle = !hasHeadersFolder;
-
   if (hasForm) {
     const hasDropdown = formFields.some(f => f.type === 'dropdown');
     const hasDate = formFields.some(f => f.type === 'date');
     
-    if (isDistributorStyle) {
-      // Distributor app - use Formik
-      return `import { useFormik } from 'formik';
-import { showToastNotification } from '../../../../helpers/common';${hasDate ? '\nimport moment from \'moment\';' : ''}
-import { validate${hookName} } from '../validation';
-
-export const use${hookName} = ({ navigation }) => {
-\tconst formikState = useFormik({
-\t\tinitialValues: {
-${formFields.map(f => `\t\t\t${f.name}: '',`).join('\n')}
-\t\t},
-\t\tvalidate: validate${hookName},
-\t\tonSubmit: async (values) => {
-\t\t\ttry {
-\t\t\t\t// Add your API call here
-\t\t\t\tshowToastNotification('Success!');
-\t\t\t} catch (error) {
-\t\t\t\tshowToastNotification(error?.message || 'Something went wrong');
-\t\t\t}
-\t\t},
-\t});
-
-\tconst { values: formData, errors, touched, isSubmitting: loading, handleChange: formikHandleChange, handleSubmit } = formikState;
-
-\tconst handleChange = (value, field) => {
-\t\tformikState.setFieldValue(field, value);
-\t\tformikState.setFieldTouched(field, true);
-\t};
-
-\treturn {
-\t\tformData,
-\t\terrors,
-\t\ttouched,
-\t\tloading,
-\t\thandleChange,
-\t\thandleSubmit,
-\t};
-};
-`;
-    } else {
-      // Investor app - use useState with useCallback
-      return `import { useState, useCallback } from 'react';
+    return `import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { showToastNotification } from '../../../../helpers/common';${hasDate ? '\nimport moment from \'moment\';' : ''}
 import { validate${hookName} } from '../validation';
 
-export const use${hookName} = ({ navigation }) => {
+export const use${hookName} = () => {
+\tconst queryClient = useQueryClient();
 \tconst [formData, setFormData] = useState({
 ${formFields.map(f => `\t\t${f.name}: '',`).join('\n')}
 \t});
 \tconst [errors, setErrors] = useState({});
-\tconst [touched, setTouched] = useState({});
-\tconst [loading, setLoading] = useState(false);${hasDropdown ? '\n\tconst [bottomSheetType, setBottomSheetType] = useState(null);' : ''}${hasDate ? '\n\tconst [openCalendar, setOpenCalendar] = useState(false);' : ''}
+\tconst [touched, setTouched] = useState({});${hasDropdown ? '\n\tconst [bottomSheetType, setBottomSheetType] = useState(null);' : ''}${hasDate ? '\n\tconst [openCalendar, setOpenCalendar] = useState(false);' : ''}
+
+\tconst submitMutation = useMutation({
+\t\tmutationFn: (data) => {
+\t\t\t// Add your API call here
+\t\t\treturn Promise.resolve(data);
+\t\t},
+\t\tonSuccess: (response) => {
+\t\t\tshowToastNotification('Success!');
+\t\t\tqueryClient.invalidateQueries({ queryKey: ['${hookName.toLowerCase()}'] });
+\t\t},
+\t\tonError: (error) => {
+\t\t\tshowToastNotification(error?.message || 'Something went wrong');
+\t\t},
+\t});
 
-\tconst handleChange = useCallback((value, field) => {
+\tconst handleChange = (value, field) => {
 \t\tsetFormData(prev => ({ ...prev, [field]: value }));
 \t\tsetTouched(prev => ({ ...prev, [field]: true }));
-\t\tsetErrors(prev => ({ ...prev, [field]: undefined }));
-\t}, []);
+\t};
 
-\tconst handleSubmit = useCallback(async () => {
+\tconst handleSubmit = async () => {
 \t\tconst validationErrors = validate${hookName}(formData);
 \t\tif (Object.keys(validationErrors).length > 0) {
 \t\t\tsetErrors(validationErrors);
@@ -113,32 +81,23 @@ ${formFields.map(f => `\t\t${f.name}: '',`).join('\n')}
 \t\t\treturn;
 \t\t}
 
-\t\tsetLoading(true);
-\t\ttry {
-\t\t\t// Add your API call here
-\t\t\tshowToastNotification('Success!');
-\t\t} catch (error) {
-\t\t\tshowToastNotification(error?.message || 'Something went wrong');
-\t\t} finally {
-\t\t\tsetLoading(false);
-\t\t}
-\t}, [formData]);${hasDropdown ? `
+\t\tsubmitMutation.mutate(formData);
+\t};${hasDropdown ? `
 
-\tconst openBottomSheet = useCallback((type) => {
+\tconst openBottomSheet = (type) => {
 \t\tsetBottomSheetType(type);
-\t}, []);` : ''}
+\t};` : ''}
 
 \treturn {
 \t\tformData,
 \t\terrors,
 \t\ttouched,
-\t\tloading,
+\t\tloading: submitMutation.isPending,
 \t\thandleChange,
 \t\thandleSubmit,${hasDropdown ? '\n\t\topenBottomSheet,\n\t\tbottomSheetType,' : ''}${hasDate ? '\n\t\topenCalendar,\n\t\tsetOpenCalendar,' : ''}
 \t};
 };
 `;
-    }
   }
 
   return `import { useState, useEffect } from 'react';
@@ -163,15 +122,9 @@ 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,5 +1,4 @@
 const { generateFormField, FIELD_TYPES } = require('./fieldGeneratorTemplate');
-const { detectProjectStructure } = require('../utils/fileUtils');
 
 const groupFieldsByRows = (formFields) => {
   const rows = [];
@@ -50,126 +49,13 @@ 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;
   
-  let bottomSheetCode = '';
-  if (hasDropdown) {
-    bottomSheetCode = `
-\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>`;
-  }
-
-  let datePickerCode = '';
-  if (hasDate) {
-    datePickerCode = `
-\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/>`;
-  }
-  
-  if (isDistributorStyle) {
-    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={styles.scrollContent}
-\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>${bottomSheetCode}${datePickerCode}
-\t\t</>
-\t);
-};
-
-const styles = StyleSheet.create({
-\tscrollContent: {
-\t\t...utilities.rowPadding24,
-\t},
-\theading: {
-\t\t...fonts.fontWSSB18,
-\t\tcolor: colorConstant.moBlack,
-\t\tmarginVertical: 20,
-\t},
-\theadContainer: {
-\t\tflexDirection: 'row',
-\t\tjustifyContent: 'space-between',
-\t\tmarginTop: 16,
-\t},
-\theadWidth: {
-\t\twidth: '48%',
-\t},
-\tfloatContentStyle: {
-\t\t...fonts.fontWSR16,
-\t\tcolor: colorConstant.amcBlack,
-\t},
-\tfloatStyle: {},
-\tfloatLabelStyle: {
-\t\tcolor: colorConstant?.amcMediumGrey,
-\t\tbackgroundColor: colorConstant?.amcWhite,
-\t\t...fonts.fontWSM12,
-\t\tlineHeight: 16,
-\t},
-});
-
-export default ${componentName};
-`;
-  } else {
-    return `import React, { useState } from 'react';
+  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 '${headerImportPath}';
+import { Header } from '../../../components/common/headers';
 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\';' : ''}
@@ -203,84 +89,50 @@ ${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>${bottomSheetCode}${datePickerCode}
+\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);
 };
 
 export default ${componentName};
 `;
-  }
 };
 
 const generateScreenTemplate = (screenName, featureName, hasForm = false, formFields = []) => {
+  // Use enhanced template for form screens
   if (hasForm) {
     return generateEnhancedTemplate(screenName, featureName, hasForm, formFields);
   }
 
+  // Simple screen template
   const componentName = screenName;
-  const { headerImportPath, hasHeadersFolder } = detectProjectStructure();
-  const isDistributorStyle = !hasHeadersFolder;
-  
-  if (isDistributorStyle) {
-    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={styles.scrollContent}
-\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({
-\tscrollContent: {
-\t\t...utilities.rowPadding24,
-\t},
-\theading: {
-\t\t...fonts.fontWSSB18,
-\t\tcolor: colorConstant.moBlack,
-\t\tmarginVertical: 20,
-\t},
-});
-
-export default ${componentName};
-`;
-  } else {
-    return `import React from 'react';
+  return `import React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { Container, Loader } from '../../../components/common';
-import { Header } from '${headerImportPath}';
+import { Header } from '../../../components/common/headers';
 import { colorConstant, utilities } from '../../../assets/styles';
 import { use${componentName} } from './hooks/use${componentName}';
 import { styles } from './components/styles';
@@ -308,7 +160,6 @@ const ${componentName} = ({ navigation }) => {
 
 export default ${componentName};
 `;
-  }
 };
 
 module.exports = { generateScreenTemplate };

package/templates/screenTemplate.js.backup

@@ -1,5 +1,3 @@
-const { detectProjectStructure } = require('../utils/fileUtils');
-
 const generateFormFields = (formFields = []) => {
   if (!formFields || formFields.length === 0) return '\t\t\t\t{/* Add your form fields here */}';
 
@@ -57,7 +55,6 @@ const generateFormFields = (formFields = []) => {
 
 const generateScreenTemplate = (screenName, featureName, hasForm = false, formFields = []) => {
   const componentName = screenName;
-  const { headerImportPath } = detectProjectStructure();
   
   if (hasForm) {
     const formFieldsCode = generateFormFields(formFields);
@@ -67,7 +64,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 '${headerImportPath}';
+import { Header } from '../../../components/common/headers';
 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';
@@ -113,7 +110,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 '${headerImportPath}';
+import { Header } from '../../../components/common/headers';
 import { withUser } from '../../../components/HOC';
 import { colorConstant, fonts, utilities } from '../../../assets/styles';
 import { use${componentName} } from './use${componentName}';

package/utils/fileUtils.js

@@ -19,19 +19,6 @@ 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 });
@@ -126,5 +113,4 @@ module.exports = {
   logWarning,
   logError,
   confirmOverwrite,
-  detectProjectStructure,
 };