@glass-ui-kit/cli 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# @glass-ui-kit/cli
+
+The official CLI for Glass UI. Add premium glassmorphism components to your React projects in seconds.
+
+## init
+
+Use the `init` command to initialize the project configuration.
+
+The `init` command:
+
+1. Creates a `glass.config.json` file.
+2. Generates the `cn` utility at `src/lib/utils.ts`.
+3. Installs necessary dependencies (`clsx`, `tailwind-merge`).
+4. Injects Glass Physics variables into your global CSS.
+
+```bash
+npx @glass-ui-kit/cli init
+
+```
+
+## add
+
+Use the `add` command to add components to your project.
+The `add` command downloads the component source code and places it directly into your project.
+
+```bash
+npx @glass-ui-kit/cli add [component]
+
+```
+
+### Example
+
+```bash
+npx @glass-ui-kit/cli add card
+
+```
+
+You can also run the command without any arguments to view a list of all available components:
+
+```bash
+npx @glass-ui-kit/cli add
+
+```
+
+## Documentation
+
+Visit [https://ui-glass.vercel.app](https://ui-glass.vercel.app) to view the registry and documentation.
+
+## License
+
+Licensed under the [MIT license](https://github.com/jntellez/glass-ui/blob/master/LICENSE).
+
+---
+
+### Keywords
+
+components
+ui
+glassmorphism
+tailwind
+design-system
+react
+cli

package/dist/index.js

@@ -0,0 +1,318 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command as Command3 } from "commander";
+
+// src/commands/init.ts
+import chalk from "chalk";
+import { Command } from "commander";
+import path2 from "path";
+
+// src/utils/filesystem.ts
+import path from "path";
+import { existsSync, mkdirSync } from "fs";
+async function writeFile(filePath, content) {
+  const absolutePath = path.resolve(process.cwd(), filePath);
+  const dir = path.dirname(absolutePath);
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+  await Bun.write(absolutePath, content);
+  return absolutePath;
+}
+async function readFile(filePath) {
+  const absolutePath = path.resolve(process.cwd(), filePath);
+  const file = Bun.file(absolutePath);
+  if (!await file.exists()) {
+    throw new Error(`File not found: ${filePath}`);
+  }
+  return await file.text();
+}
+function exists(filePath) {
+  return existsSync(path.resolve(process.cwd(), filePath));
+}
+
+// src/utils/get-project-info.ts
+async function getPackageManager() {
+  if (exists("bun.lockb")) return "bun";
+  if (exists("pnpm-lock.yaml")) return "pnpm";
+  if (exists("yarn.lock")) return "yarn";
+  return "npm";
+}
+async function getFramework() {
+  if (!exists("package.json")) return "unknown";
+  const pkg = await Bun.file("package.json").json();
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (deps["next"]) return "next";
+  if (deps["astro"]) return "astro";
+  if (deps["vite"]) return "vite";
+  return "unknown";
+}
+function getCssPath(framework) {
+  const paths = {
+    next: ["app/globals.css", "src/app/globals.css", "styles/globals.css"],
+    vite: ["src/index.css", "src/main.css", "src/style.css"],
+    astro: ["src/styles/global.css", "src/global.css"],
+    unknown: ["src/index.css", "styles.css"]
+  };
+  for (const p of paths[framework] || []) {
+    if (exists(p)) return p;
+  }
+  return paths[framework]?.[0] || null;
+}
+async function installDependencies(deps, pm) {
+  const installCmd = pm === "npm" ? "install" : "add";
+  const args = [installCmd, ...deps];
+  const proc = Bun.spawn([pm, ...args], {
+    stdout: "inherit",
+    stderr: "inherit"
+  });
+  await proc.exited;
+}
+
+// src/utils/templates.ts
+var UTILS_CN = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+var GLASS_TOKENS = `
+@layer base {
+  :root {
+    /* --- GLASS UI TOKENS (Light) --- */
+    --glass-surface: rgba(255, 255, 255, 0.4);
+    --glass-border: rgba(255, 255, 255, 0.6);
+    --glass-highlight: rgba(255, 255, 255, 0.5);
+    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+    --glass-blur: 12px;
+    --glass-saturation: 110%;
+  }
+
+  .dark {
+    /* --- GLASS UI TOKENS (Dark) --- */
+    --glass-surface: rgba(0, 0, 0, 0.3);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-highlight: rgba(255, 255, 255, 0.03);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+    --glass-blur: 12px;
+    --glass-saturation: 100%;
+  }
+}
+`;
+
+// src/commands/init.ts
+var init = new Command().name("init").description("Initialize configuration and dependencies").option("-y, --yes", "Skip confirmation prompt", false).action(async (opts) => {
+  try {
+    console.log(chalk.bold("\nInitializing Glass UI..."));
+    const framework = await getFramework();
+    const pm = await getPackageManager();
+    const cwd = process.cwd();
+    const configPath = "glass.config.json";
+    let cssPath = getCssPath(framework);
+    if (!cssPath) {
+      cssPath = "src/index.css";
+    }
+    const utilsPath = path2.join(cwd, "src/lib/utils.ts");
+    if (!exists(configPath)) {
+      await writeFile(
+        configPath,
+        JSON.stringify(
+          {
+            framework,
+            style: "default",
+            css: cssPath,
+            aliases: { components: "@/components/ui", utils: "@/lib/utils" }
+          },
+          null,
+          2
+        )
+      );
+      console.log(chalk.green("  Created glass.config.json"));
+    } else {
+      console.log(chalk.gray("  glass.config.json already exists."));
+    }
+    if (!exists(utilsPath)) {
+      await writeFile(utilsPath, UTILS_CN);
+      console.log(chalk.green("  Created src/lib/utils.ts"));
+    } else {
+      console.log(chalk.gray("  src/lib/utils.ts already exists."));
+    }
+    let cssContent = "";
+    try {
+      if (exists(cssPath)) {
+        cssContent = await readFile(cssPath);
+      } else {
+        console.log(chalk.yellow(`  Creating new CSS file at ${cssPath}`));
+      }
+    } catch (e) {
+    }
+    if (!cssContent.includes("--glass-surface")) {
+      const newCssContent = `${GLASS_TOKENS}
+${cssContent}`;
+      await writeFile(cssPath, newCssContent);
+      console.log(chalk.green(`  Updated ${cssPath} with glass tokens`));
+    } else {
+      console.log(chalk.gray(`  Tokens already present in ${cssPath}`));
+    }
+    console.log(
+      chalk.cyan(`  Installing dependencies (clsx, tailwind-merge)...`)
+    );
+    await installDependencies(["clsx", "tailwind-merge"], pm);
+    console.log(chalk.bold.green("\nSetup complete."));
+    console.log(`Try adding a component:
+`);
+    console.log(chalk.cyan(`  npx @glass-ui-kit/cli@latest add card`));
+    console.log("");
+  } catch (error) {
+    console.error(chalk.red("\nInitialization failed:"));
+    if (error instanceof Error) {
+      console.error(chalk.gray(error.message));
+    } else {
+      console.error(chalk.gray(String(error)));
+    }
+    process.exit(1);
+  }
+});
+
+// src/commands/add.ts
+import chalk2 from "chalk";
+import { Command as Command2 } from "commander";
+import path4 from "path";
+
+// src/utils/registry.ts
+import path3 from "path";
+import os from "os";
+import fs from "fs/promises";
+import {
+  registryIndexSchema
+} from "@glass-ui-kit/schema";
+var DEFAULT_REGISTRY_URL = "https://ui-glass.vercel.app/registry.json";
+var CACHE_DIR = path3.join(os.homedir(), ".glass-ui");
+var CACHE_FILE = path3.join(CACHE_DIR, "registry.json");
+var CACHE_TTL = 1e3 * 60 * 60 * 24;
+function getRegistryUrl() {
+  return process.env.GLASS_UI_REGISTRY_URL || DEFAULT_REGISTRY_URL;
+}
+async function readCache() {
+  try {
+    const fileExists = await fs.stat(CACHE_FILE).then(() => true).catch(() => false);
+    if (!fileExists) return null;
+    const raw = await fs.readFile(CACHE_FILE, "utf-8");
+    const cache = JSON.parse(raw);
+    const now = Date.now();
+    if (now - cache.lastUpdated > CACHE_TTL) {
+      return null;
+    }
+    return cache.data;
+  } catch {
+    return null;
+  }
+}
+async function writeCache(data) {
+  try {
+    await fs.mkdir(CACHE_DIR, { recursive: true });
+    const cache = {
+      lastUpdated: Date.now(),
+      data
+    };
+    await fs.writeFile(CACHE_FILE, JSON.stringify(cache), "utf-8");
+  } catch {
+  }
+}
+async function fetchRegistry() {
+  const cachedRegistry = await readCache();
+  if (cachedRegistry) {
+    return cachedRegistry;
+  }
+  const url = getRegistryUrl();
+  let response;
+  try {
+    response = await fetch(url);
+  } catch (error) {
+    throw new Error(
+      "Network error: Unable to connect to registry. Check your internet connection."
+    );
+  }
+  if (!response.ok) {
+    throw new Error(
+      `Registry unavailable. URL: ${url} (Status: ${response.status})`
+    );
+  }
+  let data;
+  try {
+    data = await response.json();
+  } catch {
+    throw new Error("Invalid response: Registry returned non-JSON data.");
+  }
+  const parsed = registryIndexSchema.safeParse(data);
+  if (!parsed.success) {
+    console.error("Debug: Schema validation errors:", parsed.error.flatten());
+    throw new Error(
+      "Incompatible registry version. Your CLI might be outdated. Please try updating @glass-ui-kit/cli."
+    );
+  }
+  await writeCache(parsed.data);
+  return parsed.data;
+}
+function getItem(registry, name) {
+  return registry.find((item) => item.name === name);
+}
+
+// src/commands/add.ts
+var add = new Command2().name("add").description("Add a component to your project").argument("<component>", "The component to add").action(async (componentName) => {
+  try {
+    if (!exists("glass.config.json")) {
+      console.error(chalk2.red("Configuration file not found."));
+      console.log(chalk2.gray("Please run the init command first:"));
+      console.log(chalk2.cyan("  npx @glass-ui-kit/cli@latest init"));
+      process.exit(1);
+    }
+    const config = JSON.parse(await readFile("glass.config.json"));
+    const pm = await getPackageManager();
+    console.log(chalk2.bold(`Fetching component: ${componentName}...`));
+    const registry = await fetchRegistry();
+    const item = getItem(registry, componentName);
+    if (!item) {
+      console.error(
+        chalk2.red(`Component '${componentName}' not found in registry.`)
+      );
+      console.log(chalk2.gray("Available components:"));
+      console.log(chalk2.gray(`  ${registry.map((i) => i.name).join(", ")}`));
+      process.exit(1);
+    }
+    const targetDirAlias = config.aliases.components || "@/components/ui";
+    const targetDir = targetDirAlias.replace(/^@\//, "./src/");
+    for (const file of item.files) {
+      const fileName = path4.basename(file.path);
+      const filePath = path4.join(targetDir, fileName);
+      if (!file.content) {
+        continue;
+      }
+      await writeFile(filePath, file.content);
+      console.log(chalk2.green(`  Created ${filePath}`));
+    }
+    if (item.dependencies?.length) {
+      console.log(chalk2.cyan(`  Installing dependencies...`));
+      await installDependencies(item.dependencies, pm);
+    }
+    console.log(chalk2.bold.green(`
+Done.`));
+  } catch (error) {
+    console.error(chalk2.red("\nOperation failed:"));
+    if (error instanceof Error) {
+      console.error(chalk2.gray(`  ${error.message}`));
+    } else {
+      console.error(chalk2.gray("  An unknown error occurred."));
+    }
+    process.exit(1);
+  }
+});
+
+// src/index.ts
+var program = new Command3();
+program.name("glass-ui").description("The Glass UI CLI - Add glassmorphism components to your app").version("0.0.1");
+program.addCommand(init);
+program.addCommand(add);
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@glass-ui-kit/cli",
+  "version": "0.1.0",
+  "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
+  "keywords": [
+    "glassmorphism",
+    "design-system",
+    "react",
+    "cli",
+    "ui",
+    "tailwind"
+  ],
+  "homepage": "https://github.com/jntellez/glass-ui#readme",
+  "bugs": {
+    "url": "https://github.com/jntellez/glass-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jntellez/glass-ui.git",
+    "directory": "packages/cli"
+  },
+  "license": "MIT",
+  "author": "Glass UI Team",
+  "type": "module",
+  "bin": {
+    "glass-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "node-fetch": "^3.3.2",
+    "zod": "^3.22.4",
+    "@glass-ui-kit/schema": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "bun-types": "latest",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "@glass-ui-kit/tsconfig": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --clean",
+    "dev": "bun run ./src/index.ts",
+    "lint": "eslint src"
+  }
+}