novaui-cli 1.0.4 → 1.0.6

package/README.md

@@ -0,0 +1,118 @@
+# 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).
+
+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
+
+### Initialize your project
+
+```bash
+npx novaui-cli init
+```
+
+The interactive setup walks you through configuring file paths:
+
+```
+   ? Path for global.css? (src/global.css)
+   ? Path for UI components? (src/components/ui)
+   ? Path for lib (utils)? (src/lib)
+```
+
+This creates:
+
+- **`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
+
+It also installs the required dependencies: `nativewind`, `tailwindcss`, `clsx`, `tailwind-merge`, `class-variance-authority`.
+
+### Add components
+
+```bash
+npx novaui-cli add button
+npx novaui-cli add card
+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
+
+```tsx
+import { Button } from "./src/components/ui/button"
+import { Card, CardHeader, CardTitle, CardContent } from "./src/components/ui/card"
+
+export default function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome to NovaUI</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button onPress={() => console.log("Pressed!")}>
+          Get Started
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+Don't forget to import your `global.css` in your root entry file (e.g. `App.tsx`):
+
+```tsx
+import "./src/global.css"
+```
+
+## Commands
+
+| Command | Description |
+|---|---|
+| `npx novaui-cli init` | Interactive setup -- config, Tailwind, global CSS, 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 |
+
+## 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
+
+```bash
+npx novaui-cli add <name>
+```
+
+Use the component filename without the extension: `button`, `card`, `alert-dialog`, `dropdown-menu`, etc.
+
+## Configuration
+
+Running `init` creates a `components.json` in your project root:
+
+```json
+{
+  "globalCss": "src/global.css",
+  "componentsUi": "src/components/ui",
+  "lib": "src/lib"
+}
+```
+
+Edit this file or run `npx novaui-cli init` again to change paths.
+
+## Requirements
+
+| Package | Version |
+|---|---|
+| react | >= 18 |
+| react-native | >= 0.72 |
+| nativewind | >= 4 |
+| tailwindcss | >= 3 |
+
+## Links
+
+- [GitHub](https://github.com/KaloyanBehov/native-ui)
+
+## License
+
+MIT

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "novaui-cli",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "CLI for NovaUI - React Native component library with NativeWind",
   "type": "module",
   "bin": {
     "novaui": "./src/bin.js"
   },
   "files": [
-    "src"
+    "src",
+    "README.md"
   ],
   "keywords": [
     "novaui",

package/src/bin.js

@@ -3,12 +3,18 @@
 import fs from "node:fs"
 import path from "node:path"
 import readline from "node:readline"
-import { execSync } from "node:child_process"
+import { execFileSync } from "node:child_process"
+import { fileURLToPath } from "node:url"
 
 const BASE_URL =
   "https://raw.githubusercontent.com/KaloyanBehov/native-ui/main"
 
 const CONFIG_FILENAME = "components.json"
+const FETCH_TIMEOUT_MS = 15000
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const CLI_PACKAGE_JSON_PATH = path.resolve(__dirname, "../package.json")
 
 const DEFAULT_CONFIG = {
   globalCss: "src/global.css",
@@ -156,6 +162,7 @@ module.exports = {
   plugins: [],
 };
 `
+}
 
 // ─── Utils ──────────────────────────────────────────────────────────────────
 
