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,3 @@
+export * from "./src/view-models/language-card";
+export * from "./src/view-models/script-card";
+export * from "./src/view-models/language-chooser";

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/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,46 @@
+import { ILanguage } from "@ethnolib/find-language";
+import { Field } from "@ethnolib/state-management-core";
+import { Selectable } from "../selectable";
+import { LanguageChooserTranslations } from "./translations";
+
+interface ViewModelArgs {
+  onSelect?: (isSelected: boolean) => void;
+  translations: LanguageChooserTranslations;
+}
+
+export class LanguageCardViewModel implements Selectable {
+  constructor(language: ILanguage, { onSelect, translations }: ViewModelArgs) {
+    this.language = language;
+
+    this.title = language.autonym ?? language.exonym;
+
+    if (language.autonym && language.autonym !== language.exonym) {
+      this.secondTitle = language.exonym;
+    }
+
+    if (language.regionNamesForDisplay || language.isMacrolanguage) {
+      this.description = language.isMacrolanguage
+        ? language.regionNamesForDisplay
+          ? translations.macrolanguageOfRegionLabel(
+              language.regionNamesForDisplay
+            )
+          : translations.macrolanguageLabel
+        : translations.languageOfRegionLabel(language.regionNamesForDisplay);
+    }
+
+    this.isSelected = new Field(false, (isSelected) => {
+      if (onSelect) {
+        onSelect(isSelected);
+      }
+    });
+  }
+
+  readonly language: ILanguage;
+
+  // Display data
+  readonly title: string;
+  readonly secondTitle?: string;
+  readonly description?: string;
+
+  readonly isSelected: Field<boolean>;
+}