@koobiq/components 18.5.3 → 18.7.0

package/schematics/migrations/css-selectors/data.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const typographyCssSelectorsReplacement = [
+    { replace: 'kbq-display-1-strong', replaceWith: 'kbq-display-big-strong' },
+    { replace: 'kbq-display-2-strong', replaceWith: 'kbq-display-normal-strong' },
+    { replace: 'kbq-display-3-strong', replaceWith: 'kbq-display-compact-strong' },
+    { replace: 'kbq-body-tabular', replaceWith: 'kbq-tabular-big' },
+    { replace: 'kbq-body-strong', replaceWith: 'kbq-text-big-strong' },
+    { replace: 'kbq-body-mono-strong', replaceWith: 'kbq-mono-big-strong' },
+    { replace: 'kbq-body-mono', replaceWith: 'kbq-mono-big' },
+    { replace: 'kbq-body-caps', replaceWith: 'kbq-caps-big' },
+    { replace: 'kbq-caption-tabular', replaceWith: 'kbq-tabular-normal' },
+    { replace: 'kbq-caption-strong', replaceWith: 'kbq-text-normal-strong' },
+    { replace: 'kbq-caption-mono-strong', replaceWith: 'kbq-mono-normal-strong' },
+    { replace: 'kbq-caption-mono', replaceWith: 'kbq-mono-normal' },
+    { replace: 'kbq-caption-caps', replaceWith: 'kbq-caps-normal' },
+    { replace: 'kbq-extra-small-text-strong', replaceWith: 'kbq-text-compact-strong' },
+    { replace: 'kbq-extra-small-text-mono', replaceWith: 'kbq-mono-compact' },
+    { replace: 'kbq-extra-small-text-caps', replaceWith: 'kbq-caps-compact' },
+    { replace: 'kbq-display-1', replaceWith: 'kbq-display-big' },
+    { replace: 'kbq-display-2', replaceWith: 'kbq-display-normal' },
+    { replace: 'kbq-display-3', replaceWith: 'kbq-display-compact' },
+    { replace: 'kbq-body', replaceWith: 'kbq-text-big' },
+    { replace: 'kbq-caption', replaceWith: 'kbq-text-normal' },
+    { replace: 'kbq-extra-small-text', replaceWith: 'kbq-text-compact' }
+];
+const colorsVarsReplacement = [
+    /* NEUTRAL */
+    { replace: 'neutral-white', replaceWith: '<remove from project>' },
+    /* BRAND */
+    { replace: 'brand-default', replaceWith: '<remove from project>' },
+    { replace: 'brand-palette', replaceWith: '<remove from project>' },
+    /* INFO */
+    { replace: 'info-default', replaceWith: '<remove from project>' },
+    /* BACKGROUND */
+    { replace: 'background-background-disabled', replaceWith: 'states-background-disabled' },
+    { replace: 'background-background-less-contrast', replaceWith: 'states-background-secondary' },
+    { replace: 'background-background-under', replaceWith: 'states-background-secondary' },
+    { replace: 'background-background', replaceWith: 'background-bg' },
+    { replace: 'background-overlay-hover', replaceWith: 'states-background-transparent-hover' },
+    { replace: 'background-overlay-active', replaceWith: 'states-background-transparent-active' },
+    { replace: 'background-overlay-disabled', replaceWith: 'states-background-transparent-disabled' },
+    /* FOREGROUND */
+    { replace: 'foreground-text-less-contrast', replaceWith: 'foreground-contrast-fade' },
+    { replace: 'foreground-text-disabled', replaceWith: 'states-foreground-disabled' },
+    { replace: 'foreground-text-error', replaceWith: 'foreground-contrast-fade' },
+    { replace: 'foreground-text-success', replaceWith: 'foreground-success' },
+    { replace: 'foreground-divider', replaceWith: 'line-contrast-less' },
+    { replace: 'foreground-text', replaceWith: 'foreground-contrast' },
+    { replace: 'foreground-icon', replaceWith: 'icon-contrast' },
+    { replace: 'foreground-border', replaceWith: 'line-contrast-fade' },
+    /* STATES */
+    { replace: 'states-background-ghost-hover', replaceWith: 'states-background-transparent-hover' },
+    { replace: 'states-background-ghost-active', replaceWith: 'states-background-transparent-active' },
+    /* ICON */
+    { replace: 'states-focused-color-error', replaceWith: 'states-line-focus-error' },
+    { replace: 'states-focused-color', replaceWith: 'states-line-focus-theme' },
+    { replace: 'states-selected-color', replaceWith: '<remove from project>' },
+    { replace: 'states-pressed-shadow', replaceWith: '<remove from project>' },
+    { replace: 'states-pressed-shadow', replaceWith: '<remove from project>' },
+    { replace: 'others-brand', replaceWith: '<remove from project>' }
+];
+
+exports.colorsVarsReplacement = colorsVarsReplacement;
+exports.typographyCssSelectorsReplacement = typographyCssSelectorsReplacement;

