Merge branch 'main' into LEMS-1947-add-edit-delete-locked-function

Khan · Aug 8, 2024 · ffeea6d · ffeea6d
2 parents 9f98040 + 2ebbc19
commit ffeea6d
Show file tree

Hide file tree

Showing 35 changed files with 390 additions and 122 deletions.
diff --git a/.changeset/eleven-paws-serve.md b/.changeset/eleven-paws-serve.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Hint Mode: Start Coords] Build the foundation for adding start coords UI for angle graphs
diff --git a/.changeset/flat-badgers-matter.md b/.changeset/flat-badgers-matter.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Remove old buttons that we weren't using anymore
diff --git a/.changeset/strange-trains-unite.md b/.changeset/strange-trains-unite.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Remove unused buttons from MathInput; add Lato
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -72,6 +72,7 @@ const config: StorybookConfig = {
     docs: {
         autodocs: true,
     },
+    staticDirs: ["../static"],
 };
 
 export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,59 @@
+<!-- Preload WB fonts to prevent layout shifting due to font rendering -->
+<link
+    rel="preload"
+    href="fonts/pre/Lato-Regular.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/Lato-Bold.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/Lato-Black.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/Lato-Italic.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/LatoLatin-Regular.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/LatoLatin-Bold.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/LatoLatin-Black.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link
+    rel="preload"
+    href="fonts/lato/LatoLatin-Italic.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+
+<link rel="stylesheet" href="./lato.css" />
diff --git a/packages/math-input/src/components/key-handlers/key-translator.ts b/packages/math-input/src/components/key-handlers/key-translator.ts
@@ -93,7 +93,6 @@ export const getKeyTranslator = (
     LEFT_PAREN: buildGenericCallback("(", ActionType.CMD),
     RIGHT_PAREN: buildGenericCallback(")", ActionType.CMD),
     SQRT: buildGenericCallback("sqrt", ActionType.CMD),
-    PHI: buildGenericCallback("\\phi", ActionType.CMD),
     PI: buildGenericCallback("pi", ActionType.CMD),
     THETA: buildGenericCallback("theta", ActionType.CMD),
     RADICAL: buildGenericCallback("nthroot", ActionType.CMD),
@@ -119,43 +118,16 @@ export const getKeyTranslator = (
         }
     },
 
-    LOG_B: (mathQuill) => {
-        mathQuill.typedText("log_");
-        mathQuill.keystroke("Right");
-        mathQuill.typedText("(");
-        mathQuill.keystroke("Left");
-        mathQuill.keystroke("Left");
-    },
-
     LOG_N: (mathQuill) => {
         mathQuill.write("log_{ }\\left(\\right)");
         mathQuill.keystroke("Left"); // into parentheses
         mathQuill.keystroke("Left"); // out of parentheses
         mathQuill.keystroke("Left"); // into index
     },
 
-    NTHROOT3: (mathQuill) => {
-        mathQuill.typedText("nthroot3");
-        mathQuill.keystroke("Right");
-    },
-
-    POW: (mathQuill) => {
-        const contents = mathQuill.latex();
-        mathQuill.typedText("^");
-
-        // If the input hasn't changed (for example, if we're
-        // attempting to add an exponent on an empty input or an empty
-        // denominator), insert our own "a^b"
-        if (mathQuill.latex() === contents) {
-            mathQuill.typedText("a^b");
-        }
-    },
-
     // These need to be overwritten by the consumer
     // if they're going to be used
     DISMISS: () => {},
-    NOOP: () => {},
-    MANY: () => {},
 
     NUM_0: buildGenericCallback("0"),
     NUM_1: buildGenericCallback("1"),

diff --git a/packages/math-input/src/components/keypad/button-assets.tsx b/packages/math-input/src/components/keypad/button-assets.tsx
@@ -1837,42 +1837,6 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     </g>
                 </svg>
             );
-
-        /**
-         * ANYTHING BELOW IS NOT YET HANDLED
-         */
-        case "MANY":
-        case "NOOP":
-        case "PHI":
-        case "NTHROOT3":
-        case "POW":
-        case "LOG_B":
-            // placeholder
-            return (
-                <svg
-                    width="40"
-                    height="40"
-                    viewBox="0 0 40 40"
-                    fill="black"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <text
-                        y="20"
-                        textLength="100%"
-                        lengthAdjust="spacingAndGlyphs"
-                    >
-                        {id}
-                    </text>
-                    <text
-                        y="35"
-                        textLength="100%"
-                        lengthAdjust="spacingAndGlyphs"
-                        fill="red"
-                    >
-                        placeholder
-                    </text>
-                </svg>
-            );
         default:
             // this line forces an exhaustive check of all keys;
             // if a key is not handled, the compiler will complain.

diff --git a/packages/math-input/src/data/key-configs.ts b/packages/math-input/src/data/key-configs.ts
@@ -272,12 +272,6 @@ const KeyConfigs = (
             ariaLabel: strings.theta,
         }),
     },
-    NOOP: {
-        ...getDefaultOperatorFields({
-            key: "NOOP",
-            keyType: "EMPTY",
-        }),
-    },
     // Input navigation
     UP: {
         ...getDefaultOperatorFields({
@@ -366,14 +360,6 @@ const KeyConfigs = (
         }),
     },
 
-    // TODO(charlie): Use the numeral color for the 'Many' key.
-    MANY: {
-        ...getDefaultOperatorFields({
-            key: "MANY",
-            keyType: "MANY",
-        }),
-    },
-
     // NUMBERS
     NUM_0: {
         ...getDefaultNumberFields({
@@ -687,26 +673,6 @@ const KeyConfigs = (
             key: "z",
         }),
     },
-    PHI: {
-        ...getDefaultValueFields({
-            key: "PHI",
-        }),
-    },
-    NTHROOT3: {
-        ...getDefaultValueFields({
-            key: "NTHROOT3",
-        }),
-    },
-    POW: {
-        ...getDefaultValueFields({
-            key: "POW",
-        }),
-    },
-    LOG_B: {
-        ...getDefaultValueFields({
-            key: "LOG_B",
-        }),
-    },
 });
 
 export default KeyConfigs;
