From 007f4f839b599912d7a8e6afe0d421a7c2658583 Mon Sep 17 00:00:00 2001 From: Pedro Ladaria Date: Fri, 8 Nov 2024 11:28:37 +0100 Subject: [PATCH] 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 --- packages/generate-design-tokens/.gitignore | 1 + .../.yarn/install-state.gz | Bin 698 -> 0 bytes packages/generate-design-tokens/index.js | 53 ++++++++++++++---- packages/generate-design-tokens/package.json | 7 ++- packages/generate-design-tokens/yarn.lock | 22 ++++++++ 5 files changed, 72 insertions(+), 11 deletions(-) create mode 100644 packages/generate-design-tokens/.gitignore delete mode 100644 packages/generate-design-tokens/.yarn/install-state.gz diff --git a/packages/generate-design-tokens/.gitignore b/packages/generate-design-tokens/.gitignore new file mode 100644 index 0000000000..8011525325 --- /dev/null +++ b/packages/generate-design-tokens/.gitignore @@ -0,0 +1 @@ +.yarn \ No newline at end of file diff --git a/packages/generate-design-tokens/.yarn/install-state.gz b/packages/generate-design-tokens/.yarn/install-state.gz deleted file mode 100644 index 7885c4decc810fd27bef2dc43b80e0ddcd72fb1f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 698 zcmV;r0!95FiwFP!000001JzaAP82~91%==h@e)6vW8#BI`rgya8xW(3B2j;!y1N=C zJM>IuW+jA}_~%*+ET`OkPMwN1SbG}sUOvtevc4`75{_UeKa zI7K#Lhi$?SZJISWyjwuoHv3A1x-D!XzqM?gh&}F3RxVcAi)-dl=}!MjdDy{tvUmQz zjX+$YvWLyp``-Bx9nCMhHCba%AVwU9IyCqTJG^AySEG&!WtFRJ3~-ff5V8uGTqT9@ zXf@{;v;a;8G3vvS~|cX_H{Q0 z?k+)LExTJMEaO`kPUh)&<+REwD907j$A|$=`V^FKAsbN{on_$8CT-~QBshAdf>qX1 zqBchEy|8oxhish}I)g>@DQRJI1}<%=DoEL*GN4T4U_;E>RYpRkGg&LP9dfpIX{zVP zSg?l?Und;ustDJo!*I99j6Ih4`#`Xb#ZFk~JM^#z4GqnV zdVe^tZev!ar9CU`PE(iZm-7zU+UJjNzOZ}Ozutj32|Fy*qgaz=XpwAni2cEz!JDWL zNIQ;#&;CR%4sM6K%s0>`nR1J?oW7|W+&{rM9cHH_sDmt|1S?TV@HSwGRJS#iaw>zb zjMFB0AfaW_)P9wbyO@1Yz@0|nxObd9qpebOhm)E+v)&_FwgehPivyU$= 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,10 +163,22 @@ 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`))) { @@ -153,20 +186,20 @@ const generateSkinFiles = () => { 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 index 210a24edd2..ee48c7a95d 100644 --- 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": "yarn@3.2.4" + "packageManager": "yarn@3.2.4", + "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 index 26c86cb7bc..0e0d359504 100644 --- 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