alexui 1.0.0

package/dist/tui/panels.js

@@ -0,0 +1,50 @@
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import path from 'node:path';
+import { getRegistry } from '../registry.js';
+import { configExists, readConfig } from '../utils/config.js';
+import { detectPackageManager } from '../utils/project.js';
+import { icon, renderBanner, renderDivider, shortenPath, statusBadge } from './theme.js';
+export function renderProjectPanel(cwd) {
+    const registry = getRegistry();
+    const pm = detectPackageManager(cwd);
+    const ready = configExists(cwd);
+    const lines = [
+        statusBadge(ready) + pc.dim('  ') + pc.dim(shortenPath(cwd, 44)),
+        '',
+        `${icon.project} ${pc.bold('Proyecto')}  ${pc.white(shortenPath(cwd))}`,
+        `${icon.pm} ${pc.bold('Gestor')}    ${pc.cyan(pm)}`,
+        `${icon.list} ${pc.bold('Catálogo')}  ${pc.dim(`AlexUI ${registry.version} · ${registry.componentCount} componentes`)}`,
+    ];
+    if (ready) {
+        const config = readConfig(cwd);
+        lines.splice(3, 0, `${icon.folder} ${pc.bold('UI')}        ${pc.dim(path.join(cwd, config.componentDir))}`, `${icon.css} ${pc.bold('CSS')}       ${pc.dim(path.join(cwd, config.tailwind.css))}`);
+    }
+    else {
+        lines.splice(3, 0, pc.yellow(`  ${icon.warn} Sin alexui.json — inicializá el proyecto primero`));
+    }
+    return lines.join('\n');
+}
+export function printWelcome(cwd) {
+    const registry = getRegistry();
+    console.log(renderBanner(registry.version, registry.componentCount));
+    p.note(renderProjectPanel(cwd), `${icon.logo} Panel de control`);
+}
+export function printProjectPanel(cwd, title = 'Estado actualizado') {
+    p.note(renderProjectPanel(cwd), title);
+}
+export function menuOptions(cwd) {
+    const registry = getRegistry();
+    return [
+        { value: 'init', label: `${icon.init}  Inicializar proyecto`, hint: 'alexui.json + tema CSS' },
+        { value: 'add', label: `${icon.add}  Agregar componentes`, hint: 'multiselección rápida' },
+        { value: 'browse', label: `${icon.browse}  Explorar catálogo`, hint: 'detalle y preview' },
+        { value: 'search', label: `${icon.search}  Buscar`, hint: 'id, título o categoría' },
+        { value: 'list', label: `${icon.list}  Ver catálogo completo`, hint: `${registry.componentCount} items` },
+        { value: 'chdir', label: `${icon.chdir}  Cambiar proyecto`, hint: shortenPath(cwd, 36) },
+        { value: 'exit', label: `${icon.exit}  Salir`, hint: 'cerrar TUI' },
+    ];
+}
+export function sectionHeader(title) {
+    console.log(renderDivider(title));
+}

package/dist/tui/theme.d.ts

@@ -0,0 +1,28 @@
+export declare const icon: {
+    readonly logo: "✦";
+    readonly project: "◈";
+    readonly folder: "▸";
+    readonly css: "◇";
+    readonly pm: "⚡";
+    readonly init: "⚙";
+    readonly add: "＋";
+    readonly browse: "◉";
+    readonly search: "◎";
+    readonly list: "≡";
+    readonly chdir: "↦";
+    readonly exit: "✕";
+    readonly complete: "●";
+    readonly atomic: "○";
+    readonly npm: "▪";
+    readonly internal: "↳";
+    readonly ok: "✓";
+    readonly warn: "!";
+    readonly back: "←";
+};
+export declare function categoryIcon(category: string): string;
+export declare function shortenPath(fullPath: string, max?: number): string;
+export declare function renderBanner(version: string, componentCount: number): string;
+export declare function renderDivider(label?: string): string;
+export declare function statusBadge(ready: boolean): string;
+export declare function groupBadge(group: 'completos' | 'individuales'): string;
+export declare function depPills(deps: string[], kind: 'npm' | 'internal'): string;

package/dist/tui/theme.js

