Feat : Styling Options,

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();
 

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,
       });
 

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([
     {

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 (
+    <main className="max-w-[1280px] mx-auto my-0 p-8 text-center">
+      <div className="flex items-center justify-center">
+        <a href="https://github.com/JC-Coder/startease" target="_blank">
+          <img src={StartEaseLogo} className="h-24 p-6 [will-change:filter] [transition:filter] duration-300" alt="StartEase logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="h-24 p-6 [will-change:filter] [transition:filter] duration-300  react" alt="React logo" />
+        </a>
+      </div>
+      <h1>StartEase + React + TailwindCSS</h1>
+      <div className="p-8">
+        <button onClick={() => setCount((count) => count + 1)}
+        className="border border-gray-500 px-3 py-2 rounded-md "
+        >
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="text-[#888]">
+        Click on the StartEase and React logos to learn more
+      </p>
+    </main>
+  )
+}
+
+export default App
+
+`;

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",
+  },
+};