@olenbetong/appframe-ds 1.4.1 → 1.6.0

package/src/input/numberFormat.ts

@@ -0,0 +1,94 @@
+/*
+ * Culture-aware number formatting and parsing for inputs that edit a number as
+ * text. Formatting follows the user's culture, read from the Appframe session
+ * when the function runs so a page that sets it after this module loads still
+ * formats correctly. Parsing is deliberately culture-agnostic: a Norwegian user
+ * typing `1.5` means the same as `1,5`.
+ */
+
+export const DEFAULT_CULTURE = "nb-NO";
+
+export type FormatNumberOptions = {
+	/**
+	 * Number of fraction digits, used as both minimum and maximum so `8` is
+	 * shown as `8,00`. Defaults to 2.
+	 */
+	decimalDigits?: number;
+	/**
+	 * Whether to use thousands separators. Off by default, since the result
+	 * is often fed back into `parseNumber`, which does not understand them.
+	 */
+	grouping?: boolean;
+	/**
+	 * BCP 47 culture to format in. Defaults to the Appframe session's culture,
+	 * and to `nb-NO` when there is no session (tests, Storybook).
+	 */
+	culture?: string;
+};
+
+const formatters = new Map<string, Intl.NumberFormat>();
+
+/**
+ * The culture numbers are formatted in when none is given: the Appframe
+ * session's, or `nb-NO` outside a session.
+ */
+export function getDefaultCulture(): string {
+	return globalThis.af?.userSession?.culture ?? DEFAULT_CULTURE;
+}
+
+/**
+ * Formats a number with a fixed number of fraction digits in the user's culture.
+ * Returns `null` for `null`/`undefined` so the result can be fed straight into an input value.
+ */
+export function formatNumber(value: number | null | undefined, options: FormatNumberOptions = {}): string | null {
+	if (value == null || Number.isNaN(value)) return null;
+
+	let decimalDigits = options.decimalDigits ?? 2;
+	let grouping = options.grouping ?? false;
+	let culture = options.culture ?? getDefaultCulture();
+	let key = `${culture}|${decimalDigits}|${grouping}`;
+	let formatter = formatters.get(key);
+
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(culture, {
+			minimumFractionDigits: decimalDigits,
+			maximumFractionDigits: decimalDigits,
+			useGrouping: grouping,
+		});
+		formatters.set(key, formatter);
+	}
+
+	return formatter.format(value);
+}
+
+/**
+ * Parses text typed by a user into a number, whatever their culture. Both `,`
+ * and `.` are always read as the decimal separator (never as thousands
+ * separators), whitespace is the only thousands separator understood
+ * (`1 234,5`, including the no-break spaces `Intl` groups with), and the
+ * typographic minus is accepted.
+ *
+ * Returns `null` for an empty string, and `NaN` for text that is not (yet) a
+ * number, such as a lone `-`.
+ */
+export function parseNumber(text: string | null | undefined): number | null {
+	if (text == null) return null;
+
+	let normalized = text.replace(/\s/g, "").replace("−", "-").replace(",", ".");
+	if (normalized === "") return null;
+
+	return Number(normalized);
+}
+
+/**
+ * Rounds to a number of fraction digits, avoiding the floating point noise of
+ * repeated additions (`0.1 + 0.2`).
+ */
+export function roundTo(value: number, decimalDigits: number): number {
+	let factor = 10 ** decimalDigits;
+	return Math.round(value * factor) / factor;
+}
+
+export function clamp(value: number, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY): number {
+	return Math.min(Math.max(value, min), max);
+}

package/src/progress/LinearProgress.css

