novaui-cli 1.0.7 → 1.0.8

package/README.md

@@ -1,35 +1,108 @@
 # novaui-cli
 
-The CLI for **NovaUI** -- a React Native UI component library with 50+ components built on [NativeWind](https://www.nativewind.dev/) (Tailwind CSS for React Native).
+The CLI for **NovaUI** — a React Native UI component library with 50+ components built on [NativeWind](https://www.nativewind.dev/) (Tailwind CSS for React Native).
 
-Inspired by [shadcn/ui](https://ui.shadcn.com), adapted for mobile. Components are copied directly into your project -- you own the code, customize anything.
+Inspired by [shadcn/ui](https://ui.shadcn.com), adapted for mobile. Components are copied directly into your project — you own the code, customize anything.
 
-## Getting Started
+## Prerequisites
 
-### Initialize your project
+Before using NovaUI CLI, ensure you have:
+
+- **React** >= 18
+- **React Native** >= 0.72
+- **NativeWind** >= 4 (must be set up first — see [NativeWind docs](https://www.nativewind.dev/docs/getting-started/installation))
+- **Tailwind CSS** >= 3
+
+> **⚠️ Important**: NovaUI requires NativeWind to be properly configured. If you haven't set up NativeWind yet, please follow the [NativeWind installation guide](https://www.nativewind.dev/docs/getting-started/installation) before proceeding.
+
+## Quick Start
+
+### Step 1: Set Up NativeWind
+
+NovaUI requires NativeWind to be installed and configured. If you haven't done this yet:
+
+1. Install NativeWind and Tailwind CSS:
+   ```bash
+   npm install nativewind
+   npm install -D tailwindcss
+   ```
+
+2. Initialize Tailwind:
+   ```bash
+   npx tailwindcss init
+   ```
+
+3. Configure NativeWind in your `tailwind.config.js`:
+   ```js
+   module.exports = {
+     content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
+     presets: [require("nativewind/preset")],
+   }
+   ```
+
+4. Add NativeWind to your Babel config (`babel.config.js`):
+   ```js
+   module.exports = {
+     plugins: ["nativewind/babel"],
+   }
+   ```
+
+For complete setup instructions, visit the [NativeWind documentation](https://www.nativewind.dev/docs/getting-started/installation).
+
+### Step 2: Initialize NovaUI
+
+Run the interactive setup command:
 
 ```bash
 npx novaui-cli init
 ```
 
-The interactive setup walks you through configuring file paths:
+The CLI will prompt you to configure file paths:
 
 ```
-   ? Path for global.css? (src/global.css)
-   ? Path for UI components? (src/components/ui)
-   ? Path for lib (utils)? (src/lib)
+? Path for global.css? (src/global.css)
+? Path for UI components? (src/components/ui)
+? Path for lib (utils)? (src/lib)
 ```
 
-This creates:
+Press Enter to accept defaults or type custom paths.
+
+#### What Gets Created
 
-- **`components.json`** -- stores your configured paths
-- **`tailwind.config.js`** -- NovaUI theme with colors, border radius, and NativeWind preset
-- **`global.css`** -- light and dark theme CSS variables
-- **`lib/utils.ts`** -- the `cn()` class merging utility
+The `init` command creates:
 
-It also installs the required dependencies: `nativewind`, `tailwindcss`, `clsx`, `tailwind-merge`, `class-variance-authority`.
+- **`components.json`** — Stores your configured paths for future component additions
+- **`tailwind.config.js`** — NovaUI theme configuration with colors, border radius, and NativeWind preset
+- **`global.css`** — Light and dark theme CSS variables
+- **`lib/utils.ts`** — The `cn()` utility function for merging Tailwind classes
+
+#### Dependencies Installed
+
+The CLI automatically installs:
+
+- `nativewind` — Tailwind CSS for React Native
+- `tailwindcss` — Tailwind CSS framework
+- `clsx` — Utility for constructing className strings
+- `tailwind-merge` — Utility to merge Tailwind CSS classes without conflicts
+- `class-variance-authority` — Utility for creating type-safe component variants
+
+### Step 3: Import Global Styles
+
+Import the `global.css` file in your root entry file (typically `App.tsx`):
+
+```tsx
+import "./src/global.css"
+
+export default function App() {
+  // Your app content
+}
+```
 
-### Add components
+This ensures NovaUI's theme variables are available throughout your app.
+
+### Step 4: Add Components
+
+Add components to your project:
 
 ```bash
 npx novaui-cli add button
@@ -39,7 +112,11 @@ npx novaui-cli add dialog
 
 Components are copied into your configured directory (default: `src/components/ui/`). Each component's dependencies are installed automatically.
 
-### Use them
+**Component naming**: Use the filename without extension — `button`, `card`, `alert-dialog`, `dropdown-menu`, etc.
+
+### Step 5: Use Components
+
+Import and use components in your app:
 
 ```tsx
 import { Button } from "./src/components/ui/button"
@@ -61,34 +138,44 @@ export default function App() {
 }
 ```
 
-Don't forget to import your `global.css` in your root entry file (e.g. `App.tsx`):
-
-```tsx
-import "./src/global.css"
-```
-
-## Commands
+## CLI Commands
 
 | Command | Description |
-|---|---|
-| `npx novaui-cli init` | Interactive setup -- config, Tailwind, global CSS, utils |
+|---------|-------------|
+| `npx novaui-cli init` | Interactive setup — creates config, Tailwind config, global CSS, and utils |
 | `npx novaui-cli add <name>` | Add a component to your project |
 | `npx novaui-cli --version` | Show CLI version |
-| `npx novaui-cli --help` | Show help |
+| `npx novaui-cli --help` | Show help and available commands |
 
 ## Available Components
 
-Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Button Group, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Dialog, Drawer, Dropdown Menu, Empty, Field, Hover Card, Input, Input Group, Input OTP, Item, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Skeleton, Spinner, Switch, Table, Tabs, Text, Textarea, Toggle, Toggle Group, Typography
+NovaUI includes 50+ components ready to use:
+
+**Layout & Structure**: Accordion, Alert, Alert Dialog, Aspect Ratio, Card, Collapsible, Dialog, Drawer, Separator, Sheet
+
+**Navigation**: Breadcrumb, Command, Context Menu, Dropdown Menu, Menubar, Navigation Menu, Tabs
+
+**Forms & Input**: Button, Button Group, Checkbox, Combobox, Field, Input, Input Group, Input OTP, Label, Radio Group, Select, Switch, Textarea, Toggle, Toggle Group
+
+**Data Display**: Avatar, Badge, Calendar, Carousel, Chart, Empty, Pagination, Progress, Skeleton, Spinner, Table, Typography
+
+**Overlays**: Hover Card, Popover, Resizable, Scroll Area
+
+**Text**: Text
+
+Add any component with:
 
 ```bash
-npx novaui-cli add <name>
+npx novaui-cli add <component-name>
 ```
 
-Use the component filename without the extension: `button`, `card`, `alert-dialog`, `dropdown-menu`, etc.
+**Component naming**: Use the filename without extension — `button`, `card`, `alert-dialog`, `dropdown-menu`, etc.
 
 ## Configuration
 
-Running `init` creates a `components.json` in your project root:
+### Customizing Paths
+
+Running `init` creates a `components.json` file in your project root:
 
 ```json
 {
@@ -98,20 +185,44 @@ Running `init` creates a `components.json` in your project root:
 }
 ```
 
-Edit this file or run `npx novaui-cli init` again to change paths.
+To change these paths:
+- Edit `components.json` directly, or
+- Run `npx novaui-cli init` again to reconfigure
+
+### Customizing Themes
+
+NovaUI components use CSS variables for theming. Customize colors, spacing, and design tokens in your `global.css` file. The generated `tailwind.config.js` includes a comprehensive theme configuration you can customize.
+
+## Troubleshooting
+
+### Components Not Styling Correctly
+
+- ✅ Ensure `global.css` is imported in your root file
+- ✅ Verify NativeWind is configured in `babel.config.js`
+- ✅ Check that `tailwind.config.js` includes the NativeWind preset
+- ✅ Ensure content paths in `tailwind.config.js` include your component directories
+
+### Build Issues
+
+- Clear cache: `npx react-native start --reset-cache`
+- Reinstall dependencies: `rm -rf node_modules && npm install`
+- Verify all peer dependencies are installed
 
 ## Requirements
 
-| Package | Version |
-|---|---|
+| Package | Minimum Version |
+|---------|----------------|
 | react | >= 18 |
 | react-native | >= 0.72 |
 | nativewind | >= 4 |
 | tailwindcss | >= 3 |
 
-## Links
+## Resources
 
-- [GitHub](https://github.com/KaloyanBehov/native-ui)
+- 📖 [NovaUI Documentation](https://github.com/KaloyanBehov/novaui) — Full component documentation
+- 🎨 [NativeWind Documentation](https://www.nativewind.dev/docs) — Learn more about NativeWind
+- 🐛 [GitHub Issues](https://github.com/KaloyanBehov/novaui/issues) — Report bugs or request features
+- 💬 [GitHub Discussions](https://github.com/KaloyanBehov/novaui/discussions) — Ask questions
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "novaui-cli",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "CLI for NovaUI - React Native component library with NativeWind",
   "type": "module",
   "bin": {
@@ -17,9 +17,20 @@
     "nativewind",
     "ui-components"
   ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "vitest": "^3.0.0"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/KaloyanBehov/native-ui"
+    "url": "https://github.com/KaloyanBehov/novaui"
+  },
+  "homepage": "https://github.com/KaloyanBehov/novaui#readme",
+  "bugs": {
+    "url": "https://github.com/KaloyanBehov/novaui/issues"
   }
 }

package/src/__tests__/commands.test.js

@@ -0,0 +1,342 @@
+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)
+  })
+
+  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, "src", "lib"))).toBe(true)
+    expect(fs.existsSync(path.join(tmp, "src"))).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)
+  })
+})

package/src/__tests__/helpers.test.js

@@ -0,0 +1,372 @@
+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,
+  detectPackageManager,
+  ensureDir,
+  writeIfNotExists,
+  getMissingDeps,
+  loadConfig,
+  writeConfig,
+  assertValidComponentConfig,
+  formatError,
+} from "../bin.js"
+
+// ─── Test helpers ───────────────────────────────────────────────────────────
+
+function makeTmpDir() {
+  return fs.mkdtempSync(path.join(os.tmpdir(), "novaui-test-"))
+}
+
+function cleanTmpDir(dir) {
+  fs.rmSync(dir, { recursive: true, force: true })
+}
+
+// ─── DEFAULT_CONFIG ─────────────────────────────────────────────────────────
+
+describe("DEFAULT_CONFIG", () => {
+  it("has the expected default paths", () => {
+    expect(DEFAULT_CONFIG).toEqual({
+      globalCss: "src/global.css",
+      componentsUi: "src/components/ui",
+      lib: "src/lib",
+    })
+  })
+})
+
+// ─── detectPackageManager ───────────────────────────────────────────────────
+
+describe("detectPackageManager", () => {
+  const originalAgent = process.env.npm_config_user_agent
+
+  afterEach(() => {
+    if (originalAgent !== undefined) {
+      process.env.npm_config_user_agent = originalAgent
+    } else {
+      delete process.env.npm_config_user_agent
+    }
+  })
+
+  it("returns npm by default", () => {
+    process.env.npm_config_user_agent = ""
+    const result = detectPackageManager()
+    expect(result.command).toBe("npm")
+    expect(result.baseArgs).toEqual(["install"])
+  })
+
+  it("detects yarn", () => {
+    process.env.npm_config_user_agent = "yarn/1.22.0 npm/? node/v18.0.0"
+    const result = detectPackageManager()
+    expect(result.command).toBe("yarn")
+    expect(result.baseArgs).toEqual(["add"])
+  })
+
+  it("detects pnpm", () => {
+    process.env.npm_config_user_agent = "pnpm/8.0.0 npm/? node/v18.0.0"
+    const result = detectPackageManager()
+    expect(result.command).toBe("pnpm")
+    expect(result.baseArgs).toEqual(["add"])
+  })
+
+  it("detects bun", () => {
+    process.env.npm_config_user_agent = "bun/1.0.0"
+    const result = detectPackageManager()
+    expect(result.command).toBe("bun")
+    expect(result.baseArgs).toEqual(["add"])
+  })
+})
+
+// ─── ensureDir ──────────────────────────────────────────────────────────────
+
+describe("ensureDir", () => {
+  let tmp
+
+  beforeEach(() => {
+    tmp = makeTmpDir()
+  })
+
+  afterEach(() => {
+    cleanTmpDir(tmp)
+  })
+
+  it("creates a directory that does not exist", () => {
+    const dir = path.join(tmp, "a", "b", "c")
+    expect(fs.existsSync(dir)).toBe(false)
+    ensureDir(dir)
+    expect(fs.existsSync(dir)).toBe(true)
+    expect(fs.statSync(dir).isDirectory()).toBe(true)
+  })
+
+  it("does nothing if directory already exists", () => {
+    const dir = path.join(tmp, "existing")
+    fs.mkdirSync(dir)
+    ensureDir(dir)
+    expect(fs.existsSync(dir)).toBe(true)
+  })
+})
+
+// ─── writeIfNotExists ───────────────────────────────────────────────────────
+
+describe("writeIfNotExists", () => {
+  let tmp
+
+  beforeEach(() => {
+    tmp = makeTmpDir()
+  })
+
+  afterEach(() => {
+    cleanTmpDir(tmp)
+  })
+
+  it("creates a file when it does not exist", () => {
+    const filePath = path.join(tmp, "test.txt")
+    const result = writeIfNotExists(filePath, "hello", "test.txt")
+    expect(result).toBe(true)
+    expect(fs.readFileSync(filePath, "utf8")).toBe("hello")
+  })
+
+  it("does not overwrite an existing file", () => {
+    const filePath = path.join(tmp, "test.txt")
+    fs.writeFileSync(filePath, "original")
+    const result = writeIfNotExists(filePath, "new content", "test.txt")
+    expect(result).toBe(false)
+    expect(fs.readFileSync(filePath, "utf8")).toBe("original")
+  })
+})
+
+// ─── getMissingDeps ─────────────────────────────────────────────────────────
+
+describe("getMissingDeps", () => {
+  let tmp
+
+  beforeEach(() => {
+    tmp = makeTmpDir()
+  })
+
+  afterEach(() => {
+    cleanTmpDir(tmp)
+  })
+
+  it("returns all deps when no package.json exists", () => {
+    const result = getMissingDeps(tmp, ["react", "react-native"])
+    expect(result).toEqual(["react", "react-native"])
+  })
+
+  it("returns only missing deps", () => {
+    const pkgJson = {
+      dependencies: { react: "^18.0.0", clsx: "^2.0.0" },
+      devDependencies: { typescript: "^5.0.0" },
+    }
+    fs.writeFileSync(path.join(tmp, "package.json"), JSON.stringify(pkgJson))
+
+    const result = getMissingDeps(tmp, ["react", "nativewind", "typescript", "tailwindcss"])
+    expect(result).toEqual(["nativewind", "tailwindcss"])
+  })
+
+  it("returns empty array when all deps are present", () => {
+    const pkgJson = {
+      dependencies: { react: "^18.0.0", nativewind: "^4.0.0" },
+    }
+    fs.writeFileSync(path.join(tmp, "package.json"), JSON.stringify(pkgJson))
+
+    const result = getMissingDeps(tmp, ["react", "nativewind"])
+    expect(result).toEqual([])
+  })
+
+  it("checks devDependencies too", () => {
+    const pkgJson = {
+      devDependencies: { vitest: "^1.0.0" },
+    }
+    fs.writeFileSync(path.join(tmp, "package.json"), JSON.stringify(pkgJson))
+
+    const result = getMissingDeps(tmp, ["vitest"])
+    expect(result).toEqual([])
+  })
+})
+
+// ─── loadConfig / writeConfig ───────────────────────────────────────────────
+
+describe("loadConfig / writeConfig", () => {
+  let tmp
+
+  beforeEach(() => {
+    tmp = makeTmpDir()
+  })
+
+  afterEach(() => {
+    cleanTmpDir(tmp)
+  })
+
+  it("returns null when no config file exists", () => {
+    expect(loadConfig(tmp)).toBeNull()
+  })
+
+  it("writes and reads config correctly", () => {
+    const config = {
+      globalCss: "app/global.css",
+      componentsUi: "app/components/ui",
+      lib: "app/lib",
+    }
+    writeConfig(tmp, config)
+
+    const configPath = path.join(tmp, CONFIG_FILENAME)
+    expect(fs.existsSync(configPath)).toBe(true)
+
+    const loaded = loadConfig(tmp)
+    expect(loaded).toEqual({ ...DEFAULT_CONFIG, ...config })
+  })
+
+  it("merges with DEFAULT_CONFIG on partial config", () => {
+    const partial = { globalCss: "custom/global.css" }
+    fs.writeFileSync(
+      path.join(tmp, CONFIG_FILENAME),
+      JSON.stringify(partial),
+      "utf8"
+    )
+
+    const loaded = loadConfig(tmp)
+    expect(loaded.globalCss).toBe("custom/global.css")
+    expect(loaded.componentsUi).toBe(DEFAULT_CONFIG.componentsUi)
+    expect(loaded.lib).toBe(DEFAULT_CONFIG.lib)
+  })
+
+  it("returns null for invalid JSON", () => {
+    fs.writeFileSync(path.join(tmp, CONFIG_FILENAME), "not json!", "utf8")
+    expect(loadConfig(tmp)).toBeNull()
+  })
+})
+
+// ─── getTailwindConfigContent ───────────────────────────────────────────────
+
+describe("getTailwindConfigContent", () => {
+  it("generates valid tailwind config with default paths", () => {
+    const content = getTailwindConfigContent(DEFAULT_CONFIG)
+    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("var(--radius)")
+    expect(content).toContain("./src/**/*.{js,jsx,ts,tsx}")
+  })
+
+  it("includes custom componentsUi path in content array", () => {
+    const config = { ...DEFAULT_CONFIG, componentsUi: "app/ui" }
+    const content = getTailwindConfigContent(config)
+    expect(content).toContain("./app/ui/**/*.{js,jsx,ts,tsx}")
+  })
+})
+
+// ─── assertValidComponentConfig ─────────────────────────────────────────────
+
+describe("assertValidComponentConfig", () => {
+  it("accepts a valid config with files", () => {
+    expect(() =>
+      assertValidComponentConfig("button", {
+        files: ["src/components/ui/button.tsx"],
+      })
+    ).not.toThrow()
+  })
+
+  it("accepts a valid config with files and dependencies", () => {
+    expect(() =>
+      assertValidComponentConfig("button", {
+        files: ["src/components/ui/button.tsx"],
+        dependencies: ["class-variance-authority"],
+      })
+    ).not.toThrow()
+  })
+
+  it("throws for null config", () => {
+    expect(() => assertValidComponentConfig("button", null)).toThrow(
+      /invalid/i
+    )
+  })
+
+  it("throws for missing files array", () => {
+    expect(() =>
+      assertValidComponentConfig("button", { dependencies: [] })
+    ).toThrow(/files/i)
+  })
+
+  it("throws for empty string in files array", () => {
+    expect(() =>
+      assertValidComponentConfig("button", { files: ["valid.tsx", ""] })
+    ).toThrow(/files/i)
+  })
+
+  it("throws for non-string in files array", () => {
+    expect(() =>
+      assertValidComponentConfig("button", { files: [123] })
+    ).toThrow(/files/i)
+  })
+
+  it("throws for invalid dependencies", () => {
+    expect(() =>
+      assertValidComponentConfig("button", {
+        files: ["button.tsx"],
+        dependencies: [123],
+      })
+    ).toThrow(/dependencies/i)
+  })
+
+  it("throws for empty string in dependencies", () => {
+    expect(() =>
+      assertValidComponentConfig("button", {
+        files: ["button.tsx"],
+        dependencies: ["valid", ""],
+      })
+    ).toThrow(/dependencies/i)
+  })
+})
+
+// ─── GLOBAL_CSS_CONTENT ─────────────────────────────────────────────────────
+
+describe("GLOBAL_CSS_CONTENT", () => {
+  it("contains tailwind directives", () => {
+    expect(GLOBAL_CSS_CONTENT).toContain("@tailwind base")
+    expect(GLOBAL_CSS_CONTENT).toContain("@tailwind components")
+    expect(GLOBAL_CSS_CONTENT).toContain("@tailwind utilities")
+  })
+
+  it("contains light theme variables", () => {
+    expect(GLOBAL_CSS_CONTENT).toContain(":root")
+    expect(GLOBAL_CSS_CONTENT).toContain("--background:")
+    expect(GLOBAL_CSS_CONTENT).toContain("--primary:")
+    expect(GLOBAL_CSS_CONTENT).toContain("--radius:")
+  })
+
+  it("contains dark theme variables", () => {
+    expect(GLOBAL_CSS_CONTENT).toContain(".dark")
+  })
+})
+
+// ─── UTILS_CONTENT ──────────────────────────────────────────────────────────
+
+describe("UTILS_CONTENT", () => {
+  it("exports the cn function", () => {
+    expect(UTILS_CONTENT).toContain("export function cn")
+    expect(UTILS_CONTENT).toContain("twMerge")
+    expect(UTILS_CONTENT).toContain("clsx")
+  })
+})
+
+// ─── formatError ────────────────────────────────────────────────────────────
+
+describe("formatError", () => {
+  it("extracts message from Error objects", () => {
+    expect(formatError(new Error("test error"))).toBe("test error")
+  })
+
+  it("converts non-Error values to string", () => {
+    expect(formatError("string error")).toBe("string error")
+    expect(formatError(42)).toBe("42")
+    expect(formatError(null)).toBe("null")
+  })
+})

package/src/bin.js

@@ -7,7 +7,7 @@ import { execFileSync } from "node:child_process"
 import { fileURLToPath } from "node:url"
 
 const BASE_URL =
-  "https://raw.githubusercontent.com/KaloyanBehov/native-ui/main"
+  "https://raw.githubusercontent.com/KaloyanBehov/novaui/main"
 
 const CONFIG_FILENAME = "components.json"
 const FETCH_TIMEOUT_MS = 15000
@@ -534,42 +534,70 @@ function showVersion() {
   console.log(getCliVersion())
 }
 
+// ─── Exports (for testing) ──────────────────────────────────────────────────
+
+export {
+  DEFAULT_CONFIG,
+  CONFIG_FILENAME,
+  GLOBAL_CSS_CONTENT,
+  UTILS_CONTENT,
+  getTailwindConfigContent,
+  detectPackageManager,
+  ensureDir,
+  writeIfNotExists,
+  getMissingDeps,
+  loadConfig,
+  writeConfig,
+  assertValidComponentConfig,
+  fetchWithTimeout,
+  formatError,
+  getCliVersion,
+  init,
+  add,
+}
+
 // ─── Main ───────────────────────────────────────────────────────────────────
 
-const command = process.argv[2]
-const arg = process.argv[3]
+const isDirectRun =
+  process.argv[1] &&
+  (process.argv[1] === fileURLToPath(import.meta.url) ||
+    process.argv[1].endsWith("/bin.js"))
 
-async function main() {
-  try {
-    switch (command) {
-      case "init":
-        await init()
-        break
-      case "add":
-        await add(arg)
-        break
-      case "--help":
-      case "-h":
-        showHelp()
-        break
-      case "--version":
-      case "-v":
-        showVersion()
-        break
-      default:
-        if (command) {
-          // Backwards compatible: treat unknown command as component name
-          await add(command)
-        } else {
+if (isDirectRun) {
+  const command = process.argv[2]
+  const arg = process.argv[3]
+
+  async function main() {
+    try {
+      switch (command) {
+        case "init":
+          await init()
+          break
+        case "add":
+          await add(arg)
+          break
+        case "--help":
+        case "-h":
           showHelp()
-        }
-        break
+          break
+        case "--version":
+        case "-v":
+          showVersion()
+          break
+        default:
+          if (command) {
+            await add(command)
+          } else {
+            showHelp()
+          }
+          break
+      }
+    } catch (error) {
+      console.error("")
+      console.error(`  ✗  Error: ${formatError(error)}`)
+      process.exit(1)
     }
-  } catch (error) {
-    console.error("")
-    console.error(`  ✗  Error: ${formatError(error)}`)
-    process.exit(1)
   }
-}
 
-main()
+  main()
+}