@o3r/design 10.0.0-prerelease.2 → 10.0.0-prerelease.21

package/collection.json

@@ -19,6 +19,14 @@
       "description": "Extract the Design Token specification from SCSS",
       "factory": "./schematics/extract-token/index#extractToken",
       "schema": "./schematics/extract-token/schema.json"
+    },
+    "design-token-to-component": {
+      "description": "Add design token to an Otter component",
+      "factory": "./schematics/design-token-to-component/index#ngAddDesignToken",
+      "schema": "./schematics/design-token-to-component/schema.json",
+      "aliases": [
+        "add-design-token"
+      ]
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@o3r/design",
-  "version": "10.0.0-prerelease.2",
+  "version": "10.0.0-prerelease.21",
   "description": "A design framework to generate theme on an Otter application based on Design Tokens.",
   "keywords": [
     "design",
@@ -46,13 +46,13 @@
     "tslib": "^2.5.3"
   },
   "peerDependencies": {
-    "@o3r/core": "^10.0.0-prerelease.2",
-    "@o3r/schematics": "^10.0.0-prerelease.2",
-    "@o3r/styling": "^10.0.0-prerelease.2",
+    "@o3r/core": "^10.0.0-prerelease.21",
+    "@o3r/schematics": "^10.0.0-prerelease.21",
+    "@o3r/styling": "^10.0.0-prerelease.21",
     "chokidar": "^3.5.2",
     "globby": "^11.1.0",
     "minimatch": "~9.0.3",
-    "sass": "~1.69.0"
+    "sass": "~1.70.0"
   },
   "peerDependenciesMeta": {
     "@o3r/core": {
@@ -94,12 +94,12 @@
     "@nx/eslint-plugin": "~17.2.0",
     "@nx/jest": "~17.2.0",
     "@nx/js": "~17.2.0",
-    "@o3r/build-helpers": "^10.0.0-prerelease.2",
-    "@o3r/core": "^10.0.0-prerelease.2",
-    "@o3r/eslint-plugin": "^10.0.0-prerelease.2",
-    "@o3r/schematics": "^10.0.0-prerelease.2",
-    "@o3r/styling": "^10.0.0-prerelease.2",
-    "@o3r/test-helpers": "^10.0.0-prerelease.2",
+    "@o3r/build-helpers": "^10.0.0-prerelease.21",
+    "@o3r/core": "^10.0.0-prerelease.21",
+    "@o3r/eslint-plugin": "^10.0.0-prerelease.21",
+    "@o3r/schematics": "^10.0.0-prerelease.21",
+    "@o3r/styling": "^10.0.0-prerelease.21",
+    "@o3r/test-helpers": "^10.0.0-prerelease.21",
     "@schematics/angular": "~17.0.3",
     "@types/jest": "~29.5.2",
     "@types/minimist": "^1.2.2",
@@ -123,7 +123,7 @@
     "minimatch": "~9.0.3",
     "nx": "~17.2.0",
     "rxjs": "^7.8.1",
-    "sass": "~1.69.5",
+    "sass": "~1.70.0",
     "ts-jest": "~29.1.1",
     "ts-node": "~10.9.1",
     "type-fest": "^4.3.1",

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

@@ -0,0 +1,13 @@
+import { Rule } from '@angular-devkit/schematics';
+import type { NgAddDesignTokenSchematicsSchema } from './schema';
+/**
+ * Add Design Token to an existing component
+ * @param options
+ */
+export declare function ngAddDesignTokenFn(options: NgAddDesignTokenSchematicsSchema): Rule;
+/**
+ * Add Design Token to an existing component
+ * @param options
+ */
+export declare const ngAddDesignToken: (opts: NgAddDesignTokenSchematicsSchema) => Rule;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,kDAA4D,CAAC"}

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

@@ -0,0 +1,31 @@
+"use strict";
+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
+ * @param options
+ */
+function ngAddDesignTokenFn(options) {
+    const fileName = (0, node_path_1.basename)(options.path.endsWith('.json') ? options.path : `${options.path}.json`);
+    const name = fileName.slice(0, fileName.indexOf('.') > -1 ? fileName.indexOf('.') : undefined);
+    const createDesignTokenFilesRule = (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)('./templates'), [
+        (0, schematics_1.template)({
+            name,
+            fileName,
+            stylingFile: options.stylePath ? (0, node_path_1.relative)((0, node_path_1.dirname)(options.path), options.stylePath) : undefined
+        }),
+        (0, schematics_1.renameTemplateFiles)(),
+        (0, schematics_1.move)((0, node_path_1.dirname)(options.path))
+    ]), schematics_1.MergeStrategy.Overwrite);
+    return createDesignTokenFilesRule;
+}
+exports.ngAddDesignTokenFn = ngAddDesignTokenFn;
+/**
+ * Add Design Token to an existing component
+ * @param options
+ */
+exports.ngAddDesignToken = (0, schematics_2.createSchematicWithMetricsIfInstalled)(ngAddDesignTokenFn);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,8 @@
+import type { SchematicOptionObject } from '@o3r/schematics';
+export interface NgAddDesignTokenSchematicsSchema extends SchematicOptionObject {
+    /** Path to the component's design token file */
+    path: string;
+    /** Path to the Style file to update */
+    stylePath?: string;
+}
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../schematics/design-token-to-component/schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,gCAAiC,SAAQ,qBAAqB;IAC7E,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IAEb,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/schematics/design-token-to-component/schema.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "NgAddDesignTokenSchematicsSchema",
+  "title": "Add Otter Design Token to an existing component",
+  "description": "Add Otter Design Token to an existing component",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Path to the component's Design Token specification file"
+    },
+    "stylePath": {
+      "type": "string",
+      "description": "Path to the Style file to update"
+    }
+  },
+  "additionalProperties": true,
+  "required": [
+    "path"
+  ]
+}

