sparesdev 0.0.6 → 0.0.8

package/core/init.js

@@ -1,6 +1,170 @@
 import fs from "fs";
 import { execSync } from "child_process";
 
+function getMissingDependencies() {
+  const required = [
+    "react",
+    "react-dom",
+    "react-router-dom",
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ];
+
+  try {
+    const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
+
+    const installed = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies
+    };
+
+    return required.filter(dep => !installed?.[dep]);
+  } catch {
+    return required;
+  }
+}
+
+function patchViteConfig() {
+  const viteConfigPath = "vite.config.ts";
+
+  if (!fs.existsSync(viteConfigPath)) {
+    console.log("⚠️ vite.config.ts not found, skipping patch");
+    return;
+  }
+
+  let content = fs.readFileSync(viteConfigPath, "utf-8");
+
+  if (!content.includes("@tailwindcss/vite")) {
+    content = content.replace(
+      /import react from ['"]@vitejs\/plugin-react['"]/,
+      `import react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'`
+    );
+  }
+
+  if (!content.includes("tailwindcss()")) {
+    content = content.replace(
+      /plugins:\s*\[([^\]]*)\]/,
+      "plugins: [$1, tailwindcss()]"
+    );
+  }
+
+  fs.writeFileSync(viteConfigPath, content);
+
+  console.log("✅ vite.config.ts updated with Tailwind");
+}
+
+function ensureSrcFolder() {
+  if (!fs.existsSync("src")) {
+    fs.mkdirSync("src", { recursive: true });
+    console.log("📁 Created src folder");
+  }
+}
+
+function createTokensCss() {
+  const tokensPath = "src/tokens.css";
+
+  if (fs.existsSync(tokensPath)) {
+    console.log("ℹ️ tokens.css already exists");
+    return;
+  }
+
+  const content = `@theme {
+
+  /* Screens */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+
+  /* Fonts */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Text */
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-base: 14px;
+  --text-lg: 16px;
+  --text-xl: 17.5px;
+  --text-2xl: 21.88px;
+  --text-3xl: 27.34px;
+
+  /* Colors */
+  --color-background: 255 255 255;
+  --color-text: 0 0 0;
+
+  --color-black: #000000;
+  --color-white: #FFFFFF;
+  --color-neutral-100: #E6E6E6;
+  --color-neutral-500: #666666;
+  --color-neutral-900: #000000;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-base: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px -1px rgba(0, 0, 0, 0.16);
+  --shadow-md: 0 8px 16px -8px rgba(0, 0, 0, 0.16);
+
+  /* Spacing */
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-4: 16px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+}
+`;
+
+  fs.writeFileSync(tokensPath, content);
+  console.log("✅ Created src/tokens.css");
+}
+
+function createIndexCss() {
+  const indexPath = "src/index.css";
+
+  const content = `@import "tailwindcss";
+@import "./tokens.css";
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+body {
+  background: rgb(var(--color-background));
+  color: rgb(var(--color-text));
+  font-feature-settings: "rlig" 1, "calt" 1;
+  font-family: var(--font-sans);
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+`;
+
+  if (!fs.existsSync(indexPath)) {
+    fs.writeFileSync(indexPath, content);
+    console.log("✅ Created src/index.css");
+    return;
+  }
+
+  let existing = fs.readFileSync(indexPath, "utf-8");
+
+  if (!existing.includes('./tokens.css')) {
+    existing = `@import "./tokens.css";\n` + existing;
+
+    fs.writeFileSync(indexPath, existing);
+    console.log("✅ Added tokens.css import to index.css");
+  } else {
+    console.log("ℹ️ index.css already configured");
+  }
+}
+
 export async function init() {
   const config = {
     language: "typescript",
@@ -17,27 +181,36 @@ export async function init() {
 
   console.log("\n✅ Initialized SparesDev\n");
 
+  const missingDeps = getMissingDependencies();
+
   try {
-    console.log("📦 Installing required dependencies...\n");
+    if (missingDeps.length) {
+      console.log(
+        `📦 Installing dependencies: ${missingDeps.join(", ")}\n`
+      );
+
+      execSync(`npm install ${missingDeps.join(" ")}`, {
+        stdio: "inherit"
+      });
+    } else {
+      console.log("✅ Core dependencies already installed\n");
+    }
+
+    console.log("🎨 Installing Tailwind CSS...\n");
 
     execSync(
-      "npm install react react-dom react-router-dom clsx tailwind-merge class-variance-authority",
+      "npm install -D tailwindcss @tailwindcss/vite",
       { stdio: "inherit" }
     );
 
-    console.log("\n✅ Dependencies installed successfully\n");
-  } catch {
-    console.log("\n❌ Dependency installation failed");
-    console.log(`
-Run manually:
-npm install react react-dom react-router-dom clsx tailwind-merge class-variance-authority
-`);
-  }
-
-  console.log(`
-⚠️ Tailwind v4 Required
+    patchViteConfig();
+    ensureSrcFolder();
+    createTokensCss();
+    createIndexCss();
 
-- Create src/index.css
-- Create src/tokens.css
-`);
+    console.log("\n🎉 SparesDev setup completed successfully\n");
+  } catch (error) {
+    console.log("\n❌ Installation failed");
+    console.error(error.message);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparesdev",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "bin": {