@moamc/rn-cli 1.0.0

package/generators/screen.js

@@ -0,0 +1,351 @@
+const inquirer = require('inquirer');
+const chalk = require('chalk');
+const path = require('path');
+const fs = require('fs-extra');
+const {
+  getProjectPath,
+  writeFile,
+  logSuccess,
+  logInfo,
+  toPascalCase,
+  confirmOverwrite,
+  fileExists,
+} = require('../utils/fileUtils');
+const { addScreenToNavigation, addScreenToIndexExport } = require('../utils/navigationUtils');
+const { generateScreenTemplate } = require('../templates/screenTemplate');
+const { generateHookTemplate } = require('../templates/hookTemplate');
+const { generateValidationTemplate } = require('../templates/validationTemplate');
+const { generateStylesTemplate } = require('../templates/stylesTemplate');
+const { generateConstantsTemplate } = require('../templates/constantsTemplate');
+const { generateHelpersTemplate } = require('../templates/helpersTemplate');
+const { 
+  generateApiServiceTemplate, 
+  generateQueryOptionsTemplate, 
+  generateApiIntegratedHookTemplate 
+} = require('../templates/apiTemplate');
+
+const generateScreen = async () => {
+  console.log(chalk.cyan.bold('\n╭────────────────────────────────────────────────────────────╮'));
+  console.log(chalk.cyan.bold('│') + chalk.white.bold('              📱  SCREEN CREATION WIZARD                    ') + chalk.cyan.bold(' │'));
+  console.log(chalk.cyan.bold('╰────────────────────────────────────────────────────────────╯'));
+  console.log(chalk.gray('  Add a new screen to an existing feature module\n'));
+
+  const screensPath = getProjectPath('screens');
+  const features = fs.readdirSync(screensPath).filter(file => {
+    const fullPath = path.join(screensPath, file);
+    return fs.statSync(fullPath).isDirectory();
+  });
+
+  const answers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'featureName',
+      message: chalk.yellow('❓ Select the target feature:'),
+      choices: features,
+      prefix: chalk.green('✓'),
+    },
+    {
+      type: 'input',
+      name: 'screenName',
+      message: chalk.yellow('❓ Enter screen name') + chalk.gray(' (e.g., EditProfile, ViewDetails):'),
+      validate: (input) => input.trim() !== '' || chalk.red('⚠️  Screen name is required'),
+      prefix: chalk.green('✓'),
+    },
+    {
+      type: 'confirm',
+      name: 'hasForm',
+      message: chalk.yellow('❓ Does this screen include a form?'),
+      default: false,
+      prefix: chalk.green('✓'),
+    },
+  ]);
+
+  let formFields = [];
+  let eventName = null;
+  const featureName = answers.featureName;
+  const screenName = toPascalCase(answers.screenName);
+  
+  if (answers.hasForm) {
+    console.log(chalk.cyan('\n╭────────────────────────────────────────────────────────────╮'));
+    console.log(chalk.cyan('│') + chalk.white.bold('                  🔌  API INTEGRATION                      ') + chalk.cyan('│'));
+    console.log(chalk.cyan('╰────────────────────────────────────────────────────────────╯'));
+    
+    const apiAnswers = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'hasApi',
+        message: chalk.yellow('❓ Does this screen need API integration?'),
+        default: true,
+        prefix: chalk.green('✓'),
+      },
+    ]);
+
+    if (apiAnswers.hasApi) {
+      const apiDetails = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'apiEndpoint',
+          message: chalk.yellow('❓ Enter API endpoint') + chalk.gray(' (e.g., /api/bank/details):'),
+          validate: (input) => input.trim() !== '' || chalk.red('⚠️  API endpoint is required'),
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'list',
+          name: 'apiMethod',
+          message: chalk.yellow('❓ Select HTTP method:'),
+          choices: [
+            { name: chalk.blue('GET') + chalk.gray(' - Fetch data'), value: 'GET' },
+            { name: chalk.blue('POST') + chalk.gray(' - Create/Update data'), value: 'POST' },
+          ],
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'input',
+          name: 'queryKey',
+          message: chalk.yellow('❓ Enter React Query key') + chalk.gray(' (e.g., bankDetails):'),
+          default: (answers) => screenName.toLowerCase(),
+          prefix: chalk.green('✓'),
+        },
+      ]);
+      
+      const methods = [{
+        name: apiDetails.apiMethod === 'GET' ? `get${screenName}` : `submit${screenName}`,
+        endpoint: apiDetails.apiEndpoint,
+        type: apiDetails.apiMethod,
+        queryKey: apiDetails.queryKey,
+        hasAuth: true,
+      }];
+
+      // If GET was selected, ask if they want to add POST
+      if (apiDetails.apiMethod === 'GET') {
+        const postApiAnswer = await inquirer.prompt([
+          {
+            type: 'confirm',
+            name: 'addPostApi',
+            message: chalk.yellow('❓ Do you want to add a POST API for form submission?'),
+            default: true,
+            prefix: chalk.green('✓'),
+          },
+        ]);
+
+        if (postApiAnswer.addPostApi) {
+          const postApiDetails = await inquirer.prompt([
+            {
+              type: 'input',
+              name: 'postEndpoint',
+              message: chalk.yellow('❓ Enter POST API endpoint') + chalk.gray(' (e.g., /api/bank/submit):'),
+              validate: (input) => input.trim() !== '' || chalk.red('⚠️  POST endpoint is required'),
+              prefix: chalk.green('✓'),
+            },
+          ]);
+
+          methods.push({
+            name: `submit${screenName}`,
+            endpoint: postApiDetails.postEndpoint,
+            type: 'POST',
+            queryKey: `${apiDetails.queryKey}-submit`,
+            hasAuth: true,
+          });
+        }
+      }
+      
+      answers.apiConfig = {
+        serviceName: featureName.toLowerCase(),
+        methods,
+        primaryMethod: methods[0].name,
+        hasPostMethod: methods.some(m => m.type === 'POST'),
+      };
+    }
+
+    console.log(chalk.cyan('\n╭────────────────────────────────────────────────────────────╮'));
+    console.log(chalk.cyan('│') + chalk.white.bold('                  📋  FORM FIELD BUILDER                   ') + chalk.cyan('│'));
+    console.log(chalk.cyan('╰────────────────────────────────────────────────────────────╯'));
+    let addMore = true;
+    let fieldCount = 0;
+    while (addMore) {
+      fieldCount++;
+      console.log(chalk.gray(`\n  Configuring Field #${fieldCount}\n`));
+      const fieldAnswers = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'fieldName',
+          message: chalk.yellow('❓ Enter field name') + chalk.gray(' (e.g., accountNumber, email):'),
+          validate: (input) => input.trim() !== '' || chalk.red('⚠️  Field name is required'),
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'list',
+          name: 'fieldType',
+          message: chalk.yellow('❓ Select field type:'),
+          choices: [
+            { name: chalk.blue('🔤 Text') + chalk.gray(' - Standard text input'), value: 'text' },
+            { name: chalk.blue('🔢 Number') + chalk.gray(' - Numeric input'), value: 'number' },
+            { name: chalk.blue('✉️ Email') + chalk.gray(' - Email address'), value: 'email' },
+            { name: chalk.blue('📅 Date') + chalk.gray(' - Date picker'), value: 'date' },
+            { name: chalk.blue('📝 Dropdown') + chalk.gray(' - Select from options'), value: 'dropdown' },
+            { name: chalk.blue('◉ Radio') + chalk.gray(' - Single choice'), value: 'radio' },
+            { name: chalk.blue('☑️ Checkbox') + chalk.gray(' - Multiple choices'), value: 'checkbox' },
+            { name: chalk.blue('📄 File') + chalk.gray(' - File upload'), value: 'file' },
+          ],
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'input',
+          name: 'fieldLabel',
+          message: chalk.yellow('❓ Enter field label') + chalk.gray(' (e.g., Account Number, Email Address):'),
+          validate: (input) => input.trim() !== '' || chalk.red('⚠️  Field label is required'),
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'confirm',
+          name: 'isRequired',
+          message: chalk.yellow('❓ Is this field required?'),
+          default: true,
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'list',
+          name: 'fieldWidth',
+          message: chalk.yellow('❓ Select field width:'),
+          choices: [
+            { name: chalk.green('⬜ Full width (100%)'), value: 'full' },
+            { name: chalk.green('▦️ Half width (48% - side by side)'), value: 'half' },
+          ],
+          default: 'full',
+          when: (answers) => answers.fieldType !== 'checkbox',
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'input',
+          name: 'dropdownOptions',
+          message: chalk.yellow('❓ Enter dropdown options') + chalk.gray(' (comma-separated, e.g., Option1,Option2):'),
+          when: (answers) => answers.fieldType === 'dropdown' || answers.fieldType === 'radio',
+          prefix: chalk.green('✓'),
+        },
+        {
+          type: 'confirm',
+          name: 'addMore',
+          message: chalk.yellow('❓ Add another field?'),
+          default: true,
+          prefix: chalk.green('✓'),
+        },
+      ]);
+
+      formFields.push({
+        name: fieldAnswers.fieldName,
+        type: fieldAnswers.fieldType,
+        label: fieldAnswers.fieldLabel,
+        required: fieldAnswers.isRequired,
+        width: fieldAnswers.fieldWidth || 'full',
+        options: fieldAnswers.dropdownOptions?.split(',').map(o => o.trim()),
+      });
+
+      addMore = fieldAnswers.addMore;
+    }
+
+    // Ask about submit/continue button and event name
+    const buttonAnswer = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'hasSubmitButton',
+        message: chalk.yellow('❓ Does this screen have a submit/continue button?'),
+        default: true,
+        prefix: chalk.green('✓'),
+      },
+    ]);
+
+    if (buttonAnswer.hasSubmitButton) {
+      const eventAnswer = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'eventName',
+          message: chalk.yellow('❓ Please enter the notify visitor\'s event name:'),
+          validate: (input) => input.trim() !== '' || chalk.red('⚠️  Event name is required'),
+          prefix: chalk.green('✓'),
+        },
+      ]);
+      eventName = eventAnswer.eventName;
+    }
+  }
+
+  const screenPath = getProjectPath('screens', featureName, screenName);
+  const hooksPath = path.join(screenPath, 'hooks');
+  const componentsPath = path.join(screenPath, 'components');
+
+  const screenFile = path.join(screenPath, `${screenName}.js`);
+  const hookFile = path.join(hooksPath, `use${screenName}.js`);
+  const stylesFile = path.join(componentsPath, 'styles.js');
+  const constantsFile = path.join(screenPath, 'constants.js');
+  const helpersFile = path.join(screenPath, 'helpers.js');
+
+  const files = [
+    { path: screenFile, content: generateScreenTemplate(screenName, featureName, answers.hasForm, formFields) },
+    { path: hookFile, content: answers.apiConfig 
+      ? generateApiIntegratedHookTemplate(screenName, answers.apiConfig, formFields)
+      : generateHookTemplate(screenName, answers.hasForm, formFields, eventName) },
+    { path: stylesFile, content: generateStylesTemplate() },
+    { path: constantsFile, content: generateConstantsTemplate(formFields) },
+    { path: helpersFile, content: generateHelpersTemplate() },
+  ];
+
+  // Add API service and query files if API integration is enabled
+  if (answers.apiConfig) {
+    const serviceDir = getProjectPath('services', featureName.toLowerCase());
+    const queryFile = getProjectPath('queries', `${featureName.toLowerCase()}Query.js`);
+    const serviceFile = path.join(serviceDir, `${featureName.toLowerCase()}.js`);
+    
+    files.push(
+      { path: serviceFile, content: generateApiServiceTemplate(answers.apiConfig) },
+      { path: queryFile, content: generateQueryOptionsTemplate(answers.apiConfig) }
+    );
+  }
+
+  if (answers.hasForm) {
+    const validationFile = path.join(screenPath, 'validation.js');
+    files.push({ path: validationFile, content: generateValidationTemplate(formFields, screenName) });
+  }
+
+  for (const file of files) {
+    if (fileExists(file.path)) {
+      const shouldOverwrite = await confirmOverwrite(inquirer, file.path);
+      if (!shouldOverwrite) {
+        logInfo(`Skipped: ${path.basename(file.path)}`);
+        continue;
+      }
+    }
+    writeFile(file.path, file.content);
+    logSuccess(`Created: ${path.relative(getProjectPath(), file.path)}`);
+  }
+
+  // Add screen to screens/index.js
+  const screensIndexPath = getProjectPath('screens', 'index.js');
+  if (fileExists(screensIndexPath)) {
+    addScreenToIndexExport(screenName, featureName, screensIndexPath);
+  }
+
+  // Add screen to Navigation.js
+  const navigationPath = getProjectPath('navigations', 'Navigation.js');
+  if (fileExists(navigationPath)) {
+    addScreenToNavigation(screenName, featureName, navigationPath);
+  }
+
+  logSuccess(`\n✨ Screen "${screenName}" added to "${featureName}" successfully!`);
+  
+  if (answers.apiConfig) {
+    console.log(chalk.cyan('\n╭────────────────────────────────────────────────────────────╮'));
+    console.log(chalk.cyan('│') + chalk.white.bold('                🚀  API INTEGRATION COMPLETE                ') + chalk.cyan('│'));
+    console.log(chalk.cyan('╰────────────────────────────────────────────────────────────╯'));
+    console.log(chalk.white('  • ') + chalk.green('✓') + chalk.gray(' API Service: ') + chalk.blue(`services/${featureName.toLowerCase()}/${featureName.toLowerCase()}.js`));
+    console.log(chalk.white('  • ') + chalk.green('✓') + chalk.gray(' Query Options: ') + chalk.blue(`queries/${featureName.toLowerCase()}Query.js`));
+    console.log(chalk.white('  • ') + chalk.green('✓') + chalk.gray(' React Query Hook: ') + chalk.blue(`Integrated in use${screenName}.js`));
+  }
+  
+  console.log(chalk.cyan('\n╭────────────────────────────────────────────────────────────╮'));
+  console.log(chalk.cyan('│') + chalk.white.bold('                    📝  NEXT STEPS                         ') + chalk.cyan('│'));
+  console.log(chalk.cyan('╰────────────────────────────────────────────────────────────╯'));
+  console.log(chalk.white('  1. ') + chalk.green('✓') + chalk.gray(' Implement the screen logic in the hook'));
+  console.log(chalk.white('  2. ') + chalk.green('✓') + chalk.gray(' Test the navigation to the new screen'));
+  console.log(chalk.cyan('\n' + '─'.repeat(65) + '\n'));
+};
+
+module.exports = { generateScreen };

