Add locale picker to the ServerItemRendererWithDebugUI

.changeset/silent-suits-ring.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Update ServerItemRendererWithDebugUI to have a locale picker

packages/perseus/src/widgets/expression/__docs__/expression.stories.tsx

@@ -2,7 +2,11 @@ import * as React from "react";
 
 import {ServerItemRendererWithDebugUI} from "../../../../../../testing/server-item-renderer-with-debug-ui";
 import expressionExport from "../expression";
-import {expressionItem2, expressionItem3} from "../expression.testdata";
+import {
+    expressionItem2,
+    expressionItem3,
+    expressionItem4,
+} from "../expression.testdata";
 
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
@@ -72,6 +76,12 @@ export const ExpressionItem3: Story = {
     },
 };
 
+export const ExpressionItem4: Story = {
+    args: {
+        item: expressionItem4,
+    },
+};
+
 export const AnswerlessExpression: Story = {
     args: {
         item: expressionItem3,

packages/perseus/src/widgets/expression/expression.testdata.ts

@@ -113,3 +113,19 @@ export const expressionItem3: PerseusItem = createItemJson({
     ariaLabel: "number of centimeters",
     extraKeys: ["z", "a"],
 });
+
+export const expressionItem4: PerseusItem = createItemJson({
+    answerForms: [
+        {
+            considered: "correct",
+            form: false,
+            simplify: false,
+            value: "5.5",
+        },
+    ],
+    times: true,
+    buttonSets: ["basic"],
+    functions: ["f", "g", "h"],
+    buttonsVisible: "always",
+    extraKeys: ["x"],
+});

testing/debug-check-answer-footer.tsx

@@ -160,7 +160,7 @@ const styles = {
         left: 0,
         right: 0,
         padding: `${sizing.size_120} ${sizing.size_160}`,
-        backgroundColor: semanticColor.core.background.base.default,
+        backgroundColor: "#FFFFFF",
         border: `${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,
     },
     buttonContainer: {

testing/debug-header.tsx

@@ -1,18 +1,22 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Switch from "@khanacademy/wonder-blocks-switch";
-import {Title} from "@khanacademy/wonder-blocks-typography";
+import {LabelSmall, Title} from "@khanacademy/wonder-blocks-typography";
 import deviceMobile from "@phosphor-icons/core/regular/device-mobile.svg";
 import textAlignLeft from "@phosphor-icons/core/regular/text-align-left.svg";
 import textAlignRight from "@phosphor-icons/core/regular/text-align-right.svg";
 import * as React from "react";
 
+import {ALL_LOCALES} from "./locales";
+
 type DebugHeaderProps = {
     title: string;
     isMobile: boolean;
     isRtl: boolean;
+    locale: string;
     onToggleMobile: (isMobile: boolean) => void;
     onToggleRtl: (isRtl: boolean) => void;
+    onLocaleChange: (locale: string) => void;
 };
 
 /**
@@ -22,8 +26,10 @@ export const DebugHeader = ({
     title,
     isMobile,
     isRtl,
+    locale,
     onToggleMobile,
     onToggleRtl,
+    onLocaleChange,
 }: DebugHeaderProps): React.ReactElement => {
     return (
         <View
@@ -35,8 +41,40 @@ export const DebugHeader = ({
         >
             <Title>{title}</Title>
             <View
-                style={{marginLeft: "auto", flexDirection: "row", gap: "8px"}}
+                style={{
+                    marginLeft: "auto",
+                    flexDirection: "row",
+                    gap: "8px",
+                    alignItems: "center",
+                }}
             >
+                <View
+                    style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: "4px",
+                    }}
+                >
+                    <LabelSmall>Locale</LabelSmall>
+                    <select
+                        value={locale}
+                        onChange={(e) => onLocaleChange(e.target.value)}
+                        style={{
+                            width: "80px",
+                            padding: "4px",
+                            border: "1px solid #ccc",
+                            borderRadius: "4px",
+                            fontSize: "12px",
+                            backgroundColor: "white",
+                        }}
+                    >
+                        {ALL_LOCALES.map((localeCode) => (
+                            <option key={localeCode} value={localeCode}>
+                                {localeCode}
+                            </option>
+                        ))}
+                    </select>
+                </View>
                 <Switch
                     icon={
                         <PhosphorIcon

testing/item-renderer-hooks.tsx

@@ -25,6 +25,7 @@ export const useItemRenderer = (
     startAnswerless: boolean = false,
     reviewMode: boolean = false,
     showSolutions?: ShowSolutions,
+    initialLocale: string = "en",
 ) => {
     const ref = useRef<ServerItemRenderer>(null);
     const [state, dispatch] = useReducer(
@@ -36,6 +37,7 @@ export const useItemRenderer = (
             false, // isRtl defaults to false
             reviewMode,
             showSolutions,
+            initialLocale,
         ),
     );
 
@@ -96,7 +98,7 @@ export const useItemRenderer = (
         const score = scorePerseusItem(
             state.perseusItem.question,
             userInput,
-            "en",
+            state.locale,
         );
 
         // Continue to include an empty guess for the now defunct answer area.
@@ -114,7 +116,7 @@ export const useItemRenderer = (
         }
 
         return keScore;
-    }, [state.perseusItem]);
+    }, [state.perseusItem, state.locale]);
 
     const updateJson = React.useCallback((json: string): boolean => {
         try {
@@ -135,6 +137,10 @@ export const useItemRenderer = (
         dispatch({type: "TOGGLE_RTL", payload: isRtl});
     }, []);
 
+    const setLocale = React.useCallback((locale: string) => {
+        dispatch({type: "SET_LOCALE", payload: locale});
+    }, []);
+
     const handleReset = React.useCallback(() => {
         dispatch({type: "RESET_STATE"});
     }, []);
@@ -162,6 +168,7 @@ export const useItemRenderer = (
         options,
         toggleMobile,
         toggleRtl,
+        setLocale,
         updateJson,
         handleReset,
         handleSkip,

testing/item-renderer-reducer.ts

@@ -8,6 +8,7 @@ import type {
 export type ItemRendererState = {
     isMobile: boolean;
     isRtl: boolean;
+    locale: string;
     perseusItem: PerseusItem;
     originalItem: PerseusItem;
     answerless: boolean;
@@ -24,6 +25,7 @@ export type ItemRendererState = {
 export type ItemRendererAction =
     | {type: "TOGGLE_MOBILE"; payload: boolean}
     | {type: "TOGGLE_RTL"; payload: boolean}
+    | {type: "SET_LOCALE"; payload: string}
     | {type: "UPDATE_ITEM"; payload: PerseusItem}
     | {type: "SET_SCORE"; payload: KEScore | null | undefined}
     | {type: "TOGGLE_POPOVER"; payload: boolean}
@@ -41,9 +43,11 @@ export const createInitialState = (
     isRtl: boolean = false,
     reviewMode: boolean = false,
     showSolutions?: ShowSolutions,
+    locale?: string,
 ): ItemRendererState => ({
     isMobile,
     isRtl,
+    locale: locale || "en",
     perseusItem: item,
     originalItem: item,
     answerless: startAnswerless,
@@ -68,6 +72,9 @@ export const itemRendererReducer = (
         case "TOGGLE_RTL":
             return {...state, isRtl: action.payload};
 
+        case "SET_LOCALE":
+            return {...state, locale: action.payload};
+
         case "UPDATE_ITEM":
             return {...state, perseusItem: action.payload};
 
@@ -94,6 +101,8 @@ export const itemRendererReducer = (
                     state.isMobile,
                     state.isRtl,
                     state.reviewMode,
+                    state.showSolutions,
+                    state.locale,
                 ),
                 key: state.key + 1, // Force remount
             };

testing/locales.ts

@@ -0,0 +1,63 @@
+/**
+ * A collection of locales for testing purposes
+ */
+
+// All supported locales
+export const ALL_LOCALES = [
+    // TEST locales
+    "as",
+    "az",
+    "cs",
+    "da",
+    "el",
+    "gu",
+    "hu",
+    "id",
+    "it",
+    "lt",
+    "ja",
+    "kk",
+    "kn",
+    "ky",
+    "lv",
+    "mn",
+    "mr",
+    "my",
+    "nl",
+    "pt-pt",
+    "ru",
+    "sgn-us",
+    "sv",
+    "ta",
+    "uz",
+
+    // LIVE
+    "ar",
+    "bg",
+    "bn",
+    "de",
+    "en",
+    "es",
+    "fr",
+    "hi",
+    "hy",
+    "ka",
+    "km",
+    "ko",
+    "nb",
+    "or",
+    "pa",
+    "pl",
+    "pt",
+    "ro",
+    "sr",
+    "te",
+    "tr",
+    "uk",
+    "ur",
+    "vi",
+    "zh-hans",
+];
+
+// Default locale
+export const DEFAULT_LOCALE = "en";

testing/server-item-renderer-with-debug-ui.tsx

@@ -2,12 +2,15 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
 import {KeypadContext} from "../packages/keypad-context/src/keypad-context";
+import {PerseusI18nContextProvider} from "../packages/perseus/src/components/i18n-context";
 import {ServerItemRenderer} from "../packages/perseus/src/server-item-renderer";
+import {mockStrings} from "../packages/perseus/src/strings";
 
 import {DebugAccordionUI} from "./debug-accordion-ui";
 import {DebugCheckAnswerFooter} from "./debug-check-answer-footer";
 import {DebugHeader} from "./debug-header";
 import {useItemRenderer} from "./item-renderer-hooks";
+import {DEFAULT_LOCALE} from "./locales";
 import {storybookDependenciesV2} from "./test-dependencies";
 import TestKeypadContextWrapper from "./test-keypad-context-wrapper";
 
@@ -46,6 +49,7 @@ export const ServerItemRendererWithDebugUI = ({
         options,
         toggleMobile,
         toggleRtl,
+        setLocale,
         updateJson,
         handleReset,
         handleSkip,
@@ -57,6 +61,7 @@ export const ServerItemRendererWithDebugUI = ({
         startAnswerless,
         reviewMode,
         showSolutions,
+        DEFAULT_LOCALE,
     );
 
     return (
@@ -72,36 +77,44 @@ export const ServerItemRendererWithDebugUI = ({
                         title={title}
                         isMobile={state.isMobile}
                         isRtl={state.isRtl}
+                        locale={state.locale}
                         onToggleRtl={toggleRtl}
                         onToggleMobile={toggleMobile}
+                        onLocaleChange={setLocale}
                     />
 
                     {/* Item renderer */}
                     <div
                         className={state.isMobile ? "perseus-mobile" : ""}
                         dir={state.isRtl ? "rtl" : "ltr"}
                     >
-                        <KeypadContext.Consumer>
-                            {({keypadElement}) => (
-                                <ServerItemRenderer
-                                    key={state.key}
-                                    ref={ref}
-                                    problemNum={0}
-                                    score={state.score}
-                                    apiOptions={options}
-                                    item={state.perseusItem}
-                                    dependencies={storybookDependenciesV2}
-                                    keypadElement={keypadElement}
-                                    linterContext={linterContext}
-                                    showSolutions={state.showSolutions}
-                                    hintsVisible={state.hintsVisible}
-                                    reviewMode={
-                                        (state.score && state.score?.correct) ||
-                                        false
-                                    }
-                                />
-                            )}
-                        </KeypadContext.Consumer>
+                        <PerseusI18nContextProvider
+                            strings={mockStrings}
+                            locale={state.locale}
+                        >
+                            <KeypadContext.Consumer>
+                                {({keypadElement}) => (
+                                    <ServerItemRenderer
+                                        key={state.key}
+                                        ref={ref}
+                                        problemNum={0}
+                                        score={state.score}
+                                        apiOptions={options}
+                                        item={state.perseusItem}
+                                        dependencies={storybookDependenciesV2}
+                                        keypadElement={keypadElement}
+                                        linterContext={linterContext}
+                                        showSolutions={state.showSolutions}
+                                        hintsVisible={state.hintsVisible}
+                                        reviewMode={
+                                            (state.score &&
+                                                state.score?.correct) ||
+                                            false
+                                        }
+                                    />
+                                )}
+                            </KeypadContext.Consumer>
+                        </PerseusI18nContextProvider>
                     </div>
 
                     {/* Debug accordion UI */}