package/schematics/design-token-to-component/templates/__fileName__.template

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://raw.githubusercontent.com/AmadeusITGroup/otter/main/packages/@o3r/design/schemas/design-token.schema.json",
+  "<%= name %>": {
+    "$extensions": {
+      <% if (stylingFile) { %>"o3rTargetFile": "<%= stylingFile %>"<% } %>
+    }
+  }
+}

package/schematics/generate-css/schema.json

@@ -1,8 +1,8 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema",
-  "$id": "ngAddSchematicsSchema",
-  "title": "Add Otter Design",
-  "description": "ngAdd Otter Design",
+  "$id": "generateCssSchematicsSchema",
+  "title": "Generate CSS from design token",
+  "description": "Generate CSS from design token",
   "properties": {
     "designTokenFilePatterns": {
       "description": "Path patterns to the Design Token JSON files",

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

@@ -1,7 +1,8 @@
 import { type Rule } from '@angular-devkit/schematics';
+import type { NgAddSchematicsSchema } from './schema';
 /**
  * Add Otter design to an Angular Project
  * @param options
  */
-export declare function ngAdd(): Rule;
+export declare function 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,EAAS,KAAK,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAI9D;;;GAGG;AACH,wBAAgB,KAAK,IAAI,IAAI,CAM5B"}
+{"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;AAEtD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAoB1D"}

package/schematics/ng-add/index.js

@@ -4,15 +4,30 @@ exports.ngAdd = 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");
 /**
  * Add Otter design to an Angular Project
  * @param options
  */
-function ngAdd() {
+function ngAdd(options) {
     /* ng add rules */
     return (0, schematics_1.chain)([
         (0, register_generate_css_1.registerGenerateCssBuilder)(),
-        (0, _extract_token_1.extractToken)({ componentFilePatterns: ['**/*.scss'], includeTags: true })
+        (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
+            }
+        }),
+        options.extractDesignToken ? (0, _extract_token_1.extractToken)({ componentFilePatterns: ['**/*.scss'], includeTags: true }) : schematics_1.noop
     ]);
 }
 exports.ngAdd = ngAdd;

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,IAmD5F,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;AAKzI;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,iBAAkB,MAAM,wBAA8B,IAyD5F,CAAC"}

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

@@ -14,7 +14,7 @@ const registerGenerateCssBuilder = (projectName, taskName = 'generate-css') => {
         const workspaceProject = projectName ? (0, schematics_2.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 taskParameters = {
+        const taskOptions = {
             defaultStyleFile: themeFile,
             renderPrivateVariableTo: 'sass',
             designTokenFilePatterns: [
@@ -22,6 +22,12 @@ const registerGenerateCssBuilder = (projectName, taskName = 'generate-css') => {
                 `${node_path_1.posix.resolve(srcBasePath, '**', '*.theme.json')}`
             ]
         };
+        const taskParameters = {
+            options: taskOptions,
+            configuration: {
+                watch: { watch: true }
+            }
+        };
         if (!workspaceProject) {
             logger.warn(`No angular.json found, the task ${taskName} will not be created`);
             return tree;

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

@@ -2,5 +2,7 @@ import type { SchematicOptionObject } from '@o3r/schematics';
 export interface NgAddSchematicsSchema extends SchematicOptionObject {
     /** Project name */
     projectName?: string | undefined;
+    /** Extract the design token from Sass file in the project */
+    extractDesignToken?: boolean;
 }
 //# sourceMappingURL=schema.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

package/schematics/ng-add/schema.json

@@ -10,6 +10,10 @@
       "$default": {
         "$source": "projectName"
       }
+    },
+    "extractDesignToken": {
+      "type": "boolean",
+      "description": "Extract the design token from Sass file in the project"
     }
   },
   "additionalProperties": true,