rnsup 1.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+MIT License
+
+Copyright (c) 2026 getsettalk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction...

package/README.md

@@ -0,0 +1,331 @@
+# RNSUP — React Native Support CLI
+
+**RNSUP** is a developer productivity CLI that converts a fresh React Native CLI project into a production-ready architecture.
+
+Instead of spending 2–3 days 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
+
+* Axios API client with interceptors
+* Responsive screen helpers
+* Image import TypeScript support
+* Clean folder structure
+
+### Developer Experience
+
+* Auto import aliases (`@components`, `@services`, etc.)
+* Code generators (screens & components)
+* History tracking
+
+---
+
+## Installation
+
+You DO NOT install RNSUP globally.
+
+Use directly via npx:
+
+```bash
+npx rnsup setup
+```
+
+---
+
+## Quick Start
+
+### 1) Create React Native Project
+
+```bash
+npx react-native@latest init MyApp
+cd MyApp
+```
+
+### 2) Run RNSUP
+
+```bash
+npx rnsup setup
+```
+
+Follow the prompts.
+
+After setup:
+
+```bash
+npx react-native start --reset-cache
+npx react-native run-android
+```
+
+Your project is ready.
+
+---
+
+## Commands
+
+### Setup Project
+
+```
+npx rnsup setup
+```
+
+---
+
+### Generate Screen
+
+```
+rnsup g s Login
+rnsup g s auth/Login
+rnsup g s features/auth/Login
+```
+
+Examples created:
+
+```
+src/screens/LoginScreen.tsx
+src/auth/LoginScreen.tsx
+src/features/auth/LoginScreen.tsx
+```
+
+---
+
+### Generate Component
+
+```
+rnsup g c Button
+rnsup g c ui/forms/Input
+```
+
+Created:
+
+```
+src/components/Button.tsx
+src/components/ui/forms/Input.tsx
+```
+
+---
+
+## Auto Alias Support
+
+You can import without relative paths.
+
+Instead of:
+
+```ts
+import Button from '../../../components/Button';
+```
+
+Use:
+
+```ts
+import Button from '@components/Button';
+```
+
+Aliases automatically configured:
+
+```
+@components
+@services
+@utils
+@hooks
+@store
+@theme
+@assets
+```
+
+New folders inside `src` automatically get alias support.
+
+---
+
+## Axios Usage
+
+```ts
+import api from '@services/api/client';
+
+const users = await api.get('/users');
+```
+
+Interceptors already configured.
+
+---
+
+## Responsive Utility
+
+```ts
+import { widthPercentageToDP as wp } from '@utils/responsive-screen';
+
+<View style={{ width: wp(80) }} />
+```
+
+---
+
+## Image Import Support
+
+```ts
+import logo from '@assets/logo.png';
+
+<Image source={logo} />
+```
+
+No TypeScript error.
+
+---
+
+## Why It Is Useful
+
+RNSUP removes repetitive setup work and enforces a consistent architecture across projects and teams.
+
+Benefits:
+
+* Saves 3–6 hours per project
+* Prevents configuration mistakes
+* Standardizes project structure
+* Faster onboarding for new developers
+* Clean import paths
+* Production-ready base
+
+---
+
+## Best Practices
+
+Recommended workflow:
+
+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.
+
+---
+
+## Publishing to NPM
+
+### 1) Login
+
+Create an account at:
+https://www.npmjs.com
+
+Then:
+
+```bash
+npm login
+```
+
+---
+
+### 2) Prepare package.json
+
+Make sure:
+
+```json
+{
+  "name": "rnsup",
+  "version": "1.0.0",
+  "bin": {
+    "rnsup": "bin/rnsup.js"
+  }
+}
+```
+
+---
+
+### 3) Build project
+
+```
+npm run build
+```
+
+---
+
+### 4) Publish
+
+```
+npm publish --access public
+```
+
+Your package is now live.
+
+---
+
+## Using After Publish
+
+Anyone can run:
+
+```bash
+npx rnsup setup
+```
+
+No installation required.
+
+---
+
+## Updating Package
+
+After changes:
+
+```
+npm version patch
+npm publish
+```
+
+---
+
+## Contribution
+
+Pull requests are welcome.
+
+If you find a bug or want a feature, open an issue.
+
+---
+
+## License
+
+MIT License

package/bin/rnsup.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../dist/index.js');

