rnsup 1.0.1 → 1.0.3

package/README.md

@@ -1,300 +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/
-```
+![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)
 
-### Utilities Added
+**RNSUP** helps you set up a production-ready React Native project in minutes instead of hours.
 
-* Axios API client with interceptors
-* Responsive screen helpers
-* Image import TypeScript support
-* Clean folder structure
+What normally takes 3–6 hours of manual configuration — installation, setup, folder structure, aliases, API client setup — gets done automatically with a single command.
 
 ---
 
-## 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
+## Features at a Glance
 
-* Auto import aliases (`@components`, `@services`, etc.)
-* Code generators (screens & components)
-* History tracking
+| 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 |
 
 ---
 
-## Installation
+## Install & Setup
 
-You DO NOT install RNSUP globally.
-
-Use directly via npx:
+No global installation needed. Just run:
 
 ```bash
+npx create-rn MyApp
+cd MyApp
 npx rnsup setup
 ```
 
----
-
-## Quick Start
-
-### 1) Create React Native Project
- for creating latest cli project !
+Follow the prompts to select your package manager. That's it—your project is ready.
 
 ```bash
-npx create-rn
-cd MyApp
+npx react-native start --reset-cache
+npx react-native run-android
 ```
 
-### 2) Run RNSUP
-
-```bash
-npx rnsup setup
-```
+---
 
-Follow the prompts.
+## What Gets Installed
 
-After setup:
+RNSUP automatically installs and configures these packages:
 
-```bash
-npx react-native start --reset-cache
-npx react-native run-android
-```
+| 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 |
 
-Your project is ready.
+⚠️ **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.
 
 ---
 
-## Commands
+## Project Structure
 
-### Setup Project
+After setup, your project will have:
 
 ```
-npx rnsup setup
+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 Screen
-
-> Here `s` mean `screen`, and `g` mean `generate`
+## Commands
 
+### Generate a Screen
 
-```
-rnsup g s Login
-rnsup g s auth/Login
-rnsup g s features/auth/Login
+```bash
+rnsup g s LoginScreen
+rnsup g s auth/LoginScreen
+rnsup g s features/auth/LoginScreen
 ```
 
-Examples created:
+Choose from: **Basic**, **List**, **Form**, or **Detail** templates.
 
-```
-src/screens/LoginScreen.tsx
-src/auth/LoginScreen.tsx
-src/features/auth/LoginScreen.tsx
-```
+### Generate a Component
 
----
+```bash
+rnsup g c Button
+rnsup g c ui/Card
+rnsup g c forms/TextInput
+```
 
-### Generate Component
+Creates `.tsx` by default (press Enter) or choose `.jsx`.
 
-> Here `c` mean `component`
+### Generate a Folder
 
-```
-rnsup g c Button
-rnsup g c ui/forms/Input
+```bash
+rnsup g d themes
+rnsup g d src/api
+rnsup g d src/utils/helpers
 ```
 
-Created:
+Auto-registers TypeScript aliases for `src/` folders.
 
+### View Project Structure
+
+```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
 ```
-src/components/Button.tsx
-src/components/ui/forms/Input.tsx
-```
+
+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:
-
-```
-@components
-@services
-@utils
-@hooks
-@store
-@theme
-@assets
-```
-
-New folders inside `src` automatically get alias support.
-
----
+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/`
 
-## Axios Usage
+### Use the API Client
 
-```ts
+```typescript
 import api from '@services/api/client';
 
+// GET request
 const users = await api.get('/users');
+
+// POST request  
+const response = await api.post('/login', { email, password });
 ```
 
-Interceptors already configured.
+Interceptors are pre-configured for error handling and auth tokens.
 
----
+### Responsive Layouts
 
-## Responsive Utility
+```typescript
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from '@utils/responsive-screen';
 
-```ts
-import { widthPercentageToDP as wp } 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`
+---
 
-This ensures aliases and exports always remain correct.
+## Troubleshooting
 
+**Error: "Not a React Native CLI project"**
+- Run `rnsup setup` from your React Native project root (where `package.json` exists)
 
-## Contribution
+**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
+
+**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

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateFolder = generateFolder;
+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 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
+        let cleaned = input.replace(/\\/g, '/').trim();
+        // resolve folder path
+        let fullDir;
+        let relativeDir;
+        // if path starts with src/, use as-is
+        if (cleaned.startsWith('src/')) {
+            relativeDir = cleaned;
+            fullDir = path_1.default.join(process.cwd(), cleaned);
+        }
+        // if path contains /, but doesn't start with src/
+        else if (cleaned.includes('/')) {
+            fullDir = path_1.default.join(process.cwd(), cleaned);
+            relativeDir = cleaned;
+        }
+        // just a folder name, create at root
+        else {
+            fullDir = path_1.default.join(process.cwd(), cleaned);
+            relativeDir = cleaned;
+        }
+        const folderName = path_1.default.basename(fullDir);
+        // show colored info
+        console.log('\n' + chalk_1.default.cyan.bold('📁 Folder Creation Details'));
+        console.log(chalk_1.default.gray('─'.repeat(50)));
+        console.log(chalk_1.default.yellow('Folder Name:'), chalk_1.default.white(folderName));
+        console.log(chalk_1.default.yellow('Location:   '), chalk_1.default.white(relativeDir));
+        console.log(chalk_1.default.yellow('Full Path:  '), chalk_1.default.dim(fullDir));
+        console.log(chalk_1.default.gray('─'.repeat(50)));
+        // check if folder already exists
+        if (await fs_extra_1.default.pathExists(fullDir)) {
+            console.log(chalk_1.default.yellow(`\n⚠️  Folder ${relativeDir} already exists.`));
+            const { proceed } = await inquirer_1.default.prompt([
+                {
+                    type: 'confirm',
+                    name: 'proceed',
+                    message: 'Do you want to continue anyway?',
+                    default: false
+                }
+            ]);
+            if (!proceed) {
+                console.log(chalk_1.default.yellow('Cancelled.'));
+                return;
+            }
+        }
+        // ask to create index.ts
+        const { createIndex } = await inquirer_1.default.prompt([
+            {
+                type: 'confirm',
+                name: 'createIndex',
+                message: 'Create index.ts file?',
+                default: true
+            }
+        ]);
+        // final confirmation
+        const { confirm } = await inquirer_1.default.prompt([
+            {
+                type: 'confirm',
+                name: 'confirm',
+                message: chalk_1.default.green(`Create folder ${chalk_1.default.bold(folderName)}?`),
+                default: true
+            }
+        ]);
+        if (!confirm) {
+            console.log(chalk_1.default.yellow('Cancelled.'));
+            return;
+        }
+        // create folder
+        await fs_extra_1.default.ensureDir(fullDir);
+        // register alias if it's under src/
+        if (relativeDir.startsWith('src/')) {
+            await (0, aliasManager_1.registerAlias)(relativeDir);
+        }
+        // create index.ts if requested
+        if (createIndex) {
+            const indexFile = path_1.default.join(fullDir, 'index.ts');
+            if (!(await fs_extra_1.default.pathExists(indexFile))) {
+                await fs_extra_1.default.writeFile(indexFile, '// Add your exports here\n');
+            }
+        }
+        await (0, history_1.addHistory)(`Created folder ${relativeDir}`);
+        console.log(chalk_1.default.green(`\n✨ Folder ${chalk_1.default.bold(folderName)} created successfully!`));
+        console.log(chalk_1.default.gray(`Location: ${relativeDir}`));
+        console.log();
+    }
+    catch (err) {
+        (0, handleCancel_1.handleCancel)(err);
+    }
+}