create-ng-tailwind 1.0.0 → 2.0.1

package/lib/config/defaults.js

@@ -0,0 +1,7 @@
+module.exports = {
+  defaultTemplate: "starter",
+  defaultProjectName: "my-angular-app",
+  skipInstall: false,
+  angularVersion: "latest",
+  tailwindVersion: "^4.0.0",
+};

package/lib/managers/ProjectManager.js

@@ -0,0 +1,97 @@
+const fs = require("fs-extra");
+const path = require("path");
+const execa = require("execa");
+const TailwindManager = require("./TailwindManager");
+const TemplateManager = require("./TemplateManager");
+const { createAIConfigs } = require("../utils/ai-config");
+
+class ProjectManager {
+  constructor(config, logger) {
+    this.config = config;
+    this.logger = logger;
+    this.tailwindManager = new TailwindManager(config, logger);
+    this.templateManager = new TemplateManager(config, logger);
+  }
+
+  async create() {
+    // Check if directory exists
+    if (await fs.pathExists(this.config.fullPath)) {
+      const { overwrite } = await this.logger.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: `Directory ${this.config.projectName} already exists. Overwrite?`,
+          default: false,
+        },
+      ]);
+
+      if (!overwrite) {
+        this.logger.warn("Operation cancelled");
+        process.exit(0);
+      }
+
+      await fs.remove(this.config.fullPath);
+    }
+
+    // Create Angular project
+    await this.createAngularProject();
+
+    // Configure Tailwind CSS
+    await this.tailwindManager.configure();
+
+    // Apply template
+    await this.templateManager.apply();
+
+    // Create AI configuration files (CLAUDE.md + tool-specific)
+    await createAIConfigs(
+      this.config.fullPath,
+      this.config.projectName,
+      this.config.aiConfig,
+    );
+  }
+
+  async createAngularProject() {
+    const spinner = this.logger.spinner("Creating Angular project...");
+
+    try {
+      // Build ng new command with user's choices
+      const routing = this.config.routing !== false;
+      const ssr = this.config.ssr || false;
+      const zoneless = this.config.zoneless || false;
+      const aiConfig = this.config.aiConfig || ["none"];
+
+      let cmd = `npx @angular/cli@latest new ${this.config.projectName}`;
+      cmd += ` --routing=${routing}`;
+      cmd += ` --style=css`; // Always use CSS (Tailwind v4 official approach)
+      cmd += ` --ssr=${ssr}`;
+
+      if (zoneless) {
+        cmd += ` --zoneless`;
+      }
+
+      // Add AI config - Angular CLI supports multiple --ai-config flags
+      if (aiConfig.length > 0 && !aiConfig.includes("none")) {
+        // Add each AI tool as a separate --ai-config flag
+        aiConfig.forEach((tool) => {
+          if (tool !== "none") {
+            cmd += ` --ai-config=${tool}`;
+          }
+        });
+      }
+
+      cmd += ` --skip-git --package-manager=npm --interactive=false`;
+
+      await execa.command(cmd, {
+        cwd: process.cwd(),
+        stdio: "pipe",
+      });
+
+      spinner.succeed("Angular project created");
+    } catch (error) {
+      spinner.fail("Failed to create Angular project");
+      throw error;
+    }
+  }
+}
+
+module.exports = ProjectManager;

package/lib/managers/TailwindManager.js

