nativeui-cli 1.0.0-beta.0

package/dist/commands/list.js

@@ -0,0 +1,44 @@
+// src/commands/list.ts
+// ─────────────────────────────────────────────────────────────
+// `native-ui list [--category <cat>]`
+//
+// Reads available components from the static COMPONENTS array.
+// Reads installed components from native-ui.json → `components[]`.
+// No network call unless --details flag is passed.
+// ─────────────────────────────────────────────────────────────
+import pc from 'picocolors';
+import { COMPONENTS } from '../registry.js';
+import { configExists, readConfig } from '../config.js';
+import { logError } from '../utils.js';
+export async function listCommand(opts) {
+    if (!configExists()) {
+        logError('native-ui.json not found. Run `nativeui-cli init` first.');
+        process.exit(1);
+    }
+    const config = readConfig();
+    const installedKeys = new Set(config.components); // from native-ui.json
+    const filterCat = opts.category?.toLowerCase();
+    const keys = filterCat
+        ? [...COMPONENTS].filter((k) => k.startsWith(filterCat))
+        : [...COMPONENTS];
+    if (keys.length === 0) {
+        console.log(pc.yellow(`No components found${filterCat ? ` for category: ${filterCat}` : ''}.`));
+        process.exit(0);
+    }
+    const installedCount = keys.filter((k) => installedKeys.has(k)).length;
+    console.log();
+    console.log(pc.bgCyan(pc.black('  native-ui  ')) + pc.dim('  available components'));
+    console.log();
+    console.log(`  ${pc.dim('total')}      ${keys.length}` +
+        `   ${pc.dim('installed')}  ${pc.green(String(installedCount))}` +
+        `   ${pc.dim('available')}  ${keys.length - installedCount}`);
+    console.log();
+    for (const key of [...keys].sort()) {
+        const isInstalled = installedKeys.has(key);
+        const status = isInstalled ? pc.green('✔') : pc.dim('○');
+        console.log(`  ${status}  ${pc.bold(key)}`);
+    }
+    console.log();
+    console.log(pc.dim(`  Run ${pc.reset(pc.bold('nativeui-cli add <component>'))} to install a component.`));
+    console.log();
+}

package/dist/commands/remove.d.ts

@@ -0,0 +1 @@
+export declare function removeCommand(componentArgs: string[]): Promise<void>;

package/dist/commands/remove.js

