@o3r/design 10.0.0-alpha.1

package/schematics/ extract-token/index.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractToken = void 0;
+const node_path_1 = require("node:path");
+const public_api_1 = require("../../src/public_api");
+const patternToDetect = 'o3r.var';
+/**
+ * Extract the token from o3r mixin sass file
+ * @param options
+ */
+function extractToken(options) {
+    const updateFileContent = (content) => {
+        const start = content.indexOf(patternToDetect);
+        const end = content.lastIndexOf(patternToDetect);
+        if (start === -1 || !options.includeTags) {
+            return content;
+        }
+        const startTag = typeof options.includeTags === 'boolean' ? public_api_1.AUTO_GENERATED_START : options.includeTags.startTag;
+        const endTag = typeof options.includeTags === 'boolean' ? public_api_1.AUTO_GENERATED_END : options.includeTags.endTag;
+        const indexToInsertStart = content.substring(0, start).lastIndexOf('\n') + 1;
+        const indexToInsertEnd = content.substring(end).indexOf('\n') + end + 1;
+        return `${content.substring(0, indexToInsertStart)}${startTag}\n` +
+            content.substring(indexToInsertStart, indexToInsertEnd) +
+            `${endTag}\n${content.substring(indexToInsertEnd)}`;
+    };
+    return async (tree, context) => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { CssVariableExtractor } = await Promise.resolve().then(() => require('@o3r/styling/builders/style-extractor/helpers'));
+            const { filter } = await Promise.resolve().then(() => require('minimatch'));
+            const filterFunctions = options.componentFilePatterns.map((pattern) => filter('/' + pattern.replace(/[\\/]+/g, '/'), { dot: true }));
+            const sassParser = new CssVariableExtractor();
+            tree.visit((file) => {
+                if (!filterFunctions.some((filterFunction) => filterFunction(file))) {
+                    return;
+                }
+                const content = tree.readText(file);
+                const variables = sassParser.extractFileContent((0, node_path_1.resolve)(tree.root.path, file), content);
+                if (variables.length > 0 && options.includeTags) {
+                    const newContent = updateFileContent(content);
+                    tree.overwrite(file, newContent);
+                }
+                const isPrivate = file.endsWith('theme.scss');
+                const tokenSpecification = variables
+                    .reduce((node, variable) => {
+                    const namePath = variable.name.split('-');
+                    let targetNode = node;
+                    namePath.forEach((name) => {
+                        targetNode[name] ||= {};
+                        targetNode = targetNode[name];
+                    });
+                    const valueWithVariable = [...variable.defaultValue.matchAll(/var\(--([^)])\)/g)]
+                        .reduce((acc, [variableString, variableName]) => {
+                        return acc.replaceAll(variableString, `{${variableName.replaceAll('-', '.')}}`);
+                    }, variable.defaultValue);
+                    const targetNodeValue = targetNode;
+                    targetNodeValue.$description = variable.description;
+                    targetNodeValue.$type = !variable.type || variable.type === 'string' ?
+                        (isNaN(+variable.defaultValue) ? undefined : 'number') :
+                        variable.type;
+                    targetNodeValue.$value = targetNodeValue.$type === 'number' ?
+                        +variable.defaultValue :
+                        valueWithVariable;
+                    targetNodeValue.$extensions ||= {};
+                    targetNodeValue.$extensions.o3rMetadata ||= {};
+                    targetNodeValue.$extensions.o3rMetadata.category = variable.category;
+                    targetNodeValue.$extensions.o3rMetadata.label = variable.label;
+                    targetNodeValue.$extensions.o3rMetadata.tags = variable.tags;
+                    return node;
+                }, {});
+                Object.values(tokenSpecification)
+                    .forEach((node) => {
+                    const designTokenNode = node;
+                    designTokenNode.$extensions ||= {};
+                    designTokenNode.$extensions.o3rPrivate = isPrivate;
+                    designTokenNode.$extensions.o3rTargetFile = node_path_1.posix.join('.', node_path_1.posix.basename(file));
+                });
+                tree.create(file.replace(/\.scss$/, '.json'), JSON.stringify(tokenSpecification, null, 2));
+            });
+            return () => tree;
+        }
+        catch (e) {
+            context.logger.warn('The following dependencies should be provided to the extract-token schematics: "@o3r/styling", "minimatch".');
+            context.logger.warn('The extraction will stop, it can be re-run with the schematic "@o3r/design:extract-token".');
+            context.logger.debug(JSON.stringify(e));
+        }
+    };
+}
+exports.extractToken = extractToken;
+//# sourceMappingURL=index.js.map

package/schematics/ extract-token/schema.d.ts

