novaui-cli 1.1.2 → 1.1.3

package/src/commands/add.js

@@ -4,12 +4,37 @@ import ora from 'ora'
 import { multiselect, isCancel, cancel } from '@clack/prompts'
 import pc from 'picocolors'
 
-import { DEFAULT_CONFIG, UTILS_CONTENT, BASE_URL } from '../constants.js'
+import { DEFAULT_CONFIG, UTILS_CONTENT, BASE_URL, REGISTRY_URL } from '../constants.js'
 import { loadConfig } from '../utils/config.js'
 import { ensureDir } from '../utils/fs-helpers.js'
 import { getMissingDeps, installPackages, getInstallHint } from '../utils/deps.js'
 import { fetchWithTimeout } from '../utils/fetch.js'
 import { assertValidComponentConfig } from '../utils/validate.js'
+import { runAddPreflightChecks } from '../utils/preflight.js'
+import { formatComponentNotFoundError } from '../utils/fuzzy.js'
+
+/**
+ * Fetch the registry from GitHub.
+ * Always gets the latest registry from the main branch.
+ */
+async function fetchRegistry() {
+  const spinner = ora({ text: 'Loading component registry...', stream: process.stderr }).start()
+  
+  try {
+    const response = await fetchWithTimeout(REGISTRY_URL)
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch registry: ${response.status} ${response.statusText}`)
+    }
+    
+    const registry = await response.json()
+    spinner.stop()
+    return registry
+  } catch (error) {
+    spinner.fail('Failed to load registry')
+    throw new Error(`Could not fetch registry from GitHub: ${error.message}`)
+  }
+}
 
 /**
  * Fetch the component registry and present an interactive multi-select for
@@ -17,24 +42,10 @@ import { assertValidComponentConfig } from '../utils/validate.js'
  * Only called in TTY mode.
  */
 export async function pickComponentsInteractively() {
-  const spinner = ora({ text: '  Fetching registry...', stream: process.stderr }).start()
-
-  let registry
-  try {
-    const res = await fetchWithTimeout(`${BASE_URL}/registry.json`)
-    if (!res.ok) {
-      spinner.fail(pc.red(`  Failed to fetch registry: ${res.statusText}`))
-      throw new Error(`Failed to fetch registry: ${res.statusText}`)
-    }
-    registry = await res.json()
-    spinner.succeed('  Registry loaded')
-  } catch (err) {
-    spinner.fail()
-    throw err
-  }
+  const registry = await fetchRegistry()
 
   if (!registry || typeof registry !== 'object' || Array.isArray(registry)) {
-    throw new Error('Registry response is not a valid object.')
+    throw new Error('Registry is not a valid object.')
   }
 
   const selected = await multiselect({
@@ -65,36 +76,22 @@ export async function add(componentName, options = {}) {
   }
 
   const cwd = process.cwd()
+  runAddPreflightChecks(cwd)
 
   console.log('')
   console.log(`  ◆  NovaUI – Adding "${componentName}"...`)
   console.log('')
 
-  // ─── 1. Fetch registry ─────────────────────────────────────────────────────
-
-  const registrySpinner = ora({ text: '  Fetching registry...', stream: process.stderr }).start()
+  // ─── 1. Fetch registry ────────────────────────────────────────────────────
 
-  let registry
-  try {
-    const registryResponse = await fetchWithTimeout(`${BASE_URL}/registry.json`)
-    if (!registryResponse.ok) {
-      registrySpinner.fail(pc.red(`  Failed to fetch registry: ${registryResponse.statusText}`))
-      throw new Error(`Failed to fetch registry: ${registryResponse.statusText}`)
-    }
-    registry = await registryResponse.json()
-    registrySpinner.succeed(pc.green('  Registry loaded'))
-  } catch (err) {
-    registrySpinner.fail()
-    throw err
-  }
+  const registry = await fetchRegistry()
 
   if (!registry || typeof registry !== 'object' || Array.isArray(registry)) {
-    throw new Error('Registry response is not a valid object.')
+    throw new Error('Registry is not a valid object.')
   }
 
   if (!registry[componentName]) {
-    const available = Object.keys(registry).join(', ')
-    throw new Error(`Component "${componentName}" not found in registry.\n\n  Available components:\n    ${available}`)
+    throw new Error(formatComponentNotFoundError(componentName, Object.keys(registry)))
   }
 
   const componentConfig = registry[componentName]

package/src/commands/init.js

@@ -1,52 +1,66 @@
-import path from 'node:path'
-import { text, select, confirm, isCancel, cancel, intro, outro } from '@clack/prompts'
-import pc from 'picocolors'
-
-import { THEME_KEYS, getThemeCssContent } from '../themes/index.js'
-import { DEFAULT_CONFIG, UTILS_CONTENT } from '../constants.js'
-import { loadConfig, writeConfig } from '../utils/config.js'
-import { ensureDir, writeIfNotExists } from '../utils/fs-helpers.js'
-import { getMissingDeps, installPackages, getInstallHint } from '../utils/deps.js'
-import { getTailwindConfigContent } from '../utils/tailwind.js'
+import path from "node:path";
+import {
+  text,
+  select,
+  confirm,
+  isCancel,
+  cancel,
+  intro,
+  outro,
+} from "@clack/prompts";
+import pc from "picocolors";
+
+import { THEME_KEYS, getThemeCssContent } from "../themes/index.js";
+import { DEFAULT_CONFIG, UTILS_CONTENT, BABEL_CONFIG_CONTENT, METRO_CONFIG_CONTENT } from "../constants.js";
+import { loadConfig, writeConfig } from "../utils/config.js";
+import { ensureDir, writeIfNotExists } from "../utils/fs-helpers.js";
+import {
+  getMissingDeps,
+  installPackages,
+  getInstallHint,
+} from "../utils/deps.js";
+import { getTailwindConfigContent } from "../utils/tailwind.js";
+import { runInitPreflightChecks } from "../utils/preflight.js";
 
 // ─── ASCII Banner ────────────────────────────────────────────────────────────
 
 export const ASCII_BANNER = `
-${pc.cyan(' ███╗   ██╗ ██████╗ ██╗   ██╗ █████╗     ██╗   ██╗██╗')}
-${pc.cyan(' ████╗  ██║██╔═══██╗██║   ██║██╔══██╗    ██║   ██║██║')}
-${pc.cyan(' ██╔██╗ ██║██║   ██║██║   ██║███████║    ██║   ██║██║')}
-${pc.cyan(' ██║╚██╗██║██║   ██║╚██╗ ██╔╝██╔══██║    ██║   ██║██║')}
-${pc.cyan(' ██║ ╚████║╚██████╔╝ ╚████╔╝ ██║  ██║    ╚██████╔╝██║')}
-${pc.cyan(' ╚═╝  ╚═══╝ ╚═════╝   ╚═══╝  ╚═╝  ╚═╝     ╚═════╝ ╚═╝')}
-${pc.dim('           React Native + NativeWind UI')}
-`
+${pc.cyan(" ███╗   ██╗ ██████╗ ██╗   ██╗ █████╗     ██╗   ██╗██╗")}
+${pc.cyan(" ████╗  ██║██╔═══██╗██║   ██║██╔══██╗    ██║   ██║██║")}
+${pc.cyan(" ██╔██╗ ██║██║   ██║██║   ██║███████║    ██║   ██║██║")}
+${pc.cyan(" ██║╚██╗██║██║   ██║╚██╗ ██╔╝██╔══██║    ██║   ██║██║")}
+${pc.cyan(" ██║ ╚████║╚██████╔╝ ╚████╔╝ ██║  ██║    ╚██████╔╝██║")}
+${pc.cyan(" ╚═╝  ╚═══╝ ╚═════╝   ╚═══╝  ╚═╝  ╚═╝     ╚═════╝ ╚═╝")}
+${pc.dim("           React Native + NativeWind UI")}
+`;
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 function normalizeTheme(themeName) {
-  if (typeof themeName !== 'string' || themeName.trim() === '') return DEFAULT_CONFIG.theme
-  const normalized = themeName.trim().toLowerCase()
-  if (!THEME_KEYS.includes(normalized)) return DEFAULT_CONFIG.theme
-  return normalized
+  if (typeof themeName !== "string" || themeName.trim() === "")
+    return DEFAULT_CONFIG.theme;
+  const normalized = themeName.trim().toLowerCase();
+  if (!THEME_KEYS.includes(normalized)) return DEFAULT_CONFIG.theme;
+  return normalized;
 }
 
 /** Prompt for a theme selection; returns default immediately in non-TTY mode. */
 export async function askTheme(defaultTheme = DEFAULT_CONFIG.theme) {
-  const normalizedDefault = normalizeTheme(defaultTheme)
-  if (process.stdin.isTTY !== true) return normalizedDefault
+  const normalizedDefault = normalizeTheme(defaultTheme);
+  if (process.stdin.isTTY !== true) return normalizedDefault;
 
   const theme = await select({
-    message: 'Select a theme',
-    options: THEME_KEYS.map(k => ({ value: k, label: k })),
+    message: "Select a theme",
+    options: THEME_KEYS.map((k) => ({ value: k, label: k })),
     initialValue: normalizedDefault,
-  })
+  });
 
   if (isCancel(theme)) {
-    cancel('Setup cancelled.')
-    process.exit(0)
+    cancel("Setup cancelled.");
+    process.exit(0);
   }
 
-  return theme
+  return theme;
 }
 
 // ─── init command ─────────────────────────────────────────────────────────────
