diff --git a/README.md b/README.md index 1a63d60..e469699 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 5118001..a1de9eb 100644 --- a/package.json +++ b/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", diff --git a/src/setup/dependencies.js b/src/setup/dependencies.js index 6144287..836f2a5 100644 --- a/src/setup/dependencies.js +++ b/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) { - deps.push('antd'); + 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'); diff --git a/src/utils/prompts.js b/src/utils/prompts.js index 2ea781c..623518d 100644 --- a/src/utils/prompts.js +++ b/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?' },