@design-factory/design-factory 21.0.0-next.0 → 21.0.0-next.1

package/schematics/migrations/21_0_0/deleted-sass-vars/index.d.ts

@@ -0,0 +1,7 @@
+import { Rule } from '@angular-devkit/schematics';
+/**
+ * This migration
+ *
+ * @returns the Rule to migrate the classes
+ */
+export default function deletedSassVars(): Rule;

package/schematics/migrations/21_0_0/deleted-sass-vars/index.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = deletedSassVars;
+const schematics_1 = require("@angular-devkit/schematics");
+const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
+const compiler_host_1 = require("../../utils/typescript/compiler_host");
+const style_updater_1 = require("../../utils/style-updater");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const core_1 = require("@angular-devkit/core");
+const removedWithWarning = new Set(JSON.parse((0, fs_1.readFileSync)(__dirname + '/files/removed-vars.json', { encoding: 'utf-8' })));
+const removedWithValue = JSON.parse((0, fs_1.readFileSync)(__dirname + '/files/vars-with-value.json', { encoding: 'utf-8' }));
+const regexDefinition = /\s*(\$[a-z-]+)\s*:\s*([^;]+);\s*/g;
+const regexUse = /(#\{\s*)?(\$[a-z-]+)\}?/g;
+/**
+ * This migration
+ *
+ * @returns the Rule to migrate the classes
+ */
+function deletedSassVars() {
+    return async (tree, context) => {
+        const { buildPaths, testPaths } = await (0, project_tsconfig_paths_1.getProjectTsConfigPaths)(tree);
+        const basePath = process.cwd();
+        const allPaths = [...buildPaths, ...testPaths];
+        if (!allPaths.length) {
+            throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `deletedSassVars` migration.');
+        }
+        const varsMap = new Map();
+        for (const rename of removedWithValue) {
+            varsMap.set(rename.name, rename.value);
+        }
+        // first we search for re-declaration of the values... normally should be in main scss files
+        tree.visit((_, entry) => {
+            const path = entry?.path;
+            if (path && path.endsWith('.scss')) {
+                const styleText = entry.content.toString('utf-8');
+                let match;
+                while ((match = regexDefinition.exec(styleText)) !== null) {
+                    const varName = match[1];
+                    const varValue = match[2];
+                    if (varsMap.has(varName)) {
+                        // we found a re-declaration, we update the value in the map
+                        varsMap.set(varName, varValue);
+                    }
+                }
+                regexDefinition.lastIndex = 0; // reset regex state
+            }
+        });
+        const replaceStyleContent = (content, filePath) => {
+            return content
+                .replace(regexDefinition, (match, grp1) => (varsMap.has(grp1) ? '' : match))
+                .replace(regexUse, (match, _grp1, grp2) => {
+                if (varsMap.has(grp2)) {
+                    return varsMap.get(grp2);
+                }
+                else {
+                    if (removedWithWarning.has(grp2)) {
+                        context.logger.warn(`Sass var ${grp2} used in ${filePath} was removed in the new version of Design Factory.`);
+                    }
+                    return match;
+                }
+            });
+        };
+        const templateUpdater = new style_updater_1.StyleUpdater(tree, replaceStyleContent);
+        for (const tsconfigPath of allPaths) {
+            const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
+            const sourceFiles = program
+                .getSourceFiles()
+                .filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+            for (const sourceFile of sourceFiles) {
+                templateUpdater.update(sourceFile, program.getTypeChecker());
+            }
+        }
+        tree.visit((_, entry) => {
+            const path = entry?.path;
+            if (path && path.endsWith('.scss')) {
+                const normalizedPath = (0, core_1.normalize)(path_1.posix.resolve(path.toString().substring(1)));
+                if (templateUpdater['_analyzedFiles'].has(normalizedPath)) {
+                    return;
+                }
+                const styleText = entry.content.toString();
+                const modifiedText = replaceStyleContent(styleText, path.toString().substring(1));
+                if (modifiedText !== styleText) {
+                    tree.overwrite(path, modifiedText);
+                }
+                templateUpdater['_analyzedFiles'].add(normalizedPath);
+            }
+        });
+    };
+}

package/schematics/migrations/21_0_0/style-import-package/index.js

@@ -1,39 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = styleImportPackage;
+const schematics_1 = require("@angular-devkit/schematics");
 const workspace_1 = require("@schematics/angular/utility/workspace");
-const importRegex = /@import\s+(['"])(@design-factory\/design-factory\/[^'"]+)\1;/g;
-const replaceImport = (match, _quote, importPath) => {
-    const modifiedImport = transformImport(importPath);
-    if (modifiedImport) {
-        return `@import "${modifiedImport}";`;
-    }
-    return match;
-};
+const add_dependencies_1 = require("../../utils/add-dependencies");
+const importRegex = /(['"])(@design-factory\/design-factory\/[^'"]+)\1/g;
 const cssBundleRegex = /^@design-factory\/design-factory\/design-factory\.css$/;
 const scssBundleRegex = /^@design-factory\/design-factory\/design-factory(\.scss)?$/;
 const scssUtilitiesRegex = /^@design-factory\/design-factory\/design-factory-utilities(\.scss)?$/;
 const scssNamespaceRegex = /^@design-factory\/design-factory\/styles\/scss\/df-styles-namespace(\.scss)?$/;
 const scssFolderRegex = /^@design-factory\/design-factory\/styles\/scss\/(.*)$/;
-const transformImport = (importPath, forceExtension = false) => {
-    if (cssBundleRegex.test(importPath)) {
-        return `@design-factory/styles/bundle${forceExtension ? '.css' : ''}`;
-    }
-    if (scssBundleRegex.test(importPath)) {
-        return `@design-factory/styles/scss/bundle${forceExtension ? '.scss' : ''}`;
-    }
-    if (scssUtilitiesRegex.test(importPath)) {
-        return `@design-factory/styles/scss/utilities${forceExtension ? '.scss' : ''}`;
-    }
-    if (scssNamespaceRegex.test(importPath)) {
-        return `@design-factory/styles/scss/namespace${forceExtension ? '.scss' : ''}`;
-    }
-    const match = scssFolderRegex.exec(importPath);
-    if (match && match[1]) {
-        return `@design-factory/styles/scss/${match[1]}`;
-    }
-    return null;
-};
+const assetsFolderRegex = /^@design-factory\/design-factory\/assets\/(.*)$/;
+const scssTheme2023Regex = /@(import|use)\s+['"]@design-factory\/design-factory\/styles\/scss\/themes\/brand2023\/variables(\.scss)?['"][^\n]*\n?/;
 /**
  * This migration updates the global styles to import the correct package of design factory styles.
  *
@@ -41,24 +19,67 @@ const transformImport = (importPath, forceExtension = false) => {
  */
 function styleImportPackage() {
     return (tree, _context) => {
+        const forcePackages = new Set();
+        const useScss = () => {
+            forcePackages.add('bootstrap');
+            forcePackages.add('@agnos-ui/core-bootstrap');
+        };
+        const transformImport = (importPath, forceExtension = false) => {
+            if (cssBundleRegex.test(importPath)) {
+                return `@design-factory/styles/bundle${forceExtension ? '.css' : ''}`;
+            }
+            if (scssBundleRegex.test(importPath)) {
+                useScss();
+                return `@design-factory/styles/scss/bundle${forceExtension ? '.scss' : ''}`;
+            }
+            if (scssUtilitiesRegex.test(importPath)) {
+                useScss();
+                return `@design-factory/styles/scss/utilities${forceExtension ? '.scss' : ''}`;
+            }
+            if (scssNamespaceRegex.test(importPath)) {
+                useScss();
+                return `@design-factory/styles/scss/namespace${forceExtension ? '.scss' : ''}`;
+            }
+            const scssFolderMatch = scssFolderRegex.exec(importPath);
+            if (scssFolderMatch && scssFolderMatch[1]) {
+                useScss();
+                return `@design-factory/styles/scss/${scssFolderMatch[1]}`;
+            }
+            const assetsFolderMatch = assetsFolderRegex.exec(importPath);
+            if (assetsFolderMatch && assetsFolderMatch[1]) {
+                return `@design-factory/styles/assets/${assetsFolderMatch[1]}`;
+            }
+            return null;
+        };
+        const replaceImport = (match, quotes, importPath) => {
+            const modifiedImport = transformImport(importPath);
+            if (modifiedImport) {
+                return `${quotes}${modifiedImport}${quotes}`;
+            }
+            return match;
+        };
         tree.visit((_, entry) => {
             const path = entry?.path;
             if (path && (path.endsWith('.scss') || path.endsWith('.css'))) {
                 const styleText = entry.content.toString();
-                const modifiedText = styleText.replace(importRegex, replaceImport);
+                const modifiedText = styleText.replace(scssTheme2023Regex, '').replace(importRegex, replaceImport);
                 if (modifiedText !== styleText) {
                     tree.overwrite(path, modifiedText);
                 }
             }
         });
-        return (0, workspace_1.updateWorkspace)((workspace) => {
-            for (const project of workspace.projects.values()) {
-                for (const target of project.targets.values()) {
-                    if (Array.isArray(target.options?.['styles'])) {
-                        target.options['styles'] = target.options['styles'].map((style) => typeof style === 'string' ? (transformImport(style, true) ?? style) : style);
+        return (0, schematics_1.chain)([
+            (0, workspace_1.updateWorkspace)((workspace) => {
+                for (const project of workspace.projects.values()) {
+                    for (const target of project.targets.values()) {
+                        if (Array.isArray(target.options?.['styles'])) {
+                            target.options['styles'] = target.options['styles'].map((style) => typeof style === 'string' ? (transformImport(style, true) ?? style) : style);
+                        }
                     }
                 }
-            }
-        });
+            }),
+            (0, add_dependencies_1.addDependencies)(forcePackages),
+            (0, add_dependencies_1.install)()
+        ]);
     };
 }

package/schematics/migrations/21_0_0/toast-classes-21.0/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from '@angular-devkit/schematics';
+export default function toastClassesUpdate(): Rule;

package/schematics/migrations/21_0_0/toast-classes-21.0/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = toastClassesUpdate;
+const schematics_1 = require("@angular-devkit/schematics");
+const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
+const template_updater_1 = require("../../utils/template-updater");
+const compiler_host_1 = require("../../utils/typescript/compiler_host");
+const regexDismissible = /df-toast-dismissible/g;
+const regexBtnOutline = /(<ngb-toast(?:(?!df-toast-subtle)[\s\S])*?>[\s\S]*?<button[\s\S]*?class="[^"]*\b)(btn-outline-neutral)(\b[^"]*)/g;
+const regexBtnClose = /(<ngb-toast[\s\S]*?<button[\s\S]*?class="[^"]*\b)(btn-close)(\b[^"]*)/g;
+function replaceHtmlContent(content) {
+    content = content.replace(regexDismissible, ''); //remove df-toast-dismissible class
+    content = content.replace(regexBtnOutline, (_, g1, _1, g3) => `${g1}df-btn-outline-neutral-mirror${g3}`); // uses appropriate class on subtale toast
+    content = content.replace(regexBtnClose, (_, g1, _1, g3) => `${g1}df-btn-icononly fal fa-xmark ms-5${g3}`); //removes btn close
+    return content;
+}
+function toastClassesUpdate() {
+    return async (tree) => {
+        const { buildPaths, testPaths } = await (0, project_tsconfig_paths_1.getProjectTsConfigPaths)(tree);
+        const basePath = process.cwd();
+        const allPaths = [...buildPaths, ...testPaths];
+        if (!allPaths.length) {
+            throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `ToastClassesUpdate` migration.');
+        }
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContent);
+        for (const tsconfigPath of allPaths) {
+            const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
+            const sourceFiles = program
+                .getSourceFiles()
+                .filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+            for (const sourceFile of sourceFiles) {
+                templateUpdater.update(sourceFile, program.getTypeChecker());
+            }
+        }
+    };
+}

package/schematics/migrations/migration.json

@@ -80,6 +80,21 @@
       "description": "The package from which Design Factory styles are imported has changed.",
       "version": "21.0.0",
       "factory": "./21_0_0/style-import-package"
+    },
+    "ag-grid-zebra-header-class": {
+      "description": "The class `df-table-white-header` is replaced by `df-table-neutral-alt-header`",
+      "version": "21.0.0",
+      "factory": "./21_0_0/ag-grid-neutral-header"
+    },
+    "toast-classes-21.0": {
+      "description": "As of Design Factory version 21, some css classes for the toast have been renamed.",
+      "version": "21.0.0",
+      "factory": "./21_0_0/toast-classes-21.0"
+    },
+    "deleted-sass-vars": {
+      "description": "As of Design Factory version 21, some deprecated sass variables have been removed. This migration helps you identify and fix usages of these variables in your codebase.",
+      "version": "21.0.0",
+      "factory": "./21_0_0/deleted-sass-vars"
     }
   }
 }

package/schematics/migrations/utils/add-dependencies.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare function addDependencies(forcePackages?: Set<string>): Rule;
+export declare function install(): Rule;

package/schematics/migrations/utils/add-dependencies.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addDependencies = addDependencies;
+exports.install = install;
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+const dependencies_1 = require("@schematics/angular/utility/dependencies");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const listPeerDependencies = function* (pkgJson) {
+    for (const [name, version] of Object.entries(pkgJson.peerDependencies)) {
+        yield { name, version, required: !pkgJson['peerDependenciesMeta']?.[name]?.optional };
+    }
+};
+// Explicitly add the peer dependencies as main dependencies.
+function addDependencies(forcePackages) {
+    return (tree) => {
+        const treePackageJson = JSON.parse(tree.read('package.json').toString('utf-8'));
+        const dfPackageJson = JSON.parse((0, fs_1.readFileSync)((0, path_1.resolve)(__dirname, '..', '..', '..', 'package.json'), { encoding: 'utf-8' }));
+        const dfStylesPackageJson = JSON.parse((0, fs_1.readFileSync)((0, path_1.resolve)(__dirname, '..', '..', '..', '..', 'styles', 'package.json'), { encoding: 'utf-8' }));
+        for (const { name, version, required } of [
+            ...listPeerDependencies(dfStylesPackageJson),
+            ...listPeerDependencies(dfPackageJson)
+        ]) {
+            if (required || !!treePackageJson.dependencies?.[name] || forcePackages?.has(name)) {
+                (0, dependencies_1.addPackageJsonDependency)(tree, {
+                    type: dependencies_1.NodeDependencyType.Default,
+                    name,
+                    version,
+                    overwrite: !name.startsWith('@angular/')
+                });
+            }
+        }
+    };
+}
+// Schedule a package install, also installing the dependencies set up in the above step.
+function install() {
+    return (tree, context) => {
+        context.addTask(new tasks_1.NodePackageInstallTask());
+        return tree;
+    };
+}

package/schematics/migrations/utils/component-resource-collector.d.ts

@@ -19,6 +19,8 @@ export interface ResolvedResource {
     inline: boolean;
     /** Path to the file that contains this resource. */
     filePath: string;
+    /** Absolute path to the file that contains this resource. */
+    absFilePath: string;
     /**
      * Gets the character and line of a given position index in the resource.
      * If the resource is declared inline within a TypeScript source file, the line and
@@ -39,6 +41,6 @@ export declare class ComponentResourceCollector {
     visitNode(node: ts.Node): void;
     private _visitClassDeclaration;
     /** Resolves an external stylesheet by reading its content and computing line mappings. */
-    resolveExternalStylesheet(filePath: string, container: ts.ClassDeclaration | null): ResolvedResource | null;
+    resolveExternalStylesheet(filePath: string, absFilePath: string, container: ts.ClassDeclaration | null): ResolvedResource | null;
     private _trackExternalStylesheet;
 }

package/schematics/migrations/utils/component-resource-collector.js

@@ -76,6 +76,7 @@ class ComponentResourceCollector {
                         const content = stripBom(el.getText().slice(1, -1));
                         this.resolvedStylesheets.push({
                             filePath,
+                            absFilePath,
                             container: node,
                             content,
                             inline: true,
@@ -93,6 +94,7 @@ class ComponentResourceCollector {
                 const templateStartIdx = property.initializer.getStart() + 1;
                 this.resolvedTemplates.push({
                     filePath,
+                    absFilePath,
                     container: node,
                     content: property.initializer.getText().slice(1, -1),
                     inline: true,
@@ -124,6 +126,7 @@ class ComponentResourceCollector {
                     const lineStartsMap = (0, line_mappings_1.computeLineStartsMap)(fileContent);
                     this.resolvedTemplates.push({
                         filePath: templatePath,
+                        absFilePath: absTemplatePath,
                         container: node,
                         content: fileContent,
                         inline: false,
@@ -135,7 +138,7 @@ class ComponentResourceCollector {
         });
     }
     /** Resolves an external stylesheet by reading its content and computing line mappings. */
-    resolveExternalStylesheet(filePath, container) {
+    resolveExternalStylesheet(filePath, absFilePath, container) {
         // Strip the BOM to avoid issues with the Sass compiler. See:
         // https://github.com/angular/components/issues/24227#issuecomment-1200934258
         const fileContent = stripBom(this.tree.readText(filePath) || '');
@@ -144,7 +147,8 @@ class ComponentResourceCollector {
         }
         const lineStartsMap = (0, line_mappings_1.computeLineStartsMap)(fileContent);
         return {
-            filePath: filePath,
+            filePath,
+            absFilePath,
             container: container,
             content: fileContent,
             inline: false,
@@ -153,8 +157,9 @@ class ComponentResourceCollector {
         };
     }
     _trackExternalStylesheet(sourceFileDirPath, node, container) {
-        const stylesheetPath = path_1.posix.relative((0, core_1.normalize)(process.cwd()), (0, core_1.normalize)(path_1.posix.resolve('/', (0, core_1.normalize)(sourceFileDirPath), (0, core_1.normalize)(node.text))));
-        const stylesheet = this.resolveExternalStylesheet(stylesheetPath, container);
+        const absFilePath = (0, core_1.normalize)(path_1.posix.resolve('/', (0, core_1.normalize)(sourceFileDirPath), (0, core_1.normalize)(node.text)));
+        const stylesheetPath = path_1.posix.relative((0, core_1.normalize)(process.cwd()), absFilePath);
+        const stylesheet = this.resolveExternalStylesheet(stylesheetPath, absFilePath, container);
         if (stylesheet) {
             this.resolvedStylesheets.push(stylesheet);
         }

package/schematics/migrations/utils/style-updater.js

@@ -25,7 +25,7 @@ class StyleUpdater {
         };
         visitNodeAndCollectResources(file);
         for (const styleSheet of resourceCollector.resolvedStylesheets) {
-            if (styleSheet.inline || !this._analyzedFiles.has(styleSheet.filePath)) {
+            if (styleSheet.inline || !this._analyzedFiles.has(styleSheet.absFilePath)) {
                 const content = this.replaceContent(styleSheet.content, styleSheet.filePath);
                 if (content !== styleSheet.content) {
                     const recorder = this.tree.beginUpdate(styleSheet.filePath);
@@ -33,7 +33,7 @@ class StyleUpdater {
                     recorder.insertRight(styleSheet.start, content);
                     this.tree.commitUpdate(recorder);
                 }
-                this._analyzedFiles.add(styleSheet.filePath);
+                this._analyzedFiles.add(styleSheet.absFilePath);
             }
         }
     }

package/schematics/migrations/utils/template-updater.js

@@ -25,7 +25,7 @@ class TemplateUpdater {
         };
         visitNodeAndCollectResources(file);
         for (const template of resourceCollector.resolvedTemplates) {
-            if (template.inline || !this._analyzedFiles.has(template.filePath)) {
+            if (template.inline || !this._analyzedFiles.has(template.absFilePath)) {
                 const content = this.replaceContent(template.content);
                 if (content !== template.content) {
                     const recorder = this.tree.beginUpdate(template.filePath);
@@ -33,7 +33,7 @@ class TemplateUpdater {
                     recorder.insertRight(template.start, content);
                     this.tree.commitUpdate(recorder);
                 }
-                this._analyzedFiles.add(template.filePath);
+                this._analyzedFiles.add(template.absFilePath);
             }
         }
     }

package/schematics/ng-add/index.js

@@ -3,32 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ngAdd;
 const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
-const dependencies_1 = require("@schematics/angular/utility/dependencies");
 const workspace_1 = require("@schematics/angular/utility/workspace");
-const path_1 = require("path");
-const fs_1 = require("fs");
-// Explicitly add the peer dependencies as main dependencies.
-function addDependencies() {
-    return (tree) => {
-        const dfDependencies = JSON.parse((0, fs_1.readFileSync)((0, path_1.resolve)(__dirname, '..', '..', 'package.json'), { encoding: 'utf-8' })).peerDependencies;
-        for (const dependency in dfDependencies) {
-            if (Object.prototype.hasOwnProperty.call(dfDependencies, dependency)) {
-                (0, dependencies_1.addPackageJsonDependency)(tree, {
-                    type: dependencies_1.NodeDependencyType.Default,
-                    name: dependency,
-                    version: dfDependencies[dependency]
-                });
-            }
-        }
-    };
-}
-// Schedule a package install, also installing the dependencies set up in the above step.
-function install() {
-    return (tree, context) => {
-        context.addTask(new tasks_1.NodePackageInstallTask());
-        return tree;
-    };
-}
+const add_dependencies_1 = require("../migrations/utils/add-dependencies");
 // Add DF styles to the main styles file. If no styles.scss found, add DF styles to the workspace.
 function addDFStyles(options) {
     return async (tree, context) => {
@@ -60,6 +36,6 @@ ${foundCss ? '@import' : '@use'} '@design-factory/styles/bundle';
 function ngAdd(options) {
     return (_tree, context) => {
         context.addTask(new tasks_1.RunSchematicTask('@angular/localize', 'ng-add', options.project ? { project: options.project } : {}));
-        return (0, schematics_1.chain)([addDependencies(), install(), addDFStyles(options)]);
+        return (0, schematics_1.chain)([(0, add_dependencies_1.addDependencies)(), (0, add_dependencies_1.install)(), addDFStyles(options)]);
     };
 }

package/types/design-factory.d.ts

@@ -1245,6 +1245,7 @@ interface DfStepperStep {
     ariaControl: string;
     warningLabel?: string;
     optionalLabel?: string;
+    id: string;
 }
 type DfStepType = 'warning' | 'completed' | 'future' | 'visited';
 interface DfStepperNormalizedStep extends DfStepperStep {