Feature/grs 1955 change commonjs imports (#1995)

* GRS-1955: Using ES6 import/export in src files

* GRS-1955: Using ES6 import/export in test files

* GRS-1955: Using ES6 import/export in themes index.js

* GRS-1955: Readding blank line at end of top-languages-card.js

* feat: fix test es6 import errors

This commit makes sure jest is set-up to support es6. It also fixes
several test errors and sorts the imports.

* test: update test node version

This commit makes sure node 16 is used in the github actions.

* refactor: run prettier

Co-authored-by: rickstaa <rick.staa@outlook.com>

scripts/generate-langs-json.js

@@ -1,6 +1,6 @@
-const fs = require("fs");
-const jsYaml = require("js-yaml");
-const axios = require("axios");
+import axios from "axios";
+import fs from "fs";
+import jsYaml from "js-yaml";
 
 const LANGS_FILEPATH = "./src/common/languageColors.json";
 

scripts/generate-theme-doc.js

@@ -1,5 +1,5 @@
-const theme = require("../themes/index");
-const fs = require("fs");
+import fs from "fs";
+import { themes } from "../themes/index";
 
 const TARGET_FILE = "./themes/README.md";
 const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
@@ -54,7 +54,7 @@ const createStatMdLink = (theme) => {
 };
 
 const generateLinks = (fn) => {
-  return Object.keys(theme)
+  return Object.keys(themes)
     .map((name) => fn(name))
     .join("");
 };
@@ -65,7 +65,7 @@ const createTableItem = ({ link, label, isRepoCard }) => {
 };
 const generateTable = ({ isRepoCard }) => {
   const rows = [];
-  const themes = Object.keys(theme).filter(
+  const themes = Object.keys(themes).filter(
     (name) => name !== (!isRepoCard ? "default_repocard" : "default"),
   );
 

scripts/preview-theme.js

@@ -1,11 +1,12 @@
-const core = require("@actions/core");
-const github = require("@actions/github");
-const parse = require("parse-diff");
-const Hjson = require("hjson");
-const snakeCase = require("lodash.snakecase");
-const ColorContrastChecker = require("color-contrast-checker");
+import core from "@actions/core";
+import github from "@actions/github";
+import ColorContrastChecker from "color-contrast-checker";
+import * as dotenv from "dotenv";
+import Hjson from "hjson";
+import snakeCase from "lodash.snakecase";
+import parse from "parse-diff";
 
-require("dotenv").config();
+dotenv.config();
 
 const OWNER = "anuraghazra";
 const REPO = "github-readme-stats";
@@ -76,10 +77,10 @@ function getGrsLink(colors) {
 }
 
 const themeContribGuidelines = `
-  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).  
+  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).
   \rWe are currently only accepting color combinations from any VSCode theme or themes which have good color combination to minimize bloating the themes collection.
 
-  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization) 
+  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization)
 `;
 
 async function run() {
@@ -128,7 +129,7 @@ async function run() {
         issue_number: pullRequestId,
         body: `
         \r**${COMMENT_TITLE}**
-        
+
         \rCannot create theme preview
 
         ${themeContribGuidelines}
@@ -167,16 +168,16 @@ async function run() {
       owner: OWNER,
       repo: REPO,
       body: `
-      \r**${COMMENT_TITLE}**  
-      
+      \r**${COMMENT_TITLE}**
+
       \r${warnings.map((warning) => `- :warning: ${warning}\n`).join("")}
 
       \ntitle_color: <code>#${titleColor}</code> | icon_color: <code>#${iconColor}</code> | text_color: <code>#${textColor}</code> | bg_color: <code>#${bgColor}</code>
-      
+
       \r[Preview Link](${url})
 
       \r[![](${url})](${url})
-      
+
       ${themeContribGuidelines}
       `,
     });

scripts/push-theme-readme.sh

@@ -11,4 +11,4 @@ git checkout -b $BRANCH_NAME
 git add --all
 git commit --message "docs(theme): Auto update theme readme" || exit 0
 git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
-git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME
+git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME