From 69ab515a1c57d5fddfacf890d323c77ef5376af9 Mon Sep 17 00:00:00 2001 From: xeuxdev Date: Fri, 6 Oct 2023 19:41:08 +0100 Subject: [PATCH 1/2] Feat : Styling Options, Add support for initializing ReactJs Template with TailwindCSS --- cli.js | 5 +- src/utils/create-frontend-project.js | 74 ++++++++++++++++++- src/utils/prompts.js | 13 ++++ .../frontend/reactjs/base/tailwindConfig.js | 66 +++++++++++++++++ .../frontend/reactjs/base/tw-package-json.js | 65 ++++++++++++++++ 5 files changed, 219 insertions(+), 4 deletions(-) create mode 100644 templates/frontend/reactjs/base/tailwindConfig.js create mode 100644 templates/frontend/reactjs/base/tw-package-json.js diff --git a/cli.js b/cli.js index f9c002f..acac79e 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,9 @@ async function startProject() { if (projectStack === "frontend") { framework = await promptFrontendFramework() language = await promptFrontendLanguage() + stylingOption = await promptStylingOption() - await createFrontendProject(projectName, framework, language) + 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 5ce6277..1333efc 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 f220bd3..e8352e3 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..199ad0b --- /dev/null +++ b/templates/frontend/reactjs/base/tailwindConfig.js @@ -0,0 +1,66 @@ +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;` + +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..c083d12 --- /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", + }, +} From 52f6eb8f9ee2fcdda855fe8e25da6c92d1add2e0 Mon Sep 17 00:00:00 2001 From: xeuxdev Date: Sat, 14 Oct 2023 14:23:59 +0100 Subject: [PATCH 2/2] chore: update tailwind template to match requirements --- templates/frontend/reactjs/base/tailwindConfig.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/templates/frontend/reactjs/base/tailwindConfig.js b/templates/frontend/reactjs/base/tailwindConfig.js index 24e940d..fd7ce6a 100644 --- a/templates/frontend/reactjs/base/tailwindConfig.js +++ b/templates/frontend/reactjs/base/tailwindConfig.js @@ -25,7 +25,13 @@ export default { export const TailwindIndexCSSFile = ` @tailwind base; @tailwind components; -@tailwind utilities;`; +@tailwind utilities; + +:root { + background-color: rgb(0 0 0 0.9) +} + +`; export const AppTailwindTemplate = ` import { useState } from "react" @@ -37,7 +43,7 @@ function App() { return (
-
+
StartEase logo @@ -47,7 +53,9 @@ function App() {

StartEase + React + TailwindCSS

-