rnsup 1.0.2 → 1.0.4

package/README.md

@@ -1,336 +1,246 @@
-<img width="1536" height="1024" alt="1000241861" src="https://github.com/user-attachments/assets/3a35bc32-3413-40e5-8355-5db4806923a4" />
-
+<img width="1536" height="1024" alt="RNSUP React Native Setup" src="https://github.com/user-attachments/assets/3a35bc32-3413-40e5-8355-5db4806923a4" />
 
 # RNSUP — React Native Support CLI
 
-![npm](https://img.shields.io/npm/v/rnsup?color=blue&label=npm)&nbsp;![license](https://img.shields.io/badge/license-MIT-green)&nbsp;![node](https://img.shields.io/badge/node-%3E%3D18-brightgreen)
-
-**RNSUP** is a developer productivity CLI that converts a fresh React Native CLI project into a production-ready architecture.
-
-Instead of spending 3–6 hours configuring navigation, alias paths, reanimated, gesture handler, axios setup and folder structure, you can do everything with **one command**.
-
----
-
-## Why RNSUP?
-
-Starting a React Native CLI project usually requires:
-
-* Installing React Navigation dependencies
-* Configuring Reanimated
-* Adding Gesture Handler import
-* Setting up TypeScript aliases
-* Creating folder structure
-* Writing axios interceptors
-* Adding responsive utilities
-* Supporting image imports in TypeScript
-
-Most developers repeat this setup for every project.
-
-**RNSUP automates all of it.**
-
----
-
-## What RNSUP Does
-
-After running setup, your project automatically gets:
-
-### Configuration
-
-* React Navigation dependencies installed
-* Reanimated + Worklets configured
-* Gesture Handler patched
-* Babel alias configuration
-* TypeScript path aliases
-* Lockfile conflict handled (npm/yarn)
-
-### Architecture
-
-```
-src/
-  components/
-  screens/
-  services/
-  utils/
-  hooks/
-  store/
-  theme/
-  assets/
-  types/
-```
-
-### Utilities Added
+![npm](https://img.shields.io/npm/v/rnsup?color=blue&label=npm) ![license](https://img.shields.io/badge/license-MIT-green) ![node](https://img.shields.io/badge/node-%3E%3D18-brightgreen)
 
-* Axios API client with interceptors
-* Responsive screen helpers
-* Image import TypeScript support
-* Clean folder structure
+**RNSUP** helps you set up a production-ready React Native project in minutes instead of hours.
 
----
-
-## Installed packages (default)
-
-RNSUP installs a curated set of libraries into your project. These are added automatically when you run `npx rnsup setup` (some are optional via prompt):
-
-- `@react-navigation/native`
-- `react-native-screens`
-- `react-native-gesture-handler`
-- `react-native-reanimated`
-- `react-native-worklets` (Babel plugin integration)
-- `react-native-vector-icons`
-- `zustand`
-- `axios`
-- `@tanstack/react-query`
-- `react-native-mmkv`
-- navigation extras (conditional): `@react-navigation/native-stack`, `@react-navigation/bottom-tabs`, `@react-navigation/drawer`
-- optional (prompted): `react-native-svg`, `lucide-react-native`
-
-<div style="background:#fff3cd;border-left:6px solid #ffeeba;padding:12px;border-radius:6px">
-  <strong>⚠️ Warning</strong>
-  <p style="margin:6px 0 0">Many of the packages above include native code. After installation you <strong>must</strong> verify and complete any required native configuration (for iOS and Android). Common steps include:</p>
-  <ul style="margin:6px 0 0;padding-left:20px">
-    <li>Run <code>cd ios && pod install</code> on macOS</li>
-    <li>Follow the official docs for Reanimated, MMKV, react-native-svg and React Navigation</li>
-    <li>Check Android Gradle / manifest changes for native modules</li>
-  </ul>
-  <p style="margin:6px 0 0">If something looks off (build errors, missing icons, or runtime crashes), consult the package docs first — RNSUP does not (and cannot) run platform-specific installs for you.</p>
-</div>
-
----
-### Developer Experience
-
-* Auto import aliases (`@components`, `@services`, etc.)
-* Code generators (screens & components)
-* History tracking
+What normally takes 3–6 hours of manual configuration — installation, setup, folder structure, aliases, API client setup — gets done automatically with a single command.
 
 ---
 
-## Installation
-
-You DO NOT install RNSUP globally.
+## Features at a Glance
 
-Use directly via npx:
-
-```bash
-npx rnsup setup
-```
+| Feature | What You Get |
+|---------|-------------|
+| **Navigation** | React Navigation with preset stacks configured |
+| **Performance** | Reanimated + Worklets for smooth animations |
+| **Gestures** | Gesture Handler pre-integrated |
+| **Routing** | TypeScript paths and Babel aliases |
+| **APIs** | Axios with interceptors ready to use |
+| **Utilities** | Responsive helpers, image imports, TypeScript support |
+| **State** | Zustand store setup with TypeScript |
+| **Generators** | CLI commands for screens, components, and folders |
+| **Structure** | Pre-built folder organization |
 
 ---
 
-## Quick Start
+## Install & Setup
 
-### 1) Create React Native Project
- for creating latest cli project !
+No global installation needed. Just run:
 
 ```bash
-npx create-rn
+npx create-rn MyApp
 cd MyApp
-```
-
-### 2) Run RNSUP
-
-```bash
 npx rnsup setup
 ```
 
-Follow the prompts.
-
-After setup:
+Follow the prompts to select your package manager. That's it—your project is ready.
 
 ```bash
 npx react-native start --reset-cache
 npx react-native run-android
 ```
 
-Your project is ready.
-
 ---
 
-## Commands
+## What Gets Installed
 
-### Setup Project
+RNSUP automatically installs and configures these packages:
 
-```
-npx rnsup setup
-```
-
----
+| Package | Purpose | Type |
+|---------|---------|------|
+| `@react-navigation/native` | Screen navigation | Required |
+| `react-native-gesture-handler` | Touch gesture support | Required |
+| `react-native-reanimated` | Smooth animations | Required |
+| `react-native-screens` | Performance optimization | Required |
+| `axios` | HTTP client | Required |
+| `zustand` | State management | Required |
+| `@tanstack/react-query` | Data fetching | Required |
+| `react-native-mmkv` | Fast storage | Required |
+| `react-native-vector-icons` | Icon library | Required |
+| `@react-navigation/native-stack` | Stack navigation | Optional |
+| `@react-navigation/bottom-tabs` | Tab navigation | Optional |
+| `react-native-svg` | SVG support | Optional |
+| `lucide-react-native` | Icon set | Optional |
 
-### Generate Screen
-
-> Here `s` mean `screen`, and `g` mean `generate`
+⚠️ **Note:** Many packages include native code. After setup, you'll need to complete native configuration for iOS and Android (pod install, gradle sync, manifest updates). Check the official docs for each package.
 
+---
 
-```
-rnsup g s Login
-rnsup g s auth/Login
-rnsup g s features/auth/Login
-```
+## Project Structure
 
-Examples created:
+After setup, your project will have:
 
 ```
-src/screens/LoginScreen.tsx
-src/auth/LoginScreen.tsx
-src/features/auth/LoginScreen.tsx
+src/
+├── components/     # Reusable UI components
+├── screens/        # App screens/pages
+├── services/       # API calls & external services
+├── utils/          # Helper functions
+├── hooks/          # Custom React hooks
+├── store/          # State management
+├── theme/          # Colors, typography, styling
+├── assets/         # Images, fonts, static files
+└── types/          # TypeScript types & interfaces
 ```
 
 ---
 
-### Generate Component
+## Commands
 
-> Here `c` mean `component`
+### Generate a Screen
 
-```
-rnsup g c Button
-rnsup g c ui/forms/Input
+```bash
+rnsup g s LoginScreen
+rnsup g s auth/LoginScreen
+rnsup g s features/auth/LoginScreen
 ```
 
-Created:
-
-```
-src/components/Button.tsx
-src/components/ui/forms/Input.tsx
-```
+Choose from: **Basic**, **List**, **Form**, or **Detail** templates.
 
----
+### Generate a Component
 
-### Generate Folder / Directory
+```bash
+rnsup g c Button
+rnsup g c ui/Card
+rnsup g c forms/TextInput
+```
 
-> Here `d` mean `directory`, and `g` mean `generate`
+Creates `.tsx` by default (press Enter) or choose `.jsx`.
 
-Create folders/directories at any location with automatic alias registration and optional `index.ts` generation:
+### Generate a Folder
 
-```
-rnsup g d features
-rnsup g d src/store
+```bash
+rnsup g d themes
+rnsup g d src/api
 rnsup g d src/utils/helpers
 ```
 
-Examples created:
-
-```
-features/
-src/store/
-src/utils/helpers/
-```
-
-**Features:**
+Auto-registers TypeScript aliases for `src/` folders.
 
-- 📁 Colored output showing folder details
-- ✅ Confirmation before creating
-- 📝 Optional `index.ts` file generation (for exports)
-- 🔗 Auto-alias registration for `src/` folders
-- 📋 History tracking
+### View Project Structure
 
-**Notes:**
+```bash
+rnsup view           # Show raw structure
+rnsup view -p        # Show with icons and colors
+rnsup view --time    # Show with timestamps
+rnsup view -p --time # Pretty + timestamps
+```
 
-- If folder path starts with `src/`, it will be created inside `src/` and alias will be registered
-- If just a name is provided (e.g., `rnsup g d config`), folder is created at project root
-- Supports nested paths: `rnsup g d src/features/auth/screens`
+Choose between Root level or src/ folder when prompted.
 
 ---
 
-## Auto Alias Support
+## Usage Examples
 
-You can import without relative paths.
+### Import Components (No Relative Paths)
 
 Instead of:
-
-```ts
+```typescript
 import Button from '../../../components/Button';
 ```
 
 Use:
-
-```ts
+```typescript
 import Button from '@components/Button';
 ```
 
-Aliases automatically configured:
+Automatically configured aliases:
+- `@components` → `src/components/`
+- `@screens` → `src/screens/`
+- `@services` → `src/services/`
+- `@utils` → `src/utils/`
+- `@hooks` → `src/hooks/`
+- `@store` → `src/store/`
+- `@theme` → `src/theme/`
+- `@assets` → `src/assets/`
 
-```
-@components
-@services
-@utils
-@hooks
-@store
-@theme
-@assets
-```
+### Use the API Client
 
-New folders inside `src` automatically get alias support.
-
----
-
-## Axios Usage
-
-```ts
+```typescript
 import api from '@services/api/client';
 
+// GET request
 const users = await api.get('/users');
-```
 
-Interceptors already configured.
+// POST request  
+const response = await api.post('/login', { email, password });
+```
 
----
+Interceptors are pre-configured for error handling and auth tokens.
 
-## Responsive Utility
+### Responsive Layouts
 
-```ts
-import { widthPercentageToDP as wp } from '@utils/responsive-screen';
+```typescript
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from '@utils/responsive-screen';
 
-<View style={{ width: wp(80) }} />
+<View style={{ width: wp(80), height: hp(50) }} />
 ```
 
----
+Works on all device sizes without manual breakpoints.
 
-## Image Import Support
+### Import Images in TypeScript
 
-```ts
+```typescript
 import logo from '@assets/logo.png';
 
-<Image source={logo} />
+<Image source={logo} style={{ width: 100, height: 100 }} />
 ```
 
-No TypeScript error.
+No TypeScript errors—types are automatically set up.
 
 ---
 
-## Why It Is Useful
+## Auto Aliases
 
-RNSUP removes repetitive setup work and enforces a consistent architecture across projects and teams.
+New folders inside `src/` automatically get alias support:
 
-Benefits:
+```bash
+rnsup g d src/modals
+# Now use: import Modal from '@modals/MyModal';
+```
 
-* Saves 3–6 hours per project
-* Prevents configuration mistakes
-* Standardizes project structure
-* Faster onboarding for new developers
-* Clean import paths
-* Production-ready base
+Aliases update in both TypeScript `tsconfig.json` and Babel `.babelrc`.
 
 ---
 
 ## Best Practices
 
-Recommended workflow:
+1. **Always use generators** — Keeps aliases and structure consistent
+2. **Avoid manual folders** — Use `rnsup g d` instead
+3. **Keep folder names consistent** — Use kebab-case or camelCase, not spaces
+4. **Update native config** — Don't skip iOS/Android setup
+5. **Commit early** — Make a git commit right after `rnsup setup`
 
-1. Create project
-2. Run `rnsup setup`
-3. Only create screens/components using `rnsup g`
-4. Avoid manual folder creation inside `src`
+---
+
+## Troubleshooting
+
+**Error: "Not a React Native CLI project"**
+- Run `rnsup setup` from your React Native project root (where `package.json` exists)
 
-This ensures aliases and exports always remain correct.
+**Error: "Selected package manager is not installed"**
+- Install npm, yarn, or pnpm first
 
+**Native build fails after setup**
+- Run `cd ios && pod install` (macOS only)
+- Check your Android SDK and NDK are up to date
+- Read the official docs for each native package
 
-## Contribution
+**Aliases not working**
+- Run `npx react-native start --reset-cache`
+- If still broken, check `tsconfig.json` has correct paths
+
+---
 
-Pull requests are welcome.
+## Contributing
 
-If you find a bug or want a feature, open an issue.
+Found a bug or want a feature? Open an issue or submit a PR at dev branch.
 
 ---
 
 ## License
 
-MIT License
+MIT © 2026

package/dist/commands/generateComponent.js

@@ -8,17 +8,36 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
 const inquirer_1 = __importDefault(require("inquirer"));
 const chalk_1 = __importDefault(require("chalk"));
-const component_1 = require("../templates/component");
+const componentTemplates_1 = require("../templates/componentTemplates");
 const parseComponentName_1 = require("../utils/parseComponentName");
 const aliasManager_1 = require("../utils/aliasManager");
 const history_1 = require("../utils/history");
+const handleCancel_1 = require("../utils/handleCancel");
 async function generateComponent(input) {
     try {
         const { componentName, fullDir, relativeDir } = (0, parseComponentName_1.parseComponentName)(input);
-        const filePath = path_1.default.join(fullDir, `${componentName}.tsx`);
-        console.log('\nComponent details:');
-        console.log('Name:', componentName);
-        console.log('Directory:', relativeDir);
+        // Ask for file extension
+        const { fileExtension } = await inquirer_1.default.prompt([
+            {
+                type: 'list',
+                name: 'fileExtension',
+                message: 'Enter file extension:',
+                choices: [
+                    { name: 'TypeScript (tsx) - Default, Recommended', value: 'tsx' },
+                    { name: 'JavaScript (jsx)', value: 'jsx' }
+                ],
+                default: 'tsx'
+            }
+        ]);
+        const filePath = path_1.default.join(fullDir, `${componentName}.${fileExtension}`);
+        // Show colored details
+        console.log('\n' + chalk_1.default.cyan.bold('🏗️  Component Creation Details'));
+        console.log(chalk_1.default.gray('─'.repeat(50)));
+        console.log(chalk_1.default.yellow('Name:      '), chalk_1.default.cyan(componentName));
+        console.log(chalk_1.default.yellow('Extension: '), chalk_1.default.magenta(fileExtension.toUpperCase()));
+        console.log(chalk_1.default.yellow('Location:  '), chalk_1.default.white(relativeDir));
+        console.log(chalk_1.default.yellow('File:      '), chalk_1.default.dim(`${componentName}.${fileExtension}`));
+        console.log(chalk_1.default.gray('─'.repeat(50)));
         // overwrite check
         if (await fs_extra_1.default.pathExists(filePath)) {
             const { overwrite } = await inquirer_1.default.prompt([
@@ -30,7 +49,7 @@ async function generateComponent(input) {
                 }
             ]);
             if (!overwrite) {
-                console.log(chalk_1.default.yellow('Cancelled.'));
+                console.log(chalk_1.default.yellow('Operation cancelled.'));
                 return;
             }
         }
@@ -38,33 +57,28 @@ async function generateComponent(input) {
             {
                 type: 'confirm',
                 name: 'confirm',
-                message: `Create ${componentName} in ${relativeDir}?`,
+                message: chalk_1.default.green(`Create ${componentName} (${fileExtension.toUpperCase()})?`),
                 default: true
             }
         ]);
-        if (!confirm)
+        if (!confirm) {
+            console.log(chalk_1.default.yellow('Cancelled.'));
             return;
+        }
         // create directory
         await fs_extra_1.default.ensureDir(fullDir);
         // ensure alias (for nested components like ui/forms)
         await (0, aliasManager_1.registerAlias)(relativeDir);
-        // write component
-        await fs_extra_1.default.writeFile(filePath, (0, component_1.componentTemplate)(componentName));
-        // create index export
-        const indexFile = path_1.default.join(fullDir, 'index.ts');
-        const exportLine = `export { default as ${componentName} } from './${componentName}';\n`;
-        if (await fs_extra_1.default.pathExists(indexFile)) {
-            const existing = await fs_extra_1.default.readFile(indexFile, 'utf8');
-            if (!existing.includes(componentName))
-                await fs_extra_1.default.appendFile(indexFile, exportLine);
-        }
-        else {
-            await fs_extra_1.default.writeFile(indexFile, exportLine);
-        }
-        await (0, history_1.addHistory)(`Generated component ${componentName}`);
-        console.log(chalk_1.default.green(`\n${componentName} created successfully.`));
+        // write component with simple template
+        const template = (0, componentTemplates_1.getComponentTemplate)(componentName, 'presentational');
+        await fs_extra_1.default.writeFile(filePath, template);
+        await (0, history_1.addHistory)(`Generated component ${componentName} (${fileExtension})`);
+        console.log(chalk_1.default.green(`\n✨ Component ${chalk_1.default.bold(componentName)} created successfully!`));
+        console.log(chalk_1.default.gray(`Location: ${relativeDir}`));
+        console.log(chalk_1.default.gray(`Extension: ${fileExtension}`));
+        console.log();
     }
     catch (err) {
-        console.error(err);
+        (0, handleCancel_1.handleCancel)(err);
     }
 }

package/dist/commands/generateFolder.js

@@ -10,6 +10,7 @@ const inquirer_1 = __importDefault(require("inquirer"));
 const chalk_1 = __importDefault(require("chalk"));
 const history_1 = require("../utils/history");
 const aliasManager_1 = require("../utils/aliasManager");
+const handleCancel_1 = require("../utils/handleCancel");
 async function generateFolder(input) {
     try {
         // normalize slashes and clean input
@@ -97,6 +98,6 @@ async function generateFolder(input) {
         console.log();
     }
     catch (err) {
-        console.error(chalk_1.default.red('Error creating folder:'), err);
+        (0, handleCancel_1.handleCancel)(err);
     }
 }

package/dist/commands/generateScreen.js

@@ -9,16 +9,38 @@ const path_1 = __importDefault(require("path"));
 const inquirer_1 = __importDefault(require("inquirer"));
 const chalk_1 = __importDefault(require("chalk"));
 const parseName_1 = require("../utils/parseName");
-const screen_1 = require("../templates/screen");
+const screenTemplates_1 = require("../templates/screenTemplates");
 const history_1 = require("../utils/history");
 const aliasManager_1 = require("../utils/aliasManager");
+const handleCancel_1 = require("../utils/handleCancel");
 async function generateScreen(input) {
     try {
         const { screenName, fullDir, relativeDir } = await (0, parseName_1.parseScreenName)(input);
         const filePath = path_1.default.join(fullDir, `${screenName}.tsx`);
-        console.log('\nScreen details:');
-        console.log('Name:', screenName);
-        console.log('Directory:', relativeDir);
+        const indexFile = path_1.default.join(fullDir, 'index.ts');
+        // Ask for screen type
+        const { screenType } = await inquirer_1.default.prompt([
+            {
+                type: 'list',
+                name: 'screenType',
+                message: 'Select screen type:',
+                choices: [
+                    { name: 'Basic - Simple screen with title', value: 'basic' },
+                    { name: 'List - FlatList with items', value: 'list' },
+                    { name: 'Form - Input form with submission', value: 'form' },
+                    { name: 'Detail - Detail view with data display', value: 'detail' }
+                ],
+                default: 'basic'
+            }
+        ]);
+        // Show colored details
+        console.log('\n' + chalk_1.default.cyan.bold('🎬 Screen Creation Details'));
+        console.log(chalk_1.default.gray('─'.repeat(50)));
+        console.log(chalk_1.default.yellow('Name:      '), chalk_1.default.cyan(screenName));
+        console.log(chalk_1.default.yellow('Type:      '), chalk_1.default.magenta(screenType));
+        console.log(chalk_1.default.yellow('Location:  '), chalk_1.default.white(relativeDir));
+        console.log(chalk_1.default.yellow('Files:     '), chalk_1.default.dim(`${screenName}.tsx, index.ts`));
+        console.log(chalk_1.default.gray('─'.repeat(50)));
         // confirm directory creation
         if (!(await fs_extra_1.default.pathExists(fullDir))) {
             const { createDir } = await inquirer_1.default.prompt([
@@ -53,7 +75,7 @@ async function generateScreen(input) {
             {
                 type: 'confirm',
                 name: 'confirm',
-                message: `Create ${screenName} in ${relativeDir}?`,
+                message: chalk_1.default.green(`Create ${screenName} (${screenType})?`),
                 default: true
             }
         ]);
@@ -63,9 +85,9 @@ async function generateScreen(input) {
         }
         await fs_extra_1.default.ensureDir(fullDir);
         await (0, aliasManager_1.registerAlias)(relativeDir);
-        await fs_extra_1.default.writeFile(filePath, (0, screen_1.screenTemplate)(screenName));
+        const template = (0, screenTemplates_1.getScreenTemplate)(screenName, screenType);
+        await fs_extra_1.default.writeFile(filePath, template);
         // create index export
-        const indexFile = path_1.default.join(fullDir, 'index.ts');
         const exportLine = `export { default as ${screenName} } from './${screenName}';\n`;
         if (await fs_extra_1.default.pathExists(indexFile)) {
             const existing = await fs_extra_1.default.readFile(indexFile, 'utf8');
@@ -75,10 +97,13 @@ async function generateScreen(input) {
         else {
             await fs_extra_1.default.writeFile(indexFile, exportLine);
         }
-        await (0, history_1.addHistory)(`Generated screen ${screenName}`);
-        console.log(chalk_1.default.green(`\n${screenName} created successfully.`));
+        await (0, history_1.addHistory)(`Generated screen ${screenName} (${screenType})`);
+        console.log(chalk_1.default.green(`\n✨ Screen ${chalk_1.default.bold(screenName)} created successfully!`));
+        console.log(chalk_1.default.gray(`Location: ${relativeDir}`));
+        console.log(chalk_1.default.gray(`Type: ${screenType}`));
+        console.log();
     }
     catch (err) {
-        console.error(err);
+        (0, handleCancel_1.handleCancel)(err);
     }
 }