@caribeng/ui 22.1.1 → 22.4.0

package/schematics/migrate-from-primeng/index.js

@@ -0,0 +1,290 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateFromPrimeng = migrateFromPrimeng;
+const schematics_1 = require("@angular-devkit/schematics");
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+const utility_1 = require("@schematics/angular/utility");
+const index_1 = require("../ng-add/index");
+const icons_1 = require("./icons");
+const mappings_1 = require("./mappings");
+const report_1 = require("./report");
+const template_1 = require("./template");
+const typescript_1 = require("./typescript");
+const workspace_1 = require("./workspace");
+/** Versión mínima de PrimeNG con la que se escribieron los mapeos (`p-select` existe desde la 18). */
+const MIN_PRIMENG_MAJOR = 18;
+const STYLESHEET = /\.(css|scss|sass|less)$/;
+const WORKSPACE_CONFIG = /(^|\/)(angular|project)\.json$/;
+/**
+ * `ng generate @caribeng/ui:migrate-from-primeng`: traduce un proyecto
+ * PrimeNG a CaribeNG. Cambia imports, plantillas, iconos, estilos y el
+ * proveedor; lo que no puede traducir con seguridad lo marca con
+ * `TODO(caribeng)` y lo resume en `caribeng-migration-report.md`.
+ */
+function migrateFromPrimeng(options) {
+    return async (tree, context) => {
+        checkPreconditions(tree, options);
+        context.logger.info('Migrando de PrimeNG a CaribeNG. Revisa el resultado con `git diff` antes de hacer commit.');
+        const migration = {
+            compiler: await (0, template_1.loadCompiler)(),
+            context,
+            changed: new Set(),
+            icons: new Map(),
+            templates: new Set(),
+            manual: [],
+        };
+        const root = normalizeRoot(options.path);
+        const files = (0, workspace_1.workspaceFiles)(tree, root);
+        for (const path of files) {
+            if (/\.(ts|mts)$/.test(path) && !path.endsWith('.d.ts'))
+                migrateSource(tree, path, migration);
+        }
+        for (const path of files) {
+            if (path.endsWith('.html') && !migration.templates.has(path))
+                migrateHtml(tree, path, migration);
+            else if (STYLESHEET.test(path))
+                migrateStylesheet(tree, path, migration);
+        }
+        for (const path of (0, workspace_1.workspaceFiles)(tree)) {
+            if (WORKSPACE_CONFIG.test(path) && (0, workspace_1.removePrimeStyleEntries)(tree, path, context))
+                migration.changed.add(path);
+        }
+        const apps = await applications(tree, context);
+        return (0, schematics_1.chain)([
+            ...apps.map((app) => (0, index_1.addStyles)(app.name)),
+            ...apps.map((app) => ensureProvider(app)),
+            ...apps.map((app) => registerIcons(app, migration)),
+            finish(options, migration),
+        ]);
+    };
+}
+function checkPreconditions(tree, options) {
+    const pkg = (0, workspace_1.readPackageJson)(tree);
+    if (!pkg)
+        throw new schematics_1.SchematicsException('No se encontró package.json en la raíz del workspace.');
+    if (options.force)
+        return;
+    if (!(0, workspace_1.dependencyVersion)(pkg, '@caribeng/ui')) {
+        throw new schematics_1.SchematicsException('Instala CaribeNG antes de migrar:\n  npm install @caribeng/ui@22\nUsa --force para migrar igualmente.');
+    }
+    const primeng = (0, workspace_1.dependencyVersion)(pkg, 'primeng');
+    if (!primeng)
+        throw new schematics_1.SchematicsException('primeng no está en package.json. Usa --force para migrar igualmente.');
+    const major = (0, workspace_1.majorOf)(primeng);
+    if (major !== null && major < MIN_PRIMENG_MAJOR) {
+        throw new schematics_1.SchematicsException(`Se encontró PrimeNG ${primeng}. El migrador admite PrimeNG ${MIN_PRIMENG_MAJOR} o superior: actualiza primero (ng update primeng@${MIN_PRIMENG_MAJOR}) o usa --force.`);
+    }
+}
+function normalizeRoot(path) {
+    const clean = (path ?? '/').replace(/\\/g, '/').replace(/^\.?\/*/, '/').replace(/\/+$/, '');
+    return clean || '/';
+}
+function dirname(path) {
+    return path.slice(0, path.lastIndexOf('/')) || '/';
+}
+/** `../shared/x.html` relativo a `/src/app/a/a.ts` → `/src/app/shared/x.html`. */
+function resolvePath(from, relative) {
+    const parts = dirname(from).split('/');
+    for (const part of relative.replace(/^\.\//, '').split('/')) {
+        if (part === '..')
+            parts.pop();
+        else if (part !== '.')
+            parts.push(part);
+    }
+    return parts.join('/');
+}
+/** Tags (`cb-button`) y directivas (`cbTooltip`) CaribeNG que aparecen en `after` pero no en `before` → símbolos a importar. */
+function introducedSymbols(before, after) {
+    // Los avisos TODO(caribeng) citan tags de CaribeNG (`<cb-radio-group>`): los comentarios no cuentan.
+    const code = (text) => text.replace(/<!--[\s\S]*?-->/g, '');
+    const tags = (text) => new Set([...code(text).matchAll(/<(cb-[a-z0-9-]+)/g)].map((m) => m[1]));
+    const attrs = (text) => new Set([...code(text).matchAll(/[\s[](cb[A-Z][A-Za-z]*)\]?(?=[\s=/>])/g)].map((m) => m[1]));
+    const symbols = new Map();
+    for (const [found, index] of [
+        [tags, mappings_1.TAG_SYMBOLS],
+        [attrs, mappings_1.ATTR_SYMBOLS],
+    ]) {
+        const previous = found(before);
+        for (const name of found(after)) {
+            const symbol = index.get(name);
+            if (symbol && !previous.has(name))
+                symbols.set(symbol.name, symbol);
+        }
+    }
+    return [...symbols.values()];
+}
+/**
+ * Módulos PrimeNG que el componente importaba y que su plantilla migrada aún
+ * necesita porque algún elemento no se pudo convertir (p. ej. una p-table con
+ * columnas dinámicas): se vuelven a importar para que siga compilando.
+ */
+function keptPrimengModules(source, template) {
+    const code = template.replace(/<!--[\s\S]*?-->/g, '');
+    const kept = new Map();
+    for (const [tag, mapping] of mappings_1.MAPPING_BY_TAG) {
+        if (!new RegExp(`<${tag}[\\s/>]`).test(code))
+            continue;
+        for (const [module, symbols] of Object.entries(mapping.modules)) {
+            const name = Object.keys(symbols).find((symbol) => new RegExp(`import\\s*\\{[^}]*\\b${symbol}\\b[^}]*\\}\\s*from\\s*['"]${module}['"]`).test(source));
+            if (name)
+                kept.set(name, { name, entry: module });
+        }
+    }
+    return [...kept.values()];
+}
+function addIcons(migration, path, icons) {
+    if (!icons.size)
+        return;
+    const set = migration.icons.get(path) ?? new Set();
+    icons.forEach((icon) => set.add(icon));
+    migration.icons.set(path, set);
+}
+/** Un `.ts`: imports, plantilla (en línea o `templateUrl`) e `imports` del componente. */
+function migrateSource(tree, path, migration) {
+    const original = tree.readText(path);
+    // Las plantillas (sin migrar) dicen qué menú recibe cada array de MenuItem.
+    const templates = (0, typescript_1.findComponents)(path, original).flatMap((component) => {
+        if (component.inlineTemplate !== undefined)
+            return [component.inlineTemplate];
+        const templatePath = component.templateUrl && resolvePath(path, component.templateUrl);
+        return templatePath && tree.exists(templatePath) ? [tree.readText(templatePath)] : [];
+    });
+    const imported = (0, typescript_1.rewriteImports)(path, original, templates);
+    addIcons(migration, path, imported.icons);
+    let text = imported.text;
+    const needed = new Map();
+    for (const component of (0, typescript_1.findComponents)(path, text)) {
+        let before;
+        let after;
+        if (component.inlineTemplate !== undefined) {
+            const result = (0, template_1.rewriteTemplate)(migration.compiler, component.inlineTemplate, path);
+            if (result.error)
+                migration.context.logger.warn(`${path}: la plantilla no se pudo analizar y no se migró.\n${result.error}`);
+            if (result.changed) {
+                text = (0, typescript_1.replaceInlineTemplate)(path, text, component.index, result.text);
+                [before, after] = [component.inlineTemplate, result.text];
+                addIcons(migration, path, result.icons);
+            }
+        }
+        else if (component.templateUrl) {
+            const templatePath = resolvePath(path, component.templateUrl);
+            if (!tree.exists(templatePath) || migration.templates.has(templatePath))
+                continue;
+            migration.templates.add(templatePath);
+            const html = tree.readText(templatePath);
+            const result = (0, template_1.rewriteTemplate)(migration.compiler, html, templatePath);
+            if (result.error)
+                migration.context.logger.warn(`${templatePath}: la plantilla no se pudo analizar y no se migró.\n${result.error}`);
+            if (result.changed) {
+                tree.overwrite(templatePath, result.text);
+                migration.changed.add(templatePath);
+                [before, after] = [html, result.text];
+                addIcons(migration, templatePath, result.icons);
+            }
+        }
+        if (before !== undefined && after !== undefined) {
+            needed.set(component.index, [...introducedSymbols(before, after), ...keptPrimengModules(original, after)]);
+        }
+    }
+    const imports = (0, typescript_1.ensureComponentImports)(path, text, needed);
+    text = imports.text;
+    migration.manual.push(...imports.manual.map((name) => `\`${path.slice(1)}\`: añade \`${name}\` a los imports del NgModule que declara el componente.`));
+    if (text !== original) {
+        tree.overwrite(path, text);
+        migration.changed.add(path);
+    }
+}
+/** Un `.html` que no es plantilla de ningún componente migrado (p. ej. de otro proyecto). */
+function migrateHtml(tree, path, migration) {
+    const result = (0, template_1.rewriteTemplate)(migration.compiler, tree.readText(path), path);
+    if (result.error) {
+        migration.context.logger.warn(`${path}: no se pudo analizar y no se migró.`);
+        return;
+    }
+    if (!result.changed)
+        return;
+    tree.overwrite(path, result.text);
+    migration.changed.add(path);
+    addIcons(migration, path, result.icons);
+    if (introducedSymbols('', result.text).length) {
+        migration.manual.push(`\`${path.slice(1)}\`: no se encontró su componente; importa los componentes CaribeNG que usa.`);
+    }
+}
+function migrateStylesheet(tree, path, migration) {
+    const original = tree.readText(path);
+    const text = (0, workspace_1.removePrimeStyleImports)(original);
+    if (text === original)
+        return;
+    tree.overwrite(path, text);
+    migration.changed.add(path);
+}
+/** Aplicaciones de angular.json. En workspaces sin angular.json (Nx) devuelve [] y avisa. */
+async function applications(tree, context) {
+    try {
+        const workspace = await (0, utility_1.readWorkspace)(tree);
+        return [...workspace.projects.entries()]
+            .filter(([, project]) => project.extensions['projectType'] === 'application')
+            .map(([name, project]) => {
+            const root = project.root ? `/${project.root.replace(/^\/|\/$/g, '')}` : '';
+            return { name, root, sourceRoot: project.sourceRoot ? `/${project.sourceRoot.replace(/^\/|\/$/g, '')}` : `${root}/src` };
+        });
+    }
+    catch {
+        context.logger.warn('No se encontró angular.json: añade a mano @caribeng/ui/styles.css a los estilos y provideCaribeNG() a la configuración de la app.');
+        return [];
+    }
+}
+/** Si la app no tiene provideCaribeNG() (no usaba providePrimeNG), se añade. */
+function ensureProvider(app) {
+    return (tree) => {
+        if ((0, index_1.containsText)(tree, app.sourceRoot, 'provideCaribeNG('))
+            return;
+        return (0, utility_1.addRootProvider)(app.name, ({ code, external }) => code `${external('provideCaribeNG', '@caribeng/ui')}(${typescript_1.PROVIDER_CONFIG})`);
+    };
+}
+/** Registra con provideCbIcons los iconos usados que no son del set núcleo. */
+function registerIcons(app, migration) {
+    return () => {
+        const names = new Set();
+        for (const [path, icons] of migration.icons) {
+            if (path.startsWith(`${app.root}/`) || app.root === '')
+                icons.forEach((icon) => (0, icons_1.isCoreIcon)(icon) || names.add(icon));
+        }
+        if (!names.size)
+            return;
+        return (0, utility_1.addRootProvider)(app.name, ({ code, external }) => {
+            const entries = [...names].sort().map((name) => `'${name}': ${external((0, icons_1.catalogExport)(name), '@caribeng/ui/icons')}`);
+            const expression = `${external('provideCbIcons', '@caribeng/ui/icon')}({ ${entries.join(', ')} })`;
+            return code(Object.assign([expression], { raw: [expression] }));
+        });
+    };
+}
+/** Informe, limpieza de package.json e instalación. */
+function finish(options, migration) {
+    return (tree, context) => {
+        const scan = (0, report_1.scanWorkspace)(tree);
+        const removed = scan.leftovers.length === 0 && options.removePrimeng !== false ? (0, workspace_1.removePrimeDependencies)(tree) : [];
+        if (options.report !== false) {
+            const report = (0, report_1.renderReport)({ scan, changedFiles: [...migration.changed], manual: migration.manual, removedPackages: removed });
+            if (tree.exists(report_1.REPORT_PATH))
+                tree.overwrite(report_1.REPORT_PATH, report);
+            else
+                tree.create(report_1.REPORT_PATH, report);
+        }
+        context.logger.info(`✔ ${migration.changed.size} archivo(s) migrado(s).`);
+        if (removed.length)
+            context.logger.info(`✔ Eliminados de package.json: ${removed.join(', ')}.`);
+        if (scan.todos.length)
+            context.logger.warn(`⚠ ${scan.todos.length} aviso(s) TODO(caribeng) para revisar.`);
+        if (scan.leftovers.length) {
+            context.logger.warn(`⚠ Quedan ${scan.leftovers.length} referencia(s) a PrimeNG sin migrar; PrimeNG sigue instalado mientras tanto.`);
+        }
+        if (migration.manual.length)
+            context.logger.warn(`⚠ ${migration.manual.length} import(s) que añadir a mano.`);
+        if (options.report !== false && (scan.todos.length || scan.leftovers.length || migration.manual.length)) {
+            context.logger.info(`  Detalle en ${report_1.REPORT_PATH.slice(1)}`);
+        }
+        if (removed.length && !options.skipInstall)
+            context.addTask(new tasks_1.NodePackageInstallTask());
+    };
+}

package/schematics/migrate-from-primeng/mappings/button.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.button = void 0;
+const icons_1 = require("../icons");
+const rules_1 = require("./rules");
+/**
+ * `<p-button label="Guardar" icon="pi pi-check" [outlined]="true" />`
+ * → `<cb-button variant="outlined"><cb-icon name="check" />Guardar</cb-button>`
+ */
+const rules = {
+    // label, icon e iconPos se combinan en `finalize` (pasan a ser contenido).
+    label: (0, rules_1.drop)(),
+    icon: (0, rules_1.drop)(),
+    iconPos: (0, rules_1.drop)(),
+    severity: (0, rules_1.values)('severity', rules_1.SEVERITY_VALUES),
+    outlined: (0, rules_1.flagToValue)('variant', 'outlined', 'solid'),
+    text: (0, rules_1.flagToValue)('variant', 'text', 'solid'),
+    size: (0, rules_1.values)('size', rules_1.SIZE_VALUES),
+    fluid: (0, rules_1.rename)('fullWidth'),
+    styleClass: (0, rules_1.styleClass)(),
+    raised: (0, rules_1.unsupported)('cb-button no tiene variante elevada; usa una clase propia.'),
+    rounded: (0, rules_1.unsupported)('cb-button no tiene variante redondeada; usa una clase propia o <cb-icon-button>.'),
+    plain: (0, rules_1.unsupported)('sin equivalente; usa severity="secondary".'),
+    link: (0, rules_1.unsupported)('para enlaces usa <cb-link>.'),
+    badge: (0, rules_1.unsupported)('usa un <cb-badge> dentro del botón.'),
+    badgeClass: (0, rules_1.unsupported)('usa un <cb-badge> dentro del botón.'),
+    badgeSeverity: (0, rules_1.unsupported)('usa un <cb-badge> dentro del botón.'),
+    loadingIcon: (0, rules_1.unsupported)('cb-button usa su propio spinner.'),
+    buttonProps: (0, rules_1.unsupported)('pasa cada propiedad como input de cb-button.'),
+    tabindex: (0, rules_1.unsupported)('el tabindex no se reenvía al <button> interno.'),
+    autofocus: (0, rules_1.unsupported)('usa la directiva cbAutoFocus de @caribeng/ui/autofocus.'),
+    '(onClick)': (0, rules_1.event)('click'),
+    ...rules_1.FOCUS_EVENTS,
+};
+const same = ['variant', 'disabled', 'loading', 'type', 'ariaLabel'];
+/** Convierte `label`, `icon` e `iconPos` en el contenido del botón. */
+function finalize(el) {
+    const label = el.find('label');
+    const icon = el.find('icon');
+    const position = el.find('iconPos');
+    let text = '';
+    if (label?.kind === 'static')
+        text = label.value.includes('{{') ? label.value : (0, rules_1.escapeText)(label.value);
+    else if (label?.kind === 'property')
+        text = `{{ ${label.value} }}`;
+    let iconTag = '';
+    if (icon?.kind === 'static') {
+        const parsed = (0, icons_1.parsePrimeIcon)(icon.value);
+        if (parsed?.name) {
+            iconTag = `<cb-icon name="${parsed.name}"${parsed.spin ? ' spin' : ''} />`;
+            el.icons.add(parsed.name);
+        }
+        else {
+            el.todos.push(`${icon.source} — ${parsed ? `el icono pi-${parsed.prime} no tiene equivalente conocido` : 'icono que no es de PrimeIcons'}; añade un <cb-icon> dentro del botón.`);
+        }
+    }
+    else if (icon) {
+        el.todos.push(`${icon.source} — icono dinámico: usa <cb-icon [name]="…" /> dentro del botón.`);
+    }
+    let after = false;
+    if (position?.kind === 'static' && position.value === 'right')
+        after = true;
+    else if (position && !(position.kind === 'static' && position.value === 'left')) {
+        el.todos.push(`${position.source} — cb-button coloca el icono donde lo pongas en el contenido.`);
+    }
+    if (iconTag && after) {
+        if (text)
+            el.before.push(text);
+        el.after.push(iconTag);
+    }
+    else {
+        if (iconTag)
+            el.before.push(iconTag);
+        if (text)
+            el.before.push(text);
+    }
+    const hasName = el.attrs.some((attr) => /^(\[?ariaLabel\]?|aria-label|\[attr\.aria-label\])=/.test(attr));
+    if (icon && !label && !hasName) {
+        el.todos.push('botón solo con icono: añade ariaLabel="…" para que tenga nombre accesible.');
+    }
+}
+exports.button = {
+    name: 'button',
+    entry: '@caribeng/ui/button',
+    symbol: 'CbButton',
+    modules: {
+        'primeng/button': { ButtonModule: 'CbButton', Button: 'CbButton', ButtonDirective: 'CbButton' },
+    },
+    elements: [
+        { tag: 'p-button', to: 'cb-button', rules, finalize, same },
+        { attr: 'pButton', on: ['button'], otherTags: 'para enlaces usa <cb-link>.', to: 'cb-button', rules, finalize, same },
+    ],
+};

package/schematics/migrate-from-primeng/mappings/card.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.card = void 0;
+const rules_1 = require("./rules");
+const TEXT_ONLY = 'cb-card solo admite título y subtítulo de texto (inputs header y subtitle).';
+/**
+ * `<p-card header="Resumen" subheader="Octubre"><ng-template #footer>…</ng-template></p-card>`
+ * → `<cb-card header="Resumen" subtitle="Octubre"><div cb-card-footer>…</div></cb-card>`
+ */
+exports.card = {
+    name: 'card',
+    entry: '@caribeng/ui/card',
+    symbol: 'CbCard',
+    modules: {
+        'primeng/card': { CardModule: 'CbCard', Card: 'CbCard' },
+    },
+    elements: [
+        {
+            tag: 'p-card',
+            to: 'cb-card',
+            rules: {
+                subheader: (0, rules_1.rename)('subtitle'),
+                styleClass: (0, rules_1.styleClass)(),
+            },
+            child: (0, rules_1.slotChild)('cb-card', 'cb-card-footer', {
+                header: 'cb-card no tiene zona de cabecera (p. ej. una imagen); ponla al principio del contenido.',
+                title: TEXT_ONLY,
+                subtitle: TEXT_ONLY,
+            }),
+            same: ['header'],
+        },
+    ],
+};

package/schematics/migrate-from-primeng/mappings/checkbox.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkbox = void 0;
+const rules_1 = require("./rules");
+/**
+ * `<p-checkbox [(ngModel)]="acepto" [binary]="true" inputId="acepto" />`
+ * → `<cb-checkbox [(ngModel)]="acepto" inputId="acepto" />`
+ *
+ * cb-checkbox decide el modo por el valor del modelo: booleano si no es un
+ * array, lista si lo es (como `binary` / `value` en PrimeNG).
+ */
+const rules = {
+    binary: (0, rules_1.drop)(),
+    size: (0, rules_1.values)('size', rules_1.SIZE_VALUES),
+    styleClass: (0, rules_1.styleClass)(),
+    ariaLabelledBy: (0, rules_1.unsupported)('usa ariaLabel o el input label de cb-checkbox.'),
+    readonly: (0, rules_1.unsupported)('usa disabled o deshabilita el control de formulario.'),
+    tabindex: (0, rules_1.unsupported)('el tabindex no se reenvía al control interno.'),
+    autofocus: (0, rules_1.unsupported)('usa la directiva cbAutoFocus de @caribeng/ui/autofocus.'),
+    trueValue: (0, rules_1.unsupported)('cb-checkbox usa true/false en modo binario; convierte el valor en el modelo.'),
+    falseValue: (0, rules_1.unsupported)('cb-checkbox usa true/false en modo binario; convierte el valor en el modelo.'),
+    checkboxIcon: (0, rules_1.unsupported)('cb-checkbox usa su propio icono.'),
+    inputStyle: (0, rules_1.unsupported)('personaliza el control con los tokens CSS de cb-checkbox.'),
+    inputClass: (0, rules_1.unsupported)('personaliza el control con los tokens CSS de cb-checkbox.'),
+    variant: (0, rules_1.unsupported)('cb-checkbox no tiene variante "filled".'),
+    '(onChange)': (0, rules_1.event)('changed', (0, rules_1.adaptEvent)('checked')),
+    ...rules_1.FOCUS_EVENTS,
+};
+exports.checkbox = {
+    name: 'checkbox',
+    entry: '@caribeng/ui/checkbox',
+    symbol: 'CbCheckbox',
+    modules: {
+        'primeng/checkbox': { CheckboxModule: 'CbCheckbox', Checkbox: 'CbCheckbox' },
+    },
+    // Selectores alternativos que acepta PrimeNG.
+    elements: ['p-checkbox', 'p-checkBox', 'p-check-box'].map((tag) => ({
+        tag,
+        to: 'cb-checkbox',
+        rules,
+        child: (child) => (child.name === 'ng-template' ? { todo: 'cb-checkbox usa su propio icono; la plantilla no se mostrará.' } : null),
+        same: ['value', 'inputId', 'ariaLabel', 'indeterminate', 'disabled', 'required', 'invalid', 'label'],
+    })),
+};