Skip to content

Add testing and dev tools options to CLI setup #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add testing and dev tools options to CLI setup #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 100 additions & 22 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ 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 { setupTestingFramework } from './lib/testing.js';
import { setupDevTools } from './lib/dev-tools.js';

(async () => {
// 1. Collect user inputs
Expand All @@ -26,6 +28,17 @@ import { createAxiosSetup, createAppComponent, setupRouterMain, createPWAReadme
message: "Do you want to make this a Progressive Web App (PWA)?",
default: false
},
{
type: "list",
name: "testingFramework",
message: "Choose a testing framework:",
choices: [
{ name: "None", value: "none" },
{ name: "Vitest + React Testing Library", value: "vitest" },
{ name: "Jest + React Testing Library", value: "jest" },
{ name: "Cypress (E2E)", value: "cypress" }
]
},
{
type: "checkbox",
name: "packages",
Expand All @@ -36,65 +49,130 @@ import { createAxiosSetup, createAppComponent, setupRouterMain, createPWAReadme
{ name: "React Hook Form", value: "react-hook-form" },
{ name: "Yup", value: "yup" },
{ name: "Formik", value: "formik" },
{ name: "Moment.js", value: "moment" }
{ name: "Moment.js", value: "moment" },
{ name: "Zustand (State Management)", value: "zustand" },
{ name: "TanStack Query", value: "@tanstack/react-query" },
{ name: "Framer Motion", value: "framer-motion" },
{ name: "React Helmet (SEO)", value: "react-helmet-async" }
]
},
{
type: "checkbox",
name: "devTools",
message: "Select development tools:",
choices: [
{ name: "ESLint + Prettier", value: "eslint-prettier" },
{ name: "Husky (Git Hooks)", value: "husky" },
{ name: "Commitizen (Conventional Commits)", value: "commitizen" }
]
}
]);

const { projectName, cssFramework, isPWA, packages } = answers;
const { projectName, cssFramework, isPWA, testingFramework, packages, devTools } = 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"];
folders.forEach((folder) => {
createFolder(path.join(projectPath, "src", folder));
});
// 3. Setup CSS framework
setupCSSFramework(cssFramework, projectPath);

// 4. Setup testing framework
if (testingFramework !== "none") {
setupTestingFramework(testingFramework, projectPath);
}

// 4. Install packages
// 5. Install PWA functionality
if (isPWA) {
initializePWA(projectPath, projectName);
}

// 6. Install packages with legacy peer deps for compatibility
const defaultPackages = ["react-router-dom"];
const allPackages = [...defaultPackages, ...packages];
if (allPackages.length > 0) {
run(`npm install ${allPackages.join(" ")}`, projectPath);
run(`npm install ${allPackages.join(" ")} --legacy-peer-deps`, projectPath);
}

