convert osu.groupColour to typescript

resources/assets/coffee/osu_common.coffee

···
 import { currentUrl } from 'utils/turbolinks'
 
 window.osu =
-  groupColour: (group) ->
-    '--group-colour': group?.colour ? 'initial'
-
-
   formatBytes: (bytes, decimals=2) ->
     suffixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
     k = 1000

resources/assets/lib/beatmap-discussions/discussion.coffee

···
 import { button, div, i, span, a } from 'react-dom-factories'
 import { onError } from 'utils/ajax'
 import { badgeGroup, canModeratePosts, formatTimestamp } from 'utils/beatmapset-discussion-helper'
-import { classWithModifiers } from 'utils/css'
+import { classWithModifiers, groupColour } from 'utils/css'
 import { hideLoadingOverlay, showLoadingOverlay } from 'utils/loading-overlay'
 import { discussionTypeIcons } from './discussion-type'
 import { NewReply } from './new-reply'
···
       div className: "#{bn}__discussion",
         div
           className: "#{bn}__top"
-          style: osu.groupColour(group)
+          style: groupColour(group)
           div className: "#{bn}__top-user",
             el UserCard,
               user: user

resources/assets/lib/beatmap-discussions/user-card.tsx

···
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import * as React from 'react';
+import { groupColour } from 'utils/css';
 
 const bn = 'beatmap-discussion-user-card';
 
···
 
   render() {
     return (
-      <div className={bn} style={osu.groupColour(this.props.group)}>
+      <div className={bn} style={groupColour(this.props.group)}>
         <div className={`${bn}__avatar`}>
           {this.props.user.is_deleted ? (
             <span className={`${bn}__user-link`}>

resources/assets/lib/beatmap-discussions/user-filter.coffee

···
 import { SelectOptions } from 'components/select-options'
 import * as React from 'react'
 import { a } from 'react-dom-factories'
+import { groupColour } from 'utils/css'
 
 el = React.createElement
 
···
 
   renderOption: ({ cssClasses, children, onClick, option }) =>
     group = if @isOwner(option) then mapperGroup else option.groups?[0]
-    style = osu.groupColour(group)
+    style = groupColour(group)
 
     a
       className: cssClasses

resources/assets/lib/components/user-card-brick.tsx

···
 import core from 'osu-core-singleton';
 import * as React from 'react';
 import UserCardTypeContext from 'user-card-type-context';
-import { classWithModifiers, Modifiers } from 'utils/css';
+import { classWithModifiers, groupColour, Modifiers } from 'utils/css';
 
 interface Props {
   modifiers?: Modifiers;
···
         >
           <div
             className='user-card-brick__group-bar'
-            style={osu.groupColour(group)}
+            style={groupColour(group)}
             title={group?.name}
           />
 

resources/assets/lib/components/user-group-badge.tsx

···
 import UserGroupJson from 'interfaces/user-group-json';
 import { route } from 'laroute';
 import * as React from 'react';
-import { classWithModifiers, Modifiers } from 'utils/css';
+import { classWithModifiers, groupColour, Modifiers } from 'utils/css';
 
 interface Props {
   group?: UserGroupJson | null;
···
       modifiers,
     ),
     'data-label': group.short_name,
-    style: osu.groupColour(group),
+    style: groupColour(group),
     title,
   };
 

resources/assets/lib/globals.d.ts

···
 // There interfaces are only used in this file.
 declare module 'legacy-modules' {
   type BeatmapsetDiscussionJson = import('interfaces/beatmapset-discussion-json').default;
-  type GroupJson = import('interfaces/group-json').default;
 
   interface BeatmapDiscussionHelperClass {
     url(options: any, useCurrent?: boolean): string;
···
 
   interface OsuCommon {
     formatBytes: (bytes: number, decimals?: number) => string;
-    groupColour: (group?: GroupJson | null) => React.CSSProperties;
     navigate: (url: string, keepScroll?: boolean, action?: Partial<Record<string, unknown>>) => void;
     popup: (message: string, type: string) => void;
     presence: (str?: string | null) => string | null;

resources/assets/lib/modding-profile/votes.coffee

···
 import { route } from 'laroute'
 import * as React from 'react'
 import { a, div, h1, h2, span } from 'react-dom-factories'
+import { groupColour } from 'utils/css'
 
 el = React.createElement
 
···
     bn = 'modding-profile-vote-card'
     userBadge = user.groups?[0]
     topClasses = bn
-    style = osu.groupColour(userBadge)
+    style = groupColour(userBadge)
 
     div
       key: user.id

resources/assets/lib/utils/css.ts

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import GroupJson from 'interfaces/group-json';
 import { forEach } from 'lodash';
+
+declare module 'react' {
+  export interface CSSProperties {
+    '--group-colour'?: string;
+  }
+}
 
 export type Modifiers = (string | null | undefined)[] | Partial<Record<string, boolean | null | undefined>> | string | null | undefined;
 
···
   eachModifier(modifiersArray, (m) => ret += ` ${className}--${m}`);
 
   return ret;
+}
+
+export function groupColour(group?: GroupJson | null) {
+  return { '--group-colour': group?.colour ?? 'initial' };
 }
 
 export function mergeModifiers(...modifiersArray: Modifiers[]) {

tests/karma/osu_common.spec.ts

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-import GroupJson from 'interfaces/group-json';
-import * as React from 'react';
 describe('osu_common', () => {
   describe('locale file loaded in test runner', () => {
     it('should be loaded', () => {
       expect(window.Lang.has('common.confirmation')).toBe(true);
-    });
-  });
-
-  describe('groupColour', () => {
-    const group: GroupJson = {
-      colour: '#abcdef',
-      has_listing: true,
-      has_playmodes: true,
-      id: 1,
-      identifier: 'abc',
-      is_probationary: false,
-      name: 'ABC',
-      short_name: 'abc',
-    };
-
-    it('get CSS object with correct colour', () => {
-      expect(osu.groupColour(group)).toEqual({
-        '--group-colour': '#abcdef',
-      } as React.CSSProperties);
-    });
-
-    it('get CSS object with initial value when null', () => {
-      expect(osu.groupColour({ ...group, colour: null })).toEqual({
-        '--group-colour': 'initial',
-      } as React.CSSProperties);
-    });
-
-    it('get CSS object with initial value when undefined', () => {
-      expect(osu.groupColour()).toEqual({
-        '--group-colour': 'initial',
-      } as React.CSSProperties);
     });
   });
 

tests/karma/utils/css.spec.ts

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-import { urlPresence } from 'utils/css';
+import GroupJson from 'interfaces/group-json';
+import { groupColour, urlPresence } from 'utils/css';
 
 describe('utils/css', () => {
+  describe('.groupColour', () => {
+    const group: GroupJson = {
+      colour: '#abcdef',
+      has_listing: true,
+      has_playmodes: true,
+      id: 1,
+      identifier: 'abc',
+      is_probationary: false,
+      name: 'ABC',
+      short_name: 'abc',
+    };
+
+    it('get CSS object with correct colour', () => {
+      expect(groupColour(group)).toEqual({
+        '--group-colour': '#abcdef',
+      });
+    });
+
+    it('get CSS object with initial value when null', () => {
+      expect(groupColour({ ...group, colour: null })).toEqual({
+        '--group-colour': 'initial',
+      });
+    });
+
+    it('get CSS object with initial value when undefined', () => {
+      expect(groupColour()).toEqual({
+        '--group-colour': 'initial',
+      });
+    });
+  });
+
   describe('.urlPresence', () => {
     describe('when url is empty', () => {
       const cases = [