@@ -56,180 +70,261 @@ export async function askTheme(defaultTheme = DEFAULT_CONFIG.theme) {
  * @param {boolean} [options.yes]  Skip all prompts and use defaults (--yes flag)
  */
 export async function init(options = {}) {
-  const { yes = false } = options
-  const cwd = process.cwd()
-  const existingConfig = loadConfig(cwd)
-  const isInteractive = process.stdin.isTTY === true && !yes
+  const { yes = false } = options;
+  const cwd = process.cwd();
+  
+  runInitPreflightChecks(cwd);
+  
+  const existingConfig = loadConfig(cwd);
+  const isInteractive = process.stdin.isTTY === true && !yes;
 
-  console.log(ASCII_BANNER)
+  console.log(ASCII_BANNER);
 
   if (isInteractive) {
-    intro(pc.bold('Welcome to NovaUI'))
-    console.log(pc.dim("   Let's set up your project in a few steps."))
-    console.log('')
+    intro(pc.bold("Welcome to NovaUI"));
+    console.log(pc.dim("   Let's set up your project in a few steps."));
+    console.log("");
   } else {
-    console.log(pc.bold('   Welcome to NovaUI'))
-    console.log(pc.dim("   Let's set up your project in a few steps."))
-    console.log('')
+    console.log(pc.bold("   Welcome to NovaUI"));
+    console.log(pc.dim("   Let's set up your project in a few steps."));
+    console.log("");
   }
 
-  let config
+  let config;
 
   if (existingConfig) {
-    console.log(pc.blue('   ⚙  Config'))
-    console.log(pc.dim('   components.json found in this directory.'))
-    console.log('')
+    console.log(pc.blue("   ⚙  Config"));
+    console.log(pc.dim("   components.json found in this directory."));
+    console.log("");
 
-    let reconfigure = false
+    let reconfigure = false;
 
     if (isInteractive) {
-      const answer = await confirm({ message: 'Re-configure paths?' })
+      const answer = await confirm({ message: "Re-configure paths?" });
       if (isCancel(answer)) {
-        cancel('Setup cancelled.')
-        process.exit(0)
+        cancel("Setup cancelled.");
+        process.exit(0);
       }
-      reconfigure = answer === true
+      reconfigure = answer === true;
     }
 
     if (reconfigure) {
       const globalCss = await text({
-        message: 'Where should global.css be placed?',
+        message: "Where should global.css be placed?",
         placeholder: DEFAULT_CONFIG.globalCss,
         defaultValue: existingConfig.globalCss || DEFAULT_CONFIG.globalCss,
-      })
-      if (isCancel(globalCss)) { cancel('Setup cancelled.'); process.exit(0) }
+      });
+      if (isCancel(globalCss)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
 
       const componentsUi = await text({
-        message: 'Where should UI components be placed?',
+        message: "Where should UI components be placed?",
         placeholder: DEFAULT_CONFIG.componentsUi,
-        defaultValue: existingConfig.componentsUi || DEFAULT_CONFIG.componentsUi,
-      })
-      if (isCancel(componentsUi)) { cancel('Setup cancelled.'); process.exit(0) }
+        defaultValue:
+          existingConfig.componentsUi || DEFAULT_CONFIG.componentsUi,
+      });
+      if (isCancel(componentsUi)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
 
       const lib = await text({
-        message: 'Where should lib (e.g. utils) be placed?',
+        message: "Where should lib (e.g. utils) be placed?",
         placeholder: DEFAULT_CONFIG.lib,
         defaultValue: existingConfig.lib || DEFAULT_CONFIG.lib,
-      })
-      if (isCancel(lib)) { cancel('Setup cancelled.'); process.exit(0) }
+      });
+      if (isCancel(lib)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
 
-      const theme = await askTheme(existingConfig.theme)
+      const theme = await askTheme(existingConfig.theme);
 
       config = {
-        globalCss: globalCss.replace(/\\/g, '/'),
-        componentsUi: componentsUi.replace(/\\/g, '/'),
-        lib: lib.replace(/\\/g, '/'),
+        globalCss: globalCss.replace(/\\/g, "/"),
+        componentsUi: componentsUi.replace(/\\/g, "/"),
+        lib: lib.replace(/\\/g, "/"),
         theme,
-      }
-      writeConfig(cwd, config)
-      console.log('')
-      console.log(pc.green('   ✓  Updated components.json'))
+      };
+      writeConfig(cwd, config);
+      console.log("");
+      console.log(pc.green("   ✓  Updated components.json"));
     } else {
-      config = existingConfig
+      config = existingConfig;
     }
   } else {
-    console.log(pc.blue('   ⚙  Configure paths'))
-    console.log(pc.dim('   Where should NovaUI put its files? Press Enter for defaults.'))
-    console.log('')
+    console.log(pc.blue("   ⚙  Configure paths"));
+    console.log(
+      pc.dim("   Where should NovaUI put its files? Press Enter for defaults."),
+    );
+    console.log("");
 
     if (isInteractive) {
       const globalCss = await text({
-        message: 'Path for global.css?',
+        message: "Path for global.css?",
         placeholder: DEFAULT_CONFIG.globalCss,
         defaultValue: DEFAULT_CONFIG.globalCss,
-      })
-      if (isCancel(globalCss)) { cancel('Setup cancelled.'); process.exit(0) }
+      });
+      if (isCancel(globalCss)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
 
       const componentsUi = await text({
-        message: 'Path for UI components?',
+        message: "Path for UI components?",
         placeholder: DEFAULT_CONFIG.componentsUi,
         defaultValue: DEFAULT_CONFIG.componentsUi,
-      })
-      if (isCancel(componentsUi)) { cancel('Setup cancelled.'); process.exit(0) }
+      });
+      if (isCancel(componentsUi)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
 
       const lib = await text({
-        message: 'Path for lib (utils)?',
+        message: "Path for lib (utils)?",
         placeholder: DEFAULT_CONFIG.lib,
         defaultValue: DEFAULT_CONFIG.lib,
-      })
-      if (isCancel(lib)) { cancel('Setup cancelled.'); process.exit(0) }
+      });
+      if (isCancel(lib)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
 
-      const theme = await askTheme()
+      const theme = await askTheme();
 
       config = {
-        globalCss: globalCss.replace(/\\/g, '/'),
-        componentsUi: componentsUi.replace(/\\/g, '/'),
-        lib: lib.replace(/\\/g, '/'),
+        globalCss: globalCss.replace(/\\/g, "/"),
+        componentsUi: componentsUi.replace(/\\/g, "/"),
+        lib: lib.replace(/\\/g, "/"),
         theme,
-      }
+      };
     } else {
-      config = { ...DEFAULT_CONFIG }
+      config = { ...DEFAULT_CONFIG };
     }
 
