create-react-scaffold-cli 1.0.7 → 1.1.0

package/bin/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import prompts from 'prompts';
 import { createProject } from '../scripts/createProject.js';
@@ -11,24 +11,34 @@ async function init() {
       message: 'What is your project name?',
       validate: (value) => (value ? true : 'Project name is required'),
     },
+    {
+      type: 'select',
+      name: 'language',
+      message: 'Choose a language:',
+      choices: [
+        { title: 'JavaScript', value: 'javascript' },
+        { title: 'TypeScript', value: 'typescript' },
+      ],
+      initial: 0,
+    },
     {
       type: 'toggle',
       name: 'installDeps',
       message: 'Do you want to install dependencies now?',
       initial: true,
-      active: 'yes',
-      inactive: 'no',
+      active: 'Yes',
+      inactive: 'No',
     },
   ]);
 
-  const { projectName, installDeps } = responses;
+  const { projectName, installDeps, language } = responses;
 
   if (!projectName) {
     console.log('❌ Project creation cancelled');
     process.exit(1);
   }
 
-  await createProject(projectName, { installDeps });
+  await createProject(projectName, { installDeps, language });
 }
 
 init();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-scaffold-cli",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/scripts/createProject.js

@@ -7,12 +7,18 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export async function createProject(name, options) {
-  const { installDeps } = options;
+  const { installDeps, language = 'javascript' } = options;
 
   const targetDir = path.resolve(process.cwd(), name);
-  const templateDir = path.resolve(__dirname, '../templates/base');
+
+  const templateFolder = language === 'typescript' ? 'base-ts' : 'base-js';
+
+  const templateDir = path.resolve(__dirname, `../templates/${templateFolder}`);
 
   console.log(`📁 Creating project: ${name}`);
+  console.log(
+    `🧩 Template: ${language === 'typescript' ? 'TypeScript' : 'JavaScript'}`,
+  );
 
   await fs.copy(templateDir, targetDir);
 

package/templates/{base → base-js}/src/shared/utils/parser.js

@@ -21,7 +21,7 @@ export const parseNumberForValidator = (value) => {
   if (isNullish) return fallback;
   const isValid = typeof value === 'number';
   if (!isValid) return fallback;
-  return fallback;
+  return value;
 };
 
 export const parseJSON = (value) => {

package/templates/base-ts/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/templates/base-ts/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-jsdoc"]
+}

package/templates/base-ts/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+    "dsznajder.es7-react-js-snippets"
+  ]
+}

package/templates/base-ts/.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.cursorSmoothCaretAnimation": "on",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "cSpell.words": ["premiumlogo"],
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "liveServer.settings.port": 5501
+}

package/templates/base-ts/README.md