@@ -171,10 +178,21 @@ export function cn(...inputs: ClassValue[]) {
 
 function detectPackageManager() {
   const userAgent = process.env.npm_config_user_agent || ""
-  if (userAgent.startsWith("yarn")) return "yarn add"
-  if (userAgent.startsWith("pnpm")) return "pnpm add"
-  if (userAgent.startsWith("bun")) return "bun add"
-  return "npm install"
+  if (userAgent.startsWith("yarn")) return { command: "yarn", baseArgs: ["add"] }
+  if (userAgent.startsWith("pnpm")) return { command: "pnpm", baseArgs: ["add"] }
+  if (userAgent.startsWith("bun")) return { command: "bun", baseArgs: ["add"] }
+  return { command: "npm", baseArgs: ["install"] }
+}
+
+function installPackages(packages) {
+  if (!Array.isArray(packages) || packages.length === 0) return
+  const { command, baseArgs } = detectPackageManager()
+  execFileSync(command, [...baseArgs, ...packages], { stdio: "inherit" })
+}
+
+function getInstallHint(packages) {
+  const { command, baseArgs } = detectPackageManager()
+  return `${command} ${[...baseArgs, ...packages].join(" ")}`
 }
 
 function ensureDir(dir) {
@@ -188,7 +206,7 @@ function writeIfNotExists(filePath, content, label) {
     console.log(style(c.dim, `   ℹ  ${label} already exists, skipping.`))
     return false
   }
-  fs.writeFileSync(filePath, content)
+  fs.writeFileSync(filePath, content, "utf8")
   console.log(style(c.green, `   ✓  Created ${label}`))
   return true
 }
@@ -209,6 +227,9 @@ function getMissingDeps(cwd, deps) {
 
 /** Ask user a question; returns trimmed answer or default. */
 function ask(question, defaultAnswer = "") {
+  if (process.stdin.isTTY !== true) {
+    return Promise.resolve(defaultAnswer)
+  }
   const rl = readline.createInterface({ input: process.stdin, output: process.stdout })
   const defaultPart = defaultAnswer ? style(c.dim, ` (${defaultAnswer})`) : ""
   const prompt = style(c.cyan, "   ? ") + question + defaultPart + style(c.dim, " ")
@@ -236,7 +257,55 @@ function loadConfig(cwd) {
 /** Write components.json to cwd. */
 function writeConfig(cwd, config) {
   const configPath = path.join(cwd, CONFIG_FILENAME)
-  fs.writeFileSync(configPath, JSON.stringify(config, null, 2))
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2), "utf8")
+}
+
+function getCliVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(CLI_PACKAGE_JSON_PATH, "utf8"))
+    return pkg.version || "unknown"
+  } catch {
+    return "unknown"
+  }
+}
+
+function assertValidComponentConfig(componentName, componentConfig) {
+  if (!componentConfig || typeof componentConfig !== "object") {
+    throw new Error(`Registry entry for "${componentName}" is invalid.`)
+  }
+
+  const { files, dependencies } = componentConfig
+  if (!Array.isArray(files) || files.some((file) => typeof file !== "string" || file.trim() === "")) {
+    throw new Error(`Registry entry for "${componentName}" must include a valid "files" array.`)
+  }
+
+  if (
+    dependencies !== undefined &&
+    (!Array.isArray(dependencies) ||
+      dependencies.some((dep) => typeof dep !== "string" || dep.trim() === ""))
+  ) {
+    throw new Error(`Registry entry for "${componentName}" has an invalid "dependencies" array.`)
+  }
+}
+
+async function fetchWithTimeout(url) {
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS)
+  try {
+    return await fetch(url, { signal: controller.signal })
+  } catch (error) {
+    if (error && error.name === "AbortError") {
+      throw new Error(`Request timed out after ${FETCH_TIMEOUT_MS}ms: ${url}`)
+    }
+    throw error
+  } finally {
+    clearTimeout(timeout)
+  }
+}
+
+function formatError(error) {
+  if (error instanceof Error && error.message) return error.message
+  return String(error)
 }
 
 // ─── Commands ───────────────────────────────────────────────────────────────
@@ -323,13 +392,12 @@ async function init() {
   } else {
     console.log(style(c.dim, `   Installing: ${missingDeps.join(", ")}`))
     console.log("")
-    const installCmd = detectPackageManager()
     try {
-      execSync(`${installCmd} ${missingDeps.join(" ")}`, { stdio: "inherit" })
+      installPackages(missingDeps)
     } catch {
       console.error("")
       console.error(style(c.yellow, "   ✗  Install failed. Run manually:"))
-      console.error(style(c.dim, `     ${installCmd} ${missingDeps.join(" ")}`))
+      console.error(style(c.dim, `     ${getInstallHint(missingDeps)}`))
     }
   }
 
