Merge branch 'main' into sr-circle

.changeset/calm-chefs-boil.md

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

.changeset/chilled-cameras-play.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Refactor internally used object mapping utilities to use ES6 exports

.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/mean-fans-boil.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Minor refactoring of ServerItemRenderer's componentDidUpdate to reduce duplication

.changeset/metal-readers-impress.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Refactor scoring for `group` widget to follow the same pattern as all other widgets

.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/shiny-sloths-obey.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Add global styles to reflect prod styling

.changeset/smooth-taxis-mate.md

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

.changeset/stupid-apricots-retire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Remove debugging call in GraphSettings component

.changeset/sweet-ligers-arrive.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Introduces a validation function for the number line widget (extracted from the scoring function).

.changeset/tall-pianos-tap.md

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

.changeset/tender-planets-greet.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Changes the PerseusWidgetsMap to be extensible so that widgets can be registered outside of Perseus and still have full type safety.

.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",
@@ -172,6 +173,11 @@ module.exports = {
         "no-invalid-this": "off",
         "@typescript-eslint/no-this-alias": "off",
         "no-unused-expressions": "off",
+        "no-restricted-imports": [
+            "error",
+            "@khanacademy/wonder-blocks-color",
+            "@khanacademy/wonder-blocks-spacing",
+        ],
         "object-curly-spacing": "off",
         semi: "off",
 
@@ -303,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

.github/dependabot.yml

@@ -10,3 +10,17 @@ updates:
       allow:
           - dependency-name: "@khanacademy/eslint-config"
           - dependency-name: "@khanacademy/eslint-plugin"
+          - dependency-name: "@khanacademy/wonder-blocks-*"
+          - dependency-name: "@khanacademy/wonder-stuff-*"
+      assignees:
+          - "@Khan/perseus"
+
+      # Grouped updates for Wonder Blocks and Wonder Stuff releases.
+      # This helps us to stay in sync with the latest releases of these packages.
+      groups:
+          wonder-stuff:
+              patterns:
+                  - "@khanacademy/wonder-stuff-*"
+          wonder-blocks:
+              patterns:
+                  - "@khanacademy/wonder-blocks-*"

.github/workflows/storybook.yml

@@ -44,3 +44,6 @@ jobs:
                   projectToken: ${{ secrets.CHROMATIC_APP_CODE }}
                   autoAcceptChanges: "main"
                   onlyStoryFiles: "**/*regression.stories.tsx"
+                  # NOTE: We cannot enable `onlyChanged` because it is
+                  # incompatible with `onlyStoryFiles` which we use above.
+                  # onlyChanged: true # Enable TurboSnap!

.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

@@ -23,7 +23,17 @@ const preview: Preview = {
         (Story) => (
             <RenderStateRoot>
                 <DependenciesContext.Provider value={storybookDependenciesV2}>
-                    <Story />
+                    {/* Most of our components have an expectation to be
+                        rendered inside of a .framework-perseus container.
+                        We want to make sure we can include it here, since it
+                        can also affect the styling.
+
+                        Inclue box-sizing-border-box-reset to reflect
+                        the global styles from prod.
+                    */}
+                    <div className="framework-perseus box-sizing-border-box-reset">
+                        <Story />
+                    </div>
                 </DependenciesContext.Provider>
             </RenderStateRoot>
         ),
@@ -60,6 +70,10 @@ const preview: Preview = {
             })),
         },
     },
+    tags: [
+        //👇 Enables auto-generated documentation for all stories
+        "autodocs",
+    ],
 };
 
 export default preview;

config/test/test-setup.ts

@@ -35,7 +35,6 @@ if (typeof window !== "undefined") {
     // Override the window.location implementation to mock out assign()
     // We need to access window.location.assign to verify that we're
     // redirecting to the right place.
-    /* eslint-disable no-restricted-syntax */
     const oldLocation = window.location;
     // @ts-expect-error - TS2790 - The operand of a 'delete' operator must be optional.
     delete window.location;

dev/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+-   Updated dependencies [[`88ba71bef`](https://github.com/Khan/perseus/commit/88ba71bef0cdd75fa0c8b467dcea2cccc637d034)]:
+    -   @khanacademy/kas@0.4.2
+    -   @khanacademy/simple-markdown@0.13.6
+    -   @khanacademy/pure-markdown@0.3.13
+
 ## 4.0.0
 
 ### Major 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.0",
+    "version": "4.0.3",
     "private": true,
     "repository": {
         "type": "git",
@@ -14,13 +14,13 @@
         "dev": "vite"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.4.1",
+        "@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.12",
-        "@khanacademy/simple-markdown": "^0.13.5",
+        "@khanacademy/pure-markdown": "^0.3.13",
+        "@khanacademy/simple-markdown": "^0.13.6",
         "@khanacademy/wonder-blocks-banner": "3.1.7",
         "@khanacademy/wonder-blocks-icon": "4.1.3",
         "@khanacademy/wonder-blocks-icon-button": "5.3.4",
@@ -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"),