@lucca-front/ng 10.0.0-rc.1 → 10.0.0-rc.2

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@lucca-front/ng",
-  "version": "10.0.0-rc.1",
+  "version": "10.0.0-rc.2",
   "description": "A library of icons made by the team @Lucca",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/LuccaSA/lucca-front.git"
   },
   "schematics": "./schematics/collection.json",
+  "ng-update": {
+    "migrations": "./schematics/migrations.json",
+    "packageGroup": [
+      "@lucca-front/ng",
+      "@lucca-front/scss",
+      "@lucca-front/icons"
+    ]
+  },
   "license": "MIT",
   "public": true,
   "keywords": [
@@ -23,7 +31,9 @@
     "@angular/cdk": "^13.0.0 || ^12.0.0",
     "@lucca-front/icons": ">=8.0.0 <9.0.0",
     "@lucca-front/scss": ">=8.0.0 <9.0.0",
-    "rxjs": "^6.0.0 || ^7.0.0"
+    "rxjs": "^6.0.0 || ^7.0.0",
+    "postcss-scss": "^4.0.0",
+    "postcss": "^8.0.0"
   },
   "bugs": {
     "url": "https://github.com/LuccaSA/lucca-front/issues"

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const migration_1 = require("./migration");
+exports.default = () => {
+    return (tree) => {
+        tree.visit((path, entry) => {
+            if (!path.endsWith('.scss') || path.includes('node_modules') || !entry) {
+                return;
+            }
+            tree.overwrite(path, (0, migration_1.migrateFile)(entry.content.toString()));
+        });
+    };
+};

package/schematics/migrations/css-vars/migration.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateFile = void 0;
+const postcss_scss_1 = require("postcss-scss");
+const mixin_registry_1 = require("./mixin-registry");
+const color_1 = require("./updaters/color");
+const elevation_1 = require("./updaters/elevation");
+const get_set_1 = require("./updaters/get-set");
+const ie11_1 = require("./updaters/ie11");
+const main_import_1 = require("./updaters/main-import");
+const mixins_1 = require("./updaters/mixins");
+const remove_scss_placeholder_1 = require("./updaters/remove-scss-placeholder");
+const theme_1 = require("./updaters/theme");
+const utils_1 = require("./utils");
+function migrateFile(content) {
+    const root = (0, postcss_scss_1.parse)(content);
+    root.walkAtRules('import', (rule) => {
+        ['@lucca-front/scss/src/mixins', '@lucca-front/icons/src/mixins', 'theming', 'theme'].some((name) => (0, utils_1.removeImportNode)(rule, name));
+    });
+    (0, remove_scss_placeholder_1.removeScssPlaceholders)(root);
+    (0, ie11_1.removeIE11ThemeSupport)(root);
+    (0, color_1.updateColorMixin)(root);
+    (0, theme_1.updateThemeMixin)(root);
+    (0, get_set_1.updateGetSetFunctions)(root);
+    (0, elevation_1.updateElevation)(root);
+    (0, main_import_1.updateMainImport)(root);
+    root.walkAtRules('include', (atRule) => {
+        if (atRule.params === 'ie11') {
+            atRule.remove();
+        }
+    });
+    root.walkDecls('$noCssVar', (node) => {
+        node.remove();
+    });
+    root.walkAtRules('include', (atRule) => {
+        if (atRule.params.startsWith('generateCSSVarsFromTheme')) {
+            const parent = atRule.parent;
+            atRule.remove();
+            (0, utils_1.removeContainerIfEmpty)(parent);
+        }
+    });
+    (0, mixins_1.replaceMixin)(root, mixin_registry_1.mixinRegistry);
+    return root.toResult().css;
+}
+exports.migrateFile = migrateFile;

package/schematics/migrations/css-vars/migration.spec.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const migration_1 = require("./migration");
+const collectionPath = path.normalize(path.join(__dirname, '..', '../migrations.json'));
+const testsRoot = path.join(__dirname, 'tests');
+const files = fs.readdirSync(testsRoot);
+const inputFiles = files.filter((f) => f.endsWith('.input.scss'));
+const outputFiles = files.filter((f) => f.endsWith('.output.scss'));
+const cases = inputFiles.map((f) => f.replace('.input.scss', ''));
+describe('Migration', () => {
+    for (const testCase of cases) {
+        it('should handle ' + testCase, () => {
+            // Arrange
+            const input = fs
+                .readFileSync(path.join(testsRoot, `${testCase}.input.scss`))
+                .toString()
+                .replace(/\r/g, '');
+            const expected = fs
+                .readFileSync(path.join(testsRoot, `${testCase}.output.scss`))
+                .toString()
+                .replace(/\r/g, '');
+            // Act
+            const actual = (0, migration_1.migrateFile)(input);
+            //Assert
+            expect(stripLastNewLine(actual)).toBe(stripLastNewLine(expected));
+        });
+    }
+});
+describe('CSS Vars Migration', () => {
+    it('should update style files', () => __awaiter(void 0, void 0, void 0, function* () {
+        const tree = new testing_1.UnitTestTree(schematics_1.Tree.empty());
+        for (const file of inputFiles) {
+            tree.create(file.replace('.input.', '.'), fs.readFileSync(path.join(testsRoot, file)).toString().replace(/\r/g, ''));
+        }
+        const schematicRunner = new testing_1.SchematicTestRunner('migrations', collectionPath);
+        // migration-v9-css-vars is the name of the migration, which is defined in the migration.json file
+        yield schematicRunner.runSchematicAsync('migration-v9-css-vars', {}, tree).toPromise();
+        expect(tree.files.length).toBe(inputFiles.length);
+        for (const file of outputFiles) {
+            const filePath = file.replace('.output.', '.');
+            expect(tree.exists(filePath)).toBe(true);
+            const actualContent = tree.readContent(filePath);
+            const expectedContent = fs.readFileSync(path.join(testsRoot, file)).toString().replace(/\r/g, '');
+            expect(stripLastNewLine(actualContent)).toBe(stripLastNewLine(expectedContent));
+        }
+    }));
+});
+function stripLastNewLine(input) {
+    return input.endsWith('\n') ? input.slice(0, -1) : input;
+}

package/schematics/migrations/css-vars/mixin-registry.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mixinRegistry = exports.MixinRegistry = void 0;
+class MixinRegistry {
+    constructor() {
+        this._mixins = {};
+    }
+    registerMixin(mixins, mixinsImport, namespace) {
+        const mixinNames = Array.isArray(mixins) ? mixins : Object.keys(mixins);
+        for (const mixin of mixinNames) {
+            this._mixins[mixin] = {
+                newName: Array.isArray(mixins) ? mixin : mixins[mixin],
+                import: mixinsImport,
+                namespace,
+                prefix: namespace !== null && namespace !== void 0 ? namespace : mixinsImport.split('/').reverse()[0],
+            };
+        }
+        return this;
+    }
+    getByName(name) {
+        var _a;
+        return (_a = this._mixins[name]) !== null && _a !== void 0 ? _a : null;
+    }
+}
+exports.MixinRegistry = MixinRegistry;
+const mixinRegistry = new MixinRegistry();
+exports.mixinRegistry = mixinRegistry;
+mixinRegistry
+    .registerMixin(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], '@lucca-front/scss/src/components/title')
+    .registerMixin({ loading: 'spinner' }, '@lucca-front/scss/src/commons/utils/loading')
+    .registerMixin(['makeIcon'], '@lucca-front/icons/src/_mixins', 'icon')
+    .registerMixin({
+    media_larger_than: 'largerThan',
+    media_smaller_than: 'smallerThan',
+}, '@lucca-front/scss/src/commons/utils/media')
+    .registerMixin({
+    listReset: 'list',
+    buttonReset: 'button',
+    definitionListReset: 'list($list: "dl")',
+}, '@lucca-front/scss/src/commons/utils/reset')
+    .registerMixin(['mask'], '@lucca-front/scss/src/commons/utils/a11y');

