nativeui-cli 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kishan Agarwal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,192 @@
+# nativeui-cli
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/nativeui-cli">
+    <img src="https://img.shields.io/npm/v/nativeui-cli" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/nativeui-cli">
+    <img src="https://img.shields.io/npm/dm/nativeui-cli" alt="downloads" />
+  </a>
+  <a href="./LICENSE">
+    <img src="https://img.shields.io/npm/l/nativeui-cli" alt="license" />
+  </a>
+  <img src="https://img.shields.io/badge/Expo-Compatible-000000" alt="expo" />
+  <a>
+    <img src="https://img.shields.io/badge/TypeScript-4.9.5-blue" alt="typescript" />
+  </a>
+  <a href="https://nativeui.qzz.io">
+  <img src= "https://img.shields.io/badge/docs-online-blue" alt="docs" />
+  </a>
+</p>
+
+The CLI for Native UI — a collection of beautiful, native-feeling React Native and Expo components that you fully own.
+The CLI for Native UI — a collection of beautiful, native-feeling React Native and Expo components that you fully own.
+
+Unlike traditional component libraries, Native UI copies component source code directly into your project. No black boxes, no lock-in, and no fighting library abstractions.
+
+## Features
+
+* 🎨 Native-feeling UI components for Expo and React Native
+* 📦 Copy components directly into your codebase
+* 🌗 Built-in dark mode support
+* ⚡ Reanimated-powered interactions and animations
+* ♿ Accessible by default
+* 🔧 Fully customizable source code
+* 🚫 No vendor lock-in
+
+---
+
+## Quick Start
+
+Initialize Native UI in your project:
+
+```bash
+npx nativeui-cli@latest init
+```
+
+Then add components:
+
+```bash
+npx nativeui-cli@latest add button typography
+```
+
+---
+
+## Commands
+
+### init
+
+Set up Native UI in your project.
+
+```bash
+nativeui-cli init
+```
+
+Creates:
+
+* `native-ui.json`
+* Theme utilities
+* Required dependencies
+* Project configuration
+
+#### Options
+
+| Flag          | Description                      |
+| ------------- | -------------------------------- |
+| `-y, --yes`   | Skip prompts and use defaults    |
+| `-f, --force` | Overwrite existing configuration |
+
+---
+
+### add
+
+Add one or more components.
+
+```bash
+nativeui-cli add button
+```
+
+```bash
+nativeui-cli add button input card
+```
+
+```bash
+nativeui-cli add --all
+```
+
+#### Options
+
+| Flag              | Description                      |
+| ----------------- | -------------------------------- |
+| `-o, --overwrite` | Overwrite existing files         |
+| `-a, --all`       | Install all available components |
+
+---
+
+### remove
+
+Remove installed components.
+
+```bash
+nativeui-cli remove button
+```
+
+Alias:
+
+```bash
+nativeui-cli rm button
+```
+
+---
+
+### list
+
+List available and installed components.
+
+```bash
+nativeui-cli list
+```
+
+Alias:
+
+```bash
+nativeui-cli ls
+```
+
+---
+
+### diff
+
+Compare your local components against the latest registry versions.
+
+```bash
+nativeui-cli diff
+```
+
+```bash
+nativeui-cli diff button
+```
+
+Useful when new component updates are released and you've customized local copies.
+
+---
+
+## Example
+
+```bash
+# Initialize project
+npx nativeui-cli@latest init
+
+# Add components
+npx nativeui-cli@latest add button card input
+
+# Check installed components
+npx nativeui-cli@latest list
+
+# See available updates
+npx nativeui-cli@latest diff
+```
+
+---
+
+## Philosophy
+
+Native UI follows the same philosophy that made shadcn/ui popular:
+
+**You own the code.**
+
+Components are copied into your project as TypeScript source files. Edit them, refactor them, or delete them entirely. The CLI helps you get started, but your code remains yours.
+
+---
+
+## Documentation
+
+Visit the documentation site for installation guides, component documentation, and examples.
+
+[https://nativeui.qzz.io](https://nativeui.qzz.io)
+
+---
+
+## License
+
+MIT

package/dist/commands/add.d.ts

@@ -0,0 +1,4 @@
+export declare function addCommand(componentArgs: string[], opts: {
+    overwrite?: boolean;
+    all?: boolean;
+}): Promise<void>;

package/dist/commands/add.js

@@ -0,0 +1,166 @@
+// src/commands/add.ts
+// ─────────────────────────────────────────────────────────────
+// `native-ui add [components...]`
+//
+// Available components come from the static COMPONENTS array in
+// registry.ts — no network call needed just to show the list.
+//
+// File contents are fetched from the GraphQL backend only after
+// the user has picked what they want.
+//
+// native-ui.json `components` is updated after each successful write.
+// ─────────────────────────────────────────────────────────────
+import { intro, outro, multiselect, confirm, spinner, log, note, } from "@clack/prompts";
+import pc from "picocolors";
+import { COMPONENTS, entryName } from "../registry.js";
+import { readConfig, markInstalled, configExists } from "../config.js";
+import { fetchRegistryClosure, writeFile, buildInstallCmd, installPackages, logError, logWarn, getMissingPackages, resolveComponentDest, } from "../utils.js";
+export async function addCommand(componentArgs, opts) {
+    intro(pc.bgCyan(pc.black("  native-ui  ")) + pc.dim("  add components"));
+    if (!configExists()) {
+        logError("native-ui.json not found. Run `nativeui-cli init` first.");
+        process.exit(1);
+    }
+    const config = readConfig();
+    const installedKeys = config.components; // what's already in native-ui.json
+    // ── Resolve which components the user wants ──────────────────
+    let selectedKeys;
+    if (opts.all) {
+        selectedKeys = [...COMPONENTS];
+    }
+    else if (componentArgs.length > 0) {
+        selectedKeys = componentArgs.map((c) => c.toLowerCase());
+        const unknown = selectedKeys.filter((k) => !COMPONENTS.includes(k));
+        if (unknown.length > 0) {
+            logError(`Unknown component(s): ${unknown.join(", ")}`);
+            log.info(`Run ${pc.bold("nativeui-cli list")} to see all available components.`);
+            process.exit(1);
+        }
+    }
+    else {
+        // ── Interactive multiselect — list comes from COMPONENTS ───
+        const SELECT_ALL = "__select_all__";
+        const options = [
+            { value: SELECT_ALL, label: pc.bold("Select all") },
+            ...[...COMPONENTS].sort().map((key) => {
+                const isInstalled = installedKeys.includes(key);
+                return {
+                    value: key,
+                    label: pc.bold(key.padEnd(28)) +
+                        (isInstalled ? pc.green("installed") : ""),
+                };
+            }),
+        ];
+        const selected = await multiselect({
+            message: "Pick the components to add:",
+            options,
+            required: true,
+        });
+        if (typeof selected === "symbol") {
+            log.info("Cancelled.");
+            process.exit(0);
+        }
+        const chosen = selected;
+        selectedKeys = chosen.includes(SELECT_ALL) ? [...COMPONENTS] : chosen;
+    }
+    // ── Overwrite check ──────────────────────────────────────────
+    const alreadyInstalled = selectedKeys.filter((k) => installedKeys.includes(k));
+    if (alreadyInstalled.length > 0 && !opts.overwrite) {
+        logWarn(`Already installed: ${alreadyInstalled.join(", ")}`);
+        const overwrite = await confirm({
+            message: "Overwrite existing files?",
+            initialValue: false,
+        });
+        if (typeof overwrite === "symbol" || !overwrite) {
+            selectedKeys = selectedKeys.filter((k) => !alreadyInstalled.includes(k));
+        }
+    }
+    if (selectedKeys.length === 0) {
+        log.info("Nothing to install.");
+        process.exit(0);
+    }
+    // ── Fetch file contents + resolve transitive deps ────────────
+    const fetchSpin = spinner();
+    fetchSpin.start("Fetching components from registry…");
+    let closureEntries;
+    try {
+        closureEntries = await fetchRegistryClosure(selectedKeys);
+        fetchSpin.stop("");
+    }
+    catch (err) {
+        fetchSpin.stop(pc.red("Fetch failed."));
+        logError(err.message);
+        process.exit(1);
+    }
+    const entryMap = new Map(closureEntries.map((e) => [e.key.toLowerCase(), e]));
+    const resolvedKeys = closureEntries.map((e) => e.key.toLowerCase());
+    // Show auto-added transitive deps
+    const addedDeps = resolvedKeys.filter((k) => !selectedKeys.includes(k));
+    if (addedDeps.length > 0) {
+        note(addedDeps
+            .map((k) => `  ${pc.dim("+")} ${entryName(entryMap.get(k))}`)
+            .join("\n"), "Also adding required dependencies");
+    }
+    // ── Write files ───────────────────────────────────────────────
+    const allNpmDeps = new Set();
+    const results = [];
+    for (const key of resolvedKeys) {
+        const entry = entryMap.get(key);
+        const file = entry.files?.[0];
+        const content = file?.content;
+        if (typeof content !== "string") {
+            results.push({
+                key,
+                dest: "",
+                ok: false,
+                err: "No file content in registry response.",
+            });
+            continue;
+        }
+        const dest = resolveComponentDest(file, config, key);
+        try {
+            writeFile(dest, content);
+            (entry.dependencies ?? []).forEach((d) => allNpmDeps.add(d));
+            markInstalled(key); // ← writes key into native-ui.json `components[]`
+            results.push({ key, dest, ok: true });
+        }
+        catch (err) {
+            results.push({ key, dest, ok: false, err: String(err) });
+        }
+    }
+    // ── Print results (shadcn style: name → path) ─────────────────
+    for (const r of results) {
+        const name = entryName(entryMap.get(r.key) ?? { key: r.key });
+        if (r.ok) {
+            log.success(`${pc.green(name)} → ${pc.dim(r.dest)}`);
+        }
+        else {
+            log.error(`${pc.red(name)}: ${r.err}`);
+        }
+    }
+    // ── Install npm deps ──────────────────────────────────────────
+    if (allNpmDeps.size > 0) {
+        const depList = [...allNpmDeps];
+        // Filter out packages already present in package.json
+        const missingDeps = getMissingPackages(depList, process.cwd());
+        if (missingDeps.length === 0) {
+            log.success(pc.green("All required dependencies are already installed."));
+        }
+        else {
+            const ds = spinner();
+            ds.start(`Installing ${missingDeps.join(", ")}…`);
+            const ok = await installPackages(missingDeps, config.expoRunner, process.cwd(), (pkg, i, total) => log.message(pc.dim(`Installing ${pkg} (${i + 1}/${total})…`)));
+            if (ok) {
+                ds.stop(pc.green(`Installed ${missingDeps.join(", ")}`));
+            }
+            else {
+                ds.stop(pc.yellow("Dependency install failed. Run manually:"));
+                log.message(pc.dim(`  ${buildInstallCmd(config.expoRunner, missingDeps)}`));
+            }
+        }
+    }
+    const failed = results.filter((r) => !r.ok);
+    outro(failed.length === 0
+        ? pc.cyan(`${results.length} component(s) added successfully.`)
+        : pc.yellow(`Done with ${failed.length} error(s).`));
+}

package/dist/commands/diff.d.ts

@@ -0,0 +1 @@
+export declare function diffCommand(componentArg?: string): Promise<void>;

package/dist/commands/diff.js

@@ -0,0 +1,133 @@
+// src/commands/diff.ts
+// ─────────────────────────────────────────────────────────────
+// `native-ui diff [component]`
+//
+// Compares installed component files against the registry.
+// "Installed" = `native-ui.json → components[]`
+// Available component keys come from the static COMPONENTS array.
+// ─────────────────────────────────────────────────────────────
+import { intro, outro, spinner, log, select } from "@clack/prompts";
+import pc from "picocolors";
+import { configExists, readConfig } from "../config.js";
+import { fetchRegistryEntries, readFileSafe, isUpToDate, lineDiff, logError, logSuccess, logWarn, resolveComponentDest, } from "../utils.js";
+import { COMPONENTS, entryName } from "../registry.js";
+export async function diffCommand(componentArg) {
+    intro(pc.bgCyan(pc.black("  native-ui  ")) + pc.dim("  diff"));
+    if (!configExists()) {
+        logError("native-ui.json not found. Run `nativeui-cli init` first.");
+        process.exit(1);
+    }
+    const config = readConfig();
+    // ── Decide which components to check ────────────────────────
+    let keysToCheck;
+    if (componentArg) {
+        const key = componentArg.toLowerCase();
+        if (!COMPONENTS.includes(key)) {
+            logError(`Unknown component: ${componentArg}. Run \`nativeui-cli list\` to see available components.`);
+            process.exit(1);
+        }
+        if (!config.components.includes(key)) {
+            logError(`${componentArg} is not installed. Run \`nativeui-cli add ${key}\` first.`);
+            process.exit(1);
+        }
+        keysToCheck = [key];
+    }
+    else {
+        keysToCheck = config.components; // everything in native-ui.json
+        if (keysToCheck.length === 0) {
+            log.info("No components installed yet. Run `nativeui-cli add` first.");
+            process.exit(0);
+        }
+    }
+    // ── Fetch remote versions ────────────────────────────────────
+    const s = spinner();
+    s.start(`Fetching ${keysToCheck.length} component(s) from registry…`);
+    let registryEntries;
+    try {
+        registryEntries = await fetchRegistryEntries(keysToCheck);
+        s.stop("");
+    }
+    catch (err) {
+        s.stop(pc.red("Fetch failed."));
+        logError(err.message);
+        process.exit(1);
+    }
+    const entryMap = new Map(registryEntries.map((e) => [e.key.toLowerCase(), e]));
+    const results = [];
+    for (const key of keysToCheck) {
+        const entry = entryMap.get(key);
+        if (!entry) {
+            results.push({ key, status: "error", err: "Not found in registry." });
+            continue;
+        }
+        const file = entry.files?.[0];
+        const localPath = resolveComponentDest(file, config, key);
+        const localContent = readFileSafe(localPath);
+        if (localContent === null) {
+            results.push({ key, status: "missing" });
+            continue;
+        }
+        const remoteContent = file?.content;
+        if (typeof remoteContent !== "string") {
+            results.push({
+                key,
+                status: "error",
+                err: "Registry returned no file content.",
+            });
+            continue;
+        }
+        results.push(isUpToDate(localContent, remoteContent)
+            ? { key, status: "upToDate" }
+            : {
+                key,
+                status: "changed",
+                diff: lineDiff(localContent, remoteContent),
+            });
+    }
+    // ── Print results ─────────────────────────────────────────────
+    console.log();
+    for (const r of results) {
+        const name = entryName(entryMap.get(r.key) ?? { key: r.key });
+        if (r.status === "upToDate")
+            logSuccess(`${name} — up to date`);
+        if (r.status === "missing")
+            logWarn(`${name} — local file missing. Re-add: nativeui-cli add ${r.key}`);
+        if (r.status === "error")
+            logError(`${name} — ${r.err}`);
+    }
+    const changed = results.filter((r) => r.status === "changed");
+    if (changed.length === 0) {
+        console.log();
+        log.info(pc.green("All components are up to date!"));
+    }
+    else {
+        console.log();
+        log.warn(pc.yellow(`${changed.length} component(s) have updates available:`));
+        console.log();
+        for (const r of changed) {
+            const entry = entryMap.get(r.key);
+            const file = entry?.files?.[0];
+            console.log(pc.bold(`── ${entryName(entry ?? { key: r.key })} `) +
+                pc.dim(`(${file?.target ?? file?.path ?? r.key})`) +
+                pc.bold(" ──"));
+            console.log(r.diff);
+            console.log();
+        }
+        const choice = await select({
+            message: "What would you like to do?",
+            options: [
+                {
+                    value: "update-all",
+                    label: `Update all ${changed.length} component(s)`,
+                },
+                { value: "skip", label: "Skip — I will update manually" },
+            ],
+        });
+        if (choice === "update-all") {
+            const { addCommand } = await import("./add.js");
+            await addCommand(changed.map((r) => r.key), { overwrite: true });
+            return;
+        }
+    }
+    outro(pc.cyan("Diff complete."));
+}

package/dist/commands/init.d.ts

@@ -0,0 +1,4 @@
+export declare function initCommand(opts: {
+    yes?: boolean;
+    force?: boolean;
+}): Promise<void>;

package/dist/commands/init.js

@@ -0,0 +1,133 @@
+// src/commands/init.ts
+// ─────────────────────────────────────────────────────────────
+// `native-ui init`
+//
+// Creates native-ui.json with project settings.
+// No registry fetch needed — component list is static in registry.ts.
+// ─────────────────────────────────────────────────────────────
+import { intro, outro, confirm, select, text, spinner, log, note, } from '@clack/prompts';
+import pc from 'picocolors';
+import path from 'path';
+import { configExists, readConfig, writeConfig, markInstalled, DEFAULT_CONFIG, DEFAULT_BASE_DEPENDENCIES, } from '../config.js';
+import { fetchRegistryEntries, detectExpoRunner, buildInstallCmd, installPackages, isExpoProject, logWarn, writeFile, getMissingPackages, // <-- ADDED THIS
+ } from '../utils.js';
+import { COMPONENTS } from '../registry.js';
+export async function initCommand(opts) {
+    intro(pc.bgCyan(pc.black('  native-ui  ')) + pc.dim('  initialise project'));
+    const projectRoot = process.cwd();
+    // ── Already initialised? ────────────────────────────────────
+    if (configExists() && !opts.force) {
+        const overwrite = await confirm({
+            message: 'native-ui.json already exists. Overwrite it?',
+            initialValue: false,
+        });
+        if (!overwrite || typeof overwrite === 'symbol') {
+            log.info('Init cancelled — existing config preserved.');
+            process.exit(0);
+        }
+    }
+    // ── Expo project check ──────────────────────────────────────
+    if (!isExpoProject()) {
+        logWarn('No app.json found — this does not look like an Expo project.');
+        const proceed = await confirm({ message: 'Continue anyway?', initialValue: false });
+        if (!proceed || typeof proceed === 'symbol')
+            process.exit(0);
+    }
+    // ── Preserve already-installed components across re-init ─────
+    let existingComponents = [];
+    if (configExists()) {
+        try {
+            existingComponents = readConfig().components;
+        }
+        catch { /* fresh install */ }
+    }
+    let config = { ...DEFAULT_CONFIG, components: existingComponents };
+    if (!opts.yes) {
+        const useTs = await confirm({ message: 'Are you using TypeScript?', initialValue: true });
+        if (typeof useTs === 'symbol')
+            process.exit(0);
+        config.typescript = useTs;
+        const outputDir = await text({
+            message: 'Where should components be installed?',
+            initialValue: config.outputDir,
+            placeholder: 'components/ui',
+            validate: (v) => (!v || !v.trim() ? 'Path cannot be empty.' : undefined),
+        });
+        if (typeof outputDir === 'symbol')
+            process.exit(0);
+        config.outputDir = outputDir.trim();
+        const runner = await select({
+            message: 'Which command runs Expo?',
+            options: [
+                { value: 'npx', label: 'npx expo  (npm)' },
+                { value: 'pnpm', label: 'pnpm expo' },
+                { value: 'yarn', label: 'yarn expo' },
+                { value: 'bunx', label: 'bunx expo' },
+            ],
+            initialValue: detectExpoRunner(),
+        });
+        if (typeof runner === 'symbol')
+            process.exit(0);
+        config.expoRunner = runner;
+    }
+    config.baseDependencies = [...DEFAULT_BASE_DEPENDENCIES];
+    // ── Write native-ui.json ─────────────────────────────────────
+    writeConfig(config);
+    // ── Summary ──────────────────────────────────────────────────
+    note([
+        `${pc.dim('config')}            native-ui.json`,
+        `${pc.dim('typescript')}        ${config.typescript ? 'yes' : 'no'}`,
+        `${pc.dim('outputDir')}         ${config.outputDir}`,
+        `${pc.dim('expoRunner')}        ${config.expoRunner}`,
+        `${pc.dim('baseDependencies')}  ${config.baseDependencies.join(', ')}`,
+        `${pc.dim('components')}        ${COMPONENTS.length} available`,
+    ].join('\n'), 'native-ui.json');
+    // ── Install base peer deps ───────────────────────────────────
+    let shouldInstall = true;
+    if (!opts.yes) {
+        shouldInstall = await confirm({
+            message: `Install base dependencies (${config.baseDependencies.join(', ')})?`,
+            initialValue: true,
+        });
+        // FIX: Properly handle cancellation at the prompt
+        if (typeof shouldInstall === 'symbol') {
+            log.info('Cancelled.');
+            process.exit(0);
+        }
+    }
+    if (shouldInstall) {
+        // FIX: Filter base dependencies to skip already installed packages
+        const missingBaseDeps = getMissingPackages(config.baseDependencies, projectRoot);
+        if (missingBaseDeps.length === 0) {
+            log.success(pc.green('Base dependencies are already installed.'));
+        }
+        else {
+            const s = spinner();
+            s.start(`Installing base dependencies…`);
+            log.message(pc.dim(`Installing ${missingBaseDeps.join(', ')}…`));
+            const ok = installPackages(missingBaseDeps, config.expoRunner, projectRoot);
+            if (ok) {
+                s.stop(pc.green('Base dependencies installed.'));
+            }
+            else {
+                s.stop(pc.yellow('Install failed — run manually:'));
+                log.message(pc.dim(`  ${buildInstallCmd(config.expoRunner, missingBaseDeps)}`));
+            }
+        }
+    }
+    // ── Write shared lib helpers (theme / use-styles) ────────────
+    try {
+        const libEntries = await fetchRegistryEntries(['lib-theme', 'lib-use-styles']);
+        for (const entry of libEntries) {
+            const file = entry.files?.[0];
+            if (!file || typeof file.content !== 'string')
+                continue;
+            const dest = path.resolve(projectRoot, file.target ?? file.path ?? entry.key);
+            writeFile(dest, file.content);
+            markInstalled(entry.key.toLowerCase());
+            log.message(pc.dim(`Wrote ${file.target ?? file.path ?? entry.key}`));
+        }
+    }
+    catch { /* non-fatal */ }
+    outro(pc.cyan('Done! Run ') + pc.bold('nativeui-cli add') + pc.cyan(' to add components.'));
+}

package/dist/commands/list.d.ts

@@ -0,0 +1,5 @@
+interface ListOptions {
+    category?: string;
+}
+export declare function listCommand(opts: ListOptions): Promise<void>;
+export {};