Move number.ts to utils in shared components (#30498)

* refactor: move `number.ts` in shared components

* chore: include ts test file in sonar config

src/audio/Playback.ts

@@ -15,7 +15,7 @@ import { arrayFastResample } from "../utils/arrays";
 import { type IDestroyable } from "../utils/IDestroyable";
 import { PlaybackClock } from "./PlaybackClock";
 import { createAudioContext, decodeOgg } from "./compat";
-import { clamp } from "../utils/numbers";
+import { clamp } from "../shared-components/utils/numbers";
 import { DEFAULT_WAVEFORM, PLAYBACK_WAVEFORM_SAMPLES } from "./consts";
 import { PlaybackEncoder } from "../PlaybackEncoder";
 

src/audio/RecorderWorklet.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type IAmplitudePayload, type ITimingPayload, PayloadEvent, WORKLET_NAME } from "./consts";
-import { percentageOf } from "../utils/numbers";
+import { percentageOf } from "../shared-components/utils/numbers";
 
 // from AudioWorkletGlobalScope: https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletGlobalScope
 declare const currentTime: number;

src/audio/VoiceRecording.ts

@@ -19,7 +19,7 @@ import { PayloadEvent, WORKLET_NAME } from "./consts";
 import { UPDATE_EVENT } from "../stores/AsyncStore";
 import { createAudioContext } from "./compat";
 import { FixedRollingArray } from "../utils/FixedRollingArray";
-import { clamp } from "../utils/numbers";
+import { clamp } from "../shared-components/utils/numbers";
 import recorderWorkletFactory from "./recorderWorkletFactory";
 
 const CHANNELS = 1; // stereo isn't important

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -11,7 +11,7 @@ import React from "react";
 import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
 import Waveform from "./Waveform";
 import { type Playback } from "../../../audio/Playback";