package/schematics/migrations/css-vars/updaters/color.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateColorMixin = void 0;
+const utils_1 = require("../utils");
+const legacyLevelToLevel = {
+    'see-through': '50',
+    darker: '900',
+    dark: '800',
+    color: '700',
+    light: '500',
+    lighter: '200',
+    lightest: '100',
+    default: '700',
+};
+function updateColorMixin(root) {
+    root.walkDecls((decl) => {
+        const valueNode = new utils_1.ValueNode(decl.value);
+        valueNode.walkFunction('_color', (funcNode) => {
+            var _a, _b, _c;
+            const [color, legacyLevel] = funcNode.nodes[0].value.split('.');
+            funcNode.value = 'var';
+            if (color === 'white') {
+                funcNode.nodes = new utils_1.ValueNode(`--colors-${color}-color`).nodes;
+            }
+            else {
+                let level = (_b = legacyLevel !== null && legacyLevel !== void 0 ? legacyLevel : (_a = funcNode.nodes[2]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '700';
+                level = (_c = legacyLevelToLevel[level]) !== null && _c !== void 0 ? _c : level;
+                funcNode.nodes = new utils_1.ValueNode(`--palettes-${color}-${level}`).nodes;
+            }
+        });
+        decl.value = valueNode.toString();
+    });
+}
+exports.updateColorMixin = updateColorMixin;

package/schematics/migrations/css-vars/updaters/elevation.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateElevation = void 0;
+const postcss_1 = require("postcss");
+const utils_1 = require("../utils");
+function updateElevation(root) {
+    root.walkAtRules('include', (atRule) => {
+        const valueNode = new utils_1.ValueNode(atRule.params);
+        valueNode.walkFunction('elevate', (funcNode) => {
+            const level = funcNode.nodes[0].value;
+            atRule.before(new postcss_1.Declaration({
+                prop: 'box-shadow',
+                value: `var(--commons-elevation-elevation-${level})`,
+            }));
+            atRule.remove();
+        });
+    });
+}
+exports.updateElevation = updateElevation;

package/schematics/migrations/css-vars/updaters/get-set.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGetSetFunctions = void 0;
+const utils_1 = require("../utils");
+function updateGetSetFunctions(root) {
+    root.walkAtRules((atRule) => {
+        new utils_1.ValueNode(atRule.params).walkFunction('_getMap', () => {
+            (0, utils_1.commentNode)(atRule, 'Passer directement par des variables CSS.');
+            return false;
+        });
+    });
+    root.walkDecls((decl) => {
+        const valueNode = new utils_1.ValueNode(decl.value);
+        valueNode.walkFunction('_safeGet', () => {
+            (0, utils_1.commentNode)(decl, 'Passer directement par des variables CSS.');
+            return false;
+        });
+        decl.value = valueNode.toString();
+    });
+}
+exports.updateGetSetFunctions = updateGetSetFunctions;

package/schematics/migrations/css-vars/updaters/ie11.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeIE11ThemeSupport = void 0;
+const utils_1 = require("../utils");
+function removeIE11ThemeSupport(root) {
+    root.walkDecls((decl) => {
+        const valueNode = new utils_1.ValueNode(decl.value);
+        valueNode.walkFunction(/(_theme|_color|_safeGet)/, (funcNode) => {
+            var _a;
+            const hasModeIE = ((_a = funcNode.nodes[funcNode.nodes.length - 1]) === null || _a === void 0 ? void 0 : _a.value) === 'true';
+            if (hasModeIE) {
+                const { parent } = decl;
+                decl.remove();
+                (0, utils_1.removeContainerIfEmpty)(parent);
+                return false;
+            }
+            return undefined;
+        });
+    });
+}
+exports.removeIE11ThemeSupport = removeIE11ThemeSupport;

package/schematics/migrations/css-vars/updaters/main-import.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateMainImport = void 0;
+const postcss_1 = require("postcss");
+const utils_1 = require("../utils");
+function updateMainImport(root) {
+    let hasMainScss = false;
+    let hasMainNg = false;
+    root.walkAtRules('import', (atRule) => {
+        if (atRule.params.includes('scss/src/theming.overridable')) {
+            (0, utils_1.removeImportNode)(atRule, 'scss/src/theming.overridable');
+        }
+        if (atRule.params.includes('scss/src/main.overridable')) {
+            (0, utils_1.removeImportNode)(atRule, 'scss/src/main.overridable');
+            hasMainScss = true;
+        }
+        if (atRule.params.includes('ng/style/main.overridable')) {
+            (0, utils_1.removeImportNode)(atRule, 'ng/style/main.overridable');
+            hasMainNg = true;
+        }
+    });
+    if (hasMainScss) {
+        addForwardRule(root, '@lucca-front/scss/src/commons');
+        addForwardRule(root, '@lucca-front/scss/src/components');
+    }
+    if (hasMainNg) {
+        addForwardRule(root, '@lucca-front/ng/style/main');
+    }
+}
+exports.updateMainImport = updateMainImport;
+function addForwardRule(root, name) {
+    var _a;
+    let lastForwardRule;
+    root.walkAtRules('forward', (rule) => {
+        lastForwardRule = rule;
+    });
+    let afterNode = lastForwardRule;
+    if (!afterNode && ((_a = root.first) === null || _a === void 0 ? void 0 : _a.type) === 'comment') {
+        afterNode = root.first;
+    }
+    (0, utils_1.addImport)(root, new postcss_1.AtRule({ name: 'forward', params: `'${name}'` }), afterNode);
+}

package/schematics/migrations/css-vars/updaters/mixins.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceMixin = void 0;
+const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
+const utils_1 = require("../utils");
+function replaceMixin(root, registry) {
+    const neededNamespaceByImport = {};
+    root.walkAtRules('include', (rule) => {
+        rule.params = (0, postcss_value_parser_1.default)(rule.params)
+            .walk((node) => {
+            if (!['function', 'word'].includes(node.type)) {
+                return undefined;
+            }
+            const mixin = registry.getByName(node.value);
+            if (mixin) {
+                neededNamespaceByImport[mixin.import] = mixin.namespace;
+                node.value = `${mixin.prefix}.${mixin.newName}`;
+                return false;
+            }
+            (0, utils_1.commentNode)(rule, 'Mixins non gérée par la migration auto.');
+            return false;
+        })
+            .toString();
+    });
+    for (const [neededImport, namespace] of Object.entries(neededNamespaceByImport)) {
+        (0, utils_1.addMixinImport)(root, neededImport, namespace);
+    }
+}
+exports.replaceMixin = replaceMixin;

package/schematics/migrations/css-vars/updaters/remove-scss-placeholder.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeScssPlaceholders = void 0;
+const utils_1 = require("../utils");
+/**
+ * Replace: calc(100vh - #{_theme(\"commons.banner-height\")} - 3.5rem)
+ * With:    calc(100vh - _theme(\"commons.banner-height\") - 3.5rem)
+ */
+function removeScssPlaceholders(root) {
+    root.walkDecls((decl) => {
+        const valueNode = new utils_1.ValueNode(decl.value);
+        valueNode.walkFunction(/.*/, (func) => {
+            func.value = func.value.replace(/#\{/g, '');
+            func.nodes = func.nodes.filter((child) => child.type !== 'word' || child.value !== '}');
+        });
+        decl.value = valueNode.toString();
+    });
+}
+exports.removeScssPlaceholders = removeScssPlaceholders;

package/schematics/migrations/css-vars/updaters/theme.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateThemeMixin = void 0;
+const utils_1 = require("../utils");
+function updateThemeMixin(root) {
+    root.walkDecls((decl) => {
+        const valueNode = new utils_1.ValueNode(decl.value);
+        valueNode.walkFunction('_theme', (funcNode) => {
+            const isUnsupported = funcNode.nodes.length > 1;
+            if (isUnsupported) {
+                (0, utils_1.commentNode)(decl, 'Utilisation de _theme non gérée par la migration automatique');
+                return false;
+            }
+            const themeVar = funcNode.nodes[0].value.replace(/\./g, '-');
+            funcNode.value = 'var';
+            funcNode.nodes = new utils_1.ValueNode(`--${themeVar}`).nodes;
+            return undefined;
+        });
+        decl.value = valueNode.toString();
+    });
+}
+exports.updateThemeMixin = updateThemeMixin;

package/schematics/migrations/css-vars/utils.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValueNode = exports.commentNode = exports.removeImportNode = exports.addImport = exports.addMixinImport = exports.removeContainerIfEmpty = void 0;
+const postcss_1 = require("postcss");
+const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
+function removeContainerIfEmpty(node) {
+    if (!node) {
+        return;
+    }
+    if (!node.nodes.length) {
+        const { parent } = node;
+        node.remove();
+        if (parent instanceof postcss_1.Document) {
+            return;
+        }
+        removeContainerIfEmpty(parent);
+    }
+}
+exports.removeContainerIfEmpty = removeContainerIfEmpty;
+function addMixinImport(root, mixin, namespace = '') {
+    let lastImportRule;
+    root.walkAtRules(/(import|use)/, (rule) => {
+        lastImportRule = rule;
+    });
+    let importStr = `'${mixin}'`;
+    if (namespace) {
+        importStr += ` as ${namespace}`;
+    }
+    const newImportRule = new postcss_1.AtRule({ name: 'use', params: importStr });
+    addImport(root, newImportRule, lastImportRule);
+}
+exports.addMixinImport = addMixinImport;
+function addImport(root, atRule, afterNode) {
+    var _a;
+    if (afterNode) {
+        atRule.raws.before = '\n';
+        afterNode.after(atRule);
+    }
+    else {
+        const firstNode = root.first;
+        (_a = root.first) === null || _a === void 0 ? void 0 : _a.before(atRule);
+        if (firstNode) {
+            firstNode.raws.before = '\n\n';
+        }
+    }
+}
+exports.addImport = addImport;
+/**
+ * @returns {boolean} returns true if whole node is deleted
+ */
+function removeImportNode(atRule, name) {
+    var _a, _b;
+    if (atRule.params.includes(name)) {
+        const parsed = (0, postcss_value_parser_1.default)(atRule.params);
+        const imports = parsed.nodes.filter((n) => n.type === 'string');
+        if (imports.length === 1) {
+            // Remove the whole import
+            atRule.remove();
+            return true;
+        }
+        // Remove node matching condition
+        parsed.nodes = parsed.nodes.filter((n) => n.type !== 'string' || !n.value.includes(name));
+        // Remove first node if divider
+        if (((_a = parsed.nodes[0]) === null || _a === void 0 ? void 0 : _a.type) === 'div') {
+            parsed.nodes = parsed.nodes.slice(1);
+        }
+        // Remove last node if divider
+        if (((_b = parsed.nodes[parsed.nodes.length - 1]) === null || _b === void 0 ? void 0 : _b.type) === 'div') {
+            parsed.nodes = parsed.nodes.slice(0, -1);
+        }
+        // Remove consecutive divider nodes
+        parsed.nodes = parsed.nodes.filter((n, index) => { var _a; return n.type !== 'div' || ((_a = parsed.nodes[index + 1]) === null || _a === void 0 ? void 0 : _a.type) !== 'div'; });
+        atRule.params = parsed.toString();
+    }
+    return false;
+}
+exports.removeImportNode = removeImportNode;
+function commentNode(node, comment) {
+    const commentNode = new postcss_1.Comment({ text: `[LF NEXT] ${comment}` });
+    node.before(commentNode);
+    commentNode.after(new postcss_1.Comment({ text: node.toString() }));
+    node.remove();
+}
+exports.commentNode = commentNode;
+class ValueNode {
+    constructor(value) {
+        this.parsed = (0, postcss_value_parser_1.default)(value);
+    }
+    get nodes() {
+        return this.parsed.nodes;
+    }
+    toString() {
+        return this.parsed.toString();
+    }
+    walkFunction(functionFilter, callback) {
+        this.parsed.walk((node) => {
+            if (node.type !== 'function') {
+                return;
+            }
+            if (!this.matchFilter(node.value, functionFilter)) {
+                return;
+            }
+            return callback(node);
+        });
+    }
+    matchFilter(value, filter) {
+        return typeof filter === 'string' ? value === filter : !!value.match(filter);
+    }
+}
+exports.ValueNode = ValueNode;

package/schematics/migrations.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+	"schematics": {
+		"migration-v9-css-vars": {
+			"version": "9.0.0-alpha",
+			"description": "Remove LF <= 8 theming system and import to use new scss syntax and CSS Vars everywhere",
+			"factory": "./migrations/css-vars/index"
+		}
+	}
+}