refactor: remove tinycolor from core (#1993)

Author: tyler-dane

bun.lock

@@ -7,15 +7,13 @@
   "main": "",
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
-    "@types/tinycolor2": "^1.4.6",
     "typescript": "^6.0.3"
   },
   "dependencies": {
     "bson": "^7.2.0",
     "dayjs": "^1.11.19",
     "eventemitter2": "^6.4.9",
     "rxjs": "^7.8.2",
-    "tinycolor2": "^1.6.0",
     "winston": "^3.8.1",
     "yaml": "^2.9.0",
     "zod": "^3.25.76"

packages/core/package.json

@@ -1,6 +1,5 @@
 import { faker } from "@faker-js/faker";
 import { type gSchema$CalendarListEntry } from "@core/types/gcal";
-import { generateCalendarColorScheme } from "@core/util/color.utils";
 
 /**
  * Generates a mock Google Calendar calendar list entry.
@@ -11,8 +10,6 @@ import { generateCalendarColorScheme } from "@core/util/color.utils";
 export const createMockCalendarListEntry = (
   overrides: Partial<gSchema$CalendarListEntry> = {},
 ): gSchema$CalendarListEntry => {
-  const { backgroundColor, color } = generateCalendarColorScheme();
-
   return {
     kind: "calendar#calendarListEntry",
     id: "test-calendar",
@@ -22,8 +19,8 @@ export const createMockCalendarListEntry = (
     description: faker.lorem.paragraph({ min: 1, max: 3 }),
     timeZone: faker.location.timeZone(),
     colorId: faker.number.int({ min: 1, max: 24 }).toString(),
-    backgroundColor,
-    foregroundColor: color,
+    backgroundColor: "#9e9e9e",
+    foregroundColor: "#000000",
     selected: true,
     accessRole: faker.helpers.arrayElement(["reader", "writer", "owner"]),
     defaultReminders: [],

packages/core/src/__tests__/helpers/gcal.factory.ts

@@ -31,4 +31,16 @@ describe("MapCalendar.gcalToCompass", () => {
       }),
     );
   });
+
+  it("uses stable colors when google omits them", () => {
+    const googleCalendar = createMockCalendarListEntry({
+      backgroundColor: undefined,
+      foregroundColor: undefined,
+    });
+
+    const result = MapCalendar.gcalToCompass(new ObjectId(), googleCalendar);
+
+    expect(result.backgroundColor).toBe("#9e9e9e");
+    expect(result.color).toBe("#000000");
+  });
 });

packages/core/src/mappers/map.calendar.test.ts

@@ -5,17 +5,13 @@ import {
 } from "@core/types/calendar.types";
 import { CalendarProvider } from "@core/types/event.types";
 import { type gSchema$CalendarListEntry } from "@core/types/gcal";
-import { generateCalendarColorScheme } from "@core/util/color.utils";
 import dayjs from "@core/util/date/dayjs";
 
 export class MapCalendar {
   static gcalToCompass(
     user: ObjectId | string,
     googleCalendar: gSchema$CalendarListEntry,
   ) {
-    // generate fallback colors
-    const { backgroundColor, color } = generateCalendarColorScheme();
-
     const metadata = GoogleCalendarMetadataSchema.parse({
       ...googleCalendar,
       provider: CalendarProvider.GOOGLE,
@@ -24,8 +20,8 @@ export class MapCalendar {
     return CompassCalendarSchema.parse({
       _id: new ObjectId(),
       user,
-      backgroundColor: googleCalendar.backgroundColor ?? backgroundColor,
-      color: googleCalendar.foregroundColor ?? color,
+      backgroundColor: googleCalendar.backgroundColor ?? "#9e9e9e",
+      color: googleCalendar.foregroundColor ?? "#000000",
       selected: googleCalendar.selected ?? true,
       primary: googleCalendar.primary ?? false,
       timezone: googleCalendar.timeZone ?? dayjs.tz.guess(),

packages/core/src/mappers/map.calendar.ts

@@ -29,6 +29,7 @@
     "react-textarea-autosize": "^8.3.3",
     "react-toastify": "^9.1.3",
     "supertokens-web-js": "^0.16.0",
+    "tinycolor2": "^1.6.0",
     "zustand": "^5.0.14"
   },
   "devDependencies": {
@@ -42,6 +43,7 @@
     "@types/react": "^18.0.8",
     "@types/react-datepicker": "^4.1.7",
     "@types/react-dom": "^18.0.3",
+    "@types/tinycolor2": "^1.4.6",
     "bun-types": "^1.2.18",
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^26.1.0",

packages/core/src/util/color.utils.test.ts

@@ -8,7 +8,6 @@ import {
   useMemo,
 } from "react";
 import { Priorities } from "@core/constants/core.constants";
-import { brighten, darken } from "@core/util/color.utils";
 import dayjs from "@core/util/date/dayjs";
 import {
   CALENDAR_GRID_EVENT_TIME_LABEL_FONT_SIZE,
@@ -26,6 +25,7 @@ import {
   DATA_EVENT_ELEMENT_ID,
   ZIndex,
 } from "@web/common/constants/web.constants";
+import { brighten, darken } from "@web/common/styles/color.utils";
 import {
   gridColorByPriority,
   gridHoverColorByPriority,

packages/core/src/util/color.utils.ts

@@ -0,0 +1,14 @@
+import { brighten, darken, isDark } from "./color.utils";
+import { describe, expect, it } from "bun:test";
+
+describe("color.utils", () => {
+  it("adjusts colors", () => {
+    expect(brighten("#123456", 15)).toBe("#385a7c");
+    expect(darken("#abcdef", 20)).toBe("#559adf");
+  });
+
+  it("identifies dark colors", () => {
+    expect(isDark("#000000")).toBe(true);
+    expect(isDark("#ffffff")).toBe(false);
+  });
+});