mirror of
https://github.com/kuhyx/utils.git
synced 2026-11-11 21:14:00 +01:00
Krzysztof kuhy Rudnicki
03bf1ed08b
The web counterpart to design_system (Dart): one :root block of frozen tokens plus the components that were duplicated across repos. Extracted from dufs-cloud and awesome-mcp-explorer, which both now consume it. - tokens.css: the frozen palette, spacing/radius/type scales, shadow policy and focus ring, under the canonical variable names from unified-design-system. Also ships the global :focus-visible rule, rather than leaving each consumer to remember it. - RangeSlider: reconciled from the two drifted copies. Takes the accessible DOM from awesome-mcp-explorer (real <button> thumbs with role="slider" and the aria-value* trio) and grab-the-nearer-thumb from dufs-cloud. Keyboard support (arrows/PageUp/PageDown/Home/End) is new: both donors were pointer-only, which the design system rules out, and an arrow-key-deaf role="slider" is an ARIA role that lies. - quantile.ts + fuzzyMatch: the genuinely duplicated helpers. FilterBar is deliberately absent. The two same-named components share no structure -- a horizontal <select> strip over files vs a vertical tri-state chip sidebar over servers, with disjoint FilterState, props and sort keys. It is the name-collision-is-not-a-duplicate trap, so extracting it would ship a widget nobody imports. dist/ is committed (and un-ignored against the root rule) because Vite does not transpile dependencies; consumers stay at zero config. Consumed via pnpm's &path:/web_ui suffix -- npm cannot install from a subdirectory of a git repo. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U4Rj3s7K2qzrLNgJqqPhno
109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
|
|
import {
|
|
clamp01,
|
|
fractionFromPointer,
|
|
nth,
|
|
quantileValue,
|
|
valueQuantile,
|
|
} from "./quantile.ts";
|
|
|
|
describe("nth", () => {
|
|
it("reads a value", () => {
|
|
expect(nth([5, 6, 7], 1)).toBe(6);
|
|
});
|
|
|
|
it("throws for an index out of range", () => {
|
|
expect(() => nth([1], 5)).toThrow(RangeError);
|
|
});
|
|
});
|
|
|
|
describe("clamp01", () => {
|
|
it("passes a value already in range", () => {
|
|
expect(clamp01(0.5)).toBe(0.5);
|
|
});
|
|
|
|
it("clamps both ends", () => {
|
|
expect(clamp01(-1)).toBe(0);
|
|
expect(clamp01(2)).toBe(1);
|
|
});
|
|
});
|
|
|
|
describe("quantileValue", () => {
|
|
it("returns 0 for an empty distribution", () => {
|
|
expect(quantileValue([], 0.5)).toBe(0);
|
|
});
|
|
|
|
it("returns the ends at f=0 and f=1", () => {
|
|
expect(quantileValue([1, 2, 100], 0)).toBe(1);
|
|
expect(quantileValue([1, 2, 100], 1)).toBe(100);
|
|
});
|
|
|
|
it("returns the MEDIAN at f=0.5, not the linear midpoint", () => {
|
|
// The whole point of the quantile mapping, on a distribution shaped like
|
|
// the real star counts (1 .. 59k, long tail). The linear midpoint of that
|
|
// range is ~29,500 — above every server but one, which is exactly why a
|
|
// plain min..max slider is useless here. The median is 3.
|
|
expect(quantileValue([1, 2, 3, 4, 59_000], 0.5)).toBe(3);
|
|
});
|
|
|
|
it("interpolates between samples", () => {
|
|
expect(quantileValue([0, 10], 0.5)).toBe(5);
|
|
});
|
|
|
|
it("clamps an out-of-range fraction", () => {
|
|
expect(quantileValue([1, 5], -1)).toBe(1);
|
|
expect(quantileValue([1, 5], 9)).toBe(5);
|
|
});
|
|
});
|
|
|
|
describe("valueQuantile", () => {
|
|
it("returns 0 for a distribution with fewer than two samples", () => {
|
|
expect(valueQuantile([], 5)).toBe(0);
|
|
expect(valueQuantile([5], 5)).toBe(0);
|
|
});
|
|
|
|
it("maps the ends to 0 and 1", () => {
|
|
expect(valueQuantile([1, 2, 100], 1)).toBe(0);
|
|
expect(valueQuantile([1, 2, 100], 100)).toBe(1);
|
|
});
|
|
|
|
it("clamps values beyond the ends", () => {
|
|
expect(valueQuantile([1, 2, 100], -5)).toBe(0);
|
|
expect(valueQuantile([1, 2, 100], 1000)).toBe(1);
|
|
});
|
|
|
|
it("inverts quantileValue", () => {
|
|
const sorted = [1, 4, 9, 16, 25];
|
|
for (const f of [0.25, 0.5, 0.75]) {
|
|
const value = quantileValue(sorted, f);
|
|
expect(valueQuantile(sorted, value)).toBeCloseTo(f, 1);
|
|
}
|
|
});
|
|
|
|
it("interpolates strictly inside the range", () => {
|
|
expect(valueQuantile([0, 10], 5)).toBeCloseTo(0.5);
|
|
});
|
|
});
|
|
|
|
/** jsdom has no layout, so the rect is supplied rather than measured. */
|
|
const rect = (over: Partial<DOMRect> = {}): DOMRect =>
|
|
({ left: 100, width: 200, ...over }) as DOMRect;
|
|
|
|
describe("fractionFromPointer", () => {
|
|
it("maps the pointer to a fraction of the track", () => {
|
|
expect(fractionFromPointer(rect(), 200)).toBe(0.5);
|
|
});
|
|
|
|
it("clamps outside the track", () => {
|
|
expect(fractionFromPointer(rect(), 0)).toBe(0);
|
|
expect(fractionFromPointer(rect(), 9999)).toBe(1);
|
|
});
|
|
|
|
it("returns 0 for a zero-width track rather than dividing by zero", () => {
|
|
// jsdom reports zero-sized rects for everything, so this is the common
|
|
// case in tests rather than an exotic one.
|
|
expect(fractionFromPointer(rect({ width: 0 }), 150)).toBe(0);
|
|
});
|
|
});
|