diff --git a/cli.js b/cli.js index 7a09473..ced9adf 100755 --- a/cli.js +++ b/cli.js @@ -14,6 +14,7 @@ import { promptOrm, promptProjectName, promptProjectStack, + promptStylingOption, } from "./src/utils/prompts.js"; import { createFrontendProject } from "./src/utils/create-frontend-project.js"; @@ -38,6 +39,7 @@ async function startProject() { let database; let orm; let language; + let stylingOption; const initialMsg = `Simplify Project Setup with the. ${chalk.green( toolName, @@ -56,8 +58,14 @@ async function startProject() { if (projectStack === "frontend") { framework = await promptFrontendFramework(); language = await promptFrontendLanguage(); - - await createFrontendProject(projectName, framework, language); + stylingOption = await promptStylingOption(); + + await createFrontendProject( + projectName, + framework, + language, + stylingOption, + ); } else if (projectStack === "backend") { framework = await promptBackendFramework(); diff --git a/src/utils/create-frontend-project.js b/src/utils/create-frontend-project.js index 62c7fae..14b4e0c 100644 --- a/src/utils/create-frontend-project.js +++ b/src/utils/create-frontend-project.js @@ -1,6 +1,22 @@ -import { copyFile, getTemplateDir } from "./filemanager.js"; +import { + copyFile, + createAndUpdateFile, + getTemplateDir, + removeFile, + updateFileContent, +} from "./filemanager.js"; import path from "path"; import ora from "ora"; +import { + AppTailwindTemplate, + PostCssConfig, + TailwindConfig, + TailwindIndexCSSFile, +} from "../../templates/frontend/reactjs/base/tailwindConfig.js"; +import { + ReactJsJavaScriptTempWithTailwind, + ReactJsTypeScriptTempWithTailwind, +} from "../../templates/frontend/reactjs/base/tw-package-json.js"; /** * loader @@ -22,9 +38,15 @@ async function startSpinner() { * @param {string} framework * @param {string} projectName * @param {string} language - {typescript, javascript} + * @param {string} stylingOption - {CSS, TailwindCSS} */ -export async function createFrontendProject(projectName, framework, language) { +export async function createFrontendProject( + projectName, + framework, + language, + stylingOption, +) { try { const destinationPath = path.join( process.cwd(), @@ -50,11 +72,57 @@ export async function createFrontendProject(projectName, framework, language) { break; } + if (stylingOption === "tailwindcss") { + // update template to include tailwind + updateFileContent( + `${destinationPath}/tailwind.config.js`, + TailwindConfig, + ); + + // update package.json + + updateFileContent( + `${destinationPath}/package.json`, + JSON.stringify( + language === "javascript" + ? ReactJsJavaScriptTempWithTailwind + : ReactJsTypeScriptTempWithTailwind, + ), + ); + + // addd autoprefixer and postcss config + + createAndUpdateFile( + `${destinationPath}/postcss.config.js`, + PostCssConfig, + ); + + // update css files + + updateFileContent( + `${destinationPath}/src/index.css`, + TailwindIndexCSSFile, + ); + + // remove files + + removeFile(`${destinationPath}/src/App.css`); + + // update App.jsx file + + updateFileContent( + `${destinationPath}/src/App.${ + language === "javascript" ? "jsx" : "tsx" + }`, + AppTailwindTemplate, + ); + } + // success message stages.push({ message: `Frontend - ReactJS project with ${ language.charAt(0).toUpperCase() + language.slice(1) - } created successfully! : ${destinationPath}`, + } and ${stylingOption.toUpperCase()} created successfully! : ${destinationPath}`, duration: 1000, }); diff --git a/src/utils/prompts.js b/src/utils/prompts.js index 1feea40..2aa00db 100644 --- a/src/utils/prompts.js +++ b/src/utils/prompts.js @@ -51,6 +51,19 @@ export async function promptFrontendLanguage() { return ans.language.toLowerCase().replace(/ /g, "-"); } +export async function promptStylingOption() { + const ans = await inquirer.prompt([ + { + type: "list", + name: "styling_option", + message: "Choose Your Preferred Styling Option:", + choices: ["CSS", "TailwindCSS"], + }, + ]); + + return ans.styling_option.toLowerCase().replace(/ /g, "-"); +} + export async function promptBackendFramework() { const ans = await inquirer.prompt([ { diff --git a/templates/frontend/reactjs/base/tailwindConfig.js b/templates/frontend/reactjs/base/tailwindConfig.js new file mode 100644 index 0000000..fd7ce6a --- /dev/null +++ b/templates/frontend/reactjs/base/tailwindConfig.js @@ -0,0 +1,74 @@ +export const TailwindConfig = `/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], + } + + `; + +export const PostCssConfig = ` +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} + +`; + +export const TailwindIndexCSSFile = ` +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + background-color: rgb(0 0 0 0.9) +} + +`; + +export const AppTailwindTemplate = ` +import { useState } from "react" +import reactLogo from "./assets/react.svg" +import StartEaseLogo from "/startease.svg" + +function App() { + const [count, setCount] = useState(0) + + return ( +
+
+ + StartEase logo + + + React logo + +
+

StartEase + React + TailwindCSS

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the StartEase and React logos to learn more +

+
+ ) +} + +export default App + +`; diff --git a/templates/frontend/reactjs/base/tw-package-json.js b/templates/frontend/reactjs/base/tw-package-json.js new file mode 100644 index 0000000..ed785f9 --- /dev/null +++ b/templates/frontend/reactjs/base/tw-package-json.js @@ -0,0 +1,65 @@ +export const ReactJsJavaScriptTempWithTailwind = { + name: "startease-react-javascript-temp", + description: + "Startease template to get up and developing quickly with React and JavaScript", + private: true, + version: "0.0.0", + type: "module", + scripts: { + dev: "vite", + build: "vite build", + lint: "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + preview: "vite preview", + }, + dependencies: { + react: "^18.2.0", + "react-dom": "^18.2.0", + }, + devDependencies: { + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@vitejs/plugin-react": "^4.0.3", + eslint: "^8.45.0", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + vite: "^4.4.5", + postcss: "^8.4.31", + tailwindcss: "^3.3.3", + autoprefixer: "^10.4.16", + }, +}; + +export const ReactJsTypeScriptTempWithTailwind = { + name: "startease-react-typescript-temp", + description: + "Startease template to get up and developing quickly with React and TypeScript", + private: true, + version: "0.0.0", + type: "module", + scripts: { + dev: "vite", + build: "tsc && vite build", + lint: "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + preview: "vite preview", + }, + dependencies: { + react: "^18.2.0", + "react-dom": "^18.2.0", + }, + devDependencies: { + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@typescript-eslint/eslint-plugin": "^6.0.0", + "@typescript-eslint/parser": "^6.0.0", + "@vitejs/plugin-react": "^4.0.3", + eslint: "^8.45.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + typescript: "^5.0.2", + vite: "^4.4.5", + postcss: "^8.4.31", + tailwindcss: "^3.3.3", + autoprefixer: "^10.4.16", + }, +};