cargdev/reactwizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format with prettier

Browse Source
This commit is contained in:
Carlos
2024-08-13 20:05:53 -04:00
parent 7422ddf34b
commit 0e72a35ba7
13 changed files with 2058 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
index.js
View File

@ -29,8 +29,14 @@ function createApp(projectDirectory) {
if (fs.existsSync(root)) {
console.clear();
console.log(chalk.red.bold('❌ Error: Directory already exists!'));
console.log(chalk.yellow(`\nThe directory ${chalk.blue(root)} already exists.`));
console.log(chalk.cyan('Please choose a different project name or delete the existing directory.'));
console.log(
chalk.yellow(`\nThe directory ${chalk.blue(root)} already exists.`)
);
console.log(
chalk.cyan(
'Please choose a different project name or delete the existing directory.'
)
);
return; // Exit the function if the directory exists
}
@ -41,7 +47,9 @@ function createApp(projectDirectory) {
fs.mkdirSync(root);
process.chdir(root);
const spinner = ora('⏳ Installing packages. This might take a couple of minutes.').start();
const spinner = ora(
'⏳ Installing packages. This might take a couple of minutes.'
).start();
execSync('npx create-react-app . --template typescript', { stdio: 'ignore' });
@ -89,7 +97,11 @@ function askUserWhereToOpen(directory) {
openInNeovim(directory);
break;
default:
console.log(chalk.yellow('Project setup complete. You can manually open the project if needed.'));
console.log(
chalk.yellow(
'Project setup complete. You can manually open the project if needed.'
)
);
}
});
}
@ -102,12 +114,18 @@ function openInTerminal(directory) {
spawn('open', ['-a', 'Terminal', directory]);
} else if (platform === 'win32') {
// Windows
spawn('cmd.exe', ['/c', 'start', 'cmd.exe', '/K', `cd /d ${directory}`], { shell: true });
spawn('cmd.exe', ['/c', 'start', 'cmd.exe', '/K', `cd /d ${directory}`], {
shell: true,
});
} else if (platform === 'linux') {
// Linux
spawn('gnome-terminal', ['--working-directory=' + directory]);
} else {
console.log(chalk.red('Unsupported platform. Please manually navigate to the directory.'));
console.log(
chalk.red(
'Unsupported platform. Please manually navigate to the directory.'
)
);
}
}
@ -124,36 +142,80 @@ function printCommandSummary() {
console.log(chalk.cyan('\nAvailable Commands:'));
console.log(chalk.green('1. 🚀 npm start'));
console.log(chalk.white(' Starts the development server with Webpack. The project is served using Webpack Dev Server with the configuration specified in webpack.config.js.'));
console.log(
chalk.white(
' Starts the development server with Webpack. The project is served using Webpack Dev Server with the configuration specified in webpack.config.js.'
)
);
console.log(chalk.green('\n2. 🛠️ npm run build'));
console.log(chalk.white(' Builds the project for production. Webpack compiles the project and outputs the optimized bundle in the /dist directory.'));
console.log(
chalk.white(
' Builds the project for production. Webpack compiles the project and outputs the optimized bundle in the /dist directory.'
)
);
console.log(chalk.green('\n3. 🧪 npm test'));
console.log(chalk.white(' Placeholder for running tests. Currently, it does not run any tests but can be customized to run Jest or other test suites.'));
console.log(
chalk.white(
' Placeholder for running tests. Currently, it does not run any tests but can be customized to run Jest or other test suites.'
)
);
console.log(chalk.green('\n4. 🧪 npm run test:dev'));
console.log(chalk.white(' Runs tests in watch mode using React Scripts. Suitable for a test-driven development approach.'));
console.log(
chalk.white(
' Runs tests in watch mode using React Scripts. Suitable for a test-driven development approach.'
)
);
console.log(chalk.green('\n5. 🎨 npm run pretty-quick'));
console.log(chalk.white(' Formats all staged files using Prettier. Ensures that code is consistently formatted before committing.'));
console.log(
chalk.white(
' Formats all staged files using Prettier. Ensures that code is consistently formatted before committing.'
)
);
console.log(chalk.green('\n6. 🔍 npm run lint:prettier'));
console.log(chalk.white(' Checks the format of the entire codebase using a custom script. It can be used to ensure that all files adhere to Prettier’s formatting rules.'));
console.log(
chalk.white(
' Checks the format of the entire codebase using a custom script. It can be used to ensure that all files adhere to Prettier’s formatting rules.'
)
);
console.log(chalk.green('\n7. ✨ npm run prettier'));
console.log(chalk.white(' Formats the entire codebase using Prettier based on the configuration in .prettierrc.'));
console.log(
chalk.white(
' Formats the entire codebase using Prettier based on the configuration in .prettierrc.'
)
);
console.log(chalk.green('\n8. ✨ npm run prettier:commit'));
console.log(chalk.white(' Applies Prettier formatting to staged files before committing. Ensures that committed code is properly formatted.'));
console.log(
chalk.white(
' Applies Prettier formatting to staged files before committing. Ensures that committed code is properly formatted.'
)
);
console.log(chalk.green('\n9. 🚨 npm run eject'));
console.log(chalk.white(' Ejects the project from Create React App. This command exposes the underlying configuration files for full control but cannot be undone.'));
console.log(
chalk.white(
' Ejects the project from Create React App. This command exposes the underlying configuration files for full control but cannot be undone.'
)
);
console.log(chalk.green('\n10. 🛡️ npm run prepare'));
console.log(chalk.white(' Installs Husky hooks. This script is automatically run after dependencies are installed, setting up Git hooks for the project.'));
console.log(
chalk.white(
' Installs Husky hooks. This script is automatically run after dependencies are installed, setting up Git hooks for the project.'
)
);
console.log(chalk.yellow('\n🎉 Your project is ready! Use the above commands to start working on your new React app.'));
console.log(
chalk.yellow(
'\n🎉 Your project is ready! Use the above commands to start working on your new React app.'
)
);
}
function runPrettierCommit() {
@ -194,22 +256,24 @@ function deletePreCommitHook() {
}
function updatePackageJson() {
const spinner = ora('📝 Updating package.json with custom scripts...').start();
const spinner = ora(
'📝 Updating package.json with custom scripts...'
).start();
const packageJsonPath = path.resolve('package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
packageJson.scripts = {
"start": "webpack serve --config webpack.config.js --mode development",
"build": "webpack --config webpack.config.js --mode production",
"test": "echo \"Error: no test specified\" && exit 0",
"test:dev": "react-scripts test",
"pretty-quick": "pretty-quick",
"lint:prettier": "node check-format.js",
"prettier": "prettier --write . --config .prettierrc",
"prettier:commit": "node prettier-commit.js",
"eject": "react-scripts eject",
"prepare": "husky install"
start: 'webpack serve --config webpack.config.js --mode development',
build: 'webpack --config webpack.config.js --mode production',
test: 'echo "Error: no test specified" && exit 0',
'test:dev': 'react-scripts test',
'pretty-quick': 'pretty-quick',
'lint:prettier': 'node check-format.js',
prettier: 'prettier --write . --config .prettierrc',
'prettier:commit': 'node prettier-commit.js',
eject: 'react-scripts eject',
prepare: 'husky install',
};
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
@ -220,18 +284,42 @@ function copyPreConfiguredFiles(destinationPath) {
const spinner = ora('📁 Copying pre-configured files...').start();
const filesToCopy = [
{ src: path.resolve(__dirname, 'pre-files/check-format.js'), dest: path.join(destinationPath, 'check-format.js') },
{ src: path.resolve(__dirname, 'pre-files/commit-msg-linter.js'), dest: path.join(destinationPath, '.husky/commit-msg-linter.js') },
{ src: path.resolve(__dirname, 'pre-files/lint-check.js'), dest: path.join(destinationPath, '.husky/lint-check.js') },
{ src: path.resolve(__dirname, 'pre-files/prettier-commit.js'), dest: path.join(destinationPath, 'prettier-commit.js') },
{ src: path.resolve(__dirname, 'pre-files/webpack.config.js'), dest: path.join(destinationPath, 'webpack.config.js') },
{ src: path.resolve(__dirname, 'pre-files/.babelrc'), dest: path.join(destinationPath, '.babelrc') },
{ src: path.resolve(__dirname, 'pre-files/.eslintrc.js'), dest: path.join(destinationPath, '.eslintrc.js') },
{ src: path.resolve(__dirname, 'pre-files/.prettierrc'), dest: path.join(destinationPath, '.prettierrc') },
{
src: path.resolve(__dirname, 'pre-files/check-format.js'),
dest: path.join(destinationPath, 'check-format.js'),
},
{
src: path.resolve(__dirname, 'pre-files/commit-msg-linter.js'),
dest: path.join(destinationPath, '.husky/commit-msg-linter.js'),
},
{
src: path.resolve(__dirname, 'pre-files/lint-check.js'),
dest: path.join(destinationPath, '.husky/lint-check.js'),
},
{
src: path.resolve(__dirname, 'pre-files/prettier-commit.js'),
dest: path.join(destinationPath, 'prettier-commit.js'),
},
{
src: path.resolve(__dirname, 'pre-files/webpack.config.js'),
dest: path.join(destinationPath, 'webpack.config.js'),
},
{
src: path.resolve(__dirname, 'pre-files/.babelrc'),
dest: path.join(destinationPath, '.babelrc'),
},
{
src: path.resolve(__dirname, 'pre-files/.eslintrc.js'),
dest: path.join(destinationPath, '.eslintrc.js'),
},
{
src: path.resolve(__dirname, 'pre-files/.prettierrc'),
dest: path.join(destinationPath, '.prettierrc'),
},
// Add more files here if needed
];
filesToCopy.forEach(file => {
filesToCopy.forEach((file) => {
fs.copyFileSync(file.src, file.dest);
});
@ -245,13 +333,19 @@ function copyPreConfiguredFiles(destinationPath) {
function installDependencies() {
const spinner = ora('🔄 Installing additional dependencies...').start();
execSync('npm install @babel/core @babel/preset-env @babel/preset-react @reduxjs/toolkit @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom ajv antd babel-loader css-loader jest playwright react react-dom react-redux react-scripts redux sass sass-loader style-loader typescript web-vitals webpack webpack-cli', { stdio: 'ignore' });
execSync(
'npm install @babel/core @babel/preset-env @babel/preset-react @reduxjs/toolkit @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom ajv antd babel-loader css-loader jest playwright react react-dom react-redux react-scripts redux sass sass-loader style-loader typescript web-vitals webpack webpack-cli',
{ stdio: 'ignore' }
);
spinner.succeed('✅ Additional dependencies installed.');
}
function installDevDependencies() {
const spinner = ora('🔄 Installing additional dev dependencies...').start();
execSync('npm install --save-dev @babel/plugin-proposal-private-property-in-object ora prettier @commitlint/cli @commitlint/config-conventional @svgr/webpack dotenv dotenv-webpack husky url-loader webpack-dev-server pretty-quick', { stdio: 'ignore' });
execSync(
'npm install --save-dev @babel/plugin-proposal-private-property-in-object ora prettier @commitlint/cli @commitlint/config-conventional @svgr/webpack dotenv dotenv-webpack husky url-loader webpack-dev-server pretty-quick',
{ stdio: 'ignore' }
);
spinner.succeed('✅ Additional dev dependencies installed.');
}
@ -287,16 +381,18 @@ function setupCommitlint() {
const spinner = ora('🔍 Setting up Commitlint...').start();
const commitMsg = `#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
node ./.husky/commit-msg-linter.js "$1"`
node ./.husky/commit-msg-linter.js "$1"`;
const commitLintMsgLinter = `module.exports = {
extends: ['@commitlint/config-conventional'],
};`
};`;
const prePush = `#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
node .husky/lint-check.js`
node .husky/lint-check.js`;
execSync('npm install @commitlint/{config-conventional,cli} --save-dev', { stdio: 'ignore' });
execSync('npm install @commitlint/{config-conventional,cli} --save-dev', {
stdio: 'ignore',
});
execSync('touch .husky/commit-msg', { stdio: 'ignore' });
execSync('touch .husky/pre-push', { stdio: 'ignore' });
execSync('chmod +x .husky/commit-msg', { stdio: 'ignore' });
@ -315,11 +411,11 @@ function setupRedux() {
'src/store',
'src/store/slices',
'src/store/middleware',
'src/store/selectors'
'src/store/selectors',
];
reduxStructure.forEach(dir => {
fs.mkdirSync(dir, { recursive: true});
reduxStructure.forEach((dir) => {
fs.mkdirSync(dir, { recursive: true });
});
const storeIndex = `
@ -365,10 +461,10 @@ function createAtomicStructure() {
'src/components/molecules',
'src/components/organisms',
'src/components/templates',
'src/components/pages'
'src/components/pages',
];
atomicStructure.forEach(dir => {
atomicStructure.forEach((dir) => {
fs.mkdirSync(dir, { recursive: true });
});
spinner.succeed('🏗️ Atomic design structure created.');