fix: next and react style

packages/codegen-cli/package.json

@@ -37,9 +37,9 @@
     "bugs": {
         "url": "https://github.com/Leo5661/codegen/issues"
     },
-    "homepage": "https://codegen-beta.vercel.app/docs/introduction",
+    "homepage": "https://codegen-beta.vercel.app",
     "scripts": {
-        "link-pkg": "pnpm unlink --global codegen-cli && pnpm link --global",
+        "link-pkg": "pnpm unlink --global @leocoder1/codegen-cli && pnpm link --global",
         "clean": "rimraf dist",
         "typecheck": "tsc --noEmit",
         "dev": "tsup --watch",
@@ -63,9 +63,9 @@
         "@codegen/typescript-config": "workspace:*",
         "@types/figlet": "^1.5.8",
         "@types/fs-extra": "^11.0.4",
-        "@types/node": "^20.11.24",
+        "@types/node": "^22.9.0",
         "rimraf": "^6.0.1",
-        "tsup": "^6.3.0",
+        "tsup": "^6.7.0",
         "typescript": "^5.6.2"
     }
 }

packages/codegen-cli/src/commands/init.ts

@@ -1,20 +1,16 @@
 import { Command } from "commander";
 import * as promt from "@clack/prompts";
-import { setTimeout } from "node:timers/promises";
 import pc from "picocolors";
-import { z } from "zod";
 import { Header } from "@/src/header";
 import { isValidPackageName } from "../utils/is-valid-package-name";
 import {
   databaseList,
   DatabaseType,
-  Framework,
   frameworkList,
   ormList,
   ORMType,
   styleList,
   StyleProps,
-  templates,
   typeOfFramework,
   variantList,
 } from "../utils/template";
