create-fsd-architecture 1.0.1 → 1.0.2

package/ashraf/src/shared/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/ashraf/src/shared/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/shared/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/ashraf/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/ashraf/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "strict": true,
+  "noUncheckedIndexedAccess": true,
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}

package/ashraf/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/ashraf/vite.config.ts

@@ -0,0 +1,14 @@
+import path from "path";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})

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: "Coming Soon",
+    repo: null,
+    available: false,
+  },
+];
 
-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.2",
   "description": "",
   "main": "index.js",
   "bin": {
@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "chalk": "^5.3.0",
+    "create-fsd-architecture": "^1.0.1",
     "degit": "^2.8.4",
+    "ora": "^9.4.0",
     "prompts": "^2.4.2"
   },
   "keywords": [],