feat(shadcn-ui): init command

packages/cli/package.json

@@ -50,7 +50,6 @@
     "node-fetch": "^3.3.0",
     "ora": "^6.1.2",
     "prompts": "^2.4.2",
-    "react-day-picker": "^8.6.0",
     "zod": "^3.20.2"
   },
   "devDependencies": {

packages/cli/src/index.ts

@@ -11,13 +11,23 @@ import { getPackageInfo } from "./utils/get-package-info"
 import { getPackageManager } from "./utils/get-package-manager"
 import { getProjectInfo } from "./utils/get-project-info"
 import { logger } from "./utils/logger"
+import { STYLES, TAILWIND_CONFIG, UTILS } from "./utils/templates"
 
 process.on("SIGINT", () => process.exit(0))
 process.on("SIGTERM", () => process.exit(0))
 
+const PROJECT_DEPENDENCIES = [
+  "tailwindcss-animate",
+  "class-variance-authority",
+  "clsx",
+  "tailwind-merge",
+  "lucide-react",
+]
+
 async function main() {
   const packageInfo = await getPackageInfo()
   const projectInfo = await getProjectInfo()
+  const packageManager = getPackageManager()
 
   const program = new Command()
     .name("shadcn-ui")
@@ -28,6 +38,89 @@ async function main() {
       "display the version number"
     )
 
+  program
+    .command("init")
+    .description("Configure your Next.js project.")
+    .option("-y, --yes", "Skip confirmation prompt.")
+    .action(async (options) => {
+      logger.warn(
+        "Running the following command will overwrite existing files."
+      )
+      logger.warn(
+        "Make sure you have committed your changes before proceeding."
+      )
+      logger.warn("")
+      logger.warn(
+        "This command assumes a Next.js project with TypeScript and Tailwind CSS."
+      )
+      logger.warn(
+        "If you don't have these, follow the manual steps at https://ui.shadcn.com/docs/installation."
+      )
+      logger.warn("")
+
+      if (!options.yes) {
+        const { proceed } = await prompts({
+          type: "confirm",
+          name: "proceed",
+          message:
+            "Running this command will install dependencies and overwrite files. Proceed?",
+          initial: true,
+        })
+
+        if (!proceed) {
+          process.exit(0)
+        }
+      }
+
+      // Install dependencies.
+      const dependenciesSpinner = ora(`Installing dependencies...`).start()
+      await execa(packageManager, [
+        packageManager === "npm" ? "install" : "add",
+        ...PROJECT_DEPENDENCIES,
+      ])
+      dependenciesSpinner.succeed()
+
+      // Ensure styles directory exists.
+      if (!projectInfo?.appDir) {
+        const stylesDir = projectInfo?.srcDir ? "./src/styles" : "./styles"
+        if (!existsSync(path.resolve(stylesDir))) {
+          await fs.mkdir(path.resolve(stylesDir), { recursive: true })
+        }
+      }
+
+      // Update styles.css
+      let stylesDestination = projectInfo?.srcDir
+        ? "./src/styles/globals.css"
+        : "./styles/globals.css"
+      if (projectInfo?.appDir) {
+        stylesDestination = projectInfo?.srcDir
+          ? "./src/app/globals.css"
+          : "./app/globals.css"
+      }
+      const stylesSpinner = ora(`Adding styles with CSS variables...`).start()
+      await fs.writeFile(stylesDestination, STYLES, "utf8")
+      stylesSpinner.succeed()
+
+      // Ensure lib directory exists.
+      const libDir = projectInfo?.srcDir ? "./src/lib" : "./lib"
+      if (!existsSync(path.resolve(libDir))) {
+        await fs.mkdir(path.resolve(libDir), { recursive: true })
+      }
+
+      // Create lib/utils.ts
+      const utilsDestination = projectInfo?.srcDir
+        ? "./src/lib/utils.ts"
+        : "./lib/utils.ts"
+      const utilsSpinner = ora(`Adding utils...`).start()
+      await fs.writeFile(utilsDestination, UTILS, "utf8")
+      utilsSpinner.succeed()
+
+      const tailwindDestination = "./tailwind.config.js"
+      const tailwindSpinner = ora(`Updating tailwind.config.js...`).start()
+      await fs.writeFile(tailwindDestination, TAILWIND_CONFIG, "utf8")
+      tailwindSpinner.succeed()
+    })
+
   program
     .command("add")
     .description("add components to your project")
@@ -73,8 +166,6 @@ async function main() {
         spinner.succeed()
       }
 
-      const packageManager = getPackageManager()
-
       logger.success(
         `Installing ${selectedComponents.length} component(s) and dependencies...`
       )

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

@@ -1,7 +1,34 @@
+import { existsSync } from "fs"
 import path from "path"
 import fs from "fs-extra"
 
 export async function getProjectInfo() {
+  const info = {
+    tsconfig: null,
+    alias: null,
+    srcDir: false,
+    appDir: false,
+  }
+
+  try {
+    const tsconfig = await getTsConfig()
+    const paths = tsconfig?.compilerOptions?.paths
+    const alias = paths ? Object.keys(paths)[0].replace("*", "") : null
+
+    return {
+      tsconfig,
+      alias,
+      srcDir: existsSync(path.resolve("./src")),
+      appDir:
+        existsSync(path.resolve("./app")) ||
+        existsSync(path.resolve("./src/app")),
+    }
+  } catch (error) {
+    return info
+  }
+}
+
+export async function getTsConfig() {
   try {
     const tsconfigPath = path.join("tsconfig.json")
     const tsconfig = await fs.readJSON(tsconfigPath)
@@ -10,16 +37,7 @@ export async function getProjectInfo() {
       throw new Error("tsconfig.json is missing")
     }
 
-    const paths = tsconfig.compilerOptions?.paths
-    if (!paths) {
-      throw new Error("tsconfig.json is missing paths")
-    }
-
-    const alias = Object.keys(paths)[0].replace("*", "")
-
-    return {
-      alias,
-    }
+    return tsconfig
   } catch (error) {
     return null
   }

packages/cli/src/utils/templates.ts

@@ -0,0 +1,165 @@
+export const STYLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 215 20.2% 65.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+ 
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+ 
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+ 
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+ 
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 216 34% 17%;
+ 
+    --radius: 0.5rem;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}`
+
+export const UTILS = `import { ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`
+
+export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}`