@@ -0,0 +1,97 @@
+// src/commands/remove.ts
+// ─────────────────────────────────────────────────────────────
+// `native-ui remove [components...]`
+//
+// Removes local component files and updates native-ui.json.
+// ─────────────────────────────────────────────────────────────
+import { intro, outro, multiselect, confirm, log } from "@clack/prompts";
+import pc from "picocolors";
+import fs from "fs";
+import { getInstalledComponents, unmarkInstalled, configExists, readConfig, } from "../config.js";
+import { fetchRegistryEntries, logError, logSuccess, logWarn, resolveComponentDest, } from "../utils.js";
+export async function removeCommand(componentArgs) {
+    intro(pc.bgCyan(pc.black("  native-ui  ")) + pc.dim("  remove components"));
+    // ── Config guard ────────────────────────────────────────────
+    if (!configExists()) {
+        logError("No native-ui.json found. Run `nativeui-cli init` first.");
+        process.exit(1);
+    }
+    const installedKeys = getInstalledComponents();
+    const config = readConfig();
+    if (installedKeys.length === 0) {
+        log.info("No components are installed.");
+        process.exit(0);
+    }
+    const installedEntries = new Map((await fetchRegistryEntries(installedKeys)).map((entry) => [
+        entry.key.toLowerCase(),
+        entry,
+    ]));
+    // ── Resolve which to remove ──────────────────────────────────
+    let selectedKeys;
+    if (componentArgs.length > 0) {
+        selectedKeys = componentArgs.map((c) => c.toLowerCase());
+        const unknown = selectedKeys.filter((k) => !installedEntries.has(k));
+        if (unknown.length) {
+            logError(`Unknown component(s): ${unknown.join(", ")}`);
+            process.exit(1);
+        }
+        const notInstalled = selectedKeys.filter((k) => !installedKeys.includes(k));
+        if (notInstalled.length) {
+            logWarn(`Not installed: ${notInstalled.map((k) => installedEntries.get(k)?.title ?? k).join(", ")}`);
+        }
+        selectedKeys = selectedKeys.filter((k) => installedKeys.includes(k));
+    }
+    else {
+        const installed = installedKeys.filter((k) => installedEntries.has(k));
+        const selected = await multiselect({
+            message: "Which components do you want to remove?",
+            options: installed.map((key) => ({
+                value: key,
+                label: pc.bold(installedEntries.get(key)?.title ?? key) +
+                    pc.dim(` — ${installedEntries.get(key)?.description ?? ""}`),
+            })),
+            required: true,
+        });
+        if (typeof selected === "symbol") {
+            log.info("Cancelled.");
+            process.exit(0);
+        }
+        selectedKeys = selected;
+    }
+    if (selectedKeys.length === 0) {
+        log.info("Nothing to remove.");
+        process.exit(0);
+    }
+    const selectedEntries = new Map((await fetchRegistryEntries(selectedKeys)).map((entry) => [
+        entry.key.toLowerCase(),
+        entry,
+    ]));
+    // ── Confirm ──────────────────────────────────────────────────
+    const names = selectedKeys
+        .map((k) => selectedEntries.get(k)?.title ?? k)
+        .join(", ");
+    const ok = await confirm({
+        message: `Remove ${pc.bold(names)}? This deletes the local file(s).`,
+        initialValue: false,
+    });
+    if (!ok || typeof ok === "symbol") {
+        log.info("Aborted.");
+        process.exit(0);
+    }
+    // ── Delete files & update config ─────────────────────────────
+    for (const key of selectedKeys) {
+        const comp = selectedEntries.get(key);
+        const filePath = resolveComponentDest(comp?.files?.[0], config, key);
+        if (fs.existsSync(filePath)) {
+            fs.unlinkSync(filePath);
+            logSuccess(`Removed ${comp?.title ?? key} (${filePath})`);
+        }
+        else {
+            logWarn(`${comp?.title ?? key}: file not found at ${filePath}`);
+        }
+    }
+    for (const key of selectedKeys) {
+        unmarkInstalled(key);
+    }
+    outro(pc.cyan(`Removed ${selectedKeys.length} component(s).`));
+}

package/dist/config.d.ts

@@ -0,0 +1,26 @@
+export declare const CONFIG_FILE = "native-ui.json";
+export interface NativeConfig {
+    $schema: string;
+    typescript: boolean;
+    /** Relative path from project root where components are written */
+    outputDir: string;
+    /** Which Expo runner to use when installing npm packages */
+    expoRunner: 'npx' | 'yarn' | 'bunx' | 'pnpm';
+    /** Base peer deps installed during `init` */
+    baseDependencies: string[];
+    /** Keys of components the user has added to this project */
+    components: string[];
+}
+export declare const DEFAULT_BASE_DEPENDENCIES: string[];
+export declare const DEFAULT_CONFIG: NativeConfig;
+export declare function getConfigPath(): string;
+export declare function configExists(): boolean;
+export declare function readConfig(): NativeConfig;
+export declare function writeConfig(config: NativeConfig): void;
+export declare function updateConfig(partial: Partial<NativeConfig>): NativeConfig;
+export declare function getInstalledComponents(): string[];
+/** Records a component as installed in native-ui.json. Idempotent. */
+export declare function markInstalled(key: string): void;
+/** Removes a component from the installed list in native-ui.json. */
+export declare function unmarkInstalled(key: string): void;
+export declare function getOutputDir(config: NativeConfig): string;

package/dist/config.js

