@nishant0121/set-it-up 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nishant0121/set-it-up",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A high-performance CLI tool to bootstrap and forge new projects with pre-configured templates, prerequisite checking, and interactive setup.",
   "license": "ISC",
   "author": "Nishant Patil",

package/src/engines/reactNative.js

@@ -46,14 +46,28 @@ export async function setupReactNative(answers, rnAnswers) {
 
       spinner.text = 'Configuring Navigation...';
       
-      const templateFileName = isTypescript ? 'navigation.tsx' : 'navigation.jsx';
-      const templatePath = path.join(__dirname, '..', 'templates', 'reactNative', templateFileName);
-      
-      const content = await fs.readFile(templatePath, 'utf8');
+      // Create modular folder structure
+      const srcDir = path.join(projectName, 'src');
+      const pagesDir = path.join(srcDir, 'pages');
+      const componentsDir = path.join(srcDir, 'components');
 
-      const targetPath = isTypescript ? appTsxPath : appJsxPath;
-      
-      await fs.writeFile(targetPath, content);
+      await fs.ensureDir(pagesDir);
+      await fs.ensureDir(componentsDir);
+
+      const ext = isTypescript ? 'tsx' : 'jsx';
+      const templateBase = path.join(__dirname, '..', 'templates', 'reactNative', 'modular');
+
+      // Copy App file
+      const appContent = await fs.readFile(path.join(templateBase, `App.${ext}`), 'utf8');
+      const targetAppPath = isTypescript ? appTsxPath : appJsxPath;
+      await fs.writeFile(targetAppPath, appContent);
+
+      // Copy Screens
+      const homeContent = await fs.readFile(path.join(templateBase, 'pages', `HomeScreen.${ext}`), 'utf8');
+      await fs.writeFile(path.join(pagesDir, `HomeScreen.${ext}`), homeContent);
+
+      const detailsContent = await fs.readFile(path.join(templateBase, 'pages', `DetailsScreen.${ext}`), 'utf8');
+      await fs.writeFile(path.join(pagesDir, `DetailsScreen.${ext}`), detailsContent);
     }
 
     spinner.succeed(chalk.green(`Project ${projectName} created successfully! 🚀`));

package/src/templates/reactNative/modular/App.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from './src/pages/HomeScreen';
+import DetailsScreen from './src/pages/DetailsScreen';
+
+const Stack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

package/src/templates/reactNative/modular/App.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from './src/pages/HomeScreen';
+import DetailsScreen from './src/pages/DetailsScreen';
+
+const Stack = createNativeStackNavigator();
+
+function App(): React.JSX.Element {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

package/src/templates/reactNative/modular/pages/DetailsScreen.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView } from 'react-native';
+
+export default function DetailsScreen({ navigation }) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Text style={styles.title}>Details Screen</Text>
+          <Text style={styles.text}>
+            This is a detail view. You can add more complex content, forms, or data displays here.
+          </Text>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.goBack()}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.buttonText}>Go Back</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  content: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'center',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    elevation: 4,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1a1a1a',
+    marginBottom: 16,
+  },
+  text: {
+    fontSize: 16,
+    color: '#4a4a4a',
+    textAlign: 'center',
+    marginBottom: 32,
+    lineHeight: 24,
+  },
+  button: {
+    backgroundColor: '#ffffff',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    width: '100%',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#e1e1e1',
+  },
+  buttonText: {
+    color: '#1a1a1a',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/templates/reactNative/modular/pages/DetailsScreen.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+type RootStackParamList = {
+  Home: undefined;
+  Details: undefined;
+};
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;
+
+export default function DetailsScreen({ navigation }: Props) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Text style={styles.title}>Details Screen</Text>
+          <Text style={styles.text}>
+            This is a detail view. You can add more complex content, forms, or data displays here.
+          </Text>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.goBack()}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.buttonText}>Go Back</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  content: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'center',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    elevation: 4,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1a1a1a',
+    marginBottom: 16,
+  },
+  text: {
+    fontSize: 16,
+    color: '#4a4a4a',
+    textAlign: 'center',
+    marginBottom: 32,
+    lineHeight: 24,
+  },
+  button: {
+    backgroundColor: '#ffffff',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    width: '100%',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#e1e1e1',
+  },
+  buttonText: {
+    color: '#1a1a1a',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/templates/reactNative/modular/pages/HomeScreen.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView, StatusBar } from 'react-native';
+
+export default function HomeScreen({ navigation }) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#f8f9fa" />
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <Text style={styles.title}>Welcome Home</Text>
+          <Text style={styles.subtitle}>Start building something amazing</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.cardText}>
+            This is your new modular React Native project. Navigate to the details to see more.
+          </Text>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.navigate('Details')}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.buttonText}>Go to Details</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  content: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'center',
+  },
+  header: {
+    marginBottom: 48,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: '800',
+    color: '#1a1a1a',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666666',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    elevation: 4,
+    alignItems: 'center',
+  },
+  cardText: {
+    fontSize: 16,
+    color: '#4a4a4a',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    width: '100%',
+    alignItems: 'center',
+    shadowColor: '#007AFF',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

package/src/templates/reactNative/modular/pages/HomeScreen.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView, StatusBar } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+type RootStackParamList = {
+  Home: undefined;
+  Details: undefined;
+};
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+export default function HomeScreen({ navigation }: Props) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#f8f9fa" />
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <Text style={styles.title}>Welcome Home</Text>
+          <Text style={styles.subtitle}>Start building something amazing</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.cardText}>
+            This is your new modular React Native project. Navigate to the details to see more.
+          </Text>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.navigate('Details')}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.buttonText}>Go to Details</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  content: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'center',
+  },
+  header: {
+    marginBottom: 48,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: '800',
+    color: '#1a1a1a',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666666',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    elevation: 4,
+    alignItems: 'center',
+  },
+  cardText: {
+    fontSize: 16,
+    color: '#4a4a4a',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    width: '100%',
+    alignItems: 'center',
+    shadowColor: '#007AFF',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

package/src/wizard.js

@@ -14,7 +14,7 @@ export async function mainWizard() {
   const title = `
    SET - IT - UP   
 `;
-  
+
   const boxenOptions = {
     padding: 1,
     margin: 1,
@@ -24,14 +24,14 @@ export async function mainWizard() {
   };
 
   const welcomeMessage = boxen(
-    gradient.pastel.multiline(title) + 
-    '\n' + 
+    gradient.pastel.multiline(title) +
+    '\n' +
     chalk.white('🚀 Ready to launch your next idea?'),
     boxenOptions
   );
 
   console.log(welcomeMessage);
-  
+
   console.log(chalk.hex('#4285F4')('  Hi there! Let\'s configure your new project.\n'));
 
   const answers = await inquirer.prompt([
@@ -47,8 +47,8 @@ export async function mainWizard() {
       message: 'Enter your project name:',
       default: 'my-awesome-app',
       validate: (input) => {
-          if (/^([a-z0-9\-\_])+$/.test(input)) return true;
-          return 'Project name may only include lowercase letters, numbers, underscores and hashes.';
+        if (/^([a-z0-9\-\_])+$/.test(input)) return true;
+        return 'Project name may only include lowercase letters, numbers, underscores and hashes.';
       }
     },
     {
@@ -119,6 +119,6 @@ export async function mainWizard() {
     await setupReact(answers, reactAnswers);
 
   } else {
-      console.log(chalk.yellow('\n🚧 This feature is coming soon! Stay tuned.\n'));
+    console.log(chalk.yellow('\n🚧 This feature is coming soon! Stay tuned.\n'));
   }
 }