-    writeConfig(cwd, config)
-    console.log(pc.green('   ✓  Created components.json'))
+    writeConfig(cwd, config);
+    console.log(pc.green("   ✓  Created components.json"));
   }
 
   // ─── Setup files ────────────────────────────────────────────────────────────
 
-  console.log('')
-  console.log(pc.blue('   📁 Setting up project'))
-  console.log('')
-
-  const utilsDir = path.join(cwd, config.lib)
-  ensureDir(utilsDir)
-  const utilsPath = path.join(utilsDir, 'utils.ts')
-  writeIfNotExists(utilsPath, UTILS_CONTENT, `${config.lib}/utils.ts`)
-
-  const globalCssDir = path.dirname(path.join(cwd, config.globalCss))
-  ensureDir(globalCssDir)
-  const themeCssContent = getThemeCssContent(normalizeTheme(config.theme))
-  writeIfNotExists(path.join(cwd, config.globalCss), themeCssContent, config.globalCss)
-
-  const tailwindContent = getTailwindConfigContent(config)
-  writeIfNotExists(path.join(cwd, 'tailwind.config.js'), tailwindContent, 'tailwind.config.js')
+  console.log("");
+  console.log(pc.blue("   📁 Setting up project"));
+  console.log("");
+
+  const utilsDir = path.join(cwd, config.lib);
+  ensureDir(utilsDir);
+  const utilsPath = path.join(utilsDir, "utils.ts");
+  writeIfNotExists(utilsPath, UTILS_CONTENT, `${config.lib}/utils.ts`);
+
+  const globalCssDir = path.dirname(path.join(cwd, config.globalCss));
+  ensureDir(globalCssDir);
+  const themeCssContent = await getThemeCssContent(normalizeTheme(config.theme));
+  writeIfNotExists(
+    path.join(cwd, config.globalCss),
+    themeCssContent,
+    config.globalCss,
+  );
+
+  const tailwindContent = getTailwindConfigContent(config);
+  writeIfNotExists(
+    path.join(cwd, "tailwind.config.js"),
+    tailwindContent,
+    "tailwind.config.js",
+  );
+
+  writeIfNotExists(
+    path.join(cwd, "babel.config.js"),
+    BABEL_CONFIG_CONTENT,
+    "babel.config.js",
+  );
+
+  const metroContent = METRO_CONFIG_CONTENT(config.globalCss);
+  writeIfNotExists(
+    path.join(cwd, "metro.config.js"),
+    metroContent,
+    "metro.config.js",
+  );
 
   // ─── Dependencies ──────────────────────────────────────────────────────────
 
-  const deps = ['nativewind', 'tailwindcss', 'clsx', 'tailwind-merge', 'class-variance-authority']
-  const missingDeps = getMissingDeps(cwd, deps)
-
-  console.log('')
-  console.log(pc.blue('   📦 Dependencies'))
-  console.log('')
-
-  if (missingDeps.length === 0) {
-    console.log(pc.dim('   ✓  All required packages already in package.json, skipping install.'))
+  const deps = [
+    "nativewind",
+    "react-native-reanimated",
+    "react-native-safe-area-context",
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+  ];
+  const devDeps = [
+    "tailwindcss@^3.4.17",
+    "prettier-plugin-tailwindcss@^0.5.11",
+    "babel-preset-expo",
+  ];
+  const missingDeps = getMissingDeps(cwd, deps);
+  const missingDevDeps = getMissingDeps(cwd, devDeps.map(d => d.split('@')[0]));
+
+  console.log("");
+  console.log(pc.blue("   📦 Dependencies"));
+  console.log("");
+
+  if (missingDeps.length === 0 && missingDevDeps.length === 0) {
+    console.log(
+      pc.dim(
+        "   ✓  All required packages already in package.json, skipping install.",
+      ),
+    );
   } else {
-    console.log(pc.dim(`   Installing: ${missingDeps.join(', ')}`))
-    console.log('')
-    try {
-      installPackages(missingDeps)
-    } catch {
-      console.error('')
-      console.error(pc.yellow('   ✗  Install failed. Run manually:'))
-      console.error(pc.dim(`     ${getInstallHint(missingDeps)}`))
+    if (missingDeps.length > 0) {
+      console.log(pc.dim(`   Installing: ${missingDeps.join(", ")}`));
+      console.log("");
+      try {
+        installPackages(missingDeps);
+      } catch {
+        console.error("");
+        console.error(pc.yellow("   ✗  Install failed. Run manually:"));
+        console.error(pc.dim(`     ${getInstallHint(missingDeps)}`));
+      }
+    }
+
+    if (missingDevDeps.length > 0) {
+      const devDepsToInstall = devDeps.filter(d => 
+        missingDevDeps.includes(d.split('@')[0])
+      );
+      console.log(pc.dim(`   Installing dev dependencies: ${devDepsToInstall.join(", ")}`));
+      console.log("");
+      try {
+        installPackages(devDepsToInstall, { dev: true });
+      } catch {
+        console.error("");
+        console.error(pc.yellow("   ✗  Dev dependencies install failed. Run manually:"));
+        console.error(pc.dim(`     ${getInstallHint(devDepsToInstall, { dev: true })}`));
+      }
     }
   }
 
   // ─── Success ────────────────────────────────────────────────────────────────
 
-  console.log('')
-  console.log(pc.green('   ┌─────────────────────────────────────────┐'))
-  console.log(pc.green('   │  ✓  NovaUI is ready!                     │'))
-  console.log(pc.green('   └─────────────────────────────────────────┘'))
-  console.log('')
-  console.log(pc.bold('   Next steps:'))
-  console.log('')
-  console.log(pc.dim('   1. Import global CSS in your root entry (e.g. App.tsx):'))
-  console.log(pc.cyan(`      import "${config.globalCss}"`))
-  console.log('')
-  console.log(pc.dim('   2. Add components:'))
-  console.log(pc.cyan('      npx novaui-cli@latest add button'))
-  console.log(pc.cyan('      npx novaui-cli@latest add card'))
-  console.log('')
+  console.log("");
+  console.log(pc.green("   ┌─────────────────────────────────────────┐"));
+  console.log(pc.green("   │  ✓  NovaUI is ready!                     │"));
+  console.log(pc.green("   └─────────────────────────────────────────┘"));
+  console.log("");
+  console.log(pc.bold("   Next steps:"));
+  console.log("");
+  console.log(
+    pc.dim("   1. Import global CSS in your root entry (e.g. App.tsx):"),
+  );
+  console.log(pc.cyan(`      import "${config.globalCss}"`));
+  console.log("");
+  console.log(pc.dim("   2. Add components:"));
+  console.log(pc.cyan("      npx novaui-cli@latest add button"));
+  console.log(pc.cyan("      npx novaui-cli@latest add card"));
+  console.log("");
 
   if (isInteractive) {
-    outro(pc.green('Setup complete!'))
+    outro(pc.green("Setup complete!"));
   }
 }