@@ -0,0 +1,165 @@
+# React Feature‑First Scaffold
+
+## Purpose
+
+This repository is an **opinionated React scaffold** designed for large-scale frontend applications. It enforces a **feature‑first architecture**, clear ownership boundaries, and predictable patterns so teams can scale safely without architectural drift.
+
+This scaffold will later be distributed via an internal **NPM CLI** (similar to `create-react-app`) to bootstrap projects with best practices preconfigured.
+
+---
+
+## Core Principles
+
+- **Feature-first, not layer-first**
+- **Explicit boundaries** between app / features / shared
+- **Locality of logic** (keep things close to where they are used)
+- **Predictable imports** and naming conventions
+- **Low cognitive load** for new developers
+
+---
+
+## Tech Stack
+
+### Runtime
+
+- **React 19** – UI layer
+- **Vite** – fast dev & build tooling
+
+### Styling
+
+- **Tailwind CSS** – utility-first styling
+- **tailwind-merge** – class conflict resolution
+- **clsx** – conditional class composition
+
+### Data & State
+
+- **@tanstack/react-query** – server-state management
+- **Axios** – HTTP client
+
+### UI Utilities
+
+- **Radix UI** – accessible headless components
+- **react-hot-toast** – notifications
+- **react-icons** – icon system
+
+### Code Quality
+
+- **ESLint** – linting with strict rules
+- **Prettier** – formatting
+- **Husky + lint-staged** – pre-commit enforcement
+
+---
+
+## High-Level Folder Structure
+
+```txt
+src/
+  app/        # Application bootstrap & global wiring
+  features/   # Business features (isolated, self-contained)
+  shared/     # Cross-feature reusable modules
+```
+
+Each top-level folder has **its own README** explaining rules and responsibilities.
+
+---
+
+## Installation
+
+> CLI installation instructions.
+
+```bash
+npx create-react-scaffold-cli
+
+```
+
+---
+
+## Documentation Index
+
+- `src/app/README.md` – Application bootstrap & providers
+- `src/features/README.md` – Feature architecture rules
+- `src/shared/README.md` – Shared modules & reuse policy
+
+---
+
+## Set Up
+
+### Install dependencies
+
+```bash
+npm i
+```
+
+### Run application
+
+---
+
+```
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+### Lint application
+
+```
+npm run lint
+```
+
+### Prettify code
+
+```
+npm run prettier
+```
+
+### Build application
+
+```
+npm run build
+```
+
+### Preview application
+
+```
+npm run preview
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+# Learning Resources
+
+## Tailwind CSS
+
+To learn more about `Tailwind CSS`, take a look at the following resources:
+
+- [Tailwind ](https://tailwindcss.com) - Tailwind documentation and related resources.
+
+## Framer Motion
+
+To learn more about `Framer Motion`, take a look at the following resources:
+
+- [Framer Motion](https://www.framer.com/motion) - Framer Motion documentation and related resources.
+
+## React Query
+
+To learn more about `TanStack Query`, take a look at the following resources:
+
+- [TanStack Query](https://tanstack.com/query/latest) - React Query documentation and related resources.
+
+## Nuqs
+
+To learn more about `Nuqs`, take a look at the following resources:
+
+- [Nuqs](https://nuqs.dev/) - React Query documentation and related resources.
+
+## Philosophy
+
+> **Architecture is a product feature.**
+
+This scaffold exists to reduce decision fatigue, prevent architectural erosion, and help teams move faster with confidence.
+
+---
+
+## Ownership
+
+This scaffold is maintained internally and should be treated as a **living standard**. Changes must be intentional, documented, and agreed upon by the frontend team.

package/templates/base-ts/docs/DOCS.md

@@ -0,0 +1,7 @@
+# Scaffold Guides
+
+## Codebase Modules (source of truth)
+
+- [app](../src/app/app.readme.md)
+- [shared](../src/shared/shared.readme.md)
+- [features](../src/features/features.readme.md)

package/templates/base-ts/eslint.config.js

@@ -0,0 +1,56 @@
+import js from '@eslint/js';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'no-console': 'error',
+      'prefer-const': 'error',
+      'no-duplicate-imports': 'error',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+  },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+      sourceType: 'module',
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-uses-react': 'off',
+      'react/react-in-jsx-scope': 'off',
+    },
+  }
+);

package/templates/base-ts/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/public/icons/react.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>React Scaffold App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app/main.tsx"></script>
+  </body>
+</html>

package/templates/base-ts/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/base-ts/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "src/**/*.css": [
+      "prettier --write"
+    ],
+    "package.json": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tanstack/react-query": "^5.90.16",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "axios": "^1.13.2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.26.2",
+    "nuqs": "^2.8.6",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hot-toast": "^2.6.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.12.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "3.7.4",
+    "prettier-plugin-jsdoc": "^1.8.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.55.0",
+    "vite": "^7.2.4"
+  }
+}

package/templates/base-ts/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/base-ts/public/icons/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><g transform="matrix(.05696 0 0 .05696 .647744 2.43826)" fill="none" fill-rule="evenodd"><circle r="50.167" cy="237.628" cx="269.529" fill="#00d8ff"/><g stroke="#00d8ff" stroke-width="24"><path d="M269.53 135.628c67.356 0 129.928 9.665 177.107 25.907 56.844 19.57 91.794 49.233 91.794 76.093 0 27.99-37.04 59.503-98.083 79.728-46.15 15.29-106.88 23.272-170.818 23.272-65.554 0-127.63-7.492-174.3-23.44-59.046-20.182-94.61-52.103-94.61-79.56 0-26.642 33.37-56.076 89.415-75.616 47.355-16.51 111.472-26.384 179.486-26.384z"/><path d="M180.736 186.922c33.65-58.348 73.28-107.724 110.92-140.48C337.006 6.976 380.163-8.48 403.43 4.937c24.248 13.983 33.042 61.814 20.067 124.796-9.8 47.618-33.234 104.212-65.176 159.6-32.75 56.788-70.25 106.82-107.377 139.272-46.98 41.068-92.4 55.93-116.185 42.213-23.08-13.3-31.906-56.92-20.834-115.233 9.355-49.27 32.832-109.745 66.8-168.664z"/><path d="M180.82 289.482C147.075 231.2 124.1 172.195 114.51 123.227c-11.544-59-3.382-104.11 19.864-117.566 24.224-14.024 70.055 2.244 118.14 44.94 36.356 32.28 73.688 80.837 105.723 136.173 32.844 56.733 57.46 114.21 67.036 162.582 12.117 61.213 2.31 107.984-21.453 121.74-23.057 13.348-65.25-.784-110.24-39.5-38.013-32.71-78.682-83.253-112.76-142.115z"/></g></g></svg>

