refactor: added reusable Card class to reduce code & test duplication (#260)

* refactor: added reusable Card class to reduce code & test duplication

* fix: top-langs card width & documented card_width option

src/Card.js

@@ -0,0 +1,139 @@
+const { FlexLayout } = require("./utils");
+const { getAnimations } = require("./getStyles");
+
+class Card {
+  constructor({
+    width = 100,
+    height = 100,
+    colors = {},
+    title = "",
+    titlePrefixIcon,
+  }) {
+    this.width = width;
+    this.height = height;
+
+    this.hideBorder = false;
+    this.hideTitle = false;
+
+    // returns theme based colors with proper overrides and defaults
+    this.colors = colors;
+    this.title = title;
+    this.css = "";
+
+    this.paddingX = 25;
+    this.paddingY = 35;
+    this.titlePrefixIcon = titlePrefixIcon;
+    this.animations = true;
+  }
+
+  disableAnimations() {
+    this.animations = false;
+  }
+
+  setCSS(value) {
+    this.css = value;
+  }
+
+  setHideBorder(value) {
+    this.hideBorder = value;
+  }
+
+  setHideTitle(value) {
+    this.hideTitle = value;
+    if (value) {
+      this.height -= 30;
+    }
+  }
+
+  setTitle(text) {
+    this.title = text;
+  }
+
+  renderTitle() {
+    const titleText = `
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >${this.title}</text>
+    `;
+
+    const prefixIcon = `
+      <svg
+        class="icon"
+        x="0"
+        y="-13"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        height="16"
+      >
+        ${this.titlePrefixIcon}
+      </svg>
+    `;
+    return `
+      <g
+        data-testid="card-title"
+        transform="translate(${this.paddingX}, ${this.paddingY})"
+      >
+        ${FlexLayout({
+          items: [this.titlePrefixIcon && prefixIcon, titleText],
+          gap: 25,
+        }).join("")}
+      </g>
+    `;
+  }
+
+  render(body) {
+    return `
+      <svg
+        width="${this.width}"
+        height="${this.height}"
+        viewBox="0 0 ${this.width} ${this.height}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: ${this.colors.titleColor};
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          ${this.css}
+
+          ${
+            process.env.NODE_ENV === "test" || !this.animations
+              ? ""
+              : getAnimations()
+          }
+        </style>
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#E4E2E2"
+          width="${this.width - 1}"
+          fill="${this.colors.bgColor}"
+          stroke-opacity="${this.hideBorder ? 0 : 1}"
+        />
+
+        ${this.hideTitle ? "" : this.renderTitle()}
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, ${
+            this.hideTitle ? this.paddingX : this.paddingY + 20
+          })"
+        >
+          ${body}
+        </g>
+      </svg>
+    `;
+  }
+}
+
+module.exports = Card;

src/getStyles.js

@@ -9,10 +9,23 @@ const calculateCircleProgress = (value) => {
   return percentage;
 };
 
-const getAnimations = ({ progress }) => {
+const getProgressAnimation = ({ progress }) => {
+  return `
+    @keyframes rankAnimation {
+      from {
+        stroke-dashoffset: ${calculateCircleProgress(0)};
+      }
+      to {
+        stroke-dashoffset: ${calculateCircleProgress(progress)};
+      }
+    }
+  `;
+};
+
+const getAnimations = () => {
   return `
     /* Animations */
-    @keyframes scaleIn {
+    @keyframes scaleInAnimation {
       from {
         transform: translate(-5px, 5px) scale(0);
       }
@@ -20,7 +33,7 @@ const getAnimations = ({ progress }) => {
         transform: translate(-5px, 5px) scale(1);
       }
     }
-    @keyframes fadeIn {
+    @keyframes fadeInAnimation {
       from {
         opacity: 0;
       }
@@ -28,14 +41,6 @@ const getAnimations = ({ progress }) => {
         opacity: 1;
       }
     }
-    @keyframes rankAnimation {
-      from {
-        stroke-dashoffset: ${calculateCircleProgress(0)};
-      }
-      to {
-        stroke-dashoffset: ${calculateCircleProgress(progress)};
-      }
-    }
   `;
 };
 
@@ -47,20 +52,16 @@ const getStyles = ({
   progress,
 }) => {
   return `
-    .header {
-      font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; 
-      animation: fadeIn 0.8s ease-in-out forwards;
-    }
-    .stat { 
+    .stat {
       font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
     }
-    .stagger { 
+    .stagger {
       opacity: 0;
-      animation: fadeIn 0.3s ease-in-out forwards;
+      animation: fadeInAnimation 0.3s ease-in-out forwards;
     }
-    .rank-text { 
+    .rank-text {
       font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; 
-      animation: scaleIn 0.3s ease-in-out forwards;
+      animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
     .bold { font-weight: 700 }
@@ -86,9 +87,8 @@ const getStyles = ({
       transform: rotate(-90deg);
       animation: rankAnimation 1s forwards ease-in-out;
     }
-
-    ${process.env.NODE_ENV === "test" ? "" : getAnimations({ progress })}
+    ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
   `;
 };
 
-module.exports = getStyles;
+module.exports = { getStyles, getAnimations };

src/renderRepoCard.js

@@ -7,6 +7,7 @@ const {
 } = require("../src/utils");
 const icons = require("./icons");
 const toEmoji = require("emoji-name-map");
+const Card = require("./Card");
 
 const renderRepoCard = (repo, options = {}) => {
   const {
@@ -84,68 +85,75 @@ const renderRepoCard = (repo, options = {}) => {
     `
     : "";
 
+  const iconWithLabel = (icon, label, testid) => {
+    return `
+      <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+        ${icon}
+      </svg>
+      <text data-testid="${testid}" class="gray" x="25">${label}</text>
+    `;
+  };
   const svgStars =
     stargazers.totalCount > 0 &&
-    `
-    <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-      ${icons.star}
-    </svg>
-    <text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
-  `;
-
+    iconWithLabel(icons.star, totalStars, "stargazers");
   const svgForks =
-    forkCount > 0 &&
-    `
-    <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-      ${icons.fork}
-    </svg>
-    <text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
-  `;
+    forkCount > 0 && iconWithLabel(icons.fork, totalForks, "forkcount");
 
-  return `
-    <svg version="1.1" width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
-      .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-      .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-      .icon { fill: ${iconColor} }
-      .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-      .badge rect { opacity: 0.2 }
-      </style>
+  const starAndForkCount = FlexLayout({
+    items: [svgStars, svgForks],
+    gap: 65,
+  }).join("");
 
-      <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
-      <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-        ${icons.contribs}
-      </svg>
+  const card = new Card({
+    title: header,
+    titlePrefixIcon: icons.contribs,
+    width: 400,
+    height,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+    },
+  });
 
-      <text x="50" y="38" class="header">${header}</text>
+  card.disableAnimations();
+  card.setHideBorder(false);
+  card.setHideTitle(false);
+  card.setCSS(`
+    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .icon { fill: ${iconColor} }
+    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+    .badge rect { opacity: 0.2 }
+  `);
 
-      ${
-        isTemplate
-          ? getBadgeSVG("Template")
-          : isArchived
-          ? getBadgeSVG("Archived")
-          : ""
-      }
+  return card.render(`
+    ${
+      isTemplate
+        ? getBadgeSVG("Template")
+        : isArchived
+        ? getBadgeSVG("Archived")
+        : ""
+    }
 
-      <text class="description" x="25" y="50">
-        ${multiLineDescription
-          .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
-          .join("")}
-      </text>
+    <text class="description" x="25" y="-5">
+      ${multiLineDescription
+        .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
+        .join("")}
+    </text>
 
-      <g transform="translate(0, ${height - 20})">
-        ${svgLanguage}
+    <g transform="translate(0, ${height - 75})">
+      ${svgLanguage}
 
-        <g 
-          data-testid="star-fork-group" 
-          transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
-        >
-          ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
-        </g>
+      <g
+        data-testid="star-fork-group" 
+        transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
+      >
+        ${starAndForkCount}
       </g>
-    </svg>
-  `;
+    </g>
+  `);
 };
 
 module.exports = renderRepoCard;

src/renderStatsCard.js

@@ -4,8 +4,9 @@ const {
   FlexLayout,
   encodeHTML,
 } = require("../src/utils");
-const getStyles = require("./getStyles");
+const { getStyles } = require("./getStyles");
 const icons = require("./icons");
+const Card = require("./Card");
 
 const createTextNode = ({ icon, label, value, id, index, showIcons }) => {
   const kValue = kFormatter(value);
@@ -52,7 +53,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     theme = "default",
   } = options;
 
-  const lheight = parseInt(line_height);
+  const lheight = parseInt(line_height, 10);
 
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, iconColor, bgColor } = getCardColors({
@@ -116,44 +117,11 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     hide_rank ? 0 : 150
   );
 
-  // the better user's score the the rank will be closer to zero so
-  // subtracting 100 to get the progress in 100%
-  const progress = 100 - rank.score;
-
-  const styles = getStyles({
-    titleColor,
-    textColor,
-    iconColor,
-    show_icons,
-    progress,
-  });
-
   // Conditionally rendered elements
-
-  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
-  const title = hide_title
-    ? ""
-    : `<text x="25" y="35" class="header">${encodeHTML(name)}'${apostrophe} GitHub Stats</text>`;
-
-  const border = `
-    <rect 
-      data-testid="card-bg"
-      x="0.5"
-      y="0.5"
-      width="494"
-      height="99%"
-      rx="4.5"
-      fill="${bgColor}"
-      stroke="#E4E2E2"
-      stroke-opacity="${hide_border ? 0 : 1}"
-    />
-  `;
-
   const rankCircle = hide_rank
     ? ""
-    : `<g data-testid="rank-circle" transform="translate(400, ${
-        height / 1.85
-      })">
+    : `<g data-testid="rank-circle" 
+          transform="translate(400, ${height / 2 - 50})">
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
@@ -169,34 +137,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         </g>
       </g>`;
 
-  if (hide_title) {
-    height -= 30;
-  }
+  // the better user's score the the rank will be closer to zero so
+  // subtracting 100 to get the progress in 100%
+  const progress = 100 - rank.score;
+  const cssStyles = getStyles({
+    titleColor,
+    textColor,
+    iconColor,
+    show_icons,
+    progress,
+  });
 
-  return `
-    <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-        ${styles}
-      </style>
-      
-      ${border}
-      ${title}
+  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
+  const card = new Card({
+    title: `${encodeHTML(name)}'${apostrophe} GitHub Stats`,
+    width: 495,
+    height,
+    colors: {
+      titleColor,
+      textColor,
+      iconColor,
+      bgColor,
+    },
+  });
 
-      <g data-testid="card-body-content" transform="translate(0, ${
-        hide_title ? -30 : 0
-      })">
-        ${rankCircle}
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(cssStyles);
 
-        <svg x="0" y="55">
-          ${FlexLayout({
-            items: statItems,
-            gap: lheight,
-            direction: "column",
-          }).join("")}
-        </svg>
-      </g>
-    </svg>
-  `;
+  return card.render(`
+    ${rankCircle}
+
+    <svg x="0" y="0">
+      ${FlexLayout({
+        items: statItems,
+        gap: lheight,
+        direction: "column",
+      }).join("")}
+    </svg> 
+  `);
 };
 
 module.exports = renderStatsCard;

src/renderTopLanguages.js

@@ -1,4 +1,5 @@
 const { getCardColors, FlexLayout, clampValue } = require("../src/utils");
+const Card = require("./Card");
 
 const createProgressNode = ({ width, color, name, progress }) => {
   const paddingRight = 95;
@@ -63,6 +64,7 @@ const lowercaseTrim = (name) => name.toLowerCase().trim();
 const renderTopLanguages = (topLangs, options = {}) => {
   const {
     hide_title,
+    hide_border,
     card_width,
     title_color,
     text_color,
@@ -170,29 +172,29 @@ const renderTopLanguages = (topLangs, options = {}) => {
     }).join("");
   }
 
-  if (hide_title) {
-    height -= 30;
-  }
+  const card = new Card({
+    title: "Most Used Languages",
+    width,
+    height,
+    colors: {
+      titleColor,
+      textColor,
+      bgColor,
+    },
+  });
 
-  return `
-    <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <style>
-        .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
-        .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-      </style>
-      <rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
+  card.disableAnimations();
+  card.setHideBorder(hide_border);
+  card.setHideTitle(hide_title);
+  card.setCSS(`
+    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+  `);
 
-      ${
-        hide_title
-          ? ""
-          : `<text data-testid="header" x="25" y="35" class="header">Most Used Languages</text>`
-      }
-
-      <svg data-testid="lang-items" x="25" y="${hide_title ? 25 : 55}">
-        ${finalLayout}
-      </svg>
+  return card.render(`
+    <svg data-testid="lang-items" x="25">
+      ${finalLayout}
     </svg>
-  `;
+  `);
 };
 
 module.exports = renderTopLanguages;