@@ -0,0 +1,14 @@
+import type { SchematicOptionObject } from '@o3r/schematics';
+export interface ExtractTokenSchematicsSchema extends SchematicOptionObject {
+    /**
+     * Include the tags in the original Sass file
+     * @default true
+     */
+    includeTags?: boolean | {
+        startTag: string;
+        endTag: string;
+    };
+    /** List of file pattern of component theme files */
+    componentFilePatterns: string[];
+}
+//# sourceMappingURL=schema.d.ts.map

package/schematics/ extract-token/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../schematics/ extract-token/schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;IACzE;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAE7D,oDAAoD;IACpD,qBAAqB,EAAE,MAAM,EAAE,CAAC;CACjC"}

package/schematics/ extract-token/schema.js

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

package/schematics/ extract-token/schema.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngAddSchematicsSchema",
+  "title": "Extract Design Token From Sass",
+  "description": "Extract Design Token From Sass o3r variable helpers",
+  "properties": {
+    "includeTags": {
+      "description": "Include the tags in the original Sass file",
+      "oneOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "startTag": {
+              "type": "string"
+            },
+            "endTag": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "startTag",
+            "endTag"
+          ]
+        }
+      ],
+      "default": true
+    },
+    "componentFilePatterns": {
+      "description": "List of file pattern of component theme files",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "additionalProperties": true,
+  "required": [
+    "componentFilePattern"
+  ]
+}

package/schematics/generate-css/index.d.ts

@@ -0,0 +1,8 @@
+import type { GenerateCssSchematicsSchema } from './schema';
+import type { Rule } from '@angular-devkit/schematics';
+/**
+ * Generate CSS from Design Token files
+ * @param options
+ */
+export declare function generateCss(options: GenerateCssSchematicsSchema): Rule;
+//# sourceMappingURL=index.d.ts.map

package/schematics/generate-css/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../schematics/generate-css/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAKvD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,2BAA2B,GAAG,IAAI,CAuCtE"}

package/schematics/generate-css/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCss = void 0;
+const schematics_1 = require("@o3r/schematics");
+const design_1 = require("@o3r/design");
+/**
+ * Generate CSS from Design Token files
+ * @param options
+ */
+function generateCss(options) {
+    return async (tree, context) => {
+        const writeFile = (filePath, content) => tree.exists(filePath) ? tree.overwrite(filePath, content) : tree.create(filePath, content);
+        const readFile = tree.readText;
+        const existsFile = tree.exists;
+        const determineFileToUpdate = options.output ? () => options.output :
+            (token) => {
+                if (token.extensions.o3rTargetFile && tree.exists(token.extensions.o3rTargetFile)) {
+                    return token.extensions.o3rTargetFile;
+                }
+                return options.defaultStyleFile;
+            };
+        const renderDesignTokenOptions = {
+            readFile,
+            writeFile,
+            existsFile,
+            determineFileToUpdate,
+            logger: context.logger
+        };
+        const files = (0, schematics_1.globInTree)(tree, Array.isArray(options.designTokenFilePatterns) ? options.designTokenFilePatterns : [options.designTokenFilePatterns]);
+        const duplicatedToken = [];
+        const tokens = (await Promise.all(files.map(async (file) => ({ file, parsed: await (0, design_1.parseDesignTokenFile)(file) }))))
+            .reduce((acc, { file, parsed }) => {
+            parsed.forEach((variable, key) => {
+                if (acc.has(key)) {
+                    context.logger[options.failOnDuplicate ? 'error' : 'warn'](`A duplication of the variable ${key} is found in ${file}`);
+                }
+                acc.set(key, variable);
+            });
+            return acc;
+        }, new Map());
+        if (options.failOnDuplicate && duplicatedToken.length > 0) {
+            throw new Error(`Found ${duplicatedToken.length} duplicated Design Token keys`);
+        }
+        await (0, design_1.renderDesignTokens)(tokens, renderDesignTokenOptions);
+    };
+}
+exports.generateCss = generateCss;
+//# sourceMappingURL=index.js.map

package/schematics/generate-css/schema.d.ts

@@ -0,0 +1,17 @@
+import type { SchematicOptionObject } from '@o3r/schematics';
+export interface GenerateCssSchematicsSchema extends SchematicOptionObject {
+    /** Path patterns to the Design Token JSON files */
+    designTokenFilePatterns: string | string[];
+    /** File path to generate the variable if not determined by the specification */
+    defaultStyleFile: string;
+    /**
+     * Output file where generate the CSS
+     *
+     * If specified, all the generated CSS variable will be generated in the given file.
+     * Otherwise, the output file will be determined based on the Variable parameters
+     */
+    output?: string;
+    /** Determine if the process should stop in case of Token duplication */
+    failOnDuplicate?: boolean;
+}
+//# sourceMappingURL=schema.d.ts.map

