@o3r/design 10.2.0-prerelease.9 → 10.3.0-prerelease.0

package/README.md

@@ -9,6 +9,9 @@ This package is an [Otter Framework Module](https://github.com/AmadeusITGroup/ot
 
 ## Description
 
+[![Stable Version](https://img.shields.io/npm/v/@o3r/design?style=for-the-badge)](https://www.npmjs.com/package/@o3r/design)
+[![Bundle Size](https://img.shields.io/bundlephobia/min/@o3r/design?color=green&style=for-the-badge)](https://www.npmjs.com/package/@o3r/design)
+
 Set of tools to generate CSS themes and [Metadata](https://github.com/AmadeusITGroup/otter/tree/main/docs/cms-adapters/CMS_ADAPTERS.md) based on the [Design Token Specifications](https://design-tokens.github.io/community-group/format/).
 
 ## How to install

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@o3r/design",
-  "version": "10.2.0-prerelease.9",
+  "version": "10.3.0-prerelease.0",
   "publishConfig": {
     "access": "public"
   },
+  "typings": "./src/public_api.d.ts",
   "description": "A design framework to generate theme on an Otter application based on Design Tokens.",
   "keywords": [
     "design",
@@ -48,15 +49,15 @@
     "jsonschema": "~1.4.1",
     "minimatch": "~9.0.3",
     "minimist": "^1.2.6",
-    "tslib": "^2.5.3"
+    "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@o3r/core": "^10.2.0-prerelease.9",
-    "@o3r/schematics": "^10.2.0-prerelease.9",
-    "@o3r/styling": "^10.2.0-prerelease.9",
+    "@o3r/core": "^10.3.0-prerelease.0",
+    "@o3r/schematics": "^10.3.0-prerelease.0",
+    "@o3r/styling": "^10.3.0-prerelease.0",
     "chokidar": "^3.5.2",
     "globby": "^11.1.0",
-    "sass": "~1.71.0"
+    "sass": "~1.74.0"
   },
   "peerDependenciesMeta": {
     "@o3r/core": {
@@ -79,60 +80,60 @@
     }
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.1702.0",
-    "@angular-devkit/build-angular": "~17.2.0",
-    "@angular-devkit/core": "~17.2.0",
-    "@angular-devkit/schematics": "~17.2.0",
-    "@angular-eslint/eslint-plugin": "~17.2.0",
-    "@angular/animations": "~17.2.0",
-    "@angular/cli": "~17.2.0",
-    "@angular/common": "~17.2.0",
-    "@angular/compiler": "~17.2.0",
-    "@angular/compiler-cli": "~17.2.0",
-    "@angular/core": "~17.2.0",
-    "@angular/platform-browser": "~17.2.0",
-    "@angular/platform-browser-dynamic": "~17.2.0",
+    "@angular-devkit/architect": "~0.1703.0",
+    "@angular-devkit/build-angular": "~17.3.0",
+    "@angular-devkit/core": "~17.3.0",
+    "@angular-devkit/schematics": "~17.3.0",
+    "@angular-eslint/eslint-plugin": "~17.3.0",
+    "@angular/animations": "~17.3.0",
+    "@angular/cli": "~17.3.0",
+    "@angular/common": "~17.3.0",
+    "@angular/compiler": "~17.3.0",
+    "@angular/compiler-cli": "~17.3.0",
+    "@angular/core": "~17.3.0",
+    "@angular/platform-browser": "~17.3.0",
+    "@angular/platform-browser-dynamic": "~17.3.0",
     "@babel/core": "~7.24.0",
-    "@babel/preset-typescript": "~7.23.0",
+    "@babel/preset-typescript": "~7.24.0",
     "@compodoc/compodoc": "^1.1.19",
-    "@nx/eslint": "~18.0.2",
-    "@nx/eslint-plugin": "~18.0.2",
-    "@nx/jest": "~18.0.2",
-    "@nx/js": "~18.0.2",
-    "@o3r/build-helpers": "^10.2.0-prerelease.9",
-    "@o3r/core": "^10.2.0-prerelease.9",
-    "@o3r/eslint-plugin": "^10.2.0-prerelease.9",
-    "@o3r/schematics": "^10.2.0-prerelease.9",
-    "@o3r/styling": "^10.2.0-prerelease.9",
-    "@o3r/test-helpers": "^10.2.0-prerelease.9",
-    "@schematics/angular": "~17.2.0",
+    "@nx/eslint": "~18.2.0",
+    "@nx/eslint-plugin": "~18.2.0",
+    "@nx/jest": "~18.2.0",
+    "@nx/js": "~18.2.0",
+    "@o3r/build-helpers": "^10.3.0-prerelease.0",
+    "@o3r/core": "^10.3.0-prerelease.0",
+    "@o3r/eslint-plugin": "^10.3.0-prerelease.0",
+    "@o3r/schematics": "^10.3.0-prerelease.0",
+    "@o3r/styling": "^10.3.0-prerelease.0",
+    "@o3r/test-helpers": "^10.3.0-prerelease.0",
+    "@schematics/angular": "~17.3.0",
     "@stylistic/eslint-plugin-ts": "^1.5.4",
     "@types/jest": "~29.5.2",
     "@types/minimist": "^1.2.2",
     "@types/node": "^20.0.0",
     "@types/semver": "^7.3.13",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "chokidar": "^3.5.2",
     "cpy-cli": "^5.0.0",
-    "eslint": "^8.42.0",
-    "eslint-import-resolver-node": "^0.3.4",
+    "eslint": "^8.57.0",
+    "eslint-import-resolver-node": "^0.3.9",
     "eslint-plugin-jest": "~27.9.0",
-    "eslint-plugin-jsdoc": "~48.2.0",
+    "eslint-plugin-jsdoc": "~48.2.1",
     "eslint-plugin-prefer-arrow": "~1.2.3",
-    "eslint-plugin-unicorn": "^51.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "globby": "^11.1.0",
     "jest": "~29.7.0",
     "jest-junit": "~16.0.0",
     "jsonc-eslint-parser": "~2.4.0",
     "jsonschema": "~1.4.1",
-    "nx": "~18.0.2",
+    "nx": "~18.2.0",
     "rxjs": "^7.8.1",
-    "sass": "~1.71.0",
-    "ts-jest": "~29.1.1",
-    "ts-node": "~10.9.1",
+    "sass": "~1.74.0",
+    "ts-jest": "~29.1.2",
+    "ts-node": "~10.9.2",
     "type-fest": "^4.10.2",
-    "typescript": "~5.3.3",
+    "typescript": "~5.4.2",
     "zone.js": "~0.14.2"
   },
   "engines": {

package/schematics/design-token-to-component/index.d.ts

@@ -9,5 +9,5 @@ export declare function ngAddDesignTokenFn(options: NgAddDesignTokenSchematicsSc
  * Add Design Token to an existing component
  * @param options
  */
-export declare const ngAddDesignToken: (options: NgAddDesignTokenSchematicsSchema) => Rule;
+export declare const ngAddDesignToken: (options: NgAddDesignTokenSchematicsSchema) => () => Promise<Rule>;
 //# sourceMappingURL=index.d.ts.map

package/schematics/design-token-to-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../schematics/design-token-to-component/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EAGL,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAEjE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,gCAAgC,GAAG,IAAI,CAelF;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,qDAA4D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../schematics/design-token-to-component/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EAGL,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,gCAAgC,GAAG,IAAI,CAelF;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,YAAa,gCAAgC,wBAWzE,CAAC"}

package/schematics/design-token-to-component/index.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAddDesignToken = exports.ngAddDesignTokenFn = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
-const schematics_2 = require("@o3r/schematics");
 const node_path_1 = require("node:path");
 /**
  * Add Design Token to an existing component
@@ -27,5 +26,18 @@ exports.ngAddDesignTokenFn = ngAddDesignTokenFn;
  * Add Design Token to an existing component
  * @param options
  */
-exports.ngAddDesignToken = (0, schematics_2.createSchematicWithMetricsIfInstalled)(ngAddDesignTokenFn);
+const ngAddDesignToken = (options) => async () => {
+    let createSchematicWithMetrics;
+    try {
+        ({ createSchematicWithMetricsIfInstalled: createSchematicWithMetrics } = await Promise.resolve().then(() => require('@o3r/schematics')));
+    }
+    catch {
+        // No @o3r/schematics detected
+    }
+    if (!createSchematicWithMetrics) {
+        return ngAddDesignTokenFn(options);
+    }
+    return createSchematicWithMetrics(ngAddDesignTokenFn)(options);
+};
+exports.ngAddDesignToken = ngAddDesignToken;
 //# sourceMappingURL=index.js.map

package/schematics/ng-add/index.d.ts

@@ -4,5 +4,10 @@ import type { NgAddSchematicsSchema } from './schema';
  * Add Otter design to an Angular Project
  * @param options
  */
-export declare function ngAdd(options: NgAddSchematicsSchema): Rule;
+export declare function ngAddFn(options: NgAddSchematicsSchema): Rule;
+/**
+ * Add Otter design to an Angular Project
+ * @param options
+ */
+export declare const ngAdd: (options: NgAddSchematicsSchema) => Rule;
 //# sourceMappingURL=index.d.ts.map

package/schematics/ng-add/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAIpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKtD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAwB1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAGpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAWtD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CA2B5D;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,YAAa,qBAAqB,KAAG,IAGtD,CAAC"}

package/schematics/ng-add/index.js

@@ -1,40 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ngAdd = void 0;
+exports.ngAdd = exports.ngAddFn = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
 const register_generate_css_1 = require("./register-generate-css");
 const extract_token_1 = require("../extract-token");
-const schematics_2 = require("@o3r/schematics");
 const path = require("node:path");
 const packageJsonPath = path.resolve(__dirname, '..', '..', 'package.json');
+const reportMissingSchematicsDep = (logger) => (reason) => {
+    logger.error(`[ERROR]: Adding @o3r/design has failed.
+You need to install '@o3r/schematics' to be able to use the o3r apis-manager package. Please run 'ng add @o3r/schematics'.`);
+    throw reason;
+};
 /**
  * Add Otter design to an Angular Project
  * @param options
  */
-function ngAdd(options) {
+function ngAddFn(options) {
     /* ng add rules */
-    return (tree) => (0, schematics_1.chain)([
-        (0, register_generate_css_1.registerGenerateCssBuilder)(),
-        (0, schematics_2.setupSchematicsDefaultParams)({
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            '@o3r/core:component': {
-                useOtterDesignToken: true
-            },
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            '@o3r/core:component-presenter': {
-                useOtterDesignToken: true
-            },
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            '*:*': {
-                useOtterDesignToken: true
-            }
-        }),
-        (0, schematics_2.setupDependencies)({
-            projectName: options.projectName,
-            dependencies: (0, schematics_2.getPackageInstallConfig)(packageJsonPath, tree, options.projectName, false, !!options.exactO3rVersion)
-        }),
-        options.extractDesignToken ? (0, extract_token_1.extractToken)({ componentFilePatterns: ['**/*.scss'], includeTags: true }) : schematics_1.noop
-    ]);
+    return async (tree) => {
+        const { getPackageInstallConfig, setupDependencies, setupSchematicsDefaultParams } = await Promise.resolve().then(() => require('@o3r/schematics'));
+        return (0, schematics_1.chain)([
+            (0, register_generate_css_1.registerGenerateCssBuilder)(),
+            setupSchematicsDefaultParams({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                '@o3r/core:component': {
+                    useOtterDesignToken: true
+                },
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                '@o3r/core:component-presenter': {
+                    useOtterDesignToken: true
+                },
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                '*:*': {
+                    useOtterDesignToken: true
+                }
+            }),
+            setupDependencies({
+                projectName: options.projectName,
+                dependencies: getPackageInstallConfig(packageJsonPath, tree, options.projectName, false, !!options.exactO3rVersion)
+            }),
+            options.extractDesignToken ? (0, extract_token_1.extractToken)({ componentFilePatterns: ['**/*.scss'], includeTags: true }) : schematics_1.noop
+        ]);
+    };
 }
+exports.ngAddFn = ngAddFn;
+/**
+ * Add Otter design to an Angular Project
+ * @param options
+ */
+const ngAdd = (options) => async (_, { logger }) => {
+    const { createSchematicWithMetricsIfInstalled } = await Promise.resolve().then(() => require('@o3r/schematics')).catch(reportMissingSchematicsDep(logger));
+    return createSchematicWithMetricsIfInstalled(ngAddFn)(options);
+};
 exports.ngAdd = ngAdd;
 //# sourceMappingURL=index.js.map

package/schematics/ng-add/register-generate-css/register-task.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"register-task.d.ts","sourceRoot":"","sources":["../../../../schematics/ng-add/register-generate-css/register-task.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqE,KAAK,IAAI,EAAiB,MAAM,4BAA4B,CAAC;AAKzI;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,iBAAkB,MAAM,wBAA8B,IAyD5F,CAAC"}
+{"version":3,"file":"register-task.d.ts","sourceRoot":"","sources":["../../../../schematics/ng-add/register-generate-css/register-task.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqE,KAAK,IAAI,EAAiB,MAAM,4BAA4B,CAAC;AAIzI;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,iBAAkB,MAAM,wBAA8B,IA0D5F,CAAC"}

package/schematics/ng-add/register-generate-css/register-task.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerGenerateCssBuilder = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
-const schematics_2 = require("@o3r/schematics");
 const node_path_1 = require("node:path");
 /**
  * Register the Design Token CSS generator
@@ -10,8 +9,9 @@ const node_path_1 = require("node:path");
  * @param taskName name of the task to generate
  */
 const registerGenerateCssBuilder = (projectName, taskName = 'generate-css') => {
-    const registerBuilderRule = (tree, { logger }) => {
-        const workspaceProject = projectName ? (0, schematics_2.getWorkspaceConfig)(tree)?.projects[projectName] : undefined;
+    const registerBuilderRule = async (tree, { logger }) => {
+        const { getWorkspaceConfig, registerBuilder } = await Promise.resolve().then(() => require('@o3r/schematics'));
+        const workspaceProject = projectName ? getWorkspaceConfig(tree)?.projects[projectName] : undefined;
         const srcBasePath = workspaceProject?.sourceRoot || (workspaceProject?.root ? node_path_1.posix.resolve(workspaceProject.root, 'src') : '');
         const themeFile = node_path_1.posix.resolve(srcBasePath, 'style', 'theme.scss');
         const taskOptions = {
@@ -30,31 +30,32 @@ const registerGenerateCssBuilder = (projectName, taskName = 'generate-css') => {
         };
         if (!workspaceProject) {
             logger.warn(`No angular.json found, the task ${taskName} will not be created`);
-            return tree;
+            return;
         }
-        (0, schematics_2.registerBuilder)(workspaceProject, taskName, taskParameters);
-        return tree;
+        registerBuilder(workspaceProject, taskName, taskParameters);
     };
-    const generateTemplateRule = (tree, context) => {
-        const workspaceProject = projectName ? (0, schematics_2.getWorkspaceConfig)(tree)?.projects[projectName] : undefined;
+    const generateTemplateRule = async (tree) => {
+        const { getWorkspaceConfig } = await Promise.resolve().then(() => require('@o3r/schematics'));
+        const workspaceProject = projectName ? getWorkspaceConfig(tree)?.projects[projectName] : undefined;
         const srcBasePath = workspaceProject?.sourceRoot || (workspaceProject?.root ? node_path_1.posix.resolve(workspaceProject.root, 'src') : '');
         const themeFolder = node_path_1.posix.resolve(srcBasePath, 'style');
         const rule = (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)('./templates'), [
             (0, schematics_1.template)({}),
             (0, schematics_1.move)(themeFolder),
             (0, schematics_1.renameTemplateFiles)()
-        ]), schematics_1.MergeStrategy.Overwrite)(tree, context);
+        ]), schematics_1.MergeStrategy.Overwrite);
         return rule;
     };
-    const importTheme = (tree, context) => {
-        const workspaceProject = projectName ? (0, schematics_2.getWorkspaceConfig)(tree)?.projects[projectName] : undefined;
+    const importTheme = async (tree, context) => {
+        const { getWorkspaceConfig } = await Promise.resolve().then(() => require('@o3r/schematics'));
+        const workspaceProject = projectName ? getWorkspaceConfig(tree)?.projects[projectName] : undefined;
         const srcBasePath = workspaceProject?.sourceRoot || (workspaceProject?.root ? node_path_1.posix.resolve(workspaceProject.root, 'src') : '');
         const styleFile = node_path_1.posix.resolve(srcBasePath, 'styles.scss');
         if (!tree.exists(styleFile)) {
             context.logger.warn(`The theme was not updated as ${styleFile} was not found`);
-            return tree;
+            return;
         }
-        return tree.overwrite(styleFile, '@import "./style/theme.scss";\n' + tree.readText(styleFile));
+        tree.overwrite(styleFile, '@import "./style/theme.scss";\n' + tree.readText(styleFile));
     };
     return (0, schematics_1.chain)([
         registerBuilderRule,