@koobiq/components 19.8.3 → 20.1.0

package/schematics/migrations/filter-bar-signals/index.js

@@ -0,0 +1,316 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ts = require('typescript');
+var utils_ast = require('../../utils/ast.js');
+var utils_messages = require('../../utils/messages.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var utils_typescript = require('../../utils/typescript.js');
+var migrations_filterBarSignals_data = require('./data.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+const TS_EXT = '.ts';
+const HTML_EXT = '.html';
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/** Applies text-span edits to `content`, right-to-left, so earlier edits don't shift later offsets. */
+function applyEdits(content, edits) {
+    const sorted = [...edits].sort((a, b) => b.start - a.start || b.end - a.end);
+    let result = content;
+    for (const { start, end, text } of sorted) {
+        result = result.slice(0, start) + text + result.slice(end);
+    }
+    return result;
+}
+const isFunctionLike = (node) => ts.isFunctionDeclaration(node) ||
+    ts.isMethodDeclaration(node) ||
+    ts.isConstructorDeclaration(node) ||
+    ts.isArrowFunction(node) ||
+    ts.isFunctionExpression(node) ||
+    ts.isGetAccessorDeclaration(node) ||
+    ts.isSetAccessorDeclaration(node);
+/** Walks up from `node` to the nearest ancestor matching `predicate`. */
+function findAncestor(node, predicate) {
+    let current = node.parent;
+    while (current) {
+        if (predicate(current))
+            return current;
+        current = current.parent;
+    }
+    return undefined;
+}
+/** Whether a type annotation refers to the filter bar (`KbqFilterBar` / `KbqFilterBarHost`). */
+function isFilterBarType(type) {
+    return (!!type &&
+        ts.isTypeReferenceNode(type) &&
+        ts.isIdentifier(type.typeName) &&
+        (type.typeName.text === migrations_filterBarSignals_data.FILTER_BAR_TYPE || type.typeName.text === migrations_filterBarSignals_data.FILTER_BAR_HOST_TYPE));
+}
+const FIELD_MODIFIERS = new Set([
+    ts.SyntaxKind.PrivateKeyword,
+    ts.SyntaxKind.PublicKeyword,
+    ts.SyntaxKind.ProtectedKeyword,
+    ts.SyntaxKind.ReadonlyKeyword
+]);
+/**
+ * Collects the receivers whose static type is a filter bar, by explicit annotation only (no cross-package
+ * type resolution): method/function params, class fields (incl. `@ViewChild(KbqFilterBar) x: KbqFilterBar`
+ * and constructor parameter-properties) and typed locals.
+ */
+function collectReceivers(sourceFile) {
+    const receivers = [];
+    const add = (text, scope) => receivers.push({ text, start: scope.getStart(sourceFile), end: scope.getEnd() });
+    const visit = (node) => {
+        if (ts.isParameter(node) && ts.isIdentifier(node.name) && isFilterBarType(node.type)) {
+            add(node.name.text, findAncestor(node, isFunctionLike) ?? sourceFile);
+            // A constructor parameter-property is also a class field, reachable as `this.<name>`.
+            if (node.modifiers?.some((modifier) => FIELD_MODIFIERS.has(modifier.kind))) {
+                const owner = findAncestor(node, ts.isClassDeclaration);
+                if (owner)
+                    add(`this.${node.name.text}`, owner);
+            }
+        }
+        else if (ts.isPropertyDeclaration(node) && ts.isIdentifier(node.name) && isFilterBarType(node.type)) {
+            const owner = findAncestor(node, ts.isClassDeclaration);
+            if (owner)
+                add(`this.${node.name.text}`, owner);
+        }
+        else if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && isFilterBarType(node.type)) {
+            add(node.name.text, findAncestor(node, isFunctionLike) ?? sourceFile);
+        }
+        node.forEachChild(visit);
+    };
+    visit(sourceFile);
+    return receivers;
+}
+/** Classifies a matched property access and appends the resulting edit(s). */
+function classifyAccess(node, sourceFile, edits) {
+    const parent = node.parent;
+    // Already migrated: `x.filter()` (call) or `x.filter.set(...)` — leave alone (idempotent).
+    if (ts.isCallExpression(parent) && parent.expression === node)
+        return;
+    if (ts.isPropertyAccessExpression(parent) && parent.expression === node && parent.name.text === 'set')
+        return;
+    // Write target: `x.filter = RHS` → `x.filter.set(RHS)` (writable members only).
+    if (ts.isBinaryExpression(parent) &&
+        parent.left === node &&
+        parent.operatorToken.kind === ts.SyntaxKind.EqualsToken) {
+        if (migrations_filterBarSignals_data.WRITABLE_MEMBERS.has(node.name.text)) {
+            const rhs = parent.right;
+            // Replace ` = ` with `.set(` and close after the right-hand side; keeping the RHS span intact
+            // lets any nested read edits inside it still apply.
+            edits.push({ start: node.getEnd(), end: rhs.getStart(sourceFile), text: '.set(' });
+            edits.push({ start: rhs.getEnd(), end: rhs.getEnd(), text: ')' });
+        }
+        return;
+    }
+    // Read (incl. optional chain `x?.filter`): append `()`.
+    edits.push({ start: node.getEnd(), end: node.getEnd(), text: '()' });
+}
+/** Collects edits for every read/write of a signal member on a known filter-bar receiver. */
+function collectAccessEdits(sourceFile, receivers) {
+    const edits = [];
+    const visit = (node) => {
+        if (ts.isPropertyAccessExpression(node) &&
+            ts.isIdentifier(node.name) &&
+            migrations_filterBarSignals_data.SIGNAL_MEMBERS.includes(node.name.text)) {
+            const receiverText = node.expression.getText(sourceFile);
+            const start = node.getStart(sourceFile);
+            const end = node.getEnd();
+            const inScope = receivers.some((r) => r.text === receiverText && start >= r.start && end <= r.end);
+            if (inScope)
+                classifyAccess(node, sourceFile, edits);
+        }
+        node.forEachChild(visit);
+    };
+    visit(sourceFile);
+    return edits;
+}
+/** Pass A — rewrite programmatic reads/writes of filter-bar signal members in TypeScript code. */
+function migrateTsExpressions(content, fileName) {
+    const sourceFile = ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const receivers = collectReceivers(sourceFile);
+    if (receivers.length === 0)
+        return content;
+    const edits = collectAccessEdits(sourceFile, receivers);
+    return edits.length > 0 ? applyEdits(content, edits) : content;
+}
+/** Collects template reference variable names bound to a `<kbq-filter-bar>` element. */
+class FilterBarRefCollector {
+    constructor() {
+        this.refs = new Set();
+    }
+    visitElement(element) {
+        if (element.name === migrations_filterBarSignals_data.FILTER_BAR_ELEMENT) {
+            for (const attr of element.attrs ?? []) {
+                if (typeof attr.name !== 'string')
+                    continue;
+                if (attr.name.startsWith('#'))
+                    this.refs.add(attr.name.slice(1));
+                else if (attr.name.startsWith('ref-'))
+                    this.refs.add(attr.name.slice(4));
+            }
+        }
+        this.visitChildren(element);
+    }
+    visitBlock(block) {
+        this.visitChildren(block);
+    }
+    visitChildren(node) {
+        for (const child of node.children ?? []) {
+            child.visit(this);
+        }
+    }
+    visitAttribute() { }
+    visitText() { }
+    visitComment() { }
+    visitExpansion() { }
+    visitExpansionCase() { }
+    visitBlockParameter() { }
+    visitLetDeclaration() { }
+}
+/** Rewrites `ref.member` reads to `ref.member()` for the given refs, scoped to those exact identifiers. */
+function rewriteRefReads(template, refs) {
+    const members = migrations_filterBarSignals_data.SIGNAL_MEMBERS.join('|');
+    let content = template;
+    let changed = false;
+    for (const ref of refs) {
+        // `\bref\.(member)\b(?!\s*\()` — skip anything already invoked, so the rewrite is idempotent.
+        const pattern = new RegExp(`\\b(${escapeRegExp(ref)})\\.(${members})\\b(?!\\s*\\()`, 'g');
+        const next = content.replace(pattern, '$1.$2()');
+        if (next !== content) {
+            content = next;
+            changed = true;
+        }
+    }
+    return { content, changed };
+}
+/** Pass B (core) — parse a template, discover filter-bar refs, rewrite their signal reads. */
+async function migrateTemplate(template) {
+    if (!template.includes(migrations_filterBarSignals_data.FILTER_BAR_ELEMENT))
+        return { content: template, changed: false };
+    const parsed = await utils_typescript.parseTemplate(template);
+    if (!parsed.tree)
+        return { content: template, changed: false };
+    const collector = new FilterBarRefCollector();
+    utils_ast.visitAll(collector, parsed.tree.rootNodes);
+    if (collector.refs.size === 0)
+        return { content: template, changed: false };
+    return rewriteRefReads(template, [...collector.refs]);
+}
+/** Interior `[start, end]` ranges of inline `@Component({ template: '…' })` string literals. */
+function collectInlineTemplateRanges(sourceFile) {
+    const ranges = [];
+    utils_typescript.forEachClass(sourceFile, (node) => {
+        const decorator = ts
+            .getDecorators(node)
+            ?.find((dec) => ts.isCallExpression(dec.expression) &&
+            ts.isIdentifier(dec.expression.expression) &&
+            dec.expression.expression.text === 'Component');
+        if (!decorator || !ts.isCallExpression(decorator.expression))
+            return;
+        const [arg] = decorator.expression.arguments;
+        if (!arg || !ts.isObjectLiteralExpression(arg))
+            return;
+        for (const prop of arg.properties) {
+            if (ts.isPropertyAssignment(prop) &&
+                (ts.isIdentifier(prop.name) || ts.isStringLiteralLike(prop.name)) &&
+                prop.name.text === 'template' &&
+                ts.isStringLiteralLike(prop.initializer) &&
+                prop.initializer.text) {
+                // +1 / -1 to exclude the opening/closing quote characters.
+                ranges.push({ start: prop.initializer.getStart(sourceFile) + 1, end: prop.initializer.getEnd() - 1 });
+            }
+        }
+    });
+    return ranges;
+}
+/** Pass B (inline) — rewrite filter-bar ref reads inside inline component templates. */
+async function migrateInlineTemplates(content, fileName) {
+    const sourceFile = ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const ranges = collectInlineTemplateRanges(sourceFile).sort((a, b) => b.start - a.start);
+    let result = content;
+    for (const { start, end } of ranges) {
+        const { content: rewritten, changed } = await migrateTemplate(result.slice(start, end));
+        if (changed) {
+            result = result.slice(0, start) + rewritten + result.slice(end);
+        }
+    }
+    return result;
+}
+/** Pass C — safe identifier renames. */
+function applyRenames(content) {
+    let result = content;
+    for (const { from, to } of migrations_filterBarSignals_data.tsRenameReplacements) {
+        result = result.replace(new RegExp(from, 'g'), to);
+    }
+    return result;
+}
+function logWarnings(context, filePath, content) {
+    for (const { pattern, message } of migrations_filterBarSignals_data.warnPatterns) {
+        if (new RegExp(pattern).test(content)) {
+            utils_messages.logMessage(context.logger, [`[filter-bar-signals] ${filePath}`, `  ${message}`]);
+        }
+    }
+}
+/** A `.ts` file is a filter-bar consumer if it names the type or imports the package. */
+function referencesFilterBar(content) {
+    return /\bKbqFilterBar\b/.test(content) || content.includes('@koobiq/components/filter-bar');
+}
+function filterBarSignals(options) {
+    return async (tree, context) => {
+        const { project, fix } = options;
+        const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
+        const root = projectDefinition?.root ?? '';
+        const rootDir = root ? tree.getDir(root) : tree.root;
+        const tsPaths = [];
+        const htmlPaths = [];
+        rootDir.visit((filePath) => {
+            if (filePath.includes('node_modules') || filePath.includes('/dist/'))
+                return;
+            if (filePath.endsWith(TS_EXT))
+                tsPaths.push(filePath);
+            else if (filePath.endsWith(HTML_EXT))
+                htmlPaths.push(filePath);
+        });
+        let touched = 0;
+        const commit = (filePath, original, updated) => {
+            if (updated === original)
+                return;
+            touched++;
+            if (fix) {
+                tree.overwrite(filePath, updated);
+            }
+            else {
+                utils_messages.logMessage(context.logger, [`[filter-bar-signals] would update ${filePath} (run with --fix to apply)`]);
+            }
+        };
+        for (const filePath of tsPaths) {
+            const original = tree.read(filePath)?.toString();
+            if (!original || !referencesFilterBar(original))
+                continue;
+            logWarnings(context, filePath, original);
+            let content = migrateTsExpressions(original, filePath);
+            content = await migrateInlineTemplates(content, filePath);
+            content = applyRenames(content);
+            commit(filePath, original, content);
+        }
+        for (const filePath of htmlPaths) {
+            const original = tree.read(filePath)?.toString();
+            if (!original)
+                continue;
+            const { content, changed } = await migrateTemplate(original);
+            if (changed)
+                commit(filePath, original, content);
+        }
+        utils_messages.logMessage(context.logger, [
+            `[filter-bar-signals] processed tree under "${root || '<workspace root>'}", ` +
+                `${fix ? 'updated' : 'would update'} ${touched} file(s).`
+        ]);
+    };
+}
+
+exports.default = filterBarSignals;

package/schematics/migrations/filter-bar-signals/schema.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-filter-bar-signals",
+    "title": "Koobiq components filter-bar signals migration",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project to migrate. If omitted, the migration runs over the whole tree.",
+            "$default": {
+                "$source": "projectName"
+            }
+        },
+        "fix": {
+            "type": "boolean",
+            "default": true,
+            "description": "When true, applies all auto-fix replacements. When false, prints what would change without writing."
+        }
+    }
+}

