@work-rjkashyap/unified-ui 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -10,6 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 🚀 Features
 
+- Add motion tokens for animation consistency
+- Introduced motion tokens in `motion.ts` for durations, easings, springs, and stagger timings to standardize animations across the design system. ([65feea0](https://github.com/imrj05/unified-ui/commit/65feea0c5ab3b43d3aa6a4300aedda58b9769fad))
+## [0.3.2] — 2026-03-09
+
+### 🚀 Features
+
 - Update composer.json version to 0.0.5, add PHP config integration, and enhance InitCommand ([26cacd4](https://github.com/imrj05/unified-ui/commit/26cacd4b8a16ea4cc31d7894c5fb0dbbb0541f8a))
 - Update composer.json version to 0.0.4 and enhance InitCommand with skip-npm option ([0ce9f0e](https://github.com/imrj05/unified-ui/commit/0ce9f0eb0e9da9bdf8e421a27571b160b343e293))
 - Update composer.json version and enhance InitCommand for app.js and app.css patching ([67ee978](https://github.com/imrj05/unified-ui/commit/67ee97825c2c89ef7c2da15bc41532c1aa776da7))
@@ -45,6 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 🏗️ Miscellaneous
 
+- **changelog:** Auto-update unreleased entries [skip ci] ([7fb15c9](https://github.com/imrj05/unified-ui/commit/7fb15c907a060b6c15d65fd85e073ed1cbcff740))
 - **changelog:** Auto-update unreleased entries [skip ci] ([7dbe966](https://github.com/imrj05/unified-ui/commit/7dbe96600fe84196757a878c4256a3e3cb0f6682))
 - **changelog:** Auto-update unreleased entries [skip ci] ([6569725](https://github.com/imrj05/unified-ui/commit/656972599dd7703317fbd6b184b95050aca092d8))
 - **changelog:** Auto-update unreleased entries [skip ci] ([57bfcc3](https://github.com/imrj05/unified-ui/commit/57bfcc37256d43487f773bddda7d8c70e7c89b31))

package/bin/cli.mjs

@@ -27,12 +27,12 @@ import { execSync } from "node:child_process";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { createInterface } from "node:readline";
+
 // ---------------------------------------------------------------------------
 // Config
 // ---------------------------------------------------------------------------
 const REGISTRY_BASE_URL =
-  process.env.UNIFIED_UI_REGISTRY_URL ||
-  "https://www.unified-ui.space/r";
+  process.env.UNIFIED_UI_REGISTRY_URL || "https://www.unified-ui.space/r";
 const CONFIG_FILE = "unified-ui.json";
 // ---------------------------------------------------------------------------
 // Starter kit templates
@@ -333,6 +333,248 @@ async function installNpmDeps(deps, root) {
     );
   }
 }
+async function installNpmDevDeps(deps, root) {
+  if (deps.length === 0) return;
+  const pm = await detectPackageManager(root);
+  const cmd = getInstallCommand(pm, deps)
+    .replace(" add ", " add -D ")
+    .replace(" install ", " install -D ");
+  logStep("📦", `Installing dev dependencies with ${c("cyan", pm)}...`);
+  logStep("  ", c("dim", cmd));
+  try {
+    execSync(cmd, { cwd: root, stdio: "pipe" });
+    logStep("✓", c("green", `${deps.length} dev package(s) installed`));
+  } catch (_err) {
+    logStep(
+      "⚠",
+      c("yellow", `Auto-install failed. Run manually:\n     ${cmd}`),
+    );
+  }
+}
+// ---------------------------------------------------------------------------
+// Vite + Tailwind CSS detection & setup
+// ---------------------------------------------------------------------------
+function detectViteConfig(root) {
+  for (const name of [
+    "vite.config.ts",
+    "vite.config.js",
+    "vite.config.mjs",
+    "vite.config.mts",
+  ]) {
+    if (existsSync(join(root, name))) return name;
+  }
+  return null;
+}
+function hasDependency(root, pkg) {
+  try {
+    const raw = readFileSync(join(root, "package.json"), "utf-8");
+    const json = JSON.parse(raw);
+    const all = {
+      ...json.dependencies,
+      ...json.devDependencies,
+      ...json.peerDependencies,
+    };
+    return Boolean(all[pkg]);
+  } catch {
+    return false;
+  }
+}
+async function setupTailwindForVite(root, config) {
+  const viteConfigName = detectViteConfig(root);
+  if (!viteConfigName) return; // Not a Vite project
+
+  logStep("🔍", "Detected Vite project");
+
+  // 1. Install tailwindcss + @tailwindcss/vite if missing
+  const missingDevDeps = [];
+  if (!hasDependency(root, "tailwindcss")) missingDevDeps.push("tailwindcss");
+  if (!hasDependency(root, "@tailwindcss/vite"))
+    missingDevDeps.push("@tailwindcss/vite");
+  if (missingDevDeps.length > 0) {
+    await installNpmDevDeps(missingDevDeps, root);
+  } else {
+    logStep("✓", c("dim", "tailwindcss + @tailwindcss/vite already installed"));
+  }
+
+  // 2. Patch vite.config to add tailwindcss plugin, path import, and @ alias
+  const viteConfigPath = join(root, viteConfigName);
+  let viteContent = readFileSync(viteConfigPath, "utf-8");
+  let viteModified = false;
+
+  // 2a. Add @tailwindcss/vite import + plugin
+  if (!viteContent.includes("@tailwindcss/vite")) {
+    const tailwindImport = 'import tailwindcss from "@tailwindcss/vite";\n';
+    const importMatch = viteContent.match(/^(import\s.+\n)+/m);
+    if (importMatch) {
+      const lastImportEnd = importMatch.index + importMatch[0].length;
+      viteContent =
+        viteContent.slice(0, lastImportEnd) +
+        tailwindImport +
+        viteContent.slice(lastImportEnd);
+    } else {
+      viteContent = tailwindImport + viteContent;
+    }
+    if (viteContent.includes("plugins:")) {
+      viteContent = viteContent.replace(
+        /plugins:\s*\[/,
+        "plugins: [\n    tailwindcss(),",
+      );
+    } else if (viteContent.includes("defineConfig({")) {
+      viteContent = viteContent.replace(
+        /defineConfig\(\{/,
+        "defineConfig({\n  plugins: [tailwindcss()],",
+      );
+    }
+    viteModified = true;
+  } else {
+    logStep("✓", c("dim", `${viteConfigName} already has @tailwindcss/vite`));
+  }
+
+  // 2b. Add path import + resolve.alias for @
+  if (
+    !viteContent.includes("node:path") &&
+    !viteContent.match(/import\s+path\s+from\s+["']path["']/)
+  ) {
+    const pathImport = 'import path from "node:path";\n';
+    const importMatch = viteContent.match(/^(import\s.+\n)+/m);
+    if (importMatch) {
+      const lastImportEnd = importMatch.index + importMatch[0].length;
+      viteContent =
+        viteContent.slice(0, lastImportEnd) +
+        pathImport +
+        viteContent.slice(lastImportEnd);
+    } else {
+      viteContent = pathImport + viteContent;
+    }
+    viteModified = true;
+  }
+
+  if (
+    !viteContent.includes("resolve:") &&
+    !viteContent.includes("resolve.alias")
+  ) {
+    // Add resolve.alias block before the closing of defineConfig
+    const resolveBlock = `  resolve: {\n    alias: {\n      "@": path.resolve(__dirname, "src"),\n    },\n  },`;
+    if (viteContent.includes("plugins:")) {
+      // Insert after plugins block — find the plugins array closing and add after
+      viteContent = viteContent.replace(
+        /(plugins:\s*\[[\s\S]*?\],?\n)/m,
+        `$1${resolveBlock}\n`,
+      );
+    } else if (viteContent.includes("defineConfig({")) {
+      viteContent = viteContent.replace(
+        /defineConfig\(\{/,
+        `defineConfig({\n${resolveBlock}`,
+      );
+    }
+    viteModified = true;
+  } else {
+    logStep("✓", c("dim", `${viteConfigName} already has resolve.alias`));
+  }
+
+  if (viteModified) {
+    writeFileSync(viteConfigPath, viteContent);
+    logStep(
+      "✓",
+      `Patched ${c("cyan", viteConfigName)} with Tailwind CSS plugin + @ alias`,
+    );
+  }
+
+  // 2c. Patch tsconfig to add @/* path alias
+  const tsconfigCandidates = ["tsconfig.app.json", "tsconfig.json"];
+  for (const tscName of tsconfigCandidates) {
+    const tscPath = join(root, tscName);
+    if (!existsSync(tscPath)) continue;
+    const tscContent = readFileSync(tscPath, "utf-8");
+    if (tscContent.includes('"@/*"')) {
+      logStep("✓", c("dim", `${tscName} already has @/* path alias`));
+      break;
+    }
+    try {
+      // Strip comments for JSON parsing (single-line // comments)
+      const stripped = tscContent.replace(/^\s*\/\/.*$/gm, "");
+      const tsconfig = JSON.parse(stripped);
+      if (!tsconfig.compilerOptions) tsconfig.compilerOptions = {};
+      if (!tsconfig.compilerOptions.paths) tsconfig.compilerOptions.paths = {};
+      tsconfig.compilerOptions.paths["@/*"] = ["./src/*"];
+      // Also ensure baseUrl is set for paths to work
+      if (!tsconfig.compilerOptions.baseUrl) {
+        tsconfig.compilerOptions.baseUrl = ".";
+      }
+      writeFileSync(tscPath, `${JSON.stringify(tsconfig, null, 2)}\n`);
+      logStep("✓", `Patched ${c("cyan", tscName)} with @/* path alias`);
+    } catch {
+      logStep(
+        "⚠",
+        c("yellow", `Could not patch ${tscName} — add @/* path alias manually`),
+      );
+    }
+    break;
+  }
+
+  // 3. Patch CSS entry file
+  const srcDir = join(root, config.srcDir);
+  const cssCandidates = [
+    "index.css",
+    "App.css",
+    "style.css",
+    "main.css",
+    "globals.css",
+  ];
+  let cssPath = null;
+  for (const name of cssCandidates) {
+    const candidate = join(srcDir, name);
+    if (existsSync(candidate)) {
+      cssPath = candidate;
+      break;
+    }
+  }
+  if (!cssPath) {
+    // Create src/index.css if no CSS file found
+    cssPath = join(srcDir, "index.css");
+  }
+  const tailwindDirective = '@import "tailwindcss";';
+  const unifiedUiImport = '@import "@/styles/unified-ui.css";';
+  if (existsSync(cssPath)) {
+    let cssContent = readFileSync(cssPath, "utf-8");
+    let modified = false;
+    if (!cssContent.includes(tailwindDirective)) {
+      cssContent = `${tailwindDirective}\n${cssContent}`;
+      modified = true;
+    }
+    if (!cssContent.includes(unifiedUiImport)) {
+      // Insert right after the tailwindcss import
+      cssContent = cssContent.replace(
+        tailwindDirective,
+        `${tailwindDirective}\n${unifiedUiImport}`,
+      );
+      modified = true;
+    }
+    if (modified) {
+      writeFileSync(cssPath, cssContent);
+      logStep(
+        "✓",
+        `Updated ${c("cyan", cssPath.replace(`${root}/`, ""))} with Tailwind imports`,
+      );
+    } else {
+      logStep(
+        "✓",
+        c(
+          "dim",
+          `${cssPath.replace(`${root}/`, "")} already has Tailwind imports`,
+        ),
+      );
+    }
+  } else {
+    const content = `${tailwindDirective}\n${unifiedUiImport}\n`;
+    mkdirSync(dirname(cssPath), { recursive: true });
+    writeFileSync(cssPath, content);
+    logStep(
+      "✓",
+      `Created ${c("cyan", cssPath.replace(`${root}/`, ""))} with Tailwind imports`,
+    );
+  }
+}
 // ---------------------------------------------------------------------------
 // File writer
 // ---------------------------------------------------------------------------
@@ -1757,9 +1999,12 @@ async function cmdInit(positional = [], flags = {}) {
   }
   // Install base npm deps
   await installNpmDeps(
-    ["class-variance-authority", "clsx", "tailwind-merge"],
+    ["class-variance-authority", "clsx", "tailwind-merge", "lucide-react"],
     config.root,
   );
+  // Set up Tailwind CSS for Vite projects
+  log();
+  await setupTailwindForVite(config.root, config);
   log();
   logStep("🎉", c("green", "Project initialized! Start adding components:"));
   log();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@work-rjkashyap/unified-ui",
-    "version": "0.3.2",
+    "version": "0.3.3",
     "description": "A scalable, token-driven React design system with 75+ components, built with Tailwind CSS v4, Radix UI, and Framer Motion.",
     "author": "Rajeshwar Kashyap",
     "license": "MIT",