@@ -0,0 +1,100 @@
+const fs = require("fs-extra");
+const path = require("path");
+const execa = require("execa");
+
+class TailwindManager {
+  constructor(config, logger) {
+    this.config = config;
+    this.logger = logger;
+  }
+
+  async configure() {
+    const chalk = require("chalk");
+    const spinner = this.logger.spinner("Configuring Tailwind CSS...");
+
+    try {
+      // Install Tailwind v4 with @tailwindcss/postcss
+      if (!this.config.skipInstall) {
+        spinner.update("Installing Tailwind CSS packages...");
+        await execa.command(
+          "npm install tailwindcss @tailwindcss/postcss postcss --force",
+          {
+            cwd: this.config.fullPath,
+            stdio: "pipe",
+          },
+        );
+        spinner.stop();
+        console.log(chalk.green("  ✔ Tailwind CSS v4 packages installed (tailwindcss, @tailwindcss/postcss, postcss)"));
+        spinner.start();
+      } else {
+        await this.addTailwindToPackageJson();
+        spinner.stop();
+        console.log(chalk.green("  ✔ Tailwind CSS packages added to package.json"));
+        spinner.start();
+      }
+
+      // Create PostCSS config (v4 approach)
+      spinner.update("Creating PostCSS configuration...");
+      await this.createPostCSSConfig();
+      spinner.stop();
+      console.log(chalk.green("  ✔ PostCSS configuration created (.postcssrc.json)"));
+      spinner.start();
+
+      // Update styles (v4 approach)
+      spinner.update("Setting up Tailwind CSS imports...");
+      await this.updateStyles();
+      spinner.stop();
+      console.log(chalk.green("  ✔ Tailwind CSS imported in styles.css"));
+
+      spinner.succeed("Tailwind CSS configured");
+    } catch (error) {
+      spinner.fail("Failed to configure Tailwind CSS");
+      throw error;
+    }
+  }
+
+  async addTailwindToPackageJson() {
+    const packageJsonPath = path.join(this.config.fullPath, "package.json");
+    const packageJson = await fs.readJson(packageJsonPath);
+
+    if (!packageJson.dependencies) {
+      packageJson.dependencies = {};
+    }
+
+    // Tailwind CSS v4 goes in dependencies, not devDependencies
+    packageJson.dependencies["tailwindcss"] = "^4.0.0";
+    packageJson.dependencies["@tailwindcss/postcss"] = "^4.0.0";
+    packageJson.dependencies["postcss"] = "^8.4.0";
+
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+  }
+
+  async createPostCSSConfig() {
+    // Tailwind CSS v4 uses PostCSS plugin approach
+    const postcssConfig = {
+      plugins: {
+        "@tailwindcss/postcss": {},
+      },
+    };
+
+    await fs.writeFile(
+      path.join(this.config.fullPath, ".postcssrc.json"),
+      JSON.stringify(postcssConfig, null, 2),
+    );
+  }
+
+  async updateStyles() {
+    // Tailwind CSS v4 uses CSS only (official approach)
+    const stylesPath = path.join(this.config.fullPath, "src/styles.css");
+
+    // Tailwind CSS v4 import syntax
+    const stylesContent = `@import "tailwindcss";
+
+/* Your custom styles here */
+`;
+
+    await fs.writeFile(stylesPath, stylesContent);
+  }
+}
+
+module.exports = TailwindManager;

package/lib/managers/TemplateManager.js

@@ -0,0 +1,39 @@
+const templates = require("../templates");
+
+class TemplateManager {
+  constructor(config, logger) {
+    this.config = config;
+    this.logger = logger;
+  }
+
+  async apply() {
+    const templateName = this.config.template || "minimal";
+    const template = templates[templateName];
+
+    if (!template) {
+      throw new Error(`Template '${templateName}' not found`);
+    }
+
+    // Start spinner - it will keep spinning throughout the process
+    const spinner = this.logger.spinner(`Applying ${templateName} template...`);
+
+    try {
+      // For starter template, show detailed progress with spinner updates
+      if (templateName === 'starter') {
+        // Pass spinner to template so it can update progress
+        await template.apply(this.config, spinner);
+      } else {
+        // For minimal template, just apply
+        await template.apply(this.config);
+      }
+
+      // Stop spinner with success message
+      spinner.succeed(`${templateName} template applied`);
+    } catch (error) {
+      spinner.fail(`Failed to apply ${templateName} template`);
+      throw error;
+    }
+  }
+}
+
+module.exports = TemplateManager;

package/lib/templates/index.js

@@ -0,0 +1,7 @@
+const minimal = require("./minimal");
+const starter = require("./starter");
+
+module.exports = {
+  minimal,
+  starter,
+};

package/lib/templates/minimal/index.js

@@ -0,0 +1,24 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+const minimal = {
+  info: {
+    name: "Minimal",
+    description:
+      "Clean Angular + Tailwind CSS starter with zero additional features",
+    features: [
+      "Latest Angular standalone architecture",
+      "Tailwind CSS v4 with PostCSS",
+      "Clean project structure",
+      "Ready to build your own way",
+    ],
+  },
+
+  async apply(config) {
+    // Minimal template keeps only the basic Angular + Tailwind setup
+    // No additional features, components, or services added
+    // (No console output needed - TemplateManager shows final checkmark)
+  },
+};
+
+module.exports = minimal;