From ac749b75e351bc050c22d63ccb2fb4b5a3d6b069 Mon Sep 17 00:00:00 2001 From: Alexandr Garbuzov Date: Sun, 15 Oct 2023 11:03:18 +0300 Subject: [PATCH] refactor: resolve vscode type errors in wakatime card render and remove redundant css (#3232) * refactor: resolve vscode type errors in wakatime card render and remove redundant css * dev --- src/cards/stats-card.js | 113 +++++++++++++- src/cards/wakatime-card.js | 32 +++- src/common/Card.js | 30 +++- src/getStyles.js | 142 ------------------ src/index.js | 1 - .../renderWakatimeCard.test.js.snap | 68 --------- 6 files changed, 170 insertions(+), 216 deletions(-) delete mode 100644 src/getStyles.js diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index dad81bbd21e4f..88e7531f2c3e1 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -10,7 +10,6 @@ import { kFormatter, measureText, } from "../common/utils.js"; -import { getStyles } from "../getStyles.js"; import { statCardLocales } from "../translations.js"; const CARD_MIN_WIDTH = 287; @@ -76,6 +75,118 @@ const createTextNode = ({ `; }; +/** + * Calculates progress along the boundary of the circle i.e it's circumference. + * + * @param {number} value The rank value to calculate progress for. + * @returns {number} Progress value. + */ +const calculateCircleProgress = (value) => { + const radius = 40; + const c = Math.PI * (radius * 2); + + if (value < 0) { + value = 0; + } + if (value > 100) { + value = 100; + } + + return ((100 - value) / 100) * c; +}; + +/** + * Retrieves the animation to display progress along the circumference of circle + * from the beginning to the given value in a clockwise direction. + * + * @param {{progress: number}} progress The progress value to animate to. + * @returns {string} Progress animation css. + */ +const getProgressAnimation = ({ progress }) => { + return ` + @keyframes rankAnimation { + from { + stroke-dashoffset: ${calculateCircleProgress(0)}; + } + to { + stroke-dashoffset: ${calculateCircleProgress(progress)}; + } + } + `; +}; + +/** + * Retrieves CSS styles for a card. + * + * @param {Object} colors The colors to use for the card. + * @param {string} colors.titleColor The title color. + * @param {string} colors.textColor The text color. + * @param {string} colors.iconColor The icon color. + * @param {string} colors.ringColor The ring color. + * @param {boolean} colors.show_icons Whether to show icons. + * @param {number} colors.progress The progress value to animate to. + * @returns {string} Card CSS styles. + */ +const getStyles = ({ + // eslint-disable-next-line no-unused-vars + titleColor, + textColor, + iconColor, + ringColor, + show_icons, + progress, +}) => { + return ` + .stat { + font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor}; + } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .stat { font-size:12px; } + } + .stagger { + opacity: 0; + animation: fadeInAnimation 0.3s ease-in-out forwards; + } + .rank-text { + font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; + animation: scaleInAnimation 0.3s ease-in-out forwards; + } + .rank-percentile-header { + font-size: 14px; + } + .rank-percentile-text { + font-size: 16px; + } + + .not_bold { font-weight: 400 } + .bold { font-weight: 700 } + .icon { + fill: ${iconColor}; + display: ${!!show_icons ? "block" : "none"}; + } + + .rank-circle-rim { + stroke: ${ringColor}; + fill: none; + stroke-width: 6; + opacity: 0.2; + } + .rank-circle { + stroke: ${ringColor}; + stroke-dasharray: 250; + fill: none; + stroke-width: 6; + stroke-linecap: round; + opacity: 0.8; + transform-origin: -10px 8px; + transform: rotate(-90deg); + animation: rankAnimation 1s forwards ease-in-out; + } + ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })} + `; +}; + /** * @typedef {import('../fetchers/types').StatsData} StatsData * @typedef {import('./types').StatCardOptions} StatCardOptions diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js index 187af7ed87c34..5dbee549d4eab 100644 --- a/src/cards/wakatime-card.js +++ b/src/cards/wakatime-card.js @@ -8,7 +8,6 @@ import { getCardColors, lowercaseTrim, } from "../common/utils.js"; -import { getStyles } from "../getStyles.js"; import { wakatimeCardLocales } from "../translations.js"; /** Import language colors. @@ -158,6 +157,36 @@ const recalculatePercentages = (languages) => { }); }; +/** + * Retrieves CSS styles for a card. + * + * @param {Object} colors The colors to use for the card. + * @param {string} colors.titleColor The title color. + * @param {string} colors.textColor The text color. + * @returns {string} Card CSS styles. + */ +const getStyles = ({ + // eslint-disable-next-line no-unused-vars + titleColor, + textColor, +}) => { + return ` + .stat { + font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor}; + } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .stat { font-size:12px; } + } + .stagger { + opacity: 0; + animation: fadeInAnimation 0.3s ease-in-out forwards; + } + .not_bold { font-weight: 400 } + .bold { font-weight: 700 } + `; +}; + /** * @typedef {import('../fetchers/types').WakaTimeData} WakaTimeData * @typedef {import('./types').WakaTimeOptions} WakaTimeOptions @@ -235,7 +264,6 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { const cssStyles = getStyles({ titleColor, textColor, - iconColor, }); let finalLayout = ""; diff --git a/src/common/Card.js b/src/common/Card.js index 33e6bb96e4974..408ace9669bcf 100644 --- a/src/common/Card.js +++ b/src/common/Card.js @@ -1,4 +1,3 @@ -import { getAnimations } from "../getStyles.js"; import { encodeHTML, flexLayout } from "./utils.js"; class Card { @@ -173,6 +172,33 @@ class Card { : ""; } + /** + * Retrieves css animations for a card. + * + * @returns {string} Animation css. + */ + getAnimations = () => { + return ` + /* Animations */ + @keyframes scaleInAnimation { + from { + transform: translate(-5px, 5px) scale(0); + } + to { + transform: translate(-5px, 5px) scale(1); + } + } + @keyframes fadeInAnimation { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + `; + }; + /** * @param {string} body The inner body of the card. * @returns {string} The rendered card. @@ -202,7 +228,7 @@ class Card { } ${this.css} - ${process.env.NODE_ENV === "test" ? "" : getAnimations()} + ${process.env.NODE_ENV === "test" ? "" : this.getAnimations()} ${ this.animations === false ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }` diff --git a/src/getStyles.js b/src/getStyles.js deleted file mode 100644 index c621ba1fcb707..0000000000000 --- a/src/getStyles.js +++ /dev/null @@ -1,142 +0,0 @@ -// @ts-check - -/** - * Calculates progress along the boundary of the circle i.e it's circumference. - * - * @param {number} value The rank value to calculate progress for. - * @returns {number} Progress value. - */ -const calculateCircleProgress = (value) => { - const radius = 40; - const c = Math.PI * (radius * 2); - - if (value < 0) { - value = 0; - } - if (value > 100) { - value = 100; - } - - return ((100 - value) / 100) * c; -}; - -/** - * Retrieves the animation to display progress along the circumference of circle - * from the beginning to the given value in a clockwise direction. - * - * @param {{progress: number}} progress The progress value to animate to. - * @returns {string} Progress animation css. - */ -const getProgressAnimation = ({ progress }) => { - return ` - @keyframes rankAnimation { - from { - stroke-dashoffset: ${calculateCircleProgress(0)}; - } - to { - stroke-dashoffset: ${calculateCircleProgress(progress)}; - } - } - `; -}; - -/** - * Retrieves css animations for a card. - * - * @returns {string} Animation css. - */ -const getAnimations = () => { - return ` - /* Animations */ - @keyframes scaleInAnimation { - from { - transform: translate(-5px, 5px) scale(0); - } - to { - transform: translate(-5px, 5px) scale(1); - } - } - @keyframes fadeInAnimation { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - `; -}; - -/** - * Retrieves CSS styles for a card. - * - * @param {Object} colors The colors to use for the card. - * @param {string} colors.titleColor The title color. - * @param {string} colors.textColor The text color. - * @param {string} colors.iconColor The icon color. - * @param {string} colors.ringColor The ring color. - * @param {boolean} colors.show_icons Whether to show icons. - * @param {number} colors.progress The progress value to animate to. - * @returns {string} Card CSS styles. - */ -const getStyles = ({ - // eslint-disable-next-line no-unused-vars - titleColor, - textColor, - iconColor, - ringColor, - show_icons, - progress, -}) => { - return ` - .stat { - font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor}; - } - @supports(-moz-appearance: auto) { - /* Selector detects Firefox */ - .stat { font-size:12px; } - } - .stagger { - opacity: 0; - animation: fadeInAnimation 0.3s ease-in-out forwards; - } - .rank-text { - font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; - animation: scaleInAnimation 0.3s ease-in-out forwards; - } - .rank-percentile-header { - font-size: 14px; - } - .rank-percentile-text { - font-size: 16px; - } - - .not_bold { font-weight: 400 } - .bold { font-weight: 700 } - .icon { - fill: ${iconColor}; - display: ${!!show_icons ? "block" : "none"}; - } - - .rank-circle-rim { - stroke: ${ringColor}; - fill: none; - stroke-width: 6; - opacity: 0.2; - } - .rank-circle { - stroke: ${ringColor}; - stroke-dasharray: 250; - fill: none; - stroke-width: 6; - stroke-linecap: round; - opacity: 0.8; - transform-origin: -10px 8px; - transform: rotate(-90deg); - animation: rankAnimation 1s forwards ease-in-out; - } - ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })} - `; -}; - -export { getAnimations, getStyles }; diff --git a/src/index.js b/src/index.js index 27577f80f58db..ca8d586db136b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,2 @@ export * from "./common/index.js"; export * from "./cards/index.js"; -export { getStyles, getAnimations } from "./getStyles.js"; diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap index 2050be022d9eb..69bd8ce3c6b6a 100644 --- a/tests/__snapshots__/renderWakatimeCard.test.js.snap +++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap @@ -38,42 +38,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1 opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; } - .rank-text { - font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; - animation: scaleInAnimation 0.3s ease-in-out forwards; - } - .rank-percentile-header { - font-size: 14px; - } - .rank-percentile-text { - font-size: 16px; - } - .not_bold { font-weight: 400 } .bold { font-weight: 700 } - .icon { - fill: #4c71f2; - display: none; - } - - .rank-circle-rim { - stroke: undefined; - fill: none; - stroke-width: 6; - opacity: 0.2; - } - .rank-circle { - stroke: undefined; - stroke-dasharray: 250; - fill: none; - stroke-width: 6; - stroke-linecap: round; - opacity: 0.8; - transform-origin: -10px 8px; - transform: rotate(-90deg); - animation: rankAnimation 1s forwards ease-in-out; - } - @keyframes slideInAnimation { from { @@ -224,42 +190,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; } - .rank-text { - font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; - animation: scaleInAnimation 0.3s ease-in-out forwards; - } - .rank-percentile-header { - font-size: 14px; - } - .rank-percentile-text { - font-size: 16px; - } - .not_bold { font-weight: 400 } .bold { font-weight: 700 } - .icon { - fill: #4c71f2; - display: none; - } - - .rank-circle-rim { - stroke: undefined; - fill: none; - stroke-width: 6; - opacity: 0.2; - } - .rank-circle { - stroke: undefined; - stroke-dasharray: 250; - fill: none; - stroke-width: 6; - stroke-linecap: round; - opacity: 0.8; - transform-origin: -10px 8px; - transform: rotate(-90deg); - animation: rankAnimation 1s forwards ease-in-out; - } - @keyframes slideInAnimation { from {