@shivasankaran18/stackd 1.2.2 → 1.2.4

package/apps/cli/src/cli.ts

@@ -15,6 +15,7 @@ export interface ProjectConfig {
   orm: string;
   auth: string;
   dbUrl: string;
+  ui: string;
 }
 
 interface Answers {
@@ -27,7 +28,8 @@ interface Answers {
   orm: string;
   auth: string;
   dbUrl: string;
-  projectName:string;
+  projectName: string;
+  ui: string;
 }
 
 const showBanner = () => {
@@ -67,7 +69,9 @@ const CHOICES = {
   MONGOOSE: 'Mongoose',
   JWT: 'JWT',
   NEXTAUTH: 'NextAuth',
-  PASSPORT: 'Passport'
+  PASSPORT: 'Passport',
+  TAILWIND: 'Tailwind CSS',
+  SHADCN: 'shadcn/ui + Tailwind'
 };
 
 program
@@ -124,6 +128,27 @@ program
       }
     ]);
 
+    // Add UI framework selection after frontend
+    let uiChoice = { ui: CHOICES.NONE };
+    if (frontendChoice.frontend !== chalk.green(CHOICES.DJANGO_TEMPLATES) && 
+        frontendChoice.frontend !== CHOICES.SKIP) {
+      uiChoice = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'ui',
+          message: chalk.magenta.bold('🎨 Choose a UI framework:'),
+          choices: (answers) => {
+            const isReact = frontendChoice.frontend.includes('React');
+            return [
+              chalk.blue(CHOICES.TAILWIND),
+              ...(isReact ? [chalk.cyan(CHOICES.SHADCN)] : []),
+              CHOICES.NONE
+            ];
+          },
+          default: CHOICES.NONE,
+        }
+      ]);
+    }
 
     const backendChoice = await inquirer.prompt([
       {
@@ -210,6 +235,7 @@ program
     const answers = {
       ...projectSettings,
       ...frontendChoice,
+      ...uiChoice,
       ...backendChoice,
       ...databaseChoice,
       ...ormChoice,

package/apps/cli/src/commands/create.ts

@@ -16,6 +16,8 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { mkdir } from 'fs/promises';
 import { ProjectConfig } from '../cli.js';
+import { setupShadcn } from '../scripts/ui/shadcn.js';
+import { setupTailwindCSS } from '../scripts/ui/tailwindcss.js';
 
 const emitLog = (message: string): void => {
   console.log(`[Emit Logs]: ${message}`);
@@ -64,6 +66,24 @@ export async function createProject(projectName: string, options: ProjectConfig)
         break;
     }
 
+    // UI Framework setup
+    if (options.ui !== 'None' && options.frontend !== 'Django Templates' && options.frontend !== 'Skip') {
+      spinner.text = 'Setting up UI framework...';
+      switch(options.ui) {
+        case 'Tailwind CSS':
+          await setupTailwindCSS(config, projectDir, emitLog);
+          break;
+        case 'shadcn/ui + Tailwind':
+          await setupTailwindCSS(config, projectDir, emitLog);
+          // @ts-ignore
+          await setupShadcn(config, projectDir, emitLog);
+          break;
+        default:
+          emitLog('Unknown UI framework choice');
+          break;
+      }
+    }
+
     // Backend setup
     spinner.text = 'Setting up backend...';
     switch(options.backend) {
@@ -143,6 +163,16 @@ export async function createProject(projectName: string, options: ProjectConfig)
       }
     }
 
+    // Add UI-specific instructions
+    if (options.ui !== 'None') {
+      console.log(chalk.yellow('\nUI Framework Setup:'));
+      if (options.ui === 'Tailwind CSS') {
+        console.log(chalk.cyan('  Tailwind CSS is ready to use'));
+      } else if (options.ui === 'shadcn/ui + Tailwind') {
+        console.log(chalk.cyan('  Run `npx shadcn-ui@latest init` to complete shadcn/ui setup'));
+      }
+    }
+
     // Add database specific instructions
     if (options.database !== 'Skip') {
       console.log(chalk.yellow('\nDatabase Setup:'));

package/apps/cli/src/scripts/ui/shadcn.ts

@@ -2,12 +2,9 @@ import { writeFile, mkdir } from 'fs/promises';
 import { join } from 'path';
 import { execSync } from 'child_process';
 import { existsSync } from 'fs';
+import { ProjectConfig } from '../../cli.js';
 
-export async function setupShadcn(
-    config: any,
-    projectDir: string,
-    emitLog: (log: string) => void
-) {
+export async function setupShadcn(config: ProjectConfig, projectDir: string, emitLog: (message: string) => void) {
     try {
         const frontendDir = join(projectDir, 'frontend');
         emitLog('📦 Setting up shadcn/ui...');
@@ -17,10 +14,7 @@ export async function setupShadcn(
 
         // Install shadcn/ui dependencies
         emitLog('Installing shadcn/ui dependencies...');
-        execSync('npm install @shadcn/ui class-variance-authority clsx tailwind-merge lucide-react', {
-            cwd: frontendDir,
-            stdio: 'inherit'
-        });
+        execSync('npm install @shadcn/ui', { cwd: projectDir });
 
         // Create components.json configuration
         const componentsConfig = {
@@ -66,7 +60,7 @@ export function cn(...inputs: ClassValue[]) {
 
         emitLog('✅ shadcn/ui setup completed successfully!');
     } catch (error) {
-        emitLog(`❌ Error setting up shadcn/ui: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        emitLog('Failed to setup shadcn/ui');
         throw error;
     }
 }

package/apps/cli/src/scripts/ui/tailwind.ts

@@ -0,0 +1,39 @@
+import { execSync } from 'child_process';
+import { writeFile } from 'fs/promises';
+import { join } from 'path';
+import { ProjectConfig } from '../../cli.js';
+
+export async function setupTailwind(config: ProjectConfig, projectDir: string, emitLog: (message: string) => void) {
+  try {
+    emitLog('Installing Tailwind CSS...');
+    execSync('npm install -D tailwindcss postcss autoprefixer', { cwd: projectDir });
+    execSync('npx tailwindcss init -p', { cwd: projectDir });
+
+    // Add Tailwind configuration
+    const tailwindConfig = `
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`;
+
+    await writeFile(join(projectDir, 'tailwind.config.js'), tailwindConfig);
+    
+    // Add Tailwind directives to CSS
+    const cssContent = `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;`;
+
+    await writeFile(join(projectDir, 'src/index.css'), cssContent);
+    
+    emitLog('Tailwind CSS setup completed');
+  } catch (error) {
+    emitLog('Failed to setup Tailwind CSS');
+    throw error;
+  }
+} 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivasankaran18/stackd",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "bin": {
     "stackd": "stackd.ts",
     "pre-install": "npm install"
@@ -52,6 +52,7 @@
     "@types/chalk": "^2.2.4",
     "@types/commander": "^2.12.5",
     "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
     "axios": "^1.7.9",
     "chalk": "^4.1.2",
     "class-variance-authority": "^0.7.1",