create-fsd-architecture 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,84 @@
+# create-fsd-architecture
+
+Scaffold production-ready projects with [Feature-Sliced Design](https://feature-sliced.design/) architecture in seconds.
+
+## Features
+
+- **FSD Architecture** — Pre-configured layers: app, pages, widgets, features, entities, shared
+- **Interactive CLI** — Guided setup with project name, template selection, and dependency installation
+- **Multiple Templates** — Choose from available project templates (more coming soon)
+- **Zero Config** — Start coding immediately with sensible defaults
+- **TypeScript** — Full TypeScript support out of the box
+
+## Quick Start
+
+```bash
+npx create-fsd-architecture my-app
+```
+
+Or with a specific package manager:
+
+```bash
+npm create fsd-architecture my-app
+```
+
+## Usage
+
+### Interactive Mode
+
+```bash
+npx create-fsd-architecture
+```
+
+The CLI will guide you through:
+
+1. **Project name** — Name your project
+2. **Template selection** — Choose your framework
+3. **Install dependencies** — Optionally install packages
+4. **Start dev server** — Optionally launch the development server
+
+### With Arguments
+
+```bash
+npx create-fsd-architecture my-app
+```
+
+Pass the project name directly to skip the name prompt.
+
+## Available Templates
+
+| Template | Status |
+| --- | --- |
+| React + Vite | Available |
+| Next.js | Coming Soon |
+
+## Project Structure
+
+Projects are scaffolded with the FSD architecture:
+
+```
+src/
+├── app/          # App-level setup: providers, routing, styles
+├── pages/        # Full pages composed from widgets and features
+├── widgets/      # Large self-contained UI blocks
+├── features/     # User interactions and actions
+├── entities/     # Business entities and their representations
+└── shared/       # Reusable utilities, UI kit, configs
+```
+
+## Roadmap
+
+- [x] React + Vite template
+- [ ] Next.js template
+- [ ] Vue + Vite template
+- [ ] Custom template support
+- [ ] Git initialization option
+- [ ] Package manager detection (npm, yarn, pnpm, bun)
+
+## Requirements
+
+- Node.js 18 or later
+
+## License
+
+ISC

package/bin/index.mjs

@@ -3,58 +3,199 @@
 import degit from "degit";
 import prompts from "prompts";
 import chalk from "chalk";
+import ora from "ora";
 import fs from "fs";
 import path from "path";
-import { execSync } from "child_process";
+import { execSync, spawn } from "child_process";
 
-const repo = "https://github.com/ashrafmo-1/FSD";
+const TEMPLATES = [
+  {
+    title: "React + Vite",
+    value: "react-vite",
+    description: "React with Vite and FSD architecture",
+    repo: "ashrafmo-1/FSD",
+    available: true,
+  },
+  {
+    title: "Next.js",
+    value: "nextjs",
+    description: "Next.js — Full-stack React framework with SSR, SSG, and App Router.",
+    repo: "ashrafmo-1/FSD-NEXTJS",
+    available: true,
+  },
+];
 
-const argName = process.argv[2];
-
-const response = argName
-  ? { projectName: argName }
-  : await prompts({
-      type: "text",
-      name: "projectName",
-      message: "Project name?",
-      initial: "my-fsd-app"
-    });
+function showBanner() {
+  const line = chalk.cyan("─".repeat(39));
+  console.log();
+  console.log(`  ${chalk.cyan("╭")}${line}${chalk.cyan("╮")}`);
+  console.log(`  ${chalk.cyan("│")}${" ".repeat(39)}${chalk.cyan("│")}`);
+  console.log(`  ${chalk.cyan("│")}${" ".repeat(7)}${chalk.bold.white("create-fsd-architecture")}${" ".repeat(9)}${chalk.cyan("│")}`);
+  console.log(`  ${chalk.cyan("│")}${" ".repeat(3)}${chalk.dim("Feature-Sliced Design Scaffolding")}${" ".repeat(3)}${chalk.cyan("│")}`);
+  console.log(`  ${chalk.cyan("│")}${" ".repeat(39)}${chalk.cyan("│")}`);
+  console.log(`  ${chalk.cyan("╰")}${line}${chalk.cyan("╯")}`);
+  console.log();
+}
 
-const projectName = response.projectName;
+function showNextSteps(projectName, depsInstalled) {
+  console.log();
+  console.log(chalk.bold.white("  Next steps:"));
+  console.log();
+  console.log(`    ${chalk.cyan("$")} cd ${projectName}`);
+  if (!depsInstalled) {
+    console.log(`    ${chalk.cyan("$")} npm install`);
+  }
+  console.log(`    ${chalk.cyan("$")} npm run dev`);
+  console.log();
+}
 
-if (!projectName) {
-  console.log(chalk.red("Project name is required"));
-  process.exit(1);
+function handleCancel() {
+  console.log();
+  console.log(chalk.yellow("  Cancelled."));
+  console.log();
+  process.exit(0);
 }
 
-const targetDir = path.resolve(process.cwd(), projectName);
+const onCancel = { onCancel: handleCancel };
 
-if (fs.existsSync(targetDir)) {
-  console.log(chalk.red(`Folder "${projectName}" already exists`));
-  process.exit(1);
-}
+async function main() {
+  showBanner();
 
-console.log(chalk.cyan("Downloading FSD template..."));
+  const argName = process.argv[2];
 
-const emitter = degit(repo, {
-  cache: false,
-  force: true,
-  verbose: true
-});
+  const { projectName } = argName
+    ? { projectName: argName }
+    : await prompts(
+        {
+          type: "text",
+          name: "projectName",
+          message: "Project name",
+          initial: "my-fsd-app",
+        },
+        onCancel
+      );
 
-await emitter.clone(targetDir);
+  if (!projectName) {
+    console.log(chalk.red("  Project name is required."));
+    process.exit(1);
+  }
 
-console.log(chalk.green("Template downloaded successfully."));
+  const targetDir = path.resolve(process.cwd(), projectName);
 
-console.log(chalk.cyan("Installing dependencies..."));
+  if (fs.existsSync(targetDir)) {
+    console.log(chalk.red(`  Folder "${projectName}" already exists.`));
+    process.exit(1);
+  }
 
-execSync("npm install", {
-  cwd: targetDir,
-  stdio: "inherit"
-});
+  const { template } = await prompts(
+    {
+      type: "select",
+      name: "template",
+      message: "Select project type",
+      choices: TEMPLATES.map((t) => ({
+        title: t.available
+          ? t.title
+          : `${t.title} ${chalk.dim("(Coming Soon)")}`,
+        value: t.value,
+      })),
+    },
+    onCancel
+  );
+
+  const selected = TEMPLATES.find((t) => t.value === template);
+
+  if (!selected || !selected.available) {
+    console.log();
+    console.log(
+      chalk.yellow(`  ${selected ? selected.title : "Template"} support is coming soon!`)
+    );
+    console.log(chalk.dim("  Stay tuned for updates."));
+    console.log();
+    process.exit(0);
+  }
+
+  console.log();
+
+  const spinner = ora({
+    text: "Downloading template...",
+    color: "cyan",
+  }).start();
+
+  try {
+    const emitter = degit(selected.repo, { cache: false, force: true });
+    await emitter.clone(targetDir);
+    spinner.succeed(chalk.green("Template downloaded."));
+  } catch (err) {
+    spinner.fail(chalk.red("Failed to download template."));
+    console.error(chalk.dim(`  ${err.message}`));
+    process.exit(1);
+  }
 
-console.log(chalk.green("Project created successfully."));
-console.log(`
-cd ${projectName}
-npm run dev
-`);
+  const { installDeps } = await prompts(
+    {
+      type: "confirm",
+      name: "installDeps",
+      message: "Install dependencies now?",
+      initial: true,
+    },
+    onCancel
+  );
+
+  let depsInstalled = false;
+
+  if (installDeps) {
+    const installSpinner = ora({
+      text: "Installing dependencies...",
+      color: "cyan",
+    }).start();
+
+    try {
+      execSync("npm install", { cwd: targetDir, stdio: "pipe" });
+      installSpinner.succeed(chalk.green("Dependencies installed."));
+      depsInstalled = true;
+    } catch (err) {
+      installSpinner.fail(chalk.red("Failed to install dependencies."));
+      console.log(chalk.dim("  You can install them manually later."));
+    }
+  }
+
+  if (depsInstalled) {
+    const { startDev } = await prompts(
+      {
+        type: "confirm",
+        name: "startDev",
+        message: "Start development server now?",
+        initial: true,
+      },
+      onCancel
+    );
+
+    if (startDev) {
+      console.log();
+      console.log(chalk.cyan("  Starting development server..."));
+      console.log();
+
+      const child = spawn("npm", ["run", "dev"], {
+        cwd: targetDir,
+        stdio: "inherit",
+        shell: true,
+      });
+
+      child.on("error", (err) => {
+        console.log(chalk.red(`  Failed to start dev server: ${err.message}`));
+        showNextSteps(projectName, true);
+      });
+
+      return;
+    }
+  }
+
+  console.log();
+  console.log(chalk.green.bold("  Project created successfully!"));
+  showNextSteps(projectName, depsInstalled);
+}
+
+main().catch((err) => {
+  console.error(chalk.red(`  Error: ${err.message}`));
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fsd-architecture",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "index.js",
   "bin": {
@@ -12,11 +12,17 @@
   },
   "dependencies": {
     "chalk": "^5.3.0",
+    "create-fsd-architecture": "^1.0.1",
     "degit": "^2.8.4",
+    "ora": "^9.4.0",
     "prompts": "^2.4.2"
   },
+  "files": [
+    "bin",
+    "README.md"
+  ],
   "keywords": [],
   "author": "",
   "license": "ISC",
   "type": "commonjs"
-}
+}