package/dist/commands/generateComponent.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateComponent = generateComponent;
+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 parseComponentName_1 = require("../utils/parseComponentName");
+const aliasManager_1 = require("../utils/aliasManager");
+const history_1 = require("../utils/history");
+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);
+        // overwrite check
+        if (await fs_extra_1.default.pathExists(filePath)) {
+            const { overwrite } = await inquirer_1.default.prompt([
+                {
+                    type: 'confirm',
+                    name: 'overwrite',
+                    message: `${componentName} already exists. Overwrite?`,
+                    default: false
+                }
+            ]);
+            if (!overwrite) {
+                console.log(chalk_1.default.yellow('Cancelled.'));
+                return;
+            }
+        }
+        const { confirm } = await inquirer_1.default.prompt([
+            {
+                type: 'confirm',
+                name: 'confirm',
+                message: `Create ${componentName} in ${relativeDir}?`,
+                default: true
+            }
+        ]);
+        if (!confirm)
+            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.`));
+    }
+    catch (err) {
+        console.error(err);
+    }
+}

package/dist/commands/generateScreen.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateScreen = generateScreen;
+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 parseName_1 = require("../utils/parseName");
+const screen_1 = require("../templates/screen");
+const history_1 = require("../utils/history");
+const aliasManager_1 = require("../utils/aliasManager");
+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);
+        // confirm directory creation
+        if (!(await fs_extra_1.default.pathExists(fullDir))) {
+            const { createDir } = await inquirer_1.default.prompt([
+                {
+                    type: 'confirm',
+                    name: 'createDir',
+                    message: `Directory ${relativeDir} does not exist. Create it?`,
+                    default: true
+                }
+            ]);
+            if (!createDir) {
+                console.log(chalk_1.default.yellow('Cancelled.'));
+                return;
+            }
+        }
+        // overwrite check
+        if (await fs_extra_1.default.pathExists(filePath)) {
+            const { overwrite } = await inquirer_1.default.prompt([
+                {
+                    type: 'confirm',
+                    name: 'overwrite',
+                    message: `${screenName} already exists. Overwrite?`,
+                    default: false
+                }
+            ]);
+            if (!overwrite) {
+                console.log(chalk_1.default.yellow('Operation cancelled.'));
+                return;
+            }
+        }
+        const { confirm } = await inquirer_1.default.prompt([
+            {
+                type: 'confirm',
+                name: 'confirm',
+                message: `Create ${screenName} in ${relativeDir}?`,
+                default: true
+            }
+        ]);
+        if (!confirm) {
+            console.log(chalk_1.default.yellow('Cancelled.'));
+            return;
+        }
+        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));
+        // 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');
+            if (!existing.includes(screenName))
+                await fs_extra_1.default.appendFile(indexFile, exportLine);
+        }
+        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.`));
+    }
+    catch (err) {
+        console.error(err);
+    }
+}

