FLOW-963 code complexity fix

packages/flow-core/figma/sync-colors.js

@@ -77,6 +77,10 @@ function generateTokenScss(colorTokens) {
 	}
 }
 
+/**
+ * This will generate /src/shared/_text-tokens.scss file and it is consumed in `f-root.scss and one more file to consume this tokens dynamically i.e f-text-variables-dynamic.scss`
+ * @param {*} textTokens Json object of variants, weights and size for text.
+ */
 function generateTextScss(textTokens) {
 	const tokenTextFileName = `${__dirname}/../src/components/f-text/_f-text-variables-dynamic.scss`;
 	const scssFile = `${__dirname}/../src/mixins/scss/_text-tokens.scss`;
@@ -119,69 +123,34 @@ function generateTextScss(textTokens) {
 	}
 }
 
+/**
+ * This will generate /src/shared/_text-tokens.scss file and it is consumed in `f-root.scss and one more file to consume this tokens dynamically i.e f-text-variables-dynamic.scss`
+ * @param {*} textStyle Json object from API consisting of text type and styling.
+ * @param {*} variants Json object prepared to store all the types styling of varinats present - para, heading, code
+ * @param {*} weights Json object prepared to store all the types of weights present -medium, regular, bold
+ * @param {*} fontFamily Json object to store fontfamily for code and general texts.
+ */
 function generateTextTokens(textStyle, variants, weights, fontFamily) {
-	const text = textStyle.name.split("/");
-	const name = text[0];
-	const size = text[1];
-	const weight = text[2];
+	const [name, size, weight] = textStyle.name.split("/");
 	const styling = textStyle.style;
 
-	if (!(name in variants)) {
-		variants[name] = {};
-	}
-	if (!(size in variants[name])) {
-		variants[name][size] = { fontSize: styling.fontSize, lineHeight: styling.lineHeightPx };
-	}
-
-	if (!(weight in weights)) {
-		weights[weight] = styling.fontWeight;
-	}
-
-	if (!("general" in fontFamily)) {
-		if (name !== "code") {
-			fontFamily.general = styling.fontFamily;
-		}
-	}
-	if (!("code" in fontFamily)) {
-		if (name === "code") {
-			fontFamily.code = styling.fontFamily;
-		}
-	}
-}
-
-function createVariablesSCSS(data) {
-	let scssContent = `\n$variants: (\n`;
-
-	Object.keys(data.variants).forEach(category => {
-		scssContent += `\t"${category}": (\n`;
-
-		Object.keys(data.variants[category]).forEach(size => {
-			scssContent += `\n\t\t"${size}": (\n`;
-			scssContent += `\t\t\t"fontSize": var(${fontTokenString(category, size)}),\n`;
-			scssContent += `\t\t\t"lineHeight": var(${lineHeightTokenString(category, size)})\n`;
-			scssContent += `\t\t),\n`;
-		});
-
-		scssContent += `\t),\n`;
-	});
-
-	scssContent += `);`;
+	// Initialize variants[name] if not exists
+	variants[name] = variants[name] || {};
 
-	scssContent += `\n$weights: (\n`;
+	// Set fontSize and lineHeight for the given size
+	variants[name][size] = { fontSize: styling.fontSize, lineHeight: styling.lineHeightPx };
 
-	Object.keys(data.weights).forEach((key, index, array) => {
-		scssContent += `\t"${key}": var(${weightTokenString(key)})`;
-
-		if (index !== array.length - 1) {
-			scssContent += ",";
-		}
+	// Set fontWeight if not exists
+	weights[weight] = weights[weight] || styling.fontWeight;
 
-		scssContent += "\n";
-	});
-
-	scssContent += `);\n`;
+	// Set fontFamily for general and code categories
+	if (!fontFamily.general && name !== "code") {
+		fontFamily.general = styling.fontFamily;
+	}
 
-	return scssContent;
+	if (!fontFamily.code && name === "code") {
+		fontFamily.code = styling.fontFamily;
+	}
 }
 
 function fontTokenString(category, size) {
@@ -196,38 +165,118 @@ function weightTokenString(key) {
 	return `--text-${key}-weight`;
 }
 
+/**
+ *
+ * @param {*} data Json object of variants, weights and size for text
+ * @returns scss string formed for creating text-variable file
+ */
+function createVariablesSCSS(data) {
+	const scssContent = Object.keys(data.variants)
+		.map(category => {
+			const categoryContent = Object.keys(data.variants[category])
+				.map(size => {
+					const fontSizeToken = fontTokenString(category, size);
+					const lineHeightToken = lineHeightTokenString(category, size);
+
+					return (
+						`\t\t"${size}": (\n` +
+						`\t\t\t"fontSize": var(${fontSizeToken}),\n` +
+						`\t\t\t"lineHeight": var(${lineHeightToken})\n` +
+						`\t\t),\n`
+					);
+				})
+				.join("");
+
+			return `\t"${category}": (\n${categoryContent}\t),\n`;
+		})
+		.join("");
+
+	const weightsContent = Object.keys(data.weights)
+		.map(
+			(key, index, array) =>
+				`\t"${key}": var(${weightTokenString(key)})${index !== array.length - 1 ? "," : ""}\n`
+		)
+		.join("");
+
+	return `\n$variants: (\n${scssContent});\n\n$weights: (\n${weightsContent});\n`;
+}
+
+/**
+ *
+ * @param {*} data Json object of variants, weights and size for text
+ * @param {*} theme theme for ollion or general flow-core, as we need top create separate tokens with separate values for both diffeent themes.
+ * @returns
+ */
 function createTokenSCSS(data, theme) {
-	let scssContent =
+	const themeSelector =
 		theme === THEME_OLLION
-			? `[data-theme="f-ollion-dark"], [data-theme="f-ollion-light"] {\n`
-			: `[data-theme="f-dark"], [data-theme="f-light"] {\n`;
-
-	Object.keys(data.variants).forEach(category => {
-		Object.keys(data.variants[category]).forEach(size => {
-			const { fontSize, lineHeight } = data.variants[category][size];
-			scssContent += `${fontTokenString(category, size)} : ${fontSize}px;\t\n`;
-			scssContent += `${lineHeightTokenString(category, size)} : ${Math.round(lineHeight)}px;\t\n`;
-		});
-	});
+			? `[data-theme="f-ollion-dark"], [data-theme="f-ollion-light"]`
+			: `[data-theme="f-dark"], [data-theme="f-light"]`;
+
+	const fontStyles = {
+		general:
+			theme === THEME_OLLION ? `"${data.fontFamily.general}", serif` : `"Montserrat", sans-serif`,
+		code:
+			theme === THEME_OLLION ? `"${data.fontFamily.code}", monospace` : `"Courier Prime", monospace`
+	};
+
+	const scssContent = `
+  ${themeSelector} {
+    ${generateCategoryStyles(data.variants)}
+    ${generateWeightStyles(data.weights)}
+    --flow-font: ${fontStyles.general};
+    --flow-code-font: ${fontStyles.code};
+  }\n`;
 
-	Object.keys(data.weights).forEach(key => {
-		scssContent += `${weightTokenString(key)} : ${data.weights[key]};\t\n`;
-	});
+	return scssContent;
+}
 
-	scssContent += `--flow-font : ${
-		theme === THEME_OLLION ? `"${data.fontFamily.general}", serif` : `"Montserrat", sans-serif`
-	};\t\n`;
-	scssContent += `--flow-code-font : ${
-		theme === THEME_OLLION ? `"${data.fontFamily.code}", monospace` : `"Courier Prime", monospace`
-	};\t\n`;
+/**
+ *
+ * @param {*} variants json object for variants of text and their font-sizes
+ * @returns stringified scss tokens for texts
+ */
+function generateCategoryStyles(variants) {
+	return Object.keys(variants)
+		.map(category => generateSizeStyles(category, variants[category]))
+		.join("");
+}
 
-	scssContent += `\n}\n`;
+/**
+ *
+ * @param {*} category category includes - para, code, heading
+ * @param {*} sizes sizes values are different for every category
+ * @returns stringified scss tokens for text variants
+ */
+function generateSizeStyles(category, sizes) {
+	return Object.keys(sizes)
+		.map(size => {
+			const { fontSize, lineHeight } = sizes[size];
+			return `${fontTokenString(category, size)}: ${fontSize}px;\t\n${lineHeightTokenString(
+				category,
+				size
+			)}: ${Math.round(lineHeight)}px;\t\n`;
+		})
+		.join("");
+}
 
-	return scssContent;
+/**
+ *
+ * @param {*} weights weights json holds - bold, medium, regular
+ * @returns stringified scss tokens for text weights
+ */
+function generateWeightStyles(weights) {
+	return Object.keys(weights)
+		.map(key => `${weightTokenString(key)}: ${weights[key]};\t\n`)
+		.join("");
 }
 
 /**
- * Get document of specified file Id
+ *
+ * @param {*} theme theme present is for ollion of general-flow-core
+ * @param {*} nodeIds list of nodeids
+ * @param {*} colorTokens Json object of theme and color variables
+ * @param {*} textTokens Json object of variants, weights and size for text.
  */
 async function processStyles(theme, nodeIds, colorTokens, textTokens) {
 	try {
@@ -256,25 +305,19 @@ async function processStyles(theme, nodeIds, colorTokens, textTokens) {
 				}
 			}
 		}
-		if (theme === THEME_OLLION) {
-			if (!(THEME_OLLION in textTokens)) {
-				textTokens[THEME_OLLION] = { variants: variants, weights: weights, fontFamily: fontFamily };
-			}
-		} else {
-			if (!(THEME_FLOW_GEN in textTokens)) {
-				textTokens[THEME_FLOW_GEN] = {
-					variants: variants,
-					weights: weights,
-					fontFamily: fontFamily
-				};
-			}
+		const textTheme = theme === THEME_OLLION ? THEME_OLLION : THEME_FLOW_GEN;
+		if (!(textTheme in textTokens)) {
+			textTokens[textTheme] = { variants, weights, fontFamily };
 		}
 	} catch (error) {
 		console.error(`Error processing styles for ${theme}:`, error);
 		throw error;
 	}
 }
 
