public/github-stats-extended
2
0
Fork 0
forked from mirrored/github-stats-extended
Code Issues Pull Requests Actions Packages Projects Wiki Activity

refactor: move all color related code into separate file (#4557)

Browse Source 
Co-authored-by: Alexandr <qwerty541zxc@gmail.com>
This commit is contained in:
Ophelia Goldstein
2025-10-11 22:07:03 +03:00
committed by GitHub
co-authored by Alexandr
parent 6a542c870d
commit 701068b8bc
11 changed files with 152 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/preview-theme.js
+1 -1
View File
@@ -12,7 +12,7 @@ import Hjson from "hjson";
import snakeCase from "lodash.snakecase";
import parse from "parse-diff";
import { inspect } from "util";
import { isValidHexColor, isValidGradient } from "../src/common/utils.js";
import { isValidHexColor, isValidGradient } from "../src/common/color.js";
import { themes } from "../themes/index.js";
import { getGithubToken, getRepoInfo } from "./helpers.js";
src/cards/gist.js
+1 -1
View File
@@ -1,7 +1,6 @@
// @ts-check
import {
getCardColors,
parseEmojis,
wrapTextMultiline,
encodeHTML,
@@ -12,6 +11,7 @@ import {
createLanguageNode,
} from "../common/utils.js";
import Card from "../common/Card.js";
import { getCardColors } from "../common/color.js";
import { icons } from "../common/icons.js";
/** Import language colors.
src/cards/repo.js
+1 -1
View File
@@ -1,11 +1,11 @@
// @ts-check
import { Card } from "../common/Card.js";
import { getCardColors } from "../common/color.js";
import { I18n } from "../common/I18n.js";
import { icons } from "../common/icons.js";
import {
encodeHTML,
flexLayout,
getCardColors,
kFormatter,
measureText,
parseEmojis,
src/cards/stats.js
+1 -1
View File
@@ -1,13 +1,13 @@
// @ts-check
import { Card } from "../common/Card.js";
import { getCardColors } from "../common/color.js";
import { CustomError } from "../common/error.js";
import { I18n } from "../common/I18n.js";
import { icons, rankIcon } from "../common/icons.js";
import {
clampValue,
flexLayout,
getCardColors,
kFormatter,
measureText,
} from "../common/utils.js";
src/cards/top-languages.js
+1 -1
View File
@@ -1,12 +1,12 @@
// @ts-check
import { Card } from "../common/Card.js";
import { getCardColors } from "../common/color.js";
import { createProgressNode } from "../common/createProgressNode.js";
import { I18n } from "../common/I18n.js";
import {
chunkArray,
clampValue,
flexLayout,
getCardColors,
lowercaseTrim,
measureText,
formatBytes,
src/cards/wakatime.js
+2 -6
View File
@@ -1,14 +1,10 @@
// @ts-check
import { Card } from "../common/Card.js";
import { getCardColors } from "../common/color.js";
import { createProgressNode } from "../common/createProgressNode.js";
import { I18n } from "../common/I18n.js";
import {
clampValue,
flexLayout,
getCardColors,
lowercaseTrim,
} from "../common/utils.js";
import { clampValue, flexLayout, lowercaseTrim } from "../common/utils.js";
import { wakatimeCardLocales } from "../translations.js";
/** Import language colors.
src/common/color.js
+141
View File
@@ -0,0 +1,141 @@
import { themes } from "../../themes/index.js";
/**
* Checks if a string is a valid hex color.
*
* @param {string} hexColor String to check.
* @returns {boolean} True if the given string is a valid hex color.
*/
const isValidHexColor = (hexColor) => {
return new RegExp(
/^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/,
).test(hexColor);
};
/**
* Check if the given string is a valid gradient.
*
* @param {string[]} colors Array of colors.
* @returns {boolean} True if the given string is a valid gradient.
*/
const isValidGradient = (colors) => {
return (
colors.length > 2 &&
colors.slice(1).every((color) => isValidHexColor(color))
);
};
/**
* Retrieves a gradient if color has more than one valid hex codes else a single color.
*
* @param {string} color The color to parse.
* @param {string | string[]} fallbackColor The fallback color.
* @returns {string | string[]} The gradient or color.
*/
const fallbackColor = (color, fallbackColor) => {
let gradient = null;
let colors = color ? color.split(",") : [];
if (colors.length > 1 && isValidGradient(colors)) {
gradient = colors;
}
return (
(gradient ? gradient : isValidHexColor(color) && `#${color}`) ||
fallbackColor
);
};
/**
* Object containing card colors.
* @typedef {{
* titleColor: string;
* iconColor: string;
* textColor: string;
* bgColor: string | string[];
* borderColor: string;
* ringColor: string;
* }} CardColors
*/
/**
* Returns theme based colors with proper overrides and defaults.
*
* @param {Object} args Function arguments.
* @param {string=} args.title_color Card title color.
* @param {string=} args.text_color Card text color.
* @param {string=} args.icon_color Card icon color.
* @param {string=} args.bg_color Card background color.
* @param {string=} args.border_color Card border color.
* @param {string=} args.ring_color Card ring color.
* @param {keyof themes=} args.theme Card theme.
* @param {keyof themes=} args.fallbackTheme Fallback theme.
* @returns {CardColors} Card colors.
*/
const getCardColors = ({
title_color,
text_color,
icon_color,
bg_color,
border_color,
ring_color,
theme,
fallbackTheme = "default",
}) => {
const defaultTheme = themes[fallbackTheme];
const isThemeProvided = theme !== null && theme !== undefined;
const selectedTheme = isThemeProvided ? themes[theme] : defaultTheme;
const defaultBorderColor =
"border_color" in selectedTheme
? selectedTheme.border_color
: // @ts-ignore
defaultTheme.border_color;
// get the color provided by the user else the theme color
// finally if both colors are invalid fallback to default theme
const titleColor = fallbackColor(
title_color || selectedTheme.title_color,
"#" + defaultTheme.title_color,
);
// get the color provided by the user else the theme color
// finally if both colors are invalid we use the titleColor
const ringColor = fallbackColor(
// @ts-ignore
ring_color || selectedTheme.ring_color,
titleColor,
);
const iconColor = fallbackColor(
icon_color || selectedTheme.icon_color,
"#" + defaultTheme.icon_color,
);
const textColor = fallbackColor(
text_color || selectedTheme.text_color,
"#" + defaultTheme.text_color,
);
const bgColor = fallbackColor(
bg_color || selectedTheme.bg_color,
"#" + defaultTheme.bg_color,
);
const borderColor = fallbackColor(
border_color || defaultBorderColor,
"#" + defaultBorderColor,
);
if (
typeof titleColor !== "string" ||
typeof textColor !== "string" ||
typeof ringColor !== "string" ||
typeof iconColor !== "string" ||
typeof borderColor !== "string"
) {
throw new Error(
"Unexpected behavior, all colors except background should be string.",
);
}
return { titleColor, iconColor, textColor, bgColor, borderColor, ringColor };
};
export { isValidHexColor, isValidGradient, getCardColors };
src/common/index.js
-4
View File
@@ -11,15 +11,11 @@ export {
renderError,
encodeHTML,
kFormatter,
isValidHexColor,
parseBoolean,
parseArray,
clampValue,
isValidGradient,
fallbackColor,
request,
flexLayout,
getCardColors,
wrapTextMultiline,
logger,
measureText,
src/common/utils.js
+2 -144
View File
@@ -3,8 +3,8 @@
import axios from "axios";
import toEmoji from "emoji-name-map";
import wrap from "word-wrap";
import { themes } from "../../themes/index.js";
import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
import { getCardColors } from "./color.js";
/**
* Auto layout utility, allows us to layout things vertically or horizontally with
@@ -88,18 +88,6 @@ const kFormatter = (num) => {
: Math.sign(num) * Math.abs(num);
};
/**
* Checks if a string is a valid hex color.
*
* @param {string} hexColor String to check.
* @returns {boolean} True if the given string is a valid hex color.
*/
const isValidHexColor = (hexColor) => {
return new RegExp(
/^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/,
).test(hexColor);
};
/**
* Returns boolean if value is either "true" or "false" else the value as it is.
*
@@ -150,40 +138,6 @@ const clampValue = (number, min, max) => {
return Math.max(min, Math.min(number, max));
};
/**
* Check if the given string is a valid gradient.
*
* @param {string[]} colors Array of colors.
* @returns {boolean} True if the given string is a valid gradient.
*/
const isValidGradient = (colors) => {
return (
colors.length > 2 &&
colors.slice(1).every((color) => isValidHexColor(color))
);
};
/**
* Retrieves a gradient if color has more than one valid hex codes else a single color.
*
* @param {string} color The color to parse.
* @param {string | string[]} fallbackColor The fallback color.
* @returns {string | string[]} The gradient or color.
*/
const fallbackColor = (color, fallbackColor) => {
let gradient = null;
let colors = color ? color.split(",") : [];
if (colors.length > 1 && isValidGradient(colors)) {
gradient = colors;
}
return (
(gradient ? gradient : isValidHexColor(color) && `#${color}`) ||
fallbackColor
);
};
/**
* @typedef {import('axios').AxiosRequestConfig['data']} AxiosRequestConfigData Axios request data.
* @typedef {import('axios').AxiosRequestConfig['headers']} AxiosRequestConfigHeaders Axios request headers.
@@ -205,98 +159,6 @@ const request = (data, headers) => {
});
};
/**
* Object containing card colors.
* @typedef {{
* titleColor: string;
* iconColor: string;
* textColor: string;
* bgColor: string | string[];
* borderColor: string;
* ringColor: string;
* }} CardColors
*/
/**
* Returns theme based colors with proper overrides and defaults.
*
* @param {Object} args Function arguments.
* @param {string=} args.title_color Card title color.
* @param {string=} args.text_color Card text color.
* @param {string=} args.icon_color Card icon color.
* @param {string=} args.bg_color Card background color.
* @param {string=} args.border_color Card border color.
* @param {string=} args.ring_color Card ring color.
* @param {keyof themes=} args.theme Card theme.
* @param {keyof themes=} args.fallbackTheme Fallback theme.
* @returns {CardColors} Card colors.
*/
const getCardColors = ({
title_color,
text_color,
icon_color,
bg_color,
border_color,
ring_color,
theme,
fallbackTheme = "default",
}) => {
const defaultTheme = themes[fallbackTheme];
const isThemeProvided = theme !== null && theme !== undefined;
const selectedTheme = isThemeProvided ? themes[theme] : defaultTheme;
const defaultBorderColor =
"border_color" in selectedTheme
? selectedTheme.border_color
: // @ts-ignore
defaultTheme.border_color;
// get the color provided by the user else the theme color
// finally if both colors are invalid fallback to default theme
const titleColor = fallbackColor(
title_color || selectedTheme.title_color,
"#" + defaultTheme.title_color,
);
// get the color provided by the user else the theme color
// finally if both colors are invalid we use the titleColor
const ringColor = fallbackColor(
// @ts-ignore
ring_color || selectedTheme.ring_color,
titleColor,
);
const iconColor = fallbackColor(
icon_color || selectedTheme.icon_color,
"#" + defaultTheme.icon_color,
);
const textColor = fallbackColor(
text_color || selectedTheme.text_color,
"#" + defaultTheme.text_color,
);
const bgColor = fallbackColor(
bg_color || selectedTheme.bg_color,
"#" + defaultTheme.bg_color,
);
const borderColor = fallbackColor(
border_color || defaultBorderColor,
"#" + defaultBorderColor,
);
if (
typeof titleColor !== "string" ||
typeof textColor !== "string" ||
typeof ringColor !== "string" ||
typeof iconColor !== "string" ||
typeof borderColor !== "string"
) {
throw new Error(
"Unexpected behavior, all colors except background should be string.",
);
}
return { titleColor, iconColor, textColor, bgColor, borderColor, ringColor };
};
// Script parameters.
const ERROR_CARD_LENGTH = 576.5;
@@ -332,7 +194,7 @@ const UPSTREAM_API_ERRORS = [
* @param {string=} args.renderOptions.text_color Card text color.
* @param {string=} args.renderOptions.bg_color Card background color.
* @param {string=} args.renderOptions.border_color Card border color.
* @param {keyof themes=} args.renderOptions.theme Card theme.
* @param {Parameters<typeof getCardColors>[0]["theme"]=} args.renderOptions.theme Card theme.
* @param {boolean=} args.renderOptions.show_repo_link Whether to show repo link or not.
* @returns {string} The SVG markup.
*/
@@ -561,15 +423,11 @@ export {
iconWithLabel,
encodeHTML,
kFormatter,
isValidHexColor,
parseBoolean,
parseArray,
clampValue,
isValidGradient,
fallbackColor,
request,
flexLayout,
getCardColors,
wrapTextMultiline,
logger,
measureText,
tests/card.test.js
+1 -1
View File
@@ -4,7 +4,7 @@ import "@testing-library/jest-dom";
import { cssToObject } from "@uppercod/css-to-object";
import { Card } from "../src/common/Card.js";
import { icons } from "../src/common/icons.js";
import { getCardColors } from "../src/common/utils.js";
import { getCardColors } from "../src/common/color.js";
describe("Card", () => {
it("should hide border", () => {
tests/utils.test.js
+1 -1
View File
@@ -4,12 +4,12 @@ import "@testing-library/jest-dom";
import {
encodeHTML,
formatBytes,
getCardColors,
kFormatter,
parseBoolean,
renderError,
wrapTextMultiline,
} from "../src/common/utils.js";
import { getCardColors } from "../src/common/color.js";
describe("Test utils.js", () => {
it("should test kFormatter", () => {