@beknurakhmed/webforge-cli 0.1.0

package/README.md

@@ -0,0 +1,212 @@
+# webforge-cli
+
+Interactive CLI to generate production-ready website project templates. Pick your template, framework, styling, state management, and coding paradigm — get a fully configured project in seconds.
+
+## Quick Start
+
+```bash
+npx webforge-cli
+```
+
+Or install globally:
+
+```bash
+npm install -g webforge-cli
+webforge-cli
+```
+
+You can also pass the project name directly:
+
+```bash
+npx webforge-cli my-app
+```
+
+## How It Works
+
+The CLI walks you through an interactive wizard:
+
+```
+1. Project name         →  my-awesome-app
+2. Template type        →  Landing Page / E-commerce / CRM / Dashboard / Blog / Portfolio
+3. Framework            →  React / Vue / Angular / Vanilla / Next.js / Nuxt
+4. Coding paradigm      →  Functional / SOLID OOP
+5. Styling solution     →  Tailwind CSS / SCSS / CSS Modules / Material UI / ...
+6. State management     →  Redux / Zustand / MobX / Pinia / NgRx / RxJS / None
+7. Extra tools          →  TypeScript / ESLint / Prettier
+```
+
+After you answer, webforge generates a ready-to-run project:
+
+```bash
+cd my-awesome-app
+npm install
+npm run dev
+```
+
+## Template Types
+
+| Template | Description |
+|----------|-------------|
+| **Landing Page** | Marketing page with hero, features, CTA, footer |
+| **E-commerce** | Product grid, shopping cart, product cards |
+| **CRM** | Contacts table, stats cards, filters, sidebar |
+| **Dashboard** | KPI cards, charts, data tables, sidebar navigation |
+| **Blog** | Post list, categories sidebar, newsletter signup |
+| **Portfolio** | Hero intro, project grid, skills, contact form |
+
+## Frameworks
+
+| Framework | Build Tool | Version |
+|-----------|-----------|---------|
+| **React** | Vite | React 19 |
+| **Vue** | Vite | Vue 3.5 |
+| **Angular** | Angular CLI | Angular 19 |
+| **Vanilla** | Vite | Plain TS/JS |
+| **Next.js** | Next.js | v15 |
+| **Nuxt** | Nuxt | v3 |
+
+## Styling Options
+
+| Styling | Works with |
+|---------|-----------|
+| **Tailwind CSS** | React, Vue, Angular, Vanilla, Next.js, Nuxt |
+| **SCSS** | React, Vue, Angular, Vanilla, Next.js, Nuxt |
+| **CSS Modules** | React, Vue, Vanilla, Next.js, Nuxt |
+| **Styled Components** | React, Next.js |
+| **Material UI** | React, Next.js |
+| **Chakra UI** | React, Next.js |
+| **Ant Design** | React, Vue, Next.js |
+| **Angular Material** | Angular |
+
+## State Management
+
+| Library | Works with |
+|---------|-----------|
+| **Redux Toolkit** | React, Next.js |
+| **Zustand** | React, Next.js |
+| **MobX** | React, Next.js |
+| **Pinia** | Vue, Nuxt |
+| **RxJS** | Angular |
+| **NgRx** | Angular |
+
+## Coding Paradigm
+
+Choose between two coding styles for your generated project:
+
+- **Functional** — React hooks, Vue composables, Angular signals, pure functions
+- **SOLID OOP** — Class components, services, dependency injection, OOP patterns
+
+## Examples
+
+### React + Landing Page + Tailwind
+
+```bash
+npx webforge-cli
+# → my-landing
+# → Landing Page
+# → React
+# → Functional
+# → Tailwind CSS
+# → None
+# → TypeScript, ESLint, Prettier
+```
+
+### Vue + E-commerce + SCSS + Pinia
+
+```bash
+npx webforge-cli
+# → my-store
+# → E-commerce
+# → Vue
+# → Functional
+# → SCSS
+# → Pinia
+# → TypeScript
+```
+
+### Angular + Dashboard + Angular Material + NgRx
+
+```bash
+npx webforge-cli
+# → admin-panel
+# → Dashboard
+# → Angular
+# → SOLID OOP
+# → Angular Material
+# → NgRx
+# → TypeScript, ESLint
+```
+
+## Project Structure (Generated)
+
+Example for React + Landing Page:
+
+```
+my-landing/
+├── public/
+│   └── vite.svg
+├── src/
+│   ├── components/
+│   │   ├── Hero.tsx
+│   │   ├── Features.tsx
+│   │   ├── CTA.tsx
+│   │   └── Footer.tsx
+│   ├── App.tsx
+│   ├── App.css
+│   ├── main.tsx
+│   └── index.css
+├── index.html
+├── package.json
+├── vite.config.ts
+├── tailwind.config.js      (if Tailwind selected)
+├── eslint.config.js        (if ESLint selected)
+├── .prettierrc             (if Prettier selected)
+├── .gitignore
+└── README.md
+```
+
+## Architecture
+
+webforge-cli uses a **layered overlay system** to generate projects:
+
+```
+Layer 1: Framework base       (React/Vue/Angular/Vanilla/Next.js/Nuxt)
+Layer 2: Template overlay     (Landing/E-commerce/CRM/Dashboard/Blog/Portfolio)
+Layer 3: Paradigm variant     (Functional/OOP)
+Layer 4: Styling config       (Tailwind/SCSS/Material UI/...)
+Layer 5: State management     (Redux/Zustand/Pinia/...)
+Layer 6: Extras               (ESLint/Prettier)
+```
+
+Each layer copies files on top of the previous one. Dependencies are merged into `package.json` automatically.
+
+## Requirements
+
+- Node.js >= 18.0.0
+
+## Development
+
+```bash
+git clone https://github.com/beknurakhmed/webforge-cli.git
+cd webforge-cli
+npm install
+npm run build
+node dist/index.js
+```
+
+### Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run build` | Build CLI with tsup |
+| `npm run dev` | Watch mode build |
+| `npm run start` | Run the CLI |
+| `npm run typecheck` | TypeScript type checking |
+
+## Contributing
+
+Contributions are welcome! Feel free to open issues or submit pull requests at [github.com/beknurakhmed/webforge-cli](https://github.com/beknurakhmed/webforge-cli).
+
+## License
+
+MIT - [Beknur](https://github.com/beknurakhmed)

package/dist/index.js

@@ -0,0 +1,386 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import path2 from "path";
+import fs3 from "fs";
+
+// src/constants.ts
+var TEMPLATE_OPTIONS = [
+  { value: "landing", label: "Landing Page", hint: "Marketing / product landing page" },
+  { value: "ecommerce", label: "E-commerce", hint: "Online store with product listings" },
+  { value: "crm", label: "CRM", hint: "Customer relationship management" },
+  { value: "dashboard", label: "Dashboard", hint: "Admin dashboard with charts & tables" },
+  { value: "blog", label: "Blog", hint: "Content-focused blog layout" },
+  { value: "portfolio", label: "Portfolio", hint: "Personal / professional portfolio" }
+];
+var FRAMEWORK_OPTIONS = [
+  { value: "react", label: "React", hint: "Vite + React 19" },
+  { value: "vue", label: "Vue", hint: "Vite + Vue 3" },
+  { value: "angular", label: "Angular", hint: "Angular 19" },
+  { value: "vanilla", label: "Vanilla", hint: "Vite + plain TS/JS" },
+  { value: "nextjs", label: "Next.js", hint: "Next.js 15 (React)" },
+  { value: "nuxt", label: "Nuxt", hint: "Nuxt 3 (Vue)" }
+];
+var PARADIGM_OPTIONS = [
+  { value: "functional", label: "Functional", hint: "Hooks, composables, pure functions" },
+  { value: "oop", label: "SOLID OOP", hint: "Classes, services, dependency injection" }
+];
+var STYLING_OPTIONS = [
+  { value: "tailwind", label: "Tailwind CSS", hint: "Utility-first CSS framework" },
+  { value: "scss", label: "SCSS", hint: "Sass preprocessor" },
+  { value: "css-modules", label: "CSS Modules", hint: "Scoped CSS files" },
+  { value: "styled-components", label: "Styled Components", hint: "CSS-in-JS" },
+  { value: "material-ui", label: "Material UI", hint: "MUI component library" },
+  { value: "chakra-ui", label: "Chakra UI", hint: "Accessible component library" },
+  { value: "ant-design", label: "Ant Design", hint: "Enterprise UI components" },
+  { value: "angular-material", label: "Angular Material", hint: "Material Design for Angular" }
+];
+var STATE_OPTIONS = [
+  { value: "none", label: "None", hint: "No state management library" },
+  { value: "redux", label: "Redux Toolkit", hint: "Predictable state container" },
+  { value: "zustand", label: "Zustand", hint: "Lightweight state management" },
+  { value: "mobx", label: "MobX", hint: "Reactive state management" },
+  { value: "pinia", label: "Pinia", hint: "Vue store library" },
+  { value: "rxjs", label: "RxJS", hint: "Reactive extensions" },
+  { value: "ngrx", label: "NgRx", hint: "Redux-inspired Angular state" }
+];
+var EXTRAS_OPTIONS = [
+  { value: "typescript", label: "TypeScript", hint: "Type-safe JavaScript" },
+  { value: "eslint", label: "ESLint", hint: "Code linting" },
+  { value: "prettier", label: "Prettier", hint: "Code formatting" }
+];
+var STYLING_COMPATIBILITY = {
+  "tailwind": ["react", "vue", "angular", "vanilla", "nextjs", "nuxt"],
+  "scss": ["react", "vue", "angular", "vanilla", "nextjs", "nuxt"],
+  "css-modules": ["react", "vue", "vanilla", "nextjs", "nuxt"],
+  "styled-components": ["react", "nextjs"],
+  "material-ui": ["react", "nextjs"],
+  "chakra-ui": ["react", "nextjs"],
+  "ant-design": ["react", "vue", "nextjs"],
+  "angular-material": ["angular"]
+};
+var STATE_COMPATIBILITY = {
+  "none": ["react", "vue", "angular", "vanilla", "nextjs", "nuxt"],
+  "redux": ["react", "nextjs"],
+  "zustand": ["react", "nextjs"],
+  "mobx": ["react", "nextjs"],
+  "pinia": ["vue", "nuxt"],
+  "rxjs": ["angular"],
+  "ngrx": ["angular"]
+};
+
+// src/generator.ts
+import path from "path";
+import { fileURLToPath } from "url";
+import fs2 from "fs-extra";
+
+// src/utils.ts
+import fs from "fs";
+function validateProjectName(name) {
+  if (!name) return "Project name is required";
+  if (!/^[a-zA-Z0-9@][a-zA-Z0-9._\-/]*$/.test(name)) {
+    return "Invalid name. Use letters, numbers, hyphens, dots.";
+  }
+  if (name.length > 128) return "Name too long (max 128 chars)";
+  return void 0;
+}
+function isDirectoryEmpty(dirPath) {
+  if (!fs.existsSync(dirPath)) return true;
+  const files = fs.readdirSync(dirPath);
+  return files.length === 0 || files.length === 1 && files[0] === ".git";
+}
+var TEXT_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".ts",
+  ".tsx",
+  ".js",
+  ".jsx",
+  ".json",
+  ".html",
+  ".css",
+  ".scss",
+  ".vue",
+  ".md",
+  ".yaml",
+  ".yml",
+  ".toml",
+  ".svg",
+  ".mjs",
+  ".cjs",
+  ".env",
+  ".prettierrc",
+  ".eslintrc"
+]);
+function isTextFile(filename) {
+  const ext = filename.slice(filename.lastIndexOf("."));
+  return TEXT_EXTENSIONS.has(ext) || filename.startsWith(".");
+}
+
+// src/generator.ts
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var TEMPLATES_DIR = path.resolve(__dirname, "..", "templates");
+async function generateProject(config) {
+  const { targetDir, framework, templateType, paradigm, styling, stateManagement, extras, projectName } = config;
+  await fs2.ensureDir(targetDir);
+  const frameworkDir = path.join(TEMPLATES_DIR, framework);
+  if (await fs2.pathExists(frameworkDir)) {
+    await copyTemplateDir(frameworkDir, targetDir, { projectName });
+  }
+  const overlayDir = path.join(TEMPLATES_DIR, "overlays", templateType, framework);
+  if (await fs2.pathExists(overlayDir)) {
+    await copyTemplateDir(overlayDir, targetDir, { projectName });
+  }
+  const paradigmDir = path.join(TEMPLATES_DIR, "paradigms", paradigm, framework);
+  if (await fs2.pathExists(paradigmDir)) {
+    await copyTemplateDir(paradigmDir, targetDir, { projectName });
+  }
+  if (styling) {
+    await applyOverlayWithDeps(
+      path.join(TEMPLATES_DIR, "styling", styling),
+      targetDir,
+      config
+    );
+  }
+  if (stateManagement && stateManagement !== "none") {
+    await applyOverlayWithDeps(
+      path.join(TEMPLATES_DIR, "state", stateManagement),
+      targetDir,
+      config
+    );
+  }
+  for (const extra of extras) {
+    await applyOverlayWithDeps(
+      path.join(TEMPLATES_DIR, "extras", extra),
+      targetDir,
+      config
+    );
+  }
+  const baseDir = path.join(TEMPLATES_DIR, "base");
+  if (await fs2.pathExists(baseDir)) {
+    await copyTemplateDir(baseDir, targetDir, { projectName });
+  }
+  await finalizePackageJson(targetDir, config);
+}
+async function applyOverlayWithDeps(overlayDir, targetDir, config) {
+  if (!await fs2.pathExists(overlayDir)) return;
+  const depsFile = path.join(overlayDir, "deps.json");
+  if (await fs2.pathExists(depsFile)) {
+    const deps = await fs2.readJson(depsFile);
+    await mergeDependencies(targetDir, deps);
+  }
+  const configDir = path.join(overlayDir, "config");
+  if (await fs2.pathExists(configDir)) {
+    await copyTemplateDir(configDir, targetDir, { projectName: config.projectName });
+  }
+  const fwDir = path.join(overlayDir, config.framework);
+  if (await fs2.pathExists(fwDir)) {
+    await copyTemplateDir(fwDir, targetDir, { projectName: config.projectName });
+  }
+}
+async function copyTemplateDir(srcDir, destDir, vars) {
+  const entries = await fs2.readdir(srcDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name);
+    let destName = entry.name;
+    if (destName.startsWith("_")) {
+      destName = "." + destName.slice(1);
+    }
+    const destPath = path.join(destDir, destName);
+    if (entry.isDirectory()) {
+      await fs2.ensureDir(destPath);
+      await copyTemplateDir(srcPath, destPath, vars);
+    } else {
+      await fs2.ensureDir(path.dirname(destPath));
+      if (isTextFile(entry.name)) {
+        let content = await fs2.readFile(srcPath, "utf-8");
+        for (const [key, value] of Object.entries(vars)) {
+          content = content.replaceAll(`{{${key}}}`, value);
+        }
+        await fs2.writeFile(destPath, content, "utf-8");
+      } else {
+        await fs2.copy(srcPath, destPath);
+      }
+    }
+  }
+}
+async function mergeDependencies(targetDir, newDeps) {
+  const pkgPath = path.join(targetDir, "package.json");
+  if (!await fs2.pathExists(pkgPath)) return;
+  const pkg = await fs2.readJson(pkgPath);
+  if (newDeps.dependencies) {
+    pkg.dependencies = { ...pkg.dependencies || {}, ...newDeps.dependencies };
+  }
+  if (newDeps.devDependencies) {
+    pkg.devDependencies = { ...pkg.devDependencies || {}, ...newDeps.devDependencies };
+  }
+  await fs2.writeJson(pkgPath, pkg, { spaces: 2 });
+}
+async function finalizePackageJson(targetDir, config) {
+  const pkgPath = path.join(targetDir, "package.json");
+  if (!await fs2.pathExists(pkgPath)) return;
+  const pkg = await fs2.readJson(pkgPath);
+  pkg.name = config.projectName;
+  if (pkg.dependencies) {
+    pkg.dependencies = sortObject(pkg.dependencies);
+  }
+  if (pkg.devDependencies) {
+    pkg.devDependencies = sortObject(pkg.devDependencies);
+  }
+  await fs2.writeJson(pkgPath, pkg, { spaces: 2 });
+}
+function sortObject(obj) {
+  return Object.fromEntries(
+    Object.entries(obj).sort(([a], [b]) => a.localeCompare(b))
+  );
+}
+
+// src/cli.ts
+async function runCli() {
+  console.log("");
+  p.intro(pc.bgCyan(pc.black(" webforge-cli ")) + pc.dim(" \u2014 project template generator"));
+  const argProjectName = process.argv[2];
+  const config = await p.group(
+    {
+      projectName: () => p.text({
+        message: "Project name:",
+        placeholder: "my-awesome-project",
+        initialValue: argProjectName,
+        validate: (value) => validateProjectName(value ?? "")
+      }),
+      templateType: () => p.select({
+        message: "Select a template type:",
+        options: TEMPLATE_OPTIONS.map((t) => ({
+          value: t.value,
+          label: t.label,
+          hint: t.hint
+        }))
+      }),
+      framework: () => p.select({
+        message: "Select a framework:",
+        options: FRAMEWORK_OPTIONS.map((f) => ({
+          value: f.value,
+          label: f.label,
+          hint: f.hint
+        }))
+      }),
+      paradigm: () => p.select({
+        message: "Select a coding paradigm:",
+        options: PARADIGM_OPTIONS.map((p2) => ({
+          value: p2.value,
+          label: p2.label,
+          hint: p2.hint
+        }))
+      }),
+      styling: ({ results }) => {
+        const fw = results.framework;
+        const compatible = STYLING_OPTIONS.filter(
+          (s) => STYLING_COMPATIBILITY[s.value]?.includes(fw)
+        );
+        return p.select({
+          message: "Select a styling solution:",
+          options: compatible.map((s) => ({
+            value: s.value,
+            label: s.label,
+            hint: s.hint
+          }))
+        });
+      },
+      stateManagement: ({ results }) => {
+        const fw = results.framework;
+        const compatible = STATE_OPTIONS.filter(
+          (s) => STATE_COMPATIBILITY[s.value]?.includes(fw)
+        );
+        return p.select({
+          message: "Select state management:",
+          options: compatible.map((s) => ({
+            value: s.value,
+            label: s.label,
+            hint: s.hint
+          }))
+        });
+      },
+      extras: () => p.multiselect({
+        message: "Select additional tools:",
+        options: EXTRAS_OPTIONS.map((e) => ({
+          value: e.value,
+          label: e.label,
+          hint: e.hint
+        })),
+        required: false
+      })
+    },
+    {
+      onCancel: () => {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+      }
+    }
+  );
+  const targetDir = path2.resolve(process.cwd(), config.projectName);
+  if (!isDirectoryEmpty(targetDir)) {
+    const shouldOverwrite = await p.confirm({
+      message: `Directory "${config.projectName}" is not empty. Overwrite?`,
+      initialValue: false
+    });
+    if (p.isCancel(shouldOverwrite) || !shouldOverwrite) {
+      p.cancel("Operation cancelled.");
+      process.exit(0);
+    }
+    fs3.rmSync(targetDir, { recursive: true, force: true });
+  }
+  const projectConfig = {
+    projectName: config.projectName,
+    templateType: config.templateType,
+    framework: config.framework,
+    paradigm: config.paradigm,
+    styling: config.styling,
+    stateManagement: config.stateManagement,
+    extras: config.extras,
+    targetDir
+  };
+  p.log.info(
+    `${pc.bold("Configuration:")}
+  Template:    ${pc.cyan(config.templateType)}
+  Framework:   ${pc.cyan(config.framework)}
+  Paradigm:    ${pc.cyan(config.paradigm)}
+  Styling:     ${pc.cyan(String(config.styling))}
+  State:       ${pc.cyan(String(config.stateManagement))}
+  Extras:      ${pc.cyan(config.extras.join(", ") || "none")}`
+  );
+  const spinner2 = p.spinner();
+  spinner2.start("Generating project...");
+  try {
+    await generateProject(projectConfig);
+    spinner2.stop("Project generated successfully!");
+  } catch (err) {
+    spinner2.stop("Generation failed.");
+    p.log.error(String(err));
+    process.exit(1);
+  }
+  const pkgManager = detectPackageManager();
+  p.note(
+    [
+      `cd ${config.projectName}`,
+      `${pkgManager} install`,
+      `${pkgManager === "npm" ? "npm run" : pkgManager} dev`
+    ].join("\n"),
+    "Next steps"
+  );
+  p.outro(pc.green("Happy coding!"));
+}
+function detectPackageManager() {
+  const ua = process.env.npm_config_user_agent;
+  if (!ua) return "npm";
+  if (ua.startsWith("pnpm")) return "pnpm";
+  if (ua.startsWith("yarn")) return "yarn";
+  if (ua.startsWith("bun")) return "bun";
+  return "npm";
+}
+
+// src/index.ts
+runCli().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@beknurakhmed/webforge-cli",
+  "version": "0.1.0",
+  "description": "Interactive CLI to generate website project templates — landing pages, e-commerce, CRM, dashboards, blogs, portfolios with React, Vue, Angular, Next.js, Nuxt and more",
+  "type": "module",
+  "bin": {
+    "webforge-cli": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "cli",
+    "scaffold",
+    "template",
+    "generator",
+    "react",
+    "vue",
+    "angular",
+    "nextjs",
+    "nuxt",
+    "vite",
+    "tailwind",
+    "landing-page",
+    "ecommerce",
+    "dashboard",
+    "crm",
+    "blog",
+    "portfolio"
+  ],
+  "author": "Beknur <https://github.com/beknurakhmed>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/beknurakhmed/webforge-cli.git"
+  },
+  "homepage": "https://github.com/beknurakhmed/webforge-cli#readme",
+  "bugs": {
+    "url": "https://github.com/beknurakhmed/webforge-cli/issues"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.0.1",
+    "fs-extra": "^11.3.3",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/angular/angular.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "app": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "assets": ["{ \"glob\": \"**/*\", \"input\": \"public\" }"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "development": {
+              "buildTarget": "app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}