-import { percentageOf } from "../../../utils/numbers";
+import { percentageOf } from "../../../shared-components/utils/numbers";
 import { PLAYBACK_WAVEFORM_SAMPLES } from "../../../audio/consts";
 
 interface IProps {

src/components/views/audio_messages/SeekBar.tsx

@@ -10,7 +10,7 @@ import React, { type ChangeEvent, type CSSProperties, type ReactNode } from "rea
 
 import { type PlaybackInterface } from "../../../audio/Playback";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
-import { percentageOf } from "../../../utils/numbers";
+import { percentageOf } from "../../../shared-components/utils/numbers";
 import { _t } from "../../../languageHandler";
 
 interface IProps {

src/components/views/emojipicker/EmojiPicker.tsx

@@ -26,7 +26,7 @@ import {
     Type,
 } from "../../../accessibility/RovingTabIndex";
 import { Key } from "../../../Keyboard";
-import { clamp } from "../../../utils/numbers";
+import { clamp } from "../../../shared-components/utils/numbers";
 import { type ButtonEvent } from "../elements/AccessibleButton";
 
 export const CATEGORY_HEADER_HEIGHT = 20;

src/components/views/rooms/AppsDrawer.tsx

@@ -22,7 +22,7 @@ import ResizeHandle from "../elements/ResizeHandle";
 import Resizer, { type IConfig } from "../../../resizer/resizer";
 import PercentageDistributor from "../../../resizer/distributors/percentage";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import { clamp, percentageOf, percentageWithin } from "../../../utils/numbers";
+import { clamp, percentageOf, percentageWithin } from "../../../shared-components/utils/numbers";
 import UIStore from "../../../stores/UIStore";
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import Spinner from "../elements/Spinner";

src/shared-components/utils/numbers.test.ts

@@ -0,0 +1,160 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { clamp, defaultNumber, percentageOf, percentageWithin, sum } from "./numbers";
+
+describe("numbers", () => {
+    describe("defaultNumber", () => {
+        it("should use the default when the input is not a number", () => {
+            const def = 42;
+
+            let result = defaultNumber(null, def);
+            expect(result).toBe(def);
+
+            result = defaultNumber(undefined, def);
+            expect(result).toBe(def);
+
+            result = defaultNumber(Number.NaN, def);
+            expect(result).toBe(def);
+        });
+
+        it("should use the number when it is a number", () => {
+            const input = 24;
+            const def = 42;
+            const result = defaultNumber(input, def);
+            expect(result).toBe(input);
+        });
+    });
+
+    describe("clamp", () => {
+        it("should clamp high numbers", () => {
+            const input = 101;
+            const min = 0;
+            const max = 100;
+            const result = clamp(input, min, max);
+            expect(result).toBe(max);
+        });
+
+        it("should clamp low numbers", () => {
+            const input = -1;
+            const min = 0;
+            const max = 100;
+            const result = clamp(input, min, max);
+            expect(result).toBe(min);
+        });
+
+        it("should not clamp numbers in range", () => {
+            const input = 50;
+            const min = 0;
+            const max = 100;
+            const result = clamp(input, min, max);
+            expect(result).toBe(input);
+        });
+
+        it("should clamp floats", () => {
+            const min = -0.1;
+            const max = +0.1;
+
+            let result = clamp(-1.2, min, max);
+            expect(result).toBe(min);
+
+            result = clamp(1.2, min, max);
+            expect(result).toBe(max);
+
+            result = clamp(0.02, min, max);
+            expect(result).toBe(0.02);
+        });
+    });
+
+    describe("sum", () => {
+        it("should sum", () => {
+            // duh
+            const result = sum(1, 2, 1, 4);
+            expect(result).toBe(8);
+        });
+    });
+
+    describe("percentageWithin", () => {
+        it("should work within 0-100", () => {
+            const result = percentageWithin(0.4, 0, 100);
+            expect(result).toBe(40);
+        });
+
+        it("should work within 0-100 when pct > 1", () => {
+            const result = percentageWithin(1.4, 0, 100);
+            expect(result).toBe(140);
+        });
+
+        it("should work within 0-100 when pct < 0", () => {
+            const result = percentageWithin(-1.4, 0, 100);
+            expect(result).toBe(-140);
+        });
+
+        it("should work with ranges other than 0-100", () => {
+            const result = percentageWithin(0.4, 10, 20);
+            expect(result).toBe(14);
+        });
+
+        it("should work with ranges other than 0-100 when pct > 1", () => {
+            const result = percentageWithin(1.4, 10, 20);
+            expect(result).toBe(24);
+        });
+
+        it("should work with ranges other than 0-100 when pct < 0", () => {
+            const result = percentageWithin(-1.4, 10, 20);
+            expect(result).toBe(-4);
+        });
+
+        it("should work with floats", () => {
+            const result = percentageWithin(0.4, 10.2, 20.4);
+            expect(result).toBe(14.28);
+        });
+    });
+
+    // These are the inverse of percentageWithin
+    describe("percentageOf", () => {
+        it("should work within 0-100", () => {
+            const result = percentageOf(40, 0, 100);
+            expect(result).toBe(0.4);
+        });
+
+        it("should work within 0-100 when val > 100", () => {
+            const result = percentageOf(140, 0, 100);
+            expect(result).toBe(1.4);
+        });
+
+        it("should work within 0-100 when val < 0", () => {
+            const result = percentageOf(-140, 0, 100);
+            expect(result).toBe(-1.4);
+        });
+
+        it("should work with ranges other than 0-100", () => {
+            const result = percentageOf(14, 10, 20);
+            expect(result).toBe(0.4);
+        });
+
+        it("should work with ranges other than 0-100 when val > 100", () => {
+            const result = percentageOf(24, 10, 20);
+            expect(result).toBe(1.4);
+        });
+
+        it("should work with ranges other than 0-100 when val < 0", () => {
+            const result = percentageOf(-4, 10, 20);
+            expect(result).toBe(-1.4);
+        });
+
+        it("should work with floats", () => {
+            const result = percentageOf(14.28, 10.2, 20.4);
+            expect(result).toBe(0.4);
+        });
+
+        it("should return 0 for values that cause a division by zero", () => {
+            expect(percentageOf(0, 0, 0)).toBe(0);
+        });
+    });
+});

src/stores/widgets/WidgetLayoutStore.ts

@@ -14,7 +14,7 @@ import { type IWidget } from "matrix-widget-api";
 import SettingsStore from "../../settings/SettingsStore";
 import WidgetStore, { type IApp } from "../WidgetStore";
 import { WidgetType } from "../../widgets/WidgetType";
-import { clamp, defaultNumber, sum } from "../../utils/numbers";
+import { clamp, defaultNumber, sum } from "../../shared-components/utils/numbers";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ReadyWatchingStore } from "../ReadyWatchingStore";
 import { SettingLevel } from "../../settings/SettingLevel";

src/utils/arrays.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { percentageOf, percentageWithin } from "./numbers";
+import { percentageOf, percentageWithin } from "../shared-components/utils/numbers";
 
 /**
  * Quickly resample an array to have less/more data points. If an input which is larger