This is a feature-branch pull-request from feature/numeric-dx-refactor to main (#2209)

## Summary:
This is the Feature Branch for the Numeric Input Project. 

This PR includes the following commits:
- Move Numeric Input's UI related code to a functional component  (#2108)
- Refactoring Numeric Input helper functions to remove underscore (#2128)
- Modernization and Migration of InputWithExamples to NumericInput folder (#2121)
- [its-a-numeric-story] Improving Numeric Input Storybook Stories (#2138)
- Ensure that Numeric Input Examples only show for correct answers. (#2159)
- [3-quell-the-fracus] [Bug Fix] - Ensure that users hand typing tex into Numeric Inputs on Desktop do not cause an infinite loop. (#2182)
- [fool-tips] Tooltip is Dead. Long Live Tooltip. (#2195)
- [whole-fraction-fix] Ensure that whole numbers are not accepted answers for Numeric Inputs that require Improper fractions. (#2203)
- [scrollin-aint-right] Fix right align scrollbars in Numeric Input  (#2187)
- [message-nit] Minor string adjustment (#2204)

## Test plan:
- tests pass 
- lint passes 
- Passed a Full QA Regression Suite

Author: SonicScrewdriver

Reviewers: nishasy, SonicScrewdriver, handeyeco, mark-fitzgerald

Required Reviewers:

Approved By: nishasy

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x)

Pull Request URL: #2209

Author: SonicScrewdriver

.changeset/brave-mice-cheer.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Fixing changes that did not migrate automatically while rebasing feature branch.

.changeset/chilled-mugs-greet.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-score": minor
+---
+
+Bugfix to ensure that Numerics that require Improper fractions don't accept whole numbers.

.changeset/clean-ads-push.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Update aria label for whe ncontent creators do not provide one

.changeset/dirty-seahorses-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Ensure Numeric Input Tooltips display under the input.

.changeset/five-geckos-jam.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Fixing bug where scrollbars would appear in Math Input when right aligned.

.changeset/five-rivers-fail.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Minor string update for Numeric editor

.changeset/pink-buttons-clap.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-score": patch
+---
+
+Bugfix to ensure users cannot create infinite loop with incomplete tex in Numeric Input

.changeset/purple-gifts-brake.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Update Input with Examples to use Wonderblocks Tooltip

.changeset/rich-flowers-prove.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": minor
+"@khanacademy/perseus": minor
+---
+
+Modernization and Migration of InputWithExamples to NumericInput folder

.changeset/rotten-kangaroos-fly.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Bug fix to ensure that Numeric Examples only show for correct answers.

.changeset/sharp-peaches-love.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/math-input": minor
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+---
+
+Refactoring Numeric Input helper functions to remove underscore, improve documentation, and add tests.

.changeset/six-cars-agree.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Cleanup of Numeric Input stories

.changeset/smart-countries-hunt.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": minor
+"@khanacademy/perseus": minor
+---
+
+Refactoring Numeric Input to move UI-logic to functional component.

.changeset/weak-zoos-march.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Update tests and fix snapshots from feature branch rebase

packages/math-input/src/components/input/math-input.tsx

@@ -353,6 +353,9 @@ class MathInput extends React.Component<Props, State> {
         });
     };
 
+    // [Jan 2025] Third: While testing, I've discovered that we likely don't
+    // need to be passing setKeypadActive here at all. Removing the parameter
+    // still results in the same behavior.
     focus: (setKeypadActive: KeypadContextType["setKeypadActive"]) => void = (
         setKeypadActive,
     ) => {
@@ -931,11 +934,14 @@ class MathInput extends React.Component<Props, State> {
         // padding values for the vertical directions.
         const symbolaPaddingBottom = 3;
         const symbolaPaddingTop = 1;
+        // We also add a little padding for the cursor to ensure there's no
+        // overflow when the input is empty and set to right aligned.
+        const cursorPadding = 2;
         const padding = {
             paddingTop: paddingInset - symbolaPaddingTop,
-            paddingRight: paddingInset,
+            paddingRight: paddingInset + cursorPadding,
             paddingBottom: paddingInset - symbolaPaddingBottom,
-            paddingLeft: paddingInset,
+            paddingLeft: paddingInset + cursorPadding,
         } as const;
 
         return padding;

packages/perseus-core/src/data-schema.ts

@@ -1181,16 +1181,16 @@ export type MathFormat =
     | "pi";
 
 export type PerseusNumericInputAnswerForm = {
-    simplify:
-        | "required"
-        | "correct"
-        | "enforced"
-        | "optional"
-        | null
-        | undefined;
+    simplify: PerseusNumericInputSimplify | null | undefined;
     name: MathFormat;
 };
 
+export type PerseusNumericInputSimplify =
+    | "required"
+    | "correct"
+    | "enforced"
+    | "optional";
+
 export type PerseusNumericInputWidgetOptions = {
     // A list of all the possible correct and incorrect answers
     answers: ReadonlyArray<PerseusNumericInputAnswer>;
@@ -1227,7 +1227,7 @@ export type PerseusNumericInputAnswer = {
     // NOTE: perseus_data.go says this is non-nullable even though we handle null values.
     maxError: number | null | undefined;
     // Unsimplified answers are Ungraded, Accepted, or Wrong. Options: "required", "correct", or "enforced"
-    simplify: string | null | undefined;
+    simplify: PerseusNumericInputSimplify | null | undefined;
 };
 
 export type PerseusNumberLineWidgetOptions = {

packages/perseus-core/src/parse-perseus-json/perseus-parsers/numeric-input-widget.ts

@@ -29,6 +29,13 @@ const parseMathFormat = enumeration(
     "pi",
 );
 
+const parseSimplify = enumeration(
+    "required",
+    "correct",
+    "enforced",
+    "optional",
+);
+
 export const parseNumericInputWidget: Parser<NumericInputWidget> = parseWidget(
     constant("numeric-input"),
     object({
@@ -48,8 +55,15 @@ export const parseNumericInputWidget: Parser<NumericInputWidget> = parseWidget(
                 // the data, we should simplify `simplify`.
                 simplify: optional(
                     nullable(
-                        union(string).or(
-                            pipeParsers(boolean).then(convert(String)).parser,
+                        union(parseSimplify).or(
+                            pipeParsers(boolean).then(
+                                convert((value) => {
+                                    if (typeof value === "boolean") {
+                                        return value ? "required" : "optional";
+                                    }
+                                    return value;
+                                }),
+                            ).parser,
                         ).parser,
                     ),
                 ),

packages/perseus-core/src/parse-perseus-json/regression-tests/__snapshots__/parse-perseus-json-regression.test.ts.snap

@@ -6791,7 +6791,7 @@ exports[`parseAndMigratePerseusItem given numeric-input-answer-with-simplify-tru
             {
               "maxError": 0,
               "message": "",
-              "simplify": "true",
+              "simplify": "required",
               "status": "correct",
               "strict": false,
               "value": 1.125,
@@ -7704,7 +7704,7 @@ exports[`parseAndMigratePerseusItem given numeric-input-with-simplify-false.json
             {
               "maxError": 0,
               "message": "",
-              "simplify": "false",
+              "simplify": "optional",
               "status": "correct",
               "strict": false,
               "value": 2.6,

packages/perseus-editor/src/__stories__/editor.stories.tsx

@@ -5,7 +5,7 @@ import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import {Editor} from "..";
-import SideBySide from "../../../../testing/side-by-side";
+import SplitView from "../../../../testing/split-view";
 import {question1} from "../__testdata__/numeric-input.testdata";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
@@ -84,9 +84,9 @@ export const DemoInteractiveGraph = (): React.ReactElement => {
         // class to be above it.
         // TODO: Refactor to aphrodite styles instead of scoped CSS in Less.
         <div className="framework-perseus">
-            <SideBySide
-                leftTitle="Editor"
-                left={
+            <SplitView
+                rendererTitle="Editor"
+                renderer={
                     <View style={{width: "360px", margin: "20px"}}>
                         <Editor
                             ref={editorRef}
@@ -127,7 +127,7 @@ export const DemoInteractiveGraph = (): React.ReactElement => {
                         />
                     </View>
                 }
-                rightTitle="Serialized Widget Options"
+                JSONTitle="Serialized Widget Options"
                 jsonObject={options}
             />
         </div>

packages/perseus-editor/src/widgets/numeric-input-editor.tsx

@@ -687,7 +687,7 @@ class NumericInputEditor extends React.Component<Props, State> {
                             </fieldset>
                             {unsimplifiedAnswers(i)}
                             <div className="perseus-widget-row">
-                                Message shown to user in article:
+                                (Articles only) Message shown to user:
                             </div>
                             {editor}
                             {suggestedAnswerTypes(i)}

packages/perseus-score/src/util/answer-types.ts

@@ -241,6 +241,17 @@ const KhanAnswerTypes = {
 
                 // an improper fraction
                 improper: function (text) {
+                    // As our answer keys are always in simplest form, we need
+                    // to check for the existence of a fraction in the input before
+                    // validating the answer. If no fraction is found, we consider
+                    // the answer to be incorrect.
+                    const fractionExists: boolean =
+                        text.includes("/") || text.match(/\\(d?frac)/);
+
+                    if (!fractionExists) {
+                        return [];
+                    }
+
                     return $.map(fractionTransformer(text), function (o) {
                         // All fractions that are greater than 1
                         if (Math.abs(o.value) >= 1) {

packages/perseus-score/src/util/tex-wrangler.test.ts

@@ -78,3 +78,22 @@ describe("parseTex", () => {
         assertParsed(undefined, "");
     });
 });
+describe("parseTex", () => {
+    it("should replace single fractions", () => {
+        assertParsed("\\dfrac{3}{4}", "3 / 4");
+    });
+
+    it("should remove blackslash-escapes for percent signs", () => {
+        assertParsed("3\\%", "3%");
+        assertParsed("3.5\\%", "3.5%");
+        assertParsed("\\dfrac{3\\%}{4}", "3% / 4");
+    });
+
+    it("should not throw error when input is undefined", () => {
+        assertParsed(undefined, "");
+    });
+
+    it("should not cause an infinite loop if provided incomplete tex commands", () => {
+        assertParsed("\\frac", "/");
+    });
+});

packages/perseus-score/src/util/tex-wrangler.ts

@@ -42,11 +42,23 @@ function parseNextExpression(
     // Find the first '{' and grab subsequent TeX
     // Ex) tex: '{3}{7}', and we want the '3'
     const openBracketIndex = tex.indexOf("{", currentIndex);
+
+    // If there is no open bracket, set the endpoint to the end of the string
+    // and the expression to an empty string. This helps ensure we don't
+    // get stuck in an infinite loop when users handtype TeX.
+    if (openBracketIndex === -1) {
+        return {
+            endpoint: tex.length,
+            expression: "",
+        };
+    }
+
     const nextExpIndex = openBracketIndex + 1;
 
     // Truncate to only contain remaining TeX
     const endpoint = findEndpoint(tex, nextExpIndex);
     const expressionTeX = tex.substring(nextExpIndex, endpoint);
+
     const parsedExp = walkTex(expressionTeX, handler);
 
     return {