@shivasankaran18/stackd 2.0.2 → 13.0.0

package/apps/cli/src/generators/ui/shadcn.js

@@ -0,0 +1,228 @@
+import { writeFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { execSync } from 'child_process';
+import { existsSync } from 'fs';
+
+export async function setupShadcn(
+    config,
+    projectDir,
+    emitLog
+) {
+    try {
+        const frontendDir = join(projectDir, 'frontend');
+        emitLog('📦 Setting up shadcn/ui...');
+
+        // Make sure Tailwind is set up first
+        emitLog('Ensuring Tailwind CSS is set up...');
+
+        // 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'
+        });
+
+        // Create components.json configuration
+        const componentsConfig = {
+            $schema: "https://ui.shadcn.com/schema.json",
+            style: "default",
+            rsc: false,
+            tailwind: {
+                config: "tailwind.config.js",
+                css: "src/index.css",
+                baseColor: "slate",
+                cssVariables: true,
+            },
+            aliases: {
+                components: "@/components",
+                utils: "@/lib/utils"
+            }
+        };
+
+        await writeFile(
+            join(frontendDir, 'components.json'),
+            JSON.stringify(componentsConfig, null, 2)
+        );
+
+        // Create utils file
+        const utilsDir = join(frontendDir, 'src', 'lib');
+        if (!existsSync(utilsDir)) {
+            await mkdir(utilsDir, { recursive: true });
+        }
+
+        const utilsContent = `
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+
+        await writeFile(
+            join(utilsDir, 'utils.ts'),
+            utilsContent.trim() + '\n'
+        );
+
+        emitLog('✅ shadcn/ui setup completed successfully!');
+    } catch (error) {
+        emitLog(`❌ Error setting up shadcn/ui: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        throw error;
+    }
+}
+
+function generateShadcnTailwindConfig(frontend) {
+    const baseConfig = {
+        darkMode: ["class"],
+        content: frontend === 'django' 
+            ? ["./templates/**/*.html", "./static/**/*.{js,ts}"]
+            : ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
+        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')"],
+    };
+
+    return `/** @type {import('tailwindcss').Config} */
+export default ${JSON.stringify(baseConfig, null, 2)}`;
+}
+
+function generateShadcnStyles(frontend) {
+    return `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --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%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`;
+}

package/apps/cli/src/generators/ui/tailwindcss.js

