@aditokmo/react-setup-cli 0.1.2 → 0.1.3

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@aditokmo/react-setup-cli?color=blue)](https://www.npmjs.com/package/@aditokmo/react-setup-cli)
 
-A React CLI built with Vite that helps you build and structure your projects in seconds. It eliminates manual setup by configuring your favorite tools into a **clean, modular architecture** automatically.
+A React CLI built on top of Vite that helps you build and structure projects in seconds. It eliminates manual setup by configuring your favorite tools into a **clean, modular architecture** automatically.
 
 **Note:** This package is a CLI tool. Do not install it with `npm i`. Instead check `Quick Start` down below.
 
@@ -42,9 +42,7 @@ yarn dlx @aditokmo/react-setup-cli
 
 ---
 
-## Decisions About Arhitecture
-
-This CLI isn't just a downloader it is architectural choice designed to enforce professional standards.
+## About Arhitecture
 
 ### Feature-Based Structure
 
@@ -68,10 +66,10 @@ You can choose between CSS, SCSS (soon), or Tailwind CSS. While I personally rec
 
 ### Routing
 
-The CLI offers two powerful options: React Router and TanStack Router.
+The CLI offers two options: React Router and TanStack Router.
 
-- **React Router** is the industry standard that most developers are familiar with.
-- **TanStack Router** is included for those who want a fully type-safe routing experience with built-in data loading capabilities. Whichever you choose, the CLI doesn't just install the library it will generate a `routes/` directory system to help you easily separate your public pages from protected pages.
+- React Router is the industry standard that most developers are familiar with.
+- TanStack Router is included for those who want a fully type-safe routing experience with built-in data loading capabilities. Whichever you choose, the CLI doesn't just install the library it will generate a `routes/` directory system to help you easily separate your public pages from protected pages.
 
 ### Package Manager Detection
 

package/dist/index.js

@@ -3,9 +3,10 @@ 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 } from './utils.js';
+import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile, detectPackageManager, patchIndexHTMLFile } 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);
 async function main() {
@@ -19,6 +20,7 @@ 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 viteConfigPath = path.join(projectDir, 'vite.config.ts');
         fs.ensureDirSync(projectDir);
         copyTemplate(path.join(templateRoot, 'base'), projectDir);
@@ -30,6 +32,27 @@ async function main() {
         if (answers.style === 'css') {
             copyTemplate(path.join(templateRoot, 'styles', 'css', 'src'), path.join(projectDir, 'src/styles'));
         }
+        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" />');
+        }
+        // Fonts
+        if (answers?.fonts && answers.fonts.length > 0) {
+            const fontString = answers.fonts
+                .map(name => FONT_QUERIES[name])
+                .join('&');
+            const url = `https://fonts.googleapis.com/css2?${fontString}&display=swap`;
+            const content = `
+                <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);
+        }
+        else {
+            let html = fs.readFileSync(indexHTMLPath, 'utf-8');
+            html = html.replace('', '');
+            fs.writeFileSync(indexHTMLPath, html);
+        }
         // State Management
         if (answers.reactQuery) {
             copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src', 'provider'), path.join(projectDir, 'src/providers'));

package/dist/mapper.js

@@ -1,10 +1,11 @@
-import { fontAwesomeIconsInstaller, phosphorIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
+import { fontAwesomeIconsInstaller, phosphorIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, scssInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
 export const installers = {
     'reactQuery': reactQueryInstaller,
     'zustand': zustandInstaller,
     'react-router': reactRouterInstaller,
     'tanstack-router': tanstackRouterInstaller,
     'tailwind': tailwindInstaller,
+    'scss': scssInstaller,
     'react-icons': reactIconsInstaller,
     'font-awesome': fontAwesomeIconsInstaller,
     'phosphor-icons': phosphorIconsInstaller,
@@ -16,3 +17,12 @@ export const installers = {
     'zod': zodInstaller,
     'yup': yupInstaller,
 };
+export const FONT_QUERIES = {
+    "geist": "family=Geist:wght@100..900",
+    "inter": "family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900",
+    "lato": "family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900",
+    "montserrat": "family=Montserrat:ital,wght@0,100..900;1,100..900",
+    "open-sans": "family=Open+Sans:ital,wght@0,300..800;1,300..800",
+    "poppins": "family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",
+    "roboto": "family=Roboto:ital,wght@0,100..900;1,100..900"
+};

package/dist/packages.js

@@ -11,6 +11,9 @@ export const zustandInstaller = {
 export const tailwindInstaller = {
     dependency: ['tailwindcss', '@tailwindcss/vite'],
 };
+export const scssInstaller = {
+    devDependency: ['sass']
+};
 // Icons
 export const reactIconsInstaller = {
     dependency: ['react-icons'],

package/dist/questions.js

@@ -11,6 +11,7 @@ export async function askQuestions() {
             options: [
                 { value: 'tailwind', label: 'Tailwind' },
                 { value: 'css', label: 'CSS' },
+                { value: 'scss', label: 'SCSS' },
             ],
         }),
         shadcn: ({ results }) => {
@@ -38,6 +39,19 @@ export async function askQuestions() {
                 required: false,
             });
         },
+        fonts: () => multiselect({
+            message: 'Use space to select your fonts',
+            options: [
+                { value: 'geist', label: 'Geist' },
+                { value: 'inter', label: 'Inter' },
+                { value: 'lato', label: 'Lato' },
+                { value: 'montserrat', label: 'Montserrat' },
+                { value: 'open-sans', label: 'Open Sans' },
+                { value: 'poppins', label: 'Poppins' },
+                { value: 'roboto', label: 'Roboto' }
+            ],
+            required: false
+        }),
         icons: () => select({
             message: 'Choose icon library:',
             options: [
@@ -95,7 +109,8 @@ export async function askQuestions() {
         isCancel(results.shadcnComponents) ||
         isCancel(results.icons) ||
         isCancel(results.toast) ||
-        isCancel(results.reactQuery)) {
+        isCancel(results.reactQuery) ||
+        isCancel(results.fonts)) {
         cancel('Setup cancelled.');
         process.exit(0);
     }
@@ -103,5 +118,6 @@ export async function askQuestions() {
         ...results,
         shadcn: results.shadcn,
         shadcnComponents: (results.shadcnComponents ?? []),
+        fonts: (results.fonts ?? [])
     };
 }

package/dist/utils.js

@@ -6,6 +6,11 @@ export function copyTemplate(src, path) {
     }
     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 patchAppFile(filePath, importLine, openTag, closeTag) {
     if (!fs.existsSync(filePath))
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aditokmo/react-setup-cli",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./src/styles/main.css" />
     <title>vite-project</title>
+    <!-- [HEAD_LINK_IMPORT] -->
   </head>
   <body>
     <div id="root"></div>

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

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

package/templates/{base/src/styles → styles/css/src}/404.css

@@ -1,3 +1,5 @@
+@import "./variables.css";
+
 .not-found-wrapper {
   display: flex;
   flex-direction: column;
@@ -6,25 +8,25 @@
   min-height: 100vh;
   padding: 20px;
   text-align: center;
-  font-family: "Poppins", sans-serif;
-  background: #e6edfc;
+  font-family: var(--font-main);
+  background: var(--bg-light);
 }
 
 .not-found-content {
   padding: 100px 70px;
-  background: #fff;
+  background: var(--white);
   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);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-main);
 }
 
 .not-found-content span {
-  color: #666;
+  color: var(--text-muted);
   font-weight: 700;
   font-size: 6rem;
   line-height: 1;
@@ -34,12 +36,12 @@
   font-size: 2.5rem;
   font-weight: 600;
   margin: 0;
-  color: #111;
+  color: var(--text-dark);
 }
 
 .not-found-content p {
   font-size: 1rem;
-  color: #666;
+  color: var(--text-muted);
   max-width: 360px;
   width: 100%;
   margin: 10px 0;
@@ -47,11 +49,11 @@
 
 .not-found-content a {
   font-size: 0.9rem;
-  color: #fff;
-  background-color: #37538a;
+  color: var(--white);
+  background-color: var(--primary-blue);
   padding: 10px 30px;
   margin-top: 20px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   transition: 0.2s;
   cursor: pointer;
   text-decoration: none;
@@ -59,7 +61,7 @@
 }
 
 .not-found-content a:hover {
-  background: #263c67;
+  background: var(--primary-blue-hover);
 }
 
 @media (max-width: 768px) {
@@ -67,12 +69,10 @@
     padding: 60px 40px;
     max-width: 90%;
   }
-
   .not-found-content span {
     font-size: 4.5rem;
     margin-bottom: 20px;
   }
-
   .not-found-content h1 {
     font-size: 2rem;
   }
@@ -81,22 +81,18 @@
 @media (max-width: 480px) {
   .not-found-content {
     padding: 40px 20px;
-    border-radius: 16px;
+    border-radius: var(--radius-md);
   }
-
   .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;

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

@@ -0,0 +1,70 @@
+@import "./variables.css";
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-main);
+  background-color: var(--white);
+  color: var(--text-dark);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text-dark);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+p {
+  color: var(--text-muted);
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+a {
+  text-decoration: none;
+  color: var(--primary-blue);
+  transition: 0.3s ease;
+}
+
+a:hover {
+  color: var(--primary-blue-hover);
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}

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

@@ -0,0 +1,15 @@
+:root {
+  --primary-blue: #37538a;
+  --primary-blue-hover: #263c67;
+  --bg-light: #e6edfc;
+  --white: #ffffff;
+  --text-dark: #111111;
+  --text-muted: #666666;
+
+  --font-main: "Arial", sans-serif;
+
+  --shadow-main: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+  --radius-lg: 24px;
+  --radius-md: 16px;
+  --radius-sm: 10px;
+}

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

@@ -0,0 +1,103 @@
+@use "./index.scss" as *;
+
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  font-family: $font-main;
+  background: $bg-light;
+
+  .not-found-content {
+    padding: 100px 70px;
+    background: $white;
+    max-width: 700px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-main;
+
+    span {
+      color: $text-muted;
+      font-weight: 700;
+      font-size: 6rem;
+      line-height: 1;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 600;
+      margin: 0;
+      color: $text-dark;
+    }
+
+    p {
+      font-size: 1rem;
+      color: $text-muted;
+      max-width: 360px;
+      width: 100%;
+      margin: 10px 0;
+    }
+
+    a {
+      font-size: 0.9rem;
+      color: $white;
+      background-color: $primary-blue;
+      padding: 10px 30px;
+      margin-top: 20px;
+      border-radius: $radius-sm;
+      transition: 0.2s;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+
+      &:hover {
+        background: $primary-blue-hover;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 60px 40px;
+      max-width: 90%;
+
+      span {
+        font-size: 4.5rem;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      padding: 40px 20px;
+      border-radius: $radius-md;
+
+      span {
+        font-size: 3.5rem;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+      }
+
+      p {
+        font-size: 0.9rem;
+      }
+
+      a {
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
+      }
+    }
+  }
+}

package/templates/styles/scss/src/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "mixins";

package/templates/styles/scss/src/_mixins.scss

@@ -0,0 +1,27 @@
+$breakpoint-tablet: 768px;
+$breakpoint-mobile: 480px;
+
+@mixin tablet {
+  @media (max-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$breakpoint-mobile}) {
+    @content;
+  }
+}
+
+// helpers
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,16 @@
+// Brand Colors
+$primary: #37538a;
+$primary-dark: #263c67;
+$accent: #e6edfc;
+
+// Neutrals
+$white: #ffffff;
+$black: #111111;
+$gray: #666666;
+
+// Fonts
+$font-main: "Arial", sans-serif;
+
+// Breakpoints
+$breakpoint-tablet: 768px;
+$breakpoint-mobile: 480px;

package/templates/styles/scss/src/main.scss

@@ -0,0 +1,20 @@
+@use "index" as *;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $font-main;
+  background-color: $white;
+  color: $black;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}