novaui-cli 1.1.1 → 1.1.3

package/README.md

@@ -224,6 +224,117 @@ NovaUI components use CSS variables for theming. Customize colors, spacing, and
 - 🐛 [GitHub Issues](https://github.com/KaloyanBehov/novaui/issues) — Report bugs or request features
 - 💬 [GitHub Discussions](https://github.com/KaloyanBehov/novaui/discussions) — Ask questions
 
+## For Maintainers
+
+### Publishing Process
+
+The CLI is standalone and can be published independently to npm.
+
+#### Pre-publish Checklist
+
+1. **Validate registry**:
+   ```bash
+   pnpm validate:registry
+   ```
+
+2. **Run tests**:
+   ```bash
+   cd apps/cli
+   pnpm test
+   ```
+
+3. **Ensure no workspace dependencies**:
+   ```bash
+   cat package.json | grep "workspace:"
+   ```
+   Should return nothing.
+
+#### Publishing
+
+```bash
+cd apps/cli
+
+# Bump version (patch/minor/major)
+npm version patch
+
+# The prepublishOnly script automatically:
+# - Syncs themes from packages/themes/
+# - Validates CLI is standalone
+# Note: Registry is fetched from GitHub at runtime (not bundled)
+
+# Publish to npm
+npm publish
+
+# Tag and push
+git tag cli-v1.1.3
+git push origin cli-v1.1.3
+```
+
+#### What's Included in the Published Package
+
+The CLI package includes:
+- `src/**/*.js` - All CLI source code
+- `src/themes/` - Theme CSS files (synced from packages/)
+- `README.md` - This documentation
+
+**Fetched at runtime** (not bundled):
+- Component registry from GitHub (`packages/registry/registry.json`)
+- Component source files from GitHub (`packages/components/src/ui/`)
+
+**Not included** (via `.npmignore`):
+- `__tests__/` - Test files
+- `node_modules/` - Dependencies
+- Development configs
+
+#### Prebuild Script
+
+The `scripts/prebuild.js` runs automatically before publish:
+
+1. Copies theme files from packages/themes/
+2. Validates no workspace dependencies remain
+3. Ensures all required files exist
+
+If validation fails, publish is aborted.
+
+#### Architecture: Runtime Fetch (like shadcn/ui)
+
+The CLI fetches components and registry from GitHub at runtime:
+
+**Benefits:**
+- ✅ Users always get latest components without updating CLI
+- ✅ Smaller package size (no bundled JSON)
+- ✅ Can support multiple versions via branches/tags
+
+**Environment Variables:**
+```bash
+# Override GitHub branch (default: main)
+NOVAUI_BRANCH=dev novaui-cli add button
+
+# Useful for testing or using beta components
+NOVAUI_BRANCH=beta novaui-cli add card
+```
+
+### Version Compatibility
+
+The CLI checks for updates automatically (once per 24 hours) and warns users if they're running an outdated version.
+
+Version format: `MAJOR.MINOR.PATCH`
+- **Major**: Breaking changes
+- **Minor**: New features, new components
+- **Patch**: Bug fixes, improvements
+
+### Registry Sync
+
+The registry must be synced before every CLI publish:
+
+```bash
+# Manual sync (done automatically by prepublishOnly)
+cd apps/cli
+node scripts/prebuild.js
+```
+
+This ensures the CLI always has the latest component metadata.
+
 ## License
 
 MIT

package/package.json

@@ -1,30 +1,34 @@
 {
   "name": "novaui-cli",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "CLI for NovaUI - React Native component library with NativeWind",
   "type": "module",
   "bin": {
-    "novaui": "./src/bin.js"
+    "novaui-cli": "./src/bin.js"
   },
   "files": [
-    "src",
+    "src/**/*.js",
     "!src/__tests__",
     "README.md"
   ],
   "keywords": [
     "novaui",
+    "novaui-cli",
     "react-native",
-    "cli",
+    "react native",
     "nativewind",
-    "ui-components"
+    "tailwind",
+    "cli",
+    "command-line",
+    "component-library",
+    "ui-library",
+    "design-system",
+    "react-native-ui",
+    "mobile",
+    "expo",
+    "components",
+    "styling"
   ],
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "devDependencies": {
-    "vitest": "^3.0.0"
-  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,5 +37,28 @@
   "homepage": "https://github.com/KaloyanBehov/novaui#readme",
   "bugs": {
     "url": "https://github.com/KaloyanBehov/novaui/issues"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "commander": "^14.0.3",
+    "nativewind": "^4.2.2",
+    "ora": "^9.3.0",
+    "picocolors": "^1.1.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^54.0.10",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.17",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/src/__tests__/commands.test.js

@@ -0,0 +1,491 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"
+import fs from "node:fs"
+import path from "node:path"
+import os from "node:os"
+
+import {
+  DEFAULT_CONFIG,
+  CONFIG_FILENAME,
+  GLOBAL_CSS_CONTENT,
+  UTILS_CONTENT,
+  getTailwindConfigContent,
+  loadConfig,
+  writeConfig,
+  init,
+  add,
+} from "../bin.js"
+
+// ─── Test helpers ───────────────────────────────────────────────────────────
+
+function makeTmpDir() {
+  return fs.mkdtempSync(path.join(os.tmpdir(), "novaui-cmd-test-"))
+}
+
+function cleanTmpDir(dir) {
+  fs.rmSync(dir, { recursive: true, force: true })
+}
+
+// ─── init command ───────────────────────────────────────────────────────────
+
+describe("init command", () => {
+  let tmp
+  let originalCwd
+
+  beforeEach(() => {
+    tmp = makeTmpDir()
+    originalCwd = process.cwd()
+    process.chdir(tmp)
+
+    // Create a minimal package.json so getMissingDeps works
+    fs.writeFileSync(
+      path.join(tmp, "package.json"),
+      JSON.stringify({
+        name: "test-project",
+        dependencies: {
+          nativewind: "^4.0.0",
+          tailwindcss: "^3.0.0",
+          clsx: "^2.0.0",
+          "tailwind-merge": "^3.0.0",
+          "class-variance-authority": "^0.7.0",
+        },
+      }),
+      "utf8"
+    )
+  })
+
+  afterEach(() => {
+    process.chdir(originalCwd)
+    cleanTmpDir(tmp)
+  })
+
+  it("creates components.json with default config", async () => {
+    // Non-TTY stdin means `ask()` returns defaults automatically
+    await init()
+
+    const configPath = path.join(tmp, CONFIG_FILENAME)
+    expect(fs.existsSync(configPath)).toBe(true)
+
+    const config = JSON.parse(fs.readFileSync(configPath, "utf8"))
+    expect(config.globalCss).toBe(DEFAULT_CONFIG.globalCss)
+    expect(config.componentsUi).toBe(DEFAULT_CONFIG.componentsUi)
+    expect(config.lib).toBe(DEFAULT_CONFIG.lib)
+    expect(config.theme).toBe(DEFAULT_CONFIG.theme)
+  })
+
+  it("creates utils.ts in the lib directory", async () => {
+    await init()
+
+    const utilsPath = path.join(tmp, DEFAULT_CONFIG.lib, "utils.ts")
+    expect(fs.existsSync(utilsPath)).toBe(true)
+
+    const content = fs.readFileSync(utilsPath, "utf8")
+    expect(content).toContain("export function cn")
+    expect(content).toBe(UTILS_CONTENT)
+  })
+
+  it("creates global.css", async () => {
+    await init()
+
+    const cssPath = path.join(tmp, DEFAULT_CONFIG.globalCss)
+    expect(fs.existsSync(cssPath)).toBe(true)
+
+    const content = fs.readFileSync(cssPath, "utf8")
+    expect(content).toContain("@tailwind base")
+    expect(content).toContain("--primary:")
+    expect(content).toContain(".dark")
+    expect(content).toBe(GLOBAL_CSS_CONTENT)
+  })
+
+  it("creates tailwind.config.js with correct theme", async () => {
+    await init()
+
+    const twPath = path.join(tmp, "tailwind.config.js")
+    expect(fs.existsSync(twPath)).toBe(true)
+
+    const content = fs.readFileSync(twPath, "utf8")
+    expect(content).toContain("module.exports")
+    expect(content).toContain('require("nativewind/preset")')
+    expect(content).toContain("hsl(var(--primary))")
+    expect(content).toContain("hsl(var(--background))")
+    expect(content).toContain("hsl(var(--border))")
+    expect(content).toContain("var(--radius)")
+  })
+
+  it("does not overwrite existing files on second run", async () => {
+    await init()
+
+    // Modify utils.ts
+    const utilsPath = path.join(tmp, DEFAULT_CONFIG.lib, "utils.ts")
+    fs.writeFileSync(utilsPath, "// custom content")
+
+    await init()
+
+    // Should still have custom content
+    expect(fs.readFileSync(utilsPath, "utf8")).toBe("// custom content")
+  })
+
+  it("creates all expected directories", async () => {
+    await init()
+
+    expect(fs.existsSync(path.join(tmp, path.dirname(DEFAULT_CONFIG.globalCss)))).toBe(true)
+    expect(fs.existsSync(path.join(tmp, DEFAULT_CONFIG.lib))).toBe(true)
+  })
+
+  it("preserves existing components.json on re-init (non-TTY defaults to no)", async () => {
+    const customConfig = {
+      globalCss: "app/styles.css",
+      componentsUi: "app/ui",
+      lib: "app/utils",
+    }
+    writeConfig(tmp, customConfig)
+
+    await init()
+
+    const loaded = loadConfig(tmp)
+    expect(loaded.globalCss).toBe("app/styles.css")
+    expect(loaded.componentsUi).toBe("app/ui")
+    expect(loaded.lib).toBe("app/utils")
+  })
+})
+
+// ─── add command ────────────────────────────────────────────────────────────
+
+describe("add command", () => {
+  let tmp
+  let originalCwd
+  let originalFetch
+
+  beforeEach(() => {
+    tmp = makeTmpDir()
+    originalCwd = process.cwd()
+    process.chdir(tmp)
+    originalFetch = globalThis.fetch
+
+    // Create package.json
+    fs.writeFileSync(
+      path.join(tmp, "package.json"),
+      JSON.stringify({ name: "test-project", dependencies: {} }),
+      "utf8"
+    )
+  })
+
+  afterEach(() => {
+    process.chdir(originalCwd)
+    globalThis.fetch = originalFetch
+    cleanTmpDir(tmp)
+  })
+
+  it("creates utils.ts if missing", async () => {
+    // Mock fetch for registry and component file
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            button: {
+              files: ["src/components/ui/button.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("button.tsx")) {
+        return {
+          ok: true,
+          text: async () => 'export function Button() { return null }',
+        }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("button")
+
+    const utilsPath = path.join(tmp, DEFAULT_CONFIG.lib, "utils.ts")
+    expect(fs.existsSync(utilsPath)).toBe(true)
+    expect(fs.readFileSync(utilsPath, "utf8")).toBe(UTILS_CONTENT)
+  })
+
+  it("downloads component file to the correct directory", async () => {
+    const componentCode = `import React from "react"\nexport function Button() { return null }`
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            button: {
+              files: ["src/components/ui/button.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("button.tsx")) {
+        return { ok: true, text: async () => componentCode }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("button")
+
+    const dest = path.join(tmp, DEFAULT_CONFIG.componentsUi, "button.tsx")
+    expect(fs.existsSync(dest)).toBe(true)
+    expect(fs.readFileSync(dest, "utf8")).toBe(componentCode)
+  })
+
+  it("uses paths from components.json if present", async () => {
+    const customConfig = {
+      globalCss: "app/global.css",
+      componentsUi: "app/ui",
+      lib: "app/lib",
+    }
+    writeConfig(tmp, customConfig)
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            card: { files: ["src/components/ui/card.tsx"], dependencies: [] },
+          }),
+        }
+      }
+      if (url.endsWith("card.tsx")) {
+        return { ok: true, text: async () => "export function Card() {}" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("card")
+
+    const dest = path.join(tmp, "app", "ui", "card.tsx")
+    expect(fs.existsSync(dest)).toBe(true)
+  })
+
+  it("throws when registry fetch fails", async () => {
+    globalThis.fetch = vi.fn(async () => ({
+      ok: false,
+      statusText: "Internal Server Error",
+    }))
+
+    await expect(add("button")).rejects.toThrow(/Failed to fetch registry/)
+  })
+
+  it("throws when registry is not a valid object", async () => {
+    globalThis.fetch = vi.fn(async () => ({
+      ok: true,
+      json: async () => [1, 2, 3],
+    }))
+
+    await expect(add("button")).rejects.toThrow(/not a valid object/)
+  })
+
+  it("handles component with multiple files", async () => {
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            dialog: {
+              files: [
+                "src/components/ui/dialog.tsx",
+                "src/components/ui/dialog-overlay.tsx",
+              ],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("dialog.tsx")) {
+        return { ok: true, text: async () => "// dialog" }
+      }
+      if (url.endsWith("dialog-overlay.tsx")) {
+        return { ok: true, text: async () => "// overlay" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("dialog")
+
+    const uiDir = path.join(tmp, DEFAULT_CONFIG.componentsUi)
+    expect(fs.existsSync(path.join(uiDir, "dialog.tsx"))).toBe(true)
+    expect(fs.existsSync(path.join(uiDir, "dialog-overlay.tsx"))).toBe(true)
+  })
+
+  it("continues when a single file download fails", async () => {
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            multi: {
+              files: ["src/components/ui/a.tsx", "src/components/ui/b.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("a.tsx")) {
+        return { ok: false, statusText: "Not Found" }
+      }
+      if (url.endsWith("b.tsx")) {
+        return { ok: true, text: async () => "// b component" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("multi")
+
+    const uiDir = path.join(tmp, DEFAULT_CONFIG.componentsUi)
+    expect(fs.existsSync(path.join(uiDir, "a.tsx"))).toBe(false)
+    expect(fs.existsSync(path.join(uiDir, "b.tsx"))).toBe(true)
+  })
+
+  it("throws when component is not found in registry", async () => {
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            button: {
+              files: ["src/components/ui/button.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await expect(add("nonexistent")).rejects.toThrow(/not found in registry/)
+  })
+
+  it("throws when no component name is provided", async () => {
+    await expect(add()).rejects.toThrow(/Missing component name/)
+    await expect(add("")).rejects.toThrow(/Missing component name/)
+  })
+
+  it("skips dependency install when all deps are already present", async () => {
+    fs.writeFileSync(
+      path.join(tmp, "package.json"),
+      JSON.stringify({
+        name: "test-project",
+        dependencies: { "lucide-react-native": "^1.0.0" },
+      }),
+      "utf8"
+    )
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            icon: {
+              files: ["src/components/ui/icon.tsx"],
+              dependencies: ["lucide-react-native"],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("icon.tsx")) {
+        return { ok: true, text: async () => "// icon component" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("icon")
+
+    const dest = path.join(tmp, DEFAULT_CONFIG.componentsUi, "icon.tsx")
+    expect(fs.existsSync(dest)).toBe(true)
+  })
+
+  it("does not overwrite existing component files by default", async () => {
+    const uiDir = path.join(tmp, DEFAULT_CONFIG.componentsUi)
+    fs.mkdirSync(uiDir, { recursive: true })
+    fs.writeFileSync(path.join(uiDir, "button.tsx"), "// custom code")
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            button: {
+              files: ["src/components/ui/button.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("button.tsx")) {
+        return { ok: true, text: async () => "// new code from registry" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("button")
+
+    const content = fs.readFileSync(path.join(uiDir, "button.tsx"), "utf8")
+    expect(content).toBe("// custom code")
+  })
+
+  it("overwrites existing component files with force option", async () => {
+    const uiDir = path.join(tmp, DEFAULT_CONFIG.componentsUi)
+    fs.mkdirSync(uiDir, { recursive: true })
+    fs.writeFileSync(path.join(uiDir, "button.tsx"), "// custom code")
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            button: {
+              files: ["src/components/ui/button.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("button.tsx")) {
+        return { ok: true, text: async () => "// new code from registry" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("button", { force: true })
+
+    const content = fs.readFileSync(path.join(uiDir, "button.tsx"), "utf8")
+    expect(content).toBe("// new code from registry")
+  })
+
+  it("does not create utils.ts if it already exists", async () => {
+    const utilsDir = path.join(tmp, DEFAULT_CONFIG.lib)
+    fs.mkdirSync(utilsDir, { recursive: true })
+    fs.writeFileSync(path.join(utilsDir, "utils.ts"), "// custom utils")
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (url.endsWith("registry.json")) {
+        return {
+          ok: true,
+          json: async () => ({
+            card: {
+              files: ["src/components/ui/card.tsx"],
+              dependencies: [],
+            },
+          }),
+        }
+      }
+      if (url.endsWith("card.tsx")) {
+        return { ok: true, text: async () => "// card" }
+      }
+      return { ok: false, statusText: "Not Found" }
+    })
+
+    await add("card")
+
+    const utilsContent = fs.readFileSync(
+      path.join(utilsDir, "utils.ts"),
+      "utf8"
+    )
+    expect(utilsContent).toBe("// custom utils")
+  })
+})