chore: update postcss to version 8.5.14 and sort font weights in typography components

apps/web/src/components/typography/combobox.test.tsx

@@ -0,0 +1,31 @@
+// @vitest-environment happy-dom
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { FontWeightCombobox } from "./combobox";
+
+const comboboxMock = vi.hoisted(() => ({
+	props: undefined as { onValueChange?: (value: string[] | null) => void } | undefined,
+}));
+
+vi.mock("@/components/ui/combobox", () => ({
+	Combobox: (props: { onValueChange?: (value: string[] | null) => void }) => {
+		comboboxMock.props = props;
+		return null;
+	},
+}));
+
+describe("FontWeightCombobox", () => {
+	beforeEach(() => {
+		comboboxMock.props = undefined;
+	});
+
+	it("emits selected font weights in ascending order", () => {
+		const onValueChange = vi.fn();
+
+		render(<FontWeightCombobox fontFamily="Source Sans 3" value={["400"]} onValueChange={onValueChange} />);
+
+		comboboxMock.props?.onValueChange?.(["800", "600", "400"]);
+
+		expect(onValueChange).toHaveBeenCalledWith(["400", "600", "800"]);
+	});
+});

apps/web/src/components/typography/combobox.tsx

@@ -1,6 +1,6 @@
 import type { MultiComboboxProps, SingleComboboxProps } from "@/components/ui/combobox";
-import { useMemo } from "react";
-import { fontList, getFont, getFontDisplayName, getFontSearchKeywords } from "@reactive-resume/fonts";
+import { useCallback, useMemo } from "react";
+import { fontList, getFont, getFontDisplayName, getFontSearchKeywords, sortFontWeights } from "@reactive-resume/fonts";
 import { cn } from "@reactive-resume/utils/style";
 import { Combobox } from "@/components/ui/combobox";
 import { FontDisplay } from "./font-display";
@@ -54,14 +54,20 @@ export function FontFamilyCombobox({ className, ...props }: FontFamilyComboboxPr
 
 type FontWeightComboboxProps = Omit<MultiComboboxProps, "options" | "multiple"> & { fontFamily: string };
 
-export function FontWeightCombobox({ fontFamily, ...props }: FontWeightComboboxProps) {
+export function FontWeightCombobox({
+	fontFamily,
+	onValueChange,
+	value,
+	defaultValue,
+	...props
+}: FontWeightComboboxProps) {
 	const options = useMemo(() => {
 		const fontData = getFont(fontFamily);
 
 		let weights: string[] = [];
 
 		if (fontData && Array.isArray(fontData.weights) && fontData.weights.length > 0) {
-			weights = fontData.weights as string[];
+			weights = sortFontWeights(fontData.weights);
 		} else {
 			// Fallback to all possible weights
 			weights = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
@@ -74,5 +80,27 @@ export function FontWeightCombobox({ fontFamily, ...props }: FontWeightComboboxP
 		}));
 	}, [fontFamily]);
 
-	return <Combobox {...props} multiple options={options} />;
+	const sortedValue = useMemo(() => (value ? sortFontWeights(value) : value), [value]);
+	const sortedDefaultValue = useMemo(
+		() => (defaultValue ? sortFontWeights(defaultValue) : defaultValue),
+		[defaultValue],
+	);
+
+	const handleValueChange = useCallback(
+		(nextValue: string[] | null) => {
+			onValueChange?.(nextValue ? sortFontWeights(nextValue) : nextValue);
+		},
+		[onValueChange],
+	);
+
+	return (
+		<Combobox
+			{...props}
+			value={sortedValue}
+			defaultValue={sortedDefaultValue}
+			onValueChange={handleValueChange}
+			multiple
+			options={options}
+		/>
+	);
 }