diff --git a/index.js b/index.js index 2e4aad6..8e340d4 100644 --- a/index.js +++ b/index.js @@ -2,10 +2,15 @@ import { input, select, confirm, checkbox } from "@inquirer/prompts" import { select as selectPro } from 'inquirer-select-pro'; import path from "path"; -import { run, createFolder, deleteFile } from './lib/utils.js'; -import { initializePWA } from './lib/pwa.js'; -import { setupCSSFramework } from './lib/css-frameworks.js'; -import { createAxiosSetup, createAppComponent, createPWAReadme } from './lib/templates.js'; +import { run, createFolder, deleteFile } from "./lib/utils.js"; +import { initializePWA } from "./lib/pwa.js"; +import { setupCSSFramework } from "./lib/css-frameworks.js"; +import { + createAxiosSetup, + createAppComponent, + setupRouterMain, + createPWAReadme, +} from "./lib/templates.js"; import { setupRoutingFramework } from "./lib/router-setup.js"; const getExtraPackages = async (input) => { @@ -25,132 +30,143 @@ const getExtraPackages = async (input) => { }; (async () => { - // 1. Collect user inputs - const projectName = await input({ message: "Enter project name:", required: true }); - const cssFramework = await select({ - message: "Choose a CSS framework:", - choices: ["Tailwind", "Bootstrap (CDN)", "React Bootstrap", "MUI"] - }); - const routingFramework = await select({ - message: "Choose a routing framework:", - choices: ["React Router", "Tanstack Router",] - }) - const isPWA = await confirm({ message: "Do you want to make this a Progressive Web App (PWA)?", default: false }); - - const packages = await checkbox({ - message: "Select optional packages:", - choices: [ - { name: "Axios", value: "axios" }, - { name: "React Icons", value: "react-icons" }, - { name: "React Hook Form", value: "react-hook-form" }, - { name: "Yup", value: "yup" }, - { name: "Formik", value: "formik" }, - { name: "Moment.js", value: "moment" } - ] - }); - - const extraPackages = await selectPro({ - message: 'Search extra packages to add', - multiple: true, - clearInputWhenSelected: true, - pageSize: 10, - options: getExtraPackages, - theme: { - style: { - renderSelectedOptions: (selectedOptions) => { - return selectedOptions.map(option => option.value).join(', '); - } - } - } - }); - - let selectedExtraPackages = []; - if (extraPackages.length > 0) { - selectedExtraPackages = await checkbox({ - message: "These extra packages will be installed:", - choices: extraPackages.map(pkg => ({ - name: pkg, - value: pkg, - checked: true, - })), - }) + // 1. Collect user inputs + const answers = await inquirer.prompt([ + { + type: "input", + name: "projectName", + message: "Enter project name:", + }, + { + type: "list", + name: "cssFramework", + message: "Choose a CSS framework:", + choices: ["Tailwind", "Bootstrap (CDN)", "React Bootstrap", "MUI"], + }, + { + type: "list", + name: "routingFramework", + message: "Choose a routing framework:", + choices: ["React Router", "Tanstack Router"], + }, + { + type: "confirm", + name: "isPWA", + message: "Do you want to make this a Progressive Web App (PWA)?", + default: false, + }, + { + type: "checkbox", + name: "packages", + message: "Select optional packages:", + choices: [ + { name: "Axios", value: "axios" }, + { name: "React Icons", value: "react-icons" }, + { name: "React Hook Form", value: "react-hook-form" }, + { name: "Yup", value: "yup" }, + { name: "Formik", value: "formik" }, + { name: "Moment.js", value: "moment" }, + { name: "ReduxJs/Toolkit", value: "@reduxjs/toolkit" }, + { name: "React Bindings (React-Redux)", value: "react-redux" } + ], + }, + { + type: "checkbox", + name: "devPackages", + message: "Select dev packages to install:", + choices: [{ name: "Jest", value: "jest" }], + }, + ]); + + const { projectName, cssFramework, routingFramework, isPWA, packages, devPackages } = answers; + const projectPath = path.join(process.cwd(), projectName); + + console.log( + `\nšŸš€ Creating ${projectName}${isPWA ? " with PWA capabilities" : ""}...` + ); + + // 2. Create Vite project + run(`npm create vite@latest ${projectName} -- --template react`); + + // 3. Create all necessary folder structure first + const folders = ["components", "pages", "hooks", "store", "utils", "assets"]; + const routingConfig = { + "Tanstack Router": { + folders: ["routes"], + packages: ["@tanstack/react-router", "@tanstack/react-router-devtools"], + devPackages: ["@tanstack/router-plugin"] + }, + "React Router": { + folders: [], + packages: ["react-router-dom"], + devPackages: [] } + }; + const config = routingConfig[routingFramework] || { folders: [], packages: [], devPackages: [] }; + folders.push(...config.folders); + folders.forEach((folder) => { + createFolder(path.join(projectPath, "src", folder)); + }); + + // 4. Install packages + const allPackages = [...config.packages, ...packages]; + if (allPackages.length > 0) { + run(`npm install ${allPackages.join(" ")}`, projectPath); + } + if (devPackages.length > 0 || config.devPackages.length > 0) { + run(`npm install --save-dev ${[...devPackages, ...config.devPackages].join(" ")}`, projectPath); + } + + // 5. Setup PWA if selected (after folder structure is created) + if (isPWA) { + initializePWA(projectPath, projectName); + } + + // 6. Setup CSS framework + setupCSSFramework(cssFramework, projectPath); + + // 7. Setup Axios if selected + if (packages.includes("axios")) { + createAxiosSetup(projectPath); + } + + // 8. Clean up default boilerplate files + deleteFile(path.join(projectPath, "src", "App.css")); + if (cssFramework !== "Tailwind") { + deleteFile(path.join(projectPath, "src", "index.css")); + } + + // 9. Generate clean templates + createAppComponent(projectPath, projectName, isPWA); + setupRouterMain(projectPath, cssFramework); + + // 10. Create comprehensive README + createPWAReadme(projectPath, projectName, cssFramework, packages, isPWA); + + // 11. Success message + console.log("\nāœ… Setup complete!"); + if (isPWA) { + console.log( + "šŸ“± PWA features enabled - your app can be installed on mobile devices!" + ); + console.log( + "āš ļø Important: Replace placeholder SVG icons with proper PNG icons for production" + ); + } + console.log( + `\nNext steps:\n cd ${projectName}\n npm install\n npm run dev` + ); + + if (isPWA) { + console.log( + `\nšŸ“± To test PWA:\n npm run build\n npm run preview\n Open http://localhost:5173 and test install/offline features` + ); + } - const projectPath = path.join(process.cwd(), projectName); - - console.log(`\nšŸš€ Creating ${projectName}${isPWA ? ' with PWA capabilities' : ''}...`); - - // 2. Create Vite project - run(`npm create vite@latest ${projectName} -- --template react`); - - // 3. Create all necessary folder structure first - const folders = ["components", "pages", "hooks", "store", "utils", "assets"]; - - // Create the routes folder (for tanstack router) and the necessary packages for Router setup - const routingConfig = { - "Tanstack Router": { - folders: ["routes"], - packages: ["@tanstack/react-router", "@tanstack/react-router-devtools"], - devPackages: ["@tanstack/router-plugin"] - }, - "React Router": { - folders: [], - packages: ["react-router"], - devPackages: [] - } - }; - - const config = routingConfig[routingFramework] || { folders: [], packages: [], devPackages: [] }; - folders.push(...config.folders); - const routingPackages = config.packages; - folders.forEach((folder) => { - createFolder(path.join(projectPath, "src", folder)); - }); - - // 4. Install packages - const allPackages = [...routingPackages, ...packages, ...selectedExtraPackages]; - if (allPackages.length > 0) { - run(`npm install ${allPackages.join(" ")}`, projectPath); - if (config.devPackages.length > 0) { - run(`npm i -D ${config.devPackages.join(" ")}`, projectPath); - } - } - - // 5. Setup PWA if selected (after folder structure is created) - if (isPWA) { - initializePWA(projectPath, projectName); - } - - // 6. Setup CSS framework - setupCSSFramework(cssFramework, projectPath); - - // 7. Setup Axios if selected - if (packages.includes("axios")) { - createAxiosSetup(projectPath); - } - - // 8. Clean up default boilerplate files - deleteFile(path.join(projectPath, "src", "App.css")); - if (cssFramework !== "Tailwind") { - deleteFile(path.join(projectPath, "src", "index.css")); - } - - // 9. Generate clean templates - createAppComponent(projectPath, projectName, isPWA); - setupRoutingFramework(projectPath, routingFramework, cssFramework); - - // 10. Create comprehensive README - createPWAReadme(projectPath, projectName, cssFramework, packages, isPWA); - - // 11. Success message - console.log("\nāœ… Setup complete!"); - if (isPWA) { - console.log("šŸ“± PWA features enabled - your app can be installed on mobile devices!"); - console.log("āš ļø Important: Replace placeholder SVG icons with proper PNG icons for production"); - } - console.log(`\nNext steps:\n cd ${projectName}\n npm install\n npm run dev`); - - if (isPWA) { - console.log(`\nšŸ“± To test PWA:\n npm run build\n npm run preview\n Open http://localhost:5173 and test install/offline features`); - } -})(); + if (devPackages.includes("jest")) { + console.log( + "Setting up Jest configuration... \n Add the following to your package.json:" + ); + console.log(`\n "scripts": {\n "test": "jest"\n }`); + } +})(); \ No newline at end of file diff --git a/test/test-react/.gitignore b/test/test-react/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/test/test-react/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/test/test-react/README.md b/test/test-react/README.md new file mode 100644 index 0000000..dbb4249 --- /dev/null +++ b/test/test-react/README.md @@ -0,0 +1,127 @@ +# test-react + +A modern React application built with Vite. + +## šŸš€ Features + +- āš” **Vite** - Fast build tool and development server +- āš›ļø **React 18** - Latest React with modern hooks +- šŸŽØ **Tailwind** - Styling framework +- šŸ›£ļø **React Router** - Client-side routing + +- šŸ“¦ **Additional Packages**: axios, react-icons, formik, @reduxjs/toolkit, react-redux + +## šŸ“‹ Prerequisites + +- Node.js (v16 or higher) +- npm or yarn + +## šŸ› ļø Installation + +1. Navigate to the project directory: + ```bash + cd test-react + ``` + +2. Install dependencies: + ```bash + npm install + ``` + +## šŸƒā€ā™‚ļø Running the Application + +### Development Mode +```bash +npm run dev +``` +The app will be available at `http://localhost:5173` + +### Production Build +```bash +npm run build +``` + +### Preview Production Build +```bash +npm run preview +``` + +## šŸ“ Project Structure + +``` +test-react/ +ā”œā”€ā”€ public/ +ā”œā”€ā”€ src/ +ā”‚ ā”œā”€ā”€ components/ # Reusable components +ā”‚ ā”œā”€ā”€ pages/ # Page components +ā”‚ ā”œā”€ā”€ hooks/ # Custom React hooks +ā”‚ ā”œā”€ā”€ store/ # State management +ā”‚ ā”œā”€ā”€ utils/ # Utility functions +ā”‚ ā”‚ ā””ā”€ā”€ axiosInstance.js # Axios configuration +ā”‚ ā”œā”€ā”€ assets/ # Static assets +ā”‚ ā”œā”€ā”€ App.jsx # Main App component +ā”‚ ā””ā”€ā”€ main.jsx # Entry point +ā”œā”€ā”€ vite.config.js # Vite configuration +ā””ā”€ā”€ package.json +``` + +## šŸŽØ Styling + +This project uses **Tailwind** for styling: + +- Classes are available globally +- Configuration in `vite.config.js` +- Customize in `src/index.css` + +## šŸŒ API Integration + +Axios is pre-configured in `src/utils/axiosInstance.js`: + +```javascript +import { api } from './utils/axiosInstance'; + +// GET request +const data = await api.get('/users'); + +// POST request +const response = await api.post('/users', { name: 'John' }); +``` + +### Environment Variables +Create a `.env` file: +``` +VITE_API_URL=https://your-api-url.com +``` + +## šŸ”§ Available Scripts + +- `npm run dev` - Start development server +- `npm run build` - Build for production +- `npm run preview` - Preview production build +- `npm run lint` - Run ESLint (if configured) + +## šŸš€ Deployment + +### Vercel +```bash +npm install -g vercel +vercel --prod +``` + +### Netlify +```bash +npm run build +# Upload dist/ folder to Netlify +``` + +## šŸŽÆ Next Steps + +1. **Add Components**: Start building your app components +2. **Set up Routing**: Add more routes in main.jsx +3. **Configure API**: Set up your API endpoints if using Axios +4. **Add State Management**: Implement Redux/Zustand if needed +5. **Deploy**: Deploy to your preferred hosting service + +--- + +Built with ā¤ļø by harsh & Sameer using React + Vite diff --git a/test/test-react/eslint.config.js b/test/test-react/eslint.config.js new file mode 100644 index 0000000..cee1e2c --- /dev/null +++ b/test/test-react/eslint.config.js @@ -0,0 +1,29 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs['recommended-latest'], + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + rules: { + 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + }, + }, +]) diff --git a/test/test-react/index.html b/test/test-react/index.html new file mode 100644 index 0000000..0c589ec --- /dev/null +++ b/test/test-react/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/test/test-react/package.json b/test/test-react/package.json new file mode 100644 index 0000000..f148342 --- /dev/null +++ b/test/test-react/package.json @@ -0,0 +1,36 @@ +{ + "name": "test-react", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@reduxjs/toolkit": "^2.8.2", + "@tailwindcss/vite": "^4.1.12", + "axios": "^1.11.0", + "formik": "^2.4.6", + "react": "^19.1.1", + "react-dom": "^19.1.1", + "react-icons": "^5.5.0", + "react-redux": "^9.2.0", + "react-router-dom": "^7.8.1", + "tailwindcss": "^4.1.12" + }, + "devDependencies": { + "@eslint/js": "^9.33.0", + "@types/react": "^19.1.10", + "@types/react-dom": "^19.1.7", + "@vitejs/plugin-react": "^5.0.0", + "eslint": "^9.33.0", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.20", + "globals": "^16.3.0", + "jest": "^30.0.5", + "vite": "^7.1.2" + } +} diff --git a/test/test-react/public/vite.svg b/test/test-react/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/test/test-react/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/test-react/src/App.jsx b/test/test-react/src/App.jsx new file mode 100644 index 0000000..6a8be7c --- /dev/null +++ b/test/test-react/src/App.jsx @@ -0,0 +1,34 @@ +export default function App() { + return ( +
+

+ Welcome to{" "} + test-react šŸš€ +

+

+ Your project is ready. Start building amazing things! +

+ + +
+ ); +} \ No newline at end of file diff --git a/test/test-react/src/assets/react.svg b/test/test-react/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/test/test-react/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/test-react/src/index.css b/test/test-react/src/index.css new file mode 100644 index 0000000..f1d8c73 --- /dev/null +++ b/test/test-react/src/index.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/test/test-react/src/main.jsx b/test/test-react/src/main.jsx new file mode 100644 index 0000000..bb246a7 --- /dev/null +++ b/test/test-react/src/main.jsx @@ -0,0 +1,15 @@ +import './index.css'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + } /> + + + +); \ No newline at end of file diff --git a/test/test-react/src/utils/axiosInstance.js b/test/test-react/src/utils/axiosInstance.js new file mode 100644 index 0000000..83d5f2f --- /dev/null +++ b/test/test-react/src/utils/axiosInstance.js @@ -0,0 +1,41 @@ +import axios from "axios"; + +export const api = axios.create({ + baseURL: import.meta.env.VITE_API_URL || "http://localhost:5000", + headers: { "Content-Type": "application/json" }, + timeout: 10000 +}); + +// āœ… Request Interceptor +api.interceptors.request.use( + (config) => { + const token = localStorage.getItem("token"); + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; + }, + (error) => { + return Promise.reject(error); + } +); + +// āœ… Response Interceptor +api.interceptors.response.use( + (response) => { + return response.data; + }, + (error) => { + if (error.response) { + console.error("API Error:", error.response.data?.message || error.message); + if (error.response.status === 401) { + window.location.href = "/login"; + } + } else if (error.request) { + console.error("No response received from server."); + } else { + console.error("Request setup error:", error.message); + } + return Promise.reject(error); + } +); \ No newline at end of file diff --git a/test/test-react/vite.config.js b/test/test-react/vite.config.js new file mode 100644 index 0000000..c3088bd --- /dev/null +++ b/test/test-react/vite.config.js @@ -0,0 +1,9 @@ +import tailwindcss from '@tailwindcss/vite' +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + tailwindcss(),react()], +})