@aditokmo/react-setup-cli 0.1.3 → 0.1.4

package/README.md

@@ -62,7 +62,7 @@ TanStack Query is integrated to handle server-state management. It is optional,
 
 ### Styling
 
-You can choose between CSS, SCSS (soon), or Tailwind CSS. While I personally recommend Tailwind for modern and faster development, the CLI ensures that regardless of your choice, the project is configured with a global styles directory and a consistent entry point. If you select TailwindCSS you will also have option to use Shadcn/UI, and with that you will have option to choose components that you want to install instead of doing it manually.
+You can choose between CSS, SCSS, or Tailwind CSS. While I personally recommend Tailwind for modern and faster development, the CLI ensures that regardless of your choice, the project is configured with a global styles directory and a consistent entry point. If you select TailwindCSS you will also have option to use Shadcn/UI, and with that you will have option to choose components that you want to install instead of doing it manually.
 
 ### Routing
 

package/dist/index.js

@@ -3,12 +3,27 @@ import fs from 'fs-extra';
 import path from 'path';
 import { execSync } from 'child_process';
 import { askQuestions } from './questions.js';
-import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile, detectPackageManager, patchIndexHTMLFile } from './utils.js';
+import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile, detectPackageManager, patchPackageJsonFile, patchFileContent } from './utils.js';
 import { collectDependencies } from './installers.js';
 import { fileURLToPath } from 'url';
 import { FONT_QUERIES } from './mapper.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const baseDeps = ['react', 'react-dom'];
