stream_color: Convert module to TypeScript.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

package.json

@@ -103,6 +103,8 @@
     "@types/node": "^18.8.3",
     "@types/plotly.js": "^2.12.20",
     "@types/sortablejs": "^1.15.1",
+    "@types/spectrum": "^1.8.4",
+    "@types/tinycolor2": "^1.4.5",
     "@types/turndown": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",

pnpm-lock.yaml

@@ -312,6 +312,12 @@ devDependencies:
   '@types/sortablejs':
     specifier: ^1.15.1
     version: 1.15.3
+  '@types/spectrum':
+    specifier: ^1.8.4
+    version: 1.8.4
+  '@types/tinycolor2':
+    specifier: ^1.4.5
+    version: 1.4.5
   '@types/turndown':
     specifier: ^5.0.1
     version: 5.0.2
@@ -3050,6 +3056,17 @@ packages:
     resolution: {integrity: sha512-v+zh6TZP/cLeMUK0MDx1onp8e7Jk2/4iTQ7sb/n80rTAvBm14yJkpOEfJdrTCkHiF7IZbPjxGX2NRJfogRoYIg==}
     dev: true
 
+  /@types/spectrum@1.8.4:
+    resolution: {integrity: sha512-t/TUyULAe/O0YiVLycLRVI5191Zj8HgQePPVlvwzLEoO70xxsZIDvfvqE5PzqrZj/CQB03J2UAWkbqtDvkju3Q==}
+    dependencies:
+      '@types/jquery': 3.5.22
+      '@types/tinycolor2': 1.4.5
+    dev: true
+
+  /@types/tinycolor2@1.4.5:
+    resolution: {integrity: sha512-uLJijDHN5E6j5n1qefF9oaeplgszXglWXWTviMoFr/YxgvbyrkFil20yDT7ljhCiTQ/BfCYtxfJS81LdTro5DQ==}
+    dev: true
+
   /@types/triple-beam@1.3.3:
     resolution: {integrity: sha512-6tOUG+nVHn0cJbVp25JFayS5UE6+xlbcNF9Lo9mU7U0zk3zeUShZied4YEQZjy1JBF043FSkdXw8YkUJuVtB5g==}
     dev: true

tools/test-js-with-node

@@ -222,7 +222,7 @@ EXEMPT_FILES = make_set(
         "web/src/spectators.ts",
         "web/src/spoilers.ts",
         "web/src/starred_messages_ui.js",
-        "web/src/stream_color.js",
+        "web/src/stream_color.ts",
         "web/src/stream_color_events.js",
         "web/src/stream_create.js",
         "web/src/stream_create_subscribers.js",

version.py

@@ -48,4 +48,4 @@ API_FEATURE_LEVEL = 222
 #   historical commits sharing the same major version, in which case a
 #   minor version bump suffices.
 
-PROVISION_VERSION = (251, 1)
+PROVISION_VERSION = (251, 2)

web/src/global.d.ts

@@ -3,6 +3,8 @@
 // remove each declaration when the corresponding module is migrated
 // to TS.
 
+/// <reference types="spectrum" />
+
 declare let zulip_test: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 type JQueryCaretRange = {

web/src/stream_color.ts

@@ -2,6 +2,7 @@ import {colord, extend} from "colord";
 import lchPlugin from "colord/plugins/lch";
 import mixPlugin from "colord/plugins/mix";
 import $ from "jquery";
+import type tinycolor from "tinycolor2";
 
 import {$t} from "./i18n";
 import * as settings_data from "./settings_data";
@@ -10,9 +11,9 @@ import * as stream_settings_api from "./stream_settings_api";
 
 extend([lchPlugin, mixPlugin]);
 
-export function update_stream_recipient_color($stream_header) {
+export function update_stream_recipient_color($stream_header: JQuery): void {
     if ($stream_header.length) {
-        const stream_id = Number.parseInt($($stream_header).attr("data-stream-id"), 10);
+        const stream_id = Number.parseInt($stream_header.attr("data-stream-id")!, 10);
         if (!stream_id) {
             return;
         }
@@ -24,10 +25,10 @@ export function update_stream_recipient_color($stream_header) {
     }
 }
 
-export function get_stream_privacy_icon_color(color) {
+export function get_stream_privacy_icon_color(hex_color: string): string {
     // LCH stands for Lightness, Chroma, and Hue.
     // This function restricts Lightness of a color to be between 20 to 75.
-    color = colord(color).toLch();
+    const color = colord(hex_color).toLch();
     const min_color_l = 20;
     const max_color_l = 75;
     if (color.l < min_color_l) {
@@ -38,7 +39,7 @@ export function get_stream_privacy_icon_color(color) {
     return colord(color).toHex();
 }
 
-export function get_recipient_bar_color(color) {
+export function get_recipient_bar_color(color: string): string {
     // Mixes 50% of color to 40% of white (light theme) / black (dark theme).
     const using_dark_theme = settings_data.using_dark_theme();
     color = get_stream_privacy_icon_color(color);
@@ -59,9 +60,10 @@ const subscriptions_table_colorpicker_options = {
     showPalette: true,
     showInput: true,
     palette: stream_color_palette,
+    change: picker_do_change_color,
 };
 
-export function set_colorpicker_color($colorpicker, color) {
+export function set_colorpicker_color($colorpicker: JQuery, color: string): void {
     $colorpicker.spectrum({
         ...subscriptions_table_colorpicker_options,
         color,
@@ -79,14 +81,13 @@ export const sidebar_popover_colorpicker_options_full = {
     change: picker_do_change_color,
 };
 
-function picker_do_change_color(color) {
+function picker_do_change_color(this: HTMLElement, color: tinycolor.Instance): void {
     $(".colorpicker").spectrum("destroy");
     $(".colorpicker").spectrum(sidebar_popover_colorpicker_options_full);
-    const stream_id = Number.parseInt($(this).attr("stream_id"), 10);
+    const stream_id = Number.parseInt($(this).attr("stream_id")!, 10);
     const hex_color = color.toHexString();
     stream_settings_api.set_color(stream_id, hex_color);
 }
-subscriptions_table_colorpicker_options.change = picker_do_change_color;
 
 export const sidebar_popover_colorpicker_options = {
     clickoutFiresChange: true,