// 5. Setup PWA if selected (after folder structure is created)
if (isPWA) {
initializePWA(projectPath, projectName);
// 7. Setup development tools
if (devTools.length > 0) {
setupDevTools(devTools, projectPath, testingFramework);
}

// 6. Setup CSS framework
setupCSSFramework(cssFramework, projectPath);
// 8. Create folder structure
const folders = ["components", "pages", "hooks", "store", "utils", "assets"];
folders.forEach((folder) => {
createFolder(path.join(projectPath, "src", folder));
});

// 7. Setup Axios if selected
// 9. Setup Axios if selected
if (packages.includes("axios")) {
createAxiosSetup(projectPath);
}

// 8. Clean up default boilerplate files
// 10. 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
// 11. Generate clean templates
createAppComponent(projectPath, projectName, isPWA);
setupRouterMain(projectPath, cssFramework);

// 10. Create comprehensive README
// 12. Create comprehensive README
createPWAReadme(projectPath, projectName, cssFramework, packages, isPWA);

// 11. Success message
// 13. Enhanced success message
console.log("\n✅ Setup complete!");
console.log(`\n🎉 Your ${projectName} project is ready!`);
console.log(`\n📁 Project includes:`);

if (testingFramework !== "none") {
const testingName = testingFramework === "vitest" ? "Vitest" :
testingFramework === "jest" ? "Jest" : "Cypress";
console.log(` • ${testingName} testing setup`);
}

if (devTools.includes("eslint-prettier")) {
console.log(` • ESLint + Prettier configuration`);
}

if (devTools.includes("husky")) {
console.log(` • Husky git hooks`);
}

if (devTools.includes("commitizen")) {
console.log(` • Commitizen for conventional commits`);
}

if (packages.length > 0) {
console.log(` • Additional packages: ${packages.join(", ")}`);
}

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(" • 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(`\n🚀 Next steps:`);
console.log(` cd ${projectName}`);
console.log(` npm install`);
console.log(` npm run dev`);

if (testingFramework === "vitest") {
console.log(` npm test (run tests)`);
} else if (testingFramework === "jest") {
console.log(` npm test (run tests)`);
} else if (testingFramework === "cypress") {
console.log(` npm run test:e2e (run E2E tests)`);
}

if (devTools.includes("eslint-prettier")) {
console.log(` npm run lint (check code quality)`);
}
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:4173 and test install/offline features`);
Expand Down
143 changes: 143 additions & 0 deletions lib/dev-tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import { run, writeFile, readFile } from './utils.js';
import path from 'path';
import fs from 'fs';

export const setupESLintPrettier = (projectPath) => {
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);

// Create ESLint config
const eslintConfig = `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'

export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
settings: { react: { version: '18.3' } },
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]`;
writeFile(path.join(projectPath, "eslint.config.js"), eslintConfig);

// Create Prettier config
const prettierConfig = `{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false
}`;
writeFile(path.join(projectPath, ".prettierrc"), prettierConfig);

// Create .prettierignore
const prettierIgnore = `dist
node_modules
*.log
.DS_Store`;
writeFile(path.join(projectPath, ".prettierignore"), prettierIgnore);
};

export const setupHusky = (projectPath) => {
run(`npm install -D husky lint-staged`, projectPath);
run(`npx husky install`, projectPath);
run(`npx husky add .husky/pre-commit "npx lint-staged"`, projectPath);

// Create lint-staged config in package.json
const packageJsonPath = path.join(projectPath, "package.json");
let packageJson = JSON.parse(readFile(packageJsonPath));
packageJson["lint-staged"] = {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,scss,md}": ["prettier --write"]
};
writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
};

export const setupCommitizen = (projectPath) => {
run(`npm install -D commitizen cz-conventional-changelog`, projectPath);

const packageJsonPath = path.join(projectPath, "package.json");
let packageJson = JSON.parse(readFile(packageJsonPath));
packageJson.config = {
commitizen: {
path: "cz-conventional-changelog"
}
};
writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
};

export const updatePackageScripts = (projectPath, testingFramework, devTools) => {
const packageJsonPath = path.join(projectPath, "package.json");
let packageJson = JSON.parse(readFile(packageJsonPath));

// Add testing scripts based on framework chosen
if (testingFramework === "vitest") {
packageJson.scripts.test = "vitest";
packageJson.scripts["test:ui"] = "vitest --ui";
packageJson.scripts["test:coverage"] = "vitest --coverage";
} else if (testingFramework === "jest") {
packageJson.scripts.test = "jest";
packageJson.scripts["test:watch"] = "jest --watch";
packageJson.scripts["test:coverage"] = "jest --coverage";
} else if (testingFramework === "cypress") {
packageJson.scripts["test:e2e"] = "cypress open";
packageJson.scripts["test:e2e:headless"] = "cypress run";
}

// Add linting scripts if ESLint is chosen
if (devTools.includes("eslint-prettier")) {
packageJson.scripts.lint = "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0";
packageJson.scripts["lint:fix"] = "eslint . --ext js,jsx --fix";
packageJson.scripts.format = 'prettier --write "src/**/*.{js,jsx,css,md}"';
}

// Add commit script if commitizen is chosen
if (devTools.includes("commitizen")) {
packageJson.scripts.commit = "cz";
}

writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
};

export const setupDevTools = (devTools, projectPath, testingFramework) => {
if (devTools.includes("eslint-prettier")) {
setupESLintPrettier(projectPath);
}

if (devTools.includes("husky")) {
setupHusky(projectPath);
}

if (devTools.includes("commitizen")) {
setupCommitizen(projectPath);
}

// Update package.json scripts
updatePackageScripts(projectPath, testingFramework, devTools);
};
Loading