@stats-forge/github-stats-forge-core 0.0.2 → 0.2.0

package/src/cards/wakatime.ts

@@ -1,16 +1,18 @@
-import { Card } from '../common/Card.js';
-import { getLightDarkColors, isPrefixedHexColor } from '../common/color.js';
-import { encodeHTML } from '../common/html.js';
-import { I18n } from '../common/I18n.js';
-import { getLanguageColor } from '../common/languageColors.js';
-import { clampValue, lowercaseTrim } from '../common/ops.js';
-import { createProgressNode, flexLayout } from '../common/render.js';
-import type { WakaTimeData, WakaTimeLang } from '../fetchers/types.js';
-import { wakatimeCardLocales } from '../translations.js';
-
-import type { CardOptions, CommonCardOptions } from './options.js';
-
-const DEFAULT_CARD_WIDTH = 495;
+import { CARD_ICON, CARD_WIDTH, FONT_WEIGHT, firefoxFontSize, font } from '../common/brand.ts';
+import { Card } from '../common/Card.ts';
+import { getLightDarkColors, isPrefixedHexColor } from '../common/color.ts';
+import { I18n } from '../common/I18n.ts';
+import { getLanguageColor } from '../common/languageColors.ts';
+import { clampValue, lowercaseTrim } from '../common/ops.ts';
+import { createProgressNode, flexLayout } from '../common/render.ts';
+import type { WakaTimeData, WakaTimeLang } from '../fetchers/types.ts';
+import type { Child, CssChild, MarkupElement } from '../markup/index.ts';
+import { atRule, el, rule } from '../markup/index.ts';
+import { wakatimeCardLocales } from '../translations.ts';
+
+import type { CardOptions, CommonCardOptions } from './options.ts';
+
+const DEFAULT_CARD_WIDTH = CARD_WIDTH.wide;
 const MIN_CARD_WIDTH = 250;
 const COMPACT_LAYOUT_MIN_WIDTH = 400;
 const DEFAULT_LINE_HEIGHT = 25;
