Change KaTeXErrorView to TeXErrorView and use PhosphorIcons (#814)

## Summary: This PR updates the `KaTeXErrroView` to be just `TeXErrorView` (now that we've moved to MathJax). It also moves us to use Phosphor icons (as per the ooooold comment) and updates the component to use Wonder Blocks `View`'s instead of raw divs. Oh, and also directs folks to the right place to ask for help if they encounter TeX errors. Lastly, this PR forced a few Typescript config changes to get everything to work. I copied how the WB repository provides type definitions (`*.d.ts`) by symlinks and did away with the `typeRoots` config option... as that was causing issues during `yarn build:types` (Typescript didn't find those type definitions). <img width="600" alt="image" src="https://github.com/Khan/perseus/assets/77138/2e362119-43b8-417b-ad64-5a2e58962344"> Issue: "none" ## Test plan: Run Storybook and check out the component. Author: jeremywiebe Reviewers: benchristel, jeremywiebe, Myranae Required Reviewers: Approved By: benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald Pull Request URL: #814
Khan · Dec 4, 2023 · 105d206 · 105d206
1 parent 89cb5d7
commit 105d206
Show file tree

Hide file tree

Showing 44 changed files with 765 additions and 500 deletions.
diff --git a/.changeset/eight-turtles-kick.md b/.changeset/eight-turtles-kick.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Change KaTeXErrorView to TeXErrorView and adopt Phosphor Icons in it
diff --git a/.changeset/strong-guests-fold.md b/.changeset/strong-guests-fold.md
@@ -0,0 +1,14 @@
+---
+"@khanacademy/kas": patch
+"@khanacademy/kmath": patch
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-core": patch
+"@khanacademy/perseus-editor": patch
+"@khanacademy/perseus-error": patch
+"@khanacademy/perseus-linter": patch
+"@khanacademy/pure-markdown": patch
+"@khanacademy/simple-markdown": patch
+---
+
+Minor build change to how we provide Typescript type definitions (should be no change to build output).
diff --git a/.eslintignore b/.eslintignore
@@ -1,13 +1,19 @@
-**/node_modules
+node_modules
 coverage
 coverage-ts
-**/dist
+storybook-static
+
 packages/**/build
+**/dist
 **/*.template
 **/package.json
 **/*.md
 vendor
 LICENSE
 **/__genfiles__
-storybook-static
 cypress/
+
+**/*.json
+**/*.jpg
+**/*.png
+**/*.svg
diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
@@ -148,6 +148,7 @@ jobs:
 
             - name: Upload Cypress Screenshots
               uses: actions/upload-artifact@v2
+              if: failure()
               with:
                   name: cypress-screenshots
                   path: ./cypress/screenshots

diff --git a/package.json b/package.json
@@ -69,23 +69,23 @@
     "cypress": "^13.6.0",
     "cypress-jest-adapter": "^0.1.1",
     "cypress-wait-until": "^2.0.1",
-    "eslint": "^8.13.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-disable": "^2.0.3",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.4",
-    "eslint-plugin-jsdoc": "^41.1.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "27.2.1",
+    "eslint-plugin-jsdoc": "^44.2.3",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-monorepo": "^0.3.2",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^3.10.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^5.0.0",
     "fast-glob": "^3.2.11",
     "jest": "^29.0.1",

diff --git a/packages/.eslintrc.js b/packages/.eslintrc.js
diff --git a/packages/kas/types b/packages/kas/types
@@ -0,0 +1 @@
+../../types/
diff --git a/packages/kmath/types b/packages/kmath/types
@@ -0,0 +1 @@
+../../types/
diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx
@@ -213,6 +213,7 @@ class MathInput extends React.Component<Props, State> {
         );
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(props: Props) {
         if (this.props.keypadElement !== props.keypadElement) {
             this._clearKeypadBoundsCache();

diff --git a/packages/math-input/src/components/input/math-wrapper.ts b/packages/math-input/src/components/input/math-wrapper.ts
@@ -26,12 +26,12 @@ import {
 } from "./mathquill-helpers";
 import {createMathField, mathQuillInstance} from "./mathquill-instance";
 
-import type Key from "../../data/keys";
-import type {Cursor} from "../../types";
 import type {
     MathFieldInterface,
     MathFieldUpdaterCallback,
 } from "./mathquill-types";
+import type Key from "../../data/keys";
+import type {Cursor} from "../../types";
 
 const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
     ...keyTranslator,

diff --git a/packages/math-input/src/data/key-configs.ts b/packages/math-input/src/data/key-configs.ts
@@ -5,9 +5,9 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
 import {IconType} from "../enums";
 
+import type Key from "./keys";
 import type {KeyType} from "../enums";
 import type {KeyConfig} from "../types";
-import type Key from "./keys";
 
 type KeyConfigMapper = (args: {
     key: Key;

diff --git a/packages/math-input/types b/packages/math-input/types
@@ -0,0 +1 @@
+../../types/
diff --git a/packages/perseus-core/types b/packages/perseus-core/types
@@ -0,0 +1 @@
+../../types/
diff --git a/packages/perseus-editor/package.json b/packages/perseus-editor/package.json
@@ -32,6 +32,7 @@
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
@@ -53,6 +54,7 @@
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",

diff --git a/packages/perseus-editor/src/__stories__/tex-error-view.stories.tsx b/packages/perseus-editor/src/__stories__/tex-error-view.stories.tsx
@@ -0,0 +1,26 @@
+import TexErrorView from "../tex-error-view";
+
+import type {Meta, StoryObj} from "@storybook/react";
+
+const meta: Meta<typeof TexErrorView> = {
+    component: TexErrorView,
+    title: "Perseus/Editor/TexErrorView",
+};
+
+export default meta;
+type Story = StoryObj<typeof TexErrorView>;
+
+export const Primary: Story = {
+    args: {
+        errorList: [
+            {
+                math: "\\x^2",
+                message: "TeX parse error: Undefined control sequence: \\x",
+            },
+            {
+                math: "\\y^2",
+                message: "TeX parse error: Undefined control sequence: \\y",
+            },
+        ],
+    },
+};
diff --git a/packages/perseus-editor/src/components/blur-input.tsx b/packages/perseus-editor/src/components/blur-input.tsx
@@ -32,6 +32,7 @@ class BlurInput extends React.Component<Props, State> {
         this.state = {value: this.props.value};
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this.setState({value: nextProps.value});
     }

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
@@ -30,6 +30,7 @@ const SortableArea = createReactClass({
     componentDidMount: function () {
         this._setDragEvents();
     },
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps: function (nextProps) {
         this.setState({components: nextProps.components});
     },

diff --git a/packages/perseus-editor/src/components/widget-editor.tsx b/packages/perseus-editor/src/components/widget-editor.tsx
@@ -58,6 +58,7 @@ class WidgetEditor extends React.Component<
         };
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
         // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
         this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});

diff --git a/packages/perseus-editor/src/diffs/__stories__/structured-item-diff.stories.tsx b/packages/perseus-editor/src/diffs/__stories__/structured-item-diff.stories.tsx
@@ -4,7 +4,6 @@ import StructuredItemDiff from "../structured-item-diff";
 
 import Wrapper from "./perseus-diff-wrapper";
 
-// @ts-expect-error [FEI-5003] - TS2307 - Cannot find module '../../styles/perseus-editor.less' or its corresponding type declarations.
 import("../../styles/perseus-editor.less");
 
 type StoryArgs = Record<any, any>;

diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx
@@ -24,7 +24,7 @@ import _ from "underscore";
 import DragTarget from "./components/drag-target";
 import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
-import KatexErrorView from "./katex-error-view";
+import TexErrorView from "./tex-error-view";
 
 import type {ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
 
@@ -192,6 +192,7 @@ class Editor extends React.Component<Props, State> {
     }
 
     // TODO(arun): This is a deprecated method, use the appropriate replacement
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (this.props.content !== nextProps.content) {
             this.setState({textAreaValue: nextProps.content});
@@ -1100,7 +1101,7 @@ class Editor extends React.Component<Props, State> {
             >
                 {textareaWrapper}
                 {katexErrorList.length > 0 && (
-                    <KatexErrorView errorList={katexErrorList} />
+                    <TexErrorView errorList={katexErrorList} />
                 )}
                 {this.props.warnNoPrompt && noPrompt && (
                     <div style={warningStyle}>

diff --git a/packages/perseus-editor/src/katex-error-view.tsx b/packages/perseus-editor/src/katex-error-view.tsx