@@ -0,0 +1,115 @@
+// src/config.ts
+// ─────────────────────────────────────────────────────────────
+// Reads and writes `native-ui.json`.
+//
+// The config stores project settings + the list of components
+// the user has installed. That's it — no registry cache, no
+// hidden state files.
+//
+// native-ui.json shape:
+// {
+//   "$schema": "...",
+//   "typescript": true,
+//   "outputDir": "components/ui",
+//   "expoRunner": "npx",
+//   "baseDependencies": ["react-native-reanimated", ...],
+//   "components": ["button", "input"]   ← only what the user installed
+// }
+// ─────────────────────────────────────────────────────────────
+import fs from 'fs';
+import path from 'path';
+export const CONFIG_FILE = 'native-ui.json';
+export const DEFAULT_BASE_DEPENDENCIES = [
+    'react-native-reanimated',
+    'react-native-worklets',
+    '@rn-primitives/portal',
+];
+export const DEFAULT_CONFIG = {
+    $schema: 'https://nativeui.qzz.io/schema.json',
+    typescript: true,
+    outputDir: 'components/ui',
+    expoRunner: 'npx',
+    baseDependencies: [...DEFAULT_BASE_DEPENDENCIES],
+    components: [],
+};
+// ─── Path helpers ─────────────────────────────────────────────
+export function getConfigPath() {
+    return path.join(process.cwd(), CONFIG_FILE);
+}
+export function configExists() {
+    return fs.existsSync(getConfigPath());
+}
+// ─── Read / write ─────────────────────────────────────────────
+export function readConfig() {
+    const configPath = getConfigPath();
+    if (!fs.existsSync(configPath)) {
+        throw new Error('native-ui.json not found. Run `nativeui-cli init` first.');
+    }
+    const raw = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+    // Migrate legacy `packageManager` → `expoRunner`
+    const expoRunner = raw.expoRunner ??
+        (raw.packageManager === 'bun' ? 'bunx'
+            : raw.packageManager === 'yarn' ? 'yarn'
+                : raw.packageManager === 'pnpm' ? 'pnpm'
+                    : 'npx');
+    let components = Array.isArray(raw.components)
+        ? raw.components.map((k) => k.toLowerCase())
+        : [];
+    const statePath = path.join(process.cwd(), '.native-ui-state.json');
+    if (fs.existsSync(statePath)) {
+        try {
+            const stateRaw = JSON.parse(fs.readFileSync(statePath, 'utf-8'));
+            const stateComponents = Array.isArray(stateRaw.components)
+                ? stateRaw.components.map((k) => k.toLowerCase())
+                : [];
+            components = [...new Set([...components, ...stateComponents])];
+            fs.unlinkSync(statePath); // remove the old state file permanently
+        }
+        catch {
+            // corrupt state file — ignore
+        }
+    }
+    return {
+        $schema: raw.$schema ?? DEFAULT_CONFIG.$schema,
+        typescript: typeof raw.typescript === 'boolean' ? raw.typescript : true,
+        outputDir: typeof raw.outputDir === 'string' && raw.outputDir.trim()
+            ? raw.outputDir.trim()
+            : DEFAULT_CONFIG.outputDir,
+        expoRunner,
+        baseDependencies: Array.isArray(raw.baseDependencies) && raw.baseDependencies.length > 0
+            ? raw.baseDependencies
+            : [...DEFAULT_BASE_DEPENDENCIES],
+        components,
+    };
+}
+export function writeConfig(config) {
+    fs.writeFileSync(getConfigPath(), JSON.stringify(config, null, 2) + '\n', 'utf-8');
+}
+export function updateConfig(partial) {
+    const config = { ...readConfig(), ...partial };
+    writeConfig(config);
+    return config;
+}
+// ─── Component tracking (reads/writes native-ui.json) ─────────
+export function getInstalledComponents() {
+    return readConfig().components;
+}
+/** Records a component as installed in native-ui.json. Idempotent. */
+export function markInstalled(key) {
+    const normalized = key.toLowerCase();
+    const config = readConfig();
+    if (!config.components.includes(normalized)) {
+        config.components = [...config.components, normalized].sort();
+        writeConfig(config);
+    }
+}
+/** Removes a component from the installed list in native-ui.json. */
+export function unmarkInstalled(key) {
+    const normalized = key.toLowerCase();
+    const config = readConfig();
+    config.components = config.components.filter((k) => k !== normalized);
+    writeConfig(config);
+}
+export function getOutputDir(config) {
+    return path.join(process.cwd(), config.outputDir);
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+// src/index.ts
+// ─────────────────────────────────────────────────────────────
+// Entry point. Wires up all commands via Commander.
+//
+// Usage:
+//   native-ui init
+//   native-ui add [components...]
+//   native-ui remove [components...]
+//   native-ui list [--category <cat>]
+//   native-ui diff [component]
+// ─────────────────────────────────────────────────────────────
+import { Command } from 'commander';
+import pc from 'picocolors';
+import { createRequire } from 'module';
+import { initCommand } from './commands/init.js';
+import { addCommand } from './commands/add.js';
+import { removeCommand } from './commands/remove.js';
+import { listCommand } from './commands/list.js';
+import { diffCommand } from './commands/diff.js';
+// Read version from package.json at runtime
+const require = createRequire(import.meta.url);
+const pkg = require('../package.json');
+const program = new Command();
+program
+    .name('nativeui-cli')
+    .description(pc.cyan('Add beautiful React Native / Expo components to your project.'))
+    .version(pkg.version, '-v, --version', 'Display the current version');
+// ─── init ─────────────────────────────────────────────────────
+program
+    .command('init')
+    .description('Initialise native-ui in your project')
+    .option('-y, --yes', 'Skip all prompts and use defaults')
+    .option('-f, --force', 'Overwrite existing native-ui.json')
+    .action(async (opts) => {
+    await initCommand(opts);
+});
+// ─── add ──────────────────────────────────────────────────────
+program
+    .command('add [components...]')
+    .description('Add one or more components to your project')
+    .option('-o, --overwrite', 'Overwrite existing files without prompting')
+    .option('-a, --all', 'Add every available component')
+    .action(async (components, opts) => {
+    await addCommand(components, opts);
+});
+// ─── remove ───────────────────────────────────────────────────
+program
+    .command('remove [components...]')
+    .alias('rm')
+    .description('Remove installed components')
+    .action(async (components) => {
+    await removeCommand(components);
+});
+// ─── list ─────────────────────────────────────────────────────
+program
+    .command('list')
+    .alias('ls')
+    .description('List all available components')
+    .option('-c, --category <category>', 'Filter by category (primitives, forms, navigation, feedback, layout, typography)')
+    .action(async (opts) => {
+    await listCommand(opts);
+});
+// ─── diff ─────────────────────────────────────────────────────
+program
+    .command('diff [component]')
+    .description('Show differences between your local files and the registry')
+    .action(async (component) => {
+    await diffCommand(component);
+});
+// ─── Global error handler ─────────────────────────────────────
+process.on('uncaughtException', (err) => {
+    console.error(pc.red(`\n  Error: ${err.message}\n`));
+    process.exit(1);
+});
+process.on('unhandledRejection', (reason) => {
+    console.error(pc.red(`\n  Unhandled rejection: ${reason}\n`));
+    process.exit(1);
+});
+program.parse(process.argv);
+// Show help if no command given
+if (!process.argv.slice(2).length) {
+    program.outputHelp();
+}

package/dist/registry.d.ts

@@ -0,0 +1,19 @@
+export type ComponentCategory = 'primitives' | 'forms' | 'navigation' | 'feedback' | 'layout' | 'typography';
+export interface RegistryEntry {
+    key: string;
+    title?: string;
+    description?: string;
+    category?: ComponentCategory;
+    registryDependencies?: string[];
+    dependencies?: string[];
+    files?: RegistryFile[];
+}
+export interface RegistryFile {
+    path?: string;
+    target?: string;
+    content?: string;
+}
+export declare const COMPONENTS: readonly ["accordion", "alert-dialog", "alert", "aspect-ratio", "avatar", "badge", "button-group", "button", "calendar", "card", "carousel", "checkbox", "date-picker", "dialog", "empty", "field", "input-otp", "input", "label", "progress", "radio-group", "select", "separator", "skeleton", "sonner", "spinner", "switch", "table", "textarea", "typography"];
+export type ComponentKey = (typeof COMPONENTS)[number];
+export declare const CATEGORY_LABELS: Record<ComponentCategory, string>;
+export declare function entryName(entry: Pick<RegistryEntry, 'key' | 'title'>): string;

package/dist/registry.js

@@ -0,0 +1,53 @@
+// src/registry.ts
+// ─────────────────────────────────────────────────────────────
+// Static list of every component the CLI knows about.
+// This is the single source of truth for what can be installed.
+// File *contents* are fetched from the GraphQL backend at install time.
+// ─────────────────────────────────────────────────────────────
+// ─── All available components ─────────────────────────────────
+// Add new component keys here — they instantly appear in `add` and `list`.
+export const COMPONENTS = [
+    'accordion',
+    'alert-dialog',
+    'alert',
+    'aspect-ratio',
+    'avatar',
+    'badge',
+    'button-group',
+    'button',
+    'calendar',
+    'card',
+    'carousel',
+    'checkbox',
+    'date-picker',
+    'dialog',
+    'empty',
+    'field',
+    'input-otp',
+    'input',
+    'label',
+    'progress',
+    'radio-group',
+    'select',
+    'separator',
+    'skeleton',
+    'sonner',
+    'spinner',
+    'switch',
+    'table',
+    'textarea',
+    'typography',
+];
+// ─── Category labels for `list` display ──────────────────────
+export const CATEGORY_LABELS = {
+    primitives: '◆ Primitives',
+    forms: '◆ Forms',
+    navigation: '◆ Navigation',
+    feedback: '◆ Feedback',
+    layout: '◆ Layout',
+    typography: '◆ Typography',
+};
+// ─── Helpers ──────────────────────────────────────────────────
+export function entryName(entry) {
+    return entry.title ?? entry.key;
+}

package/dist/utils.d.ts

@@ -0,0 +1,70 @@
+import type { NativeConfig } from "./config.js";
+type RegistryFile = {
+    path?: string;
+    target?: string;
+    content?: string;
+};
+type RegistryManifest = {
+    title?: string;
+    description?: string;
+    registryDependencies?: string[];
+    dependencies?: string[];
+    category?: string;
+    files?: RegistryFile[];
+};
+type RegistryEntry = RegistryManifest & {
+    key: string;
+};
+export declare function fetchRegistryEntries(keys: string[]): Promise<RegistryEntry[]>;
+export declare function fetchRegistryIndex(): Promise<string[]>;
+export declare function fetchRegistryClosure(keys: string[]): Promise<RegistryEntry[]>;
+export declare function logSuccess(msg: string): void;
+export declare function logError(msg: string): void;
+export declare function logWarn(msg: string): void;
+export declare function logInfo(msg: string): void;
+/** Print a labelled key → value pair (used in `init` summary). */
+export declare function logKV(key: string, value: string): void;
+/**
+ * Fetches the raw source of a component from its registry URL.
+ * Throws a descriptive error on non-200 responses.
+ */
+export declare function fetchComponent(name: string, url: string): Promise<string>;
+/** Ensures a directory exists, creating it recursively if needed. */
+export declare function ensureDir(dir: string): void;
+/** Writes text to a file, creating parent dirs as needed. */
+export declare function writeFile(filePath: string, content: string): void;
+/** Returns file content or null if the file doesn't exist. */
+export declare function readFileSafe(filePath: string): string | null;
+/** Returns the install command for the given package manager. */
+export declare function buildInstallCmd(runner: NativeConfig["expoRunner"], packages: string[]): string;
+/**
+ * Installs Expo packages in a single batched command.
+ * Returns true on success, false on failure.
+ */
+export declare function installPackages(packages: string[], runner: NativeConfig["expoRunner"], cwd: string, onProgress?: (pkg: string, index: number, total: number) => void): boolean;
+/** Detect which Expo runner should be used in the cwd. */
+export declare function detectExpoRunner(): NativeConfig["expoRunner"];
+/** Returns true if this looks like an Expo project. */
+export declare function isExpoProject(): boolean;
+/**
+ * Very minimal line diff — returns a coloured unified-diff-style string.
+ * For a production CLI you'd swap this for the `diff` package.
+ */
+export declare function lineDiff(a: string, b: string): string;
+/** Returns true if two strings are identical (ignoring line-ending differences). */
+export declare function isUpToDate(a: string, b: string): boolean;
+/** * Resolves the absolute destination path for a registry file, honouring
+ * the user-configured `outputDir` from native-ui.json.
+ *
+ * Registry entries store paths relative to the default output dir
+ * (e.g. "components/ui/button.tsx"). When the user has changed
+ * `outputDir` to something like "src/ui", this function strips the
+ * default prefix and replaces it with the configured one so the file
+ * lands in the right place.
+ */
+export declare function resolveComponentDest(file: {
+    path?: string;
+    target?: string;
+} | undefined, config: NativeConfig, fallback: string): string;
+export declare function getMissingPackages(packages: string[], cwd: string): string[];
+export {};