@@ -364,13 +432,16 @@ async function add(componentName) {
 
   // 1. Fetch registry
   console.log("  Fetching registry...")
-  const registryResponse = await fetch(`${BASE_URL}/registry.json`)
+  const registryResponse = await fetchWithTimeout(`${BASE_URL}/registry.json`)
 
   if (!registryResponse.ok) {
     throw new Error(`Failed to fetch registry: ${registryResponse.statusText}`)
   }
 
   const registry = await registryResponse.json()
+  if (!registry || typeof registry !== "object" || Array.isArray(registry)) {
+    throw new Error("Registry response is not a valid object.")
+  }
 
   if (!registry[componentName]) {
     console.error(`  ✗  Component "${componentName}" not found in registry.`)
@@ -381,6 +452,7 @@ async function add(componentName) {
   }
 
   const componentConfig = registry[componentName]
+  assertValidComponentConfig(componentName, componentConfig)
   const projectConfig = loadConfig(cwd) || DEFAULT_CONFIG
   const targetBaseDir = path.join(cwd, projectConfig.componentsUi)
   ensureDir(targetBaseDir)
@@ -408,7 +480,7 @@ async function add(componentName) {
     const destPath = path.join(targetBaseDir, fileName)
 
     console.log(`  Downloading ${fileName}...`)
-    const fileResponse = await fetch(fileUrl)
+    const fileResponse = await fetchWithTimeout(fileUrl)
 
     if (!fileResponse.ok) {
       console.error(`  ✗  Failed to download ${fileName}`)
@@ -416,7 +488,7 @@ async function add(componentName) {
     }
 
     const content = await fileResponse.text()
-    fs.writeFileSync(destPath, content)
+    fs.writeFileSync(destPath, content, "utf8")
     console.log(`  ✓  Added ${fileName}`)
   }
 
@@ -430,10 +502,7 @@ async function add(componentName) {
       console.log("")
       console.log(`  Installing dependencies: ${missingDeps.join(", ")}...`)
       try {
-        const installCmd = detectPackageManager()
-        execSync(`${installCmd} ${missingDeps.join(" ")}`, {
-          stdio: "inherit",
-        })
+        installPackages(missingDeps)
       } catch {
         console.error("  ✗  Failed to install dependencies automatically.")
       }
@@ -447,9 +516,12 @@ async function add(componentName) {
 
 function showHelp() {
   console.log(ASCII_BANNER)
+  console.log(style(c.dim, `   Version: ${getCliVersion()}`))
+  console.log("")
   console.log(style(c.bold, "   Usage"))
   console.log(style(c.dim, "   novaui init              Set up NovaUI (config, Tailwind, global.css, utils)"))
   console.log(style(c.dim, "   novaui add <component>  Add a component (e.g. button, card)"))
+  console.log(style(c.dim, "   novaui --version         Show CLI version"))
   console.log("")
   console.log(style(c.bold, "   Examples"))
   console.log(style(c.cyan, "   npx novaui init"))
@@ -458,6 +530,10 @@ function showHelp() {
   console.log("")
 }
 
+function showVersion() {
+  console.log(getCliVersion())
+}
+
 // ─── Main ───────────────────────────────────────────────────────────────────
 
 const command = process.argv[2]
@@ -476,6 +552,10 @@ async function main() {
       case "-h":
         showHelp()
         break
+      case "--version":
+      case "-v":
+        showVersion()
+        break
       default:
         if (command) {
           // Backwards compatible: treat unknown command as component name
@@ -487,7 +567,7 @@ async function main() {
     }
   } catch (error) {
     console.error("")
-    console.error(`  ✗  Error: ${error.message}`)
+    console.error(`  ✗  Error: ${formatError(error)}`)
     process.exit(1)
   }
 }