package/templates/base-ts/src/app/APP.md

@@ -0,0 +1,74 @@
+# App Module
+
+## Purpose
+The `app` layer is responsible for **bootstrapping the application**. It wires together global providers, routing, and application-level configuration.
+
+This folder should remain **small, boring, and stable**.
+
+> If something changes frequently, it probably does NOT belong here.
+
+---
+
+## Responsibilities
+
+The `app` module may contain:
+
+- Application entry point (`main.jsx`)
+- Root component (`App.jsx`)
+- Global providers (React Query, Theme, etc.)
+- Application router
+- Global middlewares
+- One-time initialization logic
+
+---
+
+## Folder Structure
+
+```txt
+app/
+  middlewares/   # Global middlewares (logging, guards, etc.)
+  providers/     # Global providers (QueryProvider, ThemeProvider)
+  App.jsx        # Root component
+  Router.jsx     # App-level router
+  main.jsx       # Application entry
+  index.css      # Global styles
+```
+
+---
+
+## Rules
+
+### ✅ Allowed
+- Global providers
+- App-wide configuration
+- Router composition
+
+### ❌ Not Allowed
+- Feature-specific logic
+- Business rules
+- UI components
+- API calls
+- Feature contexts
+
+---
+
+## Import Rules
+
+```js
+// ✅ Allowed
+import { QueryProvider } from './providers';
+import { AppRouter } from './Router';
+
+// ❌ Not Allowed
+import { LoginForm } from '@/features/auth/components';
+```
+
+---
+
+## Philosophy
+
+The `app` layer is a **composition root**, not a feature owner.
+
+Keep it minimal.
+Keep it predictable.
+

package/templates/base-ts/src/app/App.tsx

@@ -0,0 +1,15 @@
+import { Scrollable, Toaster } from '@/shared/ui';
+import { QueryProvider } from './providers';
+import { Router } from './Router';
+import { memo } from '@/shared/utils';
+
+export const App = memo(() => {
+  return (
+    <QueryProvider>
+      <Scrollable>
+        <Router />
+      </Scrollable>
+      <Toaster />
+    </QueryProvider>
+  );
+});

package/templates/base-ts/src/app/Router.tsx

@@ -0,0 +1,48 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { featureRoutes } from './routes.registry';
+import { AuthMiddleware } from './middlewares';
+import { Layouts } from '@/shared/constants';
+import { memo } from '@/shared/utils';
+import { ComponentType, ReactNode } from 'react';
+
+const layoutMap: Record<string, ComponentType<{ children: ReactNode }> | null> = {
+  dashboard: null, // Placeholder, should be DashboardLayout
+  none: ({ children }) => <>{children}</>,
+};
+
+export const Router = memo(() => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {featureRoutes.map((route, index) => {
+          const Layout = layoutMap[route.layout ?? Layouts.None];
+          const Page = route.element as ComponentType;
+
+          if (!Layout) {
+             return <Route key={index} path={route.path} element={<Page />} />;
+          }
+
+          let element = (
+            <Layout>
+              <Page />
+            </Layout>
+          );
+
+          if (route.protected) {
+            element = (
+              <AuthMiddleware>
+                <Layout>
+                  <Page />
+                </Layout>
+              </AuthMiddleware>
+            );
+          }
+
+          return <Route key={index} path={route.path} element={element} />;
+        })}
+
+        <Route path="/*" element={<Navigate to="/welcome" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+});

package/templates/base-ts/src/app/index.css

@@ -0,0 +1,37 @@
+@import 'tailwindcss';
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+@theme {
+  /* Colors */
+  --color-primary: #3452ff;
+  --color-primary-foreground: #ffffff;
+  --color-badge: #fef1a7;
+
+  --color-bg: #ffffff;
+  --color-surface: #f7f7f7;
+
+  --color-ink: #03003e;
+  --color-muted: #797979;
+
+  --color-ring: color-mix(in oklab, var(--color-primary) 35%, transparent);
+  --color-border: color-mix(in oklab, var(--color-ink) 10%, transparent);
+  --color-soft: color-mix(in oklab, var(--color-primary) 10%, transparent);
+
+  /* Fonts  */
+  --font-plus-jakarta-sans:
+    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+}
+
+:root {
+  color: var(--color-ink);
+  background: var(--color-bg);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-inter);
+}

package/templates/base-ts/src/app/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}

package/templates/base-ts/src/app/middlewares/AuthMiddleware.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { memo } from '@/shared/utils';
+
+export const AuthMiddleware = memo(({ children }: { children: ReactNode }) => {
+  return <>{children}</>;
+});

package/templates/base-ts/src/app/middlewares/index.ts

@@ -0,0 +1 @@
+export { AuthMiddleware } from './AuthMiddleware';