diff --git a/packages/math-input/src/data/keys.ts b/packages/math-input/src/data/keys.ts
@@ -45,8 +45,6 @@ export const KeyArray = [
     "JUMP_INTO_NUMERATOR",
     "JUMP_OUT_NUMERATOR",
     "JUMP_OUT_DENOMINATOR", // Multi-functional keys.
-    "NOOP", // mobile native only
-    "MANY", // A custom key that captures an arbitrary number of symbols but has no 'default' symbol or action.
     "NUM_0",
     "NUM_1",
     "NUM_2",
@@ -109,13 +107,6 @@ export const KeyArray = [
     "X",
     "Y",
     "Z",
-
-    // Currently only used by
-    // Perseus' Expression MathInput
-    "PHI",
-    "NTHROOT3",
-    "POW",
-    "LOG_B",
 ] as const;
 
 type Key = (typeof KeyArray)[number];

diff --git a/packages/math-input/src/enums.ts b/packages/math-input/src/enums.ts
@@ -20,8 +20,5 @@ export const KeyTypes = [
     // For buttons that modify the broader keypad state (e.g., by changing
     // the visible pane).
     "KEYPAD_NAVIGATION",
-    // For buttons that house multiple buttons and have no action
-    // themselves.
-    "MANY",
 ];
 export type KeyType = (typeof KeyTypes)[number];
diff --git a/packages/math-input/src/types.ts b/packages/math-input/src/types.ts
@@ -9,20 +9,13 @@ export type IconConfig = {
     data: string;
 };
 
-export type NonManyKeyConfig = {
+export type KeyConfig = {
     id: Key;
-    type: Exclude<KeyType, "MANY">;
+    type: KeyType;
     icon: IconConfig;
     ariaLabel: string;
 };
 
-export type ManyKeyConfig = Omit<NonManyKeyConfig, "type"> & {
-    type: Extract<KeyType, "MANY">;
-    childKeyIds: ReadonlyArray<string>;
-};
-
-export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
-
 export type KeypadConfiguration = {
     keypadType: KeypadType;
     extraKeys?: ReadonlyArray<Key>;

diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -22,6 +22,7 @@ export const flags = {
         "start-coords-ui-phase-2": true,
         "start-coords-ui-point": true,
         "start-coords-ui-polygon": true,
+        "start-coords-ui-angle": true,
     },
 } satisfies APIOptions["flags"];
 

diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
@@ -8,11 +8,12 @@ import * as React from "react";
 
 import {EditorPage} from "..";
 import {
+    angleWithStartingCoordsQuestion,
     circleWithStartingCoordsQuestion,
     linearSystemWithStartingCoordsQuestion,
     linearWithStartingCoordsQuestion,
     pointQuestionWithStartingCoords,
-    polygonQuestion,
+    polygonWithStartingCoordsQuestion,
     quadraticWithStartingCoordsQuestion,
     rayWithStartingCoordsQuestion,
     segmentWithLockedFigures,
@@ -111,7 +112,19 @@ export const InteractiveGraphPoint = (): React.ReactElement => (
 );
 
 export const InteractiveGraphPolygon = (): React.ReactElement => {
-    return <EditorPageWithStorybookPreview question={polygonQuestion} />;
+    return (
+        <EditorPageWithStorybookPreview
+            question={polygonWithStartingCoordsQuestion}
+        />
+    );
+};
+
+export const InteractiveGraphAngle = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={angleWithStartingCoordsQuestion}
+        />
+    );
 };
 
 export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {

diff --git a/packages/perseus-editor/src/components/__tests__/util.test.ts b/packages/perseus-editor/src/components/__tests__/util.test.ts
@@ -365,6 +365,26 @@ describe("getDefaultGraphStartCoords", () => {
             [-3, -3],
         ]);
     });
+
+    test("should get default start coords for an angle graph", () => {
+        // Arrange
+        const graph: PerseusGraphType = {type: "angle"};
+        const range = [
+            [-10, 10],
+            [-10, 10],
+        ] satisfies [Range, Range];
+        const step = [1, 1] satisfies [number, number];
+
+        // Act
+        const defaultCoords = getDefaultGraphStartCoords(graph, range, step);
+
+        // Default correct answer is 20 degree angle at (0, 0)
+        expect(defaultCoords).toEqual([
+            [7, 0],
+            [0, 0],
+            [6.5778483455013586, 2.394141003279681],
+        ]);
+    });
 });
 
 describe("getSinusoidEquation", () => {

diff --git a/packages/perseus-editor/src/components/start-coords-angle.tsx b/packages/perseus-editor/src/components/start-coords-angle.tsx
@@ -0,0 +1,28 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import type {Coord, PerseusGraphType} from "@khanacademy/perseus";
+
+type Props = {
+    startCoords: [Coord, Coord, Coord];
+    onChange: (startCoords: PerseusGraphType["startCoords"]) => void;
+};
+
+const StartCoordsAngle = (props: Props) => {
+    const {startCoords} = props;
+    return (
+        <View>
+            WIP
+            <br /> Start coords:
+            {startCoords.map((coord, index) => {
+                return (
+                    <View key={index}>
+                        {`Point ${index + 1}: (${coord[0]}, ${coord[1]})`}
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+export default StartCoordsAngle;