package/schematics/migrations/css-selectors/index.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var path = require('path');
+var utils_packageConfig = require('../../package-config-D0ROjo4J.js');
+var migrations_cssSelectors_data = require('./data.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+
+function cssSelectors(options) {
+    let targetDir;
+    return async (tree, context) => {
+        const { project, fix, stylesExt } = options;
+        try {
+            const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
+            targetDir = projectDefinition ? tree.getDir(projectDefinition.root) : tree;
+        }
+        catch (e) {
+            targetDir = tree;
+        }
+        const { logger } = context;
+        const getDeprecatedFrom = (content, replacementInfo) => {
+            return replacementInfo.filter(({ replace }) => new RegExp(`\\b${replace}\\b`, 'g').exec(content));
+        };
+        const handleReplacements = (newContent, path) => {
+            if (fix) {
+                migrations_cssSelectors_data.typographyCssSelectorsReplacement.forEach(({ replace, replaceWith }) => {
+                    newContent = newContent.replace(new RegExp(`\\b${replace}\\b`, 'g'), replaceWith);
+                });
+            }
+            else {
+                const foundSelectors = getDeprecatedFrom(newContent, migrations_cssSelectors_data.typographyCssSelectorsReplacement);
+                if (foundSelectors.length) {
+                    logger.warn(getTypographyReplacements(path, foundSelectors));
+                }
+            }
+            // Just suggest about colors replacements without changing file,
+            // since it's potentially a complex task to handle
+            const foundColors = getDeprecatedFrom(newContent, migrations_cssSelectors_data.colorsVarsReplacement);
+            if (foundColors.length) {
+                logger.warn(getBaseReplacements(path, foundColors));
+            }
+            return newContent;
+        };
+        // Update templates & components & styles
+        targetDir.visit((path, entry) => {
+            // if project property not provided, provide node_modules to be changed
+            if (path.includes('node_modules'))
+                return;
+            if (path.endsWith('.html') || path.endsWith('.ts') || path.endsWith(stylesExt)) {
+                const initialContent = entry?.content.toString();
+                let newContent = initialContent;
+                if (newContent) {
+                    newContent = handleReplacements(newContent, path);
+                    if (initialContent !== newContent) {
+                        tree.overwrite(path, newContent || '');
+                    }
+                }
+            }
+        });
+    };
+}
+function getBaseReplacements(filePath, foundSelectors) {
+    const parsedFilePath = path__namespace.relative(__dirname, `.${filePath}`).replace(/\\/g, '/');
+    return `
+-------------------------
+Please pay attention! Found deprecated сss-selectors in file: 
+${parsedFilePath}
+Replace with specified rules: 
+${foundSelectors.map(({ replace, replaceWith }) => `\t${replace} -> \t${replaceWith}`).join('\n')}
+-------------------------
+    `;
+}
+function getTypographyReplacements(filePath, foundSelectors) {
+    const baseMessage = getBaseReplacements(filePath, foundSelectors);
+    return `${baseMessage}\n
+Or use --fix=true to replace automatically
+Pay attention: overwriting is possible. Check the code after automatic replacement was done.
+-------------------------
+    `;
+}
+
+exports.default = cssSelectors;

package/schematics/migrations/css-selectors/schema.json

@@ -0,0 +1,25 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-css-selectors",
+    "title": "koobiq-components css-selectors schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        },
+        "fix": {
+            "type": "boolean",
+            "description": "Whether overwrite icons prefixes or simply inform in console",
+            "default": false
+        },
+        "stylesExt": {
+            "type": "string",
+            "description": "Use this option to specify styles extension preferred in your project",
+            "default": "scss"
+        }
+    }
+}