+/**
+ * Get document of specified file Id
+ */
 async function generateStyles() {
 	const colorTokens = {};
 	const textTokens = {};

packages/flow-core/src/components/f-text/_f-text-variables-dynamic.scss

@@ -58,6 +58,7 @@ $variants: (
 		)
 	)
 );
+
 $weights: (
 	"medium": var(--text-medium-weight),
 	"regular": var(--text-regular-weight),

packages/flow-core/src/mixins/scss/_text-tokens.scss

@@ -26,12 +26,15 @@
 	--text-code-large-lineheight: 26px;
 	--text-code-medium-font: 14px;
 	--text-code-medium-lineheight: 22px;
+
 	--text-medium-weight: 350;
 	--text-regular-weight: 325;
 	--text-bold-weight: 400;
+
 	--flow-font: "Montserrat", sans-serif;
 	--flow-code-font: "Courier Prime", monospace;
 }
+
 [data-theme="f-ollion-dark"],
 [data-theme="f-ollion-light"] {
 	--text-heading-x-large-font: 72px;
@@ -60,9 +63,11 @@
 	--text-code-large-lineheight: 34px;
 	--text-code-x-small-font: 12px;
 	--text-code-x-small-lineheight: 17px;
+
 	--text-medium-weight: 500;
 	--text-bold-weight: 600;
 	--text-regular-weight: 400;
+
 	--flow-font: "Rhymes Display", serif;
 	--flow-code-font: "Operator Mono", monospace;
 }