@mk-kit/ui 0.38.0 → 0.40.0

package/schematics/migrate-primeng/transform.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MK_STYLE_PATH = void 0;
+exports.transformTypeScript = transformTypeScript;
+exports.transformTemplate = transformTemplate;
+exports.transformAngularJson = transformAngularJson;
+exports.transformPackageJson = transformPackageJson;
+exports.renderReport = renderReport;
+/**
+ * Pure string transforms behind the `migrate-primeng` schematic. No devkit
+ * types here so they can be unit-tested on fixtures and reused by other
+ * tooling. Every function returns the new text plus what it did.
+ */
+const mapping_1 = require("./mapping");
+const MODULE_BY_PATH = new Map(mapping_1.MODULES.map((m) => [m.path, m]));
+function escapeRe(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function docsUrl(route) {
+    return route ? `${mapping_1.DOCS_BASE}${route}` : undefined;
+}
+/* ------------------------------------------------------------------------ */
+/* TypeScript                                                                */
+/* ------------------------------------------------------------------------ */
+const IMPORT_RE = /import\s*(type\s+)?\{([^}]*)\}\s*from\s*['"]primeng\/([\w-]+)['"];?[ \t]*\r?\n?/g;
+/**
+ * Rewrites `primeng/*` imports to `@mk-kit/ui`, renames the imported
+ * identifiers everywhere in the file, keeps unmapped symbols on their
+ * original import, and dedupes `imports: [...]` arrays.
+ */
+function transformTypeScript(source) {
+    const findings = [];
+    const mkNames = new Set();
+    const renames = new Map();
+    const keep = [];
+    let text = source;
+    let firstImportIndex = -1;
+    text = text.replace(IMPORT_RE, (whole, isType, names, path, offset) => {
+        const rule = MODULE_BY_PATH.get(path);
+        if (firstImportIndex === -1)
+            firstImportIndex = offset;
+        const symbols = names
+            .split(',')
+            .map((n) => n.trim())
+            .filter(Boolean);
+        const unmapped = [];
+        for (const raw of symbols) {
+            const [name, alias] = raw.split(/\s+as\s+/).map((s) => s.trim());
+            const target = rule?.symbols[name];
+            if (target) {
+                mkNames.add(target);
+                renames.set(alias ?? name, target);
+                add(findings, `import:primeng/${path}`, `${name} → ${target}`, 'rewrite', rule?.docs);
+            }
+            else {
+                unmapped.push(raw);
+                add(findings, `import:primeng/${path}`, `${name} (primeng/${path}) has no drop-in equivalent — kept`, rule ? 'manual' : 'unmapped', rule?.docs);
+            }
+        }
+        if (unmapped.length)
+            keep.push(`import ${isType ?? ''}{ ${unmapped.join(', ')} } from 'primeng/${path}';\n`);
+        if (rule?.note && symbols.some((s) => rule.symbols[s.split(/\s+as\s+/)[0].trim()])) {
+            add(findings, `note:primeng/${path}`, rule.note, 'manual', rule.docs);
+        }
+        return '';
+    });
+    if (firstImportIndex === -1)
+        return { text: source, changed: false, findings };
+    // Rename identifiers (whole words) — includes `imports: [...]` entries and injected services.
+    for (const [from, to] of renames) {
+        if (from === to)
+            continue;
+        text = text.replace(new RegExp(`\\b${escapeRe(from)}\\b`, 'g'), to);
+    }
+    // Dedupe entries inside `imports: [ ... ]` arrays (several PrimeNG symbols map to one class).
+    text = text.replace(/imports:\s*\[([^\]]*)\]/g, (whole, inner) => {
+        const seen = new Set();
+        const items = inner
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => s && !seen.has(s) && seen.add(s));
+        const multiline = inner.includes('\n');
+        return multiline ? `imports: [\n    ${items.join(',\n    ')},\n  ]` : `imports: [${items.join(', ')}]`;
+    });
+    // Insert the mk-kit import where the first primeng import was, merging with an existing one.
+    const header = [...(keep.length ? keep : [])];
+    if (mkNames.size) {
+        const existing = /import\s*\{([^}]*)\}\s*from\s*['"]@mk-kit\/ui['"];?[ \t]*\r?\n?/;
+        const m = existing.exec(text);
+        if (m) {
+            const merged = new Set(m[1].split(',').map((s) => s.trim()).filter(Boolean));
+            for (const n of mkNames)
+                merged.add(n);
+            text = text.replace(existing, `import { ${[...merged].join(', ')} } from '@mk-kit/ui';\n`);
+        }
+        else {
+            header.unshift(`import { ${[...mkNames].join(', ')} } from '@mk-kit/ui';\n`);
+        }
+    }
+    text = text.slice(0, firstImportIndex) + header.join('') + text.slice(firstImportIndex);
+    // Service usage hints (MessageService / ConfirmationService bodies are not mechanical).
+    if (renames.has('MessageService')) {
+        text = text.replace(/(\n[ \t]*)([^\n]*\.add\(\s*\{[^\n]*severity[^\n]*)/g, '$1// mk-kit: MessageService.add({severity, summary, detail}) → toast.<severity>(detail, { title: summary })$1$2');
+    }
+    if (renames.has('ConfirmationService')) {
+        text = text.replace(/(\n[ \t]*)([^\n]*\.confirm\(\s*\{[^\n]*)/g, '$1// mk-kit: ConfirmationService.confirm({...}) → await dialog.confirm({ title, message, tone }) returns boolean$1$2');
+    }
+    // Inline templates get the template pass too.
+    const tpl = transformTemplate(text, true);
+    text = tpl.text;
+    findings.push(...tpl.findings);
+    return { text, changed: text !== source, findings };
+}
+/* ------------------------------------------------------------------------ */
+/* Templates                                                                 */
+/* ------------------------------------------------------------------------ */
+/** Longest selectors first so `p-inputgroupaddon` is not eaten by `p-inputgroup`. */
+const ELEMENT_RULES = mapping_1.SELECTORS.filter((r) => r.kind === 'element').sort((a, b) => b.from.length - a.from.length);
+const ATTRIBUTE_RULES = mapping_1.SELECTORS.filter((r) => r.kind === 'attribute').sort((a, b) => b.from.length - a.from.length);
+function noteComment(rule, inline) {
+    const text = `mk-kit: ${rule.from} → ${rule.to ?? 'manual'} — ${rule.note ?? ''}`.trim();
+    // Inside a TS template literal `-->` is fine; keep one comment style everywhere.
+    return inline ? `<!-- ${text} -->` : `<!-- ${text} -->`;
+}
+function renameAttrs(openTag, attrs) {
+    if (!attrs)
+        return openTag;
+    let out = openTag;
+    for (const [from, to] of Object.entries(attrs)) {
+        const re = new RegExp(`(\\s)${escapeRe(from)}(?=[\\s=>/])`, 'g');
+        out = out.replace(re, (_m, ws) => (to === null ? ws.trimEnd() : `${ws}${to}`));
+    }
+    return out;
+}
+/**
+ * Rewrites PrimeNG selectors in a template (an .html file, or a whole .ts file
+ * when `inline` — only `<p-…` tags and known attribute tokens are touched).
+ */
+function transformTemplate(source, inline = false) {
+    const findings = [];
+    let text = source;
+    for (const rule of ELEMENT_RULES) {
+        const open = new RegExp(`<${escapeRe(rule.from)}(?=[\\s>/])`, 'g');
+        const close = new RegExp(`</${escapeRe(rule.from)}\\s*>`, 'g');
+        const matches = text.match(open);
+        if (!matches)
+            continue;
+        const n = matches.length;
+        if (rule.to) {
+            // Rename open/close tags, then attributes on each opening tag.
+            text = text.replace(open, `<${rule.to}`).replace(close, `</${rule.to}>`);
+            if (rule.attrs) {
+                const tagRe = new RegExp(`<${escapeRe(rule.to)}(\\s[^>]*)?>`, 'g');
+                text = text.replace(tagRe, (tag) => renameAttrs(tag, rule.attrs));
+            }
+            add(findings, `element:${rule.from}`, `<${rule.from}> → <${rule.to}>`, 'rewrite', rule.docs, n);
+            if (rule.manual && rule.note) {
+                text = insertNote(text, `<${rule.to}`, noteComment(rule, inline));
+                add(findings, `manual:${rule.from}`, rule.note, 'manual', rule.docs, n);
+            }
+        }
+        else {
+            text = insertNote(text, `<${rule.from}`, noteComment(rule, inline));
+            add(findings, `element:${rule.from}`, rule.note ?? 'no drop-in equivalent', 'unmapped', rule.docs, n);
+        }
+    }
+    for (const rule of ATTRIBUTE_RULES) {
+        // Attribute token forms: `pButton`, `[pTooltip]="…"`, `pTooltip="…"`.
+        const token = new RegExp(`(?<=[\\s\\[])${escapeRe(rule.from)}(?=[\\s=\\]>/])`, 'g');
+        const matches = text.match(token);
+        if (!matches)
+            continue;
+        const n = matches.length;
+        if (rule.to) {
+            text = text.replace(token, rule.to);
+            if (rule.attrs) {
+                const tagRe = new RegExp(`<[a-zA-Z][^>]*\\b${escapeRe(rule.to)}\\b[^>]*>`, 'g');
+                text = text.replace(tagRe, (tag) => renameAttrs(tag, rule.attrs));
+            }
+            add(findings, `attr:${rule.from}`, `${rule.from} → ${rule.to}`, 'rewrite', rule.docs, n);
+            if (rule.manual && rule.note) {
+                text = insertNoteBeforeTagWith(text, rule.to, noteComment(rule, inline));
+                add(findings, `manual:${rule.from}`, rule.note, 'manual', rule.docs, n);
+            }
+        }
+        else {
+            text = insertNoteBeforeTagWith(text, rule.from, noteComment(rule, inline));
+            add(findings, `attr:${rule.from}`, rule.note ?? 'no drop-in equivalent', 'unmapped', rule.docs, n);
+        }
+    }
+    return { text, changed: text !== source, findings };
+}
+/** Insert `note` once, right before the first occurrence of `needle` (keeps indentation). */
+function insertNote(text, needle, note) {
+    if (text.includes(note))
+        return text;
+    const i = text.indexOf(needle);
+    if (i === -1)
+        return text;
+    const lineStart = text.lastIndexOf('\n', i) + 1;
+    const indent = text.slice(lineStart, i).match(/^[ \t]*$/) ? text.slice(lineStart, i) : '';
+    return indent ? text.slice(0, lineStart) + indent + note + '\n' + text.slice(lineStart) : text.slice(0, i) + note + ' ' + text.slice(i);
+}
+/** Insert `note` once before the first tag that carries `attr`. */
+function insertNoteBeforeTagWith(text, attr, note) {
+    if (text.includes(note))
+        return text;
+    const re = new RegExp(`<[a-zA-Z][^>]*(?<=[\\s\\[])${escapeRe(attr)}(?=[\\s=\\]>/])`);
+    const m = re.exec(text);
+    if (!m)
+        return text;
+    return insertNote(text, m[0], note);
+}
+/* ------------------------------------------------------------------------ */
+/* Workspace files                                                           */
+/* ------------------------------------------------------------------------ */
+exports.MK_STYLE_PATH = 'node_modules/@mk-kit/ui/styles/mk-kit.css';
+/** Remove PrimeNG / primeicons / primeflex style entries from every project's `styles`; add the mk-kit theme. */
+function transformAngularJson(source) {
+    const findings = [];
+    let json;
+    try {
+        json = JSON.parse(source);
+    }
+    catch {
+        return { text: source, changed: false, findings };
+    }
+    let changed = false;
+    for (const project of Object.values(json.projects ?? {})) {
+        const options = project?.architect?.build?.options;
+        if (!options || !Array.isArray(options.styles))
+            continue;
+        const before = options.styles.length;
+        options.styles = options.styles.filter((s) => {
+            const p = typeof s === 'string' ? s : s?.input ?? '';
+            return !/prime(ng|icons|flex|uix)/i.test(p);
+        });
+        if (options.styles.length !== before) {
+            changed = true;
+            add(findings, 'styles:primeng', `removed ${before - options.styles.length} PrimeNG/primeicons style entries`, 'rewrite', '/theming', before - options.styles.length);
+        }
+        const has = options.styles.some((s) => (typeof s === 'string' ? s : s?.input ?? '').includes('@mk-kit/ui/styles'));
+        if (!has) {
+            options.styles.unshift(exports.MK_STYLE_PATH);
+            changed = true;
+            add(findings, 'styles:mk-kit', `added ${exports.MK_STYLE_PATH}`, 'rewrite', '/theming');
+        }
+    }
+    return { text: changed ? JSON.stringify(json, null, 2) + '\n' : source, changed, findings };
+}
+/** Drop PrimeNG packages from dependencies and make sure @mk-kit/ui is present. */
+function transformPackageJson(source, packages, mkVersion = '^0.38.0') {
+    const findings = [];
+    let json;
+    try {
+        json = JSON.parse(source);
+    }
+    catch {
+        return { text: source, changed: false, findings };
+    }
+    let changed = false;
+    for (const field of ['dependencies', 'devDependencies']) {
+        const deps = json[field];
+        if (!deps)
+            continue;
+        for (const p of packages) {
+            if (p in deps) {
+                delete deps[p];
+                changed = true;
+                add(findings, 'package:remove', `removed ${p} from ${field}`, 'rewrite');
+            }
+        }
+    }
+    json.dependencies ??= {};
+    if (!json.dependencies['@mk-kit/ui']) {
+        json.dependencies['@mk-kit/ui'] = mkVersion;
+        changed = true;
+        add(findings, 'package:add', `added @mk-kit/ui ${mkVersion}`, 'rewrite');
+    }
+    return { text: changed ? JSON.stringify(json, null, 2) + '\n' : source, changed, findings };
+}
+function add(findings, rule, message, kind, docs, count = 1) {
+    const existing = findings.find((f) => f.rule === rule && f.message === message);
+    if (existing)
+        existing.count += count;
+    else
+        findings.push({ rule, message, kind, docs: docsUrl(docs), count });
+}
+/** Markdown report of a whole run. */
+function renderReport(files, options) {
+    const all = files.flatMap((f) => f.findings.map((x) => ({ ...x, file: f.path })));
+    const changed = files.filter((f) => f.changed);
+    const byKind = (kind) => all.filter((f) => f.kind === kind);
+    const sum = (list) => list.reduce((n, f) => n + f.count, 0);
+    const lines = [];
+    lines.push('# PrimeNG → mk-kit migration report', '');
+    lines.push(`${options.dryRun ? '**Dry run** — nothing was written. ' : ''}Scanned ${options.scanned} files, ${options.dryRun ? 'would change' : 'changed'} ${changed.length}.`, '');
+    lines.push(`- Automatic rewrites: **${sum(byKind('rewrite'))}**`);
+    lines.push(`- Needs a manual touch: **${sum(byKind('manual'))}**`);
+    lines.push(`- No mk-kit equivalent: **${sum(byKind('unmapped'))}**`, '');
+    lines.push('## Rewrites', '');
+    const rewrites = group(byKind('rewrite'));
+    lines.push(...(rewrites.length ? rewrites.map(([msg, n]) => `- ${msg} ×${n}`) : ['- (none)']), '');
+    lines.push('## Manual steps', '', 'Look for `<!-- mk-kit: … -->` and `// mk-kit:` comments in the changed files.', '');
+    const manual = group(byKind('manual'), true);
+    lines.push(...(manual.length ? manual.map(([msg, n, docs]) => `- ${msg} ×${n}${docs ? ` — [docs](${docs})` : ''}`) : ['- (none)']), '');
+    lines.push('## Not available in mk-kit', '');
+    const unmapped = group(byKind('unmapped'), true);
+    lines.push(...(unmapped.length ? unmapped.map(([msg, n, docs]) => `- ${msg} ×${n}${docs ? ` — closest: [docs](${docs})` : ''}`) : ['- (none)']), '');
+    lines.push('## Files', '');
+    lines.push(...(changed.length ? changed.map((f) => `- \`${f.path}\` — ${f.findings.map((x) => `${x.rule}×${x.count}`).join(', ')}`) : ['- (none)']), '');
+    lines.push('## Next', '');
+    lines.push('1. Run `ng build` and fix the remaining template errors — most are the `<!-- mk-kit -->` notes above.', '2. Replace `MessageService.add(...)` calls with `MkToastService` and `ConfirmationService.confirm(...)` with `await MkDialogService.confirm(...)`.', '3. Icons: `pi pi-*` classes → `<mk-icon name="…" />` (see https://mk-kit.dev/components/icon).', `4. Theme: \`--mk-*\` tokens replace the PrimeNG preset — https://mk-kit.dev/theming.`, '');
+    return lines.join('\n');
+}
+function group(list, withDocs = false) {
+    const map = new Map();
+    for (const f of list) {
+        const key = f.message;
+        const cur = map.get(key) ?? [0, f.docs];
+        cur[0] += f.count;
+        map.set(key, cur);
+    }
+    return [...map.entries()].map(([msg, [n, docs]]) => [msg, n, withDocs ? docs : undefined]);
+}

package/types/mk-kit-ui-data.d.ts

@@ -1758,6 +1758,21 @@ declare class MkCountdown {
 
 /** Layout for {@link MkDescriptionList}. */
 type MkDescriptionLayout = 'grid' | 'stacked';
+/**
+ * A single term/detail row of {@link MkDescriptionList}: `term` becomes the
+ * `<dt>`, the projected content the `<dd>`. The row itself renders nothing —
+ * the list reads its rows and writes `<dt>`/`<dd>` as direct children of the
+ * `<dl>`, which is what HTML and assistive tech require (a wrapper element
+ * between `<dl>` and `<dt>` fails axe `definition-list` / `dlitem`).
+ */
+declare class MkDescItem {
+    /** The term (label) shown in the `<dt>`. */
+    readonly term: _angular_core.InputSignal<string>;
+    /** The row's detail content, rendered by the list inside its `<dd>`. @internal */
+    readonly content: _angular_core.Signal<TemplateRef<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDescItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDescItem, "mk-desc-item", never, { "term": { "alias": "term"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
 /**
  * DescriptionList — a semantic `<dl>` of term/detail pairs for entity-detail and
  * metadata panels. Project {@link MkDescItem} rows; values may be rich content
@@ -1770,25 +1785,18 @@ type MkDescriptionLayout = 'grid' | 'stacked';
  *   <mk-desc-item term="Owner">Ada Lovelace</mk-desc-item>
  * </mk-description-list>
  * ```
+ *
+ * Only `mk-desc-item` children are rendered; the `<dl>` always contains plain
+ * `<dt>`/`<dd>` pairs.
  */
 declare class MkDescriptionList {
     /** `grid` aligns terms in a column; `stacked` puts each term above its value. */
     readonly layout: _angular_core.InputSignal<MkDescriptionLayout>;
     /** Draw a divider between rows. */
     readonly divided: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly items: _angular_core.Signal<readonly MkDescItem[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDescriptionList, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDescriptionList, "mk-description-list", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "divided": { "alias": "divided"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-/**
- * A single term/detail row inside {@link MkDescriptionList}. Renders a `<dt>`
- * (the `term`) and a `<dd>` (the projected value). The host is `display:contents`
- * so the `<dt>`/`<dd>` participate directly in the list's grid.
- */
-declare class MkDescItem {
-    /** The term (label) shown in the `<dt>`. */
-    readonly term: _angular_core.InputSignal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDescItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDescItem, "mk-desc-item", never, { "term": { "alias": "term"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDescriptionList, "mk-description-list", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "divided": { "alias": "divided"; "required": false; "isSignal": true; }; }, {}, ["items"], never, true, never>;
 }
 
 /**

package/types/mk-kit-ui-dnd.d.ts

@@ -210,6 +210,8 @@ declare class MkDrag<T = unknown> {
     private cleanupDom;
     private emit;
     private isHandleTarget;
+    /** Whether `target` belongs to this item rather than to a nested `[mkDrag]`. */
+    private isOwnTarget;
     private prefersReducedMotion;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDrag<any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDrag<any>, "[mkDrag]", ["mkDrag"], { "mkDragData": { "alias": "mkDragData"; "required": false; "isSignal": true; }; "mkDragDisabled": { "alias": "mkDragDisabled"; "required": false; "isSignal": true; }; "mkDragTouchDelay": { "alias": "mkDragTouchDelay"; "required": false; "isSignal": true; }; }, {}, ["handles"], ["*"], true, never>;

package/types/mk-kit-ui-navigation.d.ts

@@ -643,6 +643,8 @@ declare class MkNavGroup {
     readonly expanded: _angular_core.ModelSignal<boolean>;
     /** Id of the items region (for `aria-controls`). */
     readonly regionId: string;
+    /** Id of the header, used to name the nested item list. */
+    readonly headerId: string;
     /** Whether the enclosing list is a collapsed icon rail. */
     protected readonly railCollapsed: _angular_core.Signal<boolean>;
     /** Items are visible unless collapsible-and-closed. */