chore(tokens): Improve design tokens import script (#1288)

Sample execution via github actions: https://github.com/Telefonica/mistica-web/actions/runs/11702860436 --------- Co-authored-by: Pedro Ladaria <[email protected]>
Telefonica · Nov 8, 2024 · 007f4f8 · 007f4f8 · github-actions · Nov 8, 2024
1 parent 8d91924
commit 007f4f8
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 11 deletions.
diff --git a/packages/generate-design-tokens/.gitignore b/packages/generate-design-tokens/.gitignore
@@ -0,0 +1 @@
+.yarn
diff --git a/packages/generate-design-tokens/.yarn/install-state.gz b/packages/generate-design-tokens/.yarn/install-state.gz
diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js
@@ -3,6 +3,7 @@ import path from 'path';
 import url from 'url';
 // eslint-disable-next-line import/extensions
 import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
+import prettier from 'prettier';
 
 /*
 By default, this script will look for the design tokens inside .github folder but you may want to clone the mistica-design repo elsewhere.
@@ -16,12 +17,15 @@ To run this script locally using a custom path for the tokens, you can do the fo
     DESIGN_TOKENS_FOLDER="/path/to/mistica-design/tokens" node index.js
 */
 
-const DESIGN_TOKENS_FOLDER = process.env.DESIGN_TOKENS_FOLDER || '../../../mistica-design/tokens/';
-
 // in node >= 20 we could use import.meta.dirname instead
 // @ts-ignore
 const currentDir = url.fileURLToPath(new URL('.', import.meta.url));
 
+const DESIGN_TOKENS_FOLDER =
+    process.env.DESIGN_TOKENS_FOLDER || path.join(currentDir, '../../.github/mistica-design/tokens/');
+
+console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
+
 const SKINS_FOLDER = path.join(currentDir, '..', '..', 'src', 'skins');
 const CSS_FOLDER = path.join(currentDir, '..', '..', 'css');
 
@@ -31,6 +35,23 @@ const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 const toPascalCase = (str) => capitalize(toCamelCase(str));
 
+const jsonSort = (obj) => {
+    if (Array.isArray(obj)) {
+        return obj.map(jsonSort);
+    }
+
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    return Object.keys(obj)
+        .sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}))
+        .reduce((acc, key) => {
+            acc[key] = jsonSort(obj[key]);
+            return acc;
+        }, {});
+};
+
 /**
  * @param {{angle: number, colors: Array<{
  *     value: string,
@@ -123,7 +144,7 @@ export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => {
                 )
                 .join(',')}
         },
-        textPresets: ${JSON.stringify(textTokens)},
+        textPresets: ${JSON.stringify(jsonSort(textTokens))},
     };
     return skin;
 };
@@ -142,31 +163,43 @@ export type Colors = {
 };`;
 };
 
-const generateSkinFiles = () => {
+const formatCss = async (source) =>
+    prettier.format(source, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'css',
+    });
+
+const formatTs = async (source) =>
+    prettier.format(source, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'typescript',
+    });
+
+const generateSkinFiles = async () => {
     let anyGeneratedSkin;
 
-    KNOWN_SKINS.forEach((skinName) => {
+    for (const skinName of KNOWN_SKINS) {
         console.log('Generating tokens for skin', skinName);
 
         if (!fs.existsSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`))) {
             console.error(`Missing ${skinName}.json file`);
             return;
         }
 
-        const skinSrc = generateSkinSrc(skinName);
+        const skinSrc = await formatTs(generateSkinSrc(skinName));
         fs.writeFileSync(path.join(SKINS_FOLDER, `${skinName}.tsx`), skinSrc);
 
-        const skinCssSrc = generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER);
+        const skinCssSrc = await formatCss(generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER));
         fs.writeFileSync(path.join(CSS_FOLDER, `${skinName}.css`), skinCssSrc);
 
         anyGeneratedSkin = skinName;
-    });
+    }
 
     if (anyGeneratedSkin) {
-        const typesSrc = generateColorTypesSrc(anyGeneratedSkin);
+        const typesSrc = await formatTs(generateColorTypesSrc(anyGeneratedSkin));
         fs.writeFileSync(path.join(SKINS_FOLDER, 'types', 'colors.tsx'), typesSrc);
 
-        const commonCssSrc = generateCommonCssSrc(DESIGN_TOKENS_FOLDER);
+        const commonCssSrc = await formatCss(generateCommonCssSrc(DESIGN_TOKENS_FOLDER));
         fs.writeFileSync(path.join(CSS_FOLDER, `mistica-common.css`), commonCssSrc);
     }
 };

diff --git a/packages/generate-design-tokens/package.json b/packages/generate-design-tokens/package.json
@@ -1,5 +1,10 @@
 {
     "name": "generate-design-tokens",
     "type": "module",
-    "packageManager": "[email protected]"
+    "packageManager": "[email protected]",
+    "dependencies": {
+        "@telefonica/prettier-config": "^2.0.0",
+        "prettier": "^3.3.3"
+    },
+    "prettier": "@telefonica/prettier-config"
 }
diff --git a/packages/generate-design-tokens/yarn.lock b/packages/generate-design-tokens/yarn.lock
@@ -3,9 +3,31 @@
 
 __metadata:
   version: 6
+  cacheKey: 8
+
+"@telefonica/prettier-config@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@telefonica/prettier-config@npm:2.0.0"
+  peerDependencies:
+    prettier: ^3.0.0
+  checksum: b7fe4ee936195f26b1b1977236b97ec241afa01b12d72d801272788bf9699cd4b9a6e3feccde86bd88b311335f0cfd39ec0b53a9bb44dacf5c01b5627729f174
+  languageName: node
+  linkType: hard
 
 "generate-design-tokens@workspace:.":
   version: 0.0.0-use.local
   resolution: "generate-design-tokens@workspace:."
+  dependencies:
+    "@telefonica/prettier-config": ^2.0.0
+    prettier: ^3.3.3
   languageName: unknown
   linkType: soft
+
+"prettier@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
+  languageName: node
+  linkType: hard