novaui-cli 1.1.2 → 1.1.3

package/src/constants.js

@@ -1,15 +1,22 @@
-export const BASE_URL = 'https://raw.githubusercontent.com/KaloyanBehov/novaui/main'
+// Allow overriding branch via environment variable (useful for testing)
+const BRANCH = process.env.NOVAUI_BRANCH || 'main';
 
-export const CONFIG_FILENAME = 'components.json'
+export const BASE_URL = `https://raw.githubusercontent.com/KaloyanBehov/novaui/${BRANCH}`;
 
-export const FETCH_TIMEOUT_MS = 15000
+export const REGISTRY_URL = `${BASE_URL}/packages/registry/registry.json`;
+
+export const THEMES_BASE_URL = `${BASE_URL}/packages/themes`;
+
+export const CONFIG_FILENAME = 'components.json';
+
+export const FETCH_TIMEOUT_MS = 15000;
 
 export const DEFAULT_CONFIG = {
   globalCss: 'global.css',
   componentsUi: 'components/ui',
   lib: 'lib',
   theme: 'default',
-}
+};
 
 export const UTILS_CONTENT = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
@@ -17,4 +24,78 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`
+`;
+
+// Default theme bundled as fallback (always available, no network required)
+export const DEFAULT_THEME_CSS = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+`;
+
+export const BABEL_CONFIG_CONTENT = `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};
+`;
+
+export const METRO_CONFIG_CONTENT = (
+  globalCssPath
+) => `const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname)
+
+module.exports = withNativeWind(config, { input: './${globalCssPath}' })
+`;

package/src/themes/index.js

@@ -1,17 +1,48 @@
-import { DEFAULT_THEME_CSS } from './default.js'
-import { OCEAN_THEME_CSS } from './ocean.js'
-import { SUNSET_THEME_CSS } from './sunset.js'
+import { THEMES_BASE_URL, DEFAULT_THEME_CSS } from '../constants.js'
+import { fetchWithTimeout } from '../utils/fetch.js'
 
-export const THEMES = {
-  default: DEFAULT_THEME_CSS,
-  ocean: OCEAN_THEME_CSS,
-  sunset: SUNSET_THEME_CSS,
-}
-
-export const THEME_KEYS = Object.keys(THEMES)
+// Available theme names (fetched from GitHub)
+export const THEME_KEYS = ['default', 'ocean', 'sunset']
 
-export function getThemeCssContent(themeName) {
-  if (typeof themeName !== 'string') return THEMES.default
-  const normalized = themeName.trim().toLowerCase()
-  return THEMES[normalized] || THEMES.default
+/**
+ * Fetch theme CSS content from GitHub.
+ * Falls back to bundled default theme if fetch fails or theme is 'default'.
+ * 
+ * @param {string} themeName - The theme name (default, ocean, sunset)
+ * @returns {Promise<string>} The theme CSS content
+ */
+export async function getThemeCssContent(themeName) {
+  const normalized = (typeof themeName === 'string' ? themeName : 'default').trim().toLowerCase()
+  const theme = THEME_KEYS.includes(normalized) ? normalized : 'default'
+  
+  // Use bundled default theme (no network call needed)
+  if (theme === 'default') {
+    return DEFAULT_THEME_CSS
+  }
+  
+  // Fetch other themes from GitHub
+  const themeUrl = `${THEMES_BASE_URL}/${theme}.js`
+  
+  try {
+    const response = await fetchWithTimeout(themeUrl)
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch theme: ${response.status}`)
+    }
+    
+    const content = await response.text()
+    
+    // Extract the CSS content from the export statement
+    // Example: export const OCEAN_THEME_CSS = `...`
+    const match = content.match(/export const \w+_THEME_CSS = `([^`]*)`/s)
+    if (match && match[1]) {
+      return match[1]
+    }
+    
+    throw new Error('Invalid theme format')
+  } catch (error) {
+    // Fallback to default theme on error
+    console.warn(`Warning: Could not fetch "${theme}" theme, using default. ${error.message}`)
+    return DEFAULT_THEME_CSS
+  }
 }

package/src/utils/config.js

@@ -1,22 +1,22 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { CONFIG_FILENAME, DEFAULT_CONFIG } from '../constants.js'
+import fs from 'node:fs';
+import path from 'node:path';
+import { CONFIG_FILENAME, DEFAULT_CONFIG } from '../constants.js';
 
 /** Load components.json from cwd; returns null if missing or invalid. */
 export function loadConfig(cwd) {
-  const configPath = path.join(cwd, CONFIG_FILENAME)
-  if (!fs.existsSync(configPath)) return null
+  const configPath = path.join(cwd, CONFIG_FILENAME);
+  if (!fs.existsSync(configPath)) return null;
   try {
-    const raw = JSON.parse(fs.readFileSync(configPath, 'utf8'))
-    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null
-    return { ...DEFAULT_CONFIG, ...raw }
+    const raw = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null;
+    return { ...DEFAULT_CONFIG, ...raw };
   } catch {
-    return null
+    return null;
   }
 }
 
 /** Write components.json to cwd. */
 export function writeConfig(cwd, config) {
-  const configPath = path.join(cwd, CONFIG_FILENAME)
-  fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8')
+  const configPath = path.join(cwd, CONFIG_FILENAME);
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
 }

package/src/utils/deps.js

@@ -1,36 +1,40 @@
-import { execFileSync } from 'node:child_process'
-import fs from 'node:fs'
-import path from 'node:path'
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
 
 export function detectPackageManager() {
-  const userAgent = process.env.npm_config_user_agent || ''
-  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'] }
+  const userAgent = process.env.npm_config_user_agent || '';
+  if (userAgent.startsWith('yarn')) return { command: 'yarn', baseArgs: ['add'], devFlag: '--dev' };
+  if (userAgent.startsWith('pnpm')) return { command: 'pnpm', baseArgs: ['add'], devFlag: '--save-dev' };
+  if (userAgent.startsWith('bun')) return { command: 'bun', baseArgs: ['add'], devFlag: '--dev' };
+  return { command: 'npm', baseArgs: ['install'], devFlag: '--save-dev' };
 }
 
-export function installPackages(packages) {
-  if (!Array.isArray(packages) || packages.length === 0) return
-  const { command, baseArgs } = detectPackageManager()
-  execFileSync(command, [...baseArgs, ...packages], { stdio: 'inherit' })
+export function installPackages(packages, options = {}) {
+  if (!Array.isArray(packages) || packages.length === 0) return;
+  const { dev = false } = options;
+  const { command, baseArgs, devFlag } = detectPackageManager();
+  const args = dev ? [...baseArgs, devFlag, ...packages] : [...baseArgs, ...packages];
+  execFileSync(command, args, { stdio: 'inherit' });
 }
 
-export function getInstallHint(packages) {
-  const { command, baseArgs } = detectPackageManager()
-  return `${command} ${[...baseArgs, ...packages].join(' ')}`
+export function getInstallHint(packages, options = {}) {
+  const { dev = false } = options;
+  const { command, baseArgs, devFlag } = detectPackageManager();
+  const args = dev ? [...baseArgs, devFlag, ...packages] : [...baseArgs, ...packages];
+  return `${command} ${args.join(' ')}`;
 }
 
 /** Returns which of the requested deps are not listed in package.json (dependencies or devDependencies). */
 export function getMissingDeps(cwd, deps) {
-  const pkgPath = path.join(cwd, 'package.json')
+  const pkgPath = path.join(cwd, 'package.json');
   if (!fs.existsSync(pkgPath)) {
-    return [...deps]
+    return [...deps];
   }
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
   const installed = new Set([
     ...Object.keys(pkg.dependencies || {}),
     ...Object.keys(pkg.devDependencies || {}),
-  ])
-  return deps.filter(d => !installed.has(d))
+  ]);
+  return deps.filter((d) => !installed.has(d));
 }

package/src/utils/fetch.js

@@ -1,21 +1,21 @@
-import { FETCH_TIMEOUT_MS } from '../constants.js'
+import { FETCH_TIMEOUT_MS } from '../constants.js';
 
 export async function fetchWithTimeout(url) {
-  const controller = new AbortController()
-  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS)
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
   try {
-    return await fetch(url, { signal: controller.signal })
+    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 new Error(`Request timed out after ${FETCH_TIMEOUT_MS}ms: ${url}`);
     }
-    throw error
+    throw error;
   } finally {
-    clearTimeout(timeout)
+    clearTimeout(timeout);
   }
 }
 
 export function formatError(error) {
-  if (error instanceof Error && error.message) return error.message
-  return String(error)
+  if (error instanceof Error && error.message) return error.message;
+  return String(error);
 }

package/src/utils/fs-helpers.js

@@ -1,18 +1,18 @@
-import fs from 'node:fs'
-import pc from 'picocolors'
+import fs from 'node:fs';
+import pc from 'picocolors';
 
 export function ensureDir(dir) {
   if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true })
+    fs.mkdirSync(dir, { recursive: true });
   }
 }
 
 export function writeIfNotExists(filePath, content, label) {
   if (fs.existsSync(filePath)) {
-    console.log(pc.dim(`   ℹ  ${label} already exists, skipping.`))
-    return false
+    console.log(pc.dim(`   ℹ  ${label} already exists, skipping.`));
+    return false;
   }
-  fs.writeFileSync(filePath, content, 'utf8')
-  console.log(pc.green(`   ✓  Created ${label}`))
-  return true
+  fs.writeFileSync(filePath, content, 'utf8');
+  console.log(pc.green(`   ✓  Created ${label}`));
+  return true;
 }

package/src/utils/fuzzy.js

@@ -0,0 +1,99 @@
+/**
+ * Fuzzy matching utilities for better error messages
+ * Helps users find components when they mistype names
+ */
+
+/**
+ * Calculate Levenshtein distance between two strings
+ * Used for finding similar component names
+ */
+function levenshteinDistance(str1, str2) {
+  const len1 = str1.length
+  const len2 = str2.length
+  const matrix = []
+
+  for (let i = 0; i <= len1; i++) {
+    matrix[i] = [i]
+  }
+
+  for (let j = 0; j <= len2; j++) {
+    matrix[0][j] = j
+  }
+
+  for (let i = 1; i <= len1; i++) {
+    for (let j = 1; j <= len2; j++) {
+      const cost = str1[i - 1] === str2[j - 1] ? 0 : 1
+      matrix[i][j] = Math.min(
+        matrix[i - 1][j] + 1,
+        matrix[i][j - 1] + 1,
+        matrix[i - 1][j - 1] + cost
+      )
+    }
+  }
+
+  return matrix[len1][len2]
+}
+
+/**
+ * Find similar component names based on typo distance
+ * Returns up to maxResults similar names, sorted by similarity
+ */
+export function findSimilarComponents(input, availableComponents, maxResults = 5) {
+  const normalizedInput = input.toLowerCase().trim()
+  
+  const scored = availableComponents
+    .map(name => ({
+      name,
+      distance: levenshteinDistance(normalizedInput, name.toLowerCase()),
+      startsWithSame: name.toLowerCase().startsWith(normalizedInput[0]),
+    }))
+    .filter(item => item.distance <= 4) // Only suggest if reasonably close
+    .sort((a, b) => {
+      if (a.distance !== b.distance) {
+        return a.distance - b.distance
+      }
+      if (a.startsWithSame !== b.startsWithSame) {
+        return a.startsWithSame ? -1 : 1
+      }
+      return a.name.localeCompare(b.name)
+    })
+    .slice(0, maxResults)
+    .map(item => item.name)
+  
+  return scored
+}
+
+/**
+ * Format a helpful error message for missing components
+ */
+export function formatComponentNotFoundError(componentName, availableComponents) {
+  const similar = findSimilarComponents(componentName, availableComponents)
+  
+  let message = `Component "${componentName}" not found in registry.`
+  
+  if (similar.length > 0) {
+    message += '\n\n  Did you mean one of these?'
+    similar.forEach(name => {
+      message += `\n    • ${name}`
+    })
+  }
+  
+  message += '\n\n  Available components:'
+  
+  const sorted = [...availableComponents].sort()
+  const columns = 3
+  const itemsPerColumn = Math.ceil(sorted.length / columns)
+  
+  for (let i = 0; i < itemsPerColumn; i++) {
+    let row = '    '
+    for (let col = 0; col < columns; col++) {
+      const idx = i + col * itemsPerColumn
+      if (idx < sorted.length) {
+        row += sorted[idx].padEnd(20)
+      }
+    }
+    message += '\n' + row.trimEnd()
+  }
+  
+  return message
+}

package/src/utils/preflight.js

@@ -0,0 +1,172 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import pc from 'picocolors'
+
+/**
+ * Pre-flight checks to ensure the project environment is ready for NovaUI
+ */
+
+export function checkPackageJson(cwd) {
+  const pkgPath = path.join(cwd, 'package.json')
+  if (!fs.existsSync(pkgPath)) {
+    throw new Error('package.json not found. Please run this command in a valid Node.js project.')
+  }
+  
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+    return pkg
+  } catch (error) {
+    throw new Error('package.json is invalid or cannot be parsed.')
+  }
+}
+
+export function checkReactNativeProject(pkg) {
+  const deps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+  
+  if (!deps['react-native'] && !deps['expo']) {
+    console.log('')
+    console.log(pc.yellow('  ⚠  Warning: react-native or expo not found in dependencies.'))
+    console.log(pc.dim('     NovaUI is designed for React Native projects.'))
+    console.log('')
+  }
+}
+
+export function checkBabelConfig(cwd) {
+  const babelPaths = [
+    path.join(cwd, 'babel.config.js'),
+    path.join(cwd, 'babel.config.json'),
+    path.join(cwd, '.babelrc'),
+    path.join(cwd, '.babelrc.js'),
+  ]
+  
+  for (const babelPath of babelPaths) {
+    if (fs.existsSync(babelPath)) {
+      return babelPath
+    }
+  }
+  
+  return null
+}
+
+export function checkNativeWindInBabel(cwd) {
+  const babelPath = checkBabelConfig(cwd)
+  
+  if (!babelPath) {
+    console.log('')
+    console.log(pc.yellow('  ⚠  Warning: babel.config.js not found.'))
+    console.log(pc.dim('     NativeWind requires Babel configuration.'))
+    console.log('')
+    return false
+  }
+  
+  try {
+    const content = fs.readFileSync(babelPath, 'utf-8')
+    const hasNativeWind = content.includes('nativewind/babel') || content.includes('"nativewind/babel"')
+    
+    if (!hasNativeWind) {
+      console.log('')
+      console.log(pc.yellow('  ⚠  Warning: NativeWind not detected in Babel config.'))
+      console.log(pc.dim('     Add "nativewind/babel" to your Babel plugins:'))
+      console.log('')
+      console.log(pc.cyan('     module.exports = {'))
+      console.log(pc.cyan('       plugins: ["nativewind/babel"],'))
+      console.log(pc.cyan('     }'))
+      console.log('')
+      console.log(pc.dim('     See: https://www.nativewind.dev/docs/getting-started/installation'))
+      console.log('')
+      return false
+    }
+    
+    return true
+  } catch (error) {
+    console.log('')
+    console.log(pc.yellow('  ⚠  Warning: Could not read babel.config.js'))
+    console.log('')
+    return false
+  }
+}
+
+export function checkReactNativeVersion(pkg) {
+  const deps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+  
+  const rnVersion = deps['react-native']
+  if (rnVersion) {
+    const versionMatch = rnVersion.match(/(\d+)\.(\d+)/)
+    if (versionMatch) {
+      const [, major, minor] = versionMatch
+      const majorNum = parseInt(major, 10)
+      const minorNum = parseInt(minor, 10)
+      
+      if (majorNum < 0 || (majorNum === 0 && minorNum < 72)) {
+        console.log('')
+        console.log(pc.yellow('  ⚠  Warning: React Native version is below 0.72'))
+        console.log(pc.dim('     NovaUI requires React Native >= 0.72'))
+        console.log('')
+        return false
+      }
+    }
+  }
+  
+  return true
+}
+
+export function checkNativeWindVersion(pkg) {
+  const deps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  }
+  
+  const nwVersion = deps['nativewind']
+  if (!nwVersion) {
+    console.log('')
+    console.log(pc.yellow('  ⚠  Warning: NativeWind not found in package.json'))
+    console.log(pc.dim('     NovaUI requires NativeWind >= 4.0'))
+    console.log(pc.dim('     Install: npm install nativewind'))
+    console.log(pc.dim('     See: https://www.nativewind.dev/docs/getting-started/installation'))
+    console.log('')
+    return false
+  }
+  
+  // Check if version 4 or higher
+  const versionMatch = nwVersion.match(/(\d+)/)
+  if (versionMatch) {
+    const [, major] = versionMatch
+    const majorNum = parseInt(major, 10)
+    
+    if (majorNum < 4) {
+      console.log('')
+      console.log(pc.yellow('  ⚠  Warning: NativeWind version is below 4.0'))
+      console.log(pc.dim('     NovaUI requires NativeWind >= 4.0'))
+      console.log(pc.dim('     Upgrade: npm install nativewind@latest'))
+      console.log('')
+      return false
+    }
+  }
+  
+  return true
+}
+
+/**
+ * Run all pre-flight checks before init command
+ */
+export function runInitPreflightChecks(cwd) {
+  const pkg = checkPackageJson(cwd)
+  checkReactNativeProject(pkg)
+  checkNativeWindVersion(pkg)
+  checkNativeWindInBabel(cwd)
+  checkReactNativeVersion(pkg)
+}
+
+/**
+ * Run minimal pre-flight checks before add command
+ */
+export function runAddPreflightChecks(cwd) {
+  const pkg = checkPackageJson(cwd)
+  return pkg
+}