Vanilla state management for language chooser

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["ms-playwright.playwright"]
+  "recommendations": ["ms-playwright.playwright", "esbenp.prettier-vscode"]
 }

components/language-chooser/common/language-chooser-controller/index.ts

@@ -0,0 +1,4 @@
+export * from "./src/view-models/language-card";
+export * from "./src/view-models/script-card";
+export * from "./src/view-models/language-chooser";
+export * from "./src/highlight";

components/language-chooser/common/language-chooser-controller/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ethnolib/language-chooser-controller",
+  "description": "A framework-agnostic controller for a language chooser",
+  "author": "SIL Global",
+  "license": "MIT",
+  "version": "0.1.0",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "scripts": {
+    "build": "nx vite:build",
+    "typecheck": "tsc",
+    "test": "nx vite:test --config vitest.config.ts",
+    "testonce": "nx vite:test --config vitest.config.ts --run",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@nx/vite": "^19.1.2",
+    "@types/node": "^20.16.11",
+    "tsx": "^4.19.2",
+    "typescript": "^5.2.2"
+  },
+  "volta": {
+    "extends": "../../../../package.json"
+  }
+}

components/language-chooser/common/language-chooser-controller/src/highlight.ts

@@ -0,0 +1,29 @@
+export interface FormattedText {
+  text: string;
+  isHighlighted: boolean;
+}
+
+export function highlightMatches(
+  matchWith: string,
+  text: string
+): FormattedText[] {
+  if (text === "") {
+    return [];
+  }
+
+  if (matchWith === "") {
+    return [{ text, isHighlighted: false }];
+  }
+
+  // Escape special regex characters and split while capturing the delimiter
+  const escapedMatch = matchWith.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(`(${escapedMatch})`, "gi");
+
+  return text
+    .split(regex)
+    .map((segment, index) => ({
+      text: segment,
+      isHighlighted: index % 2 === 1, // Odd indices are the captured matches
+    }))
+    .filter((x) => x.text);
+}

components/language-chooser/common/language-chooser-controller/src/selectable.ts

@@ -0,0 +1,11 @@
+import { Field } from "@ethnolib/state-management-core";
+
+export interface Selectable {
+  isSelected: Field<boolean>;
+}
+
+export function selectItem(index: number, items: Selectable[]) {
+  items.forEach((item, i) => {
+    item.isSelected.value = i === index;
+  });
+}

components/language-chooser/common/language-chooser-controller/src/view-models/language-card.ts

@@ -0,0 +1,52 @@
+import { ILanguage } from "@ethnolib/find-language";
+import { Field } from "@ethnolib/state-management-core";
+
+interface ViewModelArgs {
+  onSelect?: (isSelected: boolean) => void;
+}
+
+export type LanguageCardViewModel = ReturnType<
+  typeof useLanguageChardViewModel
+>;
+
+export function useLanguageChardViewModel(
+  language: ILanguage,
+  { onSelect }: ViewModelArgs = {}
+) {
+  const isSelected = new Field(false, (isSelected) => {
+    if (onSelect) {
+      onSelect(isSelected);
+    }
+  });
+
+  const title = language.autonym ?? language.exonym;
+
+  const secondTitle =
+    language.autonym && language.autonym !== language.exonym
+      ? language.exonym
+      : undefined;
+
+  function description(
+    translations: {
+      macrolanguageLabel: string;
+      macrolanguageOfRegionLabel: (regions: string) => string;
+      languageOfRegionLabel: (regions: string) => string;
+    } = {
+      macrolanguageLabel: "A macrolanguage",
+      macrolanguageOfRegionLabel: (regions) => `A macrolanguage of ${regions}`,
+      languageOfRegionLabel: (regions: string) => `A language of ${regions}`,
+    }
+  ) {
+    return language.regionNamesForDisplay || language.isMacrolanguage
+      ? language.isMacrolanguage
+        ? language.regionNamesForDisplay
+          ? translations.macrolanguageOfRegionLabel(
+              language.regionNamesForDisplay
+            )
+          : translations.macrolanguageLabel
+        : translations.languageOfRegionLabel(language.regionNamesForDisplay)
+      : undefined;
+  }
+
+  return { language, isSelected, title, secondTitle, description };
+}