Add types for common directory (#2153)

* Add types for common directory * Reflect the code reviews * style: improve syntax * style: improve typescript syntax Co-authored-by: rickstaa <rick.staa@outlook.com>
2022-10-16 10:33:33 +02:00
parent bcda6ce01e
commit c624fe9507
13 changed files with 309 additions and 88 deletions
@@ -11,16 +11,7 @@ import {
 import { getStyles } from "../getStyles";
 import { wakatimeCardLocales } from "../translations";

-/** Import language colors.
- *
- * @description Here we use the workaround found in
- * https://stackoverflow.com/questions/66726365/how-should-i-import-json-in-node
- * since vercel is using v16.14.0 which does not yet support json imports without the
- * --experimental-json-modules flag.
- */
-import { createRequire } from "module";
-const require = createRequire(import.meta.url);
-const languageColors = require("../common/languageColorson"); // now works
+import languageColors from "../common/languageColors.json";

 /**
 * @param {{color: string, text: string}} param0
@@ -1,7 +1,78 @@
 import { getAnimations } from "../getStyles";
 import { encodeHTML, flexLayout } from "./utils";

-class Card {
+/** Card colors. */
+export interface CardColors {
+  /** Title color. */
+  titleColor: string;
+  /** Text color. */
+  textColor: string;
+  /** Icon color. */
+  iconColor: string;
+  /** Background color. */
+  bgColor: string;
+  /** Border color. */
+  borderColor: string;
+}
+
+/** Accessibility label. */
+interface AccessibilityLabel {
+  /** The label to display. */
+  title: string;
+  /** The value to display. */
+  desc: string;
+}
+
+/** Card properties. */
+interface CardProps {
+  /** Card width. */
+  width: number;
+  /** Card height. */
+  height: number;
+  /** Card border radius. */
+  border_radius: number;
+  /** Card colors. */
+  colors: CardColors | {};
+  /** Card title. */
+  customTitle?: string;
+  /** Card default title. */
+  defaultTitle?: string;
+  /** Card title prefix icon. */
+  titlePrefixIcon?: string;
+}
+
+/**
+ * Card class.
+ */
+export class Card {
+  /** Card width. */
+  width: number;
+  /** Card height. */
+  height: number;
+  /** Whether the card border is hidden. */
+  hideBorder: boolean;
+  /** Whether the card title is hidden. */
+  hideTitle: boolean;
+  /** Border radius. */
+  border_radius: number;
+  /** Card colors. */
+  colors: CardColors | {};
+  /** Card title. */
+  title: string;
+  /** Card css. */
+  css: string;
+  /** Card x padding. */
+  paddingX: number;
+  /** Card y padding. */
+  paddingY: number;
+  /** Card title prefix icon. */
+  titlePrefixIcon?: string;
+  /** Whether the card is animated. */
+  animations: boolean;
+  /** Accessibility label title. */
+  a11yTitle: string;
+  /** Accessibility label description. */
+  a11yDesc: string;
  /**
   * @param {object} args
   * @param {number?=} args.width
@@ -20,7 +91,7 @@ class Card {
    customTitle,
    defaultTitle = "",
    titlePrefixIcon,
-  }) {
+  }: CardProps) {
    this.width = width;
    this.height = height;

@@ -53,7 +124,7 @@ class Card {
  /**
   * @param {{title: string, desc: string}} prop
   */
-  setAccessibilityLabel({ title, desc }) {
+  setAccessibilityLabel({ title, desc }: AccessibilityLabel) {
    this.a11yTitle = title;
    this.a11yDesc = desc;
  }
@@ -61,21 +132,21 @@ class Card {
  /**
   * @param {string} value
   */
-  setCSS(value) {
+  setCSS(value: string) {
    this.css = value;
  }

  /**
   * @param {boolean} value
   */
-  setHideBorder(value) {
+  setHideBorder(value: boolean) {
    this.hideBorder = value;
  }

  /**
   * @param {boolean} value
   */
-  setHideTitle(value) {
+  setHideTitle(value: boolean) {
    this.hideTitle = value;
    if (value) {
      this.height -= 30;
@@ -85,7 +156,7 @@ class Card {
  /**
   * @param {string} text
   */
-  setTitle(text) {
+  setTitle(text: string) {
    this.title = text;
  }

@@ -137,7 +208,7 @@ class Card {
            gradientTransform="rotate(${this.colors.bgColor[0]})"
            gradientUnits="userSpaceOnUse"
          >
-            ${gradients.map((grad, index) => {
+            ${gradients.map((grad: string, index: number) => {
              let offset = (index * 100) / (gradients.length - 1);
              return `<stop offset="${offset}%" stop-color="#${grad}" />`;
            })}
@@ -150,7 +221,7 @@ class Card {
  /**
   * @param {string} body
   */
-  render(body) {
+  render(body: string) {
    return `
      <svg
        width="${this.width}"
@@ -215,6 +286,3 @@ class Card {
    `;
  }
 }
-
-export { Card };
-export default Card;
@@ -1,11 +1,29 @@
-class I18n {
-  constructor({ locale, translations }) {
+type Translations = Record<string, Record<string, string>>;
+
+/**
+ * I18n translation class.
+ */
+export class I18n {
+  /** The language locale. */
+  locale?: string;
+  /** The translations object. */
+  translations: Translations;
+  /** The fallback language locale. */
+  fallbackLocale: string;
+
+  constructor({
+    locale,
+    translations,
+  }: {
+    locale?: string;
+    translations: Translations;
+  }) {
    this.locale = locale;
    this.translations = translations;
    this.fallbackLocale = "en";
  }

-  t(str) {
+  t(str: string) {
    if (!this.translations[str]) {
      throw new Error(`${str} Translation string not found`);
    }
@@ -17,6 +35,3 @@ class I18n {
    return this.translations[str][this.locale || this.fallbackLocale];
  }
 }
-
-export { I18n };
-export default I18n;
@@ -1,4 +1,2 @@
-const blacklist = ["renovate-bot", "technote-space", "sw-yx"];
-
-export { blacklist };
-export default blacklist;
+/** User blacklist. */
+export const blacklist = ["renovate-bot", "technote-space", "sw-yx"];
@@ -1,11 +1,19 @@
 import { clampValue } from "./utils";

-interface IcreateProgressNode {
+
+/** CreateProgressNode properties. */
+interface CreateProgressNodeProps {
+  /** Progress bar item x position. */
  x: number;
+  /** Progress bar item y position.. */
  y: number;
+  /** Progress bar item width. */
  width: number;
+  /** Progress bar item color. */
  color: string;
+  /** Progress value. */
  progress: number;
+  /** Progress bar item background color. */
  progressBarBackgroundColor: string;
 }

@@ -16,7 +24,7 @@ const createProgressNode = ({
  color,
  progress,
  progressBarBackgroundColor,
-}: IcreateProgressNode) => {
+}: CreateProgressNodeProps) => {
  const progressPercentage = clampValue(progress, 2, 100);

  return `
@@ -1,4 +1,7 @@
-const icons = {
+
+export type Icons = {[key: string]: string};
+
+const icons: Icons = {
  star: `<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>`,
  commits: `<path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"/>`,
  prs: `<path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>`,
@@ -1,5 +1,22 @@
+import axios, {
+  AxiosError,
+  AxiosPromise,
+  AxiosRequestHeaders,
+  AxiosResponse,
+} from "axios";
 import { CustomError, logger } from "./utils";

+
+/** Data fetcher. */
+type Fetcher = (
+  /** Fetcher variables. */
+  variables: AxiosRequestHeaders,
+  /** Authentication token. */
+  token: string,
+  /** The number of retries. */
+  retries?: number,
+) => AxiosPromise<any>
+
 /**
 * Try to execute the fetcher function until it succeeds or the max number of retries is reached.
 *
@@ -9,7 +26,11 @@ import { CustomError, logger } from "./utils";
 * @param {number} retryerParams.retries How many times to retry.
 * @returns Promise<retryer>
 */
-const retryer = async (fetcher, variables, retries = 0) => {
+export const retryer = async (
+  fetcher: Fetcher,
+  variables: AxiosRequestHeaders,
+  retries = 0,
+): Promise<any> => {
  if (retries > 7) {
    throw new CustomError("Maximum retries exceeded", CustomError.MAX_RETRY);
  }
@@ -17,7 +38,7 @@ const retryer = async (fetcher, variables, retries = 0) => {
    // try to fetch with the first token since RETRIES is 0 index i'm adding +1
    let response = await fetcher(
      variables,
-      process.env[`PAT_${retries + 1}`],
+      process.env[`PAT_${retries + 1}`] as string,
      retries,
    );

@@ -36,18 +57,17 @@ const retryer = async (fetcher, variables, retries = 0) => {
    // finally return the response
    return response;
  } catch (err) {
-    // prettier-ignore
-    // also checking for bad credentials if any tokens gets invalidated
-    const isBadCredential = err.response.data && err.response.data.message === "Bad credentials";
+    if (axios.isAxiosError(err)) {
+      // prettier-ignore
+      // also checking for bad credentials if any tokens gets invalidated
+      const isBadCredential = err?.response?.data && err.response.data.message === "Bad credentials";

-    if (isBadCredential) {
-      logger.log(`PAT_${retries + 1} Failed`);
-      retries++;
-      // directly return from the function
-      return retryer(fetcher, variables, retries);
+      if (isBadCredential) {
+        logger.log(`PAT_${retries + 1} Failed`);
+        retries++;
+        // directly return from the function
+        return retryer(fetcher, variables, retries);
+      }
    }
  }
 };
-
-export { retryer };
-export default retryer;
@@ -1,15 +1,16 @@
 // @ts-check
-import axios from "axios";
+import axios, { AxiosRequestConfig, AxiosRequestHeaders } from "axios";
 import toEmoji from "emoji-name-map";
 import wrap from "word-wrap";
 import { themes } from "../../themes/index";
+import type { ThemeEnum } from "../../themes/index";

 /**
 * @param {string} message
 * @param {string} secondaryMessage
 * @returns {string}
 */
-const renderError = (message, secondaryMessage = "") => {
+const renderError = (message: string, secondaryMessage = "") => {
  return `
    <svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
@@ -32,7 +33,7 @@ const renderError = (message, secondaryMessage = "") => {
 * @param {string} str
 * @returns {string}
 */
-function encodeHTML(str) {
+function encodeHTML(str: string) {
  return str
    .replace(/[\u00A0-\u9999<>&](?!#)/gim, (i) => {
      return "&#" + i.charCodeAt(0) + ";";
@@ -43,7 +44,7 @@ function encodeHTML(str) {
 /**
 * @param {number} num
 */
-function kFormatter(num) {
+function kFormatter(num: number) {
  return Math.abs(num) > 999
    ? Math.sign(num) * parseFloat((Math.abs(num) / 1000).toFixed(1)) + "k"
    : Math.sign(num) * Math.abs(num);
@@ -53,7 +54,7 @@ function kFormatter(num) {
 * @param {string} hexColor
 * @returns {boolean}
 */
-function isValidHexColor(hexColor) {
+function isValidHexColor(hexColor: string) {
  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);
@@ -63,7 +64,7 @@ function isValidHexColor(hexColor) {
 * @param {string} value
 * @returns {boolean | string}
 */
-function parseBoolean(value) {
+function parseBoolean(value: string) {
  if (value === "true") {
    return true;
  } else if (value === "false") {
@@ -79,7 +80,7 @@ function parseBoolean(value) {
 * @param {string} str The string to parse.
 * @returns {string[]} The array of strings.
 */
-function parseArray(str) {
+function parseArray(str: string) {
  if (!str) return [];
  return str.split(",");
 }
@@ -92,7 +93,7 @@ function parseArray(str) {
 * @param {number} max The maximum value.
 * returns {number} The clamped number.
 */
-function clampValue(number, min, max) {
+function clampValue(number: number, min: number, max: number) {
  // @ts-ignore
  if (Number.isNaN(parseInt(number))) return min;
  return Math.max(min, Math.min(number, max));
@@ -104,7 +105,7 @@ function clampValue(number, min, max) {
 * @param {string[]} colors Array of colors.
 * returns {boolean} True if the given string is a valid gradient.
 */
-function isValidGradient(colors) {
+function isValidGradient(colors: string[]) {
  return isValidHexColor(colors[1]) && isValidHexColor(colors[2]);
 }

@@ -113,7 +114,7 @@ function isValidGradient(colors) {
 * @param {string} fallbackColor
 * @returns {string | string[]}
 */
-function fallbackColor(color, fallbackColor) {
+function fallbackColor(color: string, fallbackColor: string) {
  let colors = color.split(",");
  let gradient = null;

@@ -131,7 +132,10 @@ function fallbackColor(color, fallbackColor) {
 * @param {import('axios').AxiosRequestConfig['data']} data
 * @param {import('axios').AxiosRequestConfig['headers']} headers
 */
-function request(data, headers) {
+function request(
+  data: AxiosRequestConfig["data"],
+  headers: AxiosRequestHeaders,
+) {
  // @ts-ignore
  return axios({
    url: "https://api.github.com/graphql",
@@ -154,16 +158,26 @@ function request(data, headers) {
 * Auto layout utility, allows us to layout things
 * vertically or horizontally with proper gaping
 */
-function flexLayout({ items, gap, direction, sizes = [] }) {
+function flexLayout({
+  items,
+  gap,
+  direction,
+  sizes = [],
+}: {
+  items: string[];
+  gap: number;
+  direction?: "column" | "row";
+  sizes?: number[];
+}) {
  let lastSize = 0;
  // filter() for filtering out empty strings
-  return items.filter(Boolean).map((item, i) => {
+  return items.filter(Boolean).map((item: string, i: number) => {
    const size = sizes[i] || 0;
    let transform = `translate(${lastSize}, 0)`;
    if (direction === "column") {
      transform = `translate(0, ${lastSize})`;
    }
-    lastSize += size + gap;
+    lastSize += ((size as number) + gap) as number;
    return `<g transform="${transform}">${item}</g>`;
  });
 }
@@ -183,13 +197,21 @@ function flexLayout({ items, gap, direction, sizes = [] }) {
 * @param {CardColors} options
 */
 function getCardColors({
-  title_color,
-  text_color,
-  icon_color,
-  bg_color,
-  border_color,
+  title_color = "",
+  text_color = "",
+  icon_color = "",
+  bg_color = "",
+  border_color = "",
  theme,
  fallbackTheme = "default",
+}: {
+  title_color?: string;
+  text_color?: string;
+  icon_color?: string;
+  bg_color?: string;
+  border_color?: string;
+  theme: ThemeEnum;
+  fallbackTheme?: "default";
 }) {
  const defaultTheme = themes[fallbackTheme];
  const selectedTheme = themes[theme] || defaultTheme;
@@ -229,7 +251,7 @@ function getCardColors({
 * @param {number} maxLines
 * @returns {string[]}
 */
-function wrapTextMultiline(text, width = 59, maxLines = 3) {
+function wrapTextMultiline(text: string, width = 59, maxLines = 3) {
  const fullWidthComma = "，";
  const encoded = encodeHTML(text);
  const isChinese = encoded.includes(fullWidthComma);
@@ -275,26 +297,30 @@ const SECONDARY_ERROR_MESSAGES = {
 };

 class CustomError extends Error {
+  type: string;
+  secondaryMessage?: string;
  /**
   * @param {string} message
   * @param {string} type
   */
-  constructor(message, type) {
+  constructor(message: string, type: keyof typeof SECONDARY_ERROR_MESSAGES) {
    super(message);
    this.type = type;
    this.secondaryMessage = SECONDARY_ERROR_MESSAGES[type] || type;
  }

-  static MAX_RETRY = "MAX_RETRY";
-  static USER_NOT_FOUND = "USER_NOT_FOUND";
+  static MAX_RETRY = "MAX_RETRY" as "MAX_RETRY";
+  static USER_NOT_FOUND = "USER_NOT_FOUND" as "USER_NOT_FOUND";
 }

 class MissingParamError extends Error {
+  missedParams: string[];
+  secondaryMessage?: string;
  /**
   * @param {string[]} missedParams
   * @param {string?=} secondaryMessage
   */
-  constructor(missedParams, secondaryMessage) {
+  constructor(missedParams: string[], secondaryMessage?: string) {
    const msg = `Missing params ${missedParams
      .map((p) => `"${p}"`)
      .join(", ")} make sure you pass the parameters in URL`;
@@ -310,7 +336,7 @@ class MissingParamError extends Error {
 * @param {number} fontSize
 * @returns
 */
-function measureText(str, fontSize = 10) {
+function measureText(str: string, fontSize = 10) {
  // prettier-ignore
  const widths = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
@@ -345,23 +371,23 @@ function measureText(str, fontSize = 10) {
 }

 /** @param {string} name */
-const lowercaseTrim = (name) => name.toLowerCase().trim();
+const lowercaseTrim = (name: string) => name.toLowerCase().trim();

 /**
 * @template T
 * @param {Array<T>} arr
 * @param {number} perChunk
- * @returns {Array<T>}
+ * @returns {Array<T><T>}
 */
-function chunkArray(arr, perChunk) {
-  return arr.reduce((resultArray, item, index) => {
+function chunkArray<T>(arr: Array<T>, perChunk: number) {
+  return arr.reduce((resultArray: Array<T> | Array<Array<T>>, item, index) => {
    const chunkIndex = Math.floor(index / perChunk);

    if (!resultArray[chunkIndex]) {
      resultArray[chunkIndex] = []; // start a new chunk
    }

-    resultArray[chunkIndex].push(item);
+    (resultArray[chunkIndex] as Array<T>).push(item);

    return resultArray;
  }, []);
@@ -372,7 +398,7 @@ function chunkArray(arr, perChunk) {
 * @param {string} str
 * @returns {string}
 */
-function parseEmojis(str) {
+function parseEmojis(str: string) {
  if (!str) throw new Error("[parseEmoji]: str argument not provided");
  return str.replace(/:\w+:/gm, (emoji) => {
    return toEmoji.get(emoji) || "";
@@ -1,12 +1,13 @@
 // @ts-check
+import { AxiosRequestHeaders } from "axios";
 import { retryer } from "../common/retryer";
 import { MissingParamError, request } from "../common/utils";

 /**
- * @param {import('Axios').AxiosRequestHeaders} variables
+ * @param {AxiosRequestHeaders} variables
 * @param {string} token
 */
-const fetcher = (variables, token) => {
+const fetcher = (variables: AxiosRequestHeaders, token: string) => {
  return request(
    {
      query: `
@@ -55,7 +56,7 @@ const urlExample = "/api/pin?username=USERNAME&amp;repo=REPO_NAME";
 * @param {string} reponame
 * @returns {Promise<import("./types").RepositoryData>}
 */
-async function fetchRepo(username, reponame) {
+async function fetchRepo(username: string, reponame: string) {
  if (!username && !reponame) {
    throw new MissingParamError(["username", "repo"], urlExample);
  }
@@ -0,0 +1,6 @@
+/**
+ * @file Contains global type definitions.
+ */
+
+// Declare global emoji-name-map module since it doesn't have a type definition.
+declare module "emoji-name-map";
@@ -0,0 +1,3 @@
+/**
+ * @file Contains shared types.
+ */
@@ -1,4 +1,27 @@
-export const themes = {
+
+/** Theme properties. */
+interface ThemeProperties {
+  /** Title color. */
+  title_color: string;
+  /** Icon color. */
+  icon_color: string;
+  /** Text color. */
+  text_color: string;
+  /** Background color. */
+  bg_color: string;
+  /** Border color. */
+  border_color: string;
+}
+
+/** Card theme. */
+interface Theme {
+  [index: string]: ThemeProperties;
+}
+
+/**
+ * Themes for the cards.
+ */
+export const themes: Theme = {
  default: {
    title_color: "2f80ed",
    icon_color: "4c71f2",
@@ -11,348 +34,406 @@ export const themes = {
    icon_color: "586069", // icon color is different
    text_color: "434d58",
    bg_color: "fffefe",
+    border_color: "",
  },
  transparent: {
    title_color: "006AFF",
    icon_color: "0579C3",
    text_color: "417E87",
    bg_color: "ffffff00",
+    border_color: "",
  },
  dark: {
    title_color: "fff",
    icon_color: "79ff97",
    text_color: "9f9f9f",
    bg_color: "151515",
+    border_color: "",
  },
  radical: {
    title_color: "fe428e",
    icon_color: "f8d847",
    text_color: "a9fef7",
    bg_color: "141321",
+    border_color: "",
  },
  merko: {
    title_color: "abd200",
    icon_color: "b7d364",
    text_color: "68b587",
    bg_color: "0a0f0b",
+    border_color: "",
  },
  gruvbox: {
    title_color: "fabd2f",
    icon_color: "fe8019",
    text_color: "8ec07c",
    bg_color: "282828",
+    border_color: "",
  },
  gruvbox_light: {
    title_color: "b57614",
    icon_color: "af3a03",
    text_color: "427b58",
    bg_color: "fbf1c7",
+    border_color: "",
  },
  tokyonight: {
    title_color: "70a5fd",
    icon_color: "bf91f3",
    text_color: "38bdae",
    bg_color: "1a1b27",
+    border_color: "",
  },
  onedark: {
    title_color: "e4bf7a",
    icon_color: "8eb573",
    text_color: "df6d74",
    bg_color: "282c34",
+    border_color: "",
  },
  cobalt: {
    title_color: "e683d9",
    icon_color: "0480ef",
    text_color: "75eeb2",
    bg_color: "193549",
+    border_color: "",
  },
  synthwave: {
    title_color: "e2e9ec",
    icon_color: "ef8539",
    text_color: "e5289e",
    bg_color: "2b213a",
+    border_color: "",
  },
  highcontrast: {
    title_color: "e7f216",
    icon_color: "00ffff",
    text_color: "fff",
    bg_color: "000",
+    border_color: "",
  },
  dracula: {
    title_color: "ff6e96",
    icon_color: "79dafa",
    text_color: "f8f8f2",
    bg_color: "282a36",
+    border_color: "",
  },
  prussian: {
    title_color: "bddfff",
    icon_color: "38a0ff",
    text_color: "6e93b5",
    bg_color: "172f45",
+    border_color: "",
  },
  monokai: {
    title_color: "eb1f6a",
    icon_color: "e28905",
    text_color: "f1f1eb",
    bg_color: "272822",
+    border_color: "",
  },
  vue: {
    title_color: "41b883",
    icon_color: "41b883",
    text_color: "273849",
    bg_color: "fffefe",
+    border_color: "",
  },
  "vue-dark": {
    title_color: "41b883",
    icon_color: "41b883",
    text_color: "fffefe",
    bg_color: "273849",
+    border_color: "",
  },
  "shades-of-purple": {
    title_color: "fad000",
    icon_color: "b362ff",
    text_color: "a599e9",
    bg_color: "2d2b55",
+    border_color: "",
  },
  nightowl: {
    title_color: "c792ea",
    icon_color: "ffeb95",
    text_color: "7fdbca",
    bg_color: "011627",
+    border_color: "",
  },
  buefy: {
    title_color: "7957d5",
    icon_color: "ff3860",
    text_color: "363636",
    bg_color: "ffffff",
+    border_color: "",
  },
  "blue-green": {
    title_color: "2f97c1",
    icon_color: "f5b700",
    text_color: "0cf574",
    bg_color: "040f0f",
+    border_color: "",
  },
  algolia: {
    title_color: "00AEFF",
    icon_color: "2DDE98",
    text_color: "FFFFFF",
    bg_color: "050F2C",
+    border_color: "",
  },
  "great-gatsby": {
    title_color: "ffa726",
    icon_color: "ffb74d",
    text_color: "ffd95b",
    bg_color: "000000",
+    border_color: "",
  },
  darcula: {
    title_color: "BA5F17",
    icon_color: "84628F",
    text_color: "BEBEBE",
    bg_color: "242424",
+    border_color: "",
  },
  bear: {
    title_color: "e03c8a",
    icon_color: "00AEFF",
    text_color: "bcb28d",
    bg_color: "1f2023",
+    border_color: "",
  },
  "solarized-dark": {
    title_color: "268bd2",
    icon_color: "b58900",
    text_color: "859900",
    bg_color: "002b36",
+    border_color: "",
  },
  "solarized-light": {
    title_color: "268bd2",
    icon_color: "b58900",
    text_color: "859900",
    bg_color: "fdf6e3",
+    border_color: "",
  },
  "chartreuse-dark": {
    title_color: "7fff00",
    icon_color: "00AEFF",
    text_color: "fff",
    bg_color: "000",
+    border_color: "",
  },
  nord: {
    title_color: "81a1c1",
    text_color: "d8dee9",
    icon_color: "88c0d0",
    bg_color: "2e3440",
+    border_color: "",
  },
  gotham: {
    title_color: "2aa889",
    icon_color: "599cab",
    text_color: "99d1ce",
    bg_color: "0c1014",
+    border_color: "",
  },
  "material-palenight": {
    title_color: "c792ea",
    icon_color: "89ddff",
    text_color: "a6accd",
    bg_color: "292d3e",
+    border_color: "",
  },
  graywhite: {
    title_color: "24292e",
    icon_color: "24292e",
    text_color: "24292e",
    bg_color: "ffffff",
+    border_color: "",
  },
  "vision-friendly-dark": {
    title_color: "ffb000",
    icon_color: "785ef0",
    text_color: "ffffff",
    bg_color: "000000",
+    border_color: "",
  },
  "ayu-mirage": {
    title_color: "f4cd7c",
    icon_color: "73d0ff",
    text_color: "c7c8c2",
    bg_color: "1f2430",
+    border_color: "",
  },
  "midnight-purple": {
    title_color: "9745f5",
    icon_color: "9f4bff",
    text_color: "ffffff",
    bg_color: "000000",
+    border_color: "",
  },
  calm: {
    title_color: "e07a5f",
    icon_color: "edae49",
    text_color: "ebcfb2",
    bg_color: "373f51",
+    border_color: "",
  },
  "flag-india": {
    title_color: "ff8f1c",
    icon_color: "250E62",
    text_color: "509E2F",
    bg_color: "ffffff",
+    border_color: "",
  },
  omni: {
    title_color: "FF79C6",
    icon_color: "e7de79",
    text_color: "E1E1E6",
    bg_color: "191622",
+    border_color: "",
  },
  react: {
    title_color: "61dafb",
    icon_color: "61dafb",
    text_color: "ffffff",
    bg_color: "20232a",
+    border_color: "",
  },
  jolly: {
    title_color: "ff64da",
    icon_color: "a960ff",
    text_color: "ffffff",
    bg_color: "291B3E",
+    border_color: "",
  },
  maroongold: {
    title_color: "F7EF8A",
    icon_color: "F7EF8A",
    text_color: "E0AA3E",
    bg_color: "260000",
+    border_color: "",
  },
  yeblu: {
    title_color: "ffff00",
    icon_color: "ffff00",
    text_color: "ffffff",
    bg_color: "002046",
+    border_color: "",
  },
  blueberry: {
    title_color: "82aaff",
    icon_color: "89ddff",
    text_color: "27e8a7",
    bg_color: "242938",
+    border_color: "",
  },
  slateorange: {
    title_color: "faa627",
    icon_color: "faa627",
    text_color: "ffffff",
    bg_color: "36393f",
+    border_color: "",
  },
  kacho_ga: {
    title_color: "bf4a3f",
    icon_color: "a64833",
    text_color: "d9c8a9",
    bg_color: "402b23",
+    border_color: "",
  },
  outrun: {
    title_color: "ffcc00",
    icon_color: "ff1aff",
    text_color: "8080ff",
    bg_color: "141439",
+    border_color: "",
  },
  ocean_dark: {
    title_color: "8957B2",
    icon_color: "FFFFFF",
    text_color: "92D534",
    bg_color: "151A28",
+    border_color: "",
  },
  city_lights: {
    title_color: "5D8CB3",
    icon_color: "4798FF",
    text_color: "718CA1",
    bg_color: "1D252C",
+    border_color: "",
  },
  github_dark: {
    title_color: "58A6FF",
    icon_color: "1F6FEB",
    text_color: "C3D1D9",
    bg_color: "0D1117",
+    border_color: "",
  },
  discord_old_blurple: {
    title_color: "7289DA",
    icon_color: "7289DA",
    text_color: "FFFFFF",
    bg_color: "2C2F33",
+    border_color: "",
  },
  aura_dark: {
    title_color: "ff7372",
    icon_color: "6cffd0",
    text_color: "dbdbdb",
    bg_color: "252334",
+    border_color: "",
  },
  panda: {
    title_color: "19f9d899",
    icon_color: "19f9d899",
    text_color: "FF75B5",
    bg_color: "31353a",
+    border_color: "",
  },
  noctis_minimus: {
    title_color: "d3b692",
    icon_color: "72b7c0",
    text_color: "c5cdd3",
    bg_color: "1b2932",
+    border_color: "",
  },
  cobalt2: {
    title_color: "ffc600",
    icon_color: "ffffff",
    text_color: "0088ff",
    bg_color: "193549",
+    border_color: "",
  },
  swift: {
    title_color: "000000",
    icon_color: "f05237",
    text_color: "000000",
    bg_color: "f7f7f7",
+    border_color: "",
  },
  aura: {
    title_color: "a277ff",
    icon_color: "ffca85",
    text_color: "61ffca",
    bg_color: "15141b",
+    border_color: "",
  },
  apprentice: {
    title_color: "ffffff",
    icon_color: "ffffaf",
    text_color: "bcbcbc",
    bg_color: "262626",
+    border_color: "",
  },
  moltack: {
    title_color: "86092C",
    icon_color: "86092C",
    text_color: "574038",
    bg_color: "F5E1C0",
+    border_color: "",
  },
  codeSTACKr: {
    title_color: "ff652f",
@@ -366,7 +447,8 @@ export const themes = {
    icon_color: "ebbcba",
    text_color: "e0def4",
    bg_color: "191724",
+    border_color: "",
  },
 };

-export default themes;
+export type ThemeEnum = keyof typeof themes;
@@ -27,15 +27,15 @@
    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    "typeRoots": ["./node_modules/@types", "./src/types"],
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */