create-rn-clean-architecture 1.0.0

package/src/index.js

@@ -0,0 +1,125 @@
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const inquirer = require('inquirer');
+const { createDirectories } = require('./createDirectories');
+const { generateFiles } = require('./generateFiles');
+const { checkAndInstallDependencies } = require('./checkDependencies');
+
+async function scaffold() {
+  console.log(chalk.blue.bold('\n🏗️  React Native Clean Architecture Scaffold\n'));
+
+  // Check if in a project directory (has package.json)
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    console.log(chalk.yellow('⚠️  No package.json found in current directory.'));
+    console.log(chalk.gray('   This tool is typically used in a React Native project,'));
+    console.log(chalk.gray('   but will continue anyway.\n'));
+  } else {
+    // Check if it's a React Native or Expo project
+    const packageJson = await fs.readJson(packageJsonPath);
+    const isReactNative =
+      packageJson.dependencies?.['react-native'] ||
+      packageJson.devDependencies?.['react-native'];
+    const isExpo =
+      packageJson.dependencies?.['expo'] ||
+      packageJson.devDependencies?.['expo'];
+
+    if (!isReactNative && !isExpo) {
+      console.log(chalk.yellow('⚠️  This doesn\'t appear to be a React Native or Expo project.'));
+      const { continueAnyway } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'continueAnyway',
+          message: 'Continue anyway?',
+          default: false,
+        },
+      ]);
+
+      if (!continueAnyway) {
+        console.log(chalk.gray('Cancelled.'));
+        process.exit(0);
+      }
+    } else if (isExpo) {
+      console.log(chalk.cyan('✓ Expo project detected!\n'));
+    } else if (isReactNative) {
+      console.log(chalk.cyan('✓ React Native CLI project detected!\n'));
+    }
+  }
+
+  // Check if src directory already exists
+  const srcPath = path.join(process.cwd(), 'src');
+  if (fs.existsSync(srcPath)) {
+    const { overwrite } = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'overwrite',
+        message: 'src/ directory already exists. Continue and potentially overwrite files?',
+        default: false,
+      },
+    ]);
+
+    if (!overwrite) {
+      console.log(chalk.gray('Cancelled.'));
+      process.exit(0);
+    }
+  }
+
+  // Ask for confirmation to proceed
+  const { confirm } = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: 'This will create a complete React Native app with navigation and sample screens. Continue?',
+      default: true,
+    },
+  ]);
+
+  if (!confirm) {
+    console.log(chalk.yellow('Cancelled.'));
+    process.exit(0);
+  }
+
+  try {
+    // Create directories
+    console.log(chalk.cyan('\n📁 Creating directories...'));
+    await createDirectories();
+
+    // Generate all files
+    console.log(chalk.cyan('\n📝 Generating files...'));
+    await generateFiles();
+
+    // Check and install dependencies
+    await checkAndInstallDependencies();
+
+    // Success message
+    console.log(chalk.green.bold('\n✅ Clean architecture structure created successfully!\n'));
+    console.log(chalk.green('🎉 Your app is ready to run!\n'));
+
+    console.log(chalk.white('📂 What was created:'));
+    console.log(chalk.gray('   ✓ Complete directory structure'));
+    console.log(chalk.gray('   ✓ 4 sample screens (Splash, Home, Profile, Settings)'));
+    console.log(chalk.gray('   ✓ Navigation setup (Stack + Bottom Tabs)'));
+    console.log(chalk.gray('   ✓ Hooks, styles, and constants'));
+    console.log(chalk.gray('   ✓ Updated App.tsx ready to run'));
+    console.log(chalk.gray('   ✓ PROJECT_ARCHITECTURE.md guide\n'));
+
+    console.log(chalk.white('📋 Next steps:'));
+    console.log(chalk.gray('   1. Review PROJECT_ARCHITECTURE.md for complete guidelines'));
+    console.log(chalk.gray('   2. Run: npm start (or yarn start)'));
+    console.log(chalk.gray('   3. Your app now has complete navigation and sample screens!'));
+    console.log(chalk.gray('   4. Customize the screens and styles to match your needs\n'));
+
+    console.log(chalk.cyan('📚 Learn more:'));
+    console.log(chalk.gray('   - All screens follow clean architecture patterns'));
+    console.log(chalk.gray('   - Logic is separated in hooks'));
+    console.log(chalk.gray('   - Styles use centralized constants'));
+    console.log(chalk.gray('   - Ready to build upon!\n'));
+  } catch (error) {
+    console.log(chalk.red('\n❌ Error creating structure:'), error.message);
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+module.exports = { scaffold };

package/templates/PROJECT_ARCHITECTURE.md

@@ -0,0 +1,385 @@
+# React Native Clean Architecture Guide
+
+## 🎯 Architecture Principles
+
+This project follows **Clean Architecture** principles to ensure:
+- **Separation of Concerns**: Each part of the code has a single responsibility
+- **Maintainability**: Easy to update and modify code
+- **Testability**: Components and logic can be tested independently
+- **Scalability**: Structure supports growth without refactoring
+
+## 📁 Directory Structure
+
+```
+src/
+├── assets/              # Static resources
+│   ├── images/          # Image files
+│   ├── fonts/           # Custom fonts
+│   └── icons/           # Icon files
+├── components/          # Reusable UI components
+│   └── common/          # Shared components across the app
+├── constants/           # Application constants
+│   ├── sizings/         # Size-related constants
+│   │   └── SIZINGS.ts
+│   └── styles/          # Color and theme constants
+│       └── COLORS.ts
+├── hooks/               # Custom React hooks (business logic)
+├── navigation/          # Navigation configuration
+│   ├── stack/           # Stack navigator configurations
+│   └── bottom/          # Bottom tab navigator configurations
+├── screens/             # Screen components (UI only)
+├── state/               # State management
+│   ├── zustand/         # Zustand stores
+│   └── context/         # React Context providers
+├── styles/              # StyleSheet definitions
+├── types/               # TypeScript type definitions
+│   └── Type.ts
+└── utils/               # Utility functions
+```
+
+## 🏗️ Architecture Patterns
+
+### 1. Screen Component Pattern
+
+**Screens are PRESENTATION ONLY** - they only render UI and handle user interactions by calling hook functions.
+
+**File Structure:**
+```
+src/
+├── screens/
+│   └── home/
+│       └── HomeScreen.tsx
+├── hooks/
+│   └── home/
+│       └── useHomeLogic.ts
+├── styles/
+│   └── home/
+│       └── home.styles.ts
+└── constants/
+    └── home/
+        └── home.constants.ts
+```
+
+**Example HomeScreen.tsx:**
+```typescript
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { useHomeLogic } from '../../hooks/home/useHomeLogic';
+import { styles } from '../../styles/home/home.styles';
+
+export const HomeScreen: React.FC = () => {
+  const { data, loading, handleRefresh } = useHomeLogic();
+
+  if (loading) {
+    return <Text>Loading...</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{data.title}</Text>
+      <TouchableOpacity onPress={handleRefresh}>
+        <Text>Refresh</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+```
+
+**Example useHomeLogic.ts:**
+```typescript
+import { useState, useEffect } from 'react';
+import { HOME_CONSTANTS } from '../../constants/home/home.constants';
+
+export const useHomeLogic = () => {
+  const [data, setData] = useState({ title: HOME_CONSTANTS.DEFAULT_TITLE });
+  const [loading, setLoading] = useState(false);
+
+  const handleRefresh = async () => {
+    setLoading(true);
+    // Business logic here
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    // Initial data fetch
+  }, []);
+
+  return {
+    data,
+    loading,
+    handleRefresh,
+  };
+};
+```
+
+**Example home.styles.ts:**
+```typescript
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../../constants/styles/COLORS';
+import { SIZINGS } from '../../constants/sizings/SIZINGS';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.colors.background,
+    padding: SIZINGS.spacing.md,
+  },
+  title: {
+    fontSize: SIZINGS.fontSizings.large_3,
+    color: COLORS.colors.text,
+  },
+});
+```
+
+**Example home.constants.ts:**
+```typescript
+export const HOME_CONSTANTS = {
+  DEFAULT_TITLE: 'Welcome Home',
+  MAX_ITEMS: 10,
+  REFRESH_INTERVAL: 5000,
+};
+```
+
+### 2. Component Pattern
+
+**Components should be PURE and REUSABLE**.
+
+**File Structure:**
+```
+src/
+├── components/
+│   └── button/
+│       └── CustomButton.tsx
+└── styles/
+    └── components/
+        └── button.styles.ts
+```
+
+**Example CustomButton.tsx:**
+```typescript
+import React from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import { styles } from '../../styles/components/button.styles';
+
+interface CustomButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+}
+
+export const CustomButton: React.FC<CustomButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.button, styles[variant]]}
+      onPress={onPress}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+```
+
+### 3. State Management Pattern
+
+Use **Zustand** for global state and **React Context** for feature-specific state.
+
+**Zustand Store Example:**
+```typescript
+// src/state/zustand/authStore.ts
+import { create } from 'zustand';
+
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  login: (user: User) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  isAuthenticated: false,
+  login: (user) => set({ user, isAuthenticated: true }),
+  logout: () => set({ user: null, isAuthenticated: false }),
+}));
+```
+
+### 4. Navigation Pattern
+
+**Stack Navigation Example:**
+```typescript
+// src/navigation/stack/MainStack.tsx
+import { createStackNavigator } from '@react-navigation/stack';
+import { HomeScreen } from '../../screens/home/HomeScreen';
+import { RootStackParamList } from '../../types/Type';
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+export const MainStack = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+    </Stack.Navigator>
+  );
+};
+```
+
+## 🚫 NO Barrel Exports
+
+**NEVER use index.ts files for re-exporting.**
+
+❌ **Bad:**
+```typescript
+// src/components/index.ts
+export { CustomButton } from './button/CustomButton';
+export { CustomInput } from './input/CustomInput';
+```
+
+✅ **Good:**
+```typescript
+// Direct imports
+import { CustomButton } from '../../components/button/CustomButton';
+import { CustomInput } from '../../components/input/CustomInput';
+```
+
+## 📝 Naming Conventions
+
+### Files
+- **Screens**: `PascalCase` + `Screen` suffix → `HomeScreen.tsx`
+- **Components**: `PascalCase` → `CustomButton.tsx`
+- **Hooks**: `camelCase` + `use` prefix → `useHomeLogic.ts`
+- **Styles**: `camelCase` + `.styles` suffix → `home.styles.ts`
+- **Constants**: `camelCase` + `.constants` suffix → `home.constants.ts`
+- **Types**: `PascalCase` → `Type.ts`
+
+### Variables
+- **Components**: `PascalCase` → `CustomButton`
+- **Hooks**: `camelCase` + `use` prefix → `useHomeLogic`
+- **Constants**: `SCREAMING_SNAKE_CASE` → `API_BASE_URL`
+- **Functions**: `camelCase` → `handlePress`
+- **Variables**: `camelCase` → `userData`
+
+## 🎨 Styling Guidelines
+
+1. **Always use constants** from `COLORS.ts` and `SIZINGS.ts`
+2. **Create separate style files** for each screen/component
+3. **Use StyleSheet.create()** for performance
+4. **Group related styles** together
+
+```typescript
+export const styles = StyleSheet.create({
+  // Container styles
+  container: { ... },
+  wrapper: { ... },
+
+  // Text styles
+  title: { ... },
+  subtitle: { ... },
+
+  // Button styles
+  button: { ... },
+  buttonText: { ... },
+});
+```
+
+## 🔧 Best Practices
+
+### 1. Keep Screens Simple
+- Screens should ONLY contain JSX and call hook functions
+- No business logic in screens
+- No direct API calls in screens
+- No complex calculations in screens
+
+### 2. Use Custom Hooks
+- All business logic goes in custom hooks
+- Hooks handle state, side effects, and data fetching
+- Hooks are reusable and testable
+
+### 3. Separate Concerns
+- **UI**: Screens and Components
+- **Logic**: Hooks
+- **Styles**: StyleSheets
+- **Constants**: Constant files
+- **Types**: Type definition files
+
+### 4. Import Organization
+```typescript
+// 1. React and React Native imports
+import React, { useState, useEffect } from 'react';
+import { View, Text } from 'react-native';
+
+// 2. Third-party libraries
+import { useNavigation } from '@react-navigation/native';
+
+// 3. Hooks
+import { useHomeLogic } from '../../hooks/home/useHomeLogic';
+
+// 4. Components
+import { CustomButton } from '../../components/button/CustomButton';
+
+// 5. Styles
+import { styles } from '../../styles/home/home.styles';
+
+// 6. Constants and Types
+import { HOME_CONSTANTS } from '../../constants/home/home.constants';
+import { Navigation } from '../../types/Type';
+```
+
+### 5. Type Safety
+- Always define TypeScript types and interfaces
+- Use type inference when possible
+- Avoid `any` type
+- Define navigation types in `Type.ts`
+
+## 🧪 Testing Strategy
+
+### Unit Tests
+- Test hooks independently
+- Test utility functions
+- Mock API calls
+
+### Component Tests
+- Test component rendering
+- Test user interactions
+- Mock hook return values
+
+### Integration Tests
+- Test screen flows
+- Test navigation
+- Test state management
+
+## 📦 Recommended Packages
+
+```json
+{
+  "dependencies": {
+    "zustand": "^4.x.x",
+    "@react-navigation/native": "^6.x.x",
+    "@react-navigation/stack": "^6.x.x",
+    "@react-navigation/bottom-tabs": "^6.x.x"
+  }
+}
+```
+
+## 🚀 Getting Started
+
+1. Create a new screen following the pattern above
+2. Implement the custom hook with business logic
+3. Create styles using constants
+4. Define any constants needed
+5. Update navigation types in `Type.ts`
+6. Add the screen to your navigator
+
+## 📚 Additional Resources
+
+- [React Native Documentation](https://reactnative.dev/)
+- [Zustand Documentation](https://docs.pmnd.rs/zustand/)
+- [React Navigation Documentation](https://reactnavigation.org/)
+- [Clean Architecture Principles](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html)
+
+---
+
+**Remember**: The goal is to keep code organized, maintainable, and scalable. Always follow these patterns and principles!

package/templates/constants/COLORS.ts.template

@@ -0,0 +1,36 @@
+export const COLORS = {
+  colors: {
+    // Primary Colors
+    primary: '#007AFF',
+    secondary: '#5856D6',
+
+    // Neutral Colors
+    white: '#ffffff',
+    white_50: '#f5f5f5',
+    black: '#000000',
+
+    // Gray Scale
+    gray_900: '#111111',
+    gray_800: '#1f1f1f',
+    gray_700: '#444444',
+    gray_600: '#555555',
+    gray_500: '#6b6b6b',
+    gray_400: '#9e9e9e',
+    gray_300: '#c7c7c7',
+    gray_200: '#e0e0e0',
+    gray_100: '#f0f0f0',
+
+    // Status Colors
+    success: '#34C759',
+    warning: '#FF9500',
+    error: '#FF3B30',
+    info: '#5AC8FA',
+
+    // Semantic Colors
+    background: '#ffffff',
+    surface: '#f5f5f5',
+    text: '#111111',
+    textSecondary: '#6b6b6b',
+    border: '#e0e0e0',
+  },
+};

package/templates/constants/SIZINGS.ts.template

@@ -0,0 +1,51 @@
+export const SIZINGS = {
+  borderSizings: {
+    extra_small: 1,
+    small: 2,
+    medium: 3,
+    large_1: 4,
+    large_2: 5,
+    large_3: 6,
+    large_4: 7,
+    large_5: 8,
+    large_6: 9,
+    large_7: 10,
+    large_8: 11,
+    large_9: 12,
+    large_10: 13,
+  },
+
+  fontSizings: {
+    extra_small: 12,
+    small: 14,
+    medium: 16,
+    large: 18,
+    large_1: 19,
+    large_2: 20,
+    large_3: 21,
+    large_4: 22,
+    large_5: 23,
+    large_6: 24,
+    large_7: 25,
+    large_8: 26,
+    large_9: 27,
+    large_10: 28,
+  },
+
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+
+  borderRadius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+  },
+};

package/templates/constants/splash.constants.ts.template

@@ -0,0 +1 @@
+export const SPLASH_DURATION = 2000;

package/templates/hooks/useSplashNavigation.ts.template

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { Navigation } from '../../types/Type';
+import { SPLASH_DURATION } from '../../constants/splash/splash.constants';
+
+export const useSplashNavigation = () => {
+  const navigation = useNavigation<Navigation>();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      navigation.navigate('BottomTab');
+    }, SPLASH_DURATION);
+
+    return () => clearTimeout(timer);
+  }, [navigation]);
+};

package/templates/navigation/BottomTabNavigation.tsx.template

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tab } from '../../utils/Util';
+import HomeScreen from '../../screens/home/HomeScreen';
+import ProfileScreen from '../../screens/profile/ProfileScreen';
+import SettingsScreen from '../../screens/settings/SettingsScreen';
+
+const BottomTabNavigation = () => {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTabNavigation;

package/templates/navigation/StackNavigation.tsx.template

@@ -0,0 +1,18 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { Stack } from '../../utils/Util';
+import SplashScreen from '../../screens/splash/SplashScreen';
+import BottomTabNavigation from '../bottom/BottomTabNavigation';
+
+const StackNavigation = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Splash" component={SplashScreen} />
+        <Stack.Screen name="BottomTab" component={BottomTabNavigation} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default StackNavigation;

package/templates/root/App.tsx.template

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StatusBar } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import StackNavigation from './src/navigation/stack/StackNavigation';
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <StackNavigation />
+      <StatusBar hidden={true} />
+    </SafeAreaProvider>
+  );
+}

package/templates/screens/HomeScreen.tsx.template

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { styles } from '../../styles/home/home.styles';
+
+const HomeScreen = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Home Screen</Text>
+        <Text style={styles.subtitle}>Welcome to your app!</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default HomeScreen;