@@ -0,0 +1,126 @@
+import { writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { execSync } from 'child_process';
+import { existsSync } from 'fs';
+import { mkdir } from 'fs/promises';
+
+export async function setupTailwindCSS(
+    config,
+    projectDir,
+    emitLog
+) {
+    try {
+        const frontendDir = join(projectDir, 'frontend');
+        const srcDir = join(frontendDir, 'src');
+        
+        // Ensure directories exist
+        if (!existsSync(frontendDir)) {
+            emitLog('Creating frontend directory...');
+            await mkdir(frontendDir, { recursive: true });
+        }
+
+        if (!existsSync(srcDir)) {
+            emitLog('Creating src directory...');
+            await mkdir(srcDir, { recursive: true });
+        }
+
+        // Initialize package.json if it doesn't exist
+        if (!existsSync(join(frontendDir, 'package.json'))) {
+            emitLog('Initializing package.json...');
+            execSync('npm init -y', {
+                cwd: frontendDir,
+                stdio: 'inherit'
+            });
+        }
+
+        // Install dependencies using npm directly
+        emitLog('Installing Tailwind CSS dependencies...');
+        execSync('npm install tailwindcss@latest postcss@latest autoprefixer@latest --save-dev', {
+            cwd: frontendDir,
+            stdio: 'inherit'
+        });
+
+        // Create tailwind.config.js manually instead of using npx
+        emitLog('Creating Tailwind configuration...');
+        const tailwindConfig = generateTailwindConfig(config.frontend);
+        await writeFile(
+            join(frontendDir, 'tailwind.config.js'),
+            tailwindConfig
+        );
+
+        // Create postcss.config.js
+        emitLog('Creating PostCSS configuration...');
+        const postcssConfig = `
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+        await writeFile(
+            join(frontendDir, 'postcss.config.js'),
+            postcssConfig
+        );
+
+        // Add Tailwind directives to CSS
+        emitLog('Creating CSS file with Tailwind directives...');
+        const tailwindDirectives = `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+        await writeFile(
+            join(srcDir, 'index.css'),
+            tailwindDirectives
+        );
+
+        emitLog('✅ Tailwind CSS setup completed successfully!');
+    } catch (error) {
+        emitLog(`❌ Error setting up Tailwind CSS: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        throw error;
+    }
+}
+
+function generateTailwindConfig(framework) {
+    const baseConfig = {
+        content: [
+            "./index.html",
+            "./src/**/*.{js,ts,jsx,tsx}",
+        ],
+        theme: {
+            extend: {
+                colors: {
+                    background: 'hsl(var(--background))',
+                    foreground: 'hsl(var(--foreground))',
+                },
+            },
+        },
+        plugins: [],
+    };
+
+    switch (framework) {
+        case 'react-ts':
+        case 'react':
+            baseConfig.content = [
+                "./index.html",
+                "./src/**/*.{js,ts,jsx,tsx}",
+            ];
+            break;
+        case 'vue-ts':
+        case 'vue':
+            baseConfig.content = [
+                "./index.html",
+                "./src/**/*.{vue,js,ts,jsx,tsx}",
+            ];
+            break;
+        case 'django':
+            baseConfig.content = [
+                "./templates/**/*.html",
+                "./static/**/*.{js,ts}",
+            ];
+            break;
+    }
+
+    return `/** @type {import('tailwindcss').Config} */
+module.exports = ${JSON.stringify(baseConfig, null, 2)}`;
+}

package/apps/cli/src/scripts/backend/expressts.ts

@@ -90,6 +90,6 @@ app.listen(port, () => {
         backendIndex.trim()
     )
     emitLog('Installing dependencies...');
-    await execSync("npm install",{cwd : projectDir + '/backend',stdio : "inherit"});
+    await execSync("npm install",{cwd : projectDir + '/backend',stdio : "inherit",shell: process.platform === "win32" ? "powershell.exe" : "/bin/sh",});
     emitLog('✅ ExpressTS project created successfully!');
 }

package/apps/cli/src/scripts/frontend/angularts.ts

@@ -9,14 +9,16 @@ export default async function createAngularTS(config: any, projectDir: any) {
         console.log('Installing Angular CLI...');
         await execSync(`npx @angular/cli@latest new frontend --skip-git --style=scss --routing=true --strict`, {
             cwd: projectDir,
-            stdio: 'inherit'
+            stdio: 'inherit',
+            shell: process.platform === "win32" ? "cmd.exe" : "/bin/sh",
         });
 
        
         console.log('Installing dependencies...');
         await execSync('npm install', {
             cwd: projectFullPath,
-            stdio: 'inherit'
+            stdio: 'inherit',
+            shell: process.platform === "win32" ? "cmd.exe" : "/bin/sh",
         });
 
         console.log('Angular project created successfully!');

package/apps/cli/src/scripts/frontend/reactjs.ts

@@ -6,10 +6,11 @@ export async function createReactJS(config: any, projectDir: string,emitLog: (lo
     emitLog('Creating ReactJS project...');
     await execSync(`npm create vite@latest frontend -- --template react`, {
         cwd: projectDir,
-        stdio: 'inherit'
+        stdio: 'inherit',
+        shell: process.platform === "win32" ? "cmd.exe" : "/bin/sh",
     })
     emitLog('Installing the dependencies for the frontend...');
-    await execSync("npm install",{cwd:projectDir + "/frontend",stdio:"inherit"});
+    await execSync("npm install",{cwd:projectDir + "/frontend",stdio:"inherit",shell: process.platform === "win32" ? "cmd.exe" : "/bin/sh",});
     emitLog('Writing Vite configuration...');
     const viteConfig = `
     import { defineConfig } from 'vite'

package/apps/cli/src/scripts/frontend/reactts.ts

@@ -6,10 +6,11 @@ export async function createReactTS(config: any, projectDir: string,emitLog: (lo
     emitLog('Creating ReactTS project...');
     await execSync(`npm create vite@latest frontend -- --template react-ts`, {
       cwd: projectDir,
-      stdio: 'inherit'
+      stdio: 'inherit', 
+      shell: process.platform === "win32" ? "powershell.exe" : "/bin/sh",
     });
     emitLog('Installing the dependencies...');
-    await execSync('npm install',{cwd : projectDir + '/frontend',stdio : 'inherit'});
+    await execSync('npm install',{cwd : projectDir + '/frontend',stdio : 'inherit',shell: process.platform === "win32" ? "powershell.exe" : "/bin/sh",});
     emitLog('Writing Vite configuration...');
     const viteConfig = `
     import { defineConfig } from 'vite'

package/apps/cli/src/scripts/orms/prismaSetup.ts

@@ -8,7 +8,7 @@ export async function setupPrisma(config: any, projectDir: string,emitLog: (log:
     const backendDir = join(projectDir, 'backend');
     const envContent = `DATABASE_URL=${config.dbUrl}\n`;
     writeFileSync(join(projectDir, 'backend', '.env'), envContent);
-    await execSync('npm install prisma', { cwd: backendDir });
-    await execSync('npx prisma init', { cwd: backendDir });
+    await execSync('npm install prisma', { cwd: backendDir,shell: process.platform === "win32" ? "powershell.exe" : "/bin/sh", });
+    await execSync('npx prisma init', { cwd: backendDir,shell: process.platform === "win32" ? "powershell.exe" : "/bin/sh", });
     emitLog('✅ Prisma setup complete');
 }

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

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

package/apps/web/app/api/scaffold/route.ts

@@ -55,9 +55,9 @@ export async function POST(req: NextRequest) {
             case 'react':
                 await createReactJS(config, projectDir,emitLog)
                 break
-            // case 'nextjs':
-            //     await createNextJS(config, projectDir, emitLog);
-            //     break;
+            case 'nextjs':
+                await createNextJS(config, projectDir, emitLog);
+                break;
             case 'django':
                 await installDjangoDependencies(projectDir);
                 break;
@@ -71,7 +71,7 @@ export async function POST(req: NextRequest) {
                 await createAngularTS(config, projectDir)
                 break
             default:
-                throw new Error(`Unsupported frontend`)
+                throw new Error(`Unsupported frontend: ${config.frontend}`)
         }
 
         switch(config.backend) {
@@ -89,7 +89,7 @@ export async function POST(req: NextRequest) {
             //     await createNextJS(config, projectDir, emitLog);
             //     break;
             default:
-                throw new Error(`Unsupported backend`)
+                throw new Error(`Unsupported backend: ${config.backend}`)
         }
 
         switch(config.auth) {
@@ -103,7 +103,7 @@ export async function POST(req: NextRequest) {
                     await setupPassport(config, projectDir,emitLog);
                 break
             default:
-                throw new Error(`Unsupported auth`) 
+                throw new Error(`Unsupported auth: ${config.authentication}`) 
         }
         switch(config.orm) {
             case 'drizzle':
@@ -116,7 +116,7 @@ export async function POST(req: NextRequest) {
                 await setupMongoose(config, projectDir,emitLog);
                 break
             default:
-                throw new Error(`Unsupported orm`)
+                throw new Error(`Unsupported orm: ${config.orm}`)
         }
         const gitignore = `
 # Dependencies

package/apps/web/app/scaffold/page.tsx

@@ -49,7 +49,7 @@ const Navbar = () => (
       </div>
       
       <a 
-        href="https://github.com/shivasankaran18/STACKD" 
+        href="https://github.com/ShyamSunder06/STACKD" 
         target="_blank" 
         rel="noopener noreferrer"
         className="absolute right-8 text-muted-foreground hover:text-foreground"

package/apps/web/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
+    "@repo/ui": "*",
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -37,7 +38,7 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
- 
+    "@repo/typescript-config": "*",
     "@types/d3": "^7.4.3",
     "@types/node": "^20.0.0",
     "@types/react": "19.0.8",