package/schematics/generate-css/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../schematics/generate-css/schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,2BAA4B,SAAQ,qBAAqB;IACxE,mDAAmD;IACnD,uBAAuB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE3C,gFAAgF;IAChF,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/schematics/generate-css/schema.js

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

package/schematics/generate-css/schema.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngAddSchematicsSchema",
+  "title": "Add Otter Design",
+  "description": "ngAdd Otter Design",
+  "properties": {
+    "designTokenFilePatterns": {
+      "description": "Path patterns to the Design Token JSON files",
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      ],
+      "$default": {
+        "$source": "argv"
+      }
+    },
+    "output": {
+      "type": "string",
+      "description": "Output file where generate the CSS"
+    },
+    "defaultStyleFile": {
+      "type": "string",
+      "default": "src/theme.scss",
+      "description": "File path to generate the variable if not determined by the specification"
+    },
+    "failOnDuplicate": {
+      "type": "boolean",
+      "default": false,
+      "description": "Determine if the process should stop in case of Token duplication"
+    }
+  },
+  "additionalProperties": true,
+  "required": [
+    "designTokenFilePatterns"
+  ]
+}

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

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * Add Otter design to an Angular Project
+ * @param options
+ */
+export declare function ngAdd(): Rule;
+//# sourceMappingURL=index.d.ts.map

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

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

package/schematics/ng-add/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+/**
+ * Add Otter design to an Angular Project
+ * @param options
+ */
+function ngAdd() {
+    /* ng add rules */
+    return (0, schematics_1.chain)([
+        (0, register_generate_css_1.registerGenerateCssBuilder)(),
+        (0, _extract_token_1.extractToken)({ componentFilePatterns: ['**/*.scss'], includeTags: true })
+    ]);
+}
+exports.ngAdd = ngAdd;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,2 @@
+export * from './register-task';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../schematics/ng-add/register-generate-css/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./register-task"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,8 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * Register the Design Token CSS generator
+ * @param projectName Project name
+ * @param taskName name of the task to generate
+ */
+export declare const registerGenerateCssBuilder: (projectName?: string, taskName?: string) => Rule;
+//# sourceMappingURL=register-task.d.ts.map

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

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

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

@@ -0,0 +1,60 @@
+"use strict";
+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
+ * @param projectName Project name
+ * @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 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 = {
+            defaultStyleFile: themeFile,
+            renderPrivateVariableTo: 'sass',
+            designTokenFilePatterns: [
+                `${node_path_1.posix.resolve(srcBasePath, 'style', '*.json')}`,
+                `${node_path_1.posix.resolve(srcBasePath, '**', '*.theme.json')}`
+            ]
+        };
+        if (!workspaceProject) {
+            logger.warn(`No angular.json found, the task ${taskName} will not be created`);
+            return tree;
+        }
+        (0, schematics_2.registerBuilder)(workspaceProject, taskName, taskParameters);
+        return tree;
+    };
+    const generateTemplateRule = (tree, context) => {
+        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 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);
+        return rule;
+    };
+    const importTheme = (tree, context) => {
+        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 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 tree.overwrite(styleFile, '@import "./style/theme.scss";\n' + tree.readText(styleFile));
+    };
+    return (0, schematics_1.chain)([
+        registerBuilderRule,
+        generateTemplateRule,
+        importTheme
+    ]);
+};
+exports.registerGenerateCssBuilder = registerGenerateCssBuilder;
+//# sourceMappingURL=register-task.js.map

package/schematics/ng-add/register-generate-css/templates/design-token.custom.json.template

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://raw.githubusercontent.com/AmadeusITGroup/otter/main/packages/@o3r/design/schemas/design-token.schema.json"
+}

package/schematics/ng-add/register-generate-css/templates/theme.scss.template

@@ -0,0 +1,6 @@
+
+:root {
+/* --- BEGIN THEME Auto-generated --- */
+
+/* --- END THEME Auto-generated --- */
+}

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

@@ -0,0 +1,6 @@
+import type { SchematicOptionObject } from '@o3r/schematics';
+export interface NgAddSchematicsSchema extends SchematicOptionObject {
+    /** Project name */
+    projectName?: string | undefined;
+}
+//# sourceMappingURL=schema.d.ts.map

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

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

package/schematics/ng-add/schema.js

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

package/schematics/ng-add/schema.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngAddSchematicsSchema",
+  "title": "Add Otter Design",
+  "description": "ngAdd Otter Design",
+  "properties": {
+    "projectName": {
+      "type": "string",
+      "description": "Project name",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "additionalProperties": true,
+  "required": [
+  ]
+}