Skip to content

Commit 563c78b

Browse files
mma150mma150
committed
Add testing and dev tools options to CLI setup
The CLI now prompts for testing framework (Vitest, Jest, Cypress) and development tools (ESLint + Prettier, Husky, Commitizen) during project scaffolding. Additional optional packages (Zustand, TanStack Query, Framer Motion, React Helmet) are supported. Project setup, scripts, and documentation have been updated to reflect these new features.
1 parent 9e3bf4f commit 563c78b

File tree

5 files changed

+375
-28
lines changed

5 files changed

+375
-28
lines changed

‎index.js‎

Lines changed: 100 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { run, createFolder, deleteFile } from './lib/utils.js';
55
import { initializePWA } from './lib/pwa.js';
66
import { setupCSSFramework } from './lib/css-frameworks.js';
77
import { createAxiosSetup, createAppComponent, setupRouterMain, createPWAReadme } from './lib/templates.js';
8+
import { setupTestingFramework } from './lib/testing.js';
9+
import { setupDevTools } from './lib/dev-tools.js';
810

911
(async () => {
1012
// 1. Collect user inputs
@@ -26,6 +28,17 @@ import { createAxiosSetup, createAppComponent, setupRouterMain, createPWAReadme
2628
message: "Do you want to make this a Progressive Web App (PWA)?",
2729
default: false
2830
},
31+
{
32+
type: "list",
33+
name: "testingFramework",
34+
message: "Choose a testing framework:",
35+
choices: [
36+
{ name: "None", value: "none" },
37+
{ name: "Vitest + React Testing Library", value: "vitest" },
38+
{ name: "Jest + React Testing Library", value: "jest" },
39+
{ name: "Cypress (E2E)", value: "cypress" }
40+
]
41+
},
2942
{
3043
type: "checkbox",
3144
name: "packages",
@@ -36,65 +49,130 @@ import { createAxiosSetup, createAppComponent, setupRouterMain, createPWAReadme
3649
{ name: "React Hook Form", value: "react-hook-form" },
3750
{ name: "Yup", value: "yup" },
3851
{ name: "Formik", value: "formik" },
39-
{ name: "Moment.js", value: "moment" }
52+
{ name: "Moment.js", value: "moment" },
53+
{ name: "Zustand (State Management)", value: "zustand" },
54+
{ name: "TanStack Query", value: "@tanstack/react-query" },
55+
{ name: "Framer Motion", value: "framer-motion" },
56+
{ name: "React Helmet (SEO)", value: "react-helmet-async" }
57+
]
58+
},
59+
{
60+
type: "checkbox",
61+
name: "devTools",
62+
message: "Select development tools:",
63+
choices: [
64+
{ name: "ESLint + Prettier", value: "eslint-prettier" },
65+
{ name: "Husky (Git Hooks)", value: "husky" },
66+
{ name: "Commitizen (Conventional Commits)", value: "commitizen" }
4067
]
4168
}
4269
]);
4370

44-
const { projectName, cssFramework, isPWA, packages } = answers;
71+
const { projectName, cssFramework, isPWA, testingFramework, packages, devTools } = answers;
4572
const projectPath = path.join(process.cwd(), projectName);
4673

4774
console.log(`\n🚀 Creating ${projectName}${isPWA ? ' with PWA capabilities' : ''}...`);
4875

4976
// 2. Create Vite project
5077
run(`npm create vite@latest ${projectName} -- --template react`);
5178

52-
// 3. Create all necessary folder structure first
53-
const folders = ["components", "pages", "hooks", "store", "utils", "assets"];
54-
folders.forEach((folder) => {
55-
createFolder(path.join(projectPath, "src", folder));
56-
});
79+
// 3. Setup CSS framework
80+
setupCSSFramework(cssFramework, projectPath);
81+
82+
// 4. Setup testing framework
83+
if (testingFramework !== "none") {
84+
setupTestingFramework(testingFramework, projectPath);
85+
}
5786

58-
// 4. Install packages
87+
// 5. Install PWA functionality
88+
if (isPWA) {
89+
initializePWA(projectPath, projectName);
90+
}
91+
92+
// 6. Install packages with legacy peer deps for compatibility
5993
const defaultPackages = ["react-router-dom"];
6094
const allPackages = [...defaultPackages, ...packages];
6195
if (allPackages.length > 0) {
62-
run(`npm install ${allPackages.join(" ")}`, projectPath);
96+
run(`npm install ${allPackages.join(" ")} --legacy-peer-deps`, projectPath);
6397
}
6498