@@ -44,22 +46,14 @@ interface WakaTimeOptions extends CommonCardOptions {
 /**
  * Creates the no coding activity SVG node.
  *
- * @param props The function properties.
- * @param props.text No coding activity translated text.
  * @returns No coding activity SVG node string.
  */
-const noCodingActivityNode = ({ text }: { text: string }): string => {
-  return `
-    <text x="25" y="11" class="stat bold">${encodeHTML(text)}</text>
-  `;
-};
+const noCodingActivityNode = ({ text }: { text: string }): MarkupElement =>
+  el('text', { x: 25, y: 11, class: 'stat bold' }, text);
 
 /**
  * Format language value.
  *
- * @param args The function arguments.
- * @param args.lang The language object.
- * @param args.display_format The display format of the language node.
  * @returns The formatted language value.
  */
 const formatLanguageValue = ({
@@ -68,18 +62,11 @@ const formatLanguageValue = ({
 }: {
   display_format: DisplayFormat;
   lang: WakaTimeLang;
-}): string => {
-  return display_format === 'percent' ? `${lang.percent.toFixed(2)} %` : lang.text;
-};
+}): string => (display_format === 'percent' ? `${lang.percent.toFixed(2)} %` : lang.text);
 
 /**
  * Create compact WakaTime layout.
  *
- * @param args The function arguments.
- * @param args.lang The languages array.
- * @param args.x The x position of the language node.
- * @param args.y The y position of the language node.
- * @param args.display_format The display format of the language node.
  * @returns The compact layout language SVG node.
  */
 const createCompactLangNode = ({
@@ -92,35 +79,32 @@ const createCompactLangNode = ({
   x: number;
   y: number;
   display_format: DisplayFormat;
-}): string => {
+}): MarkupElement => {
   if (!Number.isFinite(x)) {
-    throw new Error(`Invalid x: "${x}"`);
+    throw new TypeError(`Invalid x: "${x}"`);
   }
   if (!Number.isFinite(y)) {
-    throw new Error(`Invalid y: "${y}"`);
+    throw new TypeError(`Invalid y: "${y}"`);
   }
 
   const color = getLanguageColor(lang.name);
   const value = formatLanguageValue({ display_format, lang });
 
-  return `
-    <g transform="translate(${x}, ${y})">
-      <circle cx="5" cy="6" r="5" fill="${color}" />
-      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${encodeHTML(lang.name)} - ${encodeHTML(value)}
-      </text>
-    </g>
-  `;
+  return el(
+    'g',
+    { transform: `translate(${x}, ${y})` },
+    el('circle', { cx: 5, cy: 6, r: 5, fill: color }),
+    el(
+      'text',
+      { 'data-testid': 'lang-name', x: 15, y: 10, class: 'lang-name' },
+      `${lang.name} - ${value}`,
+    ),
+  );
 };
 
 /**
  * Create WakaTime language text node item.
  *
- * @param args The function arguments.
- * @param args.langs The language objects.
- * @param args.y The y position of the language node.
- * @param args.display_format The display format of the language node.
- * @param args.card_width Width in px of the card.
  * @returns The language text node items.
  */
 const createLanguageTextNode = ({
@@ -133,7 +117,7 @@ const createLanguageTextNode = ({
   y: number;
   display_format: DisplayFormat;
   card_width: number;
-}): Array<string> => {
+}): Array<Child> => {
   const LEFT_X = 25;
   const RIGHT_X_BASE = 230;
   const rightOffset = (card_width - DEFAULT_CARD_WIDTH) / 2;
@@ -153,14 +137,6 @@ const createLanguageTextNode = ({
 /**
  * Create WakaTime text item.
  *
- * @param args The function arguments.
- * @param args.id The id of the text node item.
- * @param args.label The label of the text node item.
- * @param args.value The value of the text node item.
- * @param args.index The index of the text node item.
- * @param args.percent Percentage of the text node item.
- * @param args.hideProgress Whether to hide the progress bar.
- * @param args.progressBarWidth The width of the progress bar.
  * @returns The text SVG node.
  */
 const createTextNode = ({
@@ -179,87 +155,85 @@ const createTextNode = ({
   percent: number;
   hideProgress?: boolean | undefined;
   progressBarWidth: number;
-}): string => {
+}): MarkupElement => {
   if (!Number.isFinite(index)) {
-    throw new Error(`Invalid index: "${index}"`);
+    throw new TypeError(`Invalid index: "${index}"`);
   }
   if (!Number.isFinite(progressBarWidth)) {
-    throw new Error(`Invalid progressBarWidth: "${progressBarWidth}"`);
+    throw new TypeError(`Invalid progressBarWidth: "${progressBarWidth}"`);
   }
 
   const staggerDelay = (index + 3) * 150;
-  const cardProgress = hideProgress
-    ? null
-    : createProgressNode({
+
+  return el(
+    'g',
+    {
+      class: 'stagger',
+      style: `animation-delay: ${staggerDelay}ms`,
+      transform: 'translate(25, 0)',
+    },
+    el('text', { class: 'stat bold', y: 12.5, 'data-testid': id }, `${label}:`),
+    el(
+      'text',
+      {
+        class: 'stat',
+        x: hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth,
+        y: 12.5,
+      },
+      value,
+    ),
+    !hideProgress &&
+      createProgressNode({
         x: 110,
         y: 4,
         progress: percent,
         width: progressBarWidth,
         delay: staggerDelay + 300,
-      });
-
-  return `
-    <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
-      <text class="stat bold" y="12.5" data-testid="${encodeHTML(id)}">${encodeHTML(label)}:</text>
-      <text
-        class="stat"
-        x="${hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth}"
-        y="12.5"
-      >${encodeHTML(value)}</text>
-      ${String(cardProgress)}
-    </g>
-  `;
+      }),
+  );
 };
 
 /**
  * Recalculating percentages so that, compact layout's progress bar does not break when
  * hiding languages.
- *
- * @param languages The languages array.
  */
 const recalculatePercentages = (languages: Array<WakaTimeLang>): void => {
-  const totalSum = languages.reduce((totalSum, language) => totalSum + language.percent, 0);
-  const weight = +(100 / totalSum).toFixed(2);
-  languages.forEach((language) => {
-    language.percent = +(language.percent * weight).toFixed(2);
-  });
+  const totalSum = languages.reduce((sum, language) => sum + language.percent, 0);
+  const weight = Number((100 / totalSum).toFixed(2));
+  for (const language of languages) {
+    language.percent = Number((language.percent * weight).toFixed(2));
+  }
 };
 
 /**
  * Retrieves CSS styles for a card.
  *
- * @param colors The colors to use for the card.
- * @param colors.textColor The text color.
  * @returns Card CSS styles.
  */
-const getStyles = ({ textColor }: { textColor: string }): string => {
+const getStyles = ({ textColor }: { textColor: string }): Array<CssChild> => {
   if (!isPrefixedHexColor(textColor)) {
     throw new Error(`Invalid text color: "${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 }
-  `;
+  return [
+    rule('.stat', {
+      font: font('regular', 'body'),
+      fill: textColor,
+    }),
+    firefoxFontSize(['.stat'], 'small'),
+    rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
+    rule('.not_bold', { 'font-weight': FONT_WEIGHT.regular }),
+    rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
+  ];
 };
 
+/** A bar the same color as the text behind it would be invisible, so it goes transparent. */
+const progressBackground = (titleColor: string, textColor: string): string =>
+  textColor === titleColor ? '#fff0' : textColor;
+
 /**
  * Normalize incoming width (string or number) and clamp to minimum.
  *
- * @param args The function arguments.
- * @param args.layout The incoming layout value.
- * @param args.value The incoming width value.
  * @returns The normalized width value.
  */
 const normalizeCardWidth = ({
@@ -269,7 +243,7 @@ const normalizeCardWidth = ({
   value?: number | undefined;
   layout?: WakaTimeLayout | undefined;
 }): number => {
-  if (value === undefined || isNaN(value)) {
+  if (value === undefined || Number.isNaN(value)) {
     return DEFAULT_CARD_WIDTH;
   }
   return Math.max(layout === 'compact' ? COMPACT_LAYOUT_MIN_WIDTH : MIN_CARD_WIDTH, value);
@@ -278,13 +252,11 @@ const normalizeCardWidth = ({
 /**
  * Renders WakaTime card.
  *
- * @param stats WakaTime stats.
- * @param options Card options.
  * @returns WakaTime card SVG.
  */
-const renderWakatimeCard = (
+const renderCard = (
   stats: Partial<WakaTimeData> = {},
-  options: CardOptions<WakaTimeOptions> = { hide: [] },
+  options: CardOptions<WakaTimeOptions> = {},
 ): string => {
   let { languages = [] } = stats;
   const {
@@ -321,7 +293,7 @@ const renderWakatimeCard = (
     translations: wakatimeCardLocales,
   });
 
-  const lheight = parseInt(String(line_height), 10);
+  const lheight = Number.parseInt(String(line_height), 10);
 
   const langsCount = clampValue(langs_count, 1, langs_count);
 
@@ -331,11 +303,10 @@ const renderWakatimeCard = (
     .filter((language) => language.hours || language.minutes)
     .slice(0, langsCount);
 
-  // Calculate the card height depending on how many items there are
-  // but if rank circle is visible clamp the minimum height to `150`
+  // A short language list would otherwise draw a stub card, so 150 is the floor.
   let height = Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
 
-  let finalLayout: string;
+  let finalLayout: Child;
 
   // RENDER COMPACT LAYOUT
   if (layout === 'compact') {
@@ -345,92 +316,100 @@ const renderWakatimeCard = (
     // progressOffset holds the previous language's width and used to offset the next language
     // so that we can stack them one after another, like this: [--][----][---]
     let progressOffset = 0;
-    const compactProgressBar = filteredLanguages
-      .map((language) => {
-        const progress = ((width - COMPACT_LAYOUT_PROGRESSBAR_PADDING) * language.percent) / 100;
-
-        const languageColor = getLanguageColor(language.name);
-
-        const output = `
-          <rect
-            mask="url(#rect-mask)"
-            data-testid="lang-progress"
-            x="${progressOffset}"
-            y="0"
-            width="${progress}"
-            height="8"
-            fill="${languageColor}"
-          />
-        `;
-        progressOffset += progress;
-        return output;
-      })
-      .join('');
-
-    finalLayout = `
-      <mask id="rect-mask">
-      <rect x="${COMPACT_LAYOUT_PROGRESSBAR_PADDING}" y="0" width="${width - 2 * COMPACT_LAYOUT_PROGRESSBAR_PADDING}" height="8" fill="white" rx="5" />
-      </mask>
-      ${compactProgressBar}
-      ${
-        filteredLanguages.length
-          ? createLanguageTextNode({
-              y: 25,
-              langs: filteredLanguages,
-              display_format,
-              card_width: normalizedWidth,
-            }).join('')
-          : noCodingActivityNode({
-              text: stats.is_coding_activity_visible
-                ? stats.is_other_usage_visible
-                  ? i18n.t('wakatimecard.nocodingactivity')
-                  : i18n.t('wakatimecard.nocodedetails')
-                : i18n.t('wakatimecard.notpublic'),
-            })
-      }
-    `;
+    const compactProgressBar = filteredLanguages.map((language) => {
+      const progress = ((width - COMPACT_LAYOUT_PROGRESSBAR_PADDING) * language.percent) / 100;
+      const x = progressOffset;
+      progressOffset += progress;
+
+      return el('rect', {
+        mask: 'url(#rect-mask)',
+        'data-testid': 'lang-progress',
+        x,
+        y: 0,
+        width: progress,
+        height: 8,
+        fill: getLanguageColor(language.name),
+      });
+    });
+
+    finalLayout = [
+      el(
+        'mask',
+        { id: 'rect-mask' },
+        el('rect', {
+          x: COMPACT_LAYOUT_PROGRESSBAR_PADDING,
+          y: 0,
+          width: width - 2 * COMPACT_LAYOUT_PROGRESSBAR_PADDING,
+          height: 8,
+          fill: 'white',
+          rx: 5,
+        }),
+      ),
+      compactProgressBar,
+      filteredLanguages.length > 0
+        ? createLanguageTextNode({
+            y: 25,
+            langs: filteredLanguages,
+            display_format,
+            card_width: normalizedWidth,
+          })
+        : noCodingActivityNode({
+            text: stats.is_coding_activity_visible
+              ? stats.is_other_usage_visible
+                ? i18n.t('wakatimecard.nocodingactivity')
+                : i18n.t('wakatimecard.nocodedetails')
+              : i18n.t('wakatimecard.notpublic'),
+          }),
+    ];
   } else {
     finalLayout = flexLayout({
-      items: filteredLanguages.length
-        ? filteredLanguages.map((language, index) => {
-            return createTextNode({
-              id: language.name,
-              label: language.name,
-              value: formatLanguageValue({ display_format, lang: language }),
-              index,
-              percent: language.percent,
-              hideProgress: hide_progress,
-              progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
-            });
-          })
-        : [
-            noCodingActivityNode({
-              text: stats.is_coding_activity_visible
-                ? stats.is_other_usage_visible
-                  ? i18n.t('wakatimecard.nocodingactivity')
-                  : i18n.t('wakatimecard.nocodedetails')
-                : i18n.t('wakatimecard.notpublic'),
-            }),
-          ],
+      items:
+        filteredLanguages.length > 0
+          ? filteredLanguages.map((language, index) =>
+              createTextNode({
+                id: language.name,
+                label: language.name,
+                value: formatLanguageValue({ display_format, lang: language }),
+                index,
+                percent: language.percent,
+                hideProgress: hide_progress,
+                progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
+              }),
+            )
+          : [
+              noCodingActivityNode({
+                text: stats.is_coding_activity_visible
+                  ? stats.is_other_usage_visible
+                    ? i18n.t('wakatimecard.nocodingactivity')
+                    : i18n.t('wakatimecard.nocodedetails')
+                  : i18n.t('wakatimecard.notpublic'),
+              }),
+            ],
       gap: lheight,
       direction: 'column',
-    }).join('');
+    });
   }
 
   // Get title range text
   let titleText = i18n.t('wakatimecard.title');
   switch (stats.range) {
-    case 'last_7_days':
+    case 'last_7_days': {
       titleText += ` (${i18n.t('wakatimecard.last7days')})`;
       break;
-    case 'last_year':
+    }
+    case 'last_year': {
       titleText += ` (${i18n.t('wakatimecard.lastyear')})`;
       break;
+    }
+    default: {
+      break;
+    }
   }
 
   const card = new Card({
     customTitle: custom_title,
     defaultTitle: titleText,
+    titlePrefixIcon: CARD_ICON.wakatime,
     width: normalizedWidth,
     height,
     border_radius,
@@ -444,58 +423,61 @@ const renderWakatimeCard = (
   card.setHideBorder(hide_border);
   card.setHideTitle(hide_title);
   card.setCSS({
-    light: ({ titleColor, textColor }) => `
-    ${getStyles({ textColor })}
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
-    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-      fill: ${titleColor};
-    }
-    .progress-background { fill: ${textColor === titleColor ? '#fff0' /* transparent */ : textColor}; }
-    `,
-    dark: ({ titleColor, textColor }) => `
-      ${getStyles({ textColor })}
-      .lang-name { fill: ${textColor} }
-      .lang-progress { fill: ${titleColor}; }
-      .progress-background { fill: ${textColor === titleColor ? '#fff0' /* transparent */ : textColor}; }
-    `,
+    light: ({ titleColor, textColor }) => [
+      getStyles({ textColor }),
+      atRule(
+        '@keyframes slideInAnimation',
+        rule('from', { width: 0 }),
+        // Invalid on purpose — `calc` needs spaces around its `-`. Browsers drop the
+        // declaration and animate to the rect's own width, which is the reveal the mask wants.
+        rule('to', { width: 'calc(100%-100px)' }),
+      ),
+      atRule(
+        '@keyframes growWidthAnimation',
+        rule('from', { width: 0 }),
+        rule('to', { width: '100%' }),
+      ),
+      rule('.lang-name', { font: font('regular', 'micro'), fill: textColor }),
+      rule('#rect-mask rect', { animation: 'slideInAnimation 1s ease-in-out forwards' }),
+      rule('.lang-progress', {
+        animation: 'growWidthAnimation 0.6s ease-in-out forwards',
+        fill: titleColor,
+      }),
+      rule('.progress-background', { fill: progressBackground(titleColor, textColor) }),
+    ],
+    dark: ({ titleColor, textColor }) => [
+      getStyles({ textColor }),
+      rule('.lang-name', { fill: textColor }),
+      rule('.lang-progress', { fill: titleColor }),
+      rule('.progress-background', { fill: progressBackground(titleColor, textColor) }),
+    ],
   });
 
   // `role="img"` hides the inner text from assistive tech, so everything the card
   // shows has to be repeated here.
   card.setAccessibilityLabel({
     title: card.title,
-    desc: filteredLanguages.length
-      ? filteredLanguages
-          .map((lang) => `${lang.name}: ${formatLanguageValue({ display_format, lang })}`)
-          .join(', ')
-      : i18n.t('wakatimecard.nocodingactivity'),
+    desc:
+      filteredLanguages.length > 0
+        ? filteredLanguages
+            .map((lang) => `${lang.name}: ${formatLanguageValue({ display_format, lang })}`)
+            .join(', ')
+        : i18n.t('wakatimecard.nocodingactivity'),
   });
 
-  return card.render(`
-    <svg x="0" y="0" width="100%">
-      ${finalLayout}
-    </svg>
-  `);
+  return card.render(el('svg', { x: 0, y: 0, width: '100%' }, finalLayout));
 };
 
-export { DISPLAY_FORMATS, WAKATIME_LAYOUTS, renderWakatimeCard };
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+const renderWakatimeCard = Object.assign(renderCard, {
+  OPTIONS: {
+    layout: WAKATIME_LAYOUTS,
+    display_format: DISPLAY_FORMATS,
+  },
+});
+
+export { renderWakatimeCard };