@@ -0,0 +1,76 @@
+import pc from 'picocolors';
+export const icon = {
+    logo: '✦',
+    project: '◈',
+    folder: '▸',
+    css: '◇',
+    pm: '⚡',
+    init: '⚙',
+    add: '＋',
+    browse: '◉',
+    search: '◎',
+    list: '≡',
+    chdir: '↦',
+    exit: '✕',
+    complete: '●',
+    atomic: '○',
+    npm: '▪',
+    internal: '↳',
+    ok: '✓',
+    warn: '!',
+    back: '←',
+};
+const CATEGORY_ICONS = {
+    entradas: '⌨',
+    estructura: '▣',
+    feedback: '◐',
+    multimedia: '▶',
+    animaciones: '〜',
+    tablas: '▤',
+    complejos: '◆',
+};
+export function categoryIcon(category) {
+    return CATEGORY_ICONS[category] ?? '·';
+}
+export function shortenPath(fullPath, max = 52) {
+    if (fullPath.length <= max)
+        return fullPath;
+    const normalized = fullPath.replace(/\\/g, '/');
+    const parts = normalized.split('/');
+    if (parts.length <= 3)
+        return `…${normalized.slice(-max + 1)}`;
+    return `${parts[0]}/…/${parts.slice(-2).join('/')}`;
+}
+export function renderBanner(version, componentCount) {
+    const line = '─'.repeat(36);
+    return [
+        '',
+        pc.magenta(`  ${icon.logo} `) + pc.bold(pc.white('AlexUI')) + pc.dim(`  v${version}`),
+        pc.dim(`  ${line}`),
+        pc.dim(`  ${componentCount} componentes`) + pc.magenta('  ·  ') + pc.dim('glassmorphic react'),
+        '',
+    ].join('\n');
+}
+export function renderDivider(label) {
+    if (!label)
+        return pc.dim('  ────────────────────────────────────');
+    const pad = Math.max(2, 34 - label.length);
+    return pc.dim(`  ── ${label} ${'─'.repeat(pad)}`);
+}
+export function statusBadge(ready) {
+    return ready
+        ? pc.bgGreen(pc.black(` ${icon.ok} listo `))
+        : pc.bgYellow(pc.black(` ${icon.warn} sin init `));
+}
+export function groupBadge(group) {
+    return group === 'completos'
+        ? pc.bgMagenta(pc.black(` ${icon.complete} completo `))
+        : pc.bgBlue(pc.black(` ${icon.atomic} atómico `));
+}
+export function depPills(deps, kind) {
+    if (deps.length === 0)
+        return pc.dim('  ninguna');
+    const color = kind === 'npm' ? pc.cyan : pc.yellow;
+    const prefix = kind === 'npm' ? icon.npm : icon.internal;
+    return deps.map((d) => color(` ${prefix} ${d} `)).join(pc.dim(' · '));
+}

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+export interface AlexUIConfig {
+    $schema?: string;
+    style: string;
+    tailwind: {
+        css: string;
+        version: string;
+    };
+    componentDir: string;
+    aliases?: {
+        components?: string;
+        ui?: string;
+    };
+}
+export interface RegistryComponent {
+    id: string;
+    title: string;
+    group: 'completos' | 'individuales';
+    category: string;
+    description: string;
+    file: string;
+    npmDependencies: string[];
+    internalDependencies: string[];
+}
+export interface RegistryManifest {
+    version: string;
+    componentCount: number;
+    components: RegistryComponent[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/config.d.ts

@@ -0,0 +1,6 @@
+import type { AlexUIConfig } from '../types.js';
+export declare function getConfigPath(cwd?: string): string;
+export declare function configExists(cwd?: string): boolean;
+export declare function readConfig(cwd?: string): AlexUIConfig;
+export declare function writeConfig(config: AlexUIConfig, cwd?: string): void;
+export declare const DEFAULT_CONFIG: AlexUIConfig;

package/dist/utils/config.js

@@ -0,0 +1,24 @@
+import fs from 'node:fs';
+import path from 'node:path';
+const CONFIG_FILE = 'alexui.json';
+export function getConfigPath(cwd = process.cwd()) {
+    return path.join(cwd, CONFIG_FILE);
+}
+export function configExists(cwd = process.cwd()) {
+    return fs.existsSync(getConfigPath(cwd));
+}
+export function readConfig(cwd = process.cwd()) {
+    const raw = fs.readFileSync(getConfigPath(cwd), 'utf8');
+    return JSON.parse(raw);
+}
+export function writeConfig(config, cwd = process.cwd()) {
+    fs.writeFileSync(getConfigPath(cwd), JSON.stringify(config, null, 2) + '\n', 'utf8');
+}
+export const DEFAULT_CONFIG = {
+    style: 'default',
+    tailwind: {
+        css: 'src/index.css',
+        version: '4',
+    },
+    componentDir: 'src/components/ui',
+};

package/dist/utils/copy.d.ts

@@ -0,0 +1,9 @@
+import type { RegistryComponent } from '../types.js';
+export interface CopyResult {
+    created: string[];
+    skipped: string[];
+    targetDir: string;
+}
+export declare function copyComponents(components: RegistryComponent[], targetDir: string, overwrite?: boolean): CopyResult;
+export declare function collectNpmDependencies(components: RegistryComponent[]): string[];
+export declare function getMissingDependencies(required: string[], cwd?: string): string[];

package/dist/utils/copy.js

@@ -0,0 +1,43 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { getComponentsDir } from '../registry.js';
+import { ensureDir } from './project.js';
+export function copyComponents(components, targetDir, overwrite = false) {
+    const sourceDir = getComponentsDir();
+    ensureDir(targetDir);
+    const created = [];
+    const skipped = [];
+    for (const comp of components) {
+        const src = path.join(sourceDir, comp.file);
+        const dest = path.join(targetDir, comp.file);
+        if (!fs.existsSync(src)) {
+            throw new Error(`Componente fuente no encontrado: ${comp.file}`);
+        }
+        if (fs.existsSync(dest) && !overwrite) {
+            skipped.push(comp.file);
+            continue;
+        }
+        fs.copyFileSync(src, dest);
+        created.push(comp.file);
+    }
+    return { created, skipped, targetDir };
+}
+export function collectNpmDependencies(components) {
+    const deps = new Set();
+    for (const comp of components) {
+        for (const dep of comp.npmDependencies)
+            deps.add(dep);
+    }
+    return [...deps].sort();
+}
+export function getMissingDependencies(required, cwd = process.cwd()) {
+    const pkgPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(pkgPath))
+        return required;
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    const installed = new Set([
+        ...Object.keys(pkg.dependencies ?? {}),
+        ...Object.keys(pkg.devDependencies ?? {}),
+    ]);
+    return required.filter((dep) => !installed.has(dep));
+}

package/dist/utils/cwd.d.ts

@@ -0,0 +1,6 @@
+export declare function resolveProjectDir(input?: string): string;
+/** Extrae --cwd / -C de argv antes de que Commander los procese. */
+export declare function parseCwdFromArgs(args: string[]): {
+    cwd: string;
+    rest: string[];
+};

package/dist/utils/cwd.js

@@ -0,0 +1,30 @@
+import fs from 'node:fs';
+import path from 'node:path';
+export function resolveProjectDir(input) {
+    const dir = path.resolve(input ?? process.cwd());
+    if (!fs.existsSync(dir)) {
+        throw new Error(`El directorio no existe: ${dir}`);
+    }
+    if (!fs.statSync(dir).isDirectory()) {
+        throw new Error(`No es un directorio: ${dir}`);
+    }
+    return dir;
+}
+/** Extrae --cwd / -C de argv antes de que Commander los procese. */
+export function parseCwdFromArgs(args) {
+    let cwd = process.cwd();
+    const rest = [];
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if ((arg === '--cwd' || arg === '-C') && args[i + 1]) {
+            cwd = args[++i];
+            continue;
+        }
+        if (arg.startsWith('--cwd=')) {
+            cwd = arg.slice(6);
+            continue;
+        }
+        rest.push(arg);
+    }
+    return { cwd, rest };
+}