65-
// 5. Setup PWA if selected (after folder structure is created)
66-
if (isPWA) {
67-
initializePWA(projectPath, projectName);
99+
// 7. Setup development tools
100+
if (devTools.length > 0) {
101+
setupDevTools(devTools, projectPath, testingFramework);
68102
}
69103

70-
// 6. Setup CSS framework
71-
setupCSSFramework(cssFramework, projectPath);
104+
// 8. Create folder structure
105+
const folders = ["components", "pages", "hooks", "store", "utils", "assets"];
106+
folders.forEach((folder) => {
107+
createFolder(path.join(projectPath, "src", folder));
108+
});
72109

73-
// 7. Setup Axios if selected
110+
// 9. Setup Axios if selected
74111
if (packages.includes("axios")) {
75112
createAxiosSetup(projectPath);
76113
}
77114

78-
// 8. Clean up default boilerplate files
115+
// 10. Clean up default boilerplate files
79116
deleteFile(path.join(projectPath, "src", "App.css"));
80117
if (cssFramework !== "Tailwind") {
81118
deleteFile(path.join(projectPath, "src", "index.css"));
82119
}
83120

84-
// 9. Generate clean templates
121+
// 11. Generate clean templates
85122
createAppComponent(projectPath, projectName, isPWA);
86123
setupRouterMain(projectPath, cssFramework);
87124

88-
// 10. Create comprehensive README
125+
// 12. Create comprehensive README
89126
createPWAReadme(projectPath, projectName, cssFramework, packages, isPWA);
90127

91-
// 11. Success message
128+
// 13. Enhanced success message
92129
console.log("\n✅ Setup complete!");
130+
console.log(`\n🎉 Your ${projectName} project is ready!`);
131+
console.log(`\n📁 Project includes:`);
132+
133+
if (testingFramework !== "none") {
134+
const testingName = testingFramework === "vitest" ? "Vitest" :
135+
testingFramework === "jest" ? "Jest" : "Cypress";
136+
console.log(` • ${testingName} testing setup`);
137+
}
138+
139+
if (devTools.includes("eslint-prettier")) {
140+
console.log(` • ESLint + Prettier configuration`);
141+
}
142+
143+
if (devTools.includes("husky")) {
144+
console.log(` • Husky git hooks`);
145+
}
146+
147+
if (devTools.includes("commitizen")) {
148+
console.log(` • Commitizen for conventional commits`);
149+
}
150+
151+
if (packages.length > 0) {
152+
console.log(` • Additional packages: ${packages.join(", ")}`);
153+
}
154+
93155
if (isPWA) {
94-
console.log("📱 PWA features enabled - your app can be installed on mobile devices!");
95-
console.log("⚠️ Important: Replace placeholder SVG icons with proper PNG icons for production");
156+
console.log(" • PWA features enabled - your app can be installed on mobile devices!");
157+
console.log(" ⚠️ Important: Replace placeholder SVG icons with proper PNG icons for production");
158+
}
159+
160+
console.log(`\n🚀 Next steps:`);
161+
console.log(` cd ${projectName}`);
162+
console.log(` npm install`);
163+
console.log(` npm run dev`);
164+
165+
if (testingFramework === "vitest") {
166+
console.log(` npm test (run tests)`);
167+
} else if (testingFramework === "jest") {
168+
console.log(` npm test (run tests)`);
169+
} else if (testingFramework === "cypress") {
170+
console.log(` npm run test:e2e (run E2E tests)`);
171+
}
172+
173+
if (devTools.includes("eslint-prettier")) {
174+
console.log(` npm run lint (check code quality)`);
96175
}
97-
console.log(`\nNext steps:\n cd ${projectName}\n npm install\n npm run dev`);
98176

99177
if (isPWA) {
100178
console.log(`\n📱 To test PWA:\n npm run build\n npm run preview\n Open http://localhost:4173 and test install/offline features`);

‎lib/dev-tools.js‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { run, writeFile, readFile } from './utils.js';
2+
import path from 'path';
3+
import fs from 'fs';
4+
5+
export const setupESLintPrettier = (projectPath) => {
6+
run(`npm install -D eslint @eslint/js eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier eslint-config-prettier eslint-plugin-prettier`, projectPath);
7+
8+
// Create ESLint config
9+
const eslintConfig = `import js from '@eslint/js'
10+
import react from 'eslint-plugin-react'
11+
import reactHooks from 'eslint-plugin-react-hooks'
12+
import reactRefresh from 'eslint-plugin-react-refresh'
13+
14+
export default [
15+
{ ignores: ['dist'] },
16+
{
17+
files: ['**/*.{js,jsx}'],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
parserOptions: {
22+
ecmaVersion: 'latest',
23+
ecmaFeatures: { jsx: true },
24+
sourceType: 'module',
25+
},
26+
},
27+
settings: { react: { version: '18.3' } },
28+
plugins: {
29+
react,
30+
'react-hooks': reactHooks,
31+
'react-refresh': reactRefresh,
32+
},
33+
rules: {
34+
...js.configs.recommended.rules,
35+
...react.configs.recommended.rules,
36+
...react.configs['jsx-runtime'].rules,
37+
...reactHooks.configs.recommended.rules,
38+
'react/jsx-no-target-blank': 'off',
39+
'react-refresh/only-export-components': [
40+
'warn',
41+
{ allowConstantExport: true },
42+
],
43+
},
44+
},
45+
]`;
46+
writeFile(path.join(projectPath, "eslint.config.js"), eslintConfig);
47+
48+
// Create Prettier config
49+
const prettierConfig = `{
50+
"semi": true,
51+
"trailingComma": "es5",
52+
"singleQuote": true,
53+
"printWidth": 80,
54+
"tabWidth": 2,
55+
"useTabs": false
56+
}`;
57+
writeFile(path.join(projectPath, ".prettierrc"), prettierConfig);
58+
59+
// Create .prettierignore
60+
const prettierIgnore = `dist
61+
node_modules
62+
*.log
63+
.DS_Store`;
64+
writeFile(path.join(projectPath, ".prettierignore"), prettierIgnore);
65+
};
66+
67+
export const setupHusky = (projectPath) => {
68+
run(`npm install -D husky lint-staged`, projectPath);
69+
run(`npx husky install`, projectPath);
70+
run(`npx husky add .husky/pre-commit "npx lint-staged"`, projectPath);
71+
72+
// Create lint-staged config in package.json
73+
const packageJsonPath = path.join(projectPath, "package.json");
74+
let packageJson = JSON.parse(readFile(packageJsonPath));
75+
packageJson["lint-staged"] = {
76+
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
77+
"*.{css,scss,md}": ["prettier --write"]
78+
};
79+
writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
80+
};
81+
82+
export const setupCommitizen = (projectPath) => {
83+
run(`npm install -D commitizen cz-conventional-changelog`, projectPath);
84+
85+
const packageJsonPath = path.join(projectPath, "package.json");
86+
let packageJson = JSON.parse(readFile(packageJsonPath));
87+
packageJson.config = {
88+
commitizen: {
89+
path: "cz-conventional-changelog"
90+
}
91+
};
92+
writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
93+
};
94+
95+
export const updatePackageScripts = (projectPath, testingFramework, devTools) => {
96+
const packageJsonPath = path.join(projectPath, "package.json");
97+
let packageJson = JSON.parse(readFile(packageJsonPath));
98+
99+
// Add testing scripts based on framework chosen
100+
if (testingFramework === "vitest") {
101+
packageJson.scripts.test = "vitest";
102+
packageJson.scripts["test:ui"] = "vitest --ui";
103+
packageJson.scripts["test:coverage"] = "vitest --coverage";
104+
} else if (testingFramework === "jest") {
105+
packageJson.scripts.test = "jest";
106+
packageJson.scripts["test:watch"] = "jest --watch";
107+
packageJson.scripts["test:coverage"] = "jest --coverage";
108+
} else if (testingFramework === "cypress") {
109+
packageJson.scripts["test:e2e"] = "cypress open";
110+
packageJson.scripts["test:e2e:headless"] = "cypress run";
111+
}
112+
113+
// Add linting scripts if ESLint is chosen
114+
if (devTools.includes("eslint-prettier")) {
115+
packageJson.scripts.lint = "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0";
116+
packageJson.scripts["lint:fix"] = "eslint . --ext js,jsx --fix";
117+
packageJson.scripts.format = 'prettier --write "src/**/*.{js,jsx,css,md}"';
118+
}
119+
120+
// Add commit script if commitizen is chosen
121+
if (devTools.includes("commitizen")) {
122+
packageJson.scripts.commit = "cz";
123+
}
124+
125+
writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
126+
};
127+
128+
export const setupDevTools = (devTools, projectPath, testingFramework) => {
129+
if (devTools.includes("eslint-prettier")) {
130+
setupESLintPrettier(projectPath);
131+
}
132+
133+
if (devTools.includes("husky")) {
134+
setupHusky(projectPath);
135+
}
136+
137+
if (devTools.includes("commitizen")) {
138+
setupCommitizen(projectPath);
139+
}
140+
141+
// Update package.json scripts
142+
updatePackageScripts(projectPath, testingFramework, devTools);
143+
};

0 commit comments

Comments
 (0)