package/schematics/migrations/new-icons-pack/index.js

@@ -46,7 +46,7 @@ function newIconsPack(options) {
             const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
             targetDir = projectDefinition ? tree.getDir(projectDefinition.root) : tree;
         }
-        catch (e) {
+        catch {
             targetDir = tree;
         }
         const { logger } = context;

package/schematics/migrations/v20-upgrade/README.md

@@ -0,0 +1,72 @@
+# v20-upgrade
+
+Migration schematic invoked automatically by `ng update @koobiq/components@20`.
+Rewrites code in the target workspace to match the deprecated APIs that were
+removed in @koobiq/components v20.0.0.
+
+## What it does
+
+The schematic walks every `.ts`, `.html`, `.scss`, and `.css` file in the
+project (skipping `node_modules` and `dist`) and applies regex replacements
+from three ordered tables in `data.ts`:
+
+- **`tsReplacements`** — covers TypeScript imports and identifier usage:
+  package moves (`@koobiq/components/navbar-ic` → `@koobiq/components/navbar`,
+  `risk-level` → `badge`, `components-experimental/form-field` → `components/form-field`),
+  class renames (`KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`,
+  `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`,
+  `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, etc.), token
+  removals (`KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW`),
+  function renames (`toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` →
+  `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`),
+  method renames on instances (`.openPanel(` → `.open(`, `.toggleIsCollapsed(` →
+  `.toggle(`, `.focusViaKeyboard(` → `.focus(`), and deprecated type-alias
+  renames (`DropdownPositionX` → `KbqDropdownPositionX`, `DropdownPositionY` →
+  `KbqDropdownPositionY`).
+- **`templateReplacements`** — selectors and attributes in Angular templates
+  (both external `.html` files and inline `template:` strings inside `.ts`):
+  `<kbq-filter-search>` → `<kbq-search-expandable>`, `<kbq-datepicker-toggle>` →
+  `<kbq-datepicker-toggle-icon>`, `<kbq-risk-level>` → `<kbq-badge>`,
+  `<kbq-navbar-ic>` → `<kbq-navbar>`, `[kbqWarningTooltip]` →
+  `kbqTooltipModifier="warning" [kbqTooltip]`, `kbqFormFieldWithoutBorders` →
+  `noBorders`, the deprecated `KbqCodeBlock` input attributes
+  (`[canLoad]` / `canLoad=` → `canDownload`, `[codeFiles]` / `codeFiles=` →
+  `files`), and template-ref exportAs renames
+  (`="kbqWarningTooltip"` → `="kbqTooltip"`).
+- **`scssReplacements`** — CSS class selectors renamed at the component level.
+
+## What it does _not_ do (warn-only)
+
+Some changes require code restructuring and are surfaced as console warnings
+without auto-fixing:
+
+| Pattern                                           | Manual migration                                                                                      |
+| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `(onSaveAsNew)`                                   | Listen to `(onSave)` and branch on `$event.status === 'newFilter'`                                    |
+| `[customValidation]`                              | Use `FormControl` validators (e.g. `FileValidators.isCorrectExtension`)                               |
+| `[errors]` (file-upload)                          | Use `FormControl.errors`                                                                              |
+| `[apps]` (app-switcher)                           | Wrap in single-site `[sites]="[{ id, name, apps }]"` and read with `KbqAppSwitcherSite`               |
+| `scrollableCodeContent` (code-block)              | Use the `scrollTo()` method instead                                                                   |
+| `.canLoad` / `.codeFiles` (code-block, TS access) | Template bindings are auto-migrated; update programmatic access to `.canDownload` / `.files` manually |
+| `required` (KbqFilter)                            | Use `cleanable = false` and `removable = false` (best-effort match — verify it is a KbqFilter config) |
+
+## Running it manually
+
+```
+ng generate @koobiq/components:v20-upgrade --project my-app
+```
+
+Pass `--fix=false` to see what would change without writing files.
+
+## Limitations
+
+This is a regex-based migration. It does NOT understand:
+
+- Re-exports through aliased imports.
+- Variable bindings of class references (`const x = KbqNavbarIc;` → leaves it
+  untouched).
+- TypeScript module augmentation.
+
+The grammar of `(?!...)` lookahead is used to avoid double-rewriting cases
+like `KbqDatepickerToggleIcon` (which already references the new class).
+After running, **always inspect the diff** before committing.