@@ -42,15 +42,33 @@
 }
 
 /*
- * The indeterminate bar is full width and animated with `transform`, where the
- * start and end of the bar move at different speeds (the bar stretches and
- * shrinks as it travels).
+ * The indeterminate animation is Material Design's: two bars chase each other
+ * across the track in a 2.1s cycle. The first grows from 35% to 90% of the
+ * track as it crosses; the second starts 1.15s later with a sharper easing and
+ * shrinks to a sliver. Both reach the far side at 60% of the cycle and hold
+ * there, which is what gives the motion its rhythm.
+ *
+ * MUI animates `left` and `right`. Each bar here is the full track width and is
+ * moved and scaled with `transform` instead, which stays on the compositor;
+ * since both edges interpolate linearly with the same easing either way, the
+ * result is the same: translateX is MUI's `left`, scaleX is 1 - left - right.
  */
 .ObLinearProgress-indeterminate .ObLinearProgress-bar {
 	transform-origin: left center;
 	will-change: transform;
-	animation: ObLinearProgress-indeterminate var(--obLinearProgress-duration) cubic-bezier(0.65, 0.815, 0.735, 0.395)
-		infinite;
+	animation-duration: var(--obLinearProgress-duration);
+	animation-iteration-count: infinite;
+}
+
+.ObLinearProgress-indeterminate .ObLinearProgress-bar1 {
+	animation-name: ObLinearProgress-indeterminate1;
+	animation-timing-function: cubic-bezier(0.65, 0.815, 0.735, 0.395);
+}
+
+.ObLinearProgress-indeterminate .ObLinearProgress-bar2 {
+	animation-name: ObLinearProgress-indeterminate2;
+	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+	animation-delay: calc(var(--obLinearProgress-duration) * 0.5476); /* 1.15s of 2.1s */
 }
 
 /* Zero-height wrapper so the overlay bar never affects the layout */
@@ -66,23 +84,33 @@
 	inset-inline: 0;
 }
 
-@keyframes ObLinearProgress-indeterminate {
+/* MUI: left -35% / right 100% -> left 100% / right -90%, held from 60% */
+@keyframes ObLinearProgress-indeterminate1 {
 	0% {
 		transform: translateX(-35%) scaleX(0.35);
 	}
 
-	60% {
-		transform: translateX(60%) scaleX(0.7);
+	60%,
+	100% {
+		transform: translateX(100%) scaleX(0.9);
+	}
+}
+
+/* MUI: left -200% / right 100% -> left 107% / right -8%, held from 60% */
+@keyframes ObLinearProgress-indeterminate2 {
+	0% {
+		transform: translateX(-200%) scaleX(2);
 	}
 
+	60%,
 	100% {
-		transform: translateX(100%) scaleX(0.2);
+		transform: translateX(107%) scaleX(0.01);
 	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.ObLinearProgress-indeterminate .ObLinearProgress-bar {
-		animation-duration: 4s;
+	.ObLinearProgress-indeterminate {
+		--obLinearProgress-duration: 4s;
 	}
 }
 

package/src/progress/LinearProgress.tsx

@@ -90,9 +90,11 @@ export function LinearProgress({
 			{...props}
 		>
 			<div
-				className="ObLinearProgress-bar"
+				className="ObLinearProgress-bar ObLinearProgress-bar1"
 				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
 			/>
+			{/* The indeterminate animation is two bars chasing each other, as in Material Design */}
+			{!isDeterminate && <div className="ObLinearProgress-bar ObLinearProgress-bar2" />}
 		</div>
 	);
 

package/src/test/setup.ts

@@ -4,9 +4,24 @@ fixHappyDomDocumentClass();
 
 import "@testing-library/jest-dom/vitest";
 
+import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
+
 import { cleanup } from "@testing-library/react";
 import { afterEach } from "vitest";
 
 afterEach(() => {
 	cleanup();
 });
+
+/*
+ * jest-dom 7.0.1 types its matchers onto the one-parameter `Assertion<T>` of Vitest 4, which
+ * Vitest 5 replaced with `Assertion<R, T>`; custom matchers now go on `Matchers<R, T>`. Until
+ * jest-dom ships Vitest 5 types, register them there. Remove this when its `vitest` entry
+ * types `Matchers` itself.
+ */
+declare module "vitest" {
+	interface Matchers<R extends void | Promise<void> = void | Promise<void>, T = unknown> extends TestingLibraryMatchers<
+		T,
+		R
+	> {}
+}