feat: add optional ui framework selection

README.md

@@ -1,11 +1,11 @@
 # React Crafter
 
-**React Crafter** is a CLI tool designed to quickly scaffold a modern React application with TypeScript, Ant Design, Sass, Vite, and essential development tools like Husky and linters pre-configured. This tool simplifies the initial setup, allowing developers to start coding with best practices from the get-go.
+**React Crafter** is a CLI tool designed to quickly scaffold a modern React application with TypeScript, optional UI libraries, Sass, Vite, and essential development tools like Husky and linters pre-configured. This tool simplifies the initial setup, allowing developers to start coding with best practices from the get-go.
 
 ## Features
 
 - **React with TypeScript**: Automatically sets up a React project using TypeScript.
-- **Ant Design Integration**: Includes Ant Design (antd) for UI components, fully integrated with your project.
+- **UI Library Options**: Choose between Ant Design, Material UI, Chakra UI, Radix UI, or none at all during setup.
 - **Sass Support**: Configures Sass for better styling with variables, mixins, and more.
 - **Vite Configuration**: Fast bundler setup for development and production builds.
 - **Husky & Linters**: Pre-configured Git hooks with Husky, Commitlint, and Prettier to enforce code quality and style.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-crafter",
   "version": "1.1.3",
-  "description": "A CLI tool to quickly scaffold a React application with TypeScript, Ant Design, Sass, Vite, and essential development tools like Husky and linters pre-configured. Perfect for kickstarting modern React projects with best practices.",
+  "description": "A CLI tool to quickly scaffold a React application with TypeScript, optional UI frameworks, Sass, Vite, and essential development tools like Husky and linters pre-configured. Perfect for kickstarting modern React projects with best practices.",
   "main": "index.js",
   "bin": {
     "react-crafter": "bin/cli.js"
@@ -10,6 +10,9 @@
     "react",
     "typescript",
     "antd",
+    "material-ui",
+    "chakra-ui",
+    "radix-ui",
     "sass",
     "vite",
     "cli",

src/setup/dependencies.js

@@ -5,8 +5,26 @@ const { deps } = require('./deps');
 function installDependencies(userInput, options) {
   const spinner = ora('🔄 Installing dependencies...').start();
   try {
-    if (userInput.useAntd) {
+    switch (userInput.uiFramework) {
+      case 'Ant Design':
         deps.push('antd');
+        break;
+      case 'Material UI':
+        deps.push('@mui/material');
+        deps.push('@emotion/react');
+        deps.push('@emotion/styled');
+        break;
+      case 'Chakra UI':
+        deps.push('@chakra-ui/react');
+        deps.push('@emotion/react');
+        deps.push('@emotion/styled');
+        deps.push('framer-motion');
+        break;
+      case 'Radix UI':
+        deps.push('@radix-ui/react-icons');
+        break;
+      default:
+        break;
     }
     if (userInput.useRedux) {
       deps.push('@reduxjs/toolkit');

src/utils/prompts.js

@@ -3,7 +3,12 @@ const inquirer = require('inquirer');
 async function askProjectDetails() {
   return inquirer.prompt([
     { type: 'confirm', name: 'useHusky', message: 'Install Husky?' },
-    { type: 'confirm', name: 'useAntd', message: 'Install Antd?' },
+    {
+      type: 'list',
+      name: 'uiFramework',
+      message: 'Choose a UI framework:',
+      choices: ['Ant Design', 'Material UI', 'Chakra UI', 'Radix UI', 'None'],
+    },
     { type: 'confirm', name: 'useRedux', message: 'Use Redux?' },
 
     { type: 'confirm', name: 'useModuleFederation', message: 'Use Module Federation Plugin?' },