@@ -57,13 +53,13 @@ export async function runInit() {
       framework: ({ results }) =>
         promt.select({
           message: `🛠️ Which framework do you want to use for ${pc.italic(pc.cyan(results.projectName))}?`,
-          initialValue: "Nextjs",
+          initialValue: "next",
           options: frameworkList(),
         }),
       variant: ({ results }) =>
         promt.select({
           message: `🔤 Choose variant for ${pc.italic(pc.cyan(results.projectName))}?`,
-          initialValue: "TS",
+          initialValue: "ts",
           options: variantList(results.framework as string),
         }),
       style: ({ results }) => {
@@ -73,7 +69,7 @@ export async function runInit() {
         ) {
           return promt.select({
             message: `🎨 What you want for style?`,
-            initialValue: "CSS",
+            initialValue: "tailwind",
             options: styleList(results.framework as string),
           });
         }

packages/codegen-cli/src/scripts/package-generator.ts

@@ -3,7 +3,6 @@ import fs from "fs-extra";
 import { PromtConfig } from "../commands/init";
 import { fileURLToPath } from "node:url";
 import { writeFiles } from "../utils/io-util";
-import { pkgFromUserAgent } from "../utils/get-package-info";
 import { logger } from "../utils/logger";
 import { setupStyle } from "./setup-style";
 import { setupDatabase } from "./setup-database";
@@ -29,7 +28,7 @@ export const generatePackage = async (results: PromtConfig) => {
   try {
     await fs.mkdirs(root);
   } catch (error) {
-    logger.error(error);
+    logger.d("Error creating directory", error);
   }
 
   const templateDir = path.resolve(
@@ -38,8 +37,6 @@ export const generatePackage = async (results: PromtConfig) => {
     `template-${framework}-${variant}`,
   );
 
-  console.log("template dir:- ", templateDir);
-
   const files = fs.readdirSync(templateDir);
 
   for (const file of files.filter((f) => f !== "package.json")) {
@@ -63,7 +60,7 @@ export const generatePackage = async (results: PromtConfig) => {
       content: JSON.stringify(packageJson, null, 2) + "\n",
     });
   } catch (error) {
-    logger.error(error);
+    logger.error("Error writing package.json", error);
   }
 
   if (style) {

packages/codegen-cli/src/scripts/setup-style.ts

@@ -6,12 +6,13 @@ import {
   setTailwindOnReact,
   setTailwindOnVue,
 } from "./setup-tailwind";
+import { logger } from "../utils/logger";
 
 const cwd = process.cwd();
 
 type FrameworkStyleMap = {
   [framework: string]: {
-    [style: string]: (rootDir: string, variant?: string) => Promise<void>;
+    [style: string]: (rootDir: string, variant: string) => Promise<void>;
   };
 };
 
@@ -49,6 +50,6 @@ export const setupStyle = async (
 
     await setStyle(rootDir, variant);
   } catch (error) {
-    console.log("error in setting style: ", error);
+    logger.error("error in setting style: ", error);
   }
 };

packages/codegen-cli/src/scripts/setup-tailwind.ts

@@ -4,93 +4,123 @@ import { execa } from "execa";
 import { prependLine, writeFiles } from "../utils/io-util";
 import * as styleTemplate from "../utils/style-template";
 
-export async function setTailwindOnNextjs(rootDir: string, variant?: string) {
-  let tailwindConfigTemplate: string;
-  let tailwindFileName: string;
-  let postcssFileName: string;
-  let postcssConfigTemplate: string;
-  if (variant === "js") {
-    tailwindConfigTemplate = styleTemplate.TAILWIND_CONFIG_NEXT_JS;
-    tailwindFileName = "tailwind.config.js";
-    postcssConfigTemplate = styleTemplate.POSTCSS_CONFIG_NEXT_JS;
-    postcssFileName = "postcss.config.js";
-  } else {
-    tailwindConfigTemplate = styleTemplate.TAILWIND_CONFIG_NEXT_TS;
-    tailwindFileName = "tailwind.config.ts";
-    postcssConfigTemplate = styleTemplate.POSTCSS_CONFIG_NEXT_MJS;
-    postcssFileName = "postcss.config.mjs";
+type FileDetails = {
+  path?: string;
+  fileName: string;
+  content: string;
+};
+
+type TailwindConfigTemplates = {
+  tailwindConfigTemplate: string;
+  tailwindFileName: string;
+  postcssConfigTemplate: string;
+  postcssFileName: string;
+};
+
+type Variants = "ts" | "js";
+
+const tailwindConfigMap: Record<Variants, TailwindConfigTemplates> = {
+  js: {
+    tailwindConfigTemplate: styleTemplate.TAILWIND_CONFIG_NEXT_JS,
+    tailwindFileName: "tailwind.config.js",
+    postcssConfigTemplate: styleTemplate.POSTCSS_CONFIG_NEXT_JS,
+    postcssFileName: "postcss.config.js",
+  },
+  ts: {
+    tailwindConfigTemplate: styleTemplate.TAILWIND_CONFIG_NEXT_TS,
+    tailwindFileName: "tailwind.config.ts",
+    postcssConfigTemplate: styleTemplate.POSTCSS_CONFIG_NEXT_MJS,
+    postcssFileName: "postcss.config.mjs",
+  },
+};
+
+const runFileOperationPipeLine = async (
+  root: string,
+  operations: FileDetails[],
+  fileToRemoves: string[],
+) => {
+  // run all file operations
+  for (const operation of operations) {
+    await writeFiles({
+      root: operation.path === undefined ? root : `${root}${operation.path}`,
+      fileName: operation.fileName,
+      content: operation.content,
+    });
   }
 
-  try {
-    await writeFiles({
-      root: rootDir,
+  for (const fileToRemove of fileToRemoves) {
+    await fs.remove(`${root}${fileToRemove}`);
+  }
+};
+
+export async function setTailwindOnNextjs(rootDir: string, variant: string) {
+  if (variant === "default") return;
+
+  const {
+    tailwindConfigTemplate,
+    tailwindFileName,
+    postcssConfigTemplate,
+    postcssFileName,
+  } = tailwindConfigMap[variant as Variants];
+
+  const fileOperations: FileDetails[] = [
+    {
       fileName: postcssFileName,
       content: postcssConfigTemplate,
-    });
-
-    await writeFiles({
-      root: rootDir,
+    },
+    {
       fileName: tailwindFileName,
       content: tailwindConfigTemplate,
-    });
-
-    await writeFiles({
-      root: `${rootDir}/app`,
+    },
+    {
+      path: "/app",
       fileName: "globals.css",
       content: styleTemplate.TAILWIND_GLOBAL_CSS,
-    });
+    },
+    {
+      path: "/app",
+      fileName: variant === "js" ? "page.jsx" : "page.tsx",
+      content: styleTemplate.NEXT_PAGE_TAILWIND_CONTENT,
+    },
+  ];
 
-    if (variant === "js") {
-      await writeFiles({
-        root: `${rootDir}/app`,
-        fileName: "page.js",
-        content: styleTemplate.NEXT_PAGE_TAILWIND_CONTENT,
-      });
-    } else {
-      await writeFiles({
-        root: `${rootDir}/app`,
-        fileName: "page.tsx",
-        content: styleTemplate.NEXT_PAGE_TAILWIND_CONTENT,
-      });
-    }
+  const fileToRemove = ["/app/page.module.css"];
 
-    await fs.remove(`${rootDir}/app/page.module.css`);
+  try {
+    runFileOperationPipeLine(rootDir, fileOperations, fileToRemove);
   } catch (error) {
     logger.error(error);
   }
 }
 
-export async function setTailwindOnReact(rootDir: string, variant?: string) {
-  try {
-    await execa("npx", ["tailwindcss", "init", "-p"]);
+export async function setTailwindOnReact(rootDir: string, variant: string) {
+  const { tailwindFileName, postcssConfigTemplate, postcssFileName } =
+    tailwindConfigMap[variant as Variants];
 
-    await writeFiles({
-      root: rootDir,
-      fileName: "tailwind.config.js",
+  const fileOperations: FileDetails[] = [
+    {
+      fileName: postcssFileName,
+      content: postcssConfigTemplate,
+    },
+    {
+      fileName: tailwindFileName,
       content: styleTemplate.TAILWIND_CONFIG_REACT,
-    });
-
-    await writeFiles({
-      root: `${rootDir}/src`,
+    },
+    {
+      path: "/src",
       fileName: "index.css",
       content: styleTemplate.TAILWIND_GLOBAL_CSS,
-    });
-
-    if (variant === "js") {
-      await writeFiles({
-        root: `${rootDir}/src`,
-        fileName: "App.jsx",
-        content: styleTemplate.REACT_APP_PAGE,
-      });
-    } else {
-      await writeFiles({
-        root: `${rootDir}/src`,
-        fileName: "App.tsx",
-        content: styleTemplate.REACT_APP_PAGE,
-      });
-    }
-
-    await fs.remove(`${rootDir}/src/App.css`);
+    },
+    {
+      path: "/src",
+      fileName: variant === "js" ? "App.jsx" : "App.tsx",
+      content: styleTemplate.REACT_APP_PAGE,
+    },
+  ];
+
+  const fileToRemove = ["/src/App.css"];
+  try {
+    runFileOperationPipeLine(rootDir, fileOperations, fileToRemove);
   } catch (error) {
     logger.error(error);
   }
@@ -99,15 +129,20 @@ export async function setTailwindOnReact(rootDir: string, variant?: string) {
 export async function setTailwindOnVue(rootDir: string, variant?: string) {
   try {
     if (variant === "ts") {
-      await execa("npx", ["tailwindcss", "init", "--ts", "-p"]);
-
-      await writeFiles({
-        root: rootDir,
-        fileName: "tailwind.config.ts",
-        content: styleTemplate.TAILWIND_CONFIG_VUE_TS,
+      logger.info("Setting up tailwind on vue with typescript in ", rootDir);
+      await execa("npx", ["tailwindcss", "init", "--ts", "-p"], {
+        cwd: rootDir,
       });
+
+      // await writeFiles({
+      //   root: rootDir,
+      //   fileName: "tailwind.config.ts",
+      //   content: styleTemplate.TAILWIND_CONFIG_VUE_TS,
+      // });
     } else {
-      await execa("npx", ["tailwindcss", "init", "-p"]);
+      await execa("npx", ["tailwindcss", "init", "-p"], {
+        cwd: rootDir,
+      });
 
       await writeFiles({
         root: rootDir,

packages/codegen-cli/src/utils/logger.ts

@@ -1,3 +1,4 @@
+import { debug } from "node:console";
 import pc from "picocolors";
 
 export const logger = {
@@ -16,4 +17,9 @@ export const logger = {
   lineBreak() {
     console.log("");
   },
+
+  d(...args: unknown[]) {
+    if (process.env.NODE_ENV === "production") return;
+    console.log(pc.bgMagenta("debug: "), ...args);
+  },
 };

packages/codegen-cli/src/utils/template.ts

@@ -82,7 +82,7 @@ export const templates: Framework[] = [
     type: "fullstack",
     variant: [
       {
-        name: "next-default",
+        name: "default",
         tag: "Default Next.js",
         color: cyan,
       },