feat(cli): A bit smarter cli

packages/cli/src/commands/init.ts

@@ -1,10 +1,6 @@
 import { existsSync, promises as fs } from "fs"
 import path from "path"
 import {
-  DEFAULT_COMPONENTS,
-  DEFAULT_TAILWIND_CONFIG,
-  DEFAULT_TAILWIND_CSS,
-  DEFAULT_UTILS,
   getConfig,
   rawConfigSchema,
   resolveConfigPaths,
@@ -27,6 +23,8 @@ import ora from "ora"
 import prompts from "prompts"
 import * as z from "zod"
 
+import { getInitialValues } from "../utils/get-initial-values"
+
 const PROJECT_DEPENDENCIES = [
   "tailwindcss-animate",
   "class-variance-authority",
@@ -84,6 +82,12 @@ export async function promptForConfig(
 
   const styles = await getRegistryStyles()
   const baseColors = await getRegistryBaseColors()
+  const {
+    DEFAULT_COMPONENTS,
+    DEFAULT_TAILWIND_CONFIG,
+    DEFAULT_UTILS,
+    DEFAULT_TAILWIND_CSS,
+  } = await getInitialValues()
 
   const options = await prompts([
     {

packages/cli/src/utils/get-config.ts

@@ -4,13 +4,6 @@ import { cosmiconfig } from "cosmiconfig"
 import { loadConfig } from "tsconfig-paths"
 import * as z from "zod"
 
-export const DEFAULT_STYLE = "default"
-export const DEFAULT_COMPONENTS = "@/components"
-export const DEFAULT_UTILS = "@/lib/utils"
-export const DEFAULT_TAILWIND_CSS = "app/globals.css"
-export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.js"
-export const DEFAULT_TAILWIND_BASE_COLOR = "slate"
-
 // TODO: Figure out if we want to support all cosmiconfig formats.
 // A simple components.json file would be nice.
 const explorer = cosmiconfig("components", {
@@ -61,7 +54,7 @@ export async function getConfig(cwd: string) {
 
 export async function resolveConfigPaths(cwd: string, config: RawConfig) {
   // Read tsconfig.json.
-  const tsConfig = await loadConfig(cwd)
+  const tsConfig = loadConfig(cwd)
 
   if (tsConfig.resultType === "failed") {
     throw new Error(

packages/cli/src/utils/get-initial-values.ts

@@ -0,0 +1,50 @@
+import path from "path"
+import fs from "fs-extra"
+
+import { getProjectInfo, resolveProjectDir } from "./get-project-info"
+
+export const getInitialValues = async () => {
+  const { srcDir, appDir, tsconfig, stylesDir } = await getProjectInfo()
+  const dir = resolveProjectDir(appDir, srcDir)
+  const cssDir = stylesDir ?? dir
+  const css = (await findCssFile(cssDir)) ?? "globals.css"
+  const paths = tsconfig?.compilerOptions?.paths
+  //find the alias for dir TODO://if there is no ts alias like @ we need to handle it better this is not ideal workaround
+  const alias = paths
+    ? Object.keys(paths)
+        .find((key) => paths[key].toString().includes(dir))
+        ?.split("/*")[0] ??
+      Object.keys(paths)[0].split("/")[0] ??
+      "@"
+    : dir
+  const twConfig = await findTwConfig("./")
+  return {
+    DEFAULT_TAILWIND_CSS: cssDir.length ? `${cssDir}/${css}` : css,
+    DEFAULT_COMPONENTS: alias.length ? `${alias}/components` : "components",
+    DEFAULT_UTILS: alias.length ? `${alias}/lib/utils` : "lib/utils",
+    DEFAULT_TAILWIND_BASE_COLOR: "slate",
+    DEFAULT_TAILWIND_CONFIG: twConfig,
+    DEFAULT_STYLE: "default",
+  }
+}
+
+//find common global css files
+const findCssFile = async (dir: string) => {
+  const files = await fs.readdir(dir || "./")
+  return files.find((file) => {
+    if (file.endsWith(".css")) {
+      return (
+        file.includes("index") ||
+        file.includes("global") ||
+        file.includes("style") ||
+        file.includes("tailwind") ||
+        file.includes("main")
+      )
+    }
+  })
+}
+
+const findTwConfig = async (dir: string) => {
+  const files = await fs.readdir(dir ?? "./")
+  return files.find((file) => file.includes("tailwind.config"))
+}

packages/cli/src/utils/get-project-info.ts

@@ -1,25 +1,28 @@
 import { existsSync } from "fs"
 import path from "path"
 import fs from "fs-extra"
+import { TsConfigJson } from "type-fest"
 
 export async function getProjectInfo() {
   const info = {
     tsconfig: null,
     srcDir: false,
     appDir: false,
+    stylesDir: null,
     srcComponentsUiDir: false,
     componentsUiDir: false,
   }
 
   try {
     const tsconfig = await getTsConfig()
-
+    const stylesDir = getStylesDir()
     return {
       tsconfig,
       srcDir: existsSync(path.resolve("./src")),
       appDir:
         existsSync(path.resolve("./app")) ||
         existsSync(path.resolve("./src/app")),
+      stylesDir,
       srcComponentsUiDir: existsSync(path.resolve("./src/components/ui")),
       componentsUiDir: existsSync(path.resolve("./components/ui")),
     }
@@ -36,9 +39,25 @@ export async function getTsConfig() {
     if (!tsconfig) {
       throw new Error("tsconfig.json is missing")
     }
-
-    return tsconfig
+    return tsconfig as TsConfigJson
   } catch (error) {
     return null
   }
 }
+
+export function getStylesDir() {
+  const stylesDir = existsSync(path.resolve("./styles"))
+    ? "./styles"
+    : existsSync(path.resolve("./src/styles"))
+    ? "./src/styles"
+    : existsSync(path.resolve("./src/app/styles"))
+    ? "./src/app/styles"
+    : existsSync(path.resolve("./app/styles"))
+    ? "./app/styles"
+    : null
+  return stylesDir
+}
+
+export function resolveProjectDir(appDir: boolean, srcDir: boolean) {
+  return appDir && srcDir ? "src/app" : appDir ? "app" : srcDir ? "src" : ""
+}