package/dist/commands/setup.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runSetup = runSetup;
+const inquirer_1 = __importDefault(require("inquirer"));
+const ora_1 = __importDefault(require("ora"));
+const chalk_1 = __importDefault(require("chalk"));
+const selectPrompt_1 = require("../utils/selectPrompt");
+const detectProject_1 = require("../utils/detectProject");
+const config_1 = require("../utils/config");
+const file_1 = require("../utils/file");
+const history_1 = require("../utils/history");
+const install_1 = require("../utils/install");
+const alias_1 = require("../utils/alias");
+const patchIndex_1 = require("../utils/patchIndex");
+const lockfile_1 = require("../utils/lockfile");
+const packageManager_1 = require("../utils/packageManager");
+const createTypes_1 = require("../utils/createTypes");
+const createResponsive_1 = require("../utils/createResponsive");
+const createApiClient_1 = require("../utils/createApiClient");
+const createDocs_1 = require("../utils/createDocs");
+const handleCancel_1 = require("../utils/handleCancel");
+process.on('SIGINT', () => {
+    console.log('\nCancelled by user.\n');
+    process.exit(0);
+});
+async function runSetup() {
+    try {
+        console.log(chalk_1.default.cyan('\nRNSUP Setup\n'));
+        /* ---------- 1. Verify RN project ---------- */
+        if (!(0, detectProject_1.isReactNativeProject)()) {
+            console.log(chalk_1.default.red('Not a React Native CLI project'));
+            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']);
+        /* ---------- 3. Validate manager installed ---------- */
+        if (!(0, packageManager_1.isInstalled)(manager)) {
+            console.log('\nSelected package manager is not installed on your system.\n');
+            if (manager === 'yarn') {
+                console.log('Install yarn using:');
+                console.log('npm install -g yarn');
+            }
+            if (manager === 'pnpm') {
+                console.log('Install pnpm using:');
+                console.log('npm install -g pnpm');
+            }
+            process.exit(1);
+        }
+        /* ---------- 4. Fix lockfile conflict ---------- */
+        await (0, lockfile_1.fixLockFile)(manager);
+        /* ---------- 5. Ask navigation ---------- */
+        const { navigation } = await inquirer_1.default.prompt([
+            {
+                type: 'checkbox',
+                name: 'navigation',
+                message: 'Select navigation types',
+                choices: [
+                    { name: 'Stack', value: 'stack' },
+                    { name: 'Bottom Tabs', value: 'tabs' },
+                    { name: 'Drawer', value: 'drawer' }
+                ],
+                validate: (ans) => ans.length === 0 ? 'Select at least one navigation type' : true
+            }
+        ]);
+        /* ---------- 6. Optional libraries ---------- */
+        const { svg, lucide } = await inquirer_1.default.prompt([
+            {
+                type: 'confirm',
+                name: 'svg',
+                message: 'Install react-native-svg?',
+                default: true
+            },
+            {
+                type: 'confirm',
+                name: 'lucide',
+                message: 'Install lucide-react-native?',
+                default: true
+            }
+        ]);
+        /* ---------- 7. Start setup ---------- */
+        const spinner = (0, ora_1.default)('Preparing project...').start();
+        // create folders
+        await (0, file_1.createBaseFolders)();
+        /* ---------- 8. Collect dependencies ---------- */
+        const dependencies = [
+            '@react-navigation/native',
+            'react-native-screens',
+            'react-native-advanced-checkbox',
+            'react-native-gesture-handler',
+            'react-native-reanimated',
+            'react-native-worklets',
+            'react-native-vector-icons',
+            'zustand',
+            'axios',
+            '@tanstack/react-query',
+            'react-native-mmkv'
+        ];
+        // navigation specific
+        if (navigation.includes('stack'))
+            dependencies.push('@react-navigation/native-stack');
+        if (navigation.includes('tabs'))
+            dependencies.push('@react-navigation/bottom-tabs');
+        if (navigation.includes('drawer'))
+            dependencies.push('@react-navigation/drawer');
+        // optional libs
+        if (svg)
+            dependencies.push('react-native-svg');
+        if (lucide)
+            dependencies.push('lucide-react-native');
+        const devDependencies = ['babel-plugin-module-resolver'];
+        /* ---------- 9. Install ---------- */
+        spinner.text = 'Installing dependencies...';
+        await (0, install_1.installPackages)(manager, dependencies);
+        await (0, install_1.installPackages)(manager, devDependencies, true);
+        /* ---------- 10. Configure project ---------- */
+        spinner.text = 'Configuring babel, alias and gesture handler...';
+        await (0, alias_1.setupTsAlias)();
+        await (0, alias_1.setupBabelAlias)();
+        await (0, patchIndex_1.patchIndexFile)();
+        await (0, createTypes_1.createTypes)();
+        await (0, createResponsive_1.createResponsiveFile)();
+        await (0, createApiClient_1.createApiClient)();
+        await (0, createDocs_1.createDocs)();
+        /* ---------- 11. Save config ---------- */
+        await (0, config_1.saveConfig)({
+            packageManager: manager,
+            navigation,
+            svg,
+            lucide
+        });
+        await (0, history_1.addHistory)('Project setup completed');
+        /* ---------- 12. Finish ---------- */
+        spinner.succeed('RNSUP setup completed successfully');
+        console.log(chalk_1.default.green('\nImportant steps:'));
+        console.log('1. cd ios && pod install (only macOS)');
+        console.log('2. npx react-native start --reset-cache');
+        console.log('3. npx react-native run-android');
+    }
+    catch (err) {
+        (0, handleCancel_1.handleCancel)(err);
+    }
+}

package/dist/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const setup_1 = require("./commands/setup");
+const generateScreen_1 = require("./commands/generateScreen");
+const generateComponent_1 = require("./commands/generateComponent");
+const program = new commander_1.Command();
+program
+    .name('rnsup')
+    .description('React Native Support CLI')
+    .version('1.0.0');
+/* ---------- Setup ---------- */
+program
+    .command('setup')
+    .description('Configure React Native project')
+    .action(setup_1.runSetup);
+/* ---------- Generator Root ---------- */
+const generate = new commander_1.Command('generate')
+    .alias('g')
+    .description('Generate files');
+/* ---------- Screen ---------- */
+generate
+    .command('screen <name>')
+    .alias('s')
+    .description('Generate a screen')
+    .action(generateScreen_1.generateScreen);
+generate
+    .command('component <name>')
+    .alias('c')
+    .description('Generate a component')
+    .action(generateComponent_1.generateComponent);
+/* attach to main program */
+program.addCommand(generate);
+program.parse(process.argv);

package/dist/templates/component.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentTemplate = componentTemplate;
+function componentTemplate(name) {
+    return `import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface Props {}
+
+const ${name}: React.FC<Props> = () => {
+  return (
+    <View style={styles.container}>
+      <Text>${name}</Text>
+    </View>
+  );
+};
+
+export default ${name};
+
+const styles = StyleSheet.create({
+  container: {},
+});
+`;
+}