Merge branch 'main' into jer/perseus-widget-map-extensible

.changeset/calm-chefs-boil.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+TypeScript fixes

.changeset/early-phones-remain.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Type fixes

.changeset/hip-pandas-argue.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Ensure that zoomed-in images retain alt text

.changeset/large-melons-deny.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Ensure links opening to style guide (Google Docs) set `rel="noreferrer"`

.changeset/many-keys-smash.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Numeric Input] - Show format options as a list

.changeset/odd-moons-remember.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Numeric Input] - Associate format options tooltip content with input field for assistive technologies

.changeset/smooth-taxis-mate.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: convert backgroundImage dimensions to numbers during parsing.

.changeset/tall-pianos-tap.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Improve comments on some Perseus types

.changeset/tiny-feet-give.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: add and pass regression tests for PerseusItem parser's handling of legacy data

.changeset/two-turtles-return.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+[Numeric Input] - Update the UI to match Expression widget

.eslintrc.js

@@ -49,6 +49,7 @@ function banImportExtension(extension) {
 module.exports = {
     extends: [
         "@khanacademy",
+        "plugin:react/recommended",
         // This config includes rules from storybook to enforce story best
         // practices
         "plugin:storybook/recommended",
@@ -308,6 +309,9 @@ module.exports = {
         /**
          * react
          */
+        "react/no-string-refs": "off", // on in react/recommended, but we have #legacy-code
+        "react/no-find-dom-node": "off", // on in react/recommended, but we have #legacy-code
+        "react/display-name": "off", // on in react/recommended, but doesn't seem that useful to fix
         // This rule results in false-positives when using some types of React
         // components (such as functional components or hooks). Since
         // TypeScript is already checking that components are only using props

.storybook/main.ts

@@ -1,4 +1,3 @@
-import turbosnap from "vite-plugin-turbosnap";
 import viteConfig from "../dev/vite.config";
 import {mergeConfig} from "vite";
 
@@ -54,24 +53,8 @@ const config: StorybookConfig = {
             },
             // Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
             assetsInclude: ["/sb-preview/runtime.js"],
-            plugins:
-                configType === "PRODUCTION"
-                    ? [
-                          turbosnap({
-                              // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
-                              rootDir: config.root ?? process.cwd(),
-                          }),
-                      ]
-                    : [],
         });
     },
-
-    typescript: {
-        reactDocgen: "react-docgen",
-    },
-    docs: {
-        autodocs: true,
-    },
     staticDirs: ["../static"],
 };
 

.storybook/preview.tsx

@@ -60,6 +60,10 @@ const preview: Preview = {
             })),
         },
     },
+    tags: [
+        //👇 Enables auto-generated documentation for all stories
+        "autodocs",
+    ],
 };
 
 export default preview;

dev/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/perseus-dev-ui
 
