Merge pull request #674 from IvanSavoskin/feature/support-android-app-theme-params

feat(bridge): Add formatter for int theme params

Author: heyqbnk

.changeset/spicy-owls-jam.md

@@ -0,0 +1,6 @@
+---
+"@telegram-apps/bridge": minor
+"@telegram-apps/transformers": minor
+---
+
+Add formatter for int theme params

packages/bridge/src/events/emitter.test.ts

@@ -184,6 +184,53 @@ describe('on', () => {
       });
     });
   });
+
+  it('should format theme_params if it was in int', () => {
+    const listener = vi.fn();
+    on('theme_changed', listener);
+
+    emitEvent('theme_changed', {
+      theme_params: {
+        accent_text_color: -10177041,
+        bg_color: -14602949,
+        bottom_bar_bg_color: -15393241,
+        button_color: -11491093,
+        button_text_color: -1,
+        destructive_text_color: -1152913,
+        header_bg_color: -14406343,
+        hint_color: -8549479,
+        link_color: -10572831,
+        secondary_bg_color: -15393241,
+        section_bg_color: -14866637,
+        section_header_text_color: -8796932,
+        section_separator_color: -15920616,
+        subtitle_text_color: -8681584,
+        text_color: -1,
+      },
+      // We are just testing an invalid Android client behavior here.
+    } as any);
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith({
+      theme_params: {
+        accent_text_color: '#64b5ef',
+        bg_color: '#212d3b',
+        bottom_bar_bg_color: '#151e27',
+        button_color: '#50a8eb',
+        button_text_color: '#ffffff',
+        destructive_text_color: '#ee686f',
+        header_bg_color: '#242d39',
+        hint_color: '#7d8b99',
+        link_color: '#5eabe1',
+        secondary_bg_color: '#151e27',
+        section_bg_color: '#1d2733',
+        section_header_text_color: '#79c4fc',
+        section_separator_color: '#0d1218',
+        subtitle_text_color: '#7b8790',
+        text_color: '#ffffff',
+      },
+    });
+  });
 });
 
 describe('off', () => {

packages/bridge/src/events/emitter.ts

@@ -11,7 +11,7 @@ import {
   nullish,
   type BaseSchema,
 } from 'valibot';
-import { jsonParse, MiniAppsMessageSchema } from '@telegram-apps/transformers';
+import { jsonParse, MiniAppsMessageSchema, themeParams } from '@telegram-apps/transformers';
 
 import { createEmitter } from '@/events/createEmitter.js';
 import type { EventName, EventPayload, Events } from '@/events/types/index.js';
@@ -41,6 +41,9 @@ const transformers = {
     is_state_stable: boolean(),
     is_expanded: boolean(),
   }),
+  theme_changed: looseObject({
+    theme_params: themeParams(),
+  }),
 } as const satisfies { [E in EventName]?: BaseSchema<unknown, EventPayload<E>, any> };
 
 function listener(event: MessageEvent): void {
@@ -60,6 +63,7 @@ function listener(event: MessageEvent): void {
 
   const { eventType, eventData } = message;
   const schema = transformers[eventType as keyof typeof transformers];
+
   try {
     const data = schema ? parse(schema, eventData) : eventData;
     emit(eventType as any, data);

packages/bridge/src/events/types/events.ts

@@ -546,7 +546,7 @@ export interface Events {
    */
   theme_changed: {
     /**
-     * Map where the key is a theme stylesheet key and value is  the
+     * Map where the key is a theme stylesheet key and value is the
      * corresponding color in
      * `#RRGGBB` format.
      */

packages/transformers/src/generators/themeParams.test.ts

@@ -25,6 +25,23 @@ describe('themeParams', () => {
     })).toBe(true);
     expect(is(themeParams(), { accent_text_color: '#aabbc' })).toBe(false);
     expect(is(themeParams(), 'aaa')).toBe(false);
+    expect(is(themeParams(), {
+      accent_text_color: -10177041,
+      bg_color: -14602949,
+      bottom_bar_bg_color: -15393241,
+      button_color: -11491093,
+      button_text_color: -1,
+      destructive_text_color: -1152913,
+      header_bg_color: -14406343,
+      hint_color: -8549479,
+      link_color: -10572831,
+      secondary_bg_color: -15393241,
+      section_bg_color: -14866637,
+      section_header_text_color: -8796932,
+      section_separator_color: -15920616,
+      subtitle_text_color: -8681584,
+      text_color: -1,
+    })).toBe(true);
   });
 
   it('should camelize keys if true passed', () => {
@@ -67,4 +84,40 @@ describe('themeParams', () => {
     expect(parse(themeParams(false), input)).not.toStrictEqual(inputCamelized);
     expect(parse(themeParams(true), input)).toStrictEqual(inputCamelized);
   });
+
+  it('should properly handle numeric values', () => {
+    expect(parse(themeParams(), {
+      accent_text_color: -10177041,
+      bg_color: -14602949,
+      bottom_bar_bg_color: -15393241,
+      button_color: -11491093,
+      button_text_color: -1,
+      destructive_text_color: -1152913,
+      header_bg_color: -14406343,
+      hint_color: -8549479,
+      link_color: -10572831,
+      secondary_bg_color: -15393241,
+      section_bg_color: -14866637,
+      section_header_text_color: -8796932,
+      section_separator_color: -15920616,
+      subtitle_text_color: -8681584,
+      text_color: -1,
+    })).toStrictEqual({
+      accent_text_color: '#64b5ef',
+      bg_color: '#212d3b',
+      bottom_bar_bg_color: '#151e27',
+      button_color: '#50a8eb',
+      button_text_color: '#ffffff',
+      destructive_text_color: '#ee686f',
+      header_bg_color: '#242d39',
+      hint_color: '#7d8b99',
+      link_color: '#5eabe1',
+      secondary_bg_color: '#151e27',
+      section_bg_color: '#1d2733',
+      section_header_text_color: '#79c4fc',
+      section_separator_color: '#0d1218',
+      subtitle_text_color: '#7b8790',
+      text_color: '#ffffff',
+    });
+  });
 });

packages/transformers/src/generators/themeParams.ts

@@ -1,6 +1,8 @@
 import {
   check,
   type CheckAction,
+  number,
+  type NumberSchema,
   pipe,
   record,
   type RecordSchema,
@@ -9,19 +11,29 @@ import {
   type StringSchema,
   transform,
   type TransformAction,
+  union,
+  type UnionSchema,
 } from 'valibot';
 import type { RGB, KnownThemeParamsKey } from '@telegram-apps/types';
 
-import { isRGB } from '@/validation/rgb.js';
 import {
   type CamelCaseTransformer,
   createCamelCaseGen,
 } from '@/camel-casing/createCamelCaseGen.js';
+import { isRGB } from '@/validation/rgb.js';
 
 export const themeParams = createCamelCaseGen(
   record(
     string(),
-    pipe(string(), check(isRGB), transform(i => i as RGB)),
+    pipe(
+      union([string(), number()]),
+      transform(value => {
+        return typeof value === 'number'
+          ? `#${(value & 0x00FFFFFF).toString(16).padStart(6, '0')}`
+          : value;
+      }),
+      check(isRGB),
+    ),
   ),
 ) as CamelCaseTransformer<
   RecordSchema<
@@ -30,9 +42,9 @@ export const themeParams = createCamelCaseGen(
       TransformAction<string, KnownThemeParamsKey>,
     ]>,
     SchemaWithPipe<[
-      StringSchema<undefined>,
-      CheckAction<string, undefined>,
-      TransformAction<string, RGB>
+      UnionSchema<[StringSchema<undefined>, NumberSchema<undefined>], any>,
+      TransformAction<string | number, string>,
+      CheckAction<RGB, undefined>
     ]>,
     undefined
   >