package/dist/utils/deps.d.ts

@@ -0,0 +1 @@
+export declare function installPackages(packages: string[], cwd?: string): boolean;

package/dist/utils/deps.js

@@ -0,0 +1,19 @@
+import { spawnSync } from 'node:child_process';
+import { detectPackageManager } from './project.js';
+export function installPackages(packages, cwd = process.cwd()) {
+    if (packages.length === 0)
+        return true;
+    const pm = detectPackageManager(cwd);
+    const installArgs = {
+        npm: ['install', ...packages],
+        pnpm: ['add', ...packages],
+        yarn: ['add', ...packages],
+        bun: ['add', ...packages],
+    };
+    const result = spawnSync(pm, installArgs[pm], {
+        cwd,
+        stdio: 'inherit',
+        shell: process.platform === 'win32',
+    });
+    return result.status === 0;
+}

package/dist/utils/project.d.ts

@@ -0,0 +1,5 @@
+export declare function ensureDir(dir: string): void;
+export declare function fileExists(filePath: string): boolean;
+export declare function readPackageJson(cwd?: string): Record<string, unknown> | null;
+export declare function detectPackageManager(cwd?: string): 'npm' | 'pnpm' | 'yarn' | 'bun';
+export declare function hasReactProject(cwd?: string): boolean;

