Adopt @microbit/ui-patterns' LanguageDialog

bin/compile-lang.mjs

@@ -21,10 +21,12 @@ import { fileURLToPath } from "node:url";
 const require = createRequire(import.meta.url);
 const root = path.join(path.dirname(fileURLToPath(import.meta.url)), "..");
 const formatjs = require.resolve("@formatjs/cli/bin/formatjs");
-const packageLangDirs = ["@microbit/ui"].map((name) => ({
-  name,
-  dir: path.dirname(require.resolve(`${name}/lang/ui.en.json`)),
-}));
+const packageLangDirs = ["@microbit/ui", "@microbit/ui-patterns"].map(
+  (name) => ({
+    name,
+    dir: path.dirname(require.resolve(`${name}/lang/ui.en.json`)),
+  })
+);
 
 for (const file of fs.readdirSync(path.join(root, "lang")).sort()) {
   const inputs = [path.join(root, "lang", file)];

lang/ui.ca.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Ajuda i suport",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Ajuda a traduir",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Ressaltar l'estructura del programa",
     "description": "Code structure setting label"

lang/ui.de.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Hilfe & Support",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Beim Übersetzen helfen",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Codestruktur hervorheben",
     "description": "Code structure setting label"

lang/ui.en.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Help & support",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Help translate",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Highlight code structure",
     "description": "Code structure setting label"

lang/ui.es-es.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Ayuda y asistencia",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Ayudar a traducir",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Resaltar la estructura del código",
     "description": "Code structure setting label"

lang/ui.fr.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Aide et support",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Contribuer à la traduction",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Surligner la structure du code",
     "description": "Code structure setting label"

lang/ui.ga-ie.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Cabhair & tacaíocht",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Cabhair a aistriú",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Aibhsigh struchtúr an chóid",
     "description": "Code structure setting label"

lang/ui.ja.json

@@ -363,10 +363,6 @@
     "defaultMessage": "ヘルプとサポート",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "翻訳を手伝う",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "コード構造を強調表示",
     "description": "Code structure setting label"

lang/ui.ko.json

@@ -363,10 +363,6 @@
     "defaultMessage": "도움말 및 지원",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "번역 지원",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "코드 구조 하이라이트",
     "description": "Code structure setting label"

lang/ui.lol.json

@@ -363,10 +363,6 @@
     "defaultMessage": "crwdns331530:0crwdne331530:0",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "crwdns331532:0crwdne331532:0",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "crwdns331534:0crwdne331534:0",
     "description": "Code structure setting label"

lang/ui.nl.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Hulp & Ondersteuning",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Help met vertalen",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Code structuur markeren",
     "description": "Code structure setting label"

lang/ui.pl.json

@@ -363,10 +363,6 @@
     "defaultMessage": "Pomoc i wsparcie",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "Pomóż tłumaczyć",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "Podświetl strukturę kodu",
     "description": "Code structure setting label"

lang/ui.zh-cn.json

@@ -363,10 +363,6 @@
     "defaultMessage": "帮助与支持",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "帮助翻译",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "突出显示代码结构",
     "description": "Code structure setting label"

lang/ui.zh-tw.json

@@ -363,10 +363,6 @@
     "defaultMessage": "說明與支援",
     "description": "Menu item for link to support site"
   },
-  "help-translate": {
-    "defaultMessage": "說明翻譯",
-    "description": "Help translate  menu option text"
-  },
   "highlight-code-structure": {
     "defaultMessage": "強調程式碼結構",
     "description": "Code structure setting label"

package.json

@@ -21,7 +21,8 @@
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.10.0",
-    "@microbit/ui": "0.1.0-alpha.24",
+    "@microbit/ui": "0.1.0-alpha.26",
+    "@microbit/ui-patterns": "0.1.0-alpha.3",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
     "@testing-library/jest-dom": "^5.14.1",

panda.config.ts

@@ -51,6 +51,7 @@ export default defineConfig({
     // still works via the preset's staticCss), so a wrong path shows up only as
     // broken non-recipe styling — check the resolved node_modules path.
     "./node_modules/@microbit/ui/src/**/*.{ts,tsx}",
+    "./node_modules/@microbit/ui-patterns/src/**/*.{ts,tsx}",
   ],
   outdir: "styled-system",
 });

src/language-server/pyright.ts

@@ -33,6 +33,9 @@ export const pyright = async (
   language: string,
   toast: ToastFn
 ): Promise<LanguageServerClient | undefined> => {
+  // The typeshed.<locale>.json imports and the server's locale are
+  // lowercase; language ids use canonical BCP 47 casing.
+  language = language.toLowerCase();
   // For jsdom.
   if (!window.Worker) {
     return undefined;

src/messages/TranslationProvider.tsx

@@ -14,7 +14,8 @@ import {
 import { useToast } from "@microbit/ui";
 
 async function loadLocaleData(locale: string) {
-  switch (locale) {
+  // Language ids use canonical BCP 47 casing; the catalog files are lowercase.
+  switch (locale.toLowerCase()) {
     // Add further cases explicitly for code splitting.
     // The need for this might be worth revisiting.
     case "ca":

src/messages/ui.ca.json

@@ -697,12 +697,6 @@
       "value": "Ajuda i suport"
     }
   ],
-  "help-translate": [
-    {
-      "type": 0,
-      "value": "Ajuda a traduir"
-    }
-  ],
   "highlight-code-structure": [
     {
       "type": 0,
@@ -2367,6 +2361,60 @@
       "value": "Torna-ho a provar"
     }
   ],
+  "ui-patterns.help-translate": [
+    {
+      "type": 0,
+      "value": "Ajuda a traduir"
+    }
+  ],
+  "ui-patterns.language": [
+    {
+      "type": 0,
+      "value": "Idioma"
+    }
+  ],
+  "ui-patterns.language-fully-supported-heading": [
+    {
+      "type": 0,
+      "value": "Completament compatible"
+    }
+  ],
+  "ui-patterns.language-partially-supported-heading": [
+    {
+      "type": 0,
+      "value": "Parcialment compatible"
+    }
+  ],
+  "ui-patterns.language-preview-notice": [
+    {
+      "type": 0,
+      "value": "* These languages are an early preview of in-progress translations."
+    }
+  ],
+  "ui-patterns.language-support-checked": [
+    {
+      "type": 0,
+      "value": "Compatible"
+    }
+  ],
+  "ui-patterns.language-support-unchecked": [
+    {
+      "type": 0,
+      "value": "Incompatible"
+    }
+  ],
+  "ui-patterns.language-supported-for": [
+    {
+      "type": 0,
+      "value": "Traduccions compatibles per a:"
+    }
+  ],
+  "ui-patterns.language-toast-title": [
+    {
+      "type": 0,
+      "value": "L'idioma no està disponible totalment"
+    }
+  ],
   "ui.breadcrumb": [
     {
       "type": 0,
@@ -2397,6 +2445,12 @@
       "value": "S'està carregant"
     }
   ],
+  "ui.new-tab-notice": [
+    {
+      "type": 0,
+      "value": "opens in a new tab"
+    }
+  ],
   "ui.numberfield-decrease": [
     {
       "type": 0,