+## 4.0.3
+
+### Patch Changes
+
+-   [#1910](https://github.com/Khan/perseus/pull/1910) [`0a44d468d`](https://github.com/Khan/perseus/commit/0a44d468dd127bf15dc32e720b9b0301af41a572) Thanks [@handeyeco](https://github.com/handeyeco)! - Change ServerItemRenderer scoring APIs to externalize scoring
+
+## 4.0.2
+
+### Patch Changes
+
+-   [#1904](https://github.com/Khan/perseus/pull/1904) [`83b1beab8`](https://github.com/Khan/perseus/commit/83b1beab86dd9e7ee1e1760c4fad4be9f2ff5a71) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Upgrade Storybook to v8.x
+
+*   [#1904](https://github.com/Khan/perseus/pull/1904) [`83b1beab8`](https://github.com/Khan/perseus/commit/83b1beab86dd9e7ee1e1760c4fad4be9f2ff5a71) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Upgrade Storybook to v8.x
+
+*   Updated dependencies [[`83b1beab8`](https://github.com/Khan/perseus/commit/83b1beab86dd9e7ee1e1760c4fad4be9f2ff5a71)]:
+    -   @khanacademy/math-input@21.1.6
+
 ## 4.0.1
 
 ### Patch Changes

dev/flipbook.tsx

@@ -18,6 +18,7 @@ import {useEffect, useMemo, useReducer, useRef, useState} from "react";
 
 import {Renderer} from "../packages/perseus/src";
 import {SvgImage} from "../packages/perseus/src/components";
+import {scorePerseusItem} from "../packages/perseus/src/renderer-util";
 import {mockStrings} from "../packages/perseus/src/strings";
 import {isCorrect} from "../packages/perseus/src/util";
 import {trueForAllMafsSupportedGraphTypes} from "../packages/perseus/src/widgets/interactive-graphs/mafs-supported-graph-types";
@@ -319,7 +320,15 @@ function GradableRenderer(props: QuestionRendererProps) {
                 leftContent={
                     <Button
                         onClick={() => {
-                            setScore(rendererRef.current?.score());
+                            if (rendererRef.current) {
+                                const score = scorePerseusItem(
+                                    question,
+                                    rendererRef.current.getUserInputMap(),
+                                    mockStrings,
+                                    "en",
+                                );
+                                setScore(score);
+                            }
                             clearScoreTimeout.set();
                         }}
                     >

dev/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus dev UI",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.0.1",
+    "version": "4.0.3",
     "private": true,
     "repository": {
         "type": "git",
@@ -16,7 +16,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.4.2",
         "@khanacademy/kmath": "^0.1.16",
-        "@khanacademy/math-input": "^21.1.5",
+        "@khanacademy/math-input": "^21.1.6",
         "@khanacademy/perseus-core": "1.5.3",
         "@khanacademy/perseus-linter": "^1.2.4",
         "@khanacademy/pure-markdown": "^0.3.13",
@@ -34,6 +34,7 @@
         "@phosphor-icons/core": "^2.0.2"
     },
     "devDependencies": {
-        "vite": "^5.1.0"
+        "vite": "^5.1.0",
+        "@vitejs/plugin-react": "^4.3.3"
     }
 }

dev/vite.config.ts

@@ -1,6 +1,7 @@
 import fs from "node:fs";
 import {resolve, dirname, join} from "node:path";
 
+import react from "@vitejs/plugin-react";
 import glob from "fast-glob";
 import {defineConfig} from "vite";
 
@@ -20,6 +21,7 @@ export default defineConfig({
         // Dev/Storybook environment.
         "process.env.STORYBOOK": JSON.stringify(true),
     },
+    plugins: [react({jsxRuntime: "automatic"})],
     resolve: {
         alias: {
             hubble: resolve(__dirname, "../vendor/hubble/hubble.js"),

package.json

@@ -13,7 +13,7 @@
     "engines": {
         "node": ">=20"
     },
-    "dependencies": {
+    "devDependencies": {
         "@babel/core": "^7.23.2",
         "@babel/eslint-parser": "^7.22.15",
         "@babel/eslint-plugin": "^7.22.10",
@@ -40,14 +40,14 @@
         "@rollup/plugin-node-resolve": "^13.2.1",
         "@rollup/plugin-replace": "^4.0.0",
         "@sheerun/mutationobserver-shim": "^0.3.3",
-        "@storybook/addon-a11y": "^7.6.17",
-        "@storybook/addon-actions": "^7.6.17",
-        "@storybook/addon-controls": "^7.6.17",
-        "@storybook/addon-essentials": "^7.6.17",
-        "@storybook/addon-links": "^7.6.17",
-        "@storybook/addon-viewport": "^7.6.17",
-        "@storybook/react": "^7.6.17",
-        "@storybook/react-vite": "^7.6.17",
+        "@storybook/addon-a11y": "^8.4.5",
+        "@storybook/addon-actions": "^8.4.5",
+        "@storybook/addon-controls": "^8.4.5",
+        "@storybook/addon-essentials": "^8.4.5",
+        "@storybook/addon-links": "^8.4.5",
+        "@storybook/addon-viewport": "^8.4.5",
+        "@storybook/react": "^8.4.5",
+        "@storybook/react-vite": "^8.4.5",
         "@swc-node/register": "^1.6.6",
         "@swc/core": "^1.3.68",
         "@testing-library/dom": "^10.3.1",
@@ -117,13 +117,12 @@
         "rollup-plugin-preserve-shebangs": "^0.2.0",
         "rollup-plugin-styles": "^4.0.0",
         "sloc": "^0.2.1",
-        "storybook": "^7.6.17",
+        "storybook": "^8.4.5",
         "style-loader": "^3.3.3",
         "tiny-invariant": "^1.3.1",
-        "typescript": "^5.4.2",
+        "typescript": "5.7.2",
         "typescript-coverage-report": "^0.7.0",
         "vite-plugin-istanbul": "^5.0.0",
-        "vite-plugin-turbosnap": "^1.0.3",
         "winston": "^3.7.2"
     },
     "scripts": {
@@ -143,7 +142,7 @@
         "test": "jest",
         "storybook": "storybook dev -p 6006",
         "start": "storybook dev -p 6006",
-        "build-storybook": "storybook build",
+        "build-storybook": "storybook build --stats-json",
         "cypress": "cypress open --component",
         "cypress:ci": "cross-env cypress run --component",
         "format": "prettier --write .",

packages/math-input/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/math-input
 
+## 21.1.6
+
+### Patch Changes
+
+-   [#1904](https://github.com/Khan/perseus/pull/1904) [`83b1beab8`](https://github.com/Khan/perseus/commit/83b1beab86dd9e7ee1e1760c4fad4be9f2ff5a71) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Upgrade Storybook to v8.x
+
 ## 21.1.5
 
 ### Patch Changes

packages/math-input/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "21.1.5",
+    "version": "21.1.6",
     "publishConfig": {
         "access": "public"
     },