package/dist/utils/project.js

@@ -0,0 +1,30 @@
+import fs from 'node:fs';
+import path from 'node:path';
+export function ensureDir(dir) {
+    fs.mkdirSync(dir, { recursive: true });
+}
+export function fileExists(filePath) {
+    return fs.existsSync(filePath);
+}
+export function readPackageJson(cwd = process.cwd()) {
+    const pkgPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(pkgPath))
+        return null;
+    return JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+}
+export function detectPackageManager(cwd = process.cwd()) {
+    if (fs.existsSync(path.join(cwd, 'bun.lockb')) || fs.existsSync(path.join(cwd, 'bun.lock')))
+        return 'bun';
+    if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml')))
+        return 'pnpm';
+    if (fs.existsSync(path.join(cwd, 'yarn.lock')))
+        return 'yarn';
+    return 'npm';
+}
+export function hasReactProject(cwd = process.cwd()) {
+    const pkg = readPackageJson(cwd);
+    if (!pkg)
+        return false;
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    return Boolean(deps.react);
+}

package/dist/utils/theme.d.ts

@@ -0,0 +1 @@
+export declare function applyThemeCss(cssPath: string, cwd?: string): 'created' | 'merged' | 'exists';

package/dist/utils/theme.js

@@ -0,0 +1,24 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { getTemplatesDir } from '../registry.js';
+import { ensureDir } from './project.js';
+const THEME_MARKER = '/* alexui-theme */';
+export function applyThemeCss(cssPath, cwd = process.cwd()) {
+    const fullPath = path.join(cwd, cssPath);
+    const templatePath = path.join(getTemplatesDir(), 'theme.css');
+    if (!fs.existsSync(templatePath)) {
+        throw new Error('Plantilla de tema no encontrada en el paquete CLI');
+    }
+    const template = fs.readFileSync(templatePath, 'utf8');
+    if (!fs.existsSync(fullPath)) {
+        ensureDir(path.dirname(fullPath));
+        fs.writeFileSync(fullPath, template, 'utf8');
+        return 'created';
+    }
+    const existing = fs.readFileSync(fullPath, 'utf8');
+    if (existing.includes(THEME_MARKER) || existing.includes('--color-accent')) {
+        return 'exists';
+    }
+    fs.writeFileSync(fullPath, `${existing.trimEnd()}\n\n${template}\n`, 'utf8');
+    return 'merged';
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "alexui",
+  "version": "1.0.0",
+  "description": "CLI para agregar componentes AlexUI by Alexis Jardin a tu proyecto React",
+  "author": "Alexis Jardin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alexisjardin-js/AlexUI.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/alexisjardin-js/AlexUI#readme",
+  "bugs": {
+    "url": "https://github.com/alexisjardin-js/AlexUI/issues"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "glassmorphic",
+    "tailwind",
+    "cli",
+    "shadcn"
+  ],
+  "type": "module",
+  "bin": {
+    "alexui": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "registry.json",
+    "components",
+    "templates"
+  ],
+  "dependencies": {
+    "@clack/prompts": "^0.10.1",
+    "commander": "^13.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.3",
+    "typescript": "~6.0.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prebuild": "node ../../scripts/generate-cli-registry.mjs",
+    "dev": "tsc --watch"
+  }
+}