+const baseDevDeps = [
+    'vite',
+    'typescript',
+    '@types/node',
+    '@types/react',
+    '@types/react-dom',
+    '@vitejs/plugin-react-swc',
+    'eslint',
+    '@eslint/js',
+    'eslint-plugin-react-hooks',
+    'eslint-plugin-react-refresh',
+    'globals',
+    'typescript-eslint'
+];
 async function main() {
     console.log('⚛️ Welcome to React CLI Setup by github/aditokmo');
     let projectDir = '';
@@ -20,10 +35,12 @@ async function main() {
         projectDir = path.join(process.cwd(), answers.projectName);
         const templateRoot = path.join(__dirname, '../templates');
         const appFilePath = path.join(projectDir, 'src', 'App.tsx');
-        const indexHTMLPath = path.join(projectDir, 'src', 'index.html');
+        const indexHTMLPath = path.join(projectDir, 'index.html');
+        const notFoundPath = path.join(projectDir, 'src/modules/common/pages/NotFound.tsx');
         const viteConfigPath = path.join(projectDir, 'vite.config.ts');
         fs.ensureDirSync(projectDir);
         copyTemplate(path.join(templateRoot, 'base'), projectDir);
+        patchPackageJsonFile(path.join(projectDir, 'package.json'), answers.projectName);
         // Styles
         if (answers.style === 'tailwind') {
             copyTemplate(path.join(templateRoot, 'styles', 'tailwind', 'src'), path.join(projectDir, 'src/styles'));
@@ -34,7 +51,8 @@ async function main() {
         }
         if (answers.style === 'scss') {
             copyTemplate(path.join(templateRoot, 'styles', 'scss', 'src'), path.join(projectDir, 'src/styles'));
-            patchIndexHTMLFile(path.join(projectDir, 'index.html'), '<link rel="stylesheet" href="./src/styles/main.css" />', '<link rel="stylesheet" href="./src/styles/main.scss" />');
+            patchFileContent(notFoundPath, "import '@/styles/404.css'", "import '@/styles/404.scss'");
+            patchFileContent(indexHTMLPath, '<link rel="stylesheet" href="./src/styles/main.css" />', '<link rel="stylesheet" href="./src/styles/main.scss" />');
         }
         // Fonts
         if (answers?.fonts && answers.fonts.length > 0) {
@@ -46,12 +64,10 @@ async function main() {
                 <link rel="preconnect" href="https://fonts.googleapis.com">
                 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                 <link href="${url}" rel="stylesheet">`;
-            patchIndexHTMLFile(path.join(projectDir, 'index.html'), '<!-- [HEAD_LINK_IMPORT] -->', content);
+            patchFileContent(indexHTMLPath, '<!-- [HEAD_LINK_IMPORT] -->', content);
         }
         else {
-            let html = fs.readFileSync(indexHTMLPath, 'utf-8');
-            html = html.replace('', '');
-            fs.writeFileSync(indexHTMLPath, html);
+            patchFileContent(indexHTMLPath, '<!-- [HEAD_LINK_IMPORT] -->', '');
         }
         // State Management
         if (answers.reactQuery) {
@@ -78,16 +94,18 @@ async function main() {
         finalizeAppFile(appFilePath);
         finalizeViteConfig(viteConfigPath);
         const { dependency, devDependency, cmd } = collectDependencies(answers, packageManager);
+        const allDeps = [...baseDeps, ...dependency];
+        const allDevDeps = [...baseDevDeps, ...devDependency];
         process.chdir(projectDir);
         console.log(`📦 Initializing ${packageManager} project...`);
         execSync(`${packageManager} install`, { stdio: 'inherit' });
-        if (dependency.length) {
+        if (allDeps.length) {
             console.log('📦 Installing dependencies...');
-            execSync(`${packageManager} ${installAction} ${dependency.join(' ')}`, { stdio: 'inherit' });
+            execSync(`${packageManager} ${installAction} ${allDeps.join(' ')}`, { stdio: 'inherit' });
         }
-        if (devDependency.length) {
+        if (allDevDeps.length) {
             console.log('📦 Installing dev dependencies...');
-            execSync(`${packageManager} ${installAction} -D ${devDependency.join(' ')}`, { stdio: 'inherit' });
+            execSync(`${packageManager} ${installAction} -D ${allDevDeps.join(' ')}`, { stdio: 'inherit' });
         }
         // Extra cmds like shadcn
         for (const command of cmd) {

package/dist/questions.js

@@ -4,7 +4,6 @@ export async function askQuestions() {
         projectName: () => text({
             message: 'Project name:',
             placeholder: 'my-app',
-            validate: (value) => (value.length < 0 ? 'Project name is required' : undefined),
         }),
         style: () => select({
             message: 'Choose styling:',
@@ -116,6 +115,7 @@ export async function askQuestions() {
     }
     return {
         ...results,
+        projectName: results.projectName || 'my-app',
         shadcn: results.shadcn,
         shadcnComponents: (results.shadcnComponents ?? []),
         fonts: (results.fonts ?? [])

package/dist/utils.js

@@ -1,15 +1,17 @@
 import fs from 'fs-extra';
 export function copyTemplate(src, path) {
     if (!fs.existsSync(src)) {
-        console.warn(`⚠️ Template folder ${src} dosn't exist`);
+        console.warn(`⚠️ Template folder ${src} doesn't exist`);
         return;
     }
     fs.copySync(src, path, { overwrite: true });
 }
-export function patchIndexHTMLFile(filePath, importLine, newContent) {
-    let htmlContent = fs.readFileSync(filePath, 'utf-8');
-    htmlContent = htmlContent.replace(importLine, newContent);
-    fs.writeFileSync(filePath, htmlContent);
+export function patchFileContent(filePath, searchValue, replaceValue) {
+    if (!fs.existsSync(filePath))
+        return;
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const newContent = content.replace(searchValue, replaceValue);
+    fs.writeFileSync(filePath, newContent);
 }
 export function patchAppFile(filePath, importLine, openTag, closeTag) {
     if (!fs.existsSync(filePath))
@@ -33,6 +35,18 @@ export function patchAppFile(filePath, importLine, openTag, closeTag) {
     }
     fs.writeFileSync(filePath, content);
 }
+export function patchPackageJsonFile(filePath, projectName) {
+    if (!fs.existsSync(filePath))
+        return;
+    try {
+        const pkg = fs.readJsonSync(filePath);
+        pkg.name = projectName;
+        fs.writeJsonSync(filePath, pkg, { spaces: 2 });
+    }
+    catch (error) {
+        console.error('⚠️ Could not update package.json name');
+    }
+}
 export function patchViteConfig(filePath, beforeReactPlugin, importLine, pluginLine) {
     if (!fs.existsSync(filePath))
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aditokmo/react-setup-cli",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A fast React CLI to jumpstart your projects. It sets up your libraries and organizes a scalable folder structure so you can skip the configuration and go straight to coding.",
   "main": "dist/index.js",
   "type": "module",

package/templates/base/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vite-project",
+  "name": "{{PROJECT_NAME}}",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,22 +9,6 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.2",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
-  }
+  "dependencies": {},
+  "devDependencies": {}
 }

package/templates/base/src/modules/common/pages/NotFound.tsx

@@ -1,4 +1,4 @@
-import '@/styles/404.scss';
+import '@/styles/404.css';
 
 export const NotFound = () => {
     return (

package/templates/styles/css/src/404.css

@@ -50,7 +50,7 @@
 .not-found-content a {
   font-size: 0.9rem;
   color: var(--white);
-  background-color: var(--primary-blue);
+  background-color: var(--primary);
   padding: 10px 30px;
   margin-top: 20px;
   border-radius: var(--radius-sm);
@@ -61,7 +61,7 @@
 }
 
 .not-found-content a:hover {
-  background: var(--primary-blue-hover);
+  background: var(--primary-hover);
 }
 
 @media (max-width: 768px) {

package/templates/styles/css/src/main.css

@@ -50,12 +50,12 @@ p {
 
 a {
   text-decoration: none;
-  color: var(--primary-blue);
+  color: var(--primary);
   transition: 0.3s ease;
 }
 
 a:hover {
-  color: var(--primary-blue-hover);
+  color: var(--primary-hover);
 }
 
 button {

package/templates/styles/css/src/variables.css

@@ -1,6 +1,6 @@
 :root {
-  --primary-blue: #37538a;
-  --primary-blue-hover: #263c67;
+  --primary: #37538a;
+  --primary-hover: #263c67;
   --bg-light: #e6edfc;
   --white: #ffffff;
   --text-dark: #111111;

package/templates/styles/scss/src/404.scss

@@ -48,7 +48,7 @@
     a {
       font-size: 0.9rem;
       color: $white;
-      background-color: $primary-blue;
+      background-color: $primary;
       padding: 10px 30px;
       margin-top: 20px;
       border-radius: $radius-sm;
@@ -58,7 +58,7 @@
       display: inline-block;
 
       &:hover {
-        background: $primary-blue-hover;
+        background: $primary-hover;
       }
     }
 

package/templates/styles/scss/src/_variables.scss

@@ -1,8 +1,24 @@
 // Brand Colors
 $primary: #37538a;
+$primary-hover: #263c67;
 $primary-dark: #263c67;
 $accent: #e6edfc;
 
+// Text
+$text-dark: #111111;
+$text-muted: #666666;
+
+// Background
+$bg-light: #e6edfc;
+
+// Radius
+$radius-sm: 10px;
+$radius-md: 16px;
+$radius-lg: 24px;
+
+// Shadows
+$shadow-main: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+
 // Neutrals
 $white: #ffffff;
 $black: #111111;
@@ -10,7 +26,3 @@ $gray: #666666;
 
 // Fonts
 $font-main: "Arial", sans-serif;
-
-// Breakpoints
-$breakpoint-tablet: 768px;
-$breakpoint-mobile: 480px;

package/templates/styles/tailwind/src/404.css

@@ -0,0 +1,98 @@
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  background: #e6edfc;
+}
+
+.not-found-content {
+  padding: 100px 70px;
+  background: #fff;
+  max-width: 700px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  box-shadow: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+}
+
+.not-found-content span {
+  color: #666666;
+  font-weight: 700;
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.not-found-content h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: #111111;
+}
+
+.not-found-content p {
+  font-size: 1rem;
+  color: #666666;
+  max-width: 360px;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.not-found-content a {
+  font-size: 0.9rem;
+  color: #fff;
+  background-color: #37538a;
+  padding: 10px 30px;
+  margin-top: 20px;
+  border-radius: 10px;
+  transition: 0.2s;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.not-found-content a:hover {
+  background: #263c67;
+}
+
+@media (max-width: 768px) {
+  .not-found-content {
+    padding: 60px 40px;
+    max-width: 90%;
+  }
+  .not-found-content span {
+    font-size: 4.5rem;
+    margin-bottom: 20px;
+  }
+  .not-found-content h1 {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .not-found-content {
+    padding: 40px 20px;
+    border-radius: 16px;
+  }
+  .not-found-content span {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+  }
+  .not-found-content h1 {
+    font-size: 1.5rem;
+  }
+  .not-found-content p {
+    font-size: 0.9rem;
+  }
+  .not-found-content a {
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+  }
+}