@moamc/rn-cli 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moamc/rn-cli",
-  "version": "1.3.1",
+  "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

@@ -50,9 +50,91 @@ 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 } = detectProjectStructure();
+  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';
@@ -91,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)}
@@ -105,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 => {
@@ -114,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 = []) => {
@@ -131,9 +214,64 @@ const generateScreenTemplate = (screenName, featureName, hasForm = false, formFi
 
   // Simple screen template
   const componentName = screenName;
-  const { headerImportPath } = detectProjectStructure();
+  const { headerImportPath, hasHeadersFolder } = detectProjectStructure();
+  const isDistributorStyle = !hasHeadersFolder;
   
-  return `import React from 'react';
+  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 '${headerImportPath}';
@@ -164,6 +302,7 @@ const ${componentName} = ({ navigation }) => {
 
 export default ${componentName};
 `;
+  }
 };
 
 module.exports = { generateScreenTemplate };