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 7885c4decc..0000000000 Binary files a/packages/generate-design-tokens/.yarn/install-state.gz and /dev/null differ diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js index 2f1ce8b455..2496712dc7 100644 --- 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,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