refactor: move themes list to typescript (@fehmer) (monkeytypegame#6489)

Co-authored-by: fehmer <[email protected]>

Author: fehmer

docs/THEMES.md

@@ -36,16 +36,29 @@ Then add this code to your file:
 Here is an image showing what all the properties correspond to:
 <img width="1552" alt="Screenshot showing the page elements controlled by each color property" src="https://user-images.githubusercontent.com/83455454/149196967-abb69795-0d38-466b-a867-5aaa46452976.png">
 
-Change the corresponding hex codes to create your theme. Then, go to `./frontend/static/themes/_list.json` and add the following code to the very end of the file (inside the square brackets):
-
-```json
-  {
-    "name": "theme_name",
-    "bgColor": "#ffffff",
-    "mainColor": "#ffffff",
-    "subColor": "#ffffff",
-    "textColor": "#ffffff"
+Change the corresponding hex codes to create your theme. 
+Then, go to `./packages/contracts/src/schemas/themes.ts` and add your new theme name at the _end_ of the `ThemeNameSchema` enum. Make sure to end the line with a comma. 
+
+```typescript
+export const ThemeNameSchema = z.enum([
+  "8008",
+  "80s_after_dark",
+  ...
+  "your_theme_name",
+```
+
+Then, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the _end_ of the `themes` object near to the very end of the file:
+
+```typescript
+export const themes: Record<ThemeName, Omit<Theme, "name">> = {
+  ...
+  your_theme_name: {
+    bgColor "#ffffff",
+    mainColor "#ffffff",
+    subColor "#ffffff",
+    textColor "#ffffff"
   },
+}
 ```
 
 Make sure the name you put matches the name of the file you created (without the `.css` file extension). Add the text color and background color of your theme to their respective fields.

frontend/__tests__/constants/themes.spec.ts

@@ -0,0 +1,38 @@
+import { readdirSync } from "fs";
+import { ThemesList } from "../../src/ts/constants/themes";
+
+describe("themes", () => {
+  it("should not have duplicates", () => {
+    const duplicates = ThemesList.filter(
+      (item, index) => ThemesList.indexOf(item) !== index
+    );
+    expect(duplicates).toEqual([]);
+  });
+  it("should have all related css files", () => {
+    const themeFiles = listThemeFiles();
+
+    const missingThemeFiles = ThemesList.filter(
+      (it) => !themeFiles.includes(it.name)
+    ).map((it) => `fontend/static/themes/${it}.css`);
+
+    expect(missingThemeFiles, "missing theme css files").toEqual([]);
+  });
+  it("should not have additional css files", () => {
+    const themeFiles = listThemeFiles();
+
+    const additionalThemeFiles = themeFiles
+      .filter((it) => !ThemesList.some((theme) => theme.name === it))
+      .map((it) => `fontend/static/themes/${it}.css`);
+
+    expect(
+      additionalThemeFiles,
+      "additional theme css files not declared in frontend/src/ts/constants/themes.ts"
+    ).toEqual([]);
+  });
+});
+
+function listThemeFiles() {
+  return readdirSync(import.meta.dirname + "/../../static/themes").map((it) =>
+    it.substring(0, it.length - 4)
+  );
+}

frontend/__tests__/root/config.spec.ts

@@ -328,11 +328,9 @@ describe("Config", () => {
   });
   it("setFavThemes", () => {
     expect(Config.setFavThemes([])).toBe(true);
-    expect(Config.setFavThemes(["test"])).toBe(true);
-    expect(Config.setFavThemes([stringOfLength(50)])).toBe(true);
-
+    expect(Config.setFavThemes(["8008", "80s_after_dark"])).toBe(true);
+    expect(Config.setFavThemes(["test"] as any)).toBe(false);
     expect(Config.setFavThemes("invalid" as any)).toBe(false);
-    expect(Config.setFavThemes([stringOfLength(51)])).toBe(false);
   });
   it("setFunbox", () => {
     expect(Config.setFunbox(["mirror"])).toBe(true);
@@ -407,29 +405,20 @@ describe("Config", () => {
   it("setTheme", () => {
     expect(Config.setTheme("serika")).toBe(true);
     expect(Config.setTheme("serika_dark")).toBe(true);
-    expect(Config.setTheme(stringOfLength(50))).toBe(true);
 
-    expect(Config.setTheme("serika dark")).toBe(false);
-    expect(Config.setTheme("serika-dark")).toBe(false);
-    expect(Config.setTheme(stringOfLength(51))).toBe(false);
+    expect(Config.setTheme("invalid" as any)).toBe(false);
   });
   it("setThemeLight", () => {
     expect(Config.setThemeLight("serika")).toBe(true);
     expect(Config.setThemeLight("serika_dark")).toBe(true);
-    expect(Config.setThemeLight(stringOfLength(50))).toBe(true);
 
-    expect(Config.setThemeLight("serika dark")).toBe(false);
-    expect(Config.setThemeLight("serika-dark")).toBe(false);
-    expect(Config.setThemeLight(stringOfLength(51))).toBe(false);
+    expect(Config.setThemeLight("invalid" as any)).toBe(false);
   });
   it("setThemeDark", () => {
     expect(Config.setThemeDark("serika")).toBe(true);
     expect(Config.setThemeDark("serika_dark")).toBe(true);
-    expect(Config.setThemeDark(stringOfLength(50))).toBe(true);
 
-    expect(Config.setThemeDark("serika dark")).toBe(false);
-    expect(Config.setThemeDark("serika-dark")).toBe(false);
-    expect(Config.setThemeDark(stringOfLength(51))).toBe(false);
+    expect(Config.setThemeDark("invalid" as any)).toBe(false);
   });
   it("setLanguage", () => {
     expect(Config.setLanguage("english")).toBe(true);

frontend/scripts/json-validation.cjs

@@ -47,46 +47,6 @@ function validateOthers() {
       return reject(new Error(fontsValidator.errors[0].message));
     }
 
-    //themes
-    const themesData = JSON.parse(
-      fs.readFileSync("./static/themes/_list.json", {
-        encoding: "utf8",
-        flag: "r",
-      })
-    );
-    const themesSchema = {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          name: { type: "string" },
-          bgColor: { type: "string" },
-          mainColor: { type: "string" },
-        },
-        required: ["name", "bgColor", "mainColor"],
-      },
-    };
-    const themesValidator = ajv.compile(themesSchema);
-    if (themesValidator(themesData)) {
-      console.log("Themes list JSON schema is \u001b[32mvalid\u001b[0m");
-    } else {
-      console.log("Themes list JSON schema is \u001b[31minvalid\u001b[0m");
-      return reject(new Error(themesValidator.errors[0].message));
-    }
-    //check if files exist
-    for (const theme of themesData) {
-      const themeName = theme.name;
-      const fileName = `${themeName}.css`;
-      const themePath = `./static/themes/${fileName}`;
-      if (!fs.existsSync(themePath)) {
-        console.log(`File ${fileName} was \u001b[31mnot found\u001b[0m`);
-        // return reject(new Error(`File for theme ${themeName} does not exist`));
-        return reject(
-          `Could not find file ${fileName} for theme ${themeName} - make sure the file exists and is named correctly`
-        );
-      }
-    }
-
     //challenges
     const challengesSchema = {
       type: "array",

frontend/src/ts/commandline/lists.ts

@@ -77,7 +77,7 @@ import CustomThemesListCommands from "./lists/custom-themes-list";
 import PresetsCommands from "./lists/presets";
 import LayoutsCommands from "./lists/layouts";
 import FunboxCommands from "./lists/funbox";
-import ThemesCommands, { update as updateThemesCommands } from "./lists/themes";
+import ThemesCommands from "./lists/themes";
 import LoadChallengeCommands, {
   update as updateLoadChallengeCommands,
 } from "./lists/load-challenge";
@@ -130,17 +130,6 @@ fontsPromise
     );
   });
 
-const themesPromise = JSONData.getThemesList();
-themesPromise
-  .then((themes) => {
-    updateThemesCommands(themes);
-  })
-  .catch((e: unknown) => {
-    console.error(
-      Misc.createErrorMessage(e, "Failed to update themes commands")
-    );
-  });
-
 const challengesPromise = JSONData.getChallengeList();
 challengesPromise
   .then((challenges) => {
@@ -501,12 +490,7 @@ export function doesListExist(listName: string): boolean {
 export async function getList(
   listName: ListsObjectKeys
 ): Promise<CommandsSubgroup> {
-  await Promise.allSettled([
-    languagesPromise,
-    fontsPromise,
-    themesPromise,
-    challengesPromise,
-  ]);
+  await Promise.allSettled([languagesPromise, fontsPromise, challengesPromise]);
   const list = lists[listName];
   if (!list) {
     Notifications.add(`List not found: ${listName}`, -1);
@@ -547,12 +531,7 @@ export function getTopOfStack(): CommandsSubgroup {
 
 let singleList: CommandsSubgroup | undefined;
 export async function getSingleSubgroup(): Promise<CommandsSubgroup> {
-  await Promise.allSettled([
-    languagesPromise,
-    fontsPromise,
-    themesPromise,
-    challengesPromise,
-  ]);
+  await Promise.allSettled([languagesPromise, fontsPromise, challengesPromise]);
 
   const singleCommands: Command[] = [];
   for (const command of commands.list) {

frontend/src/ts/commandline/lists/add-or-remove-theme-to-favorites.ts

@@ -1,3 +1,4 @@
+import { ThemeName } from "@monkeytype/contracts/schemas/configs";
 import Config, * as UpdateConfig from "../../config";
 import { randomTheme } from "../../controllers/theme-controller";
 import { Command } from "../types";
@@ -10,14 +11,14 @@ const commands: Command[] = [
     available: (): boolean => {
       return (
         !Config.customTheme &&
-        !Config.favThemes.includes(randomTheme ?? Config.theme)
+        !Config.favThemes.includes((randomTheme as ThemeName) ?? Config.theme)
       );
     },
     exec: (): void => {
       const { theme, favThemes, customTheme } = Config;
       const themeToUpdate = randomTheme ?? theme;
-      if (!customTheme && !favThemes.includes(themeToUpdate)) {
-        UpdateConfig.setFavThemes([...favThemes, themeToUpdate]);
+      if (!customTheme && !favThemes.includes(themeToUpdate as ThemeName)) {
+        UpdateConfig.setFavThemes([...favThemes, themeToUpdate as ThemeName]);
       }
     },
   },
@@ -28,12 +29,12 @@ const commands: Command[] = [
     available: (): boolean => {
       return (
         !Config.customTheme &&
-        Config.favThemes.includes(randomTheme ?? Config.theme)
+        Config.favThemes.includes((randomTheme as ThemeName) ?? Config.theme)
       );
     },
     exec: (): void => {
       const { theme, favThemes, customTheme } = Config;
-      const themeToUpdate = randomTheme ?? theme;
+      const themeToUpdate = (randomTheme as ThemeName) ?? theme;
       if (!customTheme && favThemes.includes(themeToUpdate)) {
         UpdateConfig.setFavThemes([
           ...favThemes.filter((t) => t !== themeToUpdate),

frontend/src/ts/commandline/lists/themes.ts

@@ -2,12 +2,37 @@ import Config, * as UpdateConfig from "../../config";
 import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 import * as ThemeController from "../../controllers/theme-controller";
 import { Command, CommandsSubgroup } from "../types";
-import { Theme } from "../../utils/json-data";
+import { Theme, ThemesList } from "../../constants/themes";
+import { not } from "@monkeytype/util/predicates";
+
+const isFavorite = (theme: Theme): boolean =>
+  Config.favThemes.includes(theme.name);
 
 const subgroup: CommandsSubgroup = {
   title: "Theme...",
   configKey: "theme",
-  list: [],
+  list: [
+    ...ThemesList.filter(isFavorite),
+    ...ThemesList.filter(not(isFavorite)),
+  ].map((theme: Theme) => ({
+    id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
+    display: theme.name.replace(/_/g, " "),
+    configValue: theme.name,
+    // customStyle: `color:${theme.mainColor};background:${theme.bgColor};`,
+    customData: {
+      mainColor: theme.mainColor,
+      bgColor: theme.bgColor,
+      subColor: theme.subColor,
+      textColor: theme.textColor,
+    },
+    hover: (): void => {
+      // previewTheme(theme.name);
+      ThemeController.preview(theme.name);
+    },
+    exec: (): void => {
+      UpdateConfig.setTheme(theme.name);
+    },
+  })),
 };
 
 const commands: Command[] = [
@@ -19,54 +44,4 @@ const commands: Command[] = [
   },
 ];
 
-function update(themes: Theme[]): void {
-  subgroup.list = [];
-  const favs: Command[] = [];
-  themes.forEach((theme) => {
-    if (Config.favThemes.includes(theme.name)) {
-      favs.push({
-        id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
-        display: theme.name.replace(/_/g, " "),
-        configValue: theme.name,
-        // customStyle: `color:${theme.mainColor};background:${theme.bgColor};`,
-        customData: {
-          mainColor: theme.mainColor,
-          bgColor: theme.bgColor,
-          subColor: theme.subColor,
-          textColor: theme.textColor,
-        },
-        hover: (): void => {
-          // previewTheme(theme.name);
-          ThemeController.preview(theme.name);
-        },
-        exec: (): void => {
-          UpdateConfig.setTheme(theme.name);
-        },
-      });
-    } else {
-      subgroup.list.push({
-        id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
-        display: theme.name.replace(/_/g, " "),
-        configValue: theme.name,
-        // customStyle: `color:${theme.mainColor};background:${theme.bgColor}`,
-        customData: {
-          mainColor: theme.mainColor,
-          bgColor: theme.bgColor,
-          subColor: theme.subColor,
-          textColor: theme.textColor,
-        },
-        hover: (): void => {
-          // previewTheme(theme.name);
-          ThemeController.preview(theme.name);
-        },
-        exec: (): void => {
-          UpdateConfig.setTheme(theme.name);
-        },
-      });
-    }
-  });
-  subgroup.list = [...favs, ...subgroup.list];
-}
-
 export default commands;
-export { update };