rnsup 1.0.2 → 1.0.3

package/dist/commands/setup.js

@@ -35,7 +35,7 @@ async function runSetup() {
             process.exit(1);
         }
         /* ---------- 2. Ask package manager ---------- */
-        const manager = await (0, selectPrompt_1.selectOption)('Which package manager do you want to use?', ['npm', 'yarn', 'pnpm']);
+        const manager = await (0, selectPrompt_1.selectOption)('Which package manager do you want to use?', ['npm', 'yarn', 'pnpm'], 'yarn');
         /* ---------- 3. Validate manager installed ---------- */
         if (!(0, packageManager_1.isInstalled)(manager)) {
             console.log('\nSelected package manager is not installed on your system.\n');

package/dist/commands/viewStructure.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewStructure = viewStructure;
+const path_1 = __importDefault(require("path"));
+const chalk_1 = __importDefault(require("chalk"));
+const inquirer_1 = __importDefault(require("inquirer"));
+const treeGenerator_1 = require("../utils/treeGenerator");
+const handleCancel_1 = require("../utils/handleCancel");
+async function viewStructure(options) {
+    try {
+        // Handle Ctrl+C gracefully
+        process.on('SIGINT', () => {
+            console.log(chalk_1.default.yellow('\n\nCancelled.'));
+            process.exit(0);
+        });
+        // Parse flags
+        const pretty = options.pretty || options.p || false;
+        const showTime = options.time || false;
+        // Show hints if first time or no input
+        if (!options.parent?.args?.[1]) {
+            console.log('\n' + chalk_1.default.cyan.bold('💡 Usage Hints'));
+            console.log(chalk_1.default.gray('─'.repeat(60)));
+            console.log(chalk_1.default.yellow('Command:'), chalk_1.default.white('rnsup view [options]'));
+            console.log();
+            console.log(chalk_1.default.yellow('Input options (when prompted):'));
+            console.log('  ' + chalk_1.default.white('. or root') + chalk_1.default.gray(' → Show entire project (all folders/files)'));
+            console.log('  ' + chalk_1.default.white('src') + chalk_1.default.gray(' → Show only src/ directory'));
+            console.log();
+            console.log(chalk_1.default.yellow('Command flags:'));
+            console.log('  ' + chalk_1.default.white('-p, --pretty') + chalk_1.default.gray(' → Show with icons, colors, and file sizes'));
+            console.log('  ' + chalk_1.default.white('--time') + chalk_1.default.gray(' → Show file/folder creation date and time'));
+            console.log();
+            console.log(chalk_1.default.yellow('Examples:'));
+            console.log('  ' + chalk_1.default.white('rnsup view') + chalk_1.default.gray(' → Raw structure (no icons)'));
+            console.log('  ' + chalk_1.default.white('rnsup view -p') + chalk_1.default.gray(' → Pretty view with icons & colors'));
+            console.log('  ' + chalk_1.default.white('rnsup view --time') + chalk_1.default.gray(' → Show with timestamps'));
+            console.log('  ' + chalk_1.default.white('rnsup view -p --time') + chalk_1.default.gray(' → Pretty view + timestamps'));
+            console.log(chalk_1.default.gray('─'.repeat(60)));
+            console.log();
+        }
+        const { viewTarget } = await inquirer_1.default.prompt([
+            {
+                type: 'list',
+                name: 'viewTarget',
+                message: 'What would you like to view?',
+                choices: [
+                    { name: '📂 Root level (entire project)', value: 'root' },
+                    { name: '📂 Inside src/ folder only', value: 'src' }
+                ]
+            }
+        ]);
+        let targetPath = process.cwd();
+        let displayLocation = 'root';
+        if (viewTarget === 'src') {
+            targetPath = path_1.default.join(process.cwd(), 'src');
+            displayLocation = 'src';
+        }
+        // Show colored header
+        console.log('\n' + chalk_1.default.cyan.bold('📋 Directory Structure'));
+        console.log(chalk_1.default.gray('─'.repeat(60)));
+        console.log(chalk_1.default.yellow('Location: '), chalk_1.default.white(displayLocation));
+        console.log(chalk_1.default.yellow('Mode:     '), pretty ? chalk_1.default.magenta('Pretty') : chalk_1.default.dim('Raw'));
+        if (showTime) {
+            console.log(chalk_1.default.yellow('Time:     '), chalk_1.default.magenta('Enabled'));
+        }
+        console.log(chalk_1.default.gray('─'.repeat(60)));
+        console.log();
+        // Build and display tree
+        const nodes = await (0, treeGenerator_1.buildTree)(targetPath, 10);
+        if (nodes.length === 0) {
+            console.log(chalk_1.default.yellow('No files or folders found in this directory.'));
+        }
+        else {
+            const formattedTree = (0, treeGenerator_1.formatTree)(nodes, { pretty, showTime });
+            console.log(formattedTree);
+        }
+        // Footer with hints
+        console.log(chalk_1.default.gray('─'.repeat(60)));
+        if (pretty) {
+            console.log(chalk_1.default.dim('📁 Cyan = folders  |  Colors = file types (blue=.ts, green=.json, etc)'));
+        }
+        console.log(chalk_1.default.dim('💡 Tip: You can copy the structure above for documentation'));
+        console.log();
+    }
+    catch (err) {
+        (0, handleCancel_1.handleCancel)(err);
+    }
+}

package/dist/index.js

@@ -5,6 +5,7 @@ const setup_1 = require("./commands/setup");
 const generateScreen_1 = require("./commands/generateScreen");
 const generateComponent_1 = require("./commands/generateComponent");
 const generateFolder_1 = require("./commands/generateFolder");
+const viewStructure_1 = require("./commands/viewStructure");
 const program = new commander_1.Command();
 program
     .name('rnsup')
@@ -15,6 +16,14 @@ program
     .command('setup')
     .description('Configure React Native project')
     .action(setup_1.runSetup);
+/* ---------- View Structure ---------- */
+program
+    .command('view')
+    .alias('v')
+    .description('View project folder structure')
+    .option('-p, --pretty', 'Show with icons, colors and file sizes')
+    .option('--time', 'Show file/folder creation date and time')
+    .action(viewStructure_1.viewStructure);
 /* ---------- Generator Root ---------- */
 const generate = new commander_1.Command('generate')
     .alias('g')

package/dist/templates/componentTemplates.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentTemplate = getComponentTemplate;
+function getComponentTemplate(name, type) {
+    switch (type) {
+        case 'container':
+            return containerComponentTemplate(name);
+        default:
+            return presentationalComponentTemplate(name);
+    }
+}
+function presentationalComponentTemplate(name) {
+    return `import React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+
+interface Props {
+  title?: string;
+  children?: React.ReactNode;
+  style?: ViewStyle;
+}
+
+const ${name}: React.FC<Props> = ({ title, children, style }) => {
+  return (
+    <View style={[styles.container, style]}>
+      {title && <Text style={styles.title}>{title}</Text>}
+      {children}
+    </View>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+});
+`;
+}
+function containerComponentTemplate(name) {
+    return `import React, { useState } from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+interface Props {
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}
+
+interface State {
+  loading: boolean;
+  error: string | null;
+}
+
+const ${name}: React.FC<Props> = ({ style, children }) => {
+  const navigation = useNavigation();
+  const [state, setState] = useState<State>({ loading: false, error: null });
+
+  React.useEffect(() => {
+    // TODO: Initialize component data
+  }, []);
+
+  return (
+    <View style={[styles.container, style]}>
+      {state.loading ? (
+        <View style={styles.centerContent}>
+          {/* Loading indicator */}
+        </View>
+      ) : state.error ? (
+        <View style={styles.centerContent}>
+          {/* Error display */}
+        </View>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  centerContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+`;
+}

package/dist/templates/screenTemplates.js

@@ -0,0 +1,342 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScreenTemplate = getScreenTemplate;
+function getScreenTemplate(name, type) {
+    switch (type) {
+        case 'list':
+            return listScreenTemplate(name);
+        case 'form':
+            return formScreenTemplate(name);
+        case 'detail':
+            return detailScreenTemplate(name);
+        default:
+            return basicScreenTemplate(name);
+    }
+}
+function basicScreenTemplate(name) {
+    return `import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+const ${name} = () => {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>${name}</Text>
+    </View>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+`;
+}
+function listScreenTemplate(name) {
+    return `import React, { useState } from 'react';
+import { View, Text, FlatList, StyleSheet, ActivityIndicator } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+interface Item {
+  id: string;
+  title: string;
+}
+
+const ${name} = () => {
+  const navigation = useNavigation();
+  const [items, setItems] = useState<Item[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const renderItem = ({ item }: { item: Item }) => (
+    <View style={styles.itemContainer}>
+      <Text style={styles.itemTitle}>{item.title}</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>${name}</Text>
+      {loading ? (
+        <ActivityIndicator size="large" color="#007AFF" />
+      ) : (
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={styles.listContent}
+        />
+      )}
+    </View>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  listContent: {
+    paddingBottom: 16,
+  },
+  itemContainer: {
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    marginBottom: 8,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+  },
+  itemTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+`;
+}
+function formScreenTemplate(name) {
+    return `import React, { useState } from 'react';
+import { View, Text, TextInput, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+interface FormData {
+  name: string;
+  email: string;
+}
+
+const ${name} = () => {
+  const navigation = useNavigation();
+  const [formData, setFormData] = useState<FormData>({ name: '', email: '' });
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      // TODO: Submit form data
+      console.log('Form data:', formData);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <Text style={styles.title}>${name}</Text>
+      
+      <View style={styles.formGroup}>
+        <Text style={styles.label}>Name</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter name"
+          value={formData.name}
+          onChangeText={(text) => setFormData({ ...formData, name: text })}
+        />
+      </View>
+
+      <View style={styles.formGroup}>
+        <Text style={styles.label}>Email</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter email"
+          value={formData.email}
+          onChangeText={(text) => setFormData({ ...formData, email: text })}
+          keyboardType="email-address"
+        />
+      </View>
+
+      <TouchableOpacity
+        style={[styles.button, loading && styles.buttonDisabled]}
+        onPress={handleSubmit}
+        disabled={loading}
+      >
+        <Text style={styles.buttonText}>{loading ? 'Submitting...' : 'Submit'}</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 24,
+  },
+  formGroup: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: '#333',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+    marginTop: 24,
+    marginBottom: 30,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+`;
+}
+function detailScreenTemplate(name) {
+    return `import React, { useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+interface DetailData {
+  id: string;
+  title: string;
+  description: string;
+  status: string;
+}
+
+const ${name} = () => {
+  const navigation = useNavigation();
+  const route = useRoute<any>();
+  const [data, setData] = useState<DetailData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  React.useEffect(() => {
+    // TODO: Fetch detail data
+    setLoading(false);
+  }, []);
+
+  if (loading) {
+    return (
+      <View style={styles.centerContainer}>
+        <ActivityIndicator size="large" color="#007AFF" />
+      </View>
+    );
+  }
+
+  if (!data) {
+    return (
+      <View style={styles.centerContainer}>
+        <Text style={styles.errorText}>No data found</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <Text style={styles.title}>{data.title}</Text>
+      
+      <View style={styles.section}>
+        <Text style={styles.sectionLabel}>Description</Text>
+        <Text style={styles.description}>{data.description}</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionLabel}>Status</Text>
+        <Text style={[styles.status, { color: data.status === 'active' ? '#4CAF50' : '#FF9800' }]}>
+          {data.status}
+        </Text>
+      </View>
+
+      <TouchableOpacity style={styles.editButton}>
+        <Text style={styles.editButtonText}>Edit</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  centerContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 24,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: '#666',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#333',
+  },
+  status: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#f44336',
+  },
+  editButton: {
+    backgroundColor: '#007AFF',
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+    marginTop: 24,
+    marginBottom: 30,
+  },
+  editButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+`;
+}

package/dist/utils/selectPrompt.js

@@ -4,31 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectOption = selectOption;
-const readline_1 = __importDefault(require("readline"));
+const inquirer_1 = __importDefault(require("inquirer"));
 /**
- * Numeric select prompt
+ * Interactive list prompt using inquirer
  * Returns a typed value instead of raw string
  */
-async function selectOption(message, options) {
-    return new Promise((resolve) => {
-        console.log('\n\x1b[1;36m' + message + '\x1b[0m');
-        options.forEach((opt, i) => {
-            console.log(`${i + 1}) ${opt}`);
-        });
-        const rl = readline_1.default.createInterface({
-            input: process.stdin,
-            output: process.stdout
-        });
-        rl.question('\x1b[1;33mEnter choice number: \x1b[0m', (answer) => {
-            const index = Number(answer) - 1;
-            rl.close();
-            if (index >= 0 && index < options.length) {
-                resolve(options[index]);
-            }
-            else {
-                console.log('\x1b[1;31mInvalid selection. Defaulting to first option.\x1b[0m');
-                resolve(options[0]);
-            }
-        });
-    });
+async function selectOption(message, options, defaultValue) {
+    const { selected } = await inquirer_1.default.prompt([
+        {
+            type: 'list',
+            name: 'selected',
+            message: message,
+            choices: [...options],
+            default: defaultValue || options[0]
+        }
+    ]);
+    return selected;
 }