package/index.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const chalk = require('chalk');
+const packageJson = require('./package.json');
+const { generateFeature } = require('./generators/feature');
+const { generateScreen } = require('./generators/screen');
+const { generateAPI } = require('./generators/api');
+const { generateHook } = require('./generators/hook');
+
+// Display professional banner
+const displayBanner = () => {
+  console.clear();
+  console.log('');
+  console.log(chalk.cyan.bold('  ███╗   ███╗ ██████╗  █████╗ ███╗   ███╗ ██████╗    ██████╗██╗     ██╗'));
+  console.log(chalk.cyan.bold('  ████╗ ████║██╔═══██╗██╔══██╗████╗ ████║██╔════╝   ██╔════╝██║     ██║'));
+  console.log(chalk.cyan.bold('  ██╔████╔██║██║   ██║███████║██╔████╔██║██║        ██║     ██║     ██║'));
+  console.log(chalk.cyan.bold('  ██║╚██╔╝██║██║   ██║██╔══██║██║╚██╔╝██║██║        ██║     ██║     ██║'));
+  console.log(chalk.cyan.bold('  ██║ ╚═╝ ██║╚██████╔╝██║  ██║██║ ╚═╝ ██║╚██████╗   ╚██████╗███████╗██║'));
+  console.log(chalk.cyan.bold('  ╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝ ╚═════╝    ╚═════╝╚══════╝╚═╝'));
+  console.log('');
+  console.log(chalk.gray('           Professional Code Generation Tool for Investor Applications'));
+  console.log(chalk.gray('           Version: ') + chalk.yellow(packageJson.version) + chalk.gray(' | Powered by MOAMC Engineering Team'));
+  console.log('');
+  console.log(chalk.cyan('  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
+  console.log(chalk.white.bold('\n  📋 Available Commands:\n'));
+  console.log(chalk.green('     • generate:feature') + chalk.gray(' (g:f)') + ' - Create a complete feature module');
+  console.log(chalk.green('     • generate:screen') + chalk.gray('  (g:s)') + ' - Add a new screen to existing feature');
+  console.log(chalk.green('     • generate:api') + chalk.gray('     (g:a)') + ' - Generate API service methods');
+  console.log(chalk.green('     • generate:hook') + chalk.gray('    (g:h)') + ' - Create data-fetching hooks');
+  console.log('');
+  console.log(chalk.cyan('  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
+  console.log('');
+};
+
+// Show banner before any command
+displayBanner();
+
+program
+  .name('moamc-cli')
+  .description('Enterprise-grade code generator for MOAMC Investor Applications')
+  .version(packageJson.version);
+
+program
+  .command('generate:feature')
+  .alias('g:f')
+  .description('🎯 Generate a new feature with screen, API, and hook')
+  .action(async () => {
+    try {
+      console.log(chalk.cyan('\n🚀 Initiating Feature Generation Module...\n'));
+      await generateFeature();
+    } catch (error) {
+      console.error(chalk.red.bold('\n❌ Error generating feature:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('generate:screen')
+  .alias('g:s')
+  .description('📱 Add a new screen to an existing feature')
+  .action(async () => {
+    try {
+      console.log(chalk.cyan('\n🚀 Initiating Screen Generation Module...\n'));
+      await generateScreen();
+    } catch (error) {
+      console.error(chalk.red.bold('\n❌ Error generating screen:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('generate:api')
+  .alias('g:a')
+  .description('🔌 Add a new API method')
+  .action(async () => {
+    try {
+      console.log(chalk.cyan('\n🚀 Initiating API Generation Module...\n'));
+      await generateAPI();
+    } catch (error) {
+      console.error(chalk.red.bold('\n❌ Error generating API:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('generate:hook')
+  .alias('g:h')
+  .description('🪝 Generate a data-fetching hook')
+  .action(async () => {
+    try {
+      console.log(chalk.cyan('\n🚀 Initiating Hook Generation Module...\n'));
+      await generateHook();
+    } catch (error) {
+      console.error(chalk.red.bold('\n❌ Error generating hook:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@moamc/rn-cli",
+  "version": "1.0.0",
+  "description": "Enterprise-grade Code Generation CLI for React Native Applications",
+  "main": "index.js",
+  "bin": {
+    "rn-cli": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js"
+  },
+  "keywords": [
+    "cli",
+    "generator",
+    "react-native",
+    "code-generation",
+    "scaffolding",
+    "boilerplate"
+  ],
+  "author": "MOAMC Engineering Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moamc/rn-cli.git"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "inquirer": "^8.2.5",
+    "chalk": "^4.1.2",
+    "fs-extra": "^11.2.0"
+  },
+  "files": [
+    "index.js",
+    "generators/",
+    "templates/",
+    "utils